/*about-banner*/
#about-banner{background:url(../images/conta.png) center top no-repeat; height: auto; padding-bottom: 110px; margin-top: 1%}
#about-banner h2{font-size: 40px; font-weight: 600; color: #fff; text-align: center; margin-top: 18%; text-transform: uppercase; width: 100%;}
#about-banner .container-fluid{width: 70%}



/*services*/
#services {padding-top: 60px; padding-bottom: 60px; background: #f2f2f2;}
#services .container-fluid {width: 75%;}
#services h2{font-size: 30px; text-align: left; color: #0A0A08;margin-top: 0px; font-weight: 600;}
#services p{font-size: 16px; text-align: left; color: #525559; width: 100%; }
#services .big{font-size:20px; text-align: left; color: #000; }
#services .mail{font-size:18px; }


#services .top img{width: 100%}

#services .top .read{background: #4468b2; width: 40%; padding:10px; color: #fff; cursor: pointer; }
#services .top .read a{color: #fff; cursor: pointer; text-decoration: none; }
#services .top .read:hover{background: #f6cd27;  color: #000 }
#services .top .read:hover a{color: #000 }
#services .top .box{border:1px solid #e8e4e4; padding: 15px; background: #fff; padding-left: 30px;margin-top: 15px;}
#services .top .box:hover{-webkit-box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.48);
-moz-box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.48);
box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.48);}
#services .top .col-md-3{margin-bottom: 30px}
#services .box h3{color: #100c08;font-weight: 600; font-size:20px;}


.arrow{ position: absolute; top: 58%; left: 48%; border: 1px solid #f6cd27; border-radius: 45px 45px 45px 45px; width: 45px;
 height: 12%;}
.arrow .arrow1{margin-top: 40px}
.arrow span{ display: block; width: 10px; height: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff;
 transform: rotate(45deg); margin: -10px auto; animation: animate 2s infinite;}
.arrow span:nth-child(2){ animation-delay: -0.2s;}
.arrow span:nth-child(3){ animation-delay: -0.4s;}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}


#feed{
/*position: absolute*/;width: 100%;
margin-top: 30px;
}


#feed input[type=text], select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 5px;
  resize: vertical;
}
#feed input[type=email]{
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 5px;
  resize: vertical;
}

#feed input[type=submit] {
  background-color: #0A0A08;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  width: 100%;
  margin-top: 5px;
}

#feed input[type=submit]:hover {
  background-color: #4367b1;
}
#feed button[type=submit] {
  background-color: #0A0A08;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  width: 100%;
  margin-top: 5px;
}

#feed button[type=submit]:hover {
  background-color: #4367b1;
}
#feed .container {
background: #fff;
  padding: 20px;
  width: 30%;
  border-radius: 10px;

}

#feed h3{margin-top: 0px;color: #0A0A08;font-weight: 600;}






@media only screen and (min-width : 1920px) and (max-width : 2559px){ 
  
  
  
}
@media only screen and (min-width : 1600px) and (max-width : 1919px){ 
  
  #services .top .box{height: 350px}

}
@media only screen and (min-width : 1440px) and (max-width : 1599px){ 
#services .container-fluid{width: 80%;}

  #services .top .box{height: 330px}


}
@media only screen and (min-width : 1366px) and (max-width : 1439px){
  
#services .container-fluid{width: 80%;}
  #services .top .box{height: 330px}
  #about-banner i{width: 8%}

  #services h2 {font-size: 25px;}
  #services .box h3{font-size: 20px;}
  #feed .container{width: 40%;}

}
@media only screen and (min-width : 1200px) and (max-width : 1365px){ 


#services .container-fluid{width: 90%;}
   #services .top .box{height: 330px}
  #about-banner i{width: 8%}

.arrow {top: 60%;}  


  #services h2 {font-size: 25px;}
  #services .box h3{font-size: 20px;}

    #feed .container{width: 40%;}

}

@media only screen and (min-width : 1024px) and (max-width : 1199px){ 
  
  
  
#services .container-fluid{width: 90%;}
#services p{width: 100%}


  #services h2 {font-size: 25px;}
  #services .box h3{font-size: 20px;}



 #services .top .box{height: 340px}
  #about-banner i{width: 10%}
    #feed .container{width: 50%;}

#services {padding-top: 50px;padding-bottom: 50px;}


}

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

#services .container-fluid{width: 90%;}
#services p{width: 90%}
#services {padding-top: 50px; padding-bottom: 50px;}
#services .top .read{    width: 100%;font-size: 20px;    line-height: 38px;}
#services .top a{   font-size: 19px;    line-height: 38px;}
.arrow {top: 50%;width: 42px;}  
.arrow .arrow1 {margin-top: 35px;}

#about-banner i{width: 13%}

#services h2 {    font-size: 25px;}
  #services .box h3{font-size: 20px;}
  #feed .container{   width: 60%;}

#services .do h2{margin-top: 20px;}
}
@media only screen and (min-width : 150px) and (max-width : 767px){ 

.kb_wrapper {overflow: hidden; height: 260px;}
.kb_wrapper>.carousel-inner>.item>img, .kb_wrapper>.carousel-inner>.item>a>img{height: 260px}

.arrow {top: 47%;width: 42px; left: 45%;}  
.arrow .arrow1 {margin-top: 35px;}


#services p{width: 100%}
#services {padding-top: 40px; padding-bottom:40px;}
#services .top{text-align: center;}
#services .top .read{width: 100%; float: none; margin-bottom: 20px;}
#services .container-fluid {width: 94%;}


#about-banner i {width: 20%; padding: 8px; font-size: 16px;}
#about-banner h2 {font-size: 25px; margin-top: 40%;}
#services h2{ font-size: 25px}
#services h3{text-align: left;font-size: 20px;}

#feed .container{width: 100%;}
#services .do h2{margin-top: 20px;}







  }
  
  
@media only screen and (max-width: 375px) {
  .topnav{margin-top: -5%}
  .arrow {top: 45%;}


} 
@media only screen and (max-width: 320px) {
  
 #services .top a{font-size: 20px; line-height: 42px;}
 .arrow {top: 40%;}




}