@charset "UTF-8";
/*

    TABLE OF CONTENTS
    ---------------------------
     1.Fonts
     2. Basic
     3. Typography
     4. Colors
     5. UI Elements
      5.1. NavBar + Main Menu
      5.2. Header Carousel
      5.3. Inovations Section
      5.5. ScreenShots Section
      5.6. Achievements Section
      5.8. Prices Section
      5.9. Get MyApp Section
      5.10. Contact Us Section
      5.11. Footer Section
     6. Hover Classes
     7. Backgrounds
     8. Aditional Classes
     9. Lines
     10. Owl Carousel - Animate Plugin

*/

/****************************************************
                      1. Font
*****************************************************/
                    /* Roboto */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Thin.woff2") format("woff2"), url("../fonts/Roboto-Thin.woff") format("woff"), url("../fonts/Roboto-Thin.ttf") format("truetype");
  font-weight: 200;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"), url("../fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
}


/******************************************************
                      2. Basic
*******************************************************/
html, 
body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
  font-weight: 400;
}

a:hover, a:focus, a:active, input:focus, input:active{outline: none !important;}
#wrapper{
  position: relative;
  overflow-x: hidden;
  display: none;
}

/******************************************************
                      3. Typography
*******************************************************/

.navbar span{
  font-size: 1em;
  font-weight: 400;
}

#main-menu li{
  font-size: 0.9em;
  font-weight: 500;
}

#achievments small{
  font-size: 1.142em;
  line-height: 1.8;
}

#inovations h3, #bennefits h3, #video h3,
#screenshots h3, #reviews h3, #prices h3,
#get_myapp h3, #contact h3{
  font-size: 2.428em;
  font-weight: 400;
}

 #get_myapp h4{
  font-size: 1.714em;
  font-weight: 400;
 }

.app-bennefits h4, 
.price-tabel p, 
.price-tabel .badge, 
footer h4{
  font-size: 1.4285em;
  font-weight: 500;
}

#inovations span,
 #bennefits span, 
.app-bennefits p,
#screenshots span, 
.slides p,
 #reviews span, 
 .review-text p,
#prices span, 
.price-tabel li,
 #get_myapp span,
#get_myapp small        { font-size: 1em; }
#achievments h4         { font-size: 1.714em; }
.product-inovations h6  { font-size: 1.285em; }
#achievments p          { font-size: 4em; }
#play-pause i, #mute i  { font-size: 40px; }
h1                      { font-size: 3.2142em; }

#achievments p, 
#bennefits p,
.review-text p            {font-weight: 400;}
h1                        {font-weight: 300;}
.contacts-list span, 
#screenshots .center p    {font-weight: 500;}

.review-text p            {line-height: 1.7;}

/**********************************************************************************************************
                      4. Colors
***********************************************************************************************************/
header, .navbar-brand span, #inovations, #video, #achievments h4, #achievments p,
 #reviews h3, #reviews span, footer{color: #fff}

#bennefits p, #screenshots span, .slides p, #prices,
#get_myapp span, #get_myapp small, #contact span{color: #757575}

.review-text p{color: #5a5a5a}

#screenshots h3, #prices h3, #prices h3, .price-tabel, .price-tabel .badge,
#get_myapp h3, #get_myapp h4, #contact h3, #confirm-modal{color: #212121 !important}

#achievments small{ color: #fff; }

footer label{ 
  color: #f2f2f2 !important; 
  font-weight: 400;
}

/********************************************************************************************************************************
                                            5. UI Elements
*********************************************************************************************************************************/
section{overflow: hidden;}

/*********************************************************
                    NavBar+Main Menu
**********************************************************/

.navbar{border-bottom: 1px solid #398bda;}
.navbar-brand img{
  float: left;
  width: 50px;
  padding: 10px;
}
.navbar-brand{
  width: 100%;
  padding: 0 15px;
  height: 50px !important;
}
.navbar-brand span{
  margin: 15px 0 0 5px;
  line-height: 3;
}
.navbar-collapse{display: block}

#main-menu{ margin-top: 5px;}
#main-menu a{ padding: 13px;}
#navbarCollapse{float: right;}

.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:focus,
.navbar .navbar-nav > .active > a:hover{
  color: #fff;
  background: transparent;
  border-bottom: 1px solid #ffc107
}

#main-menu li{transition-duration: 0s !important;}
/*********************************************************************************************************
                    Header-Carousel
**********************************************************************************************************/
.top-carousel{padding-top: 91px;}
.top-carousel .item{
  width: 100%;
  height: calc(100vh - 91px);
  overflow: hidden;
}
/*carousel caption*/
.carousel-caption{
  position: relative;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.carousel-caption > .row {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*captions animation delay*/
.item h3{animation-delay: .2s !important;}
.slide-description{animation-delay: .4s;}
.control-btns{animation-delay: .8s;}
.iphone-mockup{animation-delay: .4s;}
.nexus-mockup{animation-delay: .2s;}
.monitor-mockup{animation-delay: .2s;}

.item h3,
.slide-description,
.control-btns,
.iphone-mockup,
.nexus-mockup{animation-duration: 1.3s;}
.monitor-mockup{animation-duration: 1.3s;}

/*bullets*/
.carousel-indicators{
  margin: 0;
  width: 100%;
  text-align: center;
  left: 0;
  bottom: 24px;
}
.carousel-indicators li{
  width: 12px;
  height: 12px;
  margin: 0 6px;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid #FFF;
  border-radius: 10px;
  display: inline-block;
  opacity: 0.5;
  transition: all .2s ease-in-out;
}

.carousel-indicators li.active{
  background: #ffffff;
  border: 2px solid steelblue;
  box-shadow: 0px 0px  1px 3px #90cbf9;
  opacity: 0.8;
  margin: 0 6px;
}
/* slides */
#header-carousel .item{
  height: calc(100vh - 191px);
  padding-bottom: 0;
}
.item h3{
  margin-top: 20px;
  margin-bottom: 13px;  
}
.item .slide-description{
  margin-bottom: 49px;
  line-height: 1.7;
}

/* mobiles mockups */
.img-mockup > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-mockup{
  position: relative;
  background-position: center;
  background-size: cover;  
  display: inline-block;
}
.iphone-mockup{
  top: 50px;
  width: 215px;
  height: 452px;
  padding: 35px 14px 43px;
  margin-right: -200px;
}
.nexus-mockup{
  top: 15px;
  width: 250px;
  height: 493px;  
  padding: 45px 15px 53px;
  float: right;
}
.monitor-mockup{
  top: 15px;
  width: 500px;
  height: 469px; 
  padding: 45px 15px 53px;
  float: right;
}

.tablet-mockup{
  position: relative; 
  width: 430px ;
  height: 530px;
  padding: 40px 30px;
  float: left;
}
.tablet-mockup > img{
  width: 298px;
  height: 380px;
  position: absolute;
  top: 62px;
  right: 43px;
}

/* markets btns */
.control-btns h5{
  margin-top: 0;  
  margin-bottom: 15px;
}
.control-btns .btn{
  margin-left: 0;
  margin-right: 25px;
  background: #757575;
  width: 177px;
  height: 35px;
  line-height: 1.9;  
}
.control-btns .btn .fa{
  margin-right: 5px;
  float: left;
  padding-right: 10px;
  border-right: 1px solid #bbbbbb;
  font-size: 25px;
  line-height: 1;
}

.control-btns .btn i.fa-android{margin-right: 10px}
.slide_2 .control-btns .btn{
  margin-left: 25px;
  margin-right: 0;
}
.slide_3 .control-btns .btn{margin: 10px 15px;}



/*************************************************************************************************
                  Product Innovations
**************************************************************************************************/
#inovations{
  position: relative;
  padding: 34px 0 55px;
}
#inovations:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#inovations .col-md-4{padding: 0;}
#inovations hr{background-size: 22% !important}

.product-inovations{ margin-top: 55px;}
.product-inovations .col-md-3{
  padding: 0 20px;
  cursor: default;
  line-height: 1.7;
}
.product-inovations h6{margin-bottom: 10px}
.product-inovations i.material-icons, 
.product-inovations i.fa-heart-o{
  font-size: 34px;
  padding: 18px;
  background-color: steelblue;
  border-radius: 50%;
  margin-bottom: 20px;
  transition: all .3s ease-in-out;
}
.product-inovations .col-md-3:hover i{
  background-color: transparent;
  box-shadow: 0 0 0 2px steelblue;
}

/****************************************************************************************************
                      All Benefits
*****************************************************************************************************/
#bennefits         { padding: 33px 0 60px; }
.app-bennefits     { margin-top: 54px }
.app-bennefits   ul{margin-top: 20px;}
.app-bennefits   li{ 
  position: relative;
  padding: 11px 0 12px;
  margin-top: 18px;
}
.app-bennefits   h4{
  margin-bottom: 2px;
  margin-top: 0;
}
.left-bennefits  h4,
.left-bennefits  p{padding-right: 60px;}
.right-bennefits h4,
.right-bennefits p{padding-left: 60px;}
.app-bennefits   p{line-height: 1.7;}
.app-bennefits .icon{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  border: 1px solid steelblue;
  border-radius: 50%;
  color: steelblue;
  font-size: 20px;
  height: 60px;
  line-height: 3;
  text-align: center;
  width: 60px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.left-bennefits .icon{right: -15px;}
.right-bennefits .icon{left: -15px;}

#bennefits .center-mokup{
  height: 490px;
  width: 100%;
  margin: 0 auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 55px 35px 65px;
}
#bennefits .center-mokup > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-bennefits li:nth-child(2){animation-delay: 0.2s;}
.app-bennefits li:last-child{animation-delay: 0.4s;}

/***************************************************************************************************
                      Screenshots
****************************************************************************************************/
#screenshots{ padding-top: 33px;}

/*slides*/
#screenshots .owl-stage-outer{
  padding: 0;
  margin: 51px 0 32px;
}
    #screenshots .owl-item{padding: 5px}
    #screenshots .owl-item p{ 
      visibility: hidden;
      -webkit-animation-delay: 2.2s;
      -o-animation-delay: 2.2s;
      animation-delay: 2.2s;
    }
    #screenshots .owl-item img{width: 100%}
    #screenshots .slides a{
      display: block;
      box-shadow: 1px 1px 6px rgba(0,0,0,0.16), 1px 2px 6px rgba(0,0,0,0.23);
    }
    #screenshots .center p{
      visibility: visible;
      margin-bottom:0;
      margin-top: 16px;
      animation-name: fadeInUp;
    }
    #screenshots .center-border{
      position: relative;
      bottom: 62px;
      margin: 0 auto;
      border: 1px solid #e7e7e7;
      border-radius: 2px;
      padding: 8px 0;
      width: 276px;
      height:28px;
      box-shadow: 0px 1px 2px 0px rgba(196, 196, 196, 0.8);
    }
    #screenshots .center-border:after{
      content: "";
      position: absolute;
      top: -6px;
      left: 50%;
      margin: 0 auto;
      border-left: 1px solid #e7e7e7;
      border-top: 1px solid #e7e7e7;
      width: 10px;
      height: 10px;
      background: #fff;
      -webkit-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
           -o-transform: rotate(45deg);
              transform: rotate(45deg);
    }

    /*shadows*/
    #screenshot-carousel:before{
      content:"";
      position: absolute;
      top: 15px;
      left: 0;
      height: 80.7%;
      box-shadow: 0 0 80px 85px #fff;
      z-index: 1000;
    }
    #screenshot-carousel:after{
      content:"";
      position: absolute;
      top: 15px;
      right: 0;
      height: 80.7%;
      box-shadow: 0 0px 80px 85px #FFF;
      z-index: 999;
    }   

    /*** arrows ***/
    #screenshots .owl-prev,
    #screenshots .owl-next{
      position: absolute;
      top: 43%;
      width: 45px;
      height: 45px;
      z-index: 99999;
      text-indent: -99999px;
      transition: all 0.2s ease;
    }
    #screenshots .owl-prev{
      background: url("../images/arrows_left.png") no-repeat top center;
      left: 0;
    }
    #screenshots .owl-next{
      background: url("../images/arrows_right.png") no-repeat top center;
      right: 0;
    }

/**************************************************************************************************
                  Achievements Section
***************************************************************************************************/
#achievments{ padding: 39px 0 52px; }
#achievments h4,
#achievments p{margin-bottom: 0;}
#achievments hr{
  opacity: 0.7;
  margin-top: 11px;
  margin-bottom: 10px;
}

/***************************************************************************************************
                    Price Section
****************************************************************************************************/
#prices{padding:33px 0 60px;}
.price-tabel{
  position: relative;
  margin-top: 54px;
  padding: 0 0 30px 0;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: box-shadow .3s linear, transform .4s ease-in-out;
     -moz-transition: box-shadow .3s linear, transform .4s ease-in-out;
      -ms-transition: box-shadow .3s linear, transform .4s ease-in-out;
       -o-transition: box-shadow .3s linear, transform .4s ease-in-out;
          transition: box-shadow .3s linear, transform .4s ease-in-out;
}
.price-tabel p{
  padding: 14px 0;
  border-bottom: 1px solid #e7e7e7;
  background: #e7e7e7;
  transition: all .3s ease;
}
.price-tabel ul{margin: 20px 0 16px 0}
.price-number h3{
  margin-top: 10px;
  margin-bottom: 0;
}
.price-tabel li{
  margin: 8px 0;
  line-height: 2;
}

.checked.promocional.price-tabel li:first-child{background: url(../images/checked.png) no-repeat 93% 50%;}
.checked.promocional.price-tabel li:nth-child(2){background: url(../images/checked.png) no-repeat 93% 50%;}
.checked.promocional.price-tabel li:nth-child(3){background: url(../images/checked.png) no-repeat 93% 50%;}
.checked.promocional.price-tabel li:nth-child(4){background: url(../images/checked.png) no-repeat 93% 50%;}

.checked.premium.price-tabel li{background: url(../images/checked.png) no-repeat 93% 50%;}

.checked.premiummulticentro.price-tabel li{background: url(../images/checked.png) no-repeat 93% 50%;}

.price-number{
  position: relative;
  text-align: center;
}
.price-number h2{margin: 0;}
.buy-btn
{
  background: steelblue;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  transform: translateY(100px);
}


/***************************************************************************************************
                      Get MyApp
****************************************************************************************************/
#get_myapp{padding: 33px 0 53px;}
#get_myapp h4{margin: 53px 0 16px;}
#get_myapp ul{margin-bottom: 47px;}
#get_myapp li{
  line-height: 2.5;
  padding-left: 30px;
  background: url("../images/list-arrow.png") no-repeat left;
}

.nexus-hand .hand-mockup{
  position: relative;
  top: 54px;
  width: 100%;
  height: 385px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}
.nexus-hand .hand-mockup > img{
  width: 33%;
  height: 68%;
  position: absolute;
  top: 45px;
  left: 60px;
  object-fit: cover;
}

/*************************************************************************************************
                    Contact Section
**************************************************************************************************/
#contact{
  padding: 33px 0 53px 0;
  z-index: 9999;
}
#contact-form{
  margin-top: 57px;
  position: relative;
}
#contact-form .input-field{margin-top: 0;}
#contact-form .btn{
  left: 5px;
  border: none;
  background: steelblue;
  padding: 0;
  line-height: 1;
  margin-top: 16px;
}
#contact-form .waves-input-wrapper .waves-button-input{
  background: transparent;
  border: none;
  text-transform: uppercase;
  color: #fff;
  font-style: normal;
}
#contact-form input{
  height: 40px;
  border-bottom: 1px solid #e0e0e0;
  color: #212121;
}
#contact-form input[type="submit"]{
  height: 36px;
  width: 136px;
}
#contact-form .input-field.col-md-8{clear: both;}
#contact-form .input-field label{
  left: 18px;
  font-weight: 400
}
label.active{color: #212121 !important}
#contact-form .error, #subscribe-form .error{
  left:50% !important;
  color: #CC0000 !important;
}
#subscribe-form label.active{color: #fff !important}

.contacts-list{ margin-top: 57px; }
.contacts-list li{
  margin-bottom: 20px;
  line-height: 1.7;
}
.contacts-list i{
  margin: 3px 15px 15px 0;
  float: left;
  color: steelblue;
}
/****************************************************************************************************
                    Footer Section
*****************************************************************************************************/
footer{ padding: 57px 0 54px 0; }
.footer-logo a{ display: block; }
.footer-logo img{width: 50px;}
footer #subscribe-email{ 
  border-bottom: 1px solid #5ab1f6 !important; 
  margin-bottom: 20px;
  padding-left: .75em;
}
footer #subscribe-form .input-field{margin-top: 27px;}
footer input.waves-button-input{
    background: #fff ;
    border: none;
    text-transform: uppercase;
    color: #212121;
    font-style: normal;
    padding: 0;
}
footer .btn{
    border: none;
    background: #fff;
    text-transform: uppercase;
    padding: 0;
    line-height: 1;
}
footer .waves-button-input{background: transparent !important;}
footer input[type="submit"]{
  width: 107px;
  height: 36px;
}

/*footer socials*/
.social-links ul{margin: 26px 0 52px 0;}
footer .social-links li{
  margin: 0 7.5px;
  width: 41px;
  height: 41px;
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 0;
  overflow: hidden;
}
footer .social-links a{
  color: #fff;
  display: block;
  line-height: 3.2;
  transition: all .2s ease-in;

}
footer .social-links i{font-size: 18px;}
.social-links a:hover{
    background-color: #fff;
    color: steelblue;
    border-radius: 42%;
    height: 39px;
}

/* Modal */
#contact .fade.in,
footer .fade.in{background: rgba(0, 0, 0, 0.3) !important }
.modal.in .modal-dialog{top: 200px !important; }
#contact-modal .btn,
#confirm-modal .btn{
  padding: 5px 22px;
  background-color: steelblue ;
}
#confirm-modal .btn{line-height: 2}

/***************************************************************************************************
                      6. Hover Classes
****************************************************************************************************/
.navbar-nav a:hover{
  color: #fff;
  background: transparent;
  border-bottom: 1px solid #ffc107
}
#screenshots .owl-prev:hover{background: url("../images/arrows_left.png") no-repeat bottom center;}
#screenshots .owl-next:hover{background: url("../images/arrows_right.png") no-repeat bottom center;}
#header-carousel .owl-prev:hover i, #header-carousel .owl-next:hover i,
#reviews-carousel .owl-prev:hover, #reviews-carousel .owl-next:hover{color: #8e837f}
#get_myapp .btn:hover{
  background: #6b6b6b;
  color: #fff;
}
.contacts-list a:hover{color: steelblue !important}
/* bennefits hover */
.app-bennefits   li:hover .icon{
  color: #fff !important;
  background: steelblue !important;
}
/*hover prices*/
.price-tabel:hover,
.price-tabel.selected{ 
  transform: translateY(-30px);
  box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19), 0 0 0 1px steelblue; 
}
.price-tabel:hover p,
.price-tabel.selected p{
  background: steelblue;
  color: #fff;
}
.price-tabel:hover .price-number{
  opacity: 0;
  transition: all .1s ease-in-out;
}
.price-tabel:hover .buy-btn{transform: translateY(0);}
#get_myapp a:active,
#get_myapp a:focus{color: #fff}

/**************************************************************************************************
                      7. Backgrounds
***************************************************************************************************/
/*Navbar*/
.navbar{
  background: transparent;
  z-index: 100;  
}
.top-nav-collapse{
  padding: 5px 0;
  background: steelblue;
  z-index: 9999;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
}
.top-nav-collapse2
{
    padding: 5px 0;
    background: steelblue;
    z-index: 9999;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
}

/*header*/
header
{
    background: url("../images/header_bg.png") no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


#inovations{
  background-image: url("../images/StockSnap_1LW59GG0WK.jpg");
}

#inovations:before, 
#reviews:before{ background-color: rgba(0, 0, 0, 0.7);}
#inovations hr, #video hr, #reviews hr{
  background: url("../images/white-bullets.png") no-repeat center;
  background-size: 16%;
}
#bennefits hr, #screenshots hr,
#prices hr, #get_myapp hr, #contact hr{
  background: url("../images/grey-bullets.png") no-repeat center;
  background-size: 16%;
}
#video{
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
#video:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
#bennefits, #screenshots, #prices, #contact{background: #fff}
#get_myapp{background: #f5f5f5; overflow: hidden;}
footer{background: steelblue}

#achievments,
.by-btn a{ background: steelblue }

#reviews{ background-image: url("http://placehold.it/1920x1080/");}


/***************************************************************************************************
                      8. Aditional Classes
****************************************************************************************************/
.text-uppercase{ text-transform: uppercase; }
.menu-active{ border-bottom: 1px solid #f9af10; }
.smaller{
  height: 60px !important;
  background: steelblue !important;
}
.video-active{background: none !important}
.margin-right0{margin-right: 0 !important}

.hidden-on-big {display: none !important}
.opacity{opacity: 0;}
.parallax{
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/*small menu animations*/
.open span.icon-bar{display: none;}
.collapsed i.material-icons{display: none;}
.open i.material-icons{display: block; margin-top: -5px}


/****************************************************************************************************
                      9. Lines
*****************************************************************************************************/

#inovations hr, #bennefits hr, #video hr,
#screenshots hr, #reviews hr, #prices hr,
#get_myapp hr, #contact hr{
  width: 100%;
  height: 25px;
  margin: 17px auto 0;
  border: none ;
}

.bennefits-divider{
  width: 100%;
  height: 25px;
}

/****************************************************************************************************
                    10. Owl Carousel - Animate Plugin
 ****************************************************************************************************/

.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/*
 *  Owl Carousel - Auto Height Plugin
 */
.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

/*
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
  padding: 55px 0;
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
  cursor: pointer;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
  display: none;
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  overflow: hidden;
}
.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/*
 *  Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
  transform-style: preserve-3d;
}

/*
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease;
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
}


#section-feature {
	/*background: rgb(196, 158, 93);*/
	background: steelblue;
}
.feature-box {
	padding: 40px 60px 20px; transition:0.4s linear; border-top-color: rgb(251, 251, 251); border-right-color: rgb(251, 251, 251); border-top-width: 1px; border-right-width: 1px; border-top-style: solid; border-right-style: solid; cursor: pointer; min-height: 300px; -webkit-transition: all .4s linear 0s; -o-transition: all .4s linear 0s;
}
.feature-box .section-title {
	color: rgb(255, 255, 255); text-transform: uppercase; font-weight: 700;
}
.feature-box p {
	color: rgb(238, 238, 238); margin-bottom: 20px;
}
.feature-box a .title {
	color: rgb(255, 255, 255); text-transform: uppercase;
}
.feature-box h4.sub-title {
	transition:0.4s linear; color: rgb(255, 255, 255); font-size: 16px; font-weight: 600; -webkit-transition: all .4s linear 0s; -o-transition: all .4s linear 0s;
}
.feature-box a i {
	color: rgb(255, 255, 255); font-size: 50px;
}
.feature-box a h4 {
	margin: 25px 0px 0px; text-transform: uppercase; font-size: 16px; font-weight: 700;
}
.feature-box hr {
	border-color: rgb(221, 221, 221); margin: 15px 0px; width: 40px;
}
.feature-box a hr {
	border-color: rgb(221, 221, 221); margin: 15px 0px; width: 40px;
}
.feature-box:hover {
	background: rgb(255, 255, 255); border-color: rgb(255, 255, 255); color: rgb(35, 35, 35);
}
.feature-box:hover a {
	color: rgb(35, 35, 35);
}
.feature-box:hover a i {
	color: rgb(35, 35, 35);
}
.feature-box:hover h4.sub-title {
	color: rgb(35, 35, 35);
}
.feature-box:hover a .title {
	color: rgb(35, 35, 35);
}
.feature-box:hover .section-title {
	color: rgb(35, 35, 35);
}
.feature-box a p {
	color: rgb(238, 238, 238); font-size: 14px;
}
.feature-box:hover p {
	color: rgb(35, 35, 35);
}