@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: #48AF63;}
#verde a:hover{text-decoration: none; color: white;}

#azul{background-color: #00AAAE;}
#azul a:hover{text-decoration: none; color: white;}
#azul:hover{
    background-color: #243C98;
    text-decoration: none;
    transition: 0.5s;    
}

#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/branding1.jpg);
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/branding1.jpg);}
12.5%{background-image: url(../imagenes/branding2.jpg);}
25%{background-image: url(../imagenes/branding3.jpg);}
37.5%{background-image: url(../imagenes/branding4.jpg);}
50%{background-image: url(../imagenes/branding7.jpg);}
62.5%{background-image: url(../imagenes/branding5.jpg);}
75%{background-image: url(../imagenes/branding6.jpg);}
87.5%{background-image: url(../imagenes/branding8.jpg);}
}


@-webkit-keyframes ani{
0%{background-image: url(../imagenes/branding1.jpg);}
12.5%{background-image: url(../imagenes/branding2.jpg);}
25%{background-image: url(../imagenes/branding3.jpg);}
37.5%{background-image: url(../imagenes/branding4.jpg);}
50%{background-image: url(../imagenes/branding7.jpg);}
62.5%{background-image: url(../imagenes/branding5.jpg);}
75%{background-image: url(../imagenes/branding6.jpg);}
87.5%{background-image: url(../imagenes/branding8.jpg);}
}

@-moz-keyframes ani{
0%{background-image: url(../imagenes/branding1.jpg);}
12.5%{background-image: url(../imagenes/branding2.jpg);}
25%{background-image: url(../imagenes/branding3.jpg);}
37.5%{background-image: url(../imagenes/branding4.jpg);}
50%{background-image: url(../imagenes/branding7.jpg);}
62.5%{background-image: url(../imagenes/branding5.jpg);}
75%{background-image: url(../imagenes/branding6.jpg);}
87.5%{background-image: url(../imagenes/branding8.jpg);}
}

@-o-keyframes ani{
0%{background-image: url(../imagenes/branding1.jpg);}
12.5%{background-image: url(../imagenes/branding2.jpg);}
25%{background-image: url(../imagenes/branding3.jpg);}
37.5%{background-image: url(../imagenes/branding4.jpg);}
50%{background-image: url(../imagenes/branding7.jpg);}
62.5%{background-image: url(../imagenes/branding5.jpg);}
75%{background-image: url(../imagenes/branding6.jpg);}
87.5%{background-image: url(../imagenes/branding8.jpg);}
}

@-ms-keyframes ani{
0%{background-image: url(../imagenes/branding1.jpg);}
12.5%{background-image: url(../imagenes/branding2.jpg);}
25%{background-image: url(../imagenes/branding3.jpg);}
37.5%{background-image: url(../imagenes/branding4.jpg);}
50%{background-image: url(../imagenes/branding7.jpg);}
62.5%{background-image: url(../imagenes/branding5.jpg);}
75%{background-image: url(../imagenes/branding6.jpg);}
87.5%{background-image: url(../imagenes/branding8.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/brandingmini1.jpg);
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/brandingmini1.jpg);}
12.5%{background-image: url(../imagenes/brandingmini2.jpg);}
25%{background-image: url(../imagenes/brandingmini3.jpg);}
37.5%{background-image: url(../imagenes/brandingmini4.jpg);}
50%{background-image: url(../imagenes/brandingmini7.jpg);}
62.5%{background-image: url(../imagenes/brandingmini5.jpg);}
75%{background-image: url(../imagenes/brandingmini6.jpg);}
87.5%{background-image: url(../imagenes/brandingmini8.jpg);}
}


@-webkit-keyframes ani{
0%{background-image: url(../imagenes/brandingmini1.jpg);}
12.5%{background-image: url(../imagenes/brandingmini2.jpg);}
25%{background-image: url(../imagenes/brandingmini3.jpg);}
37.5%{background-image: url(../imagenes/brandingmini4.jpg);}
50%{background-image: url(../imagenes/brandingmini7.jpg);}
62.5%{background-image: url(../imagenes/brandingmini5.jpg);}
75%{background-image: url(../imagenes/brandingmini6.jpg);}
87.5%{background-image: url(../imagenes/brandingmini8.jpg);}
}

@-moz-keyframes ani{
0%{background-image: url(../imagenes/brandingmini1.jpg);}
12.5%{background-image: url(../imagenes/brandingmini2.jpg);}
25%{background-image: url(../imagenes/brandingmini3.jpg);}
37.5%{background-image: url(../imagenes/brandingmini4.jpg);}
50%{background-image: url(../imagenes/brandingmini7.jpg);}
62.5%{background-image: url(../imagenes/brandingmini5.jpg);}
75%{background-image: url(../imagenes/brandingmini6.jpg);}
87.5%{background-image: url(../imagenes/brandingmini8.jpg);}
}

@-o-keyframes ani{
0%{background-image: url(../imagenes/brandingmini1.jpg);}
12.5%{background-image: url(../imagenes/brandingmini2.jpg);}
25%{background-image: url(../imagenes/brandingmini3.jpg);}
37.5%{background-image: url(../imagenes/brandingmini4.jpg);}
50%{background-image: url(../imagenes/brandingmini7.jpg);}
62.5%{background-image: url(../imagenes/brandingmini5.jpg);}
75%{background-image: url(../imagenes/brandingmini6.jpg);}
87.5%{background-image: url(../imagenes/brandingmini8.jpg);}
}

@-ms-keyframes ani{
0%{background-image: url(../imagenes/brandingmini1.jpg);}
12.5%{background-image: url(../imagenes/brandingmini2.jpg);}
25%{background-image: url(../imagenes/brandingmini3.jpg);}
37.5%{background-image: url(../imagenes/brandingmini4.jpg);}
50%{background-image: url(../imagenes/brandingmini7.jpg);}
62.5%{background-image: url(../imagenes/brandingmini5.jpg);}
75%{background-image: url(../imagenes/brandingmini6.jpg);}
87.5%{background-image: url(../imagenes/brandingmini8.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){

}