/*This is the style sheet for the layout and positioning of the mobile website*/
	/*Website General*/
		/*This sets the background for the header (need to change the color of the platform later)*/
		header {
			margin: 0px;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			position: fixed;
			height: 80px;
			width: 100%;
			padding: 5px;
			background-color: black; opacity: 0%;
			z-index: 2;
		}
		body, html {
			/*min-height: 100%;*/
		}
		/*This sets the background color of the body to black*/
		/*body {
			background-color: black;
			background-image: url(Maintenance_iPhone.jpg);
			background-repeat: no-repeat;
			background-size: cover;
		}*/
		/*Setting media queries to change background by device.*/
		/*mobile phones*/
		@media (max-width: 480px) {
			body, html {
			min-height: 100%;
			}
			body {
				background-color: black;
				background-repeat: no-repeat;
				background-image: url(Ham.jpg);
				background-size: cover;
			}
		}
		/*tablets*/
		@media (min-width: 481px) and (max-width: 950px) {
			body, html {
			min-height: 100%;
			}
			body {
				background-color: black;
				background-repeat: no-repeat;
				background-image: url(Ham.jpg);
				/*background-image: url(My_Laptop_Site_Maintenance_1680_1050.jpg);*/
				background-size: cover;
			}
		}
		/*My Laptop*/
		/*Laptop and desktop*/
		@media (min-width: 951px) {
			body, html {
			min-height: 100%;
			}			
			body {
				background-color: black;
				background-repeat: no-repeat;
				background-image: url(Ham.jpg);
				background-size: cover;
			}
		}
		/*This sets the margin of the body*/
		body {
			margin-top: 150px;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 0;
			padding: 0;
		}
		/*This sets the overall font of the body*/
		body {
		font-family: helvetica;
		color: white}
		/*Special Edit for Navigation Submenu Icons*/
		/*This causes all lists in the body to line up and removes the bullet point*/
		body li {
			list-style: none;
			display: inline-block;
		}
		/*Position the priority of header icons*/
		/*This positions the search bar*/ 
		.search-bar {
			width: 100%;
		}
		.search-bar li {
			width: 98%;
			text-align: center;
		}
		#Search {
			text-align: center;
			position: relative;
			margin-right: 0px;
			width: 96%;
			/*width: 250px;*/
		}
		#Search input[name="search"] {
			height: 10%;
			width: 80%;
			display: inline-block;
		}
		#Search input {
			height: 10%;
			display: inline-block;
		}
		/*Styling Mobile Search Bar Drop Down*/
		/*Drop Down Menu*/
		.search-btn {
			transition: all .5s ease-in-out;
			}
		.search-bar {
			position: fixed;
			top: -100%;
			right: 0;
			width: 100%;
			min-height: 0vh;
			z-index: 1;
			display: block;
			background-color: black; opacity: 80%;
			padding-top: 120px;
			transition: 0.5s;
			z-index: 32;
	
			}
		.search-bar.open {
			top: 0;
			}
		.search-bar a {
			display: block;
			width: 100%;
			max-width: 200px;
			margin: 0 auto 16px;
			text-align: center;
			padding: 12px 16px;
			background-color: rgba(49,49,49,1);
			color: white;
			text-decoration: none;
			}

		/*This is for the document links*/
		a {
  			color: white;
  			text-decoration: none;}
		a:hover {
  			color:blue;
  			text-decoration: none;
  			text-shadow: 0px 0px 0px white;}
		a:active {
  			color: white;
  			text-decoration: none;}
	/*Index Page*/
		/*Company name at top header part of mobile website*/
		#Company_Name {
			text-align: left;
			margin-left: 0px;
			padding: 15px;
			padding-left: 30px;
			padding-right: 0px;

		}
		/*Company Logo*/
		#Logo {
			text-align: center;
			margin: 0px;
		}
		/*Official company name font under logo*/
		#company_name_font {
			text-align: center;
		}
		/*Big Shop Now Button under logo*/
		.Shop_now {
			text-align: center;
			padding: 10px;
		}
		/*Big carousel to hold news/ new products*/
		.my-carousel {
			margin: 60px 40px;
		}
		/*This is for the big banner and the top*/
		.banner-space {
			height: 250px;
			width: 90%;
		}
		/*My featured quote*/
		.featured_quote {
			text-align: center;}
		.quote_pt1 {
		text-align: center;}
		p.quote_pt2 {
		text-align: center;}
		/*This is a website box.*/
		.Box {
			margin-top: -750px;
			margin-left: 900px; 
			padding-left: 30px;
			padding-top: 20px;
			position: absolute; 
			z-index: auto;
			background-image: url("file:///Users/JohnParks/Desktop/J.%20Renzo/My%20Website/Website%20Revision/J_Renzo_website/Website_Boxes/Website_Box.png");
			background-repeat: no-repeat;
			background-size: 375px 230px; /*Edits the actual background photo size*/
			width: 375px;
			height: 200px;}
		/*This is a website box.*/
		.Box_1 {
			margin-top: -530px;
			margin-left: 900px; 
			position: absolute; 
			z-index: auto;
			padding-left: 30px;
			padding-top: 20px;
			background-image: url("file:///Users/JohnParks/Desktop/J.%20Renzo/My%20Website/Website%20Revision/J_Renzo_website/Website_Boxes/Website_Box.png");
			background-repeat: no-repeat;
			width: 375px;
			height: 200px;}
		/*This box contains the questions on my homepage.*/
		.Box_2 {
			margin-top: -340px;
			margin-left: 900px; 
			position: absolute; 
			z-index: auto;
			background-image: url("file:///Users/JohnParks/Desktop/J.%20Renzo/My%20Website/Website%20Revision/J_Renzo_website/Website_Boxes/Black_box.png");
			background-repeat: no-repeat;
			background-size: 420px 545px;
			width: 400px;
			height;605px;}
		.listening_question {
			width: 300px;
			padding-top: 10px;
			padding-bottom: 20px;
			padding-left: 25px;}
		.song_question {
			width: 300px;
			padding-top: 10px;
			padding-left: 25px;}
		.device_question {
			width: 300px;
			padding-top: 10px;
			padding-left: 25px;}
		/*social media icons*/
		.Social_Icons {
			margin-top: -80px;
			margin-left: 925px; 
			position: absolute; 
			z-index: auto;
			background-color: none;
			width: 300px;}
		.Social_Icons li {
			padding-left: 5px;
			padding-right: 5px;
		}
		.Social_Icons img:hover	{
			transform: scale(1.1);}
		/*Mobile Navigation styling*/
			/*Submenus appear after icon click*/
		/*Navigation styling*/
			/*Overall navigation*/
			.navigation {
			text-align: center;
			/*min-width:100px;
			max-width:1300px;*/}
			.navigation > ul {
			background-color: ;
			padding: 5px;}
			/*Navigation main individual tabs*/
			.navigation > ul > li {
			position: relative;
			padding-left: 25px;
			padding-right: 25px;
			padding-top: 5px;
			padding-bottom: 5px;
			z-index: 1;}
			/*Change of individual tab background when mouse hovers*/
			.navigation > ul > li:hover {
			background-color: ;}
			/*I am editing all of the submenus for the main tabs*/
			ul.sub_music {
			position: absolute;
			margin-top: 5px;
			right: 0px;
			background-color: #383838;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 5px;
			padding-bottom: 5px;
			opacity: 0;}
			ul.sub_acting {
			position: absolute;
			margin-top: 5px;
			left: 0.5px;
			background-color: #383838;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 5px;
			padding-bottom: 5px;
			opacity: 0;}
			ul.sub_modeling {
			position: absolute;
			margin-top: 5px;
			background-color: #383838;
			left: 0.5px;
			padding-left: 33px;
			padding-right: 33px;
			padding-top: 5px;
			padding-bottom: 5px;
			opacity: 0;}
			ul.sub_contact {
			position: absolute;
			margin-top: 5px;
			left: 0.5px;
			background-color: #383838;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 5px;
			padding-bottom: 5px;
			opacity: 0;}
			/*Submenu appearing when mouse hovers. I could also simplify this later too.*/
			.navigation li:hover .sub_music {
			opacity:1;}
			.navigation li:hover .sub_acting {
			opacity:1;}
			.navigation li:hover .sub_modeling {
			opacity:1;}
			.navigation li:hover .sub_contact {
			opacity:1;}
		/*This is for the boxes under the tabs making space.*/
		.my_bars {
		height:90px;
		min-width:1300px;
		max-width:1300px;}
		/* Introduction paragraph background black*/
		.paragraph_background img{
			position: absolute;
			z-index: 1;
			margin-top: -450px;
			margin-left:15px;}
		/*Introduction Explanation*/
		.intro_explained {
			position: absolute;
			z-index: auto;
			margin-top:-440px;
			margin-left:45px;
			z-index: 2;
			background-color: none;
			text-align: left;
			font-family: Monotype Corsiva;}
		.intro {
		font-family: Monotype Corsiva;}
		/*Welcome video text*/
		.welcome_video{
			margin-top: -450px;
			margin-left: 900px; 
			position: absolute; 
			z-index: 1;}
		/*Welcome video background*/
		.welcome_vid_background{
			margin-top: -450px;
			margin-left: 850px;
			background-size: 500px 500px; 
			position: absolute; 
			z-index: auto;}
		/*Actual welcome video*/
		.website_video {
		position: absolute;
		z-index: 2;
		margin-top: -425px;
		margin-left: 875px;}
		/*Word slides*/
		/*Makes a space in document for slides*/
		.slides {
			width:900px;
			height:325px;
			margin-left:10px;}
		/*Slides*/	
		slider {
			display: block;
			height: 300px;
			width: 1325px;
			position: absolute;
			overflow: hidden;}
		slider > * {
			position:absolute;
			display: block;
			height: 300px;
			width: 1297px;
			background-color: grey;
			animation: slide 35s infinite;
			overflow: hidden;}
		slide:nth-child(1) {
			left:0%;
			animation-delay: -1s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(2) {
			animation-delay: 2s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(3) {
			animation-delay: 5s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(4) {
			animation-delay: 8s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(5) {
			animation-delay: 11s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(6) {
			animation-delay: 14s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(7) {
			animation-delay: 17s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(8) {
			animation-delay: 20s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(9) {
			animation-delay: 23s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(10) {
			animation-delay: 26s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(11) {
			animation-delay: 29s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide:nth-child(12) {
			left:0%;
			animation-delay: 32s;
			background-image: url();
			background-size: cover;
			background-position: center;}
		slide p {
			font-family: comfortaa;
			font-size: 70px;
			text-align: center;
			display: inline-block;
			width: 1297px;
			margin-top:100px;
			color: #fff;}
		@keyframes slide {
		0% { left: 100%; width: 100%;}
		5% { left: 0%;}
		25% { left:0%}
		30% { left: -100%; width: 100%;}
		30.0001% { left: -100%; width: 0%;}
		100% { left: 100%; width: 0%;}}
		/*Words of wisdom.*/
		.words1 {
		position: absolute; 
		margin-top:-245px;
		margin-left:400px;}
		.words2{
		position: absolute; 
		margin-top:-180px;
		margin-left:500px;}
		.words3{
		position: absolute; 
		margin-top:-175px;
		margin-left:825px;}
		.words4{
		position: absolute; 
		margin-top:-80px;
		margin-left:850px;}
		/*Boarder for the slides at bottom of homepage*/
		.slider_frame {
		margin-top:-340px;}
		.slider_frame img{
		height: 320px;
		width:1350px;}
/*Top sign in/my account/cart icons*/
#mobile_main_icons {
	text-align: right;
	margin-right: 0px;
	margin-left: 0px;
	padding: 15px;
	margin-top: 25px;
	padding-left: 0px;
	padding-right: 30px;
	width: 100%;
	position: relative;
	top: -120px;
	}
/*Fixing top icons ul to make whole page width 100%*/
.top_icons ul {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
/*Fixing hamburger menu at the top of mobile website*/
#mobile_menu {
	position: relative;
	top: 12px;
	}
	/*Editing the top little menu sign in button*/
.top_icons {
	width: 100%;
	padding-right: 50px;
}
.top_icons li {
	padding: 10px;
	/*filter: grayscale(100%);*/
	}
.sign_in {
	position: relative;
	top: -5px;
	}
.sign_in.button {
	background-color: transparent;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
	}
.sign_in_button {
	background-color: transparent; 
	border-radius: 4px;
	padding: 5px 15px;
	color: white; 
	border: 1px solid white;
	}
.sign_in_button:hover {
	background-color: #e7e7e7;
	color: black;
	}
/*Creating a section for latest items*/
.latest {
	height: 100px;
	margin-left: 25px;
}
/*Editing The Index Page Footer*/
footer {
	background-color: black; opacity: 50%;
	border-radius: 12px 12px 0px 0px;
	margin: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	}
		hr {
			opacity: 20%;
			position: absolute;
			bottom: 0;
		}
		.footer_columns {
			margin-top: 100px;
			margin-bottom: 100px;
		}
		.footer_columns:after {
			content: "";
    		display: none;
    		clear: both;
		}
		.Company {
			text-align: left;
			margin-left: 50px;
			width: 100px;
			height: 100px;
		}
		.Company ul {
			margin-top: 5px;
		}
		.Company ul li {
			display: list-item;
			margin-left: -45px;
		}
		.Company li {
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		.Connect {
			text-align: center;
			margin-top: -102px;
			text-align: center;
			width: 100%;
			height: 100px;
		}
		.Social_Icons_Footer {
			text-align: center;
			margin: 0;
			width: 95%;
			height: 30px;
			filter: grayscale(0%);
		}
		.Social_Icons_Footer li {
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 0px;
			padding-bottom: 5px;
		}
		.Subscribe {
			text-align: right;
			height: 100px;
			width: 100%;
			margin-top: -102px;
		}
		.email_form {
			margin: 10px;
		}
		#Footer_list {
			filter: opacity(85%);
			text-align: center;
		}
		/*Option to switch to desktop version of website*/
		.desktop {
			filter: opacity(70%);
			text-align: center;
			padding: 20px;
		}
		.desktop a:hover {
			text-decoration: underline;
		}
		/*Copyright section*/
		.copyright {
			position: absolute;
			bottom: 0;
			margin-bottom: -20px;
			filter: opacity(70%);
		}
/*///////////////////////////////// -------------End of Index Page -------- //////////////////////////////////////////////*/