.theBox {

	background-color: black;
	width: 86%;
	margin: auto;
	position: relative;
	margin-top: 5%;
}
 body {

 	
 	margin: auto;
 	background-color: black;

 }

 img {

 	max-width: 100%;
 	/*display: block;*/
 	margin: auto;
}
 
 h1 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 28px;
}

h2 {

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: lighter;
	line-height: 26.4px;
	word-spacing: 1px;
	letter-spacing: 1px;
}

p {

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 60px;

}

@media only screen and (max-width : 799px) and (min-width: 320px ) {
	
	
.main-container {
	height: 400px;
    overflow: scroll;
	margin: auto;
	background-color: grey;

}

.section-one {
width: 100%;
display: flex;

}

.section-one-left {
display: flex;
height: 300px;
width: 60%;


}

.section-one-right {
width: 40%;
height: 300px;


}

.section-two {

display: flex;
width: 100%;

}

.section-two-left {

width: 40%;

}

.section-two-top {

	height: 200px;
	

}

.section-two-bottom {

	height: 200px;
	

}

.section-two-right {

	width: 60%;

}

.section-two-right-top {
 display: flex;


}

.section-two-right-topleft {
width: 100%;
height: 400px;

}






.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/2.jpg');
    width: 100%;
}

.fill2 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/1.jpg');
 	height: 100%;
    width: 100%;
}

.fill3 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/3.jpg');
 	height: 100%;
    width: 100%;
}

.fill4 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/4.jpg');
 	height: 100%;
    width: 100%;
}

.fill5 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/5.jpg');
 	height: 100%;
    width: 100%;
}


	.first {
		flex-direction: column;
		height: 201px;
		position: relative;
		margin: auto;
		opacity: 1;
	}

	
	.left {
		min-width: 100%;
		height: 50%;
		background-color: black;
		display: flex;
		margin: auto;
		opacity: 1;
	}
	
	.right {
		min-width: 100%;
		height: 50%;
		background-color: black;
		text-align: center;
		margin: auto;
		color: white;
		display: flex;
    	flex-direction: column;


	}

	.third {
		margin-top: 20%;
		width: 100%;
		/*background-color: #191919;*/
		text-align: center;
		position: absolute;
	}
 	
	
	.footer {
		min-width: 100%;
		min-height: 236px;

	}

	.theBox {
		margin: auto;
		margin-top: 2%;
	}

	.image {

		margin: auto;

	}
	img {
		max-width: 100%;
	}
	.menu {
	height: 40px;
	width: 40px;
	
	margin: auto;

	}
	ul {
		margin: auto;
		display: none;
	}

	

	ul {
	  display: inline;
	  margin: 0;
	  padding: 0;
	}
	
	
	
	ul li:hover {
		background: #555;
	}
	
	ul li:hover ul {
		display: block;
	}
	
	ul li ul {
	      position: absolute;
    width: 100%;
    display: none;
    z-index: 2;
	}
	
	ul li ul li { 
	  background: #555; 
	  display: block; 
	}
	
	ul li ul li a {
		display:block !important;
	} 
	
	ul li ul li:hover {
		background: #666;
	}
	
	div a {
	    text-decoration: none;
	    color: white;
	    font-size: 20px;
	    padding: 15px;
	    display:inline-block;
	    text-align: center;
    	font-family: helvetica;
	}

ol,
 ul {

	margin: auto;
}

	li {




	}

.arow {
	flex-direction: row;
	display: flex;
	position: absolute;
	width: 100%;
	margin-top: 25%;
	z-index: 1;
}

.display-left {
	color: white;
	margin: auto;
	border-radius: 15%;
	padding: 3%;
   	margin-left: 0%;
    background-color: gray;
    opacity: 0.6;
}

.display-right {
	color: white;
	margin: auto;
	padding: 3%;
	opacity: 0.6;    
    margin-right:0%;
    background-color: gray;
        border-radius: 15%;
}	

.main {
		position: relative;
		max-height: 100%;
		overflow: hidden;
	}
	

	.second {
	flex-direction: column;
	display: flex;
	width: 100%;
	
	}

	.left2 {


	}

	.right2 {



	}

	.textbox {
	
	position: absolute;
	display: flex;
	width: 100%;

}


.text {

	width: 900px;
	height: 430px;
	background-color: black;
	opacity: 0.7;
	margin: auto;

	padding-left: 10%;
    padding-right: 10%;
    display: flex;
    padding-top: 3%;
    color: white;
    flex-direction: column;
    overflow: scroll;



}

}

@media only screen and (max-width: 1024px)  {

	.theBox {
		min-width: 100%;
		
	}
	
}




@media only screen and (min-width: 800px )  {

	.menu {

		display: none;
}

	.current {
		display: flex;
	}


.first {

 	display: flex;
 	width: 100%;
 	height: 100px;
 	position: absolute;
 	opacity: 0.70;
 	z-index: 2;
 	background-color: black;
 }


 .left {
 	
 	margin: auto;

 }

 .right {

 	

	margin: auto;
	
 	

 }

.image {

	margin: auto;
}


.second {
	flex-direction: column;
	display: flex;
	width: 100%;
	/*height: 500px;*/

}

.main {

max-width: 100%;
/*height: auto;*/
background-color: black;
overflow: scroll;
/*position: absolute;*/
/*height: 700px;*/
/*display: flex;*/


}


.arow {
	z-index: 1;
	display: flex;
	position: absolute;
	width: 100%;
	margin-top: 30%;
	}

.display-left {
color: white;
margin: auto;
		padding-left: 0%;

padding: 3%;
    opacity: 0.6;
  
    background-color: gray;
        border-radius: 15%;
        margin-left: 0%;
}

.display-right {
color: white;
margin: auto;

padding: 3%;
    
   opacity: 0.6;
    background-color: gray;
        border-radius: 15%;
        margin-right: 0%;
}


.menu {
	width: 10%;
	padding: 2%;
	margin: auto;
}

ul li {
		
	display: inline-block;
	/*margin: 10px;*/
	}

ul li:hover {
		color: white;
	
	
	}

ul li ul li:hover {
	
		background: #191919;
	
	}


div a {
	    text-decoration: none;
	    color: #b7b7b7;
	    font-size: 20px;
	    padding: 15px;
	    /*display:inline-block;*/
	    text-align: center;
    	font-family: helvetica;
	}


.footer {
	margin: auto;
	/*width: 10%;*/
}

.third {
	position: absolute;
	z-index: 1;
	display: flex;
    width: 100%;
    height: 100px;
    margin: auto;
    
}



footer1 {
	float: left;

}

footer2 {
margin-left: 10%;
float: left;

}

footer3 {

float: left;
margin-left: 10%;
width: 24%;
}

.product {
	
	position: absolute;
	display: flex;
	width: 100%;

}


.prod {

	width: 100%;
	height: 440px;
	background-color: black;
	opacity: 0.7;
	margin: auto;
	margin-top: 150px;

}

.textbox {
	
	position: absolute;
	display: flex;
	width: 100%;

}


.text {

	width: 900px;
	height: 400px;
	background-color: black;
	opacity: 0.7;
	margin: auto;
	margin-top: 150px;
	padding-left: 10%;
    padding-right: 10%;

    padding-top: 3%;
    padding-bottom: 3%;
    color: white;
    flex-direction: column;
    overflow: scroll;
}


.main-container {

	margin: auto;


}

.section-one {
width: 100%;
display: flex;

}

.section-one-left {
display: flex;
height: 500px;
width: 60%;


}

.section-one-right {
width: 40%;
height: 500px;


}

.section-two {

display: flex;
width: 100%;

}

.section-two-left {

width: 40%;

}

.section-two-top {

	height: 300px;
	

}

.section-two-bottom {

	height: 300px;
	
}

.section-two-right {

	width: 60%;

}

.section-two-right-top {
 display: flex;


}

.section-two-right-topleft {
width: 100%;
height: 600px;
}

.section-two-right-topright {
width: 100%;
height: 600px;

}





.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/2.jpg');
    width: 100%;
}

.fill2 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/1.jpg');
 	height: 100%;
    width: 100%;
}

.fill3 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/3.jpg');
 	height: 100%;
    width: 100%;
}

.fill4 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/4.jpg');
 	height: 100%;
    width: 100%;
}

.fill5 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/5.jpg');
 	height: 100%;
    width: 100%;
}

.fill6	{
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/6.jpg');
 	height: 100%;
    width: 100%;
}

.fill7 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/7.jpg');
 	height: 100%;
    width: 100%;
}

.fill8 {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('images/8.jpg');
 	height: 100%;
    width: 100%;
}