@import url('https://use.typekit.net/fhm4sii.css');

body{
  font-family: ofelia-text;
 
  font-size: 50px;
  line-height: 1.2;
  padding: 0px 0px 0px 0px;
  background-color: whitesmoke;
  color: #db2f2f;
  width: 100%;
  transition: all 1s ease-out 200ms;
  margin: 20px auto 40px auto;
 
}

body:hover {
  background-color: rgb(37, 37, 26);
  color:rgb(49, 145, 11);
}
p {font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.3;

}

 div.logo ,img {
  margin: 40px auto;
  display: block;
  max-height: 400px;
 filter:blur(7px);
 column-count: 1;
 column-span: all;
 column-width: 1400px;
  transition: filter 1s ease-out 200ms;
   
}
div.logo ,img:hover {
   filter:blur(0px);
   
 }

section.flyer .flyjunio img{ 
 
   margin:0 auto;
   display: flex;
   position: relative;
  
  }

  section.textofiesta p{
    margin:200 0 0 850;
    font-size:18 ;
    color:rgb(56, 11, 218);
display: block;
position: relative;
  } 
section.textofiesta p:hover{
  color:whitesmoke;
  
  
  }

 
h1.reg{font-size:30px ;
margin:50 0 0 -400;
 } 

section.primera div.entrada  p {
  font-family: ofelia-text;
  font-weight: 100;
  font-size: 15px; 
  text-align: left;
  display: grid;
  grid-column: 7 / span 20;
  padding: 5 50px 5 50px;
  

}

.primera iframe {
  margin:0px auto;
  display: flex;
  padding: 0 15 0 29;
  column-span: all;
  column-width: 1400px;
  

}



section.rl div.description p  {
  color: rgb(44, 40, 40);
  font-size: 13px;
  margin:0 10 0 0;
  text-align: center;
  align-items: center;
  column-count: 1;
  column-span: all;
  column-width: 1410px;
  
  }
section.rl div.description p:hover{
  color:whitesmoke;
}


section.project div.columna2, p {
  grid-column-start: ;
  grid-column: 1 / span 20;
  text-align: right;
  


}
section.highlighted a{
  font-size: 12px;
  color:rgb(18, 39, 15) ;
  width: 1410;
}


section.highlighted p {
  transition: 2s ease-out 20ms;
  margin:0 auto ;
  text-align: center;
  align-items: center;
  column-count: 1;
  column-span: all;
   width: 100%;
  
 
  
  background-color: yellow;
  font-size: 13px;
  
  
}
section.highlighted:hover p a {
 background-color: rgb(18, 39, 15);
 color:yellow;
 margin:-5px;

 

}

h1 {
  font-size: 63px;
  font-weight: 500;
  margin: 40 0 0 0;
  font-family:dazzle-unicase, sans-serif;
  line-height: 1;}
  
h1.edito{ color:cadetblue;
margin:150px 0 auto 20;
}
  
 
}
nav {
  font-size: 30px;
  font-weight: 400;
  margin: 0 auto;
  font-family:dazzle-unicase, sans-serif;
 
}







p {
  font-weight: 100;
  font-family: sans-serif;
  color: rgb(19, 53, 15);
  letter-spacing: 0px;
  padding: 8px;
  
}
a.selected2 {
  text-decoration: none;
  color:rgb(23, 7, 245);
 font-size: 13;
 column-count: 1;
 column-width: 100%;
 column-span: all;
 filter:blur(3px);
 width: 100%;

}

a.selected2:hover {
  color:rgb(12, 11, 11);
  margin: 0 0 0 50px ;
  font-size: 13px;
  background-color: rgb(32, 241, 9);
  filter:blur(0px);
}

a, a.selected, nav {
  text-decoration: none;
  color: #dd1e1e;
  transition: all 2s ease-out 100ms;
  margin:0 10px 0 20px;
  font-size: 19;
  
 
}
a:hover, a.selected {
  color: rgb(114, 201, 201);
  font-size: 20px;

}
section.primera div.entrada p a {color:rgb(36, 189, 69);
font-weight: 500; 
font-family:dazzle-unicase, sans-serif;
}
section.primera div.entrada  a:hover {color:rgb(227, 226, 229); 
font-size: 25;
}
header {font-size: 200px;
  height: 100px;
  
  margin: 0px 0px 0px 20px;
  background-size: contain;
  transition: all 2s ease-out 200ms;
  color: rgb(114, 201, 201);
 font-family:dazzle-unicase, sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center ;
  justify-content: space-between;
}
header:hover{
  margin:0 0 0 50px
}

footer {
  background-color:rgb(37, 37, 26);
  display: flex;
  align-items: center;
  justify-content: center;
   margin: 0 auto;
   position: fixed;
  bottom: 0;
  width: 100%;
  height: 20px;
  letter-spacing: 1;
 
}

footer:hover{
  background-color: rgb(15, 141, 78);
  transition: all 2s ease-out 200ms;
  font-size: 20px;
  
}
section ,marquee {
  font-family:dazzle-unicase, sans-serif;
  letter-spacing: 50px;
  font-size: 10px;
  color: whitesmoke;
  margin: 0px auto;
  display: flex;
 column-count: 1;
 column-span:all;
 column-width: 1410;
 text-align: left;
 width: 100%;
}
section div,
p {
 font-size: 13px;
  text-align: left;
  transition: all 2s ease-out 200ms;
}






div {
  background-color: #ffffff00;
  color: rgb(16, 26, 112);
  letter-spacing: 1px;
  font-size: 13px;
  font-family: Arial 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-style: normal;
  font-weight: 400;
  transition: 2s ease-out 300ms;
  margin:20 auto 20 auto;
  width: 100%;
  
}
div:hover p {
  color: whitesmoke;
  background-color: rgb(0, 89, 255);
  margin:-100px 0px 0px 0px ;
  border-radius: 50;
  
}

section.revistaenlinea.html div{
  color: green;
  background-color: whitesmoke;
  letter-spacing: 12px;
  margin: 20px auto 80px auto;
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 32px 32px;
  grid-auto-flow: dense;
}


section.titleH1 H1 {
  color: rgb(180, 171, 91);
  margin: 50px 0 0 0px;
  text-align: right;
  column-span: all;
  column-width: 1920px;
  letter-spacing: 0px;
}


section.fotosize div.hawk img {
  margin:100px auto;
  display: flex;

  column-count: 1;
  column-span: all;
  column-width: 100%;
  max-height: 100%;
  max-width: 100%;
  
  }

section.fotografia marquee p {font-family: Arial, Helvetica, sans-serif;}
section.ruidoymusica discog div.primera a {
  font-family:dazzle-unicase, sans-serif;
  color: rgb(131, 57, 57);
  font-size: 100px;
  margin:5px auto;
  width: 100%;

  }  
  
 iframe {
  margin: 1px auto ;
  
 

}

section.parra div.fos p  {
  margin:50 10 0 10;
  font-size: 15;
  color:rgb(37, 37, 26);
  column-count: 2;
  column-width: 400px;
  column-gap: 10px;
  
}
section.parra div.fos p:hover{
  background-color: rgba(245, 245, 245, 0);
  color:whitesmoke;
}


section.parra div.fos a{color:greenyellow;
font-size: 15;
font-family:dazzle-unicase, sans-serif;}

section.parra div.fos a:hover{
  font-size: 4000%;
}

.fotoark .art img{
max-height: 940px;
margin:5 auto;

}






 @media only screen and (max-width: 980px)  {
   body { width: 980px;
   background-color: whitesmoke;
   header{ width: 980px;}
    
     }
     @media only screen and (max-width: 980px){
  section.primera div.entrada  p { font-size: 33px;
  line-height: 1.1;
  text-align: right;
  }
     
    }   
    @media (max-width: 980px) {
    section.flyer .flyjunio img{max-width:100% ;
    margin:0 auto;
    filter:blur(0px) }
}
@media (max-width: 980px) {
    section.textofiesta p{font-size:44 ;
    column-count: 1;
    margin:45 auto;
    padding: 50 20 0 20;}
    


@media (max-width: 980px) {
  h1 {
    font-size: 60px;
  }
}

@media (max-width: 980px) {
  h1.reg{margin:50 0 0 -80 }
  
@media (max-width: 980px){
  a , a.selected {font-size:15px; }

    
    
   @media (max-width: 980px) {
  section.logo div.logo img { max-width:975px;
   
   }
   }
 @media (max-width: 980px) {
section.fotosize div.hawk img { 
  max-width: 970px;
margin:35 auto;}

@media (max-width: 980px)  {
  section.rl div.description p a { font-size: 11px;
  max-width: 980px;
  
}
@media (max-width: 980px){
.fotoark .art img{max-height: 750px;}

  }

 @media (max-width: 980px) {
 section.fotoark .art img{ max-width: 980px;}

}
 }
 @media (max-width: 980px) {
a.selected2 {column-count: 1;
column-span: all;
column-width: 980px;
  
}
@media (max-width: 980px){
div.primera , iframe {max-width: 980px;
margin: 100 auto;
}




@media (max-width: 980px){
  footer { max-width: 980px;}
}

@media (max-width: 1000px){
section.highlighted p a{
  max-width: 980px;
  font-size: 44px;
  margin:10 auto;
}
@media (max-width: 980px){
  section.rl div.description p 
  { font-size: 44px;}
}
@media (max-width: 980px){
  section.parra div.fos p{ font-size: 50px;
  line-height: 1;
  column-count: 1;
  padding: 50 20 0 20;

  }
@media (max-width: 980px){
  section.parra div.fos a{ font-size: 44;}

}
}