/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.clearfix:after {
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
}

/*  fonts */

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);


@font-face {
    font-family: 'HelveticaNeueLTCom-BdCn';
    src: url('../fonts//HelveticaNeueLTCom-BdCn.eot');
    src: local('☺'), 
        url('../fonts/HelveticaNeueLTCom-BdCn.woff') format('woff'),
        url('../fonts/HelveticaNeueLTCom-BdCn.ttf') format('truetype'),
        url('../fonts/HelveticaNeueLTCom-BdCn.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}     
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*
head's styles
*/
body {
    font-family:'Lato', Arial, sans-serif;
    font-size: 14px; 
    color: #252525;
    min-width: 240px;
    background:#ebebeb;
}

h2 {
    font-size: 30px;
    font-family:'Lato', Arial, sans-serif;
    line-height: 34px;
    padding:0px;
    margin:0px;
    padding-bottom:30px;
}

a, 
a:visited {
    color: #252525;
    text-decoration: none;
 /* -webkit-transition: all 0.2s ease-in-out; 
  transition: all 0.2s ease-in-out;  */    
}

a:hover, 
a:active {
    color: #252525;
    text-decoration: underline;

}


.page{
  width:1200px;
  background:#fff;
  margin: 0 auto;  
}


.inner {
    width: 913px;
    margin: 0 auto;
    overflow: hidden;
}

.head {
    height: 76px;
    z-index: 5000;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    zoom:1;
}

.head h1 {
     margin: 0;
     float: left;
}

.head h1 a {
    display: block;
    width: 216px;
    height: 76px;
    text-indent: -9999px;
    background: url(../img/logo.png) no-repeat center center;
}
  
.head nav {
    float: right;
    padding-top:30px;
}

.head nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.head nav ul li {
    float: left;
    margin-left:37px
}

.head nav ul li a {
  padding-right:20px;
  display:inline-block;
  font-size:16px;
  font-weight:bold;
}
.head nav ul li a:hover,.head nav ul li.active a{
    background: url(../img/arrow.png) no-repeat center right;
    text-decoration:none
}
.show-menu {
    display: none;
}
.page > section{
  padding-top:76px;
}


#top{
  position:relative;
  overflow: hidden;
}
.baner{
  width:100%;
  height:619px;
}
.baner-sub{
  width:100%;
  height:180px;  
  background: url(../img/baner2.jpg) no-repeat center -230px;  
  /*background-attachment: fixed;*/
}
.baner-sub img{
  float:right;
  margin-top:60px;
}
.baner .slide1{
  width:100%;
  height:619px;  
  background: url(../img/baner1.jpg) no-repeat center 76px;  
  background-attachment: fixed;
}
.baner .slide2{
  width:100%;
  height:619px;                                                 
  background: url(../img/baner2.jpg) no-repeat center 76px;  
  background-attachment: fixed;
}
.claim{
  position:absolute;
  top:140px;
  right:190px;
  width:460px;
  background:#fff;
  z-index:200;  
}
.claim h1{
  background:#00aab4;
  color:#fff;
  font-size:44px;
  line-height:44px;
  margin:0px;
  padding:30px;
  padding-left:40px;
}
.claim p{
  color:#00aab4;
  font-size:14px;
  line-height:18px;
  margin:0px;
  padding:30px;
  text-align: justify;
  padding-right:40px;
  padding-left:40px;
  font-weight:bold;
}



.col-left{
  float:left;
  width:305px;
  padding-top:40px;
  padding-bottom:20px;
  clear:both
}
.col-right{
  float:right;
  width:496px;
  padding-top:40px;
   padding-bottom:20px; 
}
.col-left2{
  width:460px;
}

.col-right2{
  width:402px;
}
#products-services .col-right ul {
  padding:0px;
  margin:0px;
  padding-left:60px;
}
#products-services .col-right ul li{
  padding:0px;
  margin:0px;
  color:#484848;
  font-size:12px;
  line-height:36px;
}
#products-services .col-right ul li span{
  color:#019578;
  font-size:16px;
  font-weight:bold;       
  display:block
}

a.more{
  display:inline-block;
  float:right;
  color:#fff;
  font-weight:bold;
  background:#01ad8b;
  font-size:14px;
  text-decoration:none;
  line-height:30px;
  padding:0px 10px;
}
.icons{
 background:#f7f7f7;
 padding:55px 0;       
 margin-top:20px
 }
.col-3{
  float:left;
  width:29%;
  margin:0 2%;
  text-align:center;
  /*font-family:"HelveticaNeueLTCom-BdCn", Helvetica Neue,Helvetica, Lato; */
  font-weight:bold;                                                  
  color:#019578;   
  font-size:16px
}
.icons .col-3 p{
  letter-spacing: 0.5px;
}  
.col-3 img{
    margin-bottom:20px;
}
 
#about-us{
  padding-top:112px;
} 
 
#about-us .col-left{
  width:415px;
}

#about-us .col-right{
  width:403px;
}
#about-us p{
  text-align: justify;
} 
#about-us h2{
  padding-bottom:0px;
} 
 
#about-us p strong{
  text-transform:uppercase;
  color:#01bb96;
  font-weight:900
}

p.important{
  color:#fff;
  font-weight:bold;
  font-size:16px;
  line-height:21px;
  padding:15px;
  background:#01bb96;
  margin-top:35px;
} 
p.important a{
  color:#fff;
  text-decoration:none;
  text-transform:uppercase; 
  font-weight:900 
} 
.team{
  clear:both;
  padding-top:30px;
}
.team .col-3{
  width:35%;
  margin:0;
}
.team .col-3:first-child{
  margin-left:0;
  width:29%;
}
.team h2{
 width:100px;
  font-weight:bold;
  font-size:30px;
  line-height:34px;
  color:#252525;
  text-align:left;
}
#about-us .team .col-3 p{
  text-align:left;
  color:#292929;
  font-size:13px;
  /*font-family:"HelveticaNeueLTCom-BdCn", Helvetica Neue,Helvetica, Lato;    */
  text-transform:uppercase;
  padding-top:15px;
  letter-spacing: 0.5px;
}
#about-us .team .col-3 p  strong{
  font-size:14px;
  color:#019578;
  display:block;
}
.team .col-3 img{
  float:left;
  margin-right:20px;
}

#contact .clearfix{
  background:#01bb96;
    height:475px
}
#contact .col-left{
  padding:0;
  height:475px;
  width:656px;
}
#contact .col-right{
  width:450px;
  color:#292929;
  
}
#contact .col-left iframe{
   padding:0;
   margin:0; 
}

#contact .col-right h3{
  font-size:40px;
  margin:0px;
  padding:0px;
  font-weight:normal;
  padding-top:10px;
  padding-bottom:20px; 
}
#contact .col-right p{
  font-size:16px; 
  font-family:"HelveticaNeueLTCom-BdCn", Helvetica Neue,Helvetica, Lato;
  text-transform:uppercase;
  line-height:24px;
  padding-bottom:30px;
  letter-spacing: 0.5px; 
}

#contact .col-right a{
  font-size:16px; 
  font-family:"HelveticaNeueLTCom-BdCn", Helvetica Neue,Helvetica, Lato;
  color:#292929;
  display:block;  
  text-decoration:none;
  letter-spacing: 0.5px;
}
#contact .col-right a.mail{
  background: url(../img/ico_mail.png) no-repeat center left;
  padding-left:50px;
  line-height:42px;
  margin-bottom:15px;
}
#contact .col-right a.tel{
  background: url(../img/ico_phone.png) no-repeat center left;
  padding-left:50px;
  line-height:42px;
  margin-bottom:15px; 
}
#contact .col-right a.support{
  background: url(../img/ico_support.png) no-repeat center left;
  padding-left:50px;
  line-height:42px;
  margin-bottom:15px;



.links{
  background:#f5f5f5;
  padding:30px 0;
  padding-bottom:25px;   
  font-size:11px;
}
.col-4{
  width:278px;
  float:left;
}
.links .inner    .col-4:nth-child(3){
  width:200px;
}
.links .inner   .col-4:nth-child(4){
  float:right;
  text-align:right;
  width:130px;
  line-height:38px;
}

.links ul{
  margin:0;
  padding:0;
  list-style:none
}
.links ul li{
  padding-bottom:5px;
  line-height:32px;
  font-size:11px;
}
.links ul li a{
  color:#252525;
}
.links .col-4 span{
  display:inline-block;
  line-height:38px;
  float:left;  
}
.links a.fb{
  display:inline-block;
  width:38px;
  height:38px; 
    background: url(../img/ico_fb.png) no-repeat center left;
}
.copy{
  font-size:11px;
  color:#019578;
  text-align:right;
  padding:15px 0;
}
a.go-top{
  display:inline-block;
  font-size:14px;
  text-decoration:none;
  padding:5px 20px;
  border:1px solid #484848; 
  position:fixed;
  bottom:50px;
  background:#fff;
  font-weight:bold;
  left:50%;
  margin-left:-40px;
}



#system .boxes{
  width:100%;
  overflow: hidden;
}
#system .boxes {
  padding:50px 0;
  padding-bottom:100px;
}
#system .boxes .box{
  width:220px;
  height:280px;
  background:#efefef;
  text-align:center; 
  position:relative;
  overflow: hidden;
  float:left;
  margin-right:10px;
  margin-bottom:10px;
}
#system .boxes .box:nth-child(4n){
  margin-right:0;
}
#system .boxes .box .ico{
  width:100%;
  height:112px;
  line-height:112px;
  background:#01ad8b
}
#system .boxes .box-blue .ico{
  background:#00b3bf;  
}
#system .boxes .box-dark-blue .ico{
  background:#3b697a;  
}
#system .boxes .box-black .ico{
  background:#031b24;  
}
#system .boxes .box article{
  padding:18px;
}
#system .boxes .box.box-big article{
  padding:18px 10px;
}
#system .boxes .box article h2{
  font-size:28px;  
  margin:0;
  padding:0;
}
#system .boxes .box article p{
  font-size:12px; 
  line-height:18px 
}
 .over-ico{
  position:absolute;
  left:0;
-webkit-transition: all 0.5s ease-in-out; 
  transition: all 0.5s ease-in-out; 
  bottom:-240px;
  z-index:10;
  width:220px;
  height:280px;
  line-height:280px;
}
.over{
opacity:0;
}
#system .boxes .box  .over{
  position:absolute;
  left:0;
  top:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;  
}
#system .boxes .box:hover .over{
  opacity:1;
}
#system .boxes .box:hover .over-ico{
   bottom:0px;;
}



/* Landscape phone to portrait tablet */
@media (max-width: 1200px) {
    .page{
      width:100%;
    }
    
    #contact .col-right{
      width:300px;
    }
    .claim{
      right:90px;
    }
}
@media (max-width: 913px) {
    .inner {
            width: auto;
            padding: 0 10px;
    }
    #contact .col-right{
      width:300px;
    }
    .claim{
      right:90px;
    }
    .head nav ul li{
      margin-left:20px;
    }
    .col-right{
      width:350px;
    }
    .col-right img, .col-left2 img{
    max-width:100%
    }
    .col-left2{
      width:350px;
    }
    #about-us .col-left,#about-us .col-right{
      width:45%
    }
    .team .col-3{
      width:40%
    }
    .team .col-3:first-child{
      width:18%;
    }
    #contact .col-left{
     width:400px; 
    }
    #contact .col-left iframe{
      width:400px !important;
      pointer-events:none;
    }
    .col-4{
      width:200px;
    }
    #system .boxes{
      text-align:center;
    }
    #system .boxes .box,#system .boxes .box:nth-child(4n){
    margin-left:10px;
    margin-right:0px;
    display:inline-block;
    float:none
    }
}


@media (min-width: 768px){
  .head nav{display:block !important}
}

@media (max-width: 767px) { 
    #system .boxes .box  .over,#system .boxes .box  .over-ico,#system .boxes .box:hover   .over,#system .boxes .box:hover  .over-ico{
      display:none
    }
    a.show-menu {
        display: block;
        position:absolute;
        top:20px;
        right:20px;
        clear:both;
        width: 50px;
        height: 40px;
        overflow: hidden;
        background: #06bbc7;
        line-height:40px;
        text-transform:uppercase;
        color:#fff;
        text-align:center;
        font-weight:bold;
        text-decoration:none
    }
    a.show-menu:hover{
         color:#fff; text-decoration:none
    }
        
    .head nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
        background: #fff;
    }
    .head nav ul {
        padding-top: 4px;
    }
    .head nav ul li {
        float: none;
        margin-left: 0;
        border-top: 1px solid #d0d0d0;
    }
    .head nav ul li:first-child {
        border-top: none;
    }
    .head nav ul li a {
        font-size: 17px;
        line-height: 41px;
    }
  .claim{
    right:20px;
    top:100px;
  }
  .col-left{
    float:none;
    width:100%
  }
  .col-right{
    float:none;
    width:100%;
    text-align:center;
  }
  .col-right2{
    text-align:left;
  }
  .col-left2{
    text-align:center;
  }
  article.col-left2{
    text-align:left;
  }
  #about-us .col-left, #about-us .col-right{
    width:100%;
    float:none;
  }
  #contact .clearfix{
    height:auto
  }
  #contact .col-left{
   width:100%;  
   float:none; 
   text-align:left;
  }
  #contact .col-right{
   width:90%;  
   float:none; 
   margin: 0 auto;
   text-align:left;
  }
  #contact .col-left iframe{
    width:100% !important;
  }
  .col-4,.links .inner .col-4:nth-child(3){
   width:100%;
   float:none;
   margin-bottom:20px;
   text-align:center;
  }
  .links ul li{
    line-height:20px;
  }
  .copy{
    padding-top:15px !important;
    padding-bottom:15px !important;
  }
  .baner .slide1,.baner .slide2{
    background-attachment: scroll;
    background-position: center top;
  }
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
 .claim{
    right:20px;
    top:120px;
    width:90%
  }
  .claim h1{
    font-size:30px;
    line-height:40px;
  }  
  .team .col-3:first-child{
   width:100%;
   float:none;
  }
  .team .col-3{
    width:100%;
    float:none; 
    text-align:center;
   }
  .team .col-3 img{
     float:none
   }
   #about-us .team .col-3 p{
       text-align:center
     }
   #about-us .team .col-3 h2{
   width:100%;
   text-align:center;
   padding-bottom:30px;
   }
   .col-3{
    width:100%;
    float:none; 
    text-align:center; 
   }
}

@media (max-width: 320px) {
 
    h2 {
        font-size: 25px;
        line-height: 30px;
    }
  
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}