@import url('https://fonts.googleapis.com/css?family=Petit+Formal+Script|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

body{ font-family: 'Raleway', sans-serif;}

.top{ position: relative; height: 773px; padding-top: 30px; overflow: hidden;}
.top .logo{ display: block;}
.top .logo img{ width: 160px; position: relative;}
.top p.texto{ font-size: 20px; line-height: 30px; color: #C6C6C6; font-weight: 300; margin-top: 27px; position: relative; transition: all linear 2s; opacity: 0;}
.top p.texto.aparecer{ opacity: 1;}
.top p strong{ font-weight: 600;} 

.top .paisaje{ height: 598px; width: 100%; bottom: 0; left: 0; right: 0; position: absolute; overflow: hidden;}
.top .paisaje img{ transition: all linear 3.5s; top: 0; left: 0; right: 0; width: auto; height: 100%; position: absolute;}
.top .paisaje.mover img{ top: -30px;}
.top .paisaje.aparecer img{ height: 106%;}

.top .arbol{ height: 218px; width: 200px; top: 0; right: 0; position: absolute; overflow: hidden; transition: all linear 3s;}
.top .arbol img{ height: 358px; position: absolute; bottom: 0;}
.top .arbol.mover { height: 228px;}
.top .arbol.aparecer { width: 228px;}

.top .flores{ height: 185px; width: 160px; bottom: 0; left: 0; position: absolute; overflow: hidden;}
.top .flores img{ height: 100%; position: absolute; right: 0;}

.top .flores { bottom: 0; width: 160px; height: 160px; overflow: hidden; left: 0; transition: all linear 3.5s;}
.top .flores img{ bottom: 0; right: 0; height: 100%;}
.top .flores.aparecer { height: 180px;}

.top .personas{ height: 435px; width: 100%; bottom: 7px; right: 0; left: 0; position: absolute; overflow: hidden; text-align: right; transition: all linear 3.5s;}
.top .personas img{ height: 100%; transition: all linear 3.5s; right: 0;}
.top .personas.mover { bottom:20px;}
.top .personas.aparecer{ height: 455px;}

.intro p{ font-size: 18px; line-height: 30px; background-size: contain; text-align: center; letter-spacing: 1px; margin-top: 38px; font-weight: 300; background-image: url('../img/separador-naranja.png'); background-repeat: no-repeat; background-position: center bottom; padding-bottom: 40px;}
.intro p strong{ font-weight: 600;}
.intro h3{ font-family: 'Petit Formal Script', cursive; font-size: 25px; line-height: 31px; text-align: center; color: #A0A0A0; margin:25px 0;}

.destacados{ background-color: #F4F4F4; padding:0;}
.destacados .modulo{ background-image: url('../img/sombra-destacados.png'); background-repeat: no-repeat; background-position: bottom center; padding-bottom: 40px;}
.destacados .modulo:first-child h2{ margin-top: 35px;}
.destacados .modulo:last-child{ background-image: none;}
.destacados .modulo:last-child p{ margin: 0;}
.destacados .modulo .centrar-img{ display:none;}
.destacados h2{ font-size: 18px; line-height: 21px; font-weight: 300; color: #DF660A; margin: 5px 0 20px;}
.destacados p{ font-size: 16px; line-height: 26px; color: #000; margin: 0 0 35px;}

.formulario{ position: relative; padding-top: 35px; padding-bottom: 60px;}
.formulario h2{ font-size: 18px; line-height: 21px; font-weight: 300; color: #DF660A; margin: 5px 0 20px;}
.formulario p{ font-size: 16px; line-height: 26px; color: #000; margin: 0 0 35px;}
.formulario img{ display: none;}
.formulario iframe{ background-color:#FFEDDD; border-radius:20px 0 20px 0; padding: 28px 5px 0px 20px;}

.footer{ background-color: #CCCCCC; background-image: url('../img/sombra-footer.png'); background-repeat: no-repeat; background-position: center top; padding-top: 10px; padding-bottom: 20px;}
.footer .centros{ background-image: url('../img/separador-blanco.png'); background-repeat: no-repeat; background-position: right bottom; background-size: auto 19px; padding-bottom: 40px;}
.footer .centros h3{ font-size: 13px; line-height: 18px; color: #798383; font-weight: 700; margin: 24px 0 0;}
.footer .centros p{ font-size: 13px; line-height: 18px; color: #798383; font-weight: 400; margin: 0;}
.footer .centros p strong{ font-weight: 900;}
.footer .logo img{ max-width: 100%; margin:35px 0;}
.footer ul{ margin: 0; padding: 0;}
.footer ul li{ list-style: none; display: inline-block; margin-right: 20px;}
.footer ul li:last-child{ margin-right: 0;}
.footer ul li a{ font-size: 13px; line-height: 20px; color: #7E7E7E; font-weight: 800;}
#sawubona-footer{ margin-top: 30px;}


@media (min-width: 576px) {
	.top{ background-position: center bottom; height: 590px; padding-top: 37px; background-size: auto 596px;}
	.top p.texto{ width: 55%;}
	.top .paisaje img{ left: -50%; position: absolute;}
	.top .personas img{right: 8%; position: absolute;}
	.top .flores{ width: 276px; height: 231px;}
	.intro p{ margin-top: 48px; padding-bottom: 45px;}
	.intro h3{ margin: 30px 0;}
	.intro h3::before{ content: "•"; display: inline-block; margin-right: 10px;}
	.intro h3::after{ content: "•"; display: inline-block; margin-left: 10px;}
	.destacados .modulo{ padding-bottom: 70px;}
	.destacados .modulo .centrar-img{ display: inline-block; height: 117px; width: 117px;}
	.destacados .modulo .centrar-img img{ max-width: 100%;}
	.destacados .modulo:first-child{ padding-top: 40px;}
	.destacados h2{ text-align: right;}
	.destacados p{ font-size: 14px; line-height: 24px; margin:0;}
	.formulario{ min-height: 865px;}	
	.formulario .imagen{ position: absolute; width: 0px; height: 280px; right: -18px; left: auto; top: -37px; overflow: hidden; transition: all linear 1.5s;}
	.formulario .imagen.mover{ width: 258px;}
	.formulario img { position: absolute; display: block; bottom: auto; left: auto; height: 280px; left: 0px; top: 0px; z-index: 2;}
	.formulario .data{ height: 190px;}
	.footer{ padding-top: 25px;}
	.footer .centros{ background-size: auto 21px; padding-bottom: 60px;}
}

@media (min-width: 768px) { 
	.top{ height: 590px;}
	.top .paisaje img { left: -25%;}
	.top .arbol{ width: 249px; height: 276px;}
	.top .arbol img{ height: 383px;}
	.top .flores{ width: 279px; height: 247px;}
	.top .personas{ height: 487px;}
	.top .personas img { right: 17%;}
	.top p.texto { width: 50%; font-size: 25px; margin-top: 21px;}	
	.formulario .imagen{ right: -24px;}
	.footer .centros { background-size: auto 28px;}
	.footer .redes{ align-self: center; text-align: right;}
}

@media (min-width: 992px) {
	.top { height: 587px; padding-top: 42px;}
	.top p.texto { width: 35%;}
	.top .paisaje img { left: 0; width: 101%;}
	.top .arbol{ width: 337px; height: 273px;}
	.top .flores{ width: 319px; height: 247px;}
	.intro h3{ margin-bottom: 55px;}
	.top .personas img { right: 27%;}
	.destacados .modulo{ text-align: center; background-image: none; padding-bottom: 40px; margin-top: -45px; padding-left: 50px; padding-right: 50px;}
	.destacados h2{ text-align: center; margin:20px 0;}
	.destacados .modulo:first-child h2{ margin-top: 20px;}
	.destacados .modulo:first-child{ padding-top: 0;}
	.formulario{ min-height: auto;}
	.formulario .imagen{ width: 0; right: auto; left: -16px; bottom: 30px; top: auto; height: 375px; transition: all linear 1.5s;}
	.formulario .imagen.mover{ width: 400px;}
	.formulario img{ height: 374px; left: auto; right: 0;}
	.formulario h2 { font-size: 20px; line-height: 24px;}
	.formulario p { font-size: 17px; line-height: 25px;}
	.footer .centros { background-size: auto 32px;}
}

@media (min-width: 1170px){
	.top { height: 598px; padding-top: 30px;}	
	.formulario img { height: 325px;}
	.footer .centros { background-size: auto 37px;}
	.intro p{ background-size: auto;}
}

@media (min-width: 1500px) {
	.top { height: 991px; padding-top: 67px;}
	.top .logo img{ width: auto;}
	.top p.texto{ margin-top: 40px; font-size: 35px; line-height: 40px; width: 45%;}
	.intro p { margin-top: 76px;}
	.intro h3{ font-size: 30px; line-height: 38px; margin-top: 52px;}
	.formulario{ padding-top: 76px; padding-bottom: 66px;}	
	.formulario .imagen{ width: 762px; right: 135%; left: auto; bottom: 0px; top: auto; height: 595px; pointer-events: none; transition: all linear 1.5s;}
	.formulario .imagen.mover{ width: 762px;}

	.formulario .anotador.mover{ right: 50%;}
	.formulario img{ height: 595px; bottom: 0; left: 0; pointer-events: none;}
	.footer { padding-top: 40px;}
	.footer .centros { background-size: auto 37px;}

	.top .paisaje{ top: 0; width: auto; height: 1008px; overflow: hidden; left: 0; right: 0;}
	.top .paisaje img{ transition: all linear 3.5s; top: 0; /*left: 0; right: 0;*/ left: auto; right: auto; width: auto; height: 100%; position: absolute;}
	.top .paisaje.mover img{ top: -30px;}
	.top .paisaje.aparecer img{ height: 106%; width: auto;}

	.top .arbol { top: 0; width: 638px; height: 474px; overflow: hidden; right: 0; transition: all linear 3s;}
	.top .arbol img{ bottom: 0; height: 719px;}
	.top .arbol.mover { height: 534px;}
	.top .arbol.aparecer { width: 680px;}

	.top .flores { bottom: 0; width: 595px; height: 463px; overflow: hidden; left: 0; transition: all linear 3.5s;}
	.top .flores img{ bottom: 0; right: 0; height: 100%;}
	.top .flores.aparecer { height: 534px;}

	.top .personas { top: 80px; width: 529px; height: 951px; overflow: hidden; left: 40%; transition: all linear 3.5s;}
	.top .personas img{ width: 100%; transition: all linear 3.5s; right: 0;}
	.top .personas.mover { top:30px;}
	.top .personas.aparecer{ width: 550px; height: 951px;}

}





/*	Mapa CCUU: */
.mapa-ccuu{width: 100%; height: 500px}
.mapa-ccuu-ver-ruta{display:none; float:right; overflow: auto; width:30%; height: 500px; position: absolute; margin-top: -500px; background-color: #FFF; right: 0px;}

/*	Shared */
.shared{padding: 0; list-style:none;}
.shared li{display: inline-block; padding: 5px}
.shared li a img{width: 32px}

/* Centrar Imagen */
.centrar-img {overflow: hidden; position: relative;}
.centrar-img img {position: absolute; left: -5000px; right: -5000px; top: -5000px; bottom: -5000px; margin:auto;}

p img {max-width: 100%;}

/* Modal */
.modal-body img {max-width: 100%;}
.modal-header {border-bottom: none;}

/* Flechas Carousel*/
a.carousel-control.right, a.carousel-control.left { background-image: none; } 



/*	Posicionador de imagen automatico */
/*.container-image {width: 100%; height:100%; position: relative; overflow: hidden;background-image:url(../img/loading.svg); background-size: 100px; background-repeat: no-repeat; background-position: center center;}
.container-image img {position: absolute; margin: auto; width: 100%; top:-10000px; bottom: -10000px; left:-10000px; right:-10000px; opacity:0; -webkit-transition:  all 1000ms ease-out;  -moz-transition:  all 1000ms ease-out;  -o-transition:  all 1000ms ease-out;  transition:  all 1000ms ease-out }
.container-image img.visible {opacity:1;}*/


@keyframes rotar { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }