/* Cherrymall.com.ua style v13 */
/* based on contTheory-v13.css */

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

html {
	background-color: gray;
	width: 100%;
	height: 100%;

}

body {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 1em;
	width: 100%;
}

img {
	/* border: 1px solid black; */
	transition: .5s;
}

img:hover {
	transform: scale(1.1);
}

.op9 {
	opacity: .9;
}



/* COLORS */

.bldrd {
	color: rgba(165, 26, 29, 1); /* cherry bordo */
}

.wht {
	color: rgba(255, 255, 255, 1); /* white */
}

.grey {
	color: rgba(76, 82, 86, 1);
}

/* COLORS end */

/* MARGINS global */

/* top margin */

.vm15t {
	margin-top: 1.5vh;
}

/* PADDINGS GLOBAL */

/* Left paddings */

.hp15l {
	padding-left: 1.5vw;
}

.hp30l {
	padding-left: 3vw;
}

/* end of Right paddings */


/* Right paddings */

.hp5r {
	padding-right: .5vw;
}

/* end of Right paddings */

/* TYPO */

.sml {
	font-size: 85%;
}

.dbl {
	font-size: 150%;
}

.lght {
	font-weight: 300;
	font-style: italic;
}

.hlght {
	font-weight: 500;
}
/* end of TYPO */



#videoclip {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: 100;
}

.content {
	position: fixed;
	top:0;
	left: 0;
	/* background-color:rgba(30, 43, 210, 0.9); */
	background-color: rgba(0,0,0,.5);
	color: #f1f1f1;
	width: 100%;
	height: 100vh;
	z-index: 200;
}

.header {
	z-index: 900;
	height: 15vh;
	background-color: rgba(255, 255, 255, .9);
}

.cell-logo {
	/* background-color: black; */
	width: 25vw;
	height:12vh;
	margin-left: 2vw;
	margin-top: .2vh;
	/* border: 1px solid red; */
}

.cell-logo > img {
	/* border: 1px solid black; */
	transition: .5s;
}

.cell-logo > img:hover {
	transform: scale(1.1);
}

/* MID column in header */
.cell-mid {
	/* background-color: pink; */
	width: 45vw;
	height: 8vh;
	margin-left: 4vh;
	margin-top: 5.5vh;
}

.addr {
	font-size: 105%;
}

.phone {
	font-size: 105%;
}

/* end of MID column */



.cell-right {
	/* background-color: yellow; */
	width: 14vw;
	height: 12vh;
	margin-left: .5vw;
	margin-top: 1.4vh;
}

.cell-right > ul {
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	list-style: none;
	justify-content: space-around;
}

.cell-right > ul li {
	line-height: 15vh;
	font-size: 120%;
	transition: .4s;
}

.cell-right > ul li:hover {
	transform: scale(1.3);
}



/* end of .cell-right */

.float {
	display: flex;
	align-items: left;
}


nav {
	height: 6vh;
	background-color: rgba(255, 255, 255, 0.9);

}

nav ul {
	/* float: right; */
	list-style: none;
	display: flex;
	justify-content: space-around;
}

nav ul li {
	display: inline-block;
	line-height: 6vh;
	transition: .6s;
}

nav ul li:first-child {
	padding-left: 1vw;
}

nav ul li:last-child {
	padding-right: 2vw;
}

nav ul li:hover {
	transform: scale(1.2);
}

nav ul li a {
	position: relative;
	font-size: 110%;
	text-decoration: none;
	color: rgba(165, 26, 29, 1);
	font-weight: 500;
}

label #sign-one,
label #sign-two {
	font-size: 25px;
	color: rgba(165, 26, 29, 1);
	float: right;
	cursor: pointer;
	line-height: 6vh;
	margin-right: 25px;
	display: none;
}

#res-menu {
	display: none;
}

@media (max-width: 870px) {
	label #sign-one {
		display: block;
	}

	nav ul {
		position: fixed;
		display: block;
		width: 100%;
		height: 81vh;
		background: rgba(255, 255, 255, 0.9);
		top: 19vh;
		left: -100%;
		text-align: center;
		transition: .5s;
		z-index: 999;
	}

	nav ul li {
		display: block;
		margin: 20px 0;
		line-height: 4vh;
	}

	nav ul li a {
		font-size: 20px;
	}

	nav ul li:first-child {
		padding-left: 0;
	}

	nav ul li:last-child {
		padding-right: 0;
	}

	#res-menu:checked ~ ul {
		left: 0;
	}

	#res-menu:checked ~ label #sign-one {
		display: none;
	}

	#res-menu:checked ~ label #sign-two {
		display: block;
	}
}

/* /end navbar */

/* content-container */

.content-container {
	width: 100vw;
	height: 73vh;
	/* background-color: pink; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.container-banner {
	width: 40vw;
	height: 35vh;
	/* background-color: blue; */
	border: 2px solid white;
	text-align: center;
	opacity: .75;
}

.container-banner > a {
	color: rgba(255, 255, 255, 1);
	display: block;
}

.container-banner > h3 {
	font-family: 'Orelega One', cursive;
	font-size: 350%;
	line-height: 7vh;
}

.container-banner > h2 {
	font-family: 'Pacifico', cursive;
	font-size: 500%;
	line-height:11vh;
	margin-top: 4vh;
}

.container-banner > h4 {
	font-size: 200%;
	line-height:4vh;	
}


/* end of content container */

/* FOOTER */

.footer {
	width: 100vw;
	height: 6vh;
	background-color: rgba(165, 26, 29, .9);
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;

}

p.copyright {
	margin-left: 2.5vw;
	margin-top: 1.5vh;
	font-size: 90%;
}

/* FOOTER end */



/* RESPONSIVE */

/* iphone 5s screen ratio 40/71 catching in portrait & landscape modes */
@media screen 
  and (device-aspect-ratio: 40/71)
 /* and (device-width:320px) */ {
  	.float {
  		display: block;
  	}

  	.header {
  		height: 13vh;
  	}

  	.cell-logo {
  		height: 13vh;
  		width: 70vw;
		margin-left: 0;
		margin-top: 0;
  	}

  	.cell-mid {
  		height: 5vh;
  		width: 68vw;
  		margin-top: 0;
  		margin-left: 5vw;
  		position: fixed;
  		top:10.5vh;
  		left:0;
  	}

	.addr > i {
		display: none;
	}

	.addr > p {
		line-height: 1.5vh;
	}

	.addr > p span:first-child {
		display: none;
	}

	.addr > p span.sml {
		font-size: 70%;
	}

	.phone > i {
		display: none;
	}

	.phone > p {
		line-height: .9vh;
	}

	.phone > p span:first-child {
		display: none;
	}

	.phone > p span.sml {
		font-size: 60%;
	}

	.cell-right {
		display: none;
	}
		.container-banner {
	width: 90vw;
	height: 32vh;
	/* background-color: blue; */
	border: 2px solid white;
	text-align: center;
	opacity: .75;
	}

	.container-banner > h3 {
	font-family: 'Orelega One', cursive;
	font-size: 320%;
	line-height: 5vh;
	}

	.container-banner > h2 {
	font-family: 'Pacifico', cursive;
	font-size: 290%;
	line-height:9vh;
	margin-top: 2vh;
	}

	.container-banner > h4 {
	font-size: 180%;
	line-height:4vh;	
	}

}

/* iphone 6 scree ratio 375/667 in both modes */
@media screen 
   and (device-aspect-ratio: 375/667) {
	.float {
  		display: block;
  	}

  	.header {
  		height: 12vh;
  	}

  	.cell-logo {
  		height: 8vh;
  	}

  	.cell-mid {
  		height: 8vh;
  	}

	.cell-right {
		display: none;
	}
}

@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) {

    	.float {
  		display: block;
  	}

  	.header {
  		height: 13vh;
  	}

  	.cell-logo {
  		height: 13vh;
  		width: 70vw;
		margin-left: 0;
		margin-top: 0;
  	}

  	.cell-mid {
  		height: 5vh;
  		width: 68vw;
  		margin-top: 0;
  		margin-left: 5vw;
  		position: fixed;
  		top:10.5vh;
  		left:0;
  	}

	.addr > i {
		display: none;
	}

	.addr > p {
		line-height: 1.5vh;
	}

	.addr > p span:first-child {
		display: none;
	}

	.addr > p span.sml {
		font-size: 70%;
	}

	.phone > i {
		display: none;
	}

	.phone > p {
		line-height: .9vh;
	}

	.phone > p span:first-child {
		display: none;
	}

	.phone > p span.sml {
		font-size: 60%;
	}

	.cell-right {
		display: none;
	}
		.container-banner {
	width: 90vw;
	height: 32vh;
	/* background-color: blue; */
	border: 2px solid white;
	text-align: center;
	opacity: .75;
	}

	.container-banner > h3 {
	font-family: 'Orelega One', cursive;
	font-size: 320%;
	line-height: 5vh;
	}

	.container-banner > h2 {
	font-family: 'Pacifico', cursive;
	font-size: 290%;
	line-height:9vh;
	margin-top: 2vh;
	}

	.container-banner > h4 {
	font-size: 180%;
	line-height:4vh;	
	}

  }

/* iPhone 11 (2019) (19.5 / 9)*2  */

@media only screen and (min-width: 390px) and (max-width: 767px) {

    .float {
  		display: block;
  	}

  	.header {
  		height: 13vh;
  	}

  	.cell-logo {
  		height: 11vh;
  		width: 73vw;
		margin-left: 0;
		margin-top: 0;
		position: fixed;
		top:2vh;
  	}

  	.cell-mid {
  		height: 5vh;
  		width: 68vw;
  		margin-top: 0;
  		margin-left: 5vw;
  		position: fixed;
  		top:12.5vh;
  		left:0;
  	}

	.addr > i {
		display: none;
	}

	.addr > p {
		line-height: 1.5vh;
	}

	.addr > p span:first-child {
		display: none;
	}

	.addr > p span.sml {
		font-size: 75%;
	}

	.phone > i {
		display: none;
	}

	.phone > p {
		line-height: .9vh;
	}

	.phone > p span:first-child {
		display: none;
	}

	.phone > p span.sml {
		font-size: 70%;
	}

	.cell-right {
		display: none;
	}

	.container-banner {
	width: 90vw;
	height: 32vh;
	/* background-color: blue; */
	border: 2px solid white;
	text-align: center;
	opacity: .75;
	}

	.container-banner > h3 {
	font-family: 'Orelega One', cursive;
	font-size: 350%;
	line-height: 5vh;
	}

	.container-banner > h2 {
	font-family: 'Pacifico', cursive;
	font-size: 350%;
	line-height:9vh;
	margin-top: 3vh;
	}

	.container-banner > h4 {
	font-size: 200%;
	line-height:4vh;	
	}
}

@media only screen and (min-width: 375px) and (max-width: 767px) {

	    .float {
  		display: block;
  	}

  	.header {
  		height: 13vh;
  	}

  	.cell-logo {
  		height: 11vh;
  		width: 73vw;
		margin-left: 0;
		margin-top: 0;
		position: fixed;
		top:2vh;
  	}

  	.cell-mid {
  		height: 5vh;
  		width: 68vw;
  		margin-top: 0;
  		margin-left: 5vw;
  		position: fixed;
  		top:12.5vh;
  		left:0;
  	}

	.addr > i {
		display: none;
	}

	.addr > p {
		line-height: 1.5vh;
	}

	.addr > p span:first-child {
		display: none;
	}

	.addr > p span.sml {
		font-size: 75%;
	}

	.phone > i {
		display: none;
	}

	.phone > p {
		line-height: .9vh;
	}

	.phone > p span:first-child {
		display: none;
	}

	.phone > p span.sml {
		font-size: 70%;
	}

	.cell-right {
		display: none;
	}

	.container-banner {
	width: 90vw;
	height: 32vh;
	/* background-color: blue; */
	border: 2px solid white;
	text-align: center;
	opacity: .75;
	}

	.container-banner > h3 {
	font-family: 'Orelega One', cursive;
	font-size: 350%;
	line-height: 5vh;
	}

	.container-banner > h2 {
	font-family: 'Pacifico', cursive;
	font-size: 350%;
	line-height:9vh;
	margin-top: 3vh;
	}

	.container-banner > h4 {
	font-size: 200%;
	line-height:4vh;	
	}

}


/* Portrait and Landscape iPad Pro 10.5" */
@media only screen 
  		and (min-device-width: 834px) 
  		and (max-device-width: 1112px)
  		and (-webkit-min-device-pixel-ratio: 2) {
  			/* put styles here */

}

@media only screen 
  		and (min-device-width: 834px) 
        and (max-device-width: 834px) 
        and (orientation: portrait) 
        and (-webkit-min-device-pixel-ratio: 2) {

}

@media only screen 
  	    and (min-device-width: 1112px) 
        and (max-device-width: 1112px) 
        and (orientation: landscape) 
        and (-webkit-min-device-pixel-ratio: 2) {

}

/* end of iPad Pro 10.5" */