/*

CSS3 Normalizing

*/

html { -webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; }
body { padding: 0; margin: 0; }
img { max-width: 100%; display: block; border: 0; }
table {border-collapse: collapse; border-spacing: 0; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: none; }
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 0; }

article, aside, details, figcaption, figure, footer, header, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }

button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

q { quotes: "\201C" "\201D" "\2018" "\2019"; }
q::before{ content: open-quote; }
q::after{ content: close-quote; }

sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }






/*

Global Styles

*/

body { width: 1024px; font-family: molengo,verdana,sans-serif; font-size: 100%; color: #666; padding-bottom: 30px; background-color: #fff; margin: 0 auto 0 auto; }
p { font-size: 100%; color: #fff; line-height: 150%; margin: 0 0 3% 0; }
a { color: #666; text-decoration: none; }






/*

Global Styles

*/

header { width: 100%; font-family: arial,verdana,sans-serif; }
header::after { clear: both; display: block; content: "."; height: 0px; visibility: hidden; }
header #logo { float: left; width: 216px; margin: 104px 0 20px 80px; }
header nav { float: right; margin: 140px 80px 0 0; }
header nav ul li { float: left; font-size: 90%; text-transform: uppercase; margin: 0 0 0 12px; }
header nav ul li a { color: #929497; }
header nav ul li a:hover { color: #333; }






#bio li.bio a { color: #333; }
#bio section { background-color: #808080; min-height: 504px; padding: 64px 215px 0 215px; }
#bio section article { min-height: 300px; text-align: justify; }
#bio section footer { font-size: 75%; text-align: justify; }

#contact li.contact a { color: #333; }
#contact section { background-color: #808080; min-height: 504px; padding: 64px 215px 0 215px; }
#contact section article { min-height: 300px; }
#contact section article p.center { font-size: 135%; text-align: center; }
#contact section article a { color: #fff; }
#contact section article a:hover { color: #fff; text-decoration: underline; }
#contact section footer { font-size: 75%; }

#portfolio li.portfolio a { color: #333; }
#portfolio section { background-color: #808080; height: 568px; }
#portfolio section #pic { position: absolute; width: 1024px; height: 568px; overflow: hidden; z-index: 1; }
#portfolio section #pic img { max-height: 568px; margin: auto; }
#portfolio section #arrowBack { position: absolute; cursor: pointer; margin: 270px 0 0 10px; z-index: 2; opacity: 0.5; }
#portfolio section #arrowNext { position: absolute; cursor: pointer; margin: 270px 0 0 998px; z-index: 2; opacity: 0.5; }
#portfolio section #arrowBack:hover { opacity: 1.0; }
#portfolio section #arrowNext:hover { opacity: 1.0; }
#portfolio section #picBack { position: absolute; display: none; visibility: hidden; }
#portfolio section #picNext { position: absolute; display: none; visibility: hidden; }

#home li.home a { color: #333; }
#home section.home { background-color: #808080; min-height: 543px; padding: 25px 0 0 0; }
#home section.home #arrowBack { position: absolute; cursor: pointer; margin: 245px 0 0 10px; z-index: 2; }
#home section.home #arrowNext { position: absolute; cursor: pointer; margin: 245px 0 0 998px; z-index: 2; }
#home section.home #container { width: 1024px; height: 160px; overflow: hidden; }
#home section.home #container #scroll { width: 10000px; }
#home section.home #container #scroll ul li { float: left; border-top: 4px solid #000; border-bottom: 4px solid #000; border-right: 1px solid #000; }
#home section.home #container #scroll ul li img { height: 152px; cursor: pointer; }

#home section.mobile { display: none; }



@media screen and (max-width: 1023px) {
  
  body { width: 100%; padding-bottom: 0; }
  header #logo { margin-top: 20px; margin-left: 20px; }
  #home header nav { display: none; }
  #home section.home { display: none; }
  #home section.mobile p { margin: 0 0 6% 0; }
  #home section.mobile { display: block; width: 80%; background-color: #808080; padding: 20px 10% 20px 10%; }
  #home section.mobile ul li { width: 100%; margin: 0 0 20px 0; }
  #home section.mobile p a { color: #fff; }
  #home section.mobile p a:hover { color: #fff; text-decoration: underline; }
  #home section.mobile p.copyright { font-size: 75%; margin: 40px 0 0 0; }

 }