html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    background-color: #413f3f;
    color: #fff;
    font-family: 'Lato','Arial',sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
/*to xrhsimopoioume gia na katharisoume to float
an den to katharisoume tha mas trwei ta kena anamesa stis eikones pou einai float 
kai den tha exoyme apostasi apo to epomeno section
kai prepei panta na t vazoume gia na exoume ta epithymyta apotelesmata*/
.clearfix {
    zoom: 1
}

    .clearfix:after {
        content: '.';
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }
/*
----------------------------------
    REUSABLE COMPONENTS
----------------------------------
*/

.row {
    max-width: 1140px;
    margin: 0 auto;
}

section {
    padding: 5% 0;
    margin-bottom: 8%;
}

.karavisAchie{
    list-style:circle;
    margin-left:65%;
}

.logo {
    height: 20%;
    width: auto;
    float: left;
}

.logo-sticky {
    display: none;
    height: 70px;
    width: auto;
    float: left;
    margin: 5px 0;
}



/*Main navigator*/

/*einai to menu pou blepoume sthn selida panw panw*/
.main-nav {
    float: right;
    list-style: none;
    margin-top: 7%;
}

    .main-nav li {
        display: inline-block;
        margin-left: 40px;
    }

        .main-nav li a:link,
        .main-nav li a:visited {
            padding: 8px 0;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 80%;
            border-bottom: 2px solid transparent;
            -webkit-transition: border-bottom 0.2s;
            transition: border-bottom 0.2s;
        }

        .main-nav li a:hover,
        .main-nav li a:active {
            border-bottom: 2px solid rgba(211, 211, 33, 0.88);
        }



.mobile-nav {
    margin-left: 60%;
}

.topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
}

    .topnav #myLinks {
        display: none;
    }

    .topnav a {
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }

        .topnav a.icon {
            padding: 3% 3%;
            font-size: 30px;
            background: black;
            display: block;
            position: fixed;
            right: 10%;
            top: 0;
        }


.mobile {
    display: none;
    background-color: rgba(0,0,0,0.0);
}

/*-----------------------sticky nav----------------------------------*/


.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.98);
    box-shadow: 0 2px 2px #efefef;
    z-index: 9999;
}


    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {
        padding: 16px 0;
        color: #555;
    }

    .sticky .main-nav {
        margin-top: 2%;
    }




    .sticky .logo-sticky {
        display: block;
    }


    .sticky .logo {
        display: none;
    }

    .sticky .mobile-nav a {
        color: black;
    }
/*
---------------------------------------------------
 HEADER
---------------------------------------------------
*/

header {
    background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(0, 0, 0, 0.7)),to(rgba(0, 0, 0, 0.7))),url(img/StrengthInDepthABAllTogether1.jpeg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url(img/StrengthInDepthABAllTogether1.jpeg);
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    -o-background-position: center;
    -moz-background-position: center;
    -webkit-background-position: center;
    height: 100%;
    background-attachment: fixed;
    -o-background-attachment: fixed;
    -moz-background-attachment: fixed;
    -webkit-background-attachment: fixed;
}


    .hero-text-box {
        position: absolute;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
       
        top: 70%;
        left: 40%;
        color: #838043;
        text-align:center;
    }


    .section-meet-Karavis img {
        float: left;
        opacity: 0.7;
        filter: grayscale(10%);
        border-radius: 15%;
        height:70%;
    }

    .section-meet-Karavis p {
        line-height: 145%;
       /*width: 70%;*/ 
        margin-left: 30%;
        padding-left: 30%;
        margin-top:5%;
    }

    .section-meet-Karavis::after {
        content: "";
        clear: both;
        display: table;
    }



    .section-how-it-started p {
        float: left;
        line-height: 145%;
        width: 40%;
        margin-left: 4%;
    }

    .section-how-it-started img {
        float: right;
        border-radius: 15%;
        width: 40%;
        height: 40%;
        margin-right: 4%;
        margin-top: -5%;
    }







    /*---------------------HEADINGS-------------------*/
    h1 {
        margin-top: 0;
        margin-bottom: 2%;
        color: #fff;
        font-size: 150%;
        word-spacing: 0.4%;
        letter-spacing: 0.1%;
    }

    h2 {
        font-size: 180%;
        word-spacing: 0.2%;
        text-align: center;
        margin-bottom: 3%;
        letter-spacing: 0.1%;
    }

    h3 {
        text-align: center;
        margin-bottom: 1.5%;
    }

    h1, h2, h3 {
        font-weight: 300;
        text-transform: uppercase;
    }

        h2:after {
            /*to block xrhsimopoei olo to width!  dimiourgei ena kouti meta to element epeidi exoume balei to after*/
            display: block;
            height: 0.2%;
            background-color: #838043;
            content: "";
            width: 10%;
            margin: 0 auto;
            margin-top: 3%;
        }


    /*----------------------ICONS---------------------------*/
    .icon-big {
        font-size: 350%;
        display: block;
        color: #838043;
        margin-bottom: 7%;
    }





    /*bOX FOR ICONS*/
    .box p {
        font-size: 90%;
        line-height: 145%;
    }

    /*H parakatw klash ousiastika einai h col span-1-of-4 box, apla h klash col span-1-of-4 anoikei sto 
grid.css kai sto diko mas anoikei mono h box, etsi asxoloumaste mono me authn*/
    .box {
        padding: 1%;
    }


.how{
    margin-left:15%;
}

.descBoxes{
    margin-left:15%;
}
/*----------------------------Plan boxes for sign in----------------------------*/
.section-plans{
    margin-left:-5%;
}
.plans {
    margin-left: 28%;
}

.bsm {
    margin-right: 3%;
    padding: 1%;
}

    .plan-box {
        border-radius: 5%;
        width: 120%;
        padding: 10% -10%;
        -webkit-box-shadow: 0 2px 2px #efefef;
        box-shadow: 0 2px 2px #efefef;
    }

   
    .plan-box div {
        padding: 10% 0%;
        border-bottom: 1px solid #e8e8e8;
    }

        .plan-box div:first-child h3 {
            color: #fff;
        }

        .plan-box div:first-child {
            background-color: #d9d23c;
            border-top-right-radius: 0.5%;
        }

        .plan-box div:last-child {
            text-align: center;
            border: 0;
        }

    .plan-price {
        text-align: center;
        font-size: 200%;
        margin-bottom: 7%;
        font-weight: 100;
        color: #d9d23c;
    }

    .description li {
        font-size: 70%;
    }

    .plan-price span {
        font-size: 30%;
        font-weight: 300;
    }

    .plan-box ul {
        list-style: none;
    }

    .ind .plan-price {
        font-size: 185%;
    }

        .ind .plan-price span {
            font-size: 50%;
        }





    /*----------------------Buttons--------------------------*/
    .btn:link,
    .btn:visited,
    input[type=submit] {
        /*edw ftiaxnoume ta koina pou exoyn ta 2 koumpia kai stis parakatw klaseis 
    ftiaxnoume to kathena ksexwrista*/
        display: inline-block;
        padding: 5% 5%;
        font-weight: 300;
        text-decoration: none;
        border-radius: 20px;
        /*auto ot bazoume gia na exoume mia pio omorfh allagh xrwmatos sto koumpi*/
        -webkit-transition: background-color 0.2s,border 0.2s, color 0.2s;
        transition: background-color 0.2s,border 0.2s, color 0.2s;
    }



    .btn-full:link,
    .btn-full:visited,
    input[type=submit] {
        /*xrhsimopoioume flat ui color
    edw gemizoume olo to koumpi*/
        background-color: #d9d23c;
        border: 1px solid #d9d23c;
        color: #fff;
    }

        .btn:hover,
        .btn:active,
        input[type=submit]:hover,
        input[type=submit]:active {
            background-color: #989326;
            color: #000;
        }

    .btn-full:hover,
    .btn-full:active,
    input[type=submit] {
        border: 1px solid #989326;
    }

    .btn-ghost:link,
    .btn-ghost:visited {
        /*xrhsimopoioume flat ui color edw ftiaxnoume mono to perigrama*/
        border: 1px solid #d9d23c;
        color: #d9d23c;
    }

    .btn-ghost:hover,
    .btn-ghost:active {
        border: 1px solid #d9d23c;
        color: #fff;
    }

    footer {
        background-color: #333;
        padding: 5% 0;
        font-size: 80%;
        width: 105%;
    }

    .footer-nav {
        list-style: none;
        float: left;
    }




    .special-links {
        list-style: none;
        float: right;
        margin-right: 10%
    }

        .footer-nav li,
        .special-links li {
            display: inline-block;
            margin-right: 20px;
        }

            .footer-nav li:last-child,
            .special-links li:last-child {
                margin-right: 0;
            }




            .footer-nav li a:link,
            .footer-nav li a:visited,
            .special-links li a:link,
            .special-links li a:visited {
                text-decoration: none;
                border: 0;
                color: #888;
                -webkit-transition: color 0.2s;
                transition: color 0.2s;
            }

            .footer-nav li a:hover,
            .footer-nav li a:active,
            .special-links li a:hover,
            .special-links li a:active {
                color: #ddd;
            }



            .special-links li a:link,
            .special-links li a:visited {
                font-size: 160%;
            }

    .fbk,
    .igram {
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
    }


        .fbk:hover {
            color: #3b5998;
        }

        .igram:hover {
            color: #00aced;
        }

    .footer p {
        color: #888;
        text-align: center;
        margin-top: 2%;
    }
    .mobileParagraph{
        display:none;
    }

@media only screen and (max-width: 1404px) {
    h3 {
            font-size: 87%;
        }

        h1 {
            font-size: 120%;
            margin-left: 10%;
        }

        .how {
            margin-left: 2%;
        }
        .how h2{
            margin-left:-15%;
        }
        .descBoxes {
            margin-left: 2%;
        }

        .section-how-it-started h2 {
            margin-left: -7%;
        }
        .section-meet-Karavis h2 {
            margin-left: -7%;
        }
        .plans {
            margin-left: 20%;
        }
        .section-meet-Karavis img {
            margin-top:10%;
        }

        .section-meet-Karavis p {
            margin-top: 15%;
            margin-left: 20%;
        }


        .hero-text-box {
            width: 100%;
            padding: 0 2%;
        }

        .row {
            width: 100%;
            padding: 0 2%;
        }
    }


    /*media queries*/

    @media only screen and (max-width: 1200px) {
        header {
            background-attachment: scroll;
            -o-background-attachment: scroll;
            -moz-background-attachment: scroll;
            -webkit-background-attachment: scroll;
            width: 100%;
        }

        h1 {
            font-size: 120%;
            margin-left: 10%;
        }

        .section-meet-Karavis img {
            margin-left: 5%;
        }

        .section-meet-Karavis p {
            margin-top: 13%;
        }
      

        .hero-text-box {
            width: 100%;
            padding: 0 2%;
        }

        .row {
            width: 100%;
            padding: 0 2%;
        }

        .how {
            margin-left: 3%;
        }

        .descBoxes {
            margin-left: 3%;
        }


        .plans {
            margin-left: 20%;
        }
    }

    @media only screen and (max-width: 1103px) {
        body {
            font-size: 18px;
        }

     

        .section-meet-Karavis p {
            margin-top: 18%;
        }
      

        .logo {
            height: 14%;
        }

        .logo-sticky {
            height: 50px;
        }

    

        .plan-price {
            font-size: 200%;
        }

        .description li {
            font-size: 70%;
        }

        .plan-box div:first-child h3 {
            font-size: 100%
        }

        .main-nav {
            top: -70%;
        }

            .main-nav li {
                font-size: 95%;
                margin-top: 0;
            }

        .full div:first-child h3 {
            font-size: 110%
        }
    }

    @media only screen and (max-width: 954px) {
        .logo {
            height: 15%;
        }

        .main-nav {
            margin-top: 0%;
            width: 91.5%;
        }



        .section-meet-Karavis p {
            margin-top: 15%;
        }

       

        .ind .plan-price {
            font-size: 185%;
        }
    }

    @media only screen and (max-width: 924px) {

        .logo {
            height: 11%;
            width: 9%;
        }

        .main-nav {
            margin-top: 0;
            width: 94%;
        }

        .plans {
            width: 98%;
        }

        .home {
            margin-left: 5;
        }

        .section-meet-Karavis img {
            margin-left: 2%;
        }
        #Karavis p{
            margin-top:3%;
        }
       
      
    }



    @media only screen and (max-width: 895px) {
        body {
            font-size: 18px;
        }

        .logo {
            height: 10%;
        }

        .main-nav {
            margin-top: 0;
            width: 91.5%;
        }

        .plans {
            width: 90%;
        }

        .home {
            margin-right: 0%;
        }

        .ind .plan-price {
            font-size: 180.31%;
        }
    }

    @media only screen and (max-width: 865px) {
        .plan-box div:first-child h3 {
            font-size: 90%;
        }

        .ind .plan-price {
            font-size: 175.5%;
        }

        .mobile {
            display: block;
        }

        .webApp {
            display: none;
        }
        .plans .col:first-child {
            margin-left: 10%;
        }
        .bsm{
            margin-left:10%
        }
        .section-meet-Karavis img {
            margin-left: 0%;
            width:45%;
        }
       
    }



    @media only screen and (max-width: 780px) {
     

        .row {
            padding: 0 4%;
        }

        h1 {
            font-size: 140%;
        }

        .logo {
            height: 20%;
            width: 20%;
        }

        .logo-sticky {
            height: 70px;
        }

        .hero-text-box h1 {
            margin-left: 10%;
        }
       



        .mobile-nav li a {
            font-size: 17px;
        }


        .mobile-nav {
            margin-left: 50%;
        }


        .sticky .mobile-nav-icon ion-icon {
            color: #555;
        }

        .sticky .mobile-nav-icon ion-icon {
            margin-left: -20%;
            margin-top: 40%
        }



        .bsm {
            width: 60%;
            height: auto;
            padding: 1% 0;
          
        }

        .plan-box {
            width: 70%;
            height: auto;
            padding: 0% 0%;
        }







      
        .description li {
            font-size: 75%;
        }



        .box {
            width: 100%;
        }
    }
    @media only screen and (max-width: 700px) {
        #Karavis img{
            margin-left:-3%;
            width:65%;
        }
        #Karavis ul {
            margin-top: 5%;
            margin-left: 4%;
        }
       
    }

    @media only screen and (max-width: 683px) {
        header {
            width: 100%;
        }

        #Karavis p {
            margin-top: 0;
        }

        #Karavis img {
           height:57%;
           width:60%;
        }

        #Karavis  ul{
            
          margin-top:5%;
          margin-left:4%;
        }


        .description li {
            font-size: 110%;
        }
    }

    @media only screen and (max-width: 573px) {
        body {
            font-size: 16px;
        }

        .section-meet-Karavis img {
            margin-left: 0%;
            width: 55%;
            height: 70%;
        }

        .section-meet-Karavis p {
            margin-top: 11%;
            margin-left: 30%;
        }

        .mobile-nav {
            margin-left: 40%;
        }
    }

    @media only screen and (max-width: 540px) {
        .section-meet-Karavis img {
            width: 70%;
            height: 80%;
        }
        .section-meet-Karavis p {
            margin-top: 3%;
            margin-left: 30%;
        }

        .section-how-it-started img {
            margin-top: -8%;
        }
    }

    @media only screen and (max-width: 480px) {

        #Karavis p {
            margin-left:5%;
            
            padding:0;
            margin-bottom:0;
        }
        #Karavis ul {
            margin-left: 16%;
        }
        #Karavis img{
            width: 75%;
            height:60%;
            margin-left:14%;

        }
        #bsmStart img {
            margin-left: 0;
            float: left;
            width: 60%;
            margin-left: 14%;
        }
        .notMobile{
            display:none;
        }
        #bsmStart .mobileParagraph {
            display: inline-block;
            width:100%
        }
        .mobile-nav {
            margin-left: 35%;
        }

            .mobile-nav li a {
                font-size: 15px;
            }

        .mobile .sticky .topnav a {
            font-size: 15px;
        }
    }

    @media only screen and (max-width: 370px) {
        body {
            font-size: 16px;
        }

        


        .sticky .mobile-nav-icon ion-icon {
          
            margin-top: 4%
        }

        .mobile-nav {
            margin-left: 30%;
        }

            .mobile-nav li a {
                font-size: 13px;
            }

        .section-how-it-started img {
            margin-top: -9%;
        }
    }

    @media only screen and (max-width: 314px) {
    

        .description li {
            font-size: 90%;
        }

        .section-how-it-started img {
            margin-top: -17%;
        }
    }


    @media only screen and (max-width: 300px) {
        .plans {
            font-size: 10px;
        }

        .description li {
            font-size: 75%;
        }


        .hero-text-box h1 {
            font-size: 110%;
        }

        .mobile-nav {
            margin-left: 30%;
        }
    }

    @media only screen and (max-width: 223px) {
        body {
            font-size: 10px;
        }

        .bsm {
            width: 70%;
        }

        .plan-box {
            width: 80%;
        }

        .section-meet-Karavis img {
            margin-top: 40%;
            width: 54%;
            height: 40%;
        }

        .section-how-it-started img {
            margin-top: -25%;
        }
    }