html, body {margin:0; padding:0; font-family: 'santanaregular','asapregular', 'Asap', sans-serif;}
body {overflow-y:hidden; overflow-x: scroll ;}
*:hover{-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
a {text-decoration:none; color:#eaa883}
a:hover {color:#e45d13}
h1, h2, h3, h4, p, ol {margin:0; padding:0; font-weight:normal;}
p {font-family: 'asapregular', 'Asap', sans-serif; padding: 0 0 1em; color: #333; font-weight: normal; text-align: justify;}
ul {list-style-type:none;}
.marginAuto {margin:0 auto;}
#preload {display:none;}
iframe {width: 200%; height:200%; border: none;}
header {position:fixed; top:0; left:0; height:100%; text-align:center; width:23em; z-index:2;}
header .container {padding:2.5em 1.875em 0; background:#fff; float:left;}
header .wrapper {height:100%; border-bottom:1px solid #ccc;}
header .section {border-bottom:1px solid #ccc; margin:0; padding: 1.25em 0;}
header .section:first-child {padding: 0 0 1.25em;}
header .section:last-child {padding: 1.25em 0 0; border:none;}
header #logo {width:8.125em; height:8.125em; background: url(../images/mark-thibault-logo.png) center no-repeat; background-size:contain}
header #info h1{margin:0; padding:0; color:#e45d13; text-transform:uppercase; font-family: 'santanabold', 'asapregular', 'Asap', sans-serif; font-size: 1.9em;}
header #info p{margin:0; padding:0; color:#eaa883; font-family: 'asapregular', 'Asap', sans-serif; font-size: 1em; text-align:center;}
header li {font-size: 2.5em; text-transform:uppercase; color:#eaa883; margin:0 0 .5em; cursor:pointer; }
header li:last-child {margin:0}
header li:hover {color:#e45d13}
header li ol{font-size:.5em;}
header #rights {font-family: 'asapregular', 'Asap', sans-serif; margin: .3125em 0 0; font-size:.7em; color:#ccc;}
#lines {z-index:1; float:left; background:#fff;}
.line1 {background:#e45d13; width:.9375em; float:left; margin: 0 .3125em 0 0;}
.line2 {background:#eaa883; width:.9375em; float:left; margin: 0 .3125em 0 0;}
.line3 {background:#fcdece; width:.9375em; float:left;}
#trapezoids {z-index:1; width:25.3125em; clear:left; margin: 0 0 0 7.7em; background:#fff;}
html[data-useragent*='MSIE 10.0'] #trapezoids {margin: 0 0 0 7.9em;}
.trapezoid1 {border-bottom: 5em solid #e45d13; border-left: 7.5em solid transparent; border-right: 0px solid transparent; height: 0; width: .9375em; float: left; -webkit-transform: skew(-50deg); -moz-transform: skew(-50deg); -o-transform: skew(-50deg); transform: skew(-50deg)}
.trapezoid2 {border-bottom: 5em solid #eaa883; border-left: 3.75em solid transparent; border-right: 3.75em solid transparent; height: 0; width: .9375em; float: left; margin: 0 0 0 -.4375em;}
.trapezoid3 {border-bottom: 5em solid #fcdece; border-left: 0px solid transparent; border-right: 7.5em solid transparent; height: 0; width: .9375em; float: left; margin: 0 0 0 -7px; -webkit-transform: skew(50deg); -moz-transform: skew(50deg); -o-transform: skew(50deg); transform: skew(50deg)}
#menuToggle {background: #e45d13; width: 3.4375em; height: 3.4375em; position: absolute; top: 0; left: 18.1875em; display:none; cursor:pointer;}
#menuToggle .inside{margin:.5em;}
#menuToggle .whiteBar {height:.5em; width:100%; margin:0 0 .45em; background:#fff;}
#bodyToggle {width:2000px; height:2000px; position:absolute; top:0; left:21.58em; display:none;}
#content {margin: 2.5em 0 0 23em; z-index: 0;}
#content .container {margin: 4em 1.8em 0 0;  border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;}
.portfolio {overflow:auto; margin: -1.5em 0 0 0;}
.myInfo {display:none; overflow:auto; margin: -1.5em 0 0 0;}
.web {float:left;}
.sectionBreak {margin: 0 1em 0 0; padding: 0 0 0 1em; float:left; width:9em; text-align:center; color:#aaa;}
.graphic {float:left;}
.photo {float:left;}
.about {float:left;}
.resume {float:left;}
#content .section {float:left; width:40.125em;}
#content .individual {margin:0 2em 0;}
#content .multipleCenter {margin:0;}
#content .multipleLeft {margin:0 0 0 2em;}
#content .multipleRight {margin:0 2em 0 0;}
#content .section .header{position:relative; background:#e45d13; height:8em;  color:#fff;}
#content .section .header:after{position:absolute; content: ''; width: 0; height: 0; z-index:-1; right: 100%; top:0; border-width: .75em; border-style: solid; border-color: transparent #eaa883 #eaa883 transparent;}
#content .section .header {color:#fff;}
#content .section .header:hover{color:#333;}
#content .section .wrapper{ padding: 1em 1em 0; text-align:center;}
#content .section .header h1{text-transform:uppercase; float:left; color:#fff;}
#content .section .header h2{font-family:'asapregular', 'Asap', sans-serif; font-size: 1em; float:left; clear:left;}
#content .section .header h3{position:absolute; bottom:.5em; right:-.5em; text-transform:uppercase; font-family: 'santanabold','asapregular', 'Asap', sans-serif; background:#fcdece; padding: .6em 1.5em .5em; color:#e45d13; z-index:1;}
#content .section .header h3:after{position:absolute; content: ''; width: 0; height: 0; z-index:-1; right: 0; top:100%; border-width: .27em; border-style: solid; border-color: #eaa883 transparent transparent #eaa883;}
#content .section .header h3:before{position:absolute; content: ''; width: 0; height: 100%; left: -.2em; top:0; border-left: .25em solid #eaa883;}
#content .section .header h4{float:right; color:#fff; font-family:'asapregular', 'Asap', sans-serif; width:10em; height:3em; text-align:right;}
.wordpress {background:url(../images/wordpresslogo.png) top no-repeat; background-size:contain;}
.squarespace {background:url(../images/squarespacelogo.png) center no-repeat; background-size:contain;}
.bootstrap {background:url(../images/twitterbootstraplogo.jpg) right no-repeat; background-size:contain;}
#content .section .content {position:relative; border-right: 1px solid #ccc; z-index:0; background-size:cover;}
.leftBorder {border-left: 1px solid #ccc;}
#content .backgrounds {background-size:cover !important; height:100%;}
footer {position:fixed; right:4.9em; bottom:3em; height:5em; }
footer .container {position:relative; background:#e45d13; width:100%; height:100%;  z-index:1; text-align:right; color:#fff; text-transform:uppercase; overflow: hidden;}
footer:after{position:absolute; content: ''; width: 0; height: 0; z-index:-1; right: 100%; bottom:0; border-width: 1em 3em; border-style: solid; border-color: #eaa883 #eaa883 transparent transparent;}
footer h1 {font-size:7.8em; font-family: 'santanabold','asapregular', 'Asap', sans-serif; line-height:.72em; margin:0 .1em 0 0; float:right;}
footer h2 {float:right; font-size: 2.3em; margin: .65em .5em 0 2em; font-weight: normal;}
#footerShadow {left:-3.2em; content: " "; height: 2em; width: 7em; position: absolute; background: #eaa883; bottom:0; -webkit-transform: skew(73deg); -moz-transform: skew(73deg); -o-transform: skew(73deg); transform: skew(73deg); z-index:-1;}
.facebook{background:url(../images/facebook.png) center no-repeat; background-size:contain; width:3em; height:3em; float:right;}
.instagram {background:url(../images/instagram.png) center no-repeat; background-size:contain; margin:0 0 0 1em; width:3em; height:3em; float:right;}
#instafeed {overflow:hidden;}
#instafeed img{width: 23%; margin: 0 .25em 0 0;}
.linkedin {background:url(../images/linkedin.png) center no-repeat; background-size:contain; width:3em; height:3em; float:right;}
.icon {opacity:.5;}
.icon:hover {opacity:1;}
.castlerock { background:url(../images/web/mark-thibault-castlerock-design.png) top no-repeat;}
.owlseye { background:url(../images/web/mark-thibault-owlseyephotography-design.png) top no-repeat;}
.feederteam { background:url(../images/web/mark-thibault-feederteam-design.png) top no-repeat;}
.underratedretro { background:url(../images/web/mark-thibault-underratedretro-design.png) top no-repeat;}

html[data-useragent*='MSIE 10.0'] footer {}
@media (max-height:51.25em) {
	body {font-size:.8em}
	footer {right:2em; bottom:3.1em;}
}
@media (max-width:84.375em) {
	footer {right:2em; font-size:.8em; bottom: 4.4em;}
}
@media (max-width:67.5em) {
	footer {right:2em; font-size:.6em; bottom: 6.5em;}
}
@media (max-width:56.25em) {
	header {left:-18.1875em;}
	#content {margin: 2.5em 0 0 5em;}
	#menuToggle {display:block;}
}
@media (max-height:42.5em) {
	body {font-size:.6em}
	footer {bottom: 5.9em;}
}
@media (max-width:40em) {
	#content .section .header h4{ display:none;}
	footer h1 {margin:0 .1em 0 .5em;}
	footer h2 {display:none;}
}