@charset "utf-8";

    /* GLOBAL */
body { margin: 0px; padding: 0px;}
.nav { background-color: #2D2D2D;  background-image: url(res/stripetile.png); color: #FFF; width: 100%; position: fixed; z-index: 100; top: 0px; left: 0px; right: 0px; margin: 0px; padding-top: 5px; padding-bottom: 5px; padding-left: 12px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e9cd4d; font-family: 'Source Sans Pro', sans-serif; font-size: 80%; letter-spacing: 4px;}
.nav .title a { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 700; text-transform: uppercase; color: #aaeade; text-decoration: none; font-size: 150%;}
.nav .title a:hover {color: #FFF; text-decoration: none;}
.nav .links {text-transform: uppercase; display: inline;}
.nav .links a {	color: #FFF; text-decoration: none; padding-left: 10px;}
.nav .links a:hover { color: #c48346; text-decoration: none;}

    /* WELCOME */
#welcome { height:100%; background: url("res/waves7.png") center fixed #4d3e5a;}
#welcome .center {display: table;}
#welcome img {middle; position: relative;  left: 55px; top: 70px; text-align: center; z-index: 20;}
#welcome .t { color: #FFF; display: table-cell; vertical-align: middle; position: relative; height: 100vh; width: 96.5vw; text-align: center; z-index: 10;}
/* #welcome .band { position: absolute;  top: 33%; z-index: -10; left: 0px; right: 0px; margin: 0px; height: 260px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFF; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #FFF; background-color: #2D2D2D; background-image: url(res/stripetile.png);}*/ 
#welcome h1, #welcome h2, #welcome h3, #welcome p {line-height: 100%; text-align: center}
#welcome h1 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 1300%; letter-spacing: -10px; margin: 0; font-weight: 700; position: relative; left: -100px; top: -110px;}
#welcome h2 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 600%; margin: 0; font-weight: 400; position: relative; left: 40px; top: 120px;}
#welcome h3 { font-family: 'Source Sans Pro', sans-serif; font-size: 80%; letter-spacing: 4px; margin: 0; vertical-align: middle; font-weight: 300; font-style: italic; position: relative; left: 35px; top: -130px;}
#welcome a{color: #fff; text-decoration: none;}

    /* WORK */
#work { height:100%; background: url("res/waves6.png") center fixed}
#work .center { display: table; padding-top: 60px; padding-bottom: 60px; padding-left: 10%; padding-right: 10%; width: 80%}
#work .interior { display: table-cell; vertical-align: middle; position: relative; text-align: left;}
#work .content { display: block; padding: 30px; background-color: #FFF; background-image: url(res/stripetile2.gif); border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #333;}
#work p { font-family: 'Source Sans Pro', sans-serif; letter-spacing: 4px; font-weight: 400; position: relative; padding-left: 5% padding-right: 10%; padding-bottom: 30px}
#work h1 {color: #333; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 1300%; letter-spacing: -12px; margin: 0; font-weight: 700; position: relative; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #333; line-height: 80% }
#work img {border-top-width: 1px; border-style: solid; border-color: #333; border-width: 1px; vertical-align:bottom;}
#work a {display:inline-block; text-decoration:none; background: #ffcc33;}
#work a:active, #work a:focus, #work a:hover {color:#000;}
#work a:active img, #work a:focus img, #work a:hover img {opacity:0.65;	-moz-opacity:0.65; filter:alpha(opacity=65);}
    /* WORK: GALLERY */
#work .wrap {overflow: hidden;}
#work .box {float: left; position: relative; width: 14.2%; padding-bottom: 20.6%;} /* Large: 7 tiles */
#work .boxInner {position: absolute; left: 8px; right: 8px;}
#work .boxInner img {width: 100%;}
    @media only screen and (max-width : 650px) { /* Phone: 2 tiles */
      #work .box {width: 50%; padding-bottom: 74.5%; } }
    @media only screen and (max-width : 1050px) and (min-width : 481px) {/* Small: 4 tiles */
      #work .box {width: 25%; padding-bottom: 36.5%;} }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {/* Medium: 5 tiles */
      #work .box {width: 20%; padding-bottom: 28.8%;} }

    /* ABOUT */
#about { height:100%; background: url("res/waves8.png") center fixed}
#about .t {color: #333; display: table-cell; position: relative;}
#about .center { display: table; padding-top: 60px; padding-bottom: 200px; padding-left: 10%; padding-right: 10%; }
#about .interior {display: table-cell; vertical-align: middle; position: relative}
#about .content {display: block; padding: 20px; background-color: #FFF; background-image: url(res/stripetile2.gif); border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #333; top: -30px}
#about .column { display: table-cell; position: relative; padding-left: 10px; padding-right: 10px; padding-bottom: 30px; width: 30%;}
#about h1 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 1300%; letter-spacing: -12px; margin: 0; font-weight: 700; position: relative; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #333; line-height: 80% }
#about h2 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; color: #46b1bb; margin: 0; font-weight: 700; font-size: 200%; text-align:center; width: 100%; margin-bottom: 30px; border-width: 5px; border-style: solid; border-color: #333; letter-spacing: 4px}
#about p  {font-family: 'Source Sans Pro', sans-serif; letter-spacing: 2px; font-weight: 400; padding-bottom: 10px; vertical-align: top; font-size: 110%;}
#about a {color: #c48346; text-decoration: none; font-weight: 700; text-transform: uppercase;}
#about a:hover {color: #e9cd4d; text-decoration: none;}
#about .wrap { padding-left:10%; padding-right:10%; padding-bottom: 150px; text-align:center;}
#about .box {float: left; position: relative; width: 20%; padding-bottom: 10%;}
#about .boxInner {position: absolute; left: 0px; right: 0px;}

    /* BOTTOM */
#contact {height:100%; background: url("res/waves9.png") center fixed}
#contact .t {display: table-cell; vertical-align: middle; position: relative; height: 100vh; width: 100vw; text-align: center; z-index: 10;}
#contact .center {display: table; padding-top: 100px; padding-bottom: 100px; padding-left: 10%; padding-right: 10%; }
#contact .interior {display: table-cell; vertical-align: middle; position: relative; text-align: left;}
#contact .content {display: block; padding-top: 30px; padding-bottom: 30px; padding-left: 30px; padding-right: 30px;}
#contact .footer { background: url("res/waves6.png") center fixed; display: absolute; text-align: center; z-index: 10; font-family: 'Montserrat', sans-serif; text-transform: uppercase; color: #333; margin: 0; font-weight: 700; font-size: 200%; text-align:center; width: 100%; letter-spacing: 4px}
#contact a {color: #333; text-decoration: none;}