/*
Theme Name: Natal Theme
Theme URI: maia@uniarp.edu.br
Description: Tema Natal Solidário dev por TI UNIARP.
Author: Andre Maia
Author URI: maia@uniarp.edu.br
Version: 1.0
*/
				@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&family=Shadows+Into+Light&display=swap');
				*{margin: 0; padding: 0; border: none; box-sizing: border-box;}
				body, html{
					//background: #ddd;
					font-family: "Montserrat", sans-serif;
					font-weight: 300;
					font-size: 16px;
					background: #f3f3f3;
					background-image: url(bcg_room.png);
					background-size: 75px;
					background-repeat: repeat-x;
					background-position: 0 -1600px;
				}
				html{
					scroll-behavior: smooth;
				}
				a{text-decoration: none;}
				ul, ol{list-style: none;}
				img{max-width: 100%}
				div.content{
					position: relative;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
				}
				div.tituloEsq{
					flex: 0 0 600px;
					height: 90vh;
					background-image: url(como-adotar.png);
					background-size: 90%;
					background-repeat: no-repeat;
					background-position: center 70%;
				}
				.mobileComoAdotar{
					width:  100%;
					margin: 0 auto;
					background-image: url(como-adotar-mobile.png);
					height: 137px;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					//background-color: pink;
					display: none;
					z-index: 10;
				}				
				div.arvore{
					flex: 0 0 330px;
					margin-top: 50px;
					height: 600px;
					//background: pink;
					background-image: url(img_tree2.png);
					background-repeat: no-repeat;
					background-size: contain;
					position: relative;
					z-index: 1;
					animation: shakeanimationArvore 0.5s 3s ease-in;
				}
				div.luzes{
					position: absolute;
					width: 330px;
					height: 100%;
					background-image: url(img_lights.png);
					background-repeat: no-repeat;
					background-size: contain;
					z-index: 2;
					animation: fadeIn 1s ease-in;
				}
				div.estrela{
					position: absolute;
					width: 60px;
					height: 60px;
					background-image: url(img_star.png);
					background-repeat: no-repeat;
					background-size: cover;
					z-index: 3;	
					top: -45px;
					left: 50%;	
					margin-left: -33px;	
					z-index: 3;	
					animation: caindo 1s ease-in;
				}
				div.presente1{
					width: 40px;
					height: 78px;
					position: absolute;
					//bottom: 70px;
					top: -450px;
					left: 20px;
					background-image: url(img_present1.png);
					background-repeat: no-repeat;
					background-size: 95%;					
					z-index: 4;
					animation: cai 0.5s 4s ease forwards;
				}
				div.presente2{
					width: 74px;
					height: 61px;
					position: absolute;
					top: -450px;
					left: 50px;
					background-image: url(img_present2.png);
					background-repeat: no-repeat;
					background-size: 95%;					
					z-index: 5;
					animation: cai2 0.5s 4.2s ease forwards;
				}
				div.presente3{
					width: 47px;
					height: 43px;
					position: absolute;
					top: -495px;
					left: 130px;
					background-image: url(img_present3.png);
					background-repeat: no-repeat;
					background-size: 95%;					
					z-index: 4;
					animation: cai3 0.5s 4.1s ease forwards;
				}
				div.presente4{
					width: 60px;
					height: 88px;
					position: absolute;
					top: -450px;
					left: 180px;
					background-image: url(img_present4.png);
					background-repeat: no-repeat;
					background-size: 95%;					
					z-index: 5;
					animation: cai4 0.5s 4.3s ease forwards;
				}	
				div.presente5{
					width: 99px;
					height: 45px;
					position: absolute;
					top: -450px;
					left: 220px;
					background-image: url(img_present5.png);
					background-repeat: no-repeat;
					background-size: 95%;					
					z-index: 4;
					animation: cai5 0.5s 4s ease forwards;
				}
				a.carta1{
					display: block;
					width: 50px;
					height: 54px;
					position: absolute;
					top: 105px;
					left: 210px;
					background-image: url(carta1-b.png);
					background-repeat: no-repeat;
					background-size: 70%;					
					z-index: 6;				
				}
				a.carta2{
					display: block;
					width: 50px;
					height: 54px;
					position: absolute;
					top: 105px;
					left: 75px;
					background-image: url(carta2-b.png);
					background-repeat: no-repeat;
					background-size: 70%;					
					z-index: 6;
				}
				div.bola1{
					display: block;
					width: 50px;
					height: 54px;
					position: absolute;
					top: 339px;
					left: 145px;
					background-image: url(img_bauble-yellow.png);
					background-repeat: no-repeat;
					background-size: 50%;					
					z-index: 6;
				}
				div.bola2{
					display: block;
					width: 50px;
					height: 54px;
					position: absolute;
					top: 331px;
					left: 265px;
					background-image: url(img_bauble-red.png);
					background-repeat: no-repeat;
					background-size: 50%;					
					z-index: 6;
				}
				div.bola3{
					display: block;
					width: 50px;
					height: 54px;
					position: absolute;
					top: 128px;
					left: 170px;
					background-image: url(img_bauble-blue.png);
					background-repeat: no-repeat;
					background-size: 50%;					
					z-index: 6;
				}
				a.carta1:hover, a.carta2:hover{
				  	animation: shakeanimation;
				  	animation-duration: 0.5s;
				  	transform: translate3d(0, 0, 0);					
				}
				div.titulo{
					width: 500px;
					height: 521px;
					background-image: url(titulo.png);
					background-repeat: no-repeat;
					background-size: contain;
					position: absolute;
					z-index: 5;
					top: -85px;
					left: -500px;
					//animation: shakeanimationArvore 0.5s 3s ease-in;					
				}
				div.social{
					width: 80px;
					height: 80px;
					position: fixed;
					top: 150px;
					right: 20px;
					z-index: 10;
				}
				div.social a.whats{
					display: block;
					width: 80px;
					height: 80px;	
					background-image: url(whats.png);
					background-size: contain;
					background-repeat: no-repeat;				
				}
				div.gato{
					width: 70px;
					height: 70px;
					position: absolute;
					bottom: 100px;
					right: -120px;
					z-index: 12;
					background-image: url(cat_wk51.gif);
					background-size: cover;
					background-position: center;			
				}
				.modal {
				    position: fixed;
				    top: 0;
				    left: 0;
				    bottom: 0;
				    right: 0;
				    display: none;
				    overflow: auto;
				    background-color: #000000;
				    background-color: rgba(0, 0, 0, 0.7);
				    z-index: 9999;
				}
				.modal-window {
				    position: relative;
				    background-color: #8b0d0d;
				    background-image: url(Snowflakes-PNG-Image-33456.png), url(Red-Gradient-Background.png);
				    //background-image: url(Snowflakes-PNG-Image-33456.png), linear-gradient(206deg, #8b0d0d, #d33131);
				    background-size: 20%, cover;
				    background-repeat: no-repeat;
				    background-position: 3% 3%, center;
				    width: 50%;
				    margin: 5% auto;
				    //padding: 20px;
				    //border: 1px solid #fff;
				    //border-radius: 4px;
				    font-family: 'Shadows Into Light', sans-serif;
				    font-size: 1.2em;
				    box-shadow: inset 5px 5px 1px rgba(0,0,0,0.07), 10px 10px 7px rgba(0,0,0,0.3);
				    color: #fff;
				    overflow: hidden;
				    height: 500px;
				}
				.animateBlock{
					animation: animateBlock 350ms ease-in 1;
				}
				.modal-window.small {
				    width: 30%;
				}
				.modal-window.large {
				    width: 75%;
				}
				.modal-window .modal_perfil{
					display: flex;
					align-items: center;
					//margin: 10px 20px;
				    flex-wrap: wrap;
				}
				.modal-window h3{
					margin: 10px 0;
					font-size: 3em;
					font-weight: 100;
					line-height: 20px;
				}
				.modal-window .sep{
					border-top: 1px dashed #fff;
					margin-bottom: 20px;
				}
				.modal-window a{
					color: #d6ef4d;
				}
				.modal-window a.carta{
					font-size: 1.5em;
					margin: 30px 0;
					border: 2px dashed #d6ef4d;
					padding: 10px 20px 10px 40px;
					background-image: url(carta-icone.png);
					background-size: 20px;
					background-repeat: no-repeat;
					background-position: 10px center;
				}
				.modal_perfil .col1{
					flex: 0 0 30%;
					background-color: #262626;
					height: 500px;
					background: rgba(0, 0, 0, 0.2);
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.col1 .avatar{
					width: 150px;
					height: 150px;
					background-size: cover;
					background-repeat: no-repeat;
					border: 10px double #ccc;
					border-radius: 4px;
					margin: 20px;
				}
				.modal_perfil .col2{
					margin-left: 40px;
					height: 500px;
				}
				.modal_perfil form{
					margin-top: 30px;
				}
				.modal_perfil form span{
					font-size: 1.5em;
				}
				.modal_perfil form input[type="text"], .modal_perfil form input[type="email"]{
					font-size: 1em;
					border-radius: 8px;
					border: 1px solid #ccc;
					margin-bottom: 8px;
					padding: 10px;
					color: #262626;
					background: #ddd;
					min-width: 300px;
				}
				.modal_perfil form input[type="submit"]{
					font-size: 1.5em;
					border-radius: 8px;
					border: 1px solid #ccc;
					margin-bottom: 8px;
					padding: 5px 20px;
					font-family: 'Shadows Into Light', sans-serif;
					cursor: pointer;			
				}
				.close {
				    position: absolute;
				    top: 0;
				    right: 0px;
				    color: rgba(0,0,0,0.3);
				    height: 30px;
				    width: 30px;
				    font-size: 30px;
				    line-height: 30px;
				    text-align: center;
				    color: #fff;
				    background-color: rgba(0, 0, 0, 0.5);
				}
				.close:hover,
				.close:focus {
				    color: #fff;
				    cursor: pointer;
				}
				.open {
				    display: block;
				}		

				@media screen and (max-width: 1200px){
					.mobileComoAdotar{
						display: block;
					}
					.tituloEsq{
						display: none
					}
					.modal-window .modal_perfil{
						flex-direction: column;
					}
					.modal-window{
						height: auto;
						padding: 0px;
						font-size: 1em;
					}
					.modal_perfil .col1{
						flex: 0 0 100%;
						height: auto;
					}
					.modal_perfil .col2{
						flex: 0 0 100%;
						height: auto;
						margin: auto;
					}
					.col1 .avatar{
						width: 90px;
						height: 90px;
						background-size: cover;
						background-repeat: no-repeat;
						border: 10px double #ccc;
						border-radius: 4px;
						margin: 10px;
					}
					.modal_perfil form input[type="text"], .modal_perfil form input[type="email"]{
						width: 100%;
						min-width: auto;
					}														
				}
				@media screen and (max-width: 800px){
					div.content{
						background-image: url(titulo.png);
						background-size: 70%;
						background-repeat: no-repeat;
						background-position: -45% 15%;
					}
					div.arvore{
						//height: 90vh;
					}
					.modal-window {
					    width: 90%;
					    margin: 2% auto;
					}
					.modal_perfil form div{
						margin-bottom: 20px;
					}
					.modal_perfil form{
						margin-top: 30px;
					}
					div.gato{
						bottom: -10px;
						left: 190px;		
					}							
				}					

@keyframes cai{
  0%{opacity: 0}
  100%{transform: translateY(895px)}
}
@keyframes cai2{
  0%{opacity: 0}
  100%{transform: translateY(910px)}
}
@keyframes cai3{
  0%{opacity: 0}
  100%{transform: translateY(985px)}
}
@keyframes cai4{
  0%{opacity: 0}
  100%{transform: translateY(895px)}
}
@keyframes cai5{
  0%{opacity: 0}
  100%{transform: translateY(925px)}
}
@keyframes aparece{
	0%{
		transform: scale(1.5, 1.5);		
	}
}				

@keyframes caindo{
	0%{
		top: -500px;		
	}
}				

@keyframes fadeIn{
	0%{
		opacity: 0%;
	}
	100%{
		opacity: 100%;
	}
}

@keyframes shakeanimation {
  15% {
    transform: translate3d(-1px, 2px, 0);
  }
  25% {
    transform: translate3d(1px, 5px, 0);
  }
  50% {
    transform: translate3d(0, 2px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shakeanimationArvore {
  15%, 85% {
    transform: translate3d(-2px, 0, 0);
  }
  25%, 75% {
    transform: translate3d(4px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}