@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,700,700i,900|Shadows+Into+Light');

*{ padding:0; margin:0; box-sizing: border-box; text-decoration:none; color:inherit;}

body{ font-family: 'Montserrat', sans-serif; background:url(../img/bg.jpg) top center repeat; font-size:18px; }

.os-animation{
	opacity: 0;
}  
.os-animation.animated{
	opacity: 1;
}

img { border:none; }

.wrap { max-width:100%; overflow:hidden; }

.topMost { width:100%; background:url(../img/notesRight.jpg) center repeat; position:fixed; top:0; left:0; z-index:+9995; height:50px;-webkit-box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.75); box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.75);}
.logo { float:left; width:75%;}
.logo img { width:100%; max-width:683px;}
.rightIcon { float:right; padding:10px; }
.rightIcon a { font-size:2em; color:#032466; }
.BtT{ width:75px; height:75px; background:#eee; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); position:fixed; bottom: 10px; right:10px; color:#111; font-size:1.75em; border-radius:100px; padding:25px; z-index:+9999; }

.padded{ box-sizing: border-box; padding:1%;}
.centered { text-align:center;}
.bigText {font-size:1.5em;}

.container { width:100%; max-width:1400px; margin:0 auto; }
.big-container { width:100%; max-width:1600px; margin:0 auto; }

.homeFull { width:100%; height:100vh; position:relative; display:inline-block; margin-top:15px; }

.page-heading{ font-family: 'Shadows Into Light', cursive; }

.imgFull { width:100%; border:0; }
.imgFit { max-width:100%; border:0; }

.computerHome { width: 20%; position:absolute; top:10%; left:40%; z-index:+98; }
.computerHome img { width:100%; border:none; transform: rotate(7deg); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
.computerHome img:hover { transform:scale(1.2); }

.bannerHome { position:absolute; width:40%; top:50%; left:30%; z-index:+99; }
.bannerHome img { width:100%; border:none; }

.navHome { positioN:absolute; width:50%; bottom:15%; right:0%; z-index:+99; }

a.homeButton { display:block; width:22%; float:left; text-align:center; color:#152e5b; padding:25px; font-size:26px; font-family: 'Shadows Into Light', cursive; margin:0 10px; background:#eee; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); border-radius:100px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
a.homeButton:hover{ transform:scale(1.2); text-decoration:none; }

.doodleBottom { position:absolute; bottom:2.5%; left:2.5%; width:50%;  }
.doodleTop { position:absolute; top:2.5%; right:2.5%; width:50%;  }

.showOffFull { width: 95%; height:60vh; margin:0 auto; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); }
.notesRight { padding:2em 1em; background:url(../img/notesRight.jpg) top center repeat; -webkit-box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.5);}

.aboutFull { width:100%; position:relative; display:inline-block; }
.aboutFull .HomeTitle { width:100%; text-align:center; font-family: 'Shadows Into Light', cursive; color:#032466; font-size:100px; background:url(../img/titleBG1.png) center no-repeat; height:182px; padding:25px; }

.sketchMid { float:left; width:50%; }

.bioLeft { width:85%; height:auto; margin:7% 7%; background:#ccc;  transform: rotate(-2deg); -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); }

.bioRight{ width:85%; padding:1em; margin:7% 7%; color:#032466; background:url(../img/bioBG.png) center; transform: rotate(2deg); -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75); }
.bioRight h3 { font-family: 'Shadows Into Light', cursive; font-size:2em; line-height:1.45em; }
.bioRight h3 span { text-decoration:underline; }

.PortfolioTitle{ width:100%; font-size:120px; text-align:center; font-family: 'Shadows Into Light', cursive; color:#032466; height:250px; background:url(../img/titleBG2.png) center no-repeat; padding:25px; }

.outerThumb { position:relative; display:inline-block; width:100%; height:450px; overflow:hidden; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); }

.thumbOverlay { width:100%; height:100%; position:absolute; top: -100%; background:url(../img/notesRight.jpg); opacity:0.95; z-index:+99; transition: all .75s; }
.outerThumb:hover .thumbOverlay { top:0; transition: all .75s; }

.thumbTitle { width:100%; position:absolute; top: 40%; text-align:center; color:#032466;transition: all 1.25s; transform: scale(0.75); opacity:0; z-index:+999; font-size:22px; }
.thumbTitle h2 { font-family: 'Shadows Into Light', cursive; font-size:2.1em; }
.outerThumb:hover .thumbTitle { opacity:1; transform:none;}

.mainThumb { width:100%; height:100%; transition: all .5s; }
.outerThumb:hover .mainThumb{ transform: scale(1.2); }
#thumb1{ background:url(../img/thumbs/1.jpg) center; background-size:cover; }
#thumb2{ background:url(../img/thumbs/2.jpg) center; background-size:cover; }
#thumb3{ background:url(../img/thumbs/3.jpg) center; background-size:cover; }
#thumb4{ background:url(../img/thumbs/4.jpg) center; background-size:cover; }
#thumb5{ background:url(../img/thumbs/5.jpg) center; background-size:cover; }
#thumb6{ background:url(../img/thumbs/6.jpg) center; background-size:cover; }
#thumb7{ background:url(../img/thumbs/7.jpg) center; background-size:cover; }
#thumb8{ background:url(../img/thumbs/8.jpg) center; background-size:cover; }
#thumb9{ background:url(../img/thumbs/9.jpg) center; background-size:cover; }
#thumb10{ background:url(../img/thumbs/10.jpg) center; background-size:cover; }
#thumb11{ background:url(../img/thumbs/11.jpg) center; background-size:cover; }
#thumb12{ background:url(../img/thumbs/12.jpg) center; background-size:cover; }
#thumb13{ background:url(../img/thumbs/13.jpg) center; background-size:cover; }
#thumb14{ background:url(../img/thumbs/14.jpg) center; background-size:cover; }
#thumb15{ background:url(../img/thumbs/15.jpg) center; background-size:cover; }
#thumb16{ background:url(../img/thumbs/16.jpg) center; background-size:cover; }
#thumb17{ background:url(../img/thumbs/17.jpg) center; background-size:cover; }
#thumb18{ background:url(../img/thumbs/18.jpg) center; background-size:cover; }
#thumb19{ background:url(../img/thumbs/19.jpg) center; background-size:cover; }
#thumb20{ background:url(../img/thumbs/20.jpg) center; background-size:cover; }

.logoHolder { overflow:hidden; text-align:center; width:100%; }
.logoHolder img { width:75%; max-width:500px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
.logoHolder img:hover { -ms-transform: scale(1.25); /* IE 9 */   -webkit-transform: scale(1.25); /* Safari */   transform: scale(1.25); }

.ProjectTitle{ width:100%; font-size:80px; text-align:center; font-family: 'Shadows Into Light', cursive; color:#032466; height:250px; background:url(../img/titleBG2.png) center no-repeat; padding:55px; }
.ProjectTitle a { font-size:25px; font-family: 'Montserrat', sans-serif; background:#0669b2; border:5px solid #3a8cca; color:#fff; padding:10px; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); transition: all .5s;}
.ProjectTitle a:hover {transition: all .5s; background:#df0024; border:5px solid #e72e4c; text-decoration:none; }

.banner { width:100%; height:250px;}
	#banner1 { background:url(../img/Websites/1/banner.jpg) center fixed; background-size:cover;}
	#banner2 { background:url(../img/Websites/2/banner.jpg) center fixed; background-size:cover;}
	#banner3 { background:url(../img/Websites/3/banner.jpg) center fixed; background-size:cover;}
	#banner4 { background:url(../img/Websites/4/banner.jpg) center fixed; background-size:cover;}
	#banner5 { background:url(../img/Websites/5/banner.jpg) center fixed; background-size:cover;}
	#banner6 { background:url(../img/Websites/6/banner.jpg) center fixed; background-size:cover;}
	#banner7 { background:url(../img/Websites/7/banner.jpg) center fixed; background-size:cover;}
	#banner8 { background:url(../img/Websites/8/banner.jpg) center fixed; background-size:cover;}
	#banner9 { background:url(../img/Websites/9/banner.jpg) center fixed; background-size:cover;}
	#banner10 { background:url(../img/Websites/10/banner.jpg) center fixed; background-size:cover;}
	#banner11 { background:url(../img/Websites/11/banner.jpg) center fixed; background-size:cover;}
	#banner12 { background:url(../img/Websites/12/banner.jpg) center fixed; background-size:cover;}
	#banner13 { background:url(../img/Websites/13/banner.jpg) center fixed; background-size:cover;}
	#banner14 { background:url(../img/Websites/14/banner.jpg) center fixed; background-size:cover;}

.slipp { max-height:410px;}	

.body-text { font-size:21px; }

a.backLink { color:#032466; text-decoration:none;font-family: 'Shadows Into Light', cursive; font-size:1.5em; }
a.backLink .fas { font-size:1.5em; }
a.backLink:hover { color:#df0024; text-decoration:none; }

.contactBG { padding:1em; height:500px; background:url(../img/contact.png) center no-repeat; background-size:cover;  }
.contactRight { padding:3.5em 2em; font-size:25px; width:50%; float:right; }
.contactRight a { font-family: 'Shadows Into Light', cursive; font-size:1.75em; }

.footer { padding:0.5em 1em; font-family: 'Shadows Into Light', cursive; font-size:1.5em; width:100%; background:url(../img/notesRight.jpg) center; text-align:center; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
	.homeFull { width:100%; height:100vh; position:relative; display:inline-block; margin-top:15px; }

	.computerHome { width: 60%; position:absolute; top:15%; left:20%; z-index:+98; display:block; text-align:center; }
	.computerHome img { max-width:400px; transform: rotate(7deg); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
	.computerHome img:hover { transform:scale(1.2); }

	.bannerHome { position:absolute; width:90%; top:55%; left:5%; z-index:+99; text-align:center; }
	.bannerHome img { max-width:450px; }

	.doodleBottom { position:absolute; bottom:2.5%; left:2.5%; width:100%; }
	.doodleTop { position:absolute; top:2.5%; right:2.5%; width:100%;  }
	
	.navHome { width:100%; bottom:12%; left:0%; text-align:center; z-index:+99; }
	a.homeButton { box-sizing:border-box; padding:15px;  margin:2%; width:46%; background:#eee; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); border-radius:100px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
	a.homeButton:hover{ transform:scale(1.2); text-decoration:none; }

	.aboutFull { width:100%; position:relative; display:inline-block; }
	.aboutFull .HomeTitle { width:100%; text-align:center; font-family: 'Shadows Into Light', cursive; color:#032466; font-size:60px; background:url(../img/titleBG1.png) center no-repeat; background-size:cover; height:auto; padding:25px; }
	
	.sketchMid { float:none; width:100%; }
	
	.PortfolioTitle{ width:100%; font-size:60px; text-align:center; font-family: 'Shadows Into Light', cursive; color:#032466; height:auto; background:url(../img/titleBG2.png) center no-repeat; background-size:cover; padding:45px 5px; line-height:1.2em; }
	
	.outerThumb { position:relative; display:inline-block; width:100%; height:300px; overflow:hidden; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); }

	.thumbOverlay { width:100%; height:30%; position:absolute; top: 70%; background:url(../img/notesRight.jpg); opacity:0.95; z-index:+99; transition: all .75s; }
	.outerThumb:hover .thumbOverlay { top:70%; transition: all .75s; }

	.thumbTitle { width:100%; position:absolute; top: 73%; text-align:center; color:#032466;transition: all 1.25s; transform:none; opacity:1; z-index:+999; font-size:14px; line-height:1.3em; }
	.thumbTitle h2 { font-family: 'Shadows Into Light', cursive; font-size:1.75em; }
	.outerThumb:hover .thumbTitle { opacity:1; transform:none;}

	.mainThumb { width:100%; height:100%; transition: all .5s; }

	.contactBG { padding:1em; height:500px; background:url(../img/contact2.png) center no-repeat; background-size:cover;  }
	.contactRight { padding:3.5em 2em; font-size:25px; width:100%; float:none; }
	.contactRight a { font-family: 'Shadows Into Light', cursive; font-size:1.75em; }
	
	.ProjectTitle{ font-size:50px; padding:55px 25px; }
}


@media only screen and (max-width : 767px) {
	.homeFull { width:100%; height:100vh; position:relative; display:inline-block; margin-top:15px; }

	.computerHome { width: 80%; text-align:center; position:absolute; top:10%; left:10%; z-index:+98; }
	.computerHome img { max-width:400px; transform: rotate(7deg); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
	.computerHome img:hover { transform:scale(1.2); }

	.bannerHome { position:absolute; width:95%; text-align:center; top:55%; left:2.5%; z-index:+99; }
	.bannerHome img { width:100%; max-width:450px; border:none; }

	.doodleBottom { display:none;  }
	.doodleTop { display:none;  }
	
	.navHome { width:90%; bottom:10%; left:5%; text-align:center; z-index:+99; }
	a.homeButton { width:100%; padding:15px; font-size:18px;  margin:5px; background:#eee; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); border-radius:100px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
	a.homeButton:hover{ transform:scale(1.2); text-decoration:none; }

	.aboutFull { width:100%; position:relative; display:inline-block; }
	.aboutFull .HomeTitle { width:100%; text-align:center; font-family: 'Shadows Into Light', cursive; color:#032466; font-size:60px; background:url(../img/titleBG1.png) center no-repeat; background-size:cover; height:auto; padding:25px; }
	
	.sketchMid { float:none; width:100%; }

	.PortfolioTitle{ width:100%; font-size:60px; text-align:center; font-family: 'Shadows Into Light', cursive; color:#032466; height:auto; background:url(../img/titleBG2.png) center no-repeat; background-size:cover; padding:45px 5px; line-height:1.2em; }
	
	.padded { text-align:center; }
	.outerThumb { position:relative; display:inline-block; margin:20px auto; width:90%; height:350px; overflow:hidden; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); }

	.thumbOverlay { width:100%; height:50%; position:absolute; top:auto; bottom:0px; background:url(../img/notesRight.jpg); opacity:0.95; z-index:+99; transition: all .75s; }

	.thumbTitle { width:100%; position:absolute; top:auto; bottom:5%; text-align:center; color:#032466; transition: all 1.25s; transform: none; z-index:+999; opacity:1; font-size:22px; }
	.thumbTitle h2 { font-family: 'Shadows Into Light', cursive; font-size:2.1em; }

	.mainThumb { width:100%; height:100%; transition: all .5s; }
	.outerThumb:hover .mainThumb{ transform: scale(1.2); }

	.ProjectTitle{ width:100%; font-size:60px; text-align:center; font-family: 'Shadows Into Light', cursive; color:#032466; height:auto; background:url(../img/titleBG2.png) center no-repeat; background-size:cover; padding:25px 5px; line-height:1.2em; }
	.ProjectTitle a { font-size:25px; font-family: 'Montserrat', sans-serif; background:#0669b2; border:5px solid #3a8cca; color:#fff; padding:10px; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); transition: all .5s;}
	.ProjectTitle a:hover {transition: all .5s; background:#df0024; border:5px solid #e72e4c; text-decoration:none; }

	.contactBG { padding:1em; height:500px; background:url(../img/contact2.png) center no-repeat; background-size:cover;  }
	.contactRight { padding:2em 1em; font-size:22px; width:100%; float:none; }
	.contactRight a { font-family: 'Shadows Into Light', cursive; font-size:1.75em; }
	
	.ProjectTitle{ font-size:30px; padding:55px 15px; line-height:2.1em; }
}

/* Smartphones (portrait) ----------- */
@media only screen and (min-width : 320px) and (max-width : 767px) {
	.bannerHome { top:35%; }
}