/* GLOBAL STYLES */

html{
    background:#fff;
}

body{
    margin:0 auto;
    width:80%;
    background:rgba(63, 6, 138, 0.75);
}

header{
    min-height: 150px;
    c
    color:#fff;
    font-weight: bold;
    background-image: url(../images/headerbg.png);
    background-repeat: no-repeat;
}
.hdrbg{
    height:100px;
} 

nav{
    position: relative;
    bottom: 25px;
    left: 0;
}

section{
    width:62%;
    float:left;
    padding:0 1em;
    color:#fff;
}

#gallery{
    text-align: center;
    width:90%;
    margin:0 auto;
    float:none;
}

#gallery h1{
    font-family: 'Sail', cursive;
    font-size: 2em;
}

table{
    width: 80%;
    margin: auto;
}

table.menu figure{
    display: inline-block;
    width: 32%;
    margin:.3em;
    max-width: 300px;
}

table.menu figcaption{
    padding-bottom: 1em;
    max-width: 300px;
}

table.menu figure img{
    height: 250px;
    margin: auto;
}
figure{
    display: inline-block;
    width: 32%;
    margin: 0;
}

figcaption{
    text-align: center;
}

figure img{
    max-width: 300px;
    width: 100%;
    margin: auto;
}

aside{
    width:31%;
    background: tan;
    float:right;
    padding:0 1em;
    text-align:justify;
}

aside h3{
    text-align: center;
}

footer{
    clear:both;
    min-height: 40px;
    text-align: center;
    position: relative;
    bottom: 0;
    left: 0;
    padding-top: 25px;
    color:#fff;
}

/* DESKTOP */
@media all and (min-width:1279px) {
  
   
    
    body {
        width: 80%;
        margin: 0 auto;
        padding: 1em;
    }
    
}


/* TABLET */
@media all and (min-width:481px) and (max-width:1278px) {
	
 
    
    body {
        width: 80%;
        margin: 0 auto;
        padding: 1em;
		}
		
	section{
        width:90%;
		text-align: center;
        float:none;
        margin: 0 auto;
		}
    
    aside{
        width:90%;
        text-align: center;
        float:none;
        margin: 0 auto;
    }
}


/*PHONE*/
@media all and (max-width: 480px){

     body {
        background:#c00;
        width: 100%;
        padding: 1em;
		}
    
    header{
        width:90%;
    }
		
	section{
        width:80%;
		text-align: center;
        float:none;
		}
    
    aside{
        width:80%;
		text-align: center;
        float:none;
    }
    
    footer{
        width:85%;
    }
}