@charset "UTF-8";
/* CSS Document */

body { 
     margin: 0;
     padding: 0;
     font: 16px Arial, Helvetica, sans-serif;
}
a { text-decoration: none; }
a:link, a:visited { color: #0022fa; }
a:hover { text-decoration: underline; }
a:active { color: #4b2765; }

#header {
     width: 100%;
     margin: 0;
     padding: 0 0 0 25px;
     background-color: #0022fa;
}
#header a, #header a img {
     margin: 0;
     padding: 0;
}


#nav ul {
     list-style: none;
     margin: 10px 50px 0;
     padding: 0;
}
#nav li {
     list-style-type: none;
     display: inline-block;
     margin-right: 20px;
}
#homepage #nav { display: none; }

#maincontent {
     margin-top: 0;
     position: relative;
     padding: 50px;
}
h1 {
     font-size: 1.2em;
     font-weight: bold;
     text-transform: uppercase;
}
h2 {
     font-size: 2em;
     font-weight: bold;
}
button {
     width: 100%;
     margin-bottom: 20px;
     border: 2px solid #0022fa;
     background-color: #fff;
}
button:hover { background-color: #0022fa; }
button:active {
     background-color: #4b2765;
     border-color: #fff;
}
button a:link, button a:visited {
     display: block;
     padding: 2px 6px 0;
     text-decoration: none;
     text-transform: uppercase;
     font: 16px Arial, sans-serif;
     font-weight: bold;
     line-height: 44px;
     vertical-align: middle;
     color: #000;
}
button a:hover { color: #fff; }
button a:active { color: #4b2765; }
button#photo { width: 250px; }

#links ul {
     list-style: none;
     margin: 0 0 2em 0;
     padding: 0;
}
#links li {
     list-style-type: none;
     margin: 0 0 .5em;
     padding: 0;
     text-transform: uppercase;
     font-weight: bold;
}
#links li a {
     text-transform: none;
     font-size: 15px;
     font-weight: normal;
}

#footer { 
     margin: 20px 50px;
     clear: both;
}


#artwork #maincontent h1 img {
     margin-top: 15px;
     margin-bottom: 15px;
}

/* DESKTOPS AND LAPTOPS ----------- */
@media only screen and (min-width: 1000px), (min-device-width: 768px) {
     #header { height: 225px; }
     #links { max-width: 520px; }
     #maincontent { padding: 50px; }
     #buttons { max-width: 510px;      }
     button {
          width: 230px;
          margin-right: 20px;
     }
     .homePoster {
          position: absolute;
          left: 560px;
          top: 60px;
     }
     
     #photo-gallery {
          margin-top: 2em;
     }
     figure {
          width: 160px;
          margin: 0 20px 0 0;
          padding: 0;
          float: left;
          position: relative;
     }
     figure img {
          width: 100%;
     }
     figcaption {
          height: 5em;
          margin-top: .3em;
     }
}

/* small screens */
@media only screen and (max-width: 600ox), (max-device-width: 600px) {
     #header { padding: 0 5px; }
     #header img { width: 100%; }
     #nav ul { margin: 10px 20px 0; }
     #maincontent { padding: 30px 20px; }
     #video-container {
          position: relative;
          padding-bottom: 56.25%;
          height: 0;
     }
     #video-container iframe {
          position: absolute;
          top:0;
          left: 0;
          width: 100%;
          height: 100%;
     }
}