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

.mainSection{
	height: 100vh;
}

.prodImg{
	bottom: -200px;
	width: 700px;
}

}


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

.container{
	max-width: calc(100% - 50px);
}

nav{
	width: calc(100% - 50px);
	left: 0;
	right: 0;
	margin: auto;
}

.navLine{
	width: 150px;
}

.aboutSection p {
    max-width: 500px;
}

.products2{
	max-width: 50%;
}

.gallerySection{
	padding: 120px 0;
}

.colaImg{
	right: -100px;
}

.orangeImg{
	left: -150px;
}

.box1, .box2, .box3{
	position: static;
	margin: 10px;
	border-radius: 15px;
}

.leave4{
	top: -150px;
	left: 220px;
}

.gurt{
	width: 200px;
	top: -100px;
}

}



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

.offerBox{
	margin-top: 150px;
}

.prodImg{
	bottom: -250px;
}

.line{
	width: 50%;
}

.colaName {
	font-size: 100px;
	margin-top: 105px;
}

.colaImg {
    right: -150px;
}

.orangeImg {
    left: -200px;
}

.orangeName{
	font-size: 100px;
	margin-top: 105px;
}

.vitaminName{
	font-size: 80px;
	margin-top: 130px;
}

.vitaminImg{
	right: -50px;
}

.missionSection{
	background-position: top;
}

.coreSection{
	margin-top: 200px;
}

.cores{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.videoBox{
	width: 100%;
}

#myBtn5{
	top: 230px;
}

}



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

nav{
	display: none;
}

.mobNav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 9;
	margin-top: 20px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  display: block;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.offerBox{
	margin-top: 50px;
}

.arrow{
	display: none;
}

.prodImg {
    bottom: -200px;
}

.circle{
	bottom: -100px;
}

.circle3{
	right: -250px;
	top: -150px;
}

.circle2{
	left: -350px;
	top: -50px;
}

.aboutSection{
	height: 650px;
}

.products2{
	display: none;
}

.aboutSection p{
	max-width: 100%;
	z-index: 5;
}

.vitaminImg{
	right: -150px;
}

.box1, .box2, .box3{
	width: 100%;
	max-width: 100%;
}

.box1 p{
	max-width: 500px;
	font-size: 24px;
}

.box2 p{
	max-width: 500px;
	font-size: 24px;
}

.box3 p{
	max-width: 500px;
	font-size: 24px;
}

.leave4 {
    top: 150px;
    left: 350px;
}

.gant{
	z-index: 5;
}

.missionSection{
	padding-bottom: 50px;
}

.gallerySection{
	padding: 50px 0;
	padding-bottom: 100px;
}


.prodCard{
	width: 100%;
	max-width: calc(100% / 3 - 15px);
}


}


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

.prodImg{
	bottom: -400px;
	width: 100%;
}

.colaImg {
    right: -300px;
}

.orangeImg {
    left: -400px;
}

.vitaminImg {
    right: -300px;
}

.footerNavItems{
	display: none;
}

.patternOrg {
    right: -500px;
    top: -200px;
}

.leave{
	left: -200px;
}

.leave2{
	right: -200px;
}

}



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

.prodImg{
	bottom: -200px;
}

.btnBox{
	display: none;
}

.aboutSection{
	height: 750px;
}

.colaImg {
    right: 0px;
    left: 0;
    margin: auto;
}

.colaName{
	display: none;
}

.orangeName{
	display: none;
}

.vitaminImg {
    right: 0;
}

.vitaminName{
	display: none;
}

.orangeImg {
    left: 0px;
}

.prodCard{
	width: 100%;
	max-width: calc(100% / 2 - 15px);
}

}



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

.container {
    max-width: calc(100% - 20px);
}

h2, h1{
	font-size: 48px;
}

.prodImg{
	bottom: -100px;
}

.aboutSection{
	height: 850px;
}

.colaImg {
    left: -150px;
}

#myBtn5 {
    top: 100px;
}

.addressBox{
	margin-bottom: 50px;
}

.mainSection{
	height: 90vh;
}

.btnBox{
	display: block;
}

.aboutSection{
	padding: 50px 0;
}

.colaImg {
    left: -200px;
}

.orangeImg {
    left: -150px;
}

.vitaminImg{
	right: -50px;
}

.box1 p{
	max-width: 100%;
	font-size: 20px;
}

.box2 p{
	max-width: 100%;
	font-size: 20px;
}

.box3 p{
	max-width: 100%;
	font-size: 20px;
}

#myBtn5 {
    top: 70px;
}

.prodCard{
	width: 100%;
	max-width: 100%;
}


}