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

#formulario{
background-color: #7F3B96;
float: right;
padding: 50px;
height: auto;
}

.form{
width: 100%;
float: left;
font-family: font2;
font-size: 1.2em;
margin-top: 20px; 
margin-bottom: 40px;
text-align: left;
color: white;
}

label{
display: block;
clear: both;
font-family: font2, sans-serif;
color: white;
float: left;
font-size: 1em;
margin-bottom: 12px;
margin-top: 10px;
margin-left: 10%;
}

input{
float: right;
margin-bottom: 10px;
margin-top: 8px;
}

textarea{
margin-top: 10px;
width: 50%;
height: 20%;
float: right;
}

.boton1{
width: 70px;
border: 0px;
height: 30px;
background-color: #F5841F;
color: white;
float: right;
transition: 0.5s;
margin-top: 30px;
margin-bottom: 10px;
font-family: font2;
border-radius: 10px;
}


.boton1:hover{
background-color: white;
color: #F5841F;
}


footer{
background-color: #F5841F;
padding-top: 20px;
padding-bottom: 20px;
float: left;
height: 508px;
}

#logocontacto{
height: 150px;
width: 150px;
margin: auto;
background-repeat: no-repeat;
background-image: url(../imagenes/logocontacto.png);
margin-bottom: 6px;
margin-top: 65px;
}

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

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

#behance{
width: 48px;
float: left;
margin-bottom: 90px;
}

#behance:hover{
    opacity:0.8;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: 0.5s;
}
#direccion{
padding: 10px;
font-family: font2, sans-serif;
color: white;
font-size: 1em;
overflow: hidden;
width: 100%;
margin: auto;
margin-bottom: 50px;
text-align: center;
}

@media (min-width: 240px) and (max-width:736px){
   #formulario{
padding: 5%;
padding-right: 5%;
} 

label{margin-left: 5%;}
    
textarea{
width: 100%;
height: 20%;
margin-left: 0px;
float: right;
margin-top: 10px;
}

#fb{
width: 48px;
margin-bottom: 20px;
float: left;
margin-left: 40%;
margin-bottom: 0px;
}
    
}

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

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