/* fonts */
/* fonts */
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
    url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
    url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansitalic';
    src: url('../fonts/OpenSans-Italic-webfont.eot');
    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
    url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/OpenSans-Light-webfont.eot');
    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
    url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
    url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('../fonts/OpenSans-LightItalic-webfont.eot');
    src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
    url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body{
    height: 100%;
}
body{
    font-family:'open_sanslight', "Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#272727;
    font-size:18px;
}
h1,h2,h3,h4,h5{
    font-family:'open_sansbold';
    text-transform: uppercase;
    padding:0;
    margin:0;
}
h2{
    font-size:64px;
    text-align: center;
    margin:100px 0 50px;
}
h3{
    font-size:40px;
    margin-bottom: 20px;
}
h4{
    font-size:30px;
    border-bottom: 1px solid #E5E5E5;
    box-shadow:0 1px 0 0 #FFFFFF;
    padding-bottom: 10px;
    display: inline-block;
    margin-bottom: 20px;
}
h5{
    font-size:35px;
}
p{
    font-size:16px;
    line-height:25px;
    margin-bottom: 50px;
}
a:hover, a:active, a:focus {
    outline: 0;
}
img{
    max-width: 100%;
}
sup{
    top:-0.3em;
}
strong{
    font-weight: normal;
    font-family: 'open_sansbold';
}
em{
    font-style:normal;
    font-family: 'open_sansitalic';
}
.semi{
    font-family: 'open_sanssemibold';
}
.em2{
    font-family: 'open_sanslight_italic';
}
.btn{
    color:#272727;
    border-radius:0;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
}
.btn-outline{
    border:1px solid #272727;
}
.btn-outline:hover{
    background:#322F31;
    color:#ffffff;
}
.btn-outline-white{
    border:1px solid #ffffff;
    color:#ffffff;
}
.btn-outline-white:hover{
    background:#ffffff;
    color: #322F31;
}
.btn-black{
    background:#322f31;
    border:1px solid #322f31;
    color:#ffffff;
    padding-left:25px;
    padding-right: 25px;
}
.btn-black:hover,
.btn-black:focus{
    background:#ffffff;
    color:#322f31;
}
.form-control{
    border-radius: 0;
    border-color: #272727;
}
.form-control:focus{
    border-color: #272727;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.form-control.error{
    color:#f26c4f;
}
label.error{
    color:#f26c4f;
    font-size:12px;
}
textarea.form-control{
    height:200px;
}
.ul-arrow{
    list-style: none;
    font-size:15px;
    margin:0;
    padding:0;
}
.ul-arrow li{
    background:url('../images/arrow-right.png') no-repeat 0 9px;
    padding-left:20px;
    margin-bottom:10px;
}
.red{
    color:#f26c4f;
}
.blue{
    color:#6dc4e9;
}
.green{
    color:#8fd274;
}
.purple{
    color:#e594ea;
}
.yellow{
    color:#fad861;
}
.pink{
    color:#f77373;
}
/* TOP */
.top{
    height:100%;
    position: relative;
}
.intro{
    height:100%;
    background: #efedee url(../images/bg-intro.jpg) no-repeat center center;
    background-size: cover;;
}
.intro-inner{
    width:100%;
}
.intro-inner img{
    margin:0 auto;
    display: block;
}
.navbar{
    position:absolute;
    bottom:0;
    border-radius:0;
    left:0;
    right: 0;
    margin:0;
}
.navbar-fixed{
    position: fixed;
    top:0;
    bottom:auto;
    z-index: 10000;
}
.navbar.navbar-inverse a{
    font-family: 'open_sansregular';
    border-right: 1px solid #171717;
    box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.067) inset;
    color: #878787;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 -1px 0 #292929;
    text-transform: uppercase;
    text-align: center;
    padding:17px 0;
}
.navbar.navbar-inverse li:last-child a{
    border:none;
    box-shadow:none;
}
.navbar.navbar-inverse a.navbar-brand{
    padding:14px 0 0 0;
    line-height:24px;
    height:54px;
}
.navbar.navbar-inverse a.navbar-brand img{
    max-width: 80%;
}
@media (min-width: 768px) {
    .navbar .navbar-header{
        width:9%;
    }
    .navbar .navbar-collapse{
        padding:0;
    }
    .navbar .navbar-header .navbar-brand{
        display: block;
        width:100%;
    }
    .navbar .navbar-nav{
        width:91%;
    }
    .navbar .navbar-nav li{
        width:14.2857%;
    }
}

.navbar.navbar-inverse .active a,
.navbar.navbar-inverse .active a:hover,
.navbar.navbar-inverse a:hover,
.navbar.navbar-inverse a:focus{
    background-color:transparent;
}

/* WHO ARE WE */
#who-are-we{
    text-align: center;
    padding-top:100px;
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 80px;
}

#who-are-we p{
    margin:50px 0;
}

/* MEET THE TEAM */
#meet-the-team{
    background: #f8f8f8;
    position:relative;
    padding-bottom: 80px;
}
#meet-the-team .arrow-down{
    position: absolute;
    left:50%;
    margin-left:-42px;
    top:-1px;
}
#meet-the-team .team-member .nav-tabs{
    border:none;
    margin-bottom:30px;
}
#meet-the-team .team-member .nav-tabs li{
    width:25%;
    text-align:center;
}
#meet-the-team .team-member .nav-tabs li a{
    border:none !important;
    background:transparent !important;
    color:#555555;
    cursor: default;
}
#meet-the-team .team-member .nav-tabs li .avatar{
    width:60%;
    margin-bottom: 20px;
    filter: url("../images/grayscale.svg#greyscale");
}
#meet-the-team .team-member .nav-tabs li h3{
    font-size:22px;
    margin-bottom:11px;
}
#meet-the-team .team-member .nav-tabs li span{
    font-size:14px;
    color:#b6b6b6;
}
#meet-the-team .team-member .nav-tabs li .arrow{
    visibility: hidden;
}
#meet-the-team .team-member .nav-tabs li.active .arrow{
    visibility: visible;
}
#meet-the-team .team-member .nav-tabs li.active .avatar{
    filter:none;
    transform: scale(1.02, 1.02);
}
#meet-the-team .team-member p{
    padding:0 40px;
}
#meet-the-team .team-member-mobile{
    display:none;
}
#meet-the-team .team-member .tab-pane{
    min-height:170px;
}
#meet-the-team .team-member .tab-pane p{
    font-size:14px;
    line-height:28px;
}
@media (max-width: 767px){
    #meet-the-team .team-member{
        display:none;
    }
    #meet-the-team .team-member-mobile{
        display: block;
        text-align: center;
    }
    #meet-the-team .team-member-mobile .member-face{
        text-align:center;
        margin-bottom:20px;
    }
    #meet-the-team .team-member-mobile .member-face img{
        margin-bottom:20px;
    }
    #meet-the-team .team-member-mobile .member-face span{
        color:#b6b6b6;
    }
}


/* HOW ITS DONE */
#goal{
}

/* MISSION */
#mission {
    height:500px;
    background:url('../images/image1.jpg') no-repeat 50% 0;
    background-size: cover;
    background-attachment: fixed;
}
@media (max-width: 1024px){
    #mission {
        background-attachment: scroll;
    }
}
#goal p{
    text-align:center;
}

@media (min-width: 1024px){
    #goal .iphone{
        background:url('../images/iphone.jpg') no-repeat center top;
        background-size:contain;
        height: 320px;
        position: relative;
    }

    #goal .iphone .iphone-inner{
        position: absolute;
        top:75px;
        left:170px;
        color:#ffffff;
    }

    #goal .iphone .iphone-inner li{
        background-image:url('../images/arrow-right-white.png');
    }
}
/* SIX-IN */
#six-in{
    background: #f5f5f5;
    padding-bottom: 80px;
}
#six-in .tile{
    text-align:center;
    margin-bottom: 80px;
    opacity: 0;
}
#six-in .tile img{
    max-width: 60%;
}
#six-in .tile h5{
    margin:50px 0 20px;
}
#six-in .tile p{
    font-size:16px;
    padding:0 26px;
    margin:0;
}
#six-in .next{
    padding-left:50px;
    padding-right:50px;
}
#six-in .list{
    min-height:250px;
}
#six-in .list h5{
    margin-bottom:30px;
}
#six-in .list img{
    max-width: 70%;
}
#six-in .navigation a{
    display: inline-block;
    width:71px;
    height:8px;
    border:1px solid #bfbfbf;
    margin:0 2px;
}
#six-in .navigation a.current{
    background:#bfbfbf;
}
#six-in .slidesjs-navigation{
    display: none;
}
@media (max-width: 767px){
    #six-in .list h5{
        margin:50px 0 20px;
        text-align:center;
    }
    #six-in .list img{
        max-width: 60%;
    }
    #six-in .tile p{
        padding:0;
    }
}

/* SERVICE */
#service{
    text-align: center;
    margin-bottom: 80px;
}
#service p{
    padding:0 100px;
}
@media (max-width: 1024px){
    #service p{
        padding:0;
    }
}
#service .title{
    font-family: 'open_sanssemibold';
    padding:20px 0 0 0;
}
#service .title-red{
    border-top: 4px solid #f26c4f;
}
#service .title-pink{
    border-top: 4px solid #f77373;
}
#service .title-yellow{
    border-top:4px solid #fad861;
}
#service .title-green{
    border-top:4px solid #8fd274;
}

/* PRICING */
#pricing {
    background:#322f31;
    color:#ffffff;
    position: relative;
    text-align:center;
    padding-bottom: 80px;
}
#pricing .arrow-down{
    position:absolute;
    top:0;
    left:50%;
    margin-left:-48px ;
}
#pricing .price-tile{
    background: #ffffff;
    height: 100px;
    color:#272727;
    font-size:20px;
    text-transform: uppercase;
    font-family: 'open_sansbold';
    padding-top:37px;
    margin-bottom:40px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
}
#pricing .price-tile:hover{
    font-size:22px;
    padding-top:35px;
}
@media (max-width: 1024px){
    #pricing .price-tile{
        font-size:16px;
    }
    #pricing .price-tile:hover{
        font-size:16px;
    }
}
#pricing .tile-pink{
    border-bottom: 4px solid #f77373;
}
#pricing .tile-purple{
    border-bottom: 4px solid #e594ea;
}
#pricing .tile-blue{
    border-bottom:4px solid #6dc4e9;
}
#pricing .tile-green{
    border-bottom:4px solid #8fd274;
}
#pricing .tile-yellow{
    border-bottom:4px solid #fad861;
}
#pricing .tile-red{
    border-bottom:4px solid #f26c4f;
}
#pricing .note{
    font-size:12px;
    margin-bottom:40px;
}
#pricing .note-left{
    text-align:right;
}
#pricing .note-right{
    text-align:left;
}

/* CRAZY MAN */
#crazy-man{
    height:500px;
    background:url('../images/image2.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    text-align:center;
}
@media (max-width: 1024px){
    #crazy-man{
        background-attachment: scroll;
    }
}
#crazy-man .text{
    margin-top:200px;
}

/* CONTACT */
#contact{
    margin-bottom: 80px;
}
ul.contact-info{
    margin:0;
    padding:0;
    list-style: none;
}
ul.contact-info li{
    margin-bottom:30px;
    font-size:16px;
}

ul.contact-info li img{
    margin-right:15px;
}

/* MAP */
#map{
    text-align: center;
}
#map .find-us{
    text-transform: uppercase;
    color:#ffffff;
    height:80px;
    line-height: 80px;
    display: block;
    background:#322f31;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
}
#map .find-us:hover,
#map .find-us:active,
#map .find-us:focus{
    text-decoration: none;
}
#map .find-us:hover{
    color:#322f31;
    background:#ffffff;
}
#map .find-us span{
    margin-left:5px;
    font-size:30px;
    vertical-align: top;
}
#map .find-us .icon-up-open-big{
    display: none;
}
#map .find-us.on .icon-down-open-big{
    display: none;
}
#map .find-us.on .icon-up-open-big{
    display: inline;
}
#gmap{
    display: none;
    width:100%;
    height:500px;
}

/* FOOTER */
footer{
    font-size:14px;
    padding-top:50px;
    height:180px;
    position: relative;
}

footer .copyright{
    display: block;
    margin-top:10px;
    margin-bottom:20px;
    overflow: hidden;
}
footer .social{
    text-align: right;
}
footer .social a{
    display: inline-block;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    border:1px solid #8f8f8f;
    opacity: 0.6;
}
footer .social a:hover{
    border-color: #322F31;
    opacity: 1;
}
@media (max-width: 640px){
    footer .social{
        text-align: center;
    }
}
footer .back-to-top{
    display: block;
    margin:20px auto 0;
    width:58px;
    height: 60px;
    background:#322F31;
    color: #ffffff;
    font-size:25px;
    text-align:center;
    padding-top:7px;
    border-left:1px solid #322f31;
    border-top:1px solid #322f31;
    border-right:1px solid #322f31;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
}
footer .back-to-top:hover{
    background:#ffffff;
    color:#322f31;
}