@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
body{
  font: 15px/20px 'Roboto', sans-serif;
}
body,html{height: 100%;}
header .container{position: relative}
header .navbar{
  background: #ebd4ab; /* Old browsers */
  background: -moz-linear-gradient(left,  #ebd4ab 0%, #eed6b2 30%, #f2dfc1 50%, #eed6b2 70%, #ebd4ab 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #ebd4ab 0%,#eed6b2 30%,#f2dfc1 50%,#eed6b2 70%,#ebd4ab 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #ebd4ab 0%,#eed6b2 30%,#f2dfc1 50%,#eed6b2 70%,#ebd4ab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebd4ab', endColorstr='#ebd4ab',GradientType=1 ); /* IE6-9 */
}
header .navbar #navbar{margin-left: 50px;}
header .navbar .navbar-brand{
  width: 55px;
  height: 85px;
  background: url(../images/logo-hueders.png) no-repeat;
  text-indent: -9999px;
  position: absolute;
  top: -1px;
  left: 0;
  -webkit-transition:all ease-out 0.2s;
  -moz-transition: all ease-out 0.2s;
  -o-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s
}
header .navbar .navbar-brand:hover{
  top: -6px;
}
header .navbar ul li a{
  font-weight: 700;
  color: #A1090F;
  text-transform: uppercase;
  padding: 23px 28px
}
header .navbar ul li a:hover, header .navbar ul li a:focus{
  background: none;
  opacity: 0.6
}
header .navbar ul li.icon-mail a{
  width: 20px;
  height: 11px;
  background: url(../images/icon-mail.png) no-repeat;
  text-indent: -9999px;
  padding: 0;
  display: block;
  margin: 28px 12px 0;
}
header .navbar ul li.icon-fb a{
  width: 11px;
  height: 21px;
  background: url(../images/icon-fb.png) no-repeat;
  text-indent: -9999px;
  padding: 0;
  display: block;
  margin: 23px 12px 0;
}
header .navbar ul li.icon-tw a{
  width: 20px;
  height: 16px;
  background: url(../images/icon-tw.png) no-repeat;
  text-indent: -9999px;
  padding: 0;
  display: block;
  margin: 24px 12px 0;
}
section{
  padding: 150px 0;
}
section img{
  margin: 0 auto 50px auto;
  text-align: center;
  display: block;
}
section .container{
  position: relative;
}
h1{
  font:75px/75px 'SassoonBold';
  color: #FEA058;
  text-align: center;
  max-width: 510px;
  margin: 0 auto;
  text-shadow: 4px 3px 0 #A1090F;
  letter-spacing: -1px;
  font-weight: normal;
}
h2{
  background: url(../images/h2-bg.png) no-repeat;
  color: #A1090F;
  font: 18px/18px "Postface";
  text-align: center;
  padding-top: 20px;
  text-transform: uppercase;
  width: 160px;
  height: 58px;
  position: absolute;
  top: -115px; right: 0;
  font-weight: normal;
}
h2 span{
  background: url(../images/h2-span.png) no-repeat center center;
  width: 7px;
  height: 8px;
  display: inline-block;
  padding: 5px 10px
}
h3{
  background: url(../images/h3-bg.png) no-repeat;
  color: #fff;
  font: 25px/25px "Postface";
  margin: 0 auto;
  text-align: center;
  width: 370px;
  height: 80px;
  font-weight: normal;
  padding-top: 18px
}
h3 span{
  width: 22px;
  height: 38px;
  display: inline-block;
  margin: -8px 14px
}
h3 .before{
  background: url(../images/h3-before.png) no-repeat center center;
}
h3 .after{
  background: url(../images/h3-after.png) no-repeat center center;
}
#video{
  background: url(../images/video-bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#video .video-container{
  width: 970px;
  height: 500px;
  background: url(../images/video-img-bg.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  margin: 50px auto 0;
}
#video .video-container .trailer{
  width: 530px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -265px;
  margin-top: 40px;
  z-index: 1
}
#video .video-container .trailer .iframe{
  position: absolute;
  top: 0;
  left:0;
  display: none;
  z-index: 10;
  width: 100%;
  height: 100%;
}
#video .video-container .trailer .iframe iframe{
  border: 0;
}
#video .video-container .trailer a{
  display: block;
  width: 100%;
  height: 100%;
  color: #059B7A;
  text-decoration: none;
  text-align: center;
  padding-top: 80px;
  text-shadow: 4px 3px 0 #006A9B;
  font:55px/55px 'SassoonMedium';
  outline: 1px solid #78E3C6;
  -webkit-transition:all ease-out 0.2s;
  -moz-transition: all ease-out 0.2s;
  -o-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s
}
#video .video-container .trailer a:hover{
  color: #ff6333;
  text-shadow: 4px 3px #006A9B;
  outline: 3px solid #78E3C6;
}
#video .video-container .trailer a .txt-trailer:before,
#video .video-container .trailer a .txt-trailer:after{
  width: 88px;
  height: 6px;
  background: url(../images/trailer-before.jpg) no-repeat;
  content: "";
  position: absolute;
  top: 110px;
  margin: 0 10px;
}
#video .video-container .trailer a .txt-trailer:before{
  margin-left: -88px;
}
#video .video-container .trailer a .btn-play{
  display: block;
  width:57px;
  height: 53px;
  background: url(../images/trailer-play.jpg) no-repeat;
  margin: 15px auto;
}
#app{
  background: url(../images/app-bg.jpg);
}
#app .texto{
  width: 938px;
  height: 229px;
  margin: 0 auto;
  background: url(../images/app-txt.png) no-repeat center center;
  padding: 55px;
}

.textoTrailer{
	font: 17px/26px "Questrial";
	width: 938px;
	height: 400px;
	margin: 0 auto;
	background: url(../images/app-txt02.png) no-repeat center center;
	padding: 55px;
	margin-top: 50px;
}

.textoApp{
	font: 17px/26px "Questrial";
	width: 938px;
	height: 300px;
	margin: 0 auto;
	background: url(../images/app-txt03.png) no-repeat center center;
	padding: 55px;
	margin-top: 50px;
}

#app .texto p{
  font: 17px/26px "Questrial";
  max-height: 100px;
  overflow: hidden;
}



#app h3{
  margin-top: -40px;
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}
#web{
  background: url(../images/web-bg.jpg);
}
#web .texto, #fasciculos .texto{
  width: 830px;
  margin: 40px auto 0;
}
#web .texto p, #fasciculos .texto p{
  font: 17px/26px "Questrial";
}
#web h3{
  margin-top: -40px;
  position: relative;
  z-index: 1;
}
#fasciculos{
  background: url(../images/fasciculos-bg.jpg);
}
#fasciculos h3{
  margin-top: 40px
}
#acerca{
  background: #7cd0c1;
  height: 100%;
}
#acerca h2{
  background: url(../images/acerca-h2.png) no-repeat;
  width: 306px;
  height: 65px;
  right: auto;
  top: -80px;
  left: 250px;
  padding-top: 22px;
}
#acerca .texto{
  width: 965px;
  height: 280px;
  margin: 40px auto 0;
  background: url(../images/acerca-txt.png) no-repeat center center;
  padding: 60px 70px;
}
#acerca .texto p{
  font: 17px/26px "Questrial";
  max-height: 100px;
  overflow: hidden;
}
/*Responsive*/
@media only screen
and (min-width : 320px)
and (max-width : 767px) {
  h1{width: 100%; font: 45px/45px 'SassoonBold'}
  h2{right: 50%; margin-right: -80px}
  h3{max-width: 100%; background-size: 100%; margin: 20px auto !important;}
  section{padding: 130px 0 50px}
  #acerca h2{left: 50%; margin-left: -150px;}
  .texto{width: 100%!important; text-align: center}
  #app .texto, #acerca .texto{ padding: 15px; text-shadow: 1px 1px 0px #fff; height: auto; background: rgba(255, 255, 255, 0.6); border-radius: 15px}
  #app .texto p, #acerca .texto p{height: auto; overflow: visible; max-height: none;}
  #fasciculos .col-sm-4{margin-bottom: 25px}
  #video .video-container{width: 100%; height: 280px;background: none}
  #video .video-container .trailer{width: 100%; height: 100%; left: 0; margin: 0; background: rgba(255, 255, 255, 0.7);}
  #video .video-container .trailer a .txt-trailer:before,
  #video .video-container .trailer a .txt-trailer:after{display: none}
  #video .video-container .trailer .play{opacity: 0.7}
  header .navbar .navbar-brand{top: -16px; left: 10px;}
  .navbar-toggle .icon-bar{background: #A1090F; width: 25px; height: 3px;}
  header .navbar ul li a{padding: 10px 28px; text-align: right;}
  header .navbar-right {margin: -15px 0 20px}
  header .navbar-right li{float: right; font-size: 0}
  .textoTrailer{padding: 15px;text-shadow: 1px 1px 0px #fff;height: auto;background: rgba(255, 255, 255, 0.6);border-radius: 15px;width: 100%;text-align: center;}

}
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
  .texto{width: 100%!important;}
  header .navbar ul li a{padding: 23px 18px;}
  header .navbar .navbar-brand{left: 20px;}
  section{padding-bottom: 80px}
  #app .texto p, #acerca .texto p{font: 15px/20px "Questrial"}
  #acerca h2{left: 50%; margin-left: -150px;}
  #video .video-container{width: 100%; background-size: 100%}
  #video .video-container .trailer {width: 500px;height: 280px; margin-left: -250px; margin-top: 75px;}
  #video .video-container .trailer a, #video .video-container .trailer a:hover{outline: none}
  .textoTrailer{width: 100%;}
}

/*Fonts*/
@font-face {
    font-family: 'Questrial';
    src: url('../fonts/QUESTRIALREGULAR.eot');
    src: url('../fonts/QUESTRIALREGULAR.eot') format('embedded-opentype'),
         url('../fonts/QUESTRIALREGULAR.woff2') format('woff2'),
         url('../fonts/QUESTRIALREGULAR.woff') format('woff'),
         url('../fonts/QUESTRIALREGULAR.ttf') format('truetype'),
         url('../fonts/QUESTRIALREGULAR.svg#Questrial') format('svg');
}
@font-face {
    font-family: 'SassoonMedium';
    src: url('../fonts/SASSOONINFANTCOMMEDIUM.eot');
    src: url('../fonts/SASSOONINFANTCOMMEDIUM.eot') format('embedded-opentype'),
         url('../fonts/SASSOONINFANTCOMMEDIUM.woff2') format('woff2'),
         url('../fonts/SASSOONINFANTCOMMEDIUM.woff') format('woff'),
         url('../fonts/SASSOONINFANTCOMMEDIUM.ttf') format('truetype'),
         url('../fonts/SASSOONINFANTCOMMEDIUM.svg#SassoonMedium') format('svg');
}
@font-face {
    font-family: 'SassoonBold';
    src: url('../fonts/SASSOONINFANTCOMBOLD.eot');
    src: url('../fonts/SASSOONINFANTCOMBOLD.eot') format('embedded-opentype'),
         url('../fonts/SASSOONINFANTCOMBOLD.woff2') format('woff2'),
         url('../fonts/SASSOONINFANTCOMBOLD.woff') format('woff'),
         url('../fonts/SASSOONINFANTCOMBOLD.ttf') format('truetype'),
         url('../fonts/SASSOONINFANTCOMBOLD.svg#SassoonBold') format('svg');
}
@font-face {
    font-family: 'Postface';
    src: url('../fonts/Postface.eot');
    src: url('../fonts/Postface.eot') format('embedded-opentype'),
         url('../fonts/Postface.woff2') format('woff2'),
         url('../fonts/Postface.woff') format('woff'),
         url('../fonts/Postface.ttf') format('truetype'),
         url('../fonts/Postface.svg#Postface') format('svg');
}