@font-face{
font-family: font1;
src: url(fonts/Quicksand-Bold.otf);
}

@font-face{
font-family: font2;
src: url(fonts/Quicksand-Light.otf);
}

@font-face{
font-family: font3;
src: url(../fonts/Quicksand-Regular.otf);
}

body{width: cover;}

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

#descripcion{
padding: 3%;
background-color: #00AAAE;
}

#designing{
font-family: font3,sans-serif;
font-size: 4em;
text-align: center;
color: white; 
margin: auto;
}

nav{
padding: 0px;
margin: none;
z-index: 100;
position: relative;
text-align: left; 
float: right;
}

nav ul{
margin-top: 10%;
text-align: left;
display: inline-block;
margin-right: 100px;   
float: right;
position: absolute;
z-index: 100;
}

nav ul li{
text-align: center;
font-family: font3, sans-serif;
font-size: 3em;
list-style: none;
float: right;
}

nav ul li a{
text-decoration: none;
color: white;
}

nav ul li a:hover{
background-color: white;
color: #F5841F;
transition: 0.5s;
}

#showcase{
width: 100%;
float: left;
height: 426px;
background-image: url(../imagenes/showcase1.jpg);
transition: 5s;
animation: ani 20s infinite;
-webkit-animation: ani 20s infinite;
-o-animation: ani 20s infinite;
-moz-animation: ani 20s infinite;
-ms-animation: ani 20s infinite;
}

@keyframes ani{
0%{background-image: url(../imagenes/showcase1.jpg);}
16%{background-image: url(../imagenes/showcase2.jpg);}
32%{background-image: url(../imagenes/showcase3.jpg);}
48%{background-image: url(../imagenes/showcase4.jpg);}
64%{background-image: url(../imagenes/showcase5.jpg);} 
80%{background-image: url(../imagenes/showcase6.jpg);}
}

@-webkit-@keyframes ani{
0%{background-image: url(../imagenes/showcase1.jpg);}
16%{background-image: url(../imagenes/showcase2.jpg);}
32%{background-image: url(../imagenes/showcase3.jpg);}
48%{background-image: url(../imagenes/showcase4.jpg);}
64%{background-image: url(../imagenes/showcase5.jpg);} 
80%{background-image: url(../imagenes/showcase6.jpg);}
}

@-moz-@keyframes ani{
0%{background-image: url(../imagenes/showcase1.jpg);}
16%{background-image: url(../imagenes/showcase2.jpg);}
32%{background-image: url(../imagenes/showcase3.jpg);}
48%{background-image: url(../imagenes/showcase4.jpg);}
64%{background-image: url(../imagenes/showcase5.jpg);} 
80%{background-image: url(../imagenes/showcase6.jpg);}
}

@-o-@keyframes ani{
0%{background-image: url(../imagenes/showcase1.jpg);}
16%{background-image: url(../imagenes/showcase2.jpg);}
32%{background-image: url(../imagenes/showcase3.jpg);}
48%{background-image: url(../imagenes/showcase4.jpg);}
64%{background-image: url(../imagenes/showcase5.jpg);} 
80%{background-image: url(../imagenes/showcase6.jpg);}
}

@-ms-@keyframes ani{
0%{background-image: url(../imagenes/showcase1.jpg);}
16%{background-image: url(../imagenes/showcase2.jpg);}
32%{background-image: url(../imagenes/showcase3.jpg);}
48%{background-image: url(../imagenes/showcase4.jpg);}
64%{background-image: url(../imagenes/showcase5.jpg);} 
80%{background-image: url(../imagenes/showcase6.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{
font-family: font3;
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{
font-family: font3;
text-decoration:none;
font-size: 1.2em;
text-align: center;
color: white;
}

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

nav{background-color: white;}

nav ul{position: relative;}
    
nav ul li{
text-align: center;
font-family: font3, sans-serif;
font-size: 2em;
list-style: none;
}

nav ul li a{
text-decoration: none;
color: #00AAAE;
}

nav ul li a:hover{
background-color: white;
color: #F5841F;
transition: 0.5s;
}
    
    #showcase{display: none;}
    
#showcase2{
width: 100%;
float: left;
height: 426px;
background-image: url(../imagenes/showmini1.jpg);
transition: 5s;
animation: ani 20s infinite;
-webkit-animation: ani 20s infinite;
-o-animation: ani 20s infinite;
-moz-animation: ani 20s infinite;
-ms-animation: ani 20s infinite;
}

@keyframes ani{
0%{background-image: url(../imagenes/showmini1.jpg);}
16%{background-image: url(../imagenes/showmini2.jpg);}
32%{background-image: url(../imagenes/showmini3.jpg);}
48%{background-image: url(../imagenes/showmini3.jpg);}
64%{background-image: url(../imagenes/showmini4.jpg);} 
80%{background-image: url(../imagenes/showmini5.jpg);}
}

@-webkit-@keyframes ani{
0%{background-image: url(../imagenes/showmini1.jpg);}
16%{background-image: url(../imagenes/showmini2.jpg);}
32%{background-image: url(../imagenes/showmini3.jpg);}
48%{background-image: url(../imagenes/showmini3.jpg);}
64%{background-image: url(../imagenes/showmini4.jpg);} 
80%{background-image: url(../imagenes/showmini5.jpg);}
}

@-moz-@keyframes ani{
0%{background-image: url(../imagenes/showmini1.jpg);}
16%{background-image: url(../imagenes/showmini2.jpg);}
32%{background-image: url(../imagenes/showmini3.jpg);}
48%{background-image: url(../imagenes/showmini3.jpg);}
64%{background-image: url(../imagenes/showmini4.jpg);} 
80%{background-image: url(../imagenes/showmini5.jpg);}
}

@-o-@keyframes ani{
0%{background-image: url(../imagenes/showmini1.jpg);}
16%{background-image: url(../imagenes/showmini2.jpg);}
32%{background-image: url(../imagenes/showmini3.jpg);}
48%{background-image: url(../imagenes/showmini3.jpg);}
64%{background-image: url(../imagenes/showmini4.jpg);} 
80%{background-image: url(../imagenes/showmini5.jpg);}
}

@-ms-@keyframes ani{
0%{background-image: url(../imagenes/showmini1.jpg);}
16%{background-image: url(../imagenes/showmini2.jpg);}
32%{background-image: url(../imagenes/showmini3.jpg);}
48%{background-image: url(../imagenes/showmini3.jpg);}
64%{background-image: url(../imagenes/showmini4.jpg);} 
80%{background-image: url(../imagenes/showmini5.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){
    nav{background-color: white;}

    nav ul{position: relative;}
nav ul li{
text-align: center;
font-family: font3, sans-serif;
font-size: 2em;
list-style: none;
}

nav ul li a{
text-decoration: none;
color: #00AAAE;
}
    
nav ul li a:hover{
background-color: white;
color: #F5841F;
transition: 0.5s;
}
}