*{
box-sizing: border-box;
}
#wrapper, header, #welcome, #welcome .logo, footer, #footwrap{
width:100%;
}
nav#main{
width:auto;
background:#fff;
margin:0;
padding:10px 0;
text-align:center;
height:auto;
line-height:normal;
font-weight: 700;
text-transform: uppercase;
}
nav#main ul{
padding:5px 0;
width: 100%;
display: flex; /*allows the links to be the same length regardless of how many there are*/
flex-direction: row; /*places the links horizontally*/
empty-cells: hide; /*hides empty cells if you remove links*/
table-layout: auto; /*sets the cell width to the widest they need to be*/
margin:0;padding:0;
}
nav#main ul li{
flex: 1 1 auto; /*Ensures the cells take up the same width*/
width:30%;
margin:0 0 5px 0;
padding:0 2px;
}
nav#main ul li a{
top: 0;
flex:1;
padding: 3px 0;
border-radius:10px;
background:#4fa3ad;
color:#ecebd9;
}
nav#main a:link, nav#main a:visited{
display:block;
padding:4px 8px;
margin:0;
}
nav#main li.now a{
background: #c93261;
color: #fff;
box-shadow: none;
border:4px solid #c93261;
}

header{
margin:10px 0;
height:auto;
}
header h1{
text-indent:0;
height:auto;
width:auto;
font-family: 'Arvo', serif;
font-weight: 700;
color: #e1ced4;
background:transparent;
text-shadow:0.05em 0.075em 0px rgba(0, 0, 0, 0.5);
font-size: 3.4em;
letter-spacing: 4px;
text-transform:uppercase;
}

#content{
background:#fff;
padding:20px 0;
margin:0;
}

#welcome{
overflow:hidden;
margin:10px 0 20px 0;
padding:10px 0;
}
#welcome .logo{
float:none;
text-align:left;
padding:10px;
}
#welcome ul{
width:90%;
float:none;
margin:15px 50px 10px 20px;
}
#welcome li a{
border-radius:0 25px 25px 0;
box-shadow: 0 0 6px rgba(0,0,0, .1);
}

#products{
text-align:center;
}
.left, .centre, .right{
float:left;
text-align:left;
width:30%;
margin:10px 5px 10px 5px;
background:#ededec;
border-radius:5px;
padding:5px 5px 10px 5px;
}
#products img{
max-width:90%;
height:auto;
}

#main-content{
margin:0 10px;
}
#main-content h2{
margin:10px 0 5px 0;
}
#main-content h3{
margin:20px 0 5px 0;
}
#main-content p{
line-height:1.4em;
margin-bottom:10px;
color:#333;
font-size:1.1em;
}
#main-content ul{
margin-left:20px;
}
#main-content ul.awesome{
list-style-type:none;
}
#main-content li{
line-height:1.2em;
margin-bottom:5px;
color:#333;
font-size:1.1em;
}
#main-content ul.awesome{
margin-left:10px;
}
#main-content ul.awesome i{
padding-right:10px;
}
#main-content a{
color:#168382;
}
#main-content a:hover, #main-content a:focus{
color:#952255;
text-decoration:none;
}

footer{
padding:10px 0;
}

#feedback{
width:auto;
float:none;
border-right:0;
border-bottom:4px solid #fff;
margin:0 10px;
}
#feedback form{
width: auto;
}
#feedback input, #feedback textarea{
display:block;
width:80%;
padding:10px 5px;
}
#feedback input#AntiSpam{
width:20%;
}
#feedback input#form_submit_button{
padding:10px;
}

nav#footnav{
width:auto;
float:none;
text-align:left;
margin:0;
padding:10px 2%;
}
nav#footnav li{
width:46%;
margin:0;
}
/*****FOOTER NAVIGATION SOCIAL*****/
nav#social{
float:none;
margin:10px;
width:auto;
text-align:right;
}


@media screen and (max-device-width : 480px)
{
nav#main li{
width:auto;
font-size:.7em;
}
nav#main i, header h1 i{
display:none;
}
header h1{
font-size: 2em;
letter-spacing: 4px;
}
.left, .centre, .right{
float:none;
text-align:left;
width:auto;
margin:10px 0;
padding:5px 10px;
}
nav#footnav li{
width:90%;
margin:0;
}

}