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

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}

.icon-play:before {
  content: "\e912";
}

.icon-switch:before {
  content: "\e9b6";
}

.icon-menu:before {
  content: "\e9bd";
}

.icon-download2:before {
  content: "\e9c5";
}

.icon-plus:before {
  content: "\ea0a";
}

.icon-minus:before {
  content: "\ea0b";
}

.icon-cancel-circle:before {
  content: "\ea0d";
}

.icon-cross:before {
  content: "\ea0f";
}

.icon-checkmark:before {
  content: "\ea10";
}

.icon-checkmark2:before {
  content: "\ea11";
}

.icon-play2:before {
  content: "\ea15";
}

.icon-arrow-up:before {
  content: "\ea32";
}

.icon-arrow-down:before {
  content: "\ea36";
}

.icon-arrow-up2:before {
  content: "\ea3a";
}

.icon-arrow-down2:before {
  content: "\ea3e";
}

.icon-circle-up:before {
  content: "\ea41";
}

.icon-circle-right:before {
  content: "\ea42";
}

.icon-circle-down:before {
  content: "\ea43";
}

.icon-circle-left:before {
  content: "\ea44";
}

.icon-google-plus2:before {
  content: "\ea89";
}

.icon-facebook2:before {
  content: "\ea8d";
}

.icon-instagram:before {
  content: "\ea90";
}

.icon-twitter:before {
  content: "\ea91";
}

.icon-twitter2:before {
  content: "\ea92";
}

.icon-twitter3:before {
  content: "\ea93";
}

.icon-feed2:before {
  content: "\ea94";
}

.icon-feed3:before {
  content: "\ea95";
}

.icon-feed4:before {
  content: "\ea96";
}

.icon-youtube4:before {
  content: "\ea9a";
}

.icon-github:before {
  content: "\eab1";
}

.icon-pinterest:before {
  content: "\ead0";
}

.icon-pinterest2:before {
  content: "\ead1";
}

.icon-chrome:before {
  content: "\eae5";
}

.icon-firefox:before {
  content: "\eae6";
}

.icon-IE:before {
  content: "\eae7";
}

.icon-opera:before {
  content: "\eae8";
}

.icon-safari:before {
  content: "\eae9";
}

/*************************************
            style general
**************************************/
body,html{font-family: 'Roboto Condensed', sans-serif;  width: 100%; height: 100%;}
.align-right{text-align: right;}
strong, .bold{font-weight: bold;}
.italic{font-style: italic;}
.notDesktop{display: none!important;}
.rowTop{margin-top: 20px;}
.rowTB{padding: 30px 0;}
.border{width: 150px; height: 10px; margin: 20px 0; background-color: #f1ee08;}
.border2{width: 150px; height: 10px; margin: 20px auto; background-color: #f1ee08;}
.border3{width: 150px; height: 10px; margin: 20px 0 20px auto; background-color: #f1ee08;}
.Aligner {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
}

.background-video{
    overflow: hidden;
    position: relative;
}
.background-video video{
    width: 150%;
    height: 150%;
    position: fixed;
    z-index: -100;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.background-mobile{
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -100;
}
@media screen and (max-width:991px){
    .background-video{
        display: none;
    }
}
.notPadding{padding: 0!important; margin: 0!important;}

@media screen and (max-width: 650px){
	.border{width: 150px; height: 10px; margin: 20px auto; background-color: #f1ee08;}
}

@keyframes nombre_animacion{
    0%{
        top: -100%;
    }
    100%{
        top: 0px;
    }
}

@-webkit-keyframes nombre_animacion{
    0%{
        top: -100%;
    }
    100%{
        top: 0px;
    }
}



/*************************************************
      header
*************************************************/

header{
  background-color: rgba(255,255,255,1);
  position: fixed;
  width: 100%;
  z-index: 99999!important;
  border-bottom: 1px solid #ccc;
}

.logo{
  width: 20%;
  padding: 15px 0 0 20px;
  float: left;
  text-align: center;
}
.logo img{
  width: 100%; max-width: 122px!important; height: auto!important;
}
.logo h1{
  font-size: 30px;
  color: #333;
  padding: 10px 0 0;
 }

/*************************************************
    menu
*************************************************/

.menu_bar{
  display: none;
}

nav.menu{
  float: right;
  width: 75%;
  z-index: 9999!important;
}


nav.menu ul{
  text-align: right;
  list-style: none;
  overflow: hidden;/* limpiar float */ 
}

nav.menu ul li{
  display: inline-block;
}
nav.menu ul li a{
  font-family: 'Montserrat', sans-serif; 
  display: block;  
  padding: 20px 20px;
  font-size: 16px;
  color: #4d4d4d;  
  text-transform: uppercase;
  text-decoration: none;

}

nav.menu ul li a:hover{
  background-color: #f1ee08!important;
  color: #000!important;
  font-weight: bold!important;
}

.actives{
  background-color: #f1ee08!important;
  color: #000!important;
  font-weight: bold!important;
}
@media screen and (max-width: 800px){

/*
estilos para el header
 */

header{
  position: fixed;
  width: 100%;
}

.logo{
  position: fixed;
  right: 0;
  left: 0;
  top: 0px;

  margin-right: auto;
  margin-left: auto;
  width: 60%;
  float: none;
  text-align: center;
  padding-top: 10px!important;
}
.logo h1{
  font-size: 40px;
  color: #ffffff;
  padding: 20px 0 0;
 }
 .logo img{width: 95%; }

 /*
estilos para el menu
 */

.menu_bar{
  text-align: right;
  z-index: 9999;
  display:block;
}

.bt-menu {
    display:block;
    padding:10px 15px;
    color:#000;
    text-decoration:none;
    font-weight: bold;
    font-size:25px;
  }

nav.menu{
  background-color: rgba(255,255,255,1);
  position: fixed;
  right: -100%;
  float: none;
  width: 60%;
  height: 100%;
  overflow-y: scroll;
}

nav.menu ul{
  text-align: left;
  list-style: none;
  overflow: hidden;/* limpiar float */ 
}

nav.menu ul li{
  display:block;
  padding: 0px 0;
}
nav.menu ul li a{
  display: block; /*esto es para poder darle espacio en todos los lados*/ 
  padding: 20px 20px;
  font-size: 16px;
  color: #4d4d4d;
  text-transform: uppercase;
  text-decoration: none;

}

.menu_bar span {
    font-size:30px;
  }

}
.clear{clear: both;}  /*otra opcion para limpiar los float*/

/*************************************
        BACKGROUND VIDEO HOME STYLES
**************************************/
.cover{background-color: rgba(0,0,0,0.7); width: 100%; height: 100%; z-index: 9; position: absolute; top: 0; left: 0; }
.blog,.section5 {
	height: 100%;
	width: 100%;
  position: relative;
  overflow-y: hidden;
  color: white;
}

.blog video,.section5 video,.simple video {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -100;
}

/*************************************
            section 1
**************************************/
.blog{width: 100%; height: 100%; position: relative; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.cont-blog{width: 100%; z-index: 8888; text-align: center; max-width: 980px; margin:0 auto;}
.cont-blog h1{font-size: 80px; font-family: 'Roboto', sans-serif; color: #ffffff; font-weight: bold;}
.cont-blog h4{font-size: 36px; padding-bottom: 20px; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 8px; color: #ffffff; font-weight: normal;}
.cont-blog a{display: inline-block; padding:10px 30px; text-decoration: none; font-size: 30px; font-weight: bold; text-align: center; background-color: #f1ee08; color: #000000;}

@media screen and (max-width: 650px){
.blog{width: 100%; height: 100%;  position: relative; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.cont-blog{width: 100%; z-index: 7777; text-align: center; max-width: 780px; margin:0 auto;}
.cont-blog h1{font-size: 60px; color: #ffffff; font-weight: bold;}
.cont-blog h4{font-size: 18px; letter-spacing: 8px; color: #ffffff; font-weight: normal;}
}



/*************************************
            simple page
**************************************/


.cont-simple{width: 100%; padding: 40px 0; text-align: center; max-width: 980px; margin:0 auto;}
.cont-simple h2{font-size: 26px; line-height: 30px; text-align: justify; font-weight: bold; padding:25px 0 15px;}
.cont-simple h3{font-size: 20px; line-height: 24px; text-align: justify; font-weight: bold; padding-bottom: 15px;}
.cont-simple p{font-size: 16px; line-height: 22px; text-align: justify; padding-bottom: 15px;}

@media screen and (max-width: 800px){
  .cont-simple{width: 90%; padding: 40px 0; text-align: center; max-width: 980px; margin:0 auto;}
.cont-simple h2{font-size: 26px; line-height: 30px; text-align: left; font-weight: bold; padding:25px 0 15px;}
.cont-simple h3{font-size: 20px; line-height: 24px; text-align: left; font-weight: bold; padding-bottom: 15px;}
.cont-simple p{font-size: 16px; line-height: 22px; text-align: left; padding-bottom: 15px;}
}

/*************************************************
                    section video
*************************************************/
#video-viewport { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; }
video { display: block; width: 100%; height: auto; }
.fullsize-video-bg { height: 450px; position: relative; overflow: hidden; }
.fullsize-video-bg:before { content: ""; background: rgba(0,0,0,0.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.fullsize-video-bg .inner { display: table; width: 100%; max-width: 800px; height: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 2; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.fullsize-video-bg .inner > div { text-align: center; display: table-cell; vertical-align: middle; padding: 0 2em; }
.fullsize-video-bg .inner div h1{font-weight: bold; font-family: 'Roboto', sans-serif; font-size:60px; color: #ffffff;}
.fullsize-video-bg .inner div h3{font-weight: normal; font-size:28px; line-height: 32px; color: #ffffff; padding: 10px 0;}
.fullsize-video-bg .inner div p{font-weight: normal; font-size:18px; line-height: 22px; color: #ffffff; padding: 10px 0;}
.img-responsive{width: 100%;height: auto;}
.img-responsive img{width: 100%; height: auto;}

@media screen and (max-width:650px){
    .empty{display: none;}
#video-viewport { position: absolute; top: 0; left: 0; width: 100%; height: auto; overflow: hidden; z-index: -1; }
video { display: block; width: 100%; height: auto; }
.fullsize-video-bg { height: auto; padding: 120px 0 50px; position: relative; overflow: hidden; }
.fullsize-video-bg:before { content: ""; background: rgba(0,0,0,0.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.fullsize-video-bg .inner { display: table; width: 100%; max-width: 800px; height:auto; margin: 0 auto; padding: 0; position: relative; z-index: 2; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.fullsize-video-bg .inner > div { text-align: center; display: table-cell; vertical-align: middle; padding: 0 1em; }
.fullsize-video-bg .inner div h1{font-weight: bold; text-align: center; font-size:26px; }
.fullsize-video-bg .inner div h3{font-weight: normal; font-size:18px; line-height: 22px; color: #ffffff; padding: 10px 0;}
.fullsize-video-bg .inner div p{font-weight: normal; font-size:14px; line-height: 18px; color: #ffffff; padding: 10px 0;}

}