@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400;1,600&display=swap');

* { box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-family: "Rubik", sans-serif;
list-style: none;
text-decoration: none;
}

html { height: -webkit-fill-available; 
 scroll-behavior: smooth;
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	min-height: -webkit-fill-available;
    justify-content: space-between;
}


header {
    background-color: white;
    height:50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	position: fixed;
    z-index: 9999;
	padding: 2em;
	
}

img {
    /* para que una imagen nunca sea mayor
        que la caja que las contiene */
    max-width: 100%;
    height: auto;
}

header .content {
    margin: 1em;
    margin-right: 1.5em;
    display: flex;
    justify-content: space-between;
    width: 100%;
	position: fixed;
	padding: 1.5em;
} 


#isologo {
    display: block;
       min-width: 4em; 
}


header img {
    width: 2em;
}

#supermenu {display: none;}

header label:hover {cursor: pointer;}

.menucito {display: block;
			width: 45px;
			height: 30px;}


.menudesplegable { 
		position: absolute;
		margin-left: -130%;
        border-bottom: 10px solid linear-gradient(#580267, rgba(255,0,0,0)) ;
	height: 65;
	margin-top: 0;
	background-color: white;
	overflow-x: hidden;
	width: 50%;
    transition: all 0.7s ease;
    transition-delay: -0.15s;
}



#supermenu:checked ~ .menudesplegable {margin: 0;
                        opacity: 1;
						margin-top: 20px;
						margin-left: -1.35em;
                        transition: all 0.4s ease;
 }

#supermenu:checked ~ .menudesplegable ul li {
     border-bottom: solid 2px black;
}


.menudesplegable a {
	display: block;
	padding: 20px;
    padding-left: 1em;
	font-size: 23px;
	text-decoration: none;
    font-weight: 600;
}


.navpintolaisla a {
    color: #cb76eb;
}

.navpintolaisla a:hover {
	color: #fff;
    background-color: #cb76eb;
	transition: 0.4s;
}

.navmuralesdestacados a {
    color: #f92845;
}

.navmuralesdestacados a:hover {
	color: #fff;
    background-color: #f92845;
	transition: 0.4s;
}

.navpostalpersonal a {
    color: #17d8ea;
}

.navpostalpersonal a:hover {
	color: #fff;
    background-color: #17d8ea;
	transition: 0.4s;
}

.navconvocatoria a {
    color: #fadc3c;
}

.navconvocatoria a:hover {
	color: #fff;
    background-color: #fadc3c;
	transition: 0.4s;
}


.naveventos a {
    color: #fe4789;
}

.naveventos a:hover {
	color: #fff;
    background-color: #fe4789;
	transition: 0.4s ease;
}

.slide a {
	color: #000;
	font-size: 36px;
}

#isologo {
     display: block;

}

.lupa {margin-right: .7em;}

#menuhorizontal {display: none;}

main {
    top: 65px;
    left:0px;
    right:0px;
    bottom:0px;
}

main h2 {
    font-size: 40px;
    color: white;
    font-weight: 600;
	padding-bottom: 1em;
}

main h3 {  font-size: 22px;
    color: white;
    font-weight: 600;
	padding-bottom: 1em;
}

main h4 {  font-size: 18px;
    color: white;
    font-weight: 600;
	padding-bottom: 1em;
}

main p { color: white; }


section {
    padding: 2em;
}

ol > li {
    color:#fff;
    padding: 0em;
    margin-left: 0em;
    margin-right: 0em;
}



#portada { margin-top: 0;
			padding: 0;
			height: 100vh;
			background-image: url(../imagenes/muralportadarecorte.jpg);
			background-repeat: no-repeat; 
        	background-size: cover;
			background-attachment: fixed;
            position: relative;}


	#portada div 
		{
		background-image: linear-gradient(to bottom, rgba(240,0,0,0), #cb76eb);
		padding-top: 2em;
		padding-bottom: 6em;
		padding-left: 2em;
        position: absolute;
        bottom: 0;
        width: 100%;    
       	}

	#portada h1 {
                margin-top: 12em;
				font-size: 45px;
				font-weight: 800;
				color: white;
				padding-bottom: 0;
				}

	#portada h3 { 
		color: white;
		font-weight: 600;
		padding-top: .5em;
		padding-left: .2em;
		background-image: url(../imagenes/pinturaamarilla.svg);
		background-repeat: no-repeat; 
        background-size: 14em;
		
		
}


#pintolaisla {
    background-color: #cb76eb;
	padding-top: 4em;
    padding-bottom: 4em;
	text-decoration: none;
}
		.parrafo p { margin-bottom: 1em;}		
		

#muralesdestacados {
	padding-top: 4em;
    padding-bottom: 4em;
	text-decoration: none;
    background-color: #f92845; }

	.muralesdestacados { 
		display: flex;
		justify-content: center;
		align-items: center;}


	main .muralesdestacados h3 {
		text-align: left;
		font-size: 19px;
    	margin-right: 2em;
		margin-top: 2em;
        margin-bottom: 1em;
        color: white;
		font-weight: 700;
        background-image: url(../imagenes/trazoceleste.png);
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: 12em;
       } 

	main .muralesdestacados img {
		display: flex;
		justify-content: center;
        border: solid #f92845 5px;
        transition: all .3s ease;
	}

    main .muralesdestacados img:hover {border: solid #17d8ea 5px;
    }
    
    .flip {background-color: transparent;
        perspective: 1000px;
    }
    .flipcontenido { position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }
    .flip:hover .flipcontenido {transform: rotateX(180deg);}

    .flipfrente, .flipdorso {
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;}

    .flipdorso {background-color: #17d8ea;
      color: white;
      transform: rotateX(180deg);
        padding: 5vw;
        position: absolute;
        top:0;
        text-align: left;
        overflow: auto;
}

   
#postalpersonal {
    background-color: #17d8ea;
	display: flex;
	flex-direction: column;
	padding-top: 4em;
    padding-bottom: 4em;
	text-decoration: none; 
    }

	#postalpersonal h4 {padding-bottom: 0;}
	
	#postalpersonal h2 {padding-top: 0;
						padding-bottom: 0;
						margin-top: .3em;
						margin-bottom: .5em;}
	

	#postalpersonal ul {display: flex;
					margin-top: 1.5em;}

    #postalpersonal .postales img {display: block;}

    #postalpersonal .postales { display: block;
        border: solid #17d8ea 4px; }

	#postalpersonal .postales:hover { border: solid #fe4789 4px; 
    transition: all .3s ease;
    }
    

    #postalpersonal ol>li {margin-top: 1.5em; 
							list-style: decimal;
							font-weight: 600;
							font-size: 20px;
							margin-left: 1em;}

	#postalpersonal ol>li>p {font-weight: 300; 
							margin-top: .5em;}

	

	#postalpersonal .iconoboton {
						display: flex;
						justify-content: center;
						padding: 0.7em;
						margin-top: 1.5em;
						box-shadow: -9px 4px 2px #fadc3c;
						background-color: #fe4789;
						border-radius: 8px;
						font-size: 18px;
						color: white;
						}

	#postalpersonal .iconoboton:hover {
 						background-color: #fadc3c;
						box-shadow: -9px 4px 2px #f92845;
    				    transition: all .3s ease;}

	#postalpersonal .iconoboton img {height: 18px;}
	#postalpersonal .iconoboton a {color: white;}


#convocatoria {
    display: flex;
	flex-direction: column;
	padding-top: 4em;
    padding-bottom: 4em;
	text-decoration: none; 
    background-color: #fadc3c;
    justify-content: center;
    
}

	.convocatoriacontenido {
     	background-color: #fadc3c;
        display: flex;
	    flex-direction: column;
		justify-content: center;
		align-items: center; 
		}


	main .convocatoriacontenido h3 {
		text-align: center;
		background-color: #fe4789;
		box-shadow: -9px 4px 2px #17d8ea;
		border-radius: 8px;
		font-size: 18px;
		padding: 0.6em;
		margin-left: 3em;
		margin-right: 3em;
		color: white;
		font-weight: 600;
		margin-top: 1.5em;
        margin-bottom: 1.5em;
	}

.convocatoriacontenido img  {border: solid #fadc3c 5px;}

.ganadoresanteriores img:hover {
    border: solid #fe4789 5px;
    transition: all .3s ease;
}

.votaatufavorito img:hover {
    border: solid #fe4789 5px;
    transition: all .3s ease;
}

.convocatoriacontenido h3:hover {
background-color: #17d8ea;
box-shadow: -9px 4px 2px #fe4789;
transition: all .3s ease; 
}

.convocatoriacontenido ol li {
    width: 33%;
}


.completaformulario .video {
    margin: 0 auto;
    width: 100%;
    height: 25em;
    }
.completaformulario iframe {
    margin: 0 auto;
    width: 100%;
    height: 25em;
    }


.ganadoresanteriores ol {
    display: flex;
    justify-content: center;
}

.ganadoresanteriores img {
  margin: 0 auto;
  width: 100%;
}

.votaatufavorito ol {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.votaatufavorito img {
    margin: 0 auto;
    width: 100%;
}

#eventos {
    background-color: #fe4789;
    padding-top: 4em;
    padding-bottom: 4em;
	text-decoration: none;
    display: flex;
    flex-direction: column;

}

#eventos .eventojunto {width: 85vw;
            background-image: url(../imagenes/pinturaceleste.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: right center;
}

#eventos img {width: 100%; 
             display: block;
            margin-bottom: 1em;}


#eventos ol > li {
    display: flex;
    align-items: center;
    width: 11em;
    
}

#eventos div {
    width: 70%;
    margin-left: 1.3em; 
        
    
}

#eventos div h3 {
    font-size: 1.3em;
    cursor: pointer;
    padding-bottom: .8em;
}

#eventos div h3:hover {
    cursor: pointer;
    color: #fadc3c;
    }

#eventos div ul li {
    font-size: 1em;
    margin-bottom: .3em;
    }


footer {
    background-color: #fff;
    padding: 2em;
	text-decoration: none;
	color: black;
	
}


footer ul { margin-top: .5em;
			margin-bottom: .5em; }
footer ul li { margin-top: .2em }

footer a { color: black;}
footer a:hover { color: #cb76eb;}
footer a:checked { color: #17d8ea;}

.contacto { margin-top: 1.5em;}

.redes  {display: flex;
		 flex-wrap: wrap;}
.redes li { margin-right: 2em;
			margin-top: .5em;}

/* página "en construcción" */

#barrapagdos {display: flex;
            justify-content: space-between;}

#barrapagdos .volver {color: black;
                font-size: 23px;
	           text-decoration: none;
                font-weight: 600;}

#barrapagdos .volver:hover {color: #cb76eb; }


#principalpagdos {background-color: rgb(75 145 203);
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;}
#principalpagdos img {max-height: 100vh}

	
/* A partir de acá tenemos que hacer lo de media para todo */



@media screen and (min-width:56em) 
{
	#menudesplegable {display: none;}
	
	
	
	#menuhorizontal {display: flex;
					align-items: center;
					align-self: center;
					font-weight: 600}
	
	#menuhorizontal ul {display: flex;}
	
	.navpintolaisla {border-right: solid 1px 				black;}
	.navmuralesdestacados {border-right: solid 1px 				black;}
	.navpostalpersonal {border-right: solid 1px 				black;}
	.navconvocatoria {border-right: solid 1px 				black;}
    
	#menuhorizontal a {display: block;
						padding-left: 1em;
						padding-right: 1em;
						padding-bottom: .5em;
						padding-top: .5em;}
    
	#isologo { margin-left: .7em;}
    
   
	
	section { padding-left: 10em;
			padding-right: 10em;}
    
    	
	#portada { background-image: url(../imagenes/portadahorizontal.jpg);
    background-position: center;}
    
	#portada div { padding-left: 10em;}
	
	
	#pintolaisla .parrafo{ column-count: 2;
					column-gap: 3.5em;}
    
        
     .muralesdestacados > ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	}
    
      .muralesdestacados li {
          padding:1em;
         margin:0.5em;
        width:47%; 
    }
    
    .muralesdestacados li h3 {
        padding-bottom: 1.3em;
        width: 100%;
        margin: 0.5em;
    }
    
    .muralesdestacados img { width: 100%; display: block;}
    
    .flipcontenido {display: block;
                    height: auto;}
    
         
	#postalpersonal .iconoboton
			{ margin-left: 1em;
			 margin-right: 1em;}
	
	#postalpersonal ul {justify-content: center;}
	#postalpersonal ul > li {margin-right: 2em;}
	
.convocatoriacontenido {
     	background-color: #fadc3c;
        display: flex;
	    flex-direction: column;
		justify-content: center;
		align-items: center; 
		}
    
    #eventos {background-image: url(../imagenes/pinturaceleste.png);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;}

    
	#eventos ol {
    display: flex;
    justify-content: center;
    flex-wrap: no-wrap;
    max-width: 90vw;
        }
    
    #eventos figure {width: 100%;
    }
    
    #eventos img {margin: 0 auto;
        display: block;
        width: 100%;}
    
    
    
    #eventos .eventojunto 
    {display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 2em;
    background-image: none;}
    
    #eventos div {margin-left: 0;
                margin-top: 2em;
                }
    
        
 
	
footer { display: flex;
			 justify-content: space-around;}
	}




@media screen and (min-width:85em) {
	#isologo { margin-left: 5em;}
	.lupa { margin-right: 5em;}
	
	#postalpersonal .iconoboton
			{ margin-left: 5em;
			 margin-right: 5em;}
    
    


@media screen and (min-width:110em) {
    
    section {padding-left: 15vw;
            padding-right: 10vw;}
    
    #portada div {padding-left: 15vw;
            }
    
    #postalpersonal ol{ display: flex;
                    justify-content: space-between;
                    }
    
    #postalpersonal .iconoboton
			{ margin-left: 0em;
			 width: 20vw;}
    
}