/*common styles to website*/
*{
    box-sizing: border-box;
    padding: 1%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: auto;
}

body{
    background-color: #ccc;
}
.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
section{
    background-color: #f1f1f1;
}
section a{
    color:black;
    text-decoration: none;
    cursor: pointer;
}
img{
    border-radius: 5%;
    border: 1px solid gray;
}
footer{
    text-align: center;
    background-color: #f1f1f1;
}
#selected{
    background-color: #6da5f4;
}

/*styles to index*/
header{
    text-align: center;
    background-image: url("../images/teclado_grande.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
nav{
    text-align: center;
    background-color: #e7e7ec;
}
nav a{
    text-decoration: none;
    color:black;
}
nav a:hover{
    background-color: #272284;
    color:white;
}
.taller-image{
    width: 25%;
}
.azulete-image{
    width: 50%;
}
.rrss-image img{
    width: 10%;
}

.flicker{                   /*Parpadeo*/
        font-size: 30px;
        color: red;
        text-align: center; 
        text-decoration: underline;
        animation-name: parpadeo;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      
        -webkit-animation-name:parpadeo;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
      }
      @-webkit-keyframes parpadeo {  
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
         100% { opacity: 1.0; }
      }
      
      @keyframes parpadeo {  
        0% { opacity: 1.0; }
         50% { opacity: 0.0; }
        100% { opacity: 1.0; }
      }

/*styles to historia*/
.historia{
    text-align: justify;
}
/*styles to galeria*/
.bordered{
    border: 1px solid black;
    text-align: center;
    color:blue;
}
.presentacion img{
    width:50%;
    height: 50%;
}
.azulete-firma24{
    text-align: center;
}
.azulete-firma24 img{
    width: 40%;
}
.mitad{
    width: 50%;
    height: 50%;
}

/*styles to publicaciones*/
.text-publicaciones{
    text-align: center;
}
.fallas-img img{
    transition: transform .2s;
    cursor: pointer;
    border: none;
    border-style: outset;
    padding: auto;
}
.fallas-img img:hover{
    transform: scale(2);
}


/*styles to galeria en obras*/
.obras-box{
    border:2px solid black;
    text-align: center;
}
.obras-box a{
    color:blue;
}
/*resposive design*/
[class*="col-"]{
    width: 100%;
}

@media only screen and (min-width:400px){
    .col-s-1 {width:8.33%;}
    .col-s-2 {width:16.66%;}
    .col-s-3 {width:25%;}
    .col-s-4 {width:33.33%;}
    .col-s-5 {width:41.66%;}
    .col-s-6 {width:50%;}
    .col-s-7 {width:58.33%;}
    .col-s-8 {width:66.66%;}
    .col-s-9 {width:75%;}
    .col-s-10 {width:83.33%;}
    .col-s-11 {width:91.66%;}
    .col-s-12 {width:100%;}
}
@media only screen and (min-width:768px){
    .col-1 {width:8.33%;}
    .col-2 {width:16.66%;}
    .col-3 {width:25%;}
    .col-4 {width:33.33%;}
    .col-5 {width:41.66%;}
    .col-6 {width:50%;}
    .col-7 {width:58.33%;}
    .col-8 {width:66.66%;}
    .col-9 {width:75%;}
    .col-10 {width:83.33%;}
    .col-11 {width:91.66%;}
    .col-12 {width:100%;}
}