@import url('../css/fonts.css');
@import url('../css/menu.css');
@import url('../css/horizontal.css');

html,body { margin: 0px; padding: 0px; width: 100%; height: 100%; color: black; font-family: fontePrincipal; font-weight: normal; line-height: 1.1em; }

.logo { position: fixed; z-index: 999; padding-top: 20px; }
.banner { height: 80%; display: table; width: 100%; background-image: url('../pics/bannerSmall-landscape.jpg'); background-repeat: no-repeat; background-position: top left; background-attachment: scroll; background-size: cover; }
.mask { display: none; width: 100%; height: 100%; background-color: transparent; position: absolute;  }

.bannerTitulo { font-size: 30pt; color: white; line-height: 1.2em; }
.bannerTexto { font-size: 14pt; color: white; line-height: 1.8em; }
.bannerSmallText { font-size: 10pt; color: white; }
.bannerStart, .bannerStart:hover, .storieRead, .storieRead:hover { padding: 10px 20px; background-color: #ffdd00; color: black; font-size: 14pt; text-decoration: none; }
.storieRead, .storieRead:hover { font-size: 11pt; padding: 5px 10px; }
.bannerInfo { display: table-row; height: 60%; }

.stories, .offers { padding: 10px 0px 10px 0px; }

.featureTitulo { font-size: 10pt; line-height: 1.5em; }
.featureTexto { font-size: 8pt;  }
.featureTexto, .featureImagem, .featureTexto { height: 200px; }
.featureImagem, .storieImage {text-align: center;}
.featureImagem img { margin: 0 auto; }
.storieImage { max-width: 100%; }
.features { position: relative; height: 200px; max-height: 200px; overflow: hidden; }

.storieTitle { font-size: 10pt; color: white; line-height: 1.5em; }
.storieText { font-size: 8pt; color: white; }
.storieImageDiv { text-align: center; }

.offerTitle { font-size: 10pt; line-height: 1.5em; }
.offerText { font-size: 8pt;  }
.offerTime { font-size: 9pt; text-decoration: underline; }
.offerOff { font-size: 10pt; }
.offerTextLine { text-decoration: line-through; }
.offerPriceBig, .offerPriceSmall, .offerPriceListBig, .offerPriceListSmall { font-size: 24pt; font-weight: bold; }
.offerPriceSmall, .offerPriceListSmall { font-size: 10pt; }
.offerButton { border-width: 3px; background-color: transparent; color: black; padding: 10px; }
.offerOne, .offerTwo { background-color: #ffdd00; width: 48%; float: left; text-align: center; padding: 10px; }
.offerTwo { background-color: #3d3d3c; width: 50%; margin: 0% 1% 0% 1%; }
.offerOneColor, .offerOneColor:hover { color: black; border-color: black; }
.offerTwoColor, .offerTwoColor:hover, .offerTwoColor:active, .offerTwoColor:focus { color: #ffdd00 !important; border-color: #ffdd00; }
.offerDollarPrice, .offerEuroPrice { display: none; }
.offerPrices li { color: black; cursor: pointer; padding: 5px; }
.offerPrices li:hover { background-color: #F2F2F2; }

.examples { text-align: center; padding: 10px 0px 10px 0px; }
.exampleTitle { font-size: 10pt; line-height: 1.5em; }
.exampleText { font-size: 8pt;  }

.container-bg-video { background-color: #9b9d9f; margin-top: 10px; }
.container-bg-stories { background-color: #2d2d39; }

.wrapFeature { position: absolute; overflow: hidden; }
.slideFeature { position: relative; left: -100%; transition: 1s; z-index: 100; }
.slideFeatureNow { transition: 1s; left: 0%; z-index: 101; }
.erro { color: red; font-family: fontePrincipal; font-size: 12pt; }

/*
.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
*/

.card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; background-color: white; }
.card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); }
.example { padding: 15px; }
.exampleDetails { padding: 2px 16px; }

/* ****************************************** */
/* MEDIA QUERIES */
@media screen and (min-width:368px) { 
	
	.featureTitulo { font-size: 14pt; }
	.featureTexto { font-size: 8pt; }
	
}

@media screen and (min-width:568px) { 
	
	.featureTitulo { font-size: 16pt; line-height: 1.2em; }
	.featureTexto { font-size: 10pt; }
	.exampleTitle { font-size: 16pt; }
	.exampleText { font-size: 10pt;  }
	.features, .featureTexto, .featureImagem, .featureTexto { height: 250px; max-height: 250px; }
	.storieTitle { font-size: 16pt; }
	.storieText { font-size: 10pt; }
	.storieImage { max-width: 70%; }
	
}

@media screen and (min-width:768px) { 
	
	.banner { padding: 0px 60px; }
	.bannerTitulo { font-size: 44pt; }
	.bannerTexto { font-size: 20pt; }
	.bannerSmallText { font-size: 14pt; color: white; }
	.featureTexto { display: table-cell; vertical-align: middle; line-height: 1.5em; }
	.storieTitle { font-size: 24pt; }
	.storieText { font-size: 16pt; line-height: 1.5em; }
	.storieRead, .storieRead:hover { padding: 10px 20px; }
	.offerTitle { font-size: 24pt; }
	.offerText { font-size: 16pt; line-height: 1.5em; }
	.offerPriceBig { font-size: 44pt; }
	
}

@media screen and (min-width:992px) { 

	.bannerTitulo { font-size: 54pt; }
	.bannerTexto { font-size: 28pt; }
	.featureTitulo { font-size: 18pt; line-height: 1.2em; }
	.featureTexto { font-size: 14pt; }
	.exampleTitle { font-size: 18pt; }
	.exampleText { font-size: 14pt;  }
		
}