@font-face{
font-family: font1;
src: url(../fonts/Quicksand-Bold.otf);
src: url(../fonts/quicksand-bold-webfont.woff2) format('woff2'),
url(../fonts/quicksand-bold-webfont.woff) format('woff');
}

@font-face{
font-family: font2;
src: url(../fonts/Quicksand-Light.otf);
src: url(../fonts/quicksand-light-webfont.woff2) format('woff2'),
         url(../fonts/quicksand-light-webfont.woff) format('woff');
}

@font-face{
font-family: font3;
src: url(../fonts/Quicksand-Regular.otf);
src: url(../fonts/quicksand-regular-webfont.woff2) format('woff2'),
         url(../fonts/quicksand-regular-webfont.woff) format('woff');
}

#logo{
text-align: center;
left: 80%;
margin-top: 50px;
margin-bottom: 20px;
}

nav{
    clear:both;
    margin-bottom: 5%;
}

nav ul{
    list-style: none;
}

nav ul li{
    margin-left: 1%;
    display: inline; 
    text-align: center;
    padding: 1%;
}

nav ul li a{
    font-size: 1.2em;
    color: white;
    text-decoration: none;
    font-family: font2, sans-serif;
    transition: 0.3s;
}

li a{text-decoration: none;}


#verde{background-color: #00AAAE;}
#verde a:hover{text-decoration: none; color: white;}
#verde:hover{
    background-color: #48AF63;
    text-decoration: none;
    transition: 0.5s;    
}

#azul{background-color: #243C98;}
#azul a:hover{text-decoration: none; color: white;}


#anaranjado{background-color: #00AAAE;}
#anaranjado a:hover{text-decoration: none; color: white;}
#anaranjado:hover{
    background-color: #F5831F;
    text-decoration: none;
    transition: 0.5s;
}

#morado{background-color: #00AAAE;}
#morado a:hover{text-decoration: none; color: white;}
#morado:hover{
    background-color: #7F3B96;
    text-decoration: none;
    transition: 0.5s;
}
#showcase{
margin:auto;    
height: 426px;
background-image: url(../imagenes/editorial1.jpg);
animation: ani 30s infinite;
-webkit-animation: ani 30s infinite;
-o-animation: ani 30s infinite;
-moz-animation: ani 30s infinite;
-ms-animation: ani 30s infinite;  
}


@keyframes ani{
0%{background-image: url(../imagenes/editorial1.jpg);}
10%{background-image: url(../imagenes/editorial2.jpg);}
20%{background-image: url(../imagenes/editorial3.jpg);}
30%{background-image: url(../imagenes/editorial4.jpg);}
40%{background-image: url(../imagenes/editorial5.jpg);}
50%{background-image: url(../imagenes/editorial6.jpg);}
60%{background-image: url(../imagenes/editorial7.jpg);}
70%{background-image: url(../imagenes/editorial8.jpg);}    
80%{background-image: url(../imagenes/editorial9.jpg);}
90%{background-image: url(../imagenes/editorial10.jpg);}
}


@-moz-keyframes ani{
0%{background-image: url(../imagenes/editorial1.jpg);}
10%{background-image: url(../imagenes/editorial2.jpg);}
20%{background-image: url(../imagenes/editorial3.jpg);}
30%{background-image: url(../imagenes/editorial4.jpg);}
40%{background-image: url(../imagenes/editorial5.jpg);}
50%{background-image: url(../imagenes/editorial6.jpg);}
60%{background-image: url(../imagenes/editorial7.jpg);}
70%{background-image: url(../imagenes/editorial8.jpg);}    
80%{background-image: url(../imagenes/editorial9.jpg);}
90%{background-image: url(../imagenes/editorial10.jpg);}
}

@-webkit-keyframes ani{
0%{background-image: url(../imagenes/editorial1.jpg);}
10%{background-image: url(../imagenes/editorial2.jpg);}
20%{background-image: url(../imagenes/editorial3.jpg);}
30%{background-image: url(../imagenes/editorial4.jpg);}
40%{background-image: url(../imagenes/editorial5.jpg);}
50%{background-image: url(../imagenes/editorial6.jpg);}
60%{background-image: url(../imagenes/editorial7.jpg);}
70%{background-image: url(../imagenes/editorial8.jpg);}    
80%{background-image: url(../imagenes/editorial9.jpg);}
90%{background-image: url(../imagenes/editorial10.jpg);}
}

@-o-keyframes ani{
0%{background-image: url(../imagenes/editorial1.jpg);}
10%{background-image: url(../imagenes/editorial2.jpg);}
20%{background-image: url(../imagenes/editorial3.jpg);}
30%{background-image: url(../imagenes/editorial4.jpg);}
40%{background-image: url(../imagenes/editorial5.jpg);}
50%{background-image: url(../imagenes/editorial6.jpg);}
60%{background-image: url(../imagenes/editorial7.jpg);}
70%{background-image: url(../imagenes/editorial8.jpg);}    
80%{background-image: url(../imagenes/editorial9.jpg);}
90%{background-image: url(../imagenes/editorial10.jpg);}
}

@-ms-keyframes ani{
0%{background-image: url(../imagenes/editorial1.jpg);}
10%{background-image: url(../imagenes/editorial2.jpg);}
20%{background-image: url(../imagenes/editorial3.jpg);}
30%{background-image: url(../imagenes/editorial4.jpg);}
40%{background-image: url(../imagenes/editorial5.jpg);}
50%{background-image: url(../imagenes/editorial6.jpg);}
60%{background-image: url(../imagenes/editorial7.jpg);}
70%{background-image: url(../imagenes/editorial8.jpg);}    
80%{background-image: url(../imagenes/editorial9.jpg);}
90%{background-image: url(../imagenes/editorial10.jpg);}
}


footer{
font-family: font2, sans-serif;
background-color: #F5841F;
font-size: 0.8em;
color: white;
padding-bottom: 20px;
}

#redes{
margin-top: 3%;
width: auto;
}

#fb{
width: 48px;
margin-bottom: 20px;
}

#fb:hover{
    opacity: 0.8;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: 0.5s;
}

#behance{
width: 48px;
margin-bottom: 20px;
margin-left: 1%;
}

#behance:hover{
    opacity:0.8;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: 0.5s;
}
#direccion{
clear: both;
text-align: center;
margin-top: 2%;
}

#mensaje{
height: 47px;
width: 150px;
padding-top: 1.5%;
padding-left: 2.3%;
border: 1px solid white;
}

#mensaje p a{
text-decoration:none;
font-size: 1.2em;
text-align: center;
color: white;
}

@media (min-width: 240px) and (max-width:736px){

nav ul li{
    margin: 0px;
    margin-left: -5%;
    display: block; 
    text-align: center;
    padding: 4%;
}

#showcase{display: none;}
    
#showcase2{
margin:auto;    
height: 426px;
background-image: url(../imagenes/editorialmini1.jpg);
animation: ani 30s infinite;
-webkit-animation: ani 30s infinite;
-o-animation: ani 30s infinite;
-moz-animation: ani 30s infinite;
-ms-animation: ani 30s infinite;  
}


@keyframes ani{
0%{background-image: url(../imagenes/editorialmini1.jpg);}
10%{background-image: url(../imagenes/editorialmini2.jpg);}
20%{background-image: url(../imagenes/editorialmini3.jpg);}
30%{background-image: url(../imagenes/editorialmini4.jpg);}
40%{background-image: url(../imagenes/editorialmini5.jpg);}
50%{background-image: url(../imagenes/editorialmini6.jpg);}
60%{background-image: url(../imagenes/editorialmini7.jpg);}
70%{background-image: url(../imagenes/editorialmini8.jpg);}    
80%{background-image: url(../imagenes/editorialmini9.jpg);}
90%{background-image: url(../imagenes/editorialmini10.jpg);}
}


@-moz-keyframes ani{
0%{background-image: url(../imagenes/editorialmini1.jpg);}
10%{background-image: url(../imagenes/editorialmini2.jpg);}
20%{background-image: url(../imagenes/editorialmini3.jpg);}
30%{background-image: url(../imagenes/editorialmini4.jpg);}
40%{background-image: url(../imagenes/editorialmini5.jpg);}
50%{background-image: url(../imagenes/editorialmini6.jpg);}
60%{background-image: url(../imagenes/editorialmini7.jpg);}
70%{background-image: url(../imagenes/editorialmini8.jpg);}    
80%{background-image: url(../imagenes/editorialmini9.jpg);}
90%{background-image: url(../imagenes/editorialmini10.jpg);}
}

@-webkit-keyframes ani{
0%{background-image: url(../imagenes/editorialmini1.jpg);}
10%{background-image: url(../imagenes/editorialmini2.jpg);}
20%{background-image: url(../imagenes/editorialmini3.jpg);}
30%{background-image: url(../imagenes/editorialmini4.jpg);}
40%{background-image: url(../imagenes/editorialmini5.jpg);}
50%{background-image: url(../imagenes/editorialmini6.jpg);}
60%{background-image: url(../imagenes/editorialmini7.jpg);}
70%{background-image: url(../imagenes/editorialmini8.jpg);}    
80%{background-image: url(../imagenes/editorialmini9.jpg);}
90%{background-image: url(../imagenes/editorialmini10.jpg);}
}

@-o-keyframes ani{
0%{background-image: url(../imagenes/editorialmini1.jpg);}
10%{background-image: url(../imagenes/editorialmini2.jpg);}
20%{background-image: url(../imagenes/editorialmini3.jpg);}
30%{background-image: url(../imagenes/editorialmini4.jpg);}
40%{background-image: url(../imagenes/editorialmini5.jpg);}
50%{background-image: url(../imagenes/editorialmini6.jpg);}
60%{background-image: url(../imagenes/editorialmini7.jpg);}
70%{background-image: url(../imagenes/editorialmini8.jpg);}    
80%{background-image: url(../imagenes/editorialmini9.jpg);}
90%{background-image: url(../imagenes/editorialmini10.jpg);}
}

@-ms-keyframes ani{
0%{background-image: url(../imagenes/editorialmini1.jpg);}
10%{background-image: url(../imagenes/editorialmini2.jpg);}
20%{background-image: url(../imagenes/editorialmini3.jpg);}
30%{background-image: url(../imagenes/editorialmini4.jpg);}
40%{background-image: url(../imagenes/editorialmini5.jpg);}
50%{background-image: url(../imagenes/editorialmini6.jpg);}
60%{background-image: url(../imagenes/editorialmini7.jpg);}
70%{background-image: url(../imagenes/editorialmini8.jpg);}    
80%{background-image: url(../imagenes/editorialmini9.jpg);}
90%{background-image: url(../imagenes/editorialmini10.jpg);}
}    
    
#redes{margin-top: 10%;}
    
#mensaje{
height: 47px;
width: 150px;
padding-top: 3%;
padding-left: 6%;
border: 1px solid white;
}

#mensaje p a{
text-decoration:none;
font-size: 1.2em;
text-align: center;
color: white;
}
    
}

@media (min-width: 736px) and (max-width:1024px){

}