*{
	margin: 0;
	padding: 0;
}

@keyframes fadeIn {
	0% { 
		opacity: 0;
	 	visibility: hidden;
	}
	100% { 
		opacity: 1; 
		visibility: visible;
	}
}

@keyframes fadeOut {
	0% { 
		opacity: 1; 
		visibility: visible;
	}
	100% { 
		opacity: 0; 
		visibility: hidden;
	}
}

.logo-row{
	margin: 0 auto;
	width: 120px;
}

.logo {
	height: 76px;
	width: 120px;
}
body {
    color: #666666;
	font-family: myriad-pro-semi-condensed, sans-serif;
	font-weight: 300;
	
	background-image: url("../pics/background.png");
	background-repeat: no-repeat;
	
	background-size: cover;
}
#wrapper {
    padding: 2em;
}
#header{
    padding-top: 1.5em;
}
.top-nav {
	background-color: rgba(255,255,255,.15);
	/*rgba(240,240,240,1.00)*/
}

nav, #dropdown-content{	
	margin: 0 auto;
	text-align: center;
	padding-bottom: 1em;
	
	font-size: 120%;
	font-family: myriad-pro-semi-condensed, sans-serif;
	font-weight: 600;
	font-style: bold;
	letter-spacing: .1em;
}



nav ul {
	margin: 0;
	font-size: 1.2em;
	padding-right: .8em;
	padding-top: .5em;
}

nav li {
	margin: 0;
	font-size: 1.2em;
	padding: .8em;
	
	
	list-style-type: none;
	display: inline;
}

a{
	text-decoration: none;
}

.top-nav ul li+li { 
	border-left: 4px solid rgba(255,255,255,0.25); 
	padding-top: .3em;
	padding-bottom: .6em;
}
#dropdown-content ul{
	border-top: 1px solid rgba(255,255,255,0.1);
}
#dropdown-content ul li+li{
	padding-top: .6em;
}


/*Links fade in and turn blue when hovered*/
nav a:link, #dropdown-content a:link{
	color: #222021;
	transition: .3s ease-out;
}

nav a:visited, #dropdown-content a:visited{
	color: #222021;
}

nav a:hover, #dropdown-content a:hover{
	color: #4169e1;
	cursor: pointer;
}

nav a:active, #dropdown-content a:active{
	font-size: 90%;
}
/**/

#dropdown-content{
	display: none;
}

#dropdown-content ul{
	padding-top: .5em;
	padding-bottom: .5em;
	padding-right: .75em;
}

#dropdown-content li{
	display: inline;
	padding: .5em;
	
}

#dropdown-content a{
	display: inline-block;
	padding: .2em;
	letter-spacing: 0em;
}

main{
	padding: 2em;
	
	min-height: 42em;
	margin: auto;
}
h1,h2{
	color: rgba(20,20,20,1.00);
	padding-left: 0em;
	/*purple #5E4AE3*/
}
.high-quality{
	padding-top: 1em;
	
	font-family: myriad-pro, sans-serif;
	font-size: 600%;
	font-weight: 600;
	font-style: italic;
}
.lower-prices{
	font-size: 200%;
	padding-left: 7em;
	padding-top: 1em;
}
.PC{
	padding-top: 0em;
	float: right;
	width: 50%;
}
.mobile-PC{
	display: none;
}

#bottom-bar{
	background-color: rgba(255,255,255,0.20);
	
}
#bottom-nav{
	padding: .05em;
	font-size: 70%;
	letter-spacing: normal;
	margin: 0;
	padding-left: 1em;
}

footer {
	font-size: 75%;
	text-align: center;
	font-style: italic;
	
	padding-bottom: 1em;
}


/* Small phone layout */
@media (max-width:800px){
	
}

/* Phone layout */
@media (max-width:1000px){
	.top-nav{
		font-size: 90%;
	}
	main{
		padding-left: 0;
		padding-right: 0;
	}
	body{
		background-image: url("../pics/background2.png");
	}
	.PC{
		display: none;
		float: left;
		width: 90%;
		padding-left: 0;
	}
	.mobile-PC{
		display: block;
		width: 100%;
	}
	
	.high-quality{
		padding-top: 0;
	}
	
	.low-prices{
		font-size: 200%;
		padding-left: 8em;
		padding-top: 3em;
	}
	
	#dropdown-content li{
		padding: 0;
	}
}

/* Vertical monitor layout */
@media screen and (orientation:portrait) and (min-width: 800px) { 
	main{
		min-height: 94em;
	}
	body{
		background-image: url("../pics/background2.png");
	}
}

/* Transition layout */
@media (max-width:1550px){
	.high-quality{
		padding-left: 1em;
		font-size: 450%;
	}
}

/* Transition layout */
@media (min-width:1800px){
	.high-quality, .low-prices{
		padding-left: 1em;
	}
}

/* 1440p+ layout */
@media (min-width: 2000px){
	main{
		min-height: 64em;
	}
	.high-quality{
		font-size: 900%;
		font-weight: 600;
	}
	.lower-prices{
		font-size: 400%;
		padding-left: 5em;
		padding-top: 3em;
	}
	#homehero{
	min-width: 900px;
	min-height: 900px;
}
}
