article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/*font-family: 'Philosopher', sans-serif;*/
/*#BED73D;*/
/*color:#BED73D;*/
*{
	margin:0;
	padding:0;
}
*:focus {
    outline: none;
}
a, a:hover, a:active, a:visited {
	text-decoration:none;
	display:block;
	outline: none !important;
}
body{
	margin: 0;
	font-family:'Philosopher', sans-serif;
	background:gainsboro;
}
p{
	color:white;
	font-family: Arial,sans-serif;
	line-height: 30px;
}
.main-wrapper{
	max-width:100vw;
	margin:0 auto;
}
.body-wpapper{
	max-width:1280px;
	margin: 0px auto;
	background-color:pink;
}
.wrapper{
	max-width:1280px;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-end;
	align-items: flex-start;
	align-content: space-around;
}
#section1{
	background:linear-gradient(white, black 55%);
	min-height:100vh;
	padding-bottom:50px;
	padding-top: 40px;
	z-index:100;
}
.title{
	background:black;
	position:relative;
	margin: 0;
}
#scroll {
	color:rgba(255,255,255,0.5);
	font-size: 1.5em;
	text-align:center;
	position:relative;
	top:0px;
	left:50%;
	transition: all 0.2s;
}
#scroll:hover {
	color:rgba(255,255,255,0.9);
	padding-top:5px;
}
h1, h2{
	color:white;
	text-align: center;
	padding:2px;
	font-family:'Philosopher', sans-serif;
	letter-spacing: 1px;
}
h2{
	font-family:'Philosopher', sans-serif;
	font-size:1.3em;
	padding-bottom: 3%;
}
h3, h4{
	color:black;
	text-align: center;
	padding-bottom: 10px;
	font-size: 1.2em;
}
h3{
	text-transform: uppercase;

}
h4{
	letter-spacing: 2px;
}
h6{
	font-size:1.1em;
	text-align: center;
}
h4.subtext{
	font-size:1em;
	font-family: sans-serif;
	line-height: 20px;
}

.nav{
	position:fixed;
	top:0px;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	min-width: 100vw;
	background:rgba(0,0,0,0.7);
	z-index: 200;
}
.nav ul {
	display: flex;
	flex:1;
	align-items:center;
	justify-content: space-around;
}
.nav li{
	list-style:none;
	display:flex;
	flex-basis:auto;
	font-size: 1.1em;
	text-align: center;
	padding:10px 0;

}
.nav a{
	color:orange;
	transition: all 0.2s;
}
.nav a:hover{
	color:white;
}
#linkedin a:hover{
	color:rgb(0,119,181);
}
.ball{
	max-width:40%;
	margin:10px auto 20px;
	padding-top:2%;
}
.ball img{
	width:100%;
}
/*carousel
/* arrow color */
.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  border-radius:50%;
  background: #333;
  transition: all 0.2s;
}
.flickity-prev-next-button:hover {
  background:white;
}
.flickity-prev-next-button .arrow {
  fill: orange;
}
.flickity-prev-next-button.no-svg {
  color:orange``;
}
.flickity-page-dots{
	margin-bottom:-15px;
}
.gallery img{
	padding-right: 50px;
}
.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
  background:orange;
}
.carousel {
  background:gainsboro;
  padding:20px 10px;
  min-width:90%;
  margin-bottom: 50px;
}
.flickity-viewport {
  transition: all 0.3s;
}
/*Section 2, web gallery, 3 posts*/
#section2{
	padding:20px auto;
	max-width: 1280px;
	margin:0px auto;
}
#section3 h3, #section3 h4{
	color:white;
}
.section-title{
	margin:10px auto;
	padding:1% 0;
}

h5{
	font-weight: 800;
	font-size: 1em;
	text-transform: uppercase;
	text-align: left;
	padding-bottom: 10px;
	font-family: sans-serif;
}
/* Section 2, Web portfolio */
.web-gallery{
	max-width: 1280px;
	margin:0px auto;
	padding-bottom: 50px;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;

}
.web-item{
	max-width:300px;
	background-color: white;
	padding:20px;
	margin:30px;
}
h4.web-title{
	color:black;
	font-weight: 800;
	font-size: 1.1em;
	min-height: 50px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 5px 10px;
}
.web-item p{
	color: black;
	text-align: center;
	margin:10px ;
}
.web-item img{
	max-width:100%;
	padding: 0 30px;
	margin:20px 0;
}
.block{
	width:40px;
	height: 30px;
	background-color: orange;
	float:left;
	margin-left:-20px;
}
.view-site {
	width:120px;
	height: 30px;
	padding:5px 10px;
	background-color: orange;
	float:right;
	margin-right:-20px;
	display:block;
	color:white;
	font-size: 0.8em;
	text-transform: uppercase;
	transition-duration:0.2s;
}
.block:hover, .view-site:hover{
	color:white;
	background:#BED73D;
}
span.highlight{
	color:darkorange;
	text-align: left;
	font-size: 0.9em;
	padding-bottom: 10px;
	letter-spacing: 1px;
}
.dot{
	color:orange;
	font-size:2em;
}
/*Section 3, About Me*/
#section3{
	background: black;
	max-width: 1280px
	padding-top: 50px;
	margin: 0 auto;
}
#section3 .section-title{
	padding-top:50px;
}
.text-container p{
	color:white;
	text-align: left;
	font-family: Arial,sans-serif;
	font-weight: normal;
	line-height: 30px;
}
.text-container{
	max-width:325px;
}
#right{
	padding-right:20px;
}
.photo{
	width: 300px;
	height: 300px;
}
.photo img {
	width:100%;
	border-radius: 50%;
	padding:10px;
}
.middle-text{
	max-width: 67%;
	text-align:center;
	padding:20px;
	color:white; 
}
.middle-text a:visited{
	color:silver;
}
.middle-text a:hover{
	color:#BED73D;
}
.middle-text a{
	color:white;
}
em {
	font-size: 1.1em;
}
.text-wrapper{
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	flex-basis:auto;
	justify-content:space-around;
	align-items: flex-start;
	padding: 0 20px;
}
.hard-skills-wrapper{
	max-width: 100%;
	background-color: black;
	padding: 5%;
}
.steps-wrapper{
	max-width: 100%;
	padding: 0;
	margin-bottom: 20px;
}
.hard-skills{
	max-width: 700px;
	background-color: black;
	margin:10px auto;
}
.steps{
	max-width: 800px;
	padding:0 5px 0 0;
	margin:0 auto;
}
.hard-skills img{
	max-width: 100%;
	text-align: center;
} 
.web-skills{
	background: black;
}
.web-skills h3{
	color:white;
}
.steps img{
	max-width: 100%;
}
#skills h3{
	margin-top: 30px;
}
/*Section Testimonials*/
#testimonials{
	padding-top:20px;
}
.testim-container{
	max-width: 1380px;
	margin: 0px auto;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	align-content: space-between;
}
.testim-item{
	max-width:330px;
	background-color: white;
	padding:20px;
	margin:40px;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

}
.testim-title{
	text-align: center;
	font-weight: 600;
	line-height:80%;
	padding:0px;
	position: relative;
	top:-20px;
}
.testim-item p{
	color: black;
	background-color: white;
	margin: 0px;
	text-align: center;
}
.testim-item img{
	max-width: 110px;
	border-radius: 50%;
	border:4px solid #BED73D;
	position: relative;
	top: -60px;
	left:30%;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}
/*Section 4, Contact Form*/
.contact-form{
	padding:25px;
	margin: 0;
}
form{
	max-width: 450px;
	margin:0 auto 50px;
}
label{
	display:block;
	margin-bottom: 20px;
}
.label{
	display:block;
}
.contact-info-group label{
	width:50%;
	float: left;
}
label:nth-child(1){
	padding-right: 5px;
}
label:nth-child(2){
	padding-left: 5px;
}
input , textarea{
	border:3px solid #BED73D;
	width:100%;
	padding:5px;
}
input:hover , textarea:hover, label:hover{
	border-color:  orange;
	outline: none;
}
textarea{
	min-height:10em;
}
[type="submit"]{
	background:#BED73D;
	color:white;
	border:none;
	font-size: 1.1em;
	text-transform: uppercase;
	width:50%;
	transition: all 0.2s;
	box-shadow: 0 1px 20px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);	
}
[type="submit"]:hover{
	background:orange;
}
.submit-wrap{
	text-align:right;
}
/*Download Resume Button*/
.download{
	max-width:250px;
	border:3px solid orange;
	margin: 0 auto;
	text-align:center;
	padding:10px;
	text-transform: uppercase;
	margin:0px 22% 0px 0px;
	color:rgba(255,255,255,0.6);
	float:right;
}
.download a:hover{
	color:rgba(255,255,255,1);
}
.download a:active{
	color:rgba(255,255,255,0.8);
}
#down{
	color:white;
}
#down:hover{
	color:orange;
}
.download a:visited{
	color:rgba(255,255,255,0.8);
}
[download="resume"]{
	color:rgba(255,255,255,0.6);
}
section.resume{
	background:black;
	max-width:100%;
	min-height: 150px;
	padding: 50px;
}
/*Footer*/
.pattern {
	background-image: url('../images/bg.jpg');
	height:200px;
}
.copyright{
	color:black;
	font-size: 0.8em;
	text-align:center;
	margin-top:-60px;
}
.copywright p{
	line-height:5px;
}
	
	@media (max-width: 1136px){
	.middle-text{
		max-width:69%;
	}
/* Portrait tablet and small desktops */
	@media (max-width: 980px) {
			.wrapper{
				justify-content:center;
			}
			#section1{
				background:linear-gradient(white, black 30%);
				padding-bottom:20px;
			}
			}
			.text-container{
				max-width:100%;
				padding-top:20px;
			}
			.text-wrapper{
					width:100%;
					justify-content:center;
			}
			.middle-text{
				max-width: 100%;
				text-align:left;
			}
			#right{
				padding-right: 0;
				padding-top: 20px;
			}
			.ball{
				max-width:50%;
				margin: 10px auto;
			}
			.download{
				margin: 20px 20px 0px 0px;
				float:left;
				border:2px solid orange;
			}
			section.resume{
				min-width: 100px;
				padding: 0 20px;
			}
			#section2,#section3{
				margin-top:0;
				padding-top: 0px;
			}
		}
		/* Landscape phone to portrait tablet */
		@media (max-width: 800px){
			.wrapper{
				width:100vw;
			}
			.nav{ 
				top:90vh;
				height:10vh; 
				background:rgba(0,0,0,1);
			}
			h1{padding-top:10px;}
			.title{
				padding-top: 10px;
			}
			#section1{
				padding-bottom:10px;
				margin-top: 0px;
				padding-top: 0px;
			}
			.ball{
				margin:10px auto;
				max-width:60%;
			}
			.web-gallery, .web-gallery2{
				padding:10px;
				align-items: center;
				flex-direction: row;
				margin: 0 auto;
			}
			.side-text, .side-image{
				flex-basis: 100%;
			}
			#section3{
				margin-top: 30px;
			}
			.testim-item{
				max-width:100%;
				padding:20px;
				margin:50px;
			}
			.testim-item img{
				left:38%;
			}
		}
		/* Landscape phones and down */
		@media (max-width: 520px) {
			.nav li{
				font-size: 1em;
			}
			#section1{
				height:100%;
				padding-top: 10px;
			}
			.ball{
				max-width:90%;
			}
			.title{
				padding-top: 50px;
			}
			.steps-wrapper{
				max-width: 100%;

			}
			.testim-item{
				margin:30px auto;
			}
			.testim-item img{
				left:35%;
			}
		}