/*

Theme Name: HTML5/CSS3 Responsive layout
Date: December 2016
Description: Corporate Website for SEI,Inc.
Version: 1.0
Author: Safina Digital Arts, 2017
Author URL: http://safinaenterprisesinternational.com

*/

*{
	margin: 0;
	border: 0;
	padding: 0;
	
}

body {
	/* if url:
	background-image: url('images/bg2.png');
	*/
	background: #e6f3f7; // #dedbc5;
	font: 14px/20px philosopher, san-serif;
	color #3d3e40;
	margin: 2%;
	padding: 4%;
	
}


h1 {
	text-align: center;
	font-size: 180%;
	line-height: 120%;
	padding: 5% 0;
	
}


h2 {
	text-decoration: underline;
	line-height: 280%;
	padding-left: 2%;
}


h3 {
	line-height: 110%;
	padding: 5% 0;
	
}


p {

	padding: 1%;
	
}

img {
	text-align: center;
	max-width: 100%;
	height: auto;
	width: auto;
}

a{
	color: #fff715;
	font-size: 18px;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #fff715;
	text-decoration:underline;
	
}

header {
	
	background: #334045;
	width: 90%;
	height: 110px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	opacity: 0.75;
	margin-left: 5%;
	
	
	
}

#logo{
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	width: 440px;
	height: 110px;
	background: url(images/logo.png) no-repeat center;
	
}

nav {
	
	float: right;
	padding: 35px 20px 20px 0;
	
}

/* for div classes we do a '.' before, for ids we use '#' before */
#menu-icon{
		display: hidden;
		width: 40px;
		height: 40px;
		background: url(images/icon.png) center;
}

a:hover #menu-icon{
	border-radius: 4px 4px 0 0;
	
}

ul {
	list-style: none;
}

nav ul li {
	display: inline-block;
	float: left;
	padding: 10px;
}

.current {
	color: #fff715;
	text-decoration: underline;
	
}

/*jquery image slider*/ 
#doc {
	margin: 40px 0;
		
}

#content {
	margin: 0 auto;
	max-width: 1140px;
	margin-top: 130px;
}

#brands {

}
	
ul.brand li {
	
	float: left;
	padding: 20px;
	margin-left: 15%;

	
	
	
}

ul.brand li img{
	width: 410px;
	

	
}	
	
}

.blueberry {
	max-width: 960px;
	margin-top: 110px;
	
}

/*edits to get text over image? */


/*........*/


#FormDiv {
	text-align: center;
	margin: 20% 20%;
	color: black;
	
}
	

section {
	
	width: 20%;
	float: left;
	margin: 5% 5%;
	text-align: center;
	
}

.clear {
	clear: both;
	text-align: center;
	
}

article{
	float: left;
	margin: 0 auto;
	width: 50%;
	height: auto;
	padding: 4%;
	
}

aside{
	float: right;
	margin: 0 auto;
	width: 30%;
	height: auto;
	padding: 3%;
	
}

ul.gym li {
	padding-left: 3%;
	
}

footer{
	background: #566c73;//#333333;
	width: 100%;
	overflow: hidden;
	opacity: 0.75;
	text-align: left;
	
	
}

footer p, footer h3{
	
	color: #FFF;
	
}

footer p a {
	
	color: #EAEAEA;
	text-decoration: none;
	
}


ul.social li {
	
	display: inline;
	float: center;
	
}

ul.social li img{
	height: 50px;
	
}

footer.second{
	border-top: 1px solid #4d4e50;
	background-color: #334045; //#333333;
	max-height: 70px;
	text-align: center;
	opacity: 0.90;
}



/*-----------MEDIA QUERY HERE--------------------------*/

@media screen and (max-width: 650px) { /*478*/
	
	body{
		position: absolute;
		
	}
	
}

@media screen and (max-width: 1050px) { /*740*/
	
	header {
		/*position: absolute;*/
		
	}
	
	#menu-icon{
		
		display: inline-block;

	
	}
	
	nav ul, nav:active ul{
		
		display: none;
		position: absolute;
		padding: 20px;
		background: #405580;
		border: 1px solid #fff;
		right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 2px 0 2px 2px;
		
	
	}
	
	nav li{
		
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}
	
	nav:hover ul{
		
		display:block
		
	}
	
	section{
		
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
		
	}
	
	article{
		
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
		
	}
	
	aside{
		
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
		
	}
	
	

	
	
}

@media screen and (max-width: 600px) {
header {
		height: 200px;
		
	}




}
