/* CSS Document */
body {
	margin:0!important;
	padding:0!important;
}

#page {
	height:100vh;
	background-image: url(../imgs/bg.jpg);
}

.rel {
	position:relative!important;
}

.disclamer {
	transition: ease-out .2s;
	transition-delay:.1s;
	opacity:0;
	text-align:center;
	font-size:1.2vw!important;
}

#guia {
    opacity:1;
    -webkit-transition:opacity 0.3s ease-out;
    -moz-transition:opacity 0.3s ease-out;
    transition:opacity 0.3s ease-out;
}

.celuloseHover:hover .disclamer, #celuloseHover:active .disclamer,
.industrialHover:hover .disclamer, #industrialHover:active .disclamer,
.florestalHover:hover .disclamer, #florestalHover:active .disclamer,
.biomaisHover:hover .disclamer, #biomaisHover:active .disclamer,
.produtosHover:hover .disclamer, #produtosHover:active .disclamer {
	transition: ease-out .4s;
	transition-delay:.1s;
	opacity:1;
}

#celulose {
	background-image:url(../imgs/celulose.png);
}

#guia p {
	position:absolute;
	bottom:0;
}

#industrial {
	background-image:url(../imgs/industrial.png);
}


#florestal {
	background-image:url(../imgs/florestal.png);
}


#biomais {
	background-image:url(../imgs/biomais.png);
}


#produtos {
	background-image:url(../imgs/produtos.png);
}

#marginBottom, #marginTop {
	height: 4vh;
}

.option {
	height: 10vh;
	background-size: contain;
	background-position:center center;
	background-repeat:no-repeat;
	margin-bottom:2vh;
}

#selected {
	height: 30vh;
}


#guia {
	background-image:url(../imgs/guia.png);
	vertical-align:bottom;
	height:28vh;
	width:100%;
	background-size: contain;
	background-position:center center;
	background-repeat:no-repeat;
	margin-bottom:2vh;
}

#guia2 {
	background-image:url(../imgs/guia.png);
	vertical-align:bottom;
	height:28vh;
	width:100%;
	background-size: contain;
	background-position:50% 50%;
	background-repeat:no-repeat;
	margin-bottom:2vh;
}

.mid {
	height:30vh;
}

.option2 {
	height: 22vh;
}

@media (min-width: 768px) {

.florestalHover .rel .disclamer p {
	color:#107346;
}

.celuloseHover .rel .disclamer p {
	color:#d7a12e;
}

.biomaisHover .rel .disclamer p {
	color:#9d3000;
}

.produtosHover .rel .disclamer p {
	color:#642600;
}

.mid {
	height:40vh;
}

#marginBottom, #marginTop {
	height: 5vh;
}

#selected {
	height: 40vh;
}

.option2 {
	height: 16.666vh;
	margin-bottom:0;
}

.option {
	height: 16.666vh;
	background-size: contain;
	background-position:center center;
	background-repeat:no-repeat;
	margin-bottom:0;
}

#guia {
	background-image:url(../imgs/guia.png);
	vertical-align:bottom;
	height:40vh;
	width:100%;
	background-size: contain;
	background-position:center center;
	background-repeat:no-repeat;
	margin-bottom:0;
}
	
.celuloseHover:hover #celulose, #celuloseHover:active #celulose {
	position:absolute;
	transition: ease-out .4s;
	transform: translate(0vw,42vh) scale(2);
}

#industrial, #florestal, #biomais, #produtos, #celulose {
	position:absolute;
	transition-delay:.1s;
	transition: ease-out .3s;
	transform: translate(0vw,0vh) scale(1);
}

.industrialHover:hover #industrial, #industrialHover:active #industrial{
	position:absolute;
	transition: ease-out .5s;
	transform: translate(24vw,26vh) scale(2.03);
}

.florestalHover:hover #florestal, #florestalHover:active #florestal {
	position:absolute;
	transition: ease-out .5s;
	transform: translate(-24vw,26vh) scale(2);
}

.biomaisHover:hover #biomais, #biomaisHover:active #biomais{
	position:absolute;
	transition: ease-out .5s;
	transform: translate(24vw,-26vh) scale(2);
}

.produtosHover:hover #produtos, #produtosHover:active #produtos {
	position:absolute;
	transition: ease-out .5s;
	transform: translate(-24vw,-26vh) scale(2);
}

.disclamer {
	transition: ease-out .2s;
	transition-delay:.1s;
	opacity:0;
	text-align:center;
	font-size:2vw!important;
}
	
}

@media (min-width: 992px) {
.celuloseHover:hover #celulose, #celuloseHover:active #celulose {
	position:absolute;
	transition: ease-out .4s;
	transform: translate(0vw,42vh) scale(2);
}

.industrialHover:hover #industrial, #industrialHover:active #industrial{
	position:absolute;
	transition: ease-out .5s;
	transform: translate(33vw,26vh) scale(2.03);
}

.florestalHover:hover #florestal, #florestalHover:active #florestal {
	position:absolute;
	transition: ease-out .5s;
	transform: translate(-33vw,26vh) scale(2);
}

.biomaisHover:hover #biomais, #biomaisHover:active #biomais{
	position:absolute;
	transition: ease-out .5s;
	transform: translate(33vw,-26vh) scale(2);
}

.produtosHover:hover #produtos, #produtosHover:active #produtos {
	position:absolute;
	transition: ease-out .5s;
	transform: translate(-33vw,-26vh) scale(2);
}

.disclamer {
	transition: ease-out .2s;
	transition-delay:.1s;
	opacity:0;
	text-align:center;
	font-size:1.2vw!important;
}

}

@media (min-width: 1200px) {
.disclamer {
	transition: ease-out .2s;
	transition-delay:.1s;
	opacity:0;
	text-align:center;
	font-size:2vh!important;
}

}