@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Roboto);


#contenedorweb{
width: 100%;
margin: 0 auto;
}

#contenedorQ{
width: 100%;
margin: 0 auto;
}

#contenedorC{
width: 100%;
margin: 0 auto;
}

#contenedorD{
width: 100%;
margin: 0 auto;
}

body{
background-color: #54A891;
margin: 0;
}

img {width: 100%;
}  

.busqueda {
display: flex;
width: 100%;
justify-content:center;
}

input {
border: none;
background-color: #ffe838;
font-family: 'Roboto';
color:#7b400d;
padding: 0.5em;
border-radius: 16px;
}  

#botones1{ 
display: flex;
margin: 0;
padding: 0;
}


#botones1 ul { 
display: flex;
flex-direction: column;
}

#botones1 ul li{
display: flex;
width: 100%;
list-style: none;
font-family: 'Roboto';
} 

#botones1 ul li a{
display: flex;
width: 100%;
background-color: #ffe838;
padding: 1em;
color: #D40E0D;
text-decoration: none;
font-size: large;
margin: 0 0 0.5em 0;
}

/*------------------------pantalla que es fadulicious*/

#articulos{
display: flex;
flex-direction: column;
background-color: #ffe838;
border-radius: 10px;
font-family: 'Roboto';
text-align: center;
margin-left: auto;
margin-right:auto;
width: 90%;
}

#articulos p{
text-align: left;
}

#articulos section{
text-align: center;
margin-left: auto;
margin-right:auto;
padding: 0.5em;
}

#contactate {
background-color: #D40E0D; 
padding: 1em;
margin: 0 auto;
width: 80%;
border-radius: 10px;
text-align: center;
}

#contactate label{
color: #ffe838;
font-family: 'Roboto';

}

#contactate textarea{
width: 70%;
border: none;
border-radius: 10px;
background-color: #ffe838;
padding: 0.3em;

}
#contactate input{
width: 70%; 

}

#fonditorojo{ background-color: #D40E0D;}

 
 /***********************40em*********************************/


@media all and (min-width:40em)
{
    
    
body{
background-color: #54A891;
margin: 0 2em 0 2em;
}
    
img {
width: 100%;
} 
    
.busqueda {
display: flex;
justify-content: flex-end;
width: 100%;
margin: -4em 0 3em -8em;
}

input {
border: none;
background-color: #ffe838;
font-family: 'Roboto';
color:#7b400d;
padding: 0.3em;
border-radius: 16px;
}     

#botones1{ 
display: flex;
margin: 0 0 0 -2em;
}

#botones1 ul { 
display: flex;
flex-direction: row;
width: 100%;
text-align: center;
}

#botones1 ul li{
display: flex;
list-style: none;
font-family: 'Roboto';
width: 100%;

}

#botones1 ul li a{
display: flex;
background-color: #ffe838;
color: #D40E0D;
text-decoration: none;
font-size: large;
margin: 0 1em 0.5em 0;
width: 100%;
border-radius:10px;
justify-content: center;
}

    /*------------------------pantalla que es fadulicious*/

#articulos{
display: flex;
flex-direction: row;
background-color: #ffe838;
border-radius: 10px;
font-family: 'Roboto';
width: 100%;
margin: 0 0 0.5em 0;
}


#articulos section{
margin: 0 2em 0 2em;
}
    
#contactate {
background-color: #D40E0D; 
border-radius: 10px;
margin: 0 0 0.5em 0;
width: 97%;
}

#contactate label{
color: #ffe838;
font-family: 'Roboto';

}

#contactate form{
text-align: center;    
}
    
#contactate textarea{
width: 50%;
border: none;
border-radius: 10px;
background-color: #ffe838;
padding: 0.3em;
}

#contactate input{
width: 50%; 
}

    
 /***********************70em*********************************/   
@media all and (min-width:70em)
{

body{
background-color: #54A891;
}
    
img {
width: 80%;
margin: 0 10em 3em 8em;} 
    
.busqueda {
display: flex;
width: 100%;
margin: -8em 0 1em -16em;
}

#botones1{ 
display: flex;
margin: 3em 0 0 5.5em;
}

#botones1 ul { 
display: flex;
flex-direction: row;
width: 87%;
text-align: center;
}

#botones1 ul li{
display: flex;
list-style: none;
font-family: 'Roboto';

}

#botones1 ul li a{
display: flex;
background-color: #ffe838;
color: #D40E0D;
text-decoration: none;
font-size: large;
margin: 0 1em 0.5em 0;
border-radius:10px;
justify-content: center;
}

#app li a{
font-size: large;
font-weight: bold
}

/*------------------------pantalla que es fadulicious*/

#articulos{
display: flex;
flex-direction:row;
background-color: #ffe838;
border-radius: 10px;
font-family: 'Roboto';
width: 80%;
text-align: center;
margin-left: auto;
margin-right:auto;

}
#articulos p{
        text-align: left;
    }

#articulos section{
    margin: 0 2em 0 2em;
}

#contactate {
background-color: #D40E0D; 
border-radius: 10px;
justify-content: center;
width: 77%;
text-align: center;
margin-left: auto;
margin-right:auto;
}


}