* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html {
	font-size:100%;
}

header, nav, aside, main, footer {
	display:block;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "New Time Roman", serif;
}

ul {
	list-style-type:none;
}
	
a.nodecoration {
	text-decoration:none;
}

a:link {
	color:hsl(219,69%, 64%);
}

a:visited {
	color:hsl(30,100%,35%);
}

a:hover {
	color:hsl(30,100%,50%);
}

body {
	background-color:#deeaff;
	color:#333333;
	font-family:Verdana, Arial, sans-serif;
	font-size:1em;
	line-height:1.5em;
	min-width:360px;
}

#wrapper {
	background-color:#fefefe;
	box-shadow:5px 5px 3px #787878;
	margin:1.5em auto;
	width:80%;
}

#three_columns {
	display:flex;
	flex-flow:row nowrap;
}

header {
	background-color:#98baf8;
	background-image:radial-gradient(#ffffff,#6692e3);
	background-repeat:no-repeat;
	display:flex;
	flex-flow:row nowrap;
	/*height:7.5em;*/
	height:120px;
}

#logo {
	/*height:7.5em;*/
	/*width:12.5em;*/
	height:120px;
	width:200px;
}


h1 {
	flex:1;
	font-size:1.6em;
	text-align:center;
	padding-top:1.2em;
}

#mobile {
	display:none;
}

nav {
	background-color:#eaeaea;
	/*flex:2;*/
	text-align:center;
	width:200px;	
}

nav ul {
	display:flex;
	flex-direction:column;
}

nav ul li {
	padding:1em;
	flex:1;
	font-size:1.2em;
	position:relative;
}

nav a {
	background-color:#6692e3;
	border-radius:0.5em;
	box-shadow:5px 5px 3px #787878;
	color:#eeeeee;
	display:block;
	margin:0 auto;
	padding:0.5em;
	text-decoration:none;
	width:7.5em;
}

#submenu {
	display:none;
}

ul#submenu li {
	border-bottom:0.125em solid #fff;
	padding:0;
}

ul#submenu li a {
	box-shadow:none;
	font-size:0.8em;
}

ul li:hover ul#submenu {
	display:block;
	position:absolute;
	left:180px;
	top:20px;
}

nav a:link {
	background-color:#6692e3;
	color:#eeeeee;
}

nav a:visited {
	background-color:hsl(219,69%,50%);
	color:hsl(30,69%,60%);
}

nav a:hover {
	background-color:hsl(219,69%,60%);
	color:hsl(30,100%,50%);
}

main {
	flex:6;
	line-height:150%;
	margin:1.5em;
}

h2 {
	font-size:1.5em;
	line-height:1.25em;
	margin-bottom:1em;}

h3 {
	color:hsl(10, 100%, 50%);
}

dt {
	font-weight:bold;
	font-size:1.125em;
	margin-bottom:1.33em;
}

dd {
	margin-bottom:1.5em;
}

aside {
	background-color: #eaeaea;
	flex:2;
	padding-left:1.5em;
	padding-right:1.5em;
	padding-top:1.5em;
}

#search_box{
	border:0; 
	margin:0.6em auto;
}

footer {
	background-color:#98baf8;
	border-top:3px solid #787878;
	font:0.875em/1.714em;
	font-style:italic;
	padding-bottom:0.5em;
	padding-top:0.5em;
	text-align:center;
}

footer a {
	text-decoration:none;
}

span {
	font-size:1em;
	font-weight:bold;
	font-style:italic;
}

/* home page */

#home_pic {
	float:right;
	margin-left:1.5em;   
	margin-top:1em;
}

img {
	max-width:100%;
}

/* products page */

#products_img img {
	display:block;
	margin:auto;
}

/* products_item page*/
table {
	border:2px solid hsl(0,100%,18%);
	border-collapse:collapse;
	margin:1.5em auto;
	width:100%;		
}

thead {
	background-color:hsl(0,0%,90%);
	text-align:center;
}

tbody {
	text-align:center;
}

th, td {
	border:2px solid hsl(0,100%,18%);
}

td img {
	vertical-align:middle;
	max-width:100%
}

.cart input{
	background-color:#eaeaea;
	border:1px solid #333333;
	border-radius: 20%;
	display:inline;
	font-size:1em;
	width:3em;
}

/* tr:nth-of-type(even) {background-color:hsl(0,0%,90%);} */

/* contact us page */
#address {
	display:flex;
	flex-flow:row wrap;
}

form#contact_us{
	min-width:350px;
}

.left, .right {
	padding-left:1em;
}

fieldset {
	border:2px solid hsl(0, 100%, 18%);
	padding:1em;
}

legend {
	font-weight:bold;
	font-size:1.2em;
	text-align:center;
}

label {
	float:left;
	margin-right:0.5em;
	text-align:right;
	width:8em;
}

input, textarea {
	border:1px solid hsl(0, 100%, 18%);
	display:block;
	font-size:1.5em;
	margin-bottom:0.5em;
	width:60%;
}

input#goverment, input#university, input#company{
	display:inline;
	width:1em;	
}

input#university, input#company{
	margin-left:5.7em;	
}

select {
	display:block;
	font-size:1.0em;
	margin-bottom:0.8em;
	width:160px;
}

#submit, #reset {
	background-color:#ccc;
	float:left;
	font-size:1.2em;
	width:6em;
}

#submit{
	margin-left:20%;
}

#reset {
	margin-left:1em;
}

/* about us page */
#gallery {
	position:relative;
	margin-top:1em;
	margin-bottom:3.5em;
}

li span {
	display:none;
}

a.nodecoration:hover span {
	display:block;
	font-style:normal;
	position:absolute;
	left:120px;
	top:0;
	text-align:center;
}
						   
.map {
	position:absolute;
	left:120px;
}

/* blog page, sitemap page and privacy policy papge */

h3.blog{
	color:#333;
}

ul.privacy_policy, ul.sitemap{
	list-style-type:disc;
	padding-left:2.5em;
}

#audio_video_image{
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
}

#video, #audio{
	flex:auto;
	text-align:center;
}

#slideshow {
	flex:none;
	text-align:center;
}

div.fotorama img{
	max-width:100%;
}

#audio_video_image h4 {
	margin-bottom:0.6em;
}

iframe{
	width:370px;
	height:150px;
}

#back, #to_top{
	background-color:#cccccc;
	border:2px solid #333333;
	border-radius:50%;
	float:right;
	font-size:1em;
	font-weight:bold;
	height:3.2em;
	text-align:center;
	transition:all 1s;
	width:3.2em;
}

#back:hover, #to_top:hover{
	transform:scale(1.5);
}

#back a, #to_top a{
	display:block;
	padding:0.64em 0;
	text-decoration:none;
}


/* responsive web design */

@media only screen and (max-width:1024px) {
	#wrapper {
		margin:0;
		min-width:730px;
		width:auto;
	}
	
	#three_columns {
		flex-flow:column;
	}
	
	nav {
		width:auto;
	}
	
	nav ul {
		flex-flow:row wrap;
		justify-content:flex-start;
	}
	
	nav ul li {
		padding:1em;
		flex:0;
	}
	
	ul li:hover ul#submenu {
		display:block;
		position:absolute;
		left:24px;
		top:70px;
	}
	
	main {
		margin:1em;
	}
	
	input, textarea {
		width:70%;
	}
	
	aside {
		padding-top:1em;
	}
	
	aside>p, aside>h3 {
		padding-left:2em;
	}
}

@media only screen and (max-width:640px) {
	#wrapper {
		min-width:350px;
	}
	
	#logo {
		display:none;
	}
	
	header {
		height:60px;
	}
	
	#desktop {
		display:none;
	}
	
	#mobile {
		display:block;
	}
	
	h1 {
		padding-top:0.5em;
	}
	
	nav ul {
		flex-direction:column;
	}
	
	nav ul li {
		padding:0;
		margin-top:0.1em;
	}
	
	nav a {
		border-radius:0;
		box-shadow:none;
		width:auto;
	}
	
	ul li:hover ul#submenu {
		display:none;
	}
	
	#home_pic, .noshow_mobile {
		display:none;
	}
	
	input, textarea {
		width:50%;
	}
}