@charset "utf-8";

/* CSS Document */

* {margin:0; padding:0;font-family: 'Roboto Condensed', sans-serif;}
html {height:100%;}
body {margin:0;width:100%;height:100%;background-color:#8c9abd;padding:0;text-align:center;color:#333;font-size:62.5%;}
div.clear {clear:both;}
img{width:100%;height:auto;}

.geral{width:100%;height:100%;background-color:#8c9abd;overflow:hidden;}

#wrap {position:relative;width:100%;height:100%;background-color:#8c9abd;}

.sair{position:absolute;width:5%;top:4%;right:2%;margin:auto;z-index:3000;cursor:pointer;display:none;}

/* #intro{position:relative;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);} */
#capa{position:absolute;width:100%;top:0;bottom:0;right:0;left:0;margin:auto;}
.inicio{position:absolute;width:20%;min-width:150px;font-size:40px;right:0;left:0;bottom:4%;margin:auto;border:5px solid #335539;border-radius:0.5em;background-color:#e8e7cd;padding:0.5%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);cursor:pointer;}
.inicio:hover{background-color:#335539;color:#fff;}

.pagina{position:absolute;height:100%;top:0;bottom:0;right:0;left:0;margin:auto;overflow:hidden;}
#pagina1, #pagina2{display:none;}
#imgBase{position:absolute;width:100%;top:0;bottom:0;right:0;left:0;margin:auto;}
.canvas{position:absolute;width:100%;top:0;bottom:0;right:0;left:0;margin:auto;}
/* #canvas2{width:100%;height:100%;} */
#animation_container{display:none;}
#parada{position:absolute;width:100%;top:0;bottom:0;right:0;left:0;margin:auto;display:none;}

.botao{position:absolute;width:16%;min-width:175px;font-size:30px;right:0;left:0;bottom:7%;top:auto;margin:auto;border:5px solid #335539;border-radius:0.5em;background-color:#e8e7cd;padding:0.5%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
display:none;
cursor:pointer;}
.botao:hover{background-color:#335539;color:#fff;}

.contemCena{position:absolute;width:45%;max-width:800px;top:0;bottom:0;right:0;left:0;margin:auto;font-size:1.3em;z-index:5000;
display:none;
}
.cena{position:relative;border:5px solid #335539;border-radius:0.5em;background-color:#e8e7cd;padding:0.5%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);text-align:left;top:50%;transform:translateY(-50%);
}

.dica{width:15%;margin-bottom:3%;}
.recArvore{width:60%;margin-bottom:3%;}
.recFlor{width:60%;margin-bottom:3%;}
.recGuirlanda{width:60%;margin-bottom:3%;}
.recMandala{width:60%;margin-bottom:3%;}
.recPresentinho{width:60%;margin-bottom:3%;}
#cenaPresente{width:60%;margin:0 auto;margin-top:3%;}
#cenaArvore{width:40%;float:right;}
#cenaFlor{width:40%;float:right;}
#cenaGuirlanda{width:20%;float:right;}
#cenaLed{width:60%;margin:0 auto;margin-top:3%;}
#cenaMandala{width:20%;float:right;}
#cenaPresentinho{width:20%;float:right;}
.btn_amigo{width:40%;margin-top:3%;cursor:pointer;}
.fechar{position:absolute;width:5%;top:0;right:0;cursor:pointer;}

.direita{margin-top:5%;}
.leftContent{width:60%;float:left;}
.leftContent2{width:80%;float:left;}
.rightContent{width:40%;float:right;}

#contemQuadro{position:absolute;width:45%;top:0;bottom:0;right:0;left:0;margin:auto;
display:none;
z-index:6000;
}
#quadro{position:relative;border:5px solid #335539;border-radius:0.5em;background-color:#f2f2f2;padding:3%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);font-size:2em;text-align:left;top:50%;transform:translateY(-50%);}
.txtarea{width:64%;height:25px;float:right;}

.cancelar{width:15%;float:left;;cursor:pointer;}
.enviar{width:15%;float:left;margin-left:5%;cursor:pointer;display:none;}
#sucesso{position:absolute;bottom:0;right:5%;width:32%;
display:none;
}
#erro{position:absolute;bottom:0;right:5%;width:32%;
display:none;
}


.azul{position:absolute;width:12%;height:20%;top:auto;right:auto;cursor:pointer;}
.vermelho{position:absolute;width:8%;height:12%;top:auto;right:auto;cursor:pointer;}
#azul1{bottom:19%;left:56%;}
#azul2{bottom:22%;left:35%;}
#azul3{bottom:11%;left:4%;}
#vermelho1{bottom:0%;left:56%;}
#vermelho3{bottom:8%;left:35%;}
#vermelho2{width:10%;bottom:15%;left:40%;}
#pend{position:absolute;width:10%;height:40%;top:0%;left:3%;cursor:pointer;}




.rosa{position:absolute;width:4%;height:5%;top:auto;right:auto;cursor:pointer;}
#rosa1{bottom:50%;left:18%;transform: rotate(-33deg);}
#rosa2{bottom:58%;left:32%;transform: rotate(20deg);}
#rosa3{bottom:35%;left:12%;}

.verde{position:absolute;width:4%;height:5%;top:auto;right:auto;cursor:pointer;}
#verde1{bottom:39%;left:27%;transform: rotate(33deg);}
#verde2{bottom:19%;left:32%;transform: rotate(20deg);}

.brilho{position:absolute;width:3%;height:5%;top:auto;right:auto;cursor:pointer;}
#brilho1{bottom:59%;left:14%;}
#brilho3{bottom:44%;left:28%;}
#brilho6{bottom:41%;left:8%;}
@keyframes fullScale{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.1);
    }
}
.brilho{
    animation: fullScale 1s;
	animation-iteration-count:infinite;
}

.brilho2{position:absolute;width:3%;height:5%;top:auto;right:auto;cursor:pointer;}
#brilho2{width:2%;bottom:60%;left:27%;}
#brilho4{width:2%;bottom:44%;left:14%;}
#brilho5{width:2%;bottom:42%;left:34%;}
#brilho7{width:2%;bottom:28%;left:13%;}
#brilho8{width:2%;bottom:30%;left:20%;}
#brilho9{width:2%;bottom:30%;left:34%;}
.brilho2{
    animation: fullScale 1s;
	animation-iteration-count:infinite;
	animation-delay:0.5s;
}


.guirlandaImg{position:absolute;width:14%;height:18%;top:12%;left:auto;bottom:auto;right:18%;transform: scale(1);cursor:pointer;}
.arvoreImg{position:absolute;width:35%;height:69%;top:auto;right:auto;bottom:9%;left:6%;cursor:pointer;}
@keyframes fullScale{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.1);
    }
}
.guirlandaImg:hover{
    animation: fullScale 1s;
	animation-iteration-count:infinite;
}
.arvoreImg:hover{
    animation: fullScale 1s;
	animation-iteration-count:infinite;
}

#pendulum-child {
    width:300%;
    height:930%;
    background-image:url(../images/pendulum.png);
	 background-size: contain;
	 background-position: center center;
background-repeat: no-repeat;	 
    position:absolute;
    left:-35px;
    top:0px;
	z-index:3000;
}
 
#pendulum-parent {
	position:absolute;
	left:5%;
    width:55%;
    height:10%;
	 background-size: contain;
	 background-position: center center;
	 background-repeat: no-repeat;
	z-index:4000;
}

.florImg{position:absolute;width:7%;height:9%;top:auto;left:auto;cursor:pointer;}
#flor1{bottom:22%;right:6%;}
#flor2{bottom:87%;right:80%;}
#flor3{bottom:65%;right:96%;}
#flor4{bottom:54%;right:92%;}
#flor5{bottom:44%;right:97%;}
#flor6{bottom:38%;right:91%;}
#flor7{bottom:20%;right:-2%;}

.rodar {
    position: absolute;
    bottom: 22%;
    left: auto;
    width:7%;height:9%;top:auto;right:6%;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@media only screen and (orientation:portrait){
  body {height:100vw;transform:rotate(90deg);}
}

@media only screen and (orientation:landscape){
	body {margin:0; padding:0;width:100%;height:100%;text-align:center;color:#333;font-size: 62.5%;}  
}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.contemCena{width:80%;}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	#contemQuadro{width:95%;height:70%;}
	#quadro{font-size:1.5em;}
	.contemCena{width:98%;height:90%;}
	.leftContent{width:100%;}
	.leftContent2{width:100%;}
	.imgInfo{display:none;}
	.cena{height:100%;overflow-y:auto;}
	.recFlor{width:40%;}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	.contemCena{width:80%;}
}

@media screen and (max-width: 824px) and (orientation: landscape) {
	#contemQuadro{width:95%;height:70%;}
	#quadro{font-size:1.5em;}
	.contemCena{width:98%;height:90%;}
	.leftContent{width:100%;}
	.leftContent2{width:100%;}
	.imgInfo{display:none;}
	.cena{height:100%;overflow-y:auto;}
	.recFlor{width:40%;}
}