body {
	margin:0;
	padding: 0px;
	font-family: 'Open Sans' , sans-serif;
}

.name{
	position:absolute;
	padding:20px -20px;
	z-index:9002;
	width:70%;
	height:auto;
	font-size: 70pt;
	color:white;
	border-style: solid;
	border-color: white;
	border-width:5px;
	border-radius: 5px;
	left: 50%;
    margin-right: -50%;
    top:20%;
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 14in) {
    .name {
	font-size: 50pt;
	margin-top:100px;
    }
}
@media screen and (max-width:6in){
	.name{
		width:95%;
		font-size: 42pt;
		padding:0px;
	}
}
.slideshow {
	position: relative;
	width:100%;
	height:350px;
	text-align: center;
	background-color: white;
	z-index: 9001;
	padding-bottom: -10px;
	margin-bottom: -10px;
	padding-right: 0px;
	padding-left: 0px;
	margin-left: 0px;
}
.slideshow img{
	width: 1524px;
	height:350px;
}

.slide{
	position: absolute;
	width:100%;
	height:350px;
	overflow: hidden;
	display:block;
	object-fit: contain;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s ease 0.1s;
}
#s1{
	background:url("images/slideshow/1.jpg");
	background-size:100% 100%;
}
#s2{
	background:url("images/slideshow/2.jpg");
	background-size:100% 100%;
}
#s3{
	background:url("images/slideshow/3.jpg");
	background-size:100% 100%;
}
#s4{
	background:url("images/slideshow/4.jpg");
	background-size:100% 100%;
}
#s5{
	background:url("images/slideshow/5.jpg");
	background-size:100% 100%;
}

@-webkit-keyframes fade {
  from {opacity: .6} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .6} 
  to {opacity: 1}
}

.navtop {
	text-align: center;
	position:fixed;
	width:100%;
	height:51px;
	background-color: rgba(0,0,0,0.5);
	z-index: 9000;
	overflow: hidden;
}

.nav{
	position: absolute;
	width:100%;
	height:51px;
	background-color: rgba(0,0,0,0.5);
	bottom:0px;
	z-index:9000;
}
ul{
	display: inline-block;
	text-align: center;
	list-style-type: none;
	margin:0;
	margin-bottom: -1px;
	padding:0;
	overflow:hidden;
}
li{
	float:left;
}
li a{
	border-width: 0px;
	display:block;
	text-align: center;
	padding:15px 16px;
	color:#FFF;
	text-decoration: none;
}
@media screen and (max-width:422px){
	li a{
		padding:15px 8px;
	}
}
.active {
	box-shadow:0px -4px 0px white inset;
}
li a:hover:not(.active){
	background-color: rgba(255,255,255,0.5);
	color:black;
}

.intro{
	margin-top: -75pt;
	display: block;
	background-color: #ecf0f1;
	padding-top:0.8em;
	padding-bottom: 1.5em;
}
.hi{
	font-family: 'Fascinate Inline', cursive;
	font-size: 72pt;
	line-height: 150px;
	text-align:center;
	background-color:transparent;
}
.intro img{
	display:block;
	position:relative;
	margin:-95px auto;
	margin-bottom: -20px;
	width:80%;
	overflow: hidden;
	height:5rem;
}
.hitext{
    font-family: 'Philosopher', sans-serif;
	font-size: 26px;
	line-height: 31px;
	padding-right: 10%;
	padding-left: 10%;
	text-align: center;
	padding-bottom: 20px;
}
@media screen and (max-width: 84em) {
	.hitext{
		padding-right:2rem;
		padding-left:2rem;
	}
}

.mid{
	margin-top: -28px;
	width:100%;
	height:400px;

}

.mid img{
	height:400px;
	width:100%;
	overflow:hidden;
}

.vectors img{
	position: absolute;
	width:200px;
	height:auto;
}
.vectors #img1{
	float:left;
	padding-left: 110px;
}
.vectors #img2{
	position: relative;
	display: block;
	width:200px;
	margin:-350px auto;
}
.vectors #img3{
	float:right;
	margin-top: 30px;
	right:110px;
}
@media screen and (max-width: 72em) and (min-width: 42.01em){
	.vectors #img1{
	float:left;
	padding-left: 30px;
}
.vectors #img2{
	position: relative;
	display: block;
	width:200px;
	margin:-350px auto;
}
.vectors #img3{
	float:right;
	margin-top: 30px;
	right:30px;
}
}
@media screen and (max-width: 30em){
	.vectors #img1{
		display:none;
	}
	.vectors #img3{
		display:none;
	}
	.vectors #img2{
		display: block;
		width:200px;
		margin:-350px auto;

	}
}
@media screen and (max-width: 42em) and (min-width:30.01em){
	.vectors #img2{
		display:none;
	}
	.vectors #img1{
		margin-top:-350px;
		padding-left: 30px;
	}
	.vectors #img3{
		margin-top:-350px;
		right:30px;
	}
}

.add{
	background-color: #03A9F4;
	width:100%;
	min-height: 400px;
}
.more{
	position: absolute;
	font-family: 'Abril Fatface', cursive;
	color: white;
	width:100%;
	font-size: 58px;
	margin-top: 0px;
	padding-top: 20px;
	text-align: center;
}
@media screen and (max-width: 27em){
	.more{
	font-size: 42px;
	margin-top: 10px;
	padding-top: 20px;
}
	.core img{
		padding-top: 180px;
		height:auto;
		width:150%;
		float:right;
		object-fit: cover;
		overflow: hidden;
	}
	.feedback{
		padding-top: 180px;
	}
}
.box{
	width:48em;
	margin:0 auto;
}
.box p{
	display: block;
	position: absolute;
	margin-top: 200px;
	width:48rem;
	text-align: center;
	background-color: white;
	margin:200px auto;
	font-size: 28px;
	box-shadow: 5px 5px 5px #000;
}
@media screen and (max-width: 49.2em) and (min-width: 40.21em){
.box{
	width:100%;
}
.box p{
	width:100%;
}
}
@media screen and (max-width: 24em){
	.core img{padding-top: 10px;}
	.feedback{padding-top: 20px;}
	.box p{
		width: 100%;
		font-size: 20px;
		line-height: 24px;
	}
}
@media screen and (max-width: 32em) and (min-width: 24.01em){
		.box{
			margin-top: -30px;
			padding-top: -20px;
	width:100%;
	}
	.box p{
		width: 100%;
		font-size: 23px;
	}
	.core img{
		padding-top: 50px;
		height:auto;
		width:150%;
		float:right;
		object-fit: cover;
		overflow: hidden;
	}		
	.feedback{padding-top:50px; margin-top: 50px;}
}
@media screen and (max-width: 40.2em) and (min-width: 32.01em){
	.core img{
		padding-top: 10px;
		height:auto;
		width:150%;
		float:right;
		object-fit: cover;
		overflow: hidden;
	}
	.box{
	width:100%;
	}
	.box p{
		width: 100%;
		font-size: 25px;
	}
	.feedback{padding-top:120px;}
}

.core{
	width:100%;
	height:auto;
	min-height: 350px;
}
.core img{
	height:100%;
}
.feedback{
	display: block;
	background-color: #222;
	width:100%;
	margin-top: -10px;
	min-height:400px;
}
.feedback p{
	display: block;
	position: absolute;
	width:100%;
	color: white;
	font-family: 'Open Sans';
	font-weight: lighter;
	font-size: 36px;
	margin-top: 20px;
	text-align: center;
}
#form{
	display: block;
	margin-top:50px;
	text-align:center;
}
input[type=text],input[type=textarea]{
	width:3in;
	padding: 12px 5px;
	margin:8px 0;
	box-sizing:border-box;
	border:none;
	border-bottom: 2px solid white;
	background-color: rgba(0,0,0,0);
	outline: none;
	color: white;
}
input[type=textarea]{
	height:70px;
	margin-bottom:  0px;

}
input[type=text]:focus,input[type=textarea]:focus{
	box-shadow: inset 0 0 5px #FFF;
}
input[type=button]{
	color: white;
	margin-top:30px;
	display: block;
	margin-left:auto;
	margin-right: auto;
	text-align: center;
	font-size:28px;
	padding:5px 10px;
	background-color: rgba(0,0,0,0);
	border:2px solid white;  
	border-radius: 5px;  
	-webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
input[type=button]:hover{
	box-shadow: inset 0 0 10px #FFF;
}

footer{
	position: absolute;
	background-color: #34495e;
	height:50px;
	width: 100%;
}
footer > p {
	font-family: Open Sans;
	display: block;
	margin-top: 8px;
	position:absolute;
	font-size: 24px;
	width:100%;
	color:white;
	text-align: center;
}
.about{
	padding-top: 50px;
	background-color: #ecf0f1;
	margin-bottom: 0px;
	height:650px;
}
#laptop{
	position: ;
	display: block;
	float:left;
	left:30px;
	width:45em;
	height: 20px;
	padding-top:100px;
}
#board{
	position: absolute;
	display: block;
	float:right;
	right:30px;
	width:45em;
	height:auto;
}
.boardtext{
	position:absolute;
	display: block;
	float:right;
	right:60px;
	width:36em;
	text-align: center;
	font-size: 18px;
}
.anintro{
	font-family: 'Allura', cursive;
	font-size: 60px;
	margin-bottom: -10px;
}
.boardtext img{
	width:35em;
	height:auto;
	right:40px;
	margin-bottom: -10px;
}
@media screen and (max-width:95em) and (min-width:45em){
	.about{
		padding:0px 30px;
		height: 1100px;
	}
	#laptop{
		margin-top: -70px;
		width:40em;
		height: auto;
		float:none;
		display:block;
		position:static;
		margin-right: auto;
		margin-left: auto;
	}
	#board{
		display:block;
		margin-top: 10px;
		width:40em;
		height: auto;
		float:none;
		position: static;
		margin-right: auto;
		margin-left: auto;
	}
	.boardtext{
		margin-top:-640px;
		display: block;
		width:32em;
		text-align: center;
		height: auto;
		position: relative;
		float:none;
		font-size: 18px;
		right:0px;
		margin-left: auto;
		margin-right: auto;
	}
	.boardtext img{
		width:100%;
	}
}
@media screen and (max-width:44.99em) and (min-width: 35em){
	.about{
		padding:0px 30px;
		height: 900px;
	}
	#laptop{
		margin-top: -70px;
		width:32em;
		height: auto;
		float:none;
		display:block;
		position:static;
		margin-right: auto;
		margin-left: auto;
	}
	#board{
		display:block;
		margin-top: 10px;
		width:32em;
		height: auto;
		float:none;
		position: static;
		margin-right: auto;
		margin-left: auto;
	}
	.anintro{font-size: 42px;
		margin-top: 54px;
		margin-bottom: -10px;
	}
	.boardtext{
		margin-top:-520px;
		display: block;
		width:28em;
		text-align: center;
		height: auto;
		position: relative;
		float:none;
		font-size: 16px;
		right:0px;
		margin-left: auto;
		margin-right: auto;
	}
	.boardtext img{
		width:100%;
	}
}
@media screen and (max-width:34.99em) and (min-width: 29em){
	.about{
		padding:0px 30px;
		height: 700px;
	}
	#laptop{
		margin-top: -70px;
		width:24em;
		height: auto;
		float:none;
		display:block;
		position:static;
		margin-right: auto;
		margin-left: auto;
	}
	#board{
		display:block;
		margin-top: 10px;
		width:24em;
		height: auto;
		float:none;
		position: static;
		margin-right: auto;
		margin-left: auto;
	}
	.anintro{font-size: 32px;
		margin-top: 54px;
		margin-bottom: -20px;
	}
	.boardtext{
		margin-top:-404px;
		display: block;
		width:27em;
		text-align: center;
		height: auto;
		position: relative;
		float:none;
		font-size: 13px;
		right:0px;
		margin-left: auto;
		margin-right: auto;
	}
	.boardtext img{
		width:100%;
	}
}
@media screen and (max-width:28.99em){
	.about{
		padding:0px 10px;
		height: 600px;
	}
	#laptop{
		margin-top: -70px;
		width:20em;
		height: auto;
		float:none;
		display:block;
		position:static;
		margin-right: auto;
		margin-left: auto;
	}
	#board{
		display:block;
		margin-top: 10px;
		width:20em;
		height: auto;
		float:none;
		position: static;
		margin-right: auto;
		margin-left: auto;
	}
	.anintro{font-size: 28px;
		margin-top: 54px;
		margin-bottom: -20px;
	}
	.boardtext{
		margin-top:-346px;
		display: block;
		width:27em;
		text-align: center;
		height: auto;
		position: relative;
		float:none;
		font-size: 11px;
		right:0px;
		margin-left: auto;
		margin-right: auto;
	}
	.boardtext img{
		width:100%;
	}
}

.cv{
	background-color: #ecf0f1;
	width:100%;
	min-height:500px;
	padding-top: 50px;
}
.cv img{
	position:relative;
	display: block;
	width:1000px;
	height:auto;
	margin-right: auto;
	margin-left: auto;
}
.cv button{
	margin-top:30px;
	display: block;
	margin-bottom: 30px;
	margin-left:auto;
	margin-right: auto;
	text-align: center;
	font-size:28px;
	padding:16px 32px;
	background-color: rgba(0,0,0,0);
	border:2px solid;  
	border-radius: 5px;  
	-webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.cv button:hover{
	box-shadow: inset 0 0 10px #FF6600;
}
.cv button a{
	color:black;
	text-decoration: none;
}
@media screen and (max-width:1020px){
	.cv img{
		width:97%;
		height:auto;
	}
}

.skillcon{
	overflow: hidden;
	text-align: justify;
	width:100%;
	min-height: 300px;
	height:auto;
	padding-top: 5px;
	padding-bottom: 50px;
	text-align: center;
	box-shadow: 10px 0px 50px 10px;
}

@media screen and (max-width: 1495px) and (min-width: 1235px){
	#thing{
		width:80%;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}
}
@media screen and (max-width: 1495px) and (min-width: 835px){
	#thing2{
		width:60%;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;	
	}
}
@media screen and (max-width: 525px){
	#thing2{width:320px;
		height:auto;
		margin-left: auto;
		margin-right: auto;
		object-fit: fill;
		overflow: hidden;}
	#thing2 img{
		width:325px;
		height:215px;
		margin-top:-192px;
	}
	#thing2 p{
		font-size: 22px;
		width:325px;
		text-align: center;
	}
	#thing2 div{
		height: 215px;
	}
}
.skillcon h1{
	color:white;
	font-size: 48px;
	font-weight: 900;
}
.bgimg{
	margin-top:-100;
	width:100%;
	z-index: 0;
}
.icons{display: inline-block;
	padding: 0px;
	margin-right: -2px;
	margin-left: -3px;
	width:247px;
	height:247px;
}
.icons p{
	padding-top: -20px;
	font-size: 26px;
}
.icons img{
	display: block;
	margin-top:-232px;
	-webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}
.icons img:hover{
	opacity:0;
	transition: all 0.2s ease-out;
}
.contact{
	padding-top: 50px;
	margin-bottom: -30px;
	width:100%;
	text-align: justify;
    text-justify: distribute-all-lines;
	background-color: #ecf0f1;
}
.contactme{
	display: block;
	margin-right: auto;
	margin-left: auto;
	width:10in;
	margin-top:-50px;
	padding-bottom: 2px;
	background-color: #c0392b;
	text-align: center;
	box-shadow: 2px 2px 5px;
}
.contactme p{
	text-align: center;
	color:white;
	font-size: 26px;
}
@media screen and (max-width: 61.2em){
	.contactme{
		width:100%;
		text-align: center;
		margin-top: -70px;
	}
	.contactme p{
		display: block;
		width:95%;
		padding-top: 10px;
		margin-right: auto;
		margin-left: auto;
	}
}
.bubble{
	display: inline-block;
	margin: 50px;
	width:300px;
	height:300px;
	border-radius: 100%;
	box-shadow: 2px 2px 5px;
}
@media screen and (max-width: 800px){
.bubble{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
}
.bubble p{
	color: white;
	font-size:32px;
	font-weight: 600;
	text-align: center;
	padding-top:40px;
}
.bubble img{
	display: block;
	text-align: center;
	width:70px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	padding-top:30px;
}
.bubble img:hover{
	display:block;
	text-align: center;
	width:80px;
	height: auto;
	padding-top: 25px;
	margin-left: auto;
	margin-right: auto;
	transition-duration: 0.3s;
}