@import url(http://fonts.googleapis.com/css?family=Fjalla+One&subset=latin,latin-ext);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);


/* RESETS AND OVERRIDES
-------------------- */
* { margin: 0; padding: 0; font: inherit; }

body, #header {
    background: #111;
}


/* GENERAL LAYOUT
-------------------- */
/* content container width 900 px */
#container, #footer-wrap, #header, #header-wrap {
    max-width: 900px;
    margin: 0 auto;
}

#header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    display: flex;
    padding: 20px 20px 20px 20px;
    height: 79px;
    border-bottom: 1px solid #333;
}

#zelda { width: 330px; }

#menu { 
    margin-left: auto;
    padding-top: 25px;
}

#content { clear: both; }

#main { 
    padding: 0px 20px;
	border-bottom: 1px solid #333;
}

/* 
#mario { }
#mario p { }
 */

#luigi { 
    width: 35em;
    padding-bottom: 6em; 
}

#footer {
    margin: 0px 20px 20px 20px;
    padding-top: 20px;
    height: 40px;
}

.gallery { text-align: left; }


.gallery div {
    padding-bottom: 30px;
}

.gallery img {
    display: block;
    margin: auto;
    border: 1px solid #fff;
}

.gallery p { padding: 5px 0 10px 0; }

.gallery-home { padding: 0 20px; }

.gallery-home div {
    width: 350px;
    padding-bottom: 50px;
}

#mario div { padding-bottom: 40px; }

#mario img {
    max-width: 100%;
    height: auto;
}

.highlights {
    width: 30em;
    padding-bottom: 5em;
}

.highlights ul { margin-left: 2em; }

.highlights li { margin-bottom: 1em; }

.info {
    margin: 10px 0px 0px 0px;
    list-style: none;
}

.info li { margin-bottom: 8px; }

.info img { margin-right: 5px; }


/* MAIN NAV MENU
-------------------- */
#menu li {
    display: inline;
    text-align: right;
}

#menu a {
    display: inline-block;
    padding-left: 1em;
    text-decoration: none;
}

#menu a:link, #menu a:visited { color: #ccc; } 

#menu a:hover, #menu a:focus, #menu a:active { color: #fff; } 


/* TEXT FORMATTING
-------------------- */
#container, #footer {
    font-family: 'Open Sans', sans-serif;
    color: #d9d9d9;
}

h1, h2, #header, #main .gallery-home a { font-family: 'Oswald', sans-serif; }

#main p { text-align: justify;}

h1 { 
    margin: 25px 0;
    font-size: 1.7em;
    font-weight: normal;
}

h2 {
    margin: 0 0 25px 0;
    font-size: 1.5em;
    font-weight: normal;
}

h1, #zelda, #main .gallery-home a { text-transform: uppercase; }

strong { font-weight: bold; }

#zelda { font-size: .8em }

.title { font-size: 1.8em; }

.title2 {
    font-size: .8em;
    font-weight: normal;
}

#menu { font-size: 1em; }

#main { font-size: .8em; line-height: 1.8em; }

#footer { font-size: .7em; }

p { padding: 0px 0 25px 0; }

.gallery p { text-align: center; }

.medium { color: #888; }

.gallery-home { font-size: 1.2em; }

#main a:link, #main a:visited {
    color: #ccc;
    text-decoration: none;
} 

#main a:hover, #main a:focus, #main a:active {
    color: #fff;
    text-decoration: underline;
}

#zelda a { color: #d9d9d9; }

#main .gallery-home a /* height 263 */{
    position: relative;
    display: block;
    margin-top: -269px;
    padding-top: 120px;
    width: 350px;
    height: 143px;
    text-align: center;
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.3em;
}

#main .gallery-home a:link, #main .gallery-home a:visited {
    color: #fff;
    text-decoration: none;
    background: url(bg_tile_opaquegray1.png) repeat;
} 

#main .gallery-home a:hover, #main .gallery-home a:focus, #main .gallery-home a:active {
    color: #000;
    text-decoration: none;
    background: url(bg_tile_opaquewhite3.png) repeat;
}

.info { font-size: .8em; }

.samus {
    display: flex;
    justify-content: left;
}


/* RESPONSIVE MENU
-------------------- */

/*
.slicknav_menu {
    display: none;
}

@media screen and (max-width: 40em) {
    .js #menu {
        display: none;
    }
    
    .js .slicknav_menu {
        display: block;
    }
}

*/

/* https://www.google.com/search?source=hp&ei=zfMvXbeoFoHXtAa-pJSYCw&q=media+screen+smartphones&oq=%40media+screen+sma&gs_l=psy-ab.3.1.0i22i30l6.146.8685..17160...0.0..1.369.1858.4j7j1j1......0....1..gws-wiz.....0..35i39j0j0i131j0i7i30.Rc8EpcPloE0 */


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  
    /* #zelda {background: white;} */
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
  
    /* #zelda {background: green;} */
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
  
    /* #zelda {background: orange;} */
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
    #menu { font-size: 1.5em; }
    #luigi, .highlights { font-size: 1.3em; }
    /* #zelda {background: blue;} */
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  
    #menu { font-size: 1.5em; }
    #main { font-size: 1em; }
    /* #zelda {background: red;} */
}


/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
/* @media only screen and (min-width: 320px) and (max-width: 480px), (orientation: portrait) { */
@media (min-width: 320px) and (max-width: 480px), (orientation: portrait) {
    .gallery-home div {
        float: none;
        display: block;
        margin: auto;
        padding-bottom: 20px;
    }
    
    #luigi {
        float: none;
        display: block;
        width: 100%;
    }
    
    #menu { font-size: 2em; }
    
    #main { font-size: 1em; }
    
    /* #main p, .highlights { width: 100%; } */
    
    #mario div { padding-bottom: 6em; }    
    
    #mario img { width: 100%; }
    
    #mario div p { font-size: .8em; }
    
    #about #mario .info { margin-left: 0; }
    
    #about #mario li, #about #mario .highlights p { text-align: left; }
    
    #about #mario .highlights { padding-left: 0; }
    
    .samus { display: inline; }
}


/* OTHER FORMATTING
-------------------- */
.left { float: left; }
.right { float: right; }
.clearfloat { clear: both; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.center { text-align: center; }
.mrg-top-1 { margin-top : 10px; }
.mrg-top-2 { margin-top : 20px; }
.mrg-top-3 { margin-top : 30px; }
.mrg-right-1 { margin-right : 10px; }
.mrg-right-2 { margin-right : 20px; }
.mrg-right-3 { margin-right : 30px; }
.mrg-right-4 { margin-right : 40px; }
.mrg-right-5 { margin-right : 50px; }
.mrg-bottom-1 { margin-bottom : 10px; }
.mrg-bottom-2 { margin-bottom : 20px; }
.mrg-bottom-3 { margin-bottom : 30px; }
.mrg-left-1 { margin-left : 10px; }
.mrg-left-2 { margin-left : 20px; }
.mrg-left-3 { margin-left : 30px; }
.mrg-left-4 { margin-left : 40px; }
.mrg-left-5 { margin-left : 50px; }
.pad-top-1 { padding-top : 10px; }
.pad-top-2 { padding-top : 20px; }
.pad-top-3 { padding-top : 30px; }
.pad-right-1 { padding-right : 10px; }
.pad-right-2 { padding-right : 20px; }
.pad-right-3 { padding-right : 30px; }
.pad-bottom-1 { padding-bottom : 10px; }
.pad-bottom-2 { padding-bottom : 20px; }
.pad-bottom-3 { padding-bottom : 30px; }
.pad-left-1 { padding-left : 10px; }
.pad-left-2 { padding-left : 20px; }
.pad-left-3 { padding-left : 30px; }
.ver-align-top { vertical-align: top; }
.ver-align-middle { vertical-align: middle; }
.ver-align-bottom { vertical-align: bottom; }