body {
	background-color: #141414;
	margin: 0px;
	font-family: 'KumbhSans-Light', sans-serif;

}

p {
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
	line-height: 40px;
}

b {
	font-family: 'KumbhSans-Bold', sans-serif;
	font-weight: 700;
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
	line-height: 40px;
}


h1, h2, h3, h4, h5, h6 {
		
	font-family: 'Aleo-Bold';
    src: url('Aleo-Bold-webfont.eot');
    src: url('Aleo-Bold-webfont.eot?iefix') format('eot'),
         url('Aleo-Bold-webfont.woff') format('woff'),
         url('Aleo-Bold-webfont.ttf') format('truetype'),
         url('Aleo-Bold-webfont.svg#webfont') format('svg');
		 font-style: normal;
	font-weight: normal;
}

@font-face {
  font-family: 'Aleo-Bold';
  src: url('Aleo-Bold-webfont.eot'); /* IE9 Compat Modes */
  src: url('Aleo-Bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Aleo-Bold-webfont.woff') format('woff'), /* Modern Browsers */
       url('Aleo-Bold-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Aleo-Bold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Aleo-Regular';
  src: url('Aleo-Regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Aleo-Regular-webfont.woff') format('woff'), /* Modern Browsers */
       url('Aleo-Regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Aleo-Regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Neris-Light';
  src: url('Neris-Light-webfont.eot'); /* IE9 Compat Modes */
  src: url('Neris-Light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Neris-Light-webfont.woff') format('woff'), /* Modern Browsers */
       url('Neris-Light-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Neris-Light-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Aleo-Light';
  src: url('Aleo-Light-webfont.eot'); /* IE9 Compat Modes */
  src: url('Aleo-Light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Aleo-Light-webfont.woff') format('woff'), /* Modern Browsers */
       url('Aleo-Light-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Aleo-Light-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Neris-Thin';
  src: url('Neris-Thin-webfont.eot'); /* IE9 Compat Modes */
  src: url('Neris-Thin-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Neris-Thin-webfont.woff') format('woff'), /* Modern Browsers */
       url('Neris-Thin-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Neris-Thin-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Neris-Black';
  src: url('Neris-Black-webfont.eot'); /* IE9 Compat Modes */
  src: url('Neris-Black-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Neris-Black-webfont.woff') format('woff'), /* Modern Browsers */
       url('Neris-Black-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Neris-Black-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'KumbhSans-Light';
  src: url('KumbhSans-Light.eot'); /* IE9 Compat Modes */
  src: url('KumbhSans-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('KumbhSans-Light.woff') format('woff'), /* Modern Browsers */
	url('KumbhSans-Light.ttf')  format('truetype'), /* Safari, Android, iOS */		url('KumbhSans-Light.svg#svgFontName') format('svg'); /* Legacy iOS */

}

@font-face {
  font-family: 'KumbhSans-Regular';
  src: url('KumbhSans-Regular'); /* IE9 Compat Modes */
  src: url('KumbhSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('KumbhSans-Regular') format('woff'), /* Modern Browsers */
       url('KumbhSans-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('KumbhSans-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */

}

@font-face {
  font-family: 'KumbhSans-Bold';
  src: url('KumbhSans-Bold.eot'); /* IE9 Compat Modes */
  src: url('KumbhSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('KumbhSans-Bold.woff') format('woff'), /* Modern Browsers */
       url('KumbhSans-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('KumbhSans-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

p 	{ 
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
}

li {
list-style-type: none;
padding: 0px;
margin: 0px;
}

ul{
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-start: 0;
	
}

img {
	text-decoration: none;
	border: 0px;

}


.inner {

	margin: 0 auto;
	position: relative;
	min-height: 100px;
	padding:15px 0;
	font-family: 'Aleo-Light', sans-serif;
	line-height: 20pt;
	letter-spacing: .02em;
}

.inner a {
	color: #52bb79;
	text-decoration: none;
	font-size: 17pt;
}

.inner :hover{
color: #454545;
}





/* Add a black background color to the top navigation */
.topnav {
	
  	background-color: #141414;
  	overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
 	 float: right;
  	display: block;
  	color: #f1f1f1;
  	text-align: center;
  	padding: 30px 30px;
  	text-decoration: none;
	font-family: Aleo-Regular;
  	font-size: 17px;
	line-height: 40px;
}

.topnav .logo {
  	display: block;
	padding: 15px 30px 15px 30px;
	margin: 20px 30px;
	float: left;
  	height: 30px;
	width: 1px;
  	background-image: url(../images/logo.svg);
  	background-size: 60px 60px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  	display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  	float: right;
  	overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  	font-size: 17px;
  	border: none;
  	outline: none;
  	color: white;
  	padding: 40px 30px;
  	background-color: inherit;
  	font-family: Aleo-Regular;
  	margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  	display: none;
  	position: absolute;
  	background-color: #000;
  	min-width: 160px;
  	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  	z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  	float: none;
  	color: #f4f4f4;
  	padding: 12px 16px;
  	text-decoration: none;
  	display: block;
  	text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  	background-color: #555;
  	color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  	background-color: #ddd;
  	color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
	.dropdown:hover .dropdown-content {
  	display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    	display: none;
  }
  .topnav a.icon {
    	float: right;
    	display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    	position: absolute;
    	right: 0;
    	top: 0;
  }
  .topnav.responsive a {
    	float: none;
    	display: block;
    	text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    	display: block;
    	width: 100%;
    	text-align: left;
  }
}







header  {
	position: fixed;
	left: 0;
	top: 0px;
	z-index: 1000;
	width: 100%;
	text-align: center;
	background-color: #141414;
	margin-bottom: 100px;
	border-top: 5px solid #52bb79;
}


#logoarea {
	display: flex;
	align-items: center;
	clear: both;
	width: 100%;
	background-size: 100%;
	

}

.logo-holder {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	padding: 50px 40px 0px 40px;
	max-width: 1300px;
	overflow-y:visible;
	display: flex;
	margin-top: 100px;
}

.headertext {
	max-width: 750px;
	align-content: flex-start;
	flex-basis: auto;
	flex-wrap: wrap;
	flex-grow: 2;
	margin-top: 50px;
	padding: 0px 100px 0px 0px;
	display: flex;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */
	justify-content: flex-start;

}


.delivery {
	width: 100%;
  	max-width: 379px;
	min-width: 300px;
	flex-grow: 1;
	display: flex;
	flex-basis: 0;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */

}

.gif {
	width: 100%;
  	max-width: 320px;
	min-width: 300px;
	flex-grow: 1;
	display: flex;
	flex-basis: 0;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */

}

.desktop {
	width: 100%;
  	max-width: 705px;
	flex-grow: 1;
	display: flex;
	margin-left: 40px;
	justify-content: space-evenly;
	flex-basis: 0;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */

}

.sidebyside {
	width: 100%;
	flex-grow: 1;
	display: flex;
	justify-content: space-evenly;
	flex-basis: 0;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */

}


.callouttext {
	max-width: 750px;
	align-content: flex-start;
	flex-basis: auto;
	flex-wrap: wrap;
	flex-grow: 2;
	margin-top: 50px;
	padding: 0px 100px 0px 0px;
	display: flex;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */
	justify-content: flex-start;

}

.calloutimage {
	display: flex;

}


#calloutarea {
	display: flex;
	align-items: center;
	clear: both;
	width: 100%;
	background-size: 100%;
	

}

.callout-holder {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	padding: 200px 40px 200px 40px;
	max-width: 960px;
	overflow-y:visible;
	display: flex;
	flex-wrap: nowrap;
}

#calloutarea h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 36pt;
	line-height: 60px;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0 0 25px 0;

}

#calloutarea p{
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	font-size: 16pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	margin: 0;
}










#logoarea h1{
	font-family: 'Aleo-Bold', sans-serif;
	line-height: 60px;
	font-size: 35pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	margin: 0;

}

#logoarea p{
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	font-size: 16pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	margin: 0;
}


.parallax {
  	/* The image used */
  	background-image:url(../images/USB_components2.png);

  	/* Set a specific height */
  	min-height: 500px; 

  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center top;
  	background-repeat: no-repeat;
  	background-size: cover;
	background-color: #ffffff;
}

.parallax {
  	/* The image used */
  	background-image:url(../images/USB_components2.png);

  	/* Set a specific height */
  	min-height: 700px; 

  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center center;
  	background-repeat: no-repeat;
  	background-size: cover;
	background-color: #ffffff;
}


.trane {
  	/* The image used */
  	background-image:url(../images/mountain.jpg);

  	/* Set a specific height */
  	min-height: 500px; 

  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
	background-color: #ffffff;
}


.challenge2 {
  	/* The image used */
  	background-image:url(../images/challenge2.jpg);

  	/* Set a specific height */
  	min-height: 700px; 
	border-bottom: 4px solid #0c2074;

  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	background-color: #ffffff;
}


.challenge3 {
  	/* The image used */
  	background-image:url(../images/challenge3.jpg);

  	/* Set a specific height */
  	min-height: 700px; 

  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	background-color: #ffffff;
}



.content {
	margin: 0 auto;
	width: 100%;
}



#portfolio {
	
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
	height: auto;
	padding-bottom: 100px;
}


#portfolio-bottom {
	padding-top: 200px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
	padding-bottom: 100px;
}

#portfolio-bottom2 {
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
	padding-bottom: 100px;
}


#aboutarea {
		  	/* The image used */
  	padding-top: 200px;
	padding-bottom: 200px;
	background-image: url(../random-images/rotator.php); 

  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	
	
}



.about-holder {
	margin: 0 auto;
	max-width:1024px;
	width: 90%;
	height: auto;
}


#aboutarea h3{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 24pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	margin: 10px 0 0 0;
	line-height: 50px;
}

#aboutarea h4{
	font-family: 'Aleo-Light', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 24pt;
	color: #f5f5f5;
	letter-spacing: .06em;
	margin: 0;
	line-height: 50px;
}

#aboutarea p{
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	font-size: 16pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	margin:0;
	padding-bottom: 40px;
	text-align: right;
}


.wirearea {
	margin-left: auto;
	margin-right: auto;
	clear: both;
	height: auto;
	background-color: #52bb79;
	
	
}



.wire-holder {
	margin: 0 auto;
	max-width:1024px;
	width: 90%;
	height: auto;
}

.mac {
  	/* The image used */
  	background-image:url(../images/mac.jpg);

  	/* Set a specific height */
  	min-height: 600px; 

  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
	background-color: #ffffff;
}


.atmosphere-holder {

	  	/* The image used */
  	background-image:url(../images/persona.jpg);

  	/* Set a specific height */
  	min-height: 500px; 

  	/* Create the parallax scrolling effect */
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

.atmosphere-holder2 {

	  	/* The image used */
  	background-image:url(../images/atmosphere9.jpg);

  	/* Set a specific height */
  	min-height: 500px; 

  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

.atmosphere-holder3 {

	  	/* The image used */
  	background-image:url(../images/final.png);

  	/* Set a specific height */
  	min-height: 500px; 
	background-color: #52bb79;
  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}


#componentsarea {
	padding-top: 220px;
	padding-bottom: 220px;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	height: auto;
	background-size: cover;
	background:url(../images/USB_components2.png);
	background-size: calc(100% + 150px);
	background-position: center top;
	background-color: #ffffff;
	
	
}

.mobile-holder {
	margin: 0 auto;

}

#mobilearea {
	padding-top: 400px;
	padding-bottom: 400px;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	height: auto;
	background-size: cover;
	background-size: calc(50% + 150px);
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(../images/mobile_embellishments.png);
	background-color: #0c2074;


}



#quote {
	padding-top: 200px;
	padding-bottom: 200px;
	margin: 0 auto;
	clear: both;
	height: auto;
	background-color: #141414;
	display:flex;
	height: auto;
	
	
}


.side_content {
	flex-direction: row;
	margin: 20px auto 0px auto;
	max-width: 1000px;
	display: flex;
Flex-flow: wrap;
	justify-content: space-around;
	border-bottom: 1px solid #5A5A5A;


}


.multi_images {
	margin: 0px auto 0px auto;
	max-width:960px;
	display: grid;
	align-content: center;
	
	justify-content: space-evenly;
grid-template-columns: 495px 495px;
  grid-template-rows: auto;
  	column-gap: 10px;
  	row-gap: 10px;
}


.duo_content {

	margin: 0px auto 150px auto;
	max-width: 1024px;
	width: 95%;



}


#problemarea {
	padding: 200px 20px 50px 20px;
	margin: 0 auto;
	width: 95%;
	height: auto;
	background-color: #141414;
	display:block;
}


.problem-holder {
	margin: 0 auto;
	max-width: 800px;
	width: 90%;
	height: auto;
	display:flex;
}


.center-text {
	margin: 0 auto;
	max-width: 800px;
	width: 95%;
	height: auto;
	text-align: left;
	justify-items: center;
}



.center-text img{
	margin: 70px auto;
	display: block;
	max-width: 600px;
	width: 90%;
}

.center-text h2{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 18pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	text-align: center;
	padding-bottom: 30px;
}


.problem_content {
	flex-direction: row;
	margin: 50px auto 100px auto;
	max-width: 800px;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #5A5A5A;


}


.problem {
	flex: none;
	flex-shrink: 3;
	padding: 0px 50px 0 50px;
	display:flex;
}

.problem_text {
	padding-top: 20px;
	flex-shrink: 2;
	width: 50%;
	display:flex;
	flex-flow: column wrap;
	
}

.problem_text p{
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	font-size: 16pt;
	color: #f5f5f5;
	letter-spacing: .1em;
	margin: 0 0 5px 0;
}

.problem_text h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 18pt;
	color: #f5f5f5;
	letter-spacing: .1em;
	margin: 0 0 15px 0;
}





.keyboard {
	padding-top: 20px;
	padding-bottom: 20px;
	display:flex;
	width:50%;
}

.quote_text {
	padding-top: 100px;
	padding-bottom: 20px;
	width: 50%;
	display:flex;
}

.quote_text h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 36pt;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0 0 5px 0;
}



#sectionarea {
	padding-top: 300px;
	padding-bottom: 300px;
	margin: 0 auto;
	clear: both;
	height: auto;
	background-color: #1B1B1B;
	display:flex;
	height: auto;
	
	
}



.section-holder {
	margin: 0 auto;
	max-width: 960px;
	padding: 0 20px 0 20px;
	height: auto;
	display:flex;
	flex-grow: 2;
}


#sectionarea2 {
	padding-top: 300px;
	padding-bottom: 300px;
	margin: 0 auto;
	clear: both;
	height: auto;
	background-color: #141414;
	display:flex;
	height: auto;
	
	
}



.section-holder2 {
	margin: 0 auto;
	max-width: 960px;
	padding: 0 20px 0 20px;
	height: auto;
	display:flex;
	flex-grow: 2;
}


.port-holder h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 36pt;
	line-height: 60px;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0 0 5px 0;
}


.port-holder h2{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 18pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	text-align: left;
	margin: 0 0 25px 0;
}

.port-holder p{

	font-size: 16pt;
}




.demo {
  display: inline-block;
  width: 24%;
  padding: 5px;
  box-sizing: border-box;
}

.demo h1 {
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 26pt;
	color: #52bb79;
  	resize: none;
  	text-align: left;
  	width: 100%;
	letter-spacing: 2px;
}

.demo h2 {
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
  	resize: none;
  	text-align: left;
  	width: 100%;
}


#break {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 40px;
	
}

.circle {
	border-radius: 50%;
	
}

.line {
	max-height: 8px;
	padding: 30px 0 30px 0;
	
}

/*end about area */
/*begin contact area */


#contact {
	padding-top: 80px;

	margin-left: auto;
	margin-right: auto;
	max-width:1024px;
	width: 80%;
	height: auto;
	overflow-y:visible;
	
}

#contact h1{
	padding-top: 40px;
	font-family: 'Aleo-Regular', sans-serif;
	font-size: 24pt;
	color: #52bb79;
	letter-spacing: .05em;
	margin-bottom: 50px;

}

#contact h3{
	font-family: 'KumbhSans-Regular', sans-serif;
	font-weight: 400;
	font-size: 16pt;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0;
	margin-top: 10px;
	padding-bottom: 5px;
}


/*begin contact form */

#contact-body {
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
}
	
	
form {
	width:90%;
}

label {
	font-family: 'Aleo-Regular', sans-serif;
	font-size: 16pt;
	color: #f4f4f4;
	letter-spacing: .05em;
}

#login input, textarea {
	height:15px;	
}

input, textarea {
	width:100%;
	padding: 12px 14px 12px 14px; 
	border: none;
	font-family: 'Aleo-Regular', sans-serif;
	color: #141414;
	margin-bottom: 20px;
	margin-top: 5px;
	font-size:1.3em;
	background-color: #f5f5f5;
}

	input:focus, textarea:focus {
		border:1px solid #97d6eb;
}

#double {
	width: 390px;
	flex-flow: row;
	flex-basis: auto;
	flex-wrap: no-wrap;
	display: flex;
}

#name {
	width: 1px;
	flex-basis: auto;
	flex-wrap: wrap;
	flex-grow: 1;
	padding: 0px 40px 0px 0px;
	display: flex;
	justify-content: flex-start;
}

#phone {
	flex-wrap: wrap;
	flex-grow: 1;
	display: flex;
	flex-basis: 0;
	justify-content: left;
}

textarea {
	width:100%;
	height:200px;
	padding: 12px 14px 12px 14px; 
	border: none;
	font-family: 'Aleo-Regular', sans-serif;
	color: #52bb79;

	margin-bottom: 20px;
	font-size:1.3em;
}


#submit {
	background:url(../images/submit.png);
	width:158px;
	height:40px;
	text-indent:-9999px;
	border:none;
	margin-top:5px;
	cursor:pointer;
	margin:0 0 70px 0;
}

#submit:hover {
	background:url(../images/submit_hover.png);
}
	
#submit:active {
	background:url(../images/submit_active.png);
}

/*end contact form */





/*end contact area */
/*begin footer area */

#footer {
	margin: 0 auto;
	clear: both;
	height: auto;
	z-index: 100;
	background-size:100%;
}

.footer-holder {
	margin: 0 auto;
	width:1024px;
	height: auto;
	overflow-y:visible;
}


#social {
	width: 100%;
	padding: 0px;
	margin: 30px 0 0 0;
}

#social li {
 	list-style-type:none;
	display: inline-block;
}

#social li a {
	background-image: url(../images/sprites.png);
	background-repeat:no-repeat;
	display: inline-block;
	height: 42px;
	width: 44px;
	margin-right: 8px;
	
}

#social li a.dribbble {background-position:-76px -204px;}
#social li a:hover.dribbble {background-position: -76px -160px;}

#social li a.instagram {background-position:-129px -204px;}
#social li a:hover.instagram {background-position: -129px -160px;}

#social li a.twitter {background-position:-181px -204px;}
#social li a:hover.twitter {background-position:-181px -160px;}

#social li a.linkedin {background-position:-233px -204px;}
#social li a:hover.linkedin {background-position:-233px -160px;}

#social li a.behance {background-position:-285px -204px;}
#social li a:hover.behance {background-position:-285px -160px;}


#credit {
	margin-left: auto;
	margin-right: auto;
	clear: both;
	color: #f5f5f5;
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	font-size: 14pt;
	padding: 50px 0 50px 0;
	width: 70%;
}


#port-display {
	width: 100%; 
	max-width: 1100px;
	margin: 0px auto;
	
	
}

#porttitles h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 36pt;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0 0 5px 0;
}


#resume-left {
	flex-grow: 1;
	min-width:300px;
	max-width:300px;
	margin-right: 40px;
	display: inline-block;
	justify-content: flex-start;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */


}

#resume-pic {
		flex-grow: 1;
	min-width:300px;
	max-width:300px;
	margin-right: 40px;
	display: inline-block;
	justify-content: flex-start;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */


}

#resume-left h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 36pt;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0 0 5px 0;
}

#resume-pic h2{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 22pt;
	color: #52bb79;
	letter-spacing: .05em;
	text-align: left;
}

#resume-pic p{
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	padding-bottom: 15px;
	color: #BDBDBD;
	text-decoration: none;
	font-size: 14pt;
	letter-spacing: .05em;
	text-align: left;
	line-height: 30px;
}

#resume-pic li{
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	list-style-type: square;
	margin-left: 20px;
	padding-left: 20px;
	color: #BDBDBD;
	font-size: 14pt;
	line-height: 30px;
}

#resume-pic img{
	width: 300px;
	display: block;
    	margin-bottom: 15px;
}

#software {
	flex-grow: 1;
	max-width:200px;
	margin-right: 40px;
	display: inline-block;
	justify-content: flex-start;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */


}

#software img{
	width: 200px;
	display: block;
    	margin-top: 120px;
}



.content img {
	display: block;
    	margin-bottom: 10px;
}

.content b {
	font-family: 'KumbhSans-Regular', sans-serif;
	font-weight: 400;
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
}

#porttitles h2{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 18pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	text-align: left;
	margin: 0 0 25px 0;
}

.intro-holder b {
	font-family: 'KumbhSans-Regular', sans-serif;
	font-weight: 400;
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
}

.intro-holder p {
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
}

.intro-holder a {
	color: #52bb79;
	text-decoration: none;
	font-size: 16pt;
}



#intro-holder {
	align-items: center;
	flex-grow: 2;
	display: inline-block;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */
	
}

.intro-holder p {
	margin-bottom: 1.5em;
}


.port-holder b {
	font-family: 'KumbhSans-Bold', sans-serif;
	font-weight: 700;
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
}

.port-holder p {
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
}

.port-holder a {
	color: #52bb79;
	text-decoration: none;
	font-size: 16pt;
}

.resume-right li {
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	list-style-type: square;
	padding-left: 20px;
	color: #f5f5f5;
	font-size: 14pt;
	line-height: 40px;
}

.resume-right ul{
	padding-left: 50px;
	
}

.resume-right b {
}

#port-holder {
	align-items: center;
	flex-grow: 2;
	justify-content: flex-start;
	display: inline-block;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe 		declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */

}

#about-holder {
	align-items: center;
	flex-grow: 2;
	display: inline-block;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */
	


}

.about-holder b {
	font-family: 'KumbhSans-Regular', sans-serif;
	font-weight: 400;
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
}

.about-holder p {
	color: #f5f5f5;
	text-decoration: none;
	font-size: 16pt;
}

.about-holder a {
	color: #52bb79;
	text-decoration: none;
	font-size: 16pt;
}

.about-holder h2{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 18pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	text-align: left;
	margin: 0 0 25px 0;
}

#introarea {
	padding: 100px 30px;
	background-color: #1B1B1B;
	margin: 40px auto 0px auto;
	display:block;
	height: auto;

}

#resumearea {
	padding: 10px 30px;
	margin: 40px auto 0px auto;
	max-width:960px;
	display:block;
	height: auto;

}


.resume-holder {
	
	margin: 0px auto 0px auto;
	max-width:960px;
	height: auto;
	display:flex;
}


.resume-holder h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 36pt;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0 0 5px 0;
}


.resume-holder h2{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 18pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	text-align: left;
	margin: 0 0 25px 0;
}

.resume-holder p{

	font-size: 16pt;
}

.resume-holder a {
	color: #52bb79;
	text-decoration: none;
	font-size: 17pt;
	border-bottom: 1px solid #52bb79;
	padding-bottom: 3px;
}




#photoarea {

	margin: 40px auto 0px auto;
	max-width:960px;
	display:flex;
	height: auto;

}


.photo-holder {
	
	margin: 0px auto 0px auto;
	max-width:960px;
	display: grid;
	align-items: center;
	justify-content: space-evenly;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	grid-template-areas: "Area";
	ms grid columns: 1fr 10px 1fr 10px 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}





#porttitles {
	flex-grow: 1;
	min-width:300px;
	max-width:300px;
	margin-right: 40px;
	display: inline-block;
	justify-content: flex-start;
  	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 1s; /* don't forget to set a duration! */


}

#porttitles p{
	font-family: 'KumbhSans-Light', sans-serif;
	font-weight: 300;
	color: #BDBDBD;
	text-decoration: none;
	font-size: 14pt;
	letter-spacing: .05em;
	text-align: left;
	margin: 10px 0 0 0;
	line-height: 30px;
}

#portcontent {
	margin: 100px auto 0px auto;
	max-width:960px;
	display:flex;
	height: auto;

}


#porttext {
	margin: 0 auto;
	max-width:1020px;





}

#portarea {
	padding: 100px 30px;
	background-color: #1B1B1B;

	
	
}




#aboutarea h3{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 22pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	margin: 10px 0 0 0;
	line-height: 40px;
}

#aboutarea h4{
	font-family: 'Aleo-Light', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 22pt;
	color: #f5f5f5;
	letter-spacing: .06em;
	margin: 0;
	line-height: 40px;
}



* {
	margin: 0;
	padding: 0;
}



.container {
	margin: 20px auto;
	max-width: 1000px;
	width: 95%;
}

.fade {
	display: inline-block;
  animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}

.fadein {
	display: inline-block;
  animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}


.row:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}


.responsive-description {
	display: none;
}


.port-holder p {
	margin-bottom: 1.5em;
}




/* for 992px or less */
@media screen and (max-width: 992px) {

.calloutimage {
	margin: 0px auto;
	width: 100%;
}

.callout-holder {
	margin: 0px auto;
}

.gif {
	margin: 20px auto;
	width: 100%;
	display: block;

}

.desktop {
	margin: 20px auto;
	width: 100%;
	display: block;


}

.atmosphere-holder {
  	min-height: 300px; 
}

.atmosphere-holder2 {

  	min-height: 300px; 
}

.atmosphere-holder3 {
  	min-height: 300px; 
}



#problemarea {
	padding: 100px 20px 50px 20px;
}


.keyboard {
	display:none;
}

.quote_text {
	margin: 20px auto;
	width: 70%;
	display:block;
}

.quote_text h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 24pt;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0 0 5px 0;
}


.container {
	margin: 20px auto;
}



.responsive-description {
	display: inline;
}

.responsive-description h3{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 25pt;
	color: #52bb79;
	letter-spacing: .05em;
	text-align: left;
	margin: 0;
}

.responsive-description p {
	color: #454545;
	text-decoration: none;
	font-size: 17pt;
	margin-bottom: 25px;
}

.responsive-description a {
	color: #52bb79;
	text-decoration: none;
	font-size: 17pt;
}

.responsive-description :hover {
	color: #454545;
}

.about-holder {
	margin: 0 auto;
	max-width:960px;
	width: 90%;
	height: auto;
}

#aboutarea {
	padding-top: 100px;
	padding-bottom: 100px;
	
	
}




#aboutarea h3{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 22pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	margin: 10px 0 0 0;
	line-height: 40px;
}

#aboutarea h4{
	font-family: 'Aleo-Light', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 22pt;
	color: #f5f5f5;
	letter-spacing: .06em;
	margin: 0;
	line-height: 40px;
}

#portfolio {

	width: 90%;
}


#portfolio-bottom {

	width: 90%;
}

.demo h1 {
	font-size: 18pt;
}

.demo h2 {
	font-size: 14pt;
}


}








/* for 768px or less */
@media screen and (max-width: 768px) {

.callout-holder {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	padding: 20px 40px 20px 40px;
	max-width: 960px;
	overflow-y:visible;
	display: flex;
	flex-wrap: wrap;
}


.callouttext {
	max-width: 750px;
	align-content: flex-start;
	flex-basis: auto;
	flex-wrap: wrap;
	flex-grow: 2;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 0px 0px 0px;
	display: block;

}


.headertext {
	padding: 0px 0px 0px 0px;

}



#headerimage {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	display: none;
}


.port-holder {
	flex-grow: 1;
	display: inline-block;
	
}




#porttitles {
	display: inline-block;


}

#portcontent {
	margin: 0 auto;
	max-width:960px;
	display:block;
	height: auto;

}

.section-holder {
	margin: 0 auto;
	width:90%;
	display:block;
	height: auto;

}



.demo {
    	width: 32.5%;
  	padding: 5px;
  }

.resume-holder {
	width:100%;
	display:block;
}

#resume-right {
	width: 95%;


}


#resume-left {
	width: 95%;


}

#resume-pic {
	display: none;


}

.multi_images {
	margin: 0px auto 0px auto;
	max-width:1000px;
	display: grid;
	align-items: center;
	justify-content: space-evenly;
	grid-template-columns: 500px;
  	grid-template-rows: auto;
  	column-gap: 10px;
  	row-gap: 10px;
}



}


/* for 600px or less */
@media screen and (max-width: 639px) {

.quote_text h1{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 18pt;
	line-height: 60px;
	color: #52bb79;
	letter-spacing: .05em;
	margin: 0 0 5px 0;
}

#aboutarea h3{
	font-family: 'Aleo-Bold', sans-serif;
	font-size: 18pt;
	color: #f5f5f5;
	letter-spacing: .05em;
	margin: 10px 0 0 0;
	line-height: 30px;
}

#aboutarea h4{
	font-family: 'Aleo-Light', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 18pt;
	color: #f5f5f5;
	letter-spacing: .06em;
	margin: 0;
	line-height: 30px;
}

#sectionarea2 {
	padding-top: 40px;
	padding-bottom: 40px;
	
	
}

#sectionarea {
	padding-top: 40px;
	padding-bottom: 40px;
	
	
}

#mobilearea {
	padding-top: 200px;
	padding-bottom: 200px;
}


.section-holder2 {
	width: 90%;

}


#logoarea h1{
	font-size: 22pt;
	line-height: 40px;

}

.logo-holder {

	padding-top: 10px;
	width: 90%;
}

#contact {
	padding-top: 80px;
	margin-left: auto;
	margin-right: auto;
	
}

#foot-navigation {
	margin-bottom: 30px;
	width: 100%;
	float: left;
}


.demo {
    width: 49%;
  }

.photo-holder {

	grid-row-gap: 10px;
}



}


@media only screen and (max-width: 360px) {
  .demo {
    width: 100%;
  }


}