@import "fonts.css";


::-webkit-scrollbar{ width: 12px;}
::-webkit-scrollbar-thumb {min-height: 20px; border-color: transparent; border-style: solid; border-width: 4px 3px 2px 4px; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.2); border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {box-shadow: inset 0 0 0 4px rgba(0,0,0,0.3);}
::-webkit-scrollbar-thumb:active {box-shadow: inset 0 0 0 4px rgba(0,0,0,0.5);}
::-webkit-scrollbar-track {border-width:0; background: #EEE; border-left: 1px solid #EEE;}
::-webkit-scrollbar-track:hover {background-color: #fafafa;}
::-webkit-scrollbar-corner {background:0;}

html {height: 100%; min-height: 100%; min-width: 360px;}
body {font-size: 1em; line-height: 1.4; height: 100%; min-height: 100%; width: 100%; margin: 0;}
.wrapper {transition: transform .2s; position: relative; width: 100%; overflow: hidden;}
.container {font-size: 16px;}

.container_media {position: relative; width: 360px; height: 100%; margin: 0 auto; padding: 0 15px;}
.container_main {position: relative; height: 100%;}


header {display: block; width: 100%; position: relative; overflow: hidden;}
.logo {position: absolute; left: 35px; top: 33px; z-index: 20; width: 139px; height: 50px; background: url("../images/icons/logo.png") no-repeat;}

nav {position: absolute; right: 35px; top: 50px; z-index: 20;}
nav i {font: 18px 'Exo2bold'; color: #ff2e2e; margin-left: 40px; text-decoration: none; cursor: pointer;}
nav i:hover {color: #fafafa; text-decoration: none;}
nav i:last-of-type {margin-right: 0;}

.header__text {display: block; float: left; margin-top: 17%; width: 100%;}
.header__h1   {font-family: 'WorkSansExtraBold', sans-serif;}
.header__h3   {color: rgba(255,255,255,.8); margin-top: 30px; line-height: 32px; }

.btn.blue {width: auto; padding: 15px 90px; border-radius: 2px; text-align: center; font: 18px 'MuseoSansBold', sans-serif; transition: all .2s ease; margin-top: 40px;}
.btn.blue:hover {background: rgba(89,170,208,.2); color: #fafafa;}
.btn.blue:active {background: rgba(89,170,208,.3); color: #fafafa;}
.btn.blue:focus {color: #75c3d7;}


/*Блок с узкими колонками*/
.wrapper.thin_cols {background: #eef2f5; padding: 60px 0 90px;}
.info_block_thin_wrapper {display: block; text-align: center;}
.info_block_thin {width: 298px; display: inline-block; vertical-align: middle; margin: 45px 0 0; }
.info_block_thin.left {text-align: left;}
.info_block_thin.right {text-align: right;}
.info_block_thin p {color: #1c3345; font: 16px/28px 'WorkSans', sans-serif; margin: 15px 0; }
.info_block_thin p:last-child:after {content: ''; display: inline-block; vertical-align: middle; margin-left: 7px; width: 14px; height: 14px; background: url("../images/icons/paragraph.png") no-repeat;}
.info_block_thin h3 {margin: 0 0 20px; font: 32px 'WorkSansMedium', sans-serif;}
.red {color:#fc0b00;}
.media_hide {display: none;}

/*ютуб видос*/
.video-youtube {}
.video-youtube iframe {width: 100%; height: 350px;}

/*how-it-works*/
.howit-works-area__img {margin: 0 auto; display: block; text-align: center; min-height: 200px;}

/*faces*/
.face {display: inline-block; vertical-align: top; min-width: 185px; margin: 20px 15px;}
.face_wrapper {position: relative; min-height: 210px; text-align: center;}
.face_wrapper img {display: block; margin: 0 auto;}
.face_name {display: block;  text-align: center;}
.face_name span {display: block; font: 16px/28px 'WorkSans', sans-serif; margin: 10px 0 0; color: #fafafa;}
.face_name i {display: block; font: 22px/28px 'WorkSans', sans-serif; margin: 0; color: #fb0a00;}
.social {position: absolute; top: 20px; left: 15px;}
.social a {width: 20px; height: 32px; display: block; background-repeat: no-repeat !important; background-position: center !important;}
.linkedin {background: url("../images/icons/socials/in.png");}
.linkedin:hover {background: url("../images/icons/socials/in_h.png");}
.facebook {background: url("../images/icons/socials/fb.png");}
.facebook:hover {background: url("../images/icons/socials/fb_h.png");}
.gplus {background: url("../images/icons/socials/gplus.png");}
.gplus:hover {background: url("../images/icons/socials/gplus_h.png");}
.mail  {background: url("../images/icons/socials/mail.png");}
.mail:hover  {background: url("../images/icons/socials/mail_h.png");}
.pinterest  {background: url("../images/icons/socials/pin.png");}
.pinterest:hover  {background: url("../images/icons/socials/pin_h.png");}
.twitter  {background: url("../images/icons/socials/twitter.png");}
.twitter:hover  {background: url("../images/icons/socials/twitter_h.png");}
.github  {background: url("../images/icons/socials/github.png");}
.github:hover  {background: url("../images/icons/socials/github_h.png");}




/* --> Responsive   */
@media screen and (max-width: 480px) {
    .logo {left: 20px;}
    nav {right: auto; left: 20px; top: 100px;}
    nav i {margin: 0 22px 0 0;}
    .video-embed {width: 850px; margin-left: -300px;}
    .header__text {margin-top: 140px;}
    .header__h1 {font-size: 32px; margin-top: 10px;}
    .header__h3 {font-size: 18px; margin-top: 20px; padding: 0 25px; }
    .header__h3 br {display: none;}
    .btn.blue {margin-top: 20px;}
    .media_hide {display: inline-block;}
    .media_show {display: none;}
    /*how-it-works*/
    .howit-works-area {text-align: center;}
    .howit-works-area .mobile {padding-right: 30px; padding-left: 30px;}
    .howit-works-area .desktop {padding-right: 30px; padding-left: 30px;}
    .or_space {display: block;}
    .or1 {top: 0; margin-top: -30px; left: 50%; margin-left: -138px;}
    .table_cell {display: block;}
    .contact-form {height: 265px;}
    #team {padding: 40px 0 70px;}
    .face {margin: 5px 5px 0;}
    .face_name span {margin-top: 0;}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .logo {left: 25px;}
    nav {right: auto; left: 25px; top: 100px;}
    nav i {margin: 0 40px 0 0;}
    .video-embed {width: 850px; margin-left: -200px;}
    .header__text {margin-top: 140px;}
    .header__h1 {font-size: 32px; margin-top: 10px;}
    .header__h3 {font-size: 18px; margin-top: 20px; padding: 0 25px; }
    .header__h3 br {display: none;}
    .btn.blue {margin-top: 25px;}
    .media_hide {display: inline-block;}
    .media_show {display: none;}
    /*how-it-works*/
    .howit-works-area {text-align: center;}
    .howit-works-area .mobile {padding-right: 30px; padding-left: 30px;}
    .howit-works-area .desktop {padding-right: 30px; padding-left: 30px;}
    .or_space {display: block;}
    .or1 {top: 0; margin-top: -30px; left: 50%; margin-left: -138px;}
    .table_cell {display: block;}
    .contact-form {height: 265px;}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
    .logo {left: 30px;}
    nav {right: 30px;}
    .video-embed {width: 110%;}
    .header__text {margin-top: 17%;}
    .header__h1 {font-size: 48px; margin-top: 10px;}
    .header__h3 {font-size: 21px; margin-top: 20px;}
    .btn.blue {margin-top: 25px;}
    /*how-it-works*/
    .howit-works-area {text-align: center;}
    .howit-works-area .mobile {padding-right: 30px; padding-left: 30px;}
    .howit-works-area .desktop {padding-right: 30px; padding-left: 30px;}
    .or_space {display: block;}
    .or1 {top: 0; margin-top: -30px; left: 50%; margin-left: -138px;}
    .table_cell {display: block;}
}
@media screen and (min-width: 993px) and (max-width: 1200px) {
    .header__text {margin-top: 13%;}
    .btn.blue {margin-top: 40px;}
}
@media screen and (min-width: 1201px) and (max-width: 1500px) {
    .header__text {margin-top: 17%;}
    .btn.blue {margin-top: 40px;}
}
@media screen and (min-width: 1501px){

}



/* --> Responsive global */

@media screen and (max-width: 480px) { .container_media {padding: 0 10px;} }
@media screen and (min-width: 481px) and (max-width: 768px) { .container_media {width: 480px;} }
@media screen and (min-width: 769px) and (max-width: 992px) { .container_media {width: 760px;} }
@media screen and (min-width: 993px) and (max-width: 1200px) { .container_media {width: 990px;} }
@media screen and (min-width: 1201px) and (max-width: 1500px) { .container_media {width: 1200px;} }
@media screen and (min-width: 1501px){ .container_media {width: 1500px;} }