@charset "utf-8";
/* CSS Document */

/*--------------   SITE NAME   --------------*/


/*============================================*/
/*--------------- BASE STYLES ----------------*/
/*============================================*/


body {
    font-size:100%;
    text-align: center;
    color:#58595B;
    -webkit-font-smoothing:antialiased;
    font-family:HelveticaNeue, Helvetica, Arial, sans-serif;
}
.wrap {
    max-width:960px;
    padding:0px 10px;
    text-align: left;
    margin:auto;
}



/*============================================*/
/*---------------- TYPOGRAPHY ----------------*/
/*============================================*/



/* Place Holder for @font-face
@font-face {
    font-family: 'Raleway';
    src: url('/static/fonts/raleway_thin-webfont.eot');
    src: url('/static/fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/raleway_thin-webfont.woff') format('woff'),
         url('/static/fonts/raleway_thin-webfont.ttf') format('truetype'),
         url('/static/fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/
h1 {

}
h2 {

}
h3 {
    font-family:HelveticaNeue-Light, Helvetica, Arial, sans-serif;
    font-size:2rem;
    color:#000;
    margin-bottom:20px;
    font-weight: normal;
}
    #tout h3 {
        color:#FFF;
        font-size:1.125rem;
        font-weight: bold;
        margin-bottom:15px;
    }
h4 {
    color:#000;
    font-size:1.125rem;
    margin-bottom:10px;
}
p {
    font-size:.875rem;
    line-height: 1.4rem;
    margin-bottom:20px;
}
ul {
    margin-bottom:20px;
}
li {
    list-style:outside;
    margin-left:20px;
    font-size: .875rem;
    margin-bottom:10px;
    line-height: 1.2rem;
}
a {
    color:#529159;
    text-decoration: none;
}
    #tout a {
        font-weight: bold;
        color:#52D848;
    }


/*============================================*/
/*------------------ LAYOUT ------------------*/
/*============================================*/



/*-------------------- NAV -------------------*/

#languages {
    background:#000;
}
    #languages .wrap {
        text-align: right;
    }
    #languages li {
        display: inline-block;
    }
    #languages li a{
        display:inline-block;
        font-size:.75rem;
        color:#808285;
        padding:5px;
        display: block;
        text-decoration: none;
    }
        #languages li a:hover {
            color:#FFF;
        }
        #languages .selected a {
            color:#FFF;
        }

#logo {
    background:url(../images/smartgo-logo.png) center center no-repeat;
    background-size:contain;
    width:128px;
    height: 55px;
    text-indent: -5000px;
    overflow: hidden;
    display:inline-block;
    float:left;
    margin-top:30px;
}
nav ul {
    float:right;
    margin-top:30px;
    margin-bottom:0;
}
nav li {
    list-style: none;
    display:inline-block;
    text-align: center;
    vertical-align: top;
}
    nav li a {
        color:#52D848;
        text-decoration: none;
        display:block;
        padding:15px 5px;
        vertical-align: top;
        font-weight: bold;
    }
        nav li a:hover {
            border-bottom:1px solid #FFF;
            color:#FFF;
        }
        nav li .selected {
            border-bottom:1px solid #52D848;
        }
    nav .appstore-nav {
        width:153px;
        height:48px;
        margin-top:-15px;
    }
        nav .appstore-link:hover {
            border-bottom:none !important;
        }


/*------------------- TOUT -------------------*/

#tout {
    background: #000; 
    background: -webkit-radial-gradient(#58595B 30%, #000 100%); 
    background: -o-radial-gradient(#58595B 30%, #000 100%);
    background: -moz-radial-gradient(#58595B 30%, #000 100%); 
    background: radial-gradient(#58595B 30%, #000 100%); 
    border-bottom:15px solid #D1D3D4;
}
.tout-heading {
    color:#FFF;
    font-size:2.43rem;
    font-family:HelveticaNeue-Light, Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin-bottom:20px;
    -webkit-font-smoothing:antialiased;
}
#tout-text {
    width:60%;
    clear:both;
    color:#CCC;
    padding-top:50px;
    padding-bottom:70px;
}
#main-content {
    padding-top:50px;
    overflow: hidden;
    padding-bottom:50px;
}

/*--------------- MAIN STUFF -----------------*/

#main-article {
    float:left;
    width:60%;
}
#main-content aside {
    width:35%;
    float: right;
}
.social-link {
    margin-left:0;
    list-style: none;
}
.social-link img {
    vertical-align: middle;
    width:36px;
    display:inline-block;
    margin-right:8px;
}


/*------------------- HOME -------------------*/

#homepage #tout {
    margin-bottom:7%;
}

#homepage #tout .wrap {
    text-align: center;
}
#homepage #tout-text {
    clear:both;
    padding-top:30px;
    padding-bottom:30px;
    margin-left:20%;
}

#tout .main-image {
    display:block;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:-15%;
}
#homepage #main-content {
    overflow: hidden;
    padding-bottom:50px;
}
.align-left {
    width:45%;
    float:left;
    display:inline-block;
    vertical-align: middle;
}
.align-right {
    width:45%;
    float:right;
    display:inline-block;
    vertical-align: middle;
}
.feature-list li:nth-child(2){
    padding-top:130px;
}
#main-content img {
    max-width: 100%;
}
.row {
    clear:both;
    vertical-align: middle;
}
.feature-list {
    margin-bottom:0;
    padding-bottom:0;
}
.feature-list li {
    list-style: none;
    margin:0;
    margin-bottom:80px;
    text-align: center;
}
    .feature-list li img {
        margin-bottom:20px;
    }
    .feature-list li p {
        width:80%;
        margin-left:10%;
    }
.first-row h3 {
    padding-top:50px;
}
.first-row .align-right {
    padding-top:inherit;
}


/*------------------ FOOTER ------------------*/

.cta {
    background:#EAEAEA;
    padding:40px 0;
}
    #homepage .cta {
        margin-top:-70px;  
    }
    .cta .app-icon {
        float:left;
        width:17%;
        margin-right:4%;
    }
    .cta .text {
        display:inline-block;
        width:60%;
    }
    .cta .download-btn {
        float:right;
        margin-left:1%;
        width:19%;
        margin-top:25px;
        display:inline-block;
        text-align: right;
    }
        .cta .download-btn img {
            width:100%;
            max-height: 40px;
            margin-left:0;
            margin-right:0;
            vertical-align: top;
            text-align: right;
        }
        .cta h3 {
            padding-top:20px;
            margin-bottom:5px;
            font-size: 1.8rem;
        }
        .cta p {
            margin-bottom:0;
        }
footer {
    overflow: hidden;
    padding:30px 0 50px 0;
    background:#D2D3D5;
}
    footer p {
        font-size:.75rem;
        line-height: 1.4em;
    }
.footer-column {
    width:19%;
    margin-left:.5%;
    margin-right:.5%;
    float:left;
}
    .footer-column img {
        width:90%;
        margin-bottom:20px;
    }
    .footer-column li {
        list-style: none;
        margin-left:0;
        margin-bottom:8px;
    }
        .footer-column li a {
            text-decoration: none;
            color:inherit;
        }
            .footer-column li a:hover {
                color:#000;
            }


/*============================================*/
/*------------------- FORMS ------------------*/
/*============================================*/


input[type="text"], input[type="password"], input[type="number"], input[type="email"] {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline: none;
    background:none;
    font-size:1rem;
    padding:5px 2%;
    background:#EAEAEA;
    border-radius: 5px;
    margin-bottom:8px;
    width:96%;
}
    /* Hover, focus, active states for ALL types of text inputs */
    input[type="text"]:hover, input[type="text"]:active, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:active, input[type="password"]:focus, input[type="number"]:hover, input[type="number"]:active, input[type="number"]:focus, input[type="email"]:hover, input[type="email"]:active, input[type="email"]:focus {

}
.gray-button {
    outline:none;
    border:none;
    background:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    color:#529159;
    font-weight:bold;
    border:1px solid #999;
    text-align:center;
    padding:8px 22px;
    min-width:100px;
    max-width: 400px;
    display:inline-block;
    text-decoration:none;
    font-size:1em;
    background:#C9C1BC;
    background: -webkit-linear-gradient(top, #F1F3F2, #D1D2D4);
    background: -moz-linear-gradient(top, #F1F3F2, #D1D2D4);
    border-radius:5px;
    cursor: pointer;
}
    .gray-button:hover {
        background:#C9C1BC;
        background: -webkit-linear-gradient(top, #F1F3F2, #CCC);
        background: -moz-linear-gradient(top, #F1F3F2, #CCC);
    }
    .gray-button:active {
        background:#C9C1BC;
        background: -webkit-linear-gradient(bottom, #F1F3F2, #D1D2D4);
        background: -moz-linear-gradient(bottom, #F1F3F2, #D1D2D4);
    }
label {
    font-size:1rem;
    display:block;
    margin-bottom:8px;
}

select {
    -ms-appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    margin:0px;
    margin-bottom:10px;
    padding:0px;
    appearance:none;
    outline: none;
    border: none;
    background: none;
}
    select:hover {

    }



/*============================================*/
/*--------------- MEDIA QUERIES --------------*/
/*============================================*/


/*-------------- iPAD LANDSCAPE --------------*/

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


}


/*--------------- iPAD PORTRAIT --------------*/

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

    #tout-text {
        width:100%;
        display:block;
        float:none;
        padding-bottom:30px;
    }
    #homepage #tout-text {
        width:90%;
        float: none;
        margin-left:5% !important;
        margin-right:0 !important;
    }
}

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

    #main-article {
        width:100%;
        float:none;
        display: block;
    }
    #main-content aside {
        width:100%;
        float:none;
        display:block;
    }
    .cta .wrap {
        text-align: center;
    }
    .cta .text {
        width:100%;
        float:none;
        display:block;
    }
        .cta .text img {
            display:block;
            float:none;
            width:20%;
            margin-left:auto;
            margin-right:auto;
        }
    .cta .download-btn {
        float:none;
        margin-left:auto;
        margin-right:auto;
        width:50%;
        margin-top:20px;
        display:block;
    }
    .footer-column {
        display:block;
        float:none;
        width:100%;
        margin-left:0;
        margin-right:0;
    }
    .footer-column img {
        width:40%;
        margin-left:auto;
        margin-right:auto;
    }
    #tout .main-image {
        width:100%;
        margin-left:0;
        margin-right:0;
    }
    .align-right, .align-left {
        width:100%;
        margin:0 0 30px 0 !important;
        float:none;
        display:block;
        padding-top:0 !important;
    }
    #homepage .cta {
        margin-top:0;
    }
    #homepage #main-content {
        padding-top:0px;
    }
    #tout {
        padding-top:30px;
    }
    #languages {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        z-index: 101;
    }
        .languages-open {
            min-height: 100%;
            position: fixed !important;
        }
            .languages-open li {
                padding:10px 0 !important;
                border-bottom:1px solid #333;
            }   
            .languages-open a {
                color:#FFF !important;
            }
    #languages li {
        display:none;
        text-align: left;
        margin-left:0;
        padding:5px 0;
        font-size:.815rem;
    }
        #languages li a {
            font-size: .815rem;
        }
        #languages .selected {
            display:block;
        }
        nav {
            margin-top:0px;
            clear: both;
        }
        nav ul {
            float:none;
            margin-top:0;
            text-align: center;
        }
        nav li {
            width:auto;
            min-width:48%;
            margin-left:0;
            margin-bottom:-10px;
        }
        #logo {
            float:none;
            text-align: center;
            width:50%;
            height:80px;
            margin-left:auto;
            margin-right:auto;
            margin-top:10px;
            margin-bottom:10px;
            float:left;

        }
        nav .appstore-link {
            position:absolute;
            top:24px;
            right:0px;
        }
        #tout .wrap {
            position: relative;
        }

}


/*-------------- iPHONE PORTRAIT --------------*/


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


}






/*
-------------------------------------------------------------------
 ___ _   _ ___ _  _____   ___   _   _  _____   _      _   _  _____ 
| _ ) | | |_ _| ||_   _| / __| /_\ | ||_   _| | |    /_\ | |/ / __|
| _ \ |_| || || |__| |   \__ \/ _ \| |__| |   | |__ / _ \| ' <| _| 
|___/\___/|___|____|_|   |___/_/ \_\____|_|   |____/_/ \_\_|\_\___|

------------ OPERAM • FERVOR • SIMPLICITAS • INNOVATIO ------------

*/