:root {
	--page-text-color: #000;
	--page-background-color: #fff;

	--action-color-green: #00aaad;
	--action-color-red: #ee2e3b;

	--body-h-padding: 70px;
	--body-v-padding: 30px;

	--body-font-size: 12px;

	--header-text-size: 20px;

	--logo-size: 50px;
	--logo-aspect-ratio: 2.73;
	--logo-v-padding: 8px;	

	--swiper-pagination-bullet-horizontal-gap: 7px;
	/*--swiper-theme-color: #00aaad;
	--swiper-pagination-bullet-inactive-color: #00aaad;*/
	
	--swiper-theme-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    
	--swiper-pagination-bullet-size: 10px;
	--swiper-pagination-bullet-inactive-opacity: .3;

	--modal-padding: 45px;

	--shop-info-padding: 30px;
}

body {
	font-family: "Evolventa",CenturyGothic,AppleGothic,sans-serif;
	font-size: var(--body-font-size);
	color: var(--page-text-color);
	background-color: var(--page-background-color);
}

header {
	padding: var(--body-v-padding) var(--body-h-padding);
}

main {
    height: calc(var(--screen-height) - 2 * var(--body-v-padding) - var(--logo-size));
    overflow-x: hidden;
}

h1 {
    font-size: var(--header-text-size);
}

a, a:active, a:hover, a:visited { 
	color: var(--action-color-red) !important;
	text-decoration: none;
}

.logo-container-header {

}

.logo-container-header-holder {
	padding: var(--logo-v-padding) 0;
	height: var(--logo-size);
	/*width: calc(var(--logo-aspect-ratio) * var(--logo-size) );
	background-color: #eee;*/
}

.logo-container-header-holder img {
	height: 100%;
}

.phone-header {
	padding: var(--logo-v-padding) 0;
	height: var(--logo-size);
	line-height: var(--logo-size);
	font-size: calc( var(--logo-size) / var(--logo-aspect-ratio) );
}

.action-green,
.shop-list-item h1 {
	color: var(--action-color-green);
}

.action-red, 
.shop-list-item.shown h1 {
	color: var(--action-color-red);
}

.shop-sides-list {
	padding: var(--body-v-padding) var(--body-h-padding);
	background-color: rgba(255,255,255,.8);
	z-index: 5;
}

.shop-address { opacity: .85 }

.shop-address-address {
	font-size: 1.1em;
}

.shop-list-item-info { padding-bottom: var(--shop-info-padding); }

#shopPhotoSlider .swiper-pagination {
	bottom: var(--body-v-padding);
}

#shopPhotoSlider .swiper-pagination::before {
    content: "";
    background-color: var(--action-color-red);
    border-radius: 40px;
    width: 260px;
    height: 44px;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(calc(-50% - 5px));
}

#shopPhotoSlider .swiper-pagination-bullet { transition: .2s ease-out; }

#shopPhotoSlider .swiper-pagination-bullet-active,
#shopPhotoSlider .swiper-pagination-bullet:hover {
	transform: scale(1.2);
}

.page-background {
    opacity: .4;
    filter: brightness(1.4) grayscale(.8);
}

.slider-btn {
    position: absolute;
    left: 50%;
    bottom: var(--body-v-padding);
    z-index: 50;
    font-size: 24px;
    height: 32px;
    line-height: 32px;
    margin-bottom: -6px;
    color: #fff;
    /*color: var(--action-color-red);*/
    /*transition: .3s ease-out;*/
}

.slider-btn.prev-btn {
	margin-left: -100px;
}

.slider-btn.next-btn {
	margin-left: 80px;
}

.slider-btn:hover {
	transform: scale(1.2);
}

#shopPhotoSlider .slider-btn {
    font-family: Calibri, Arial, serif;
}

.red-btn {
    background-color: var(--action-color-red);
    padding: 7px 25px;
    font-weight: 700;
    border-radius: 25px;
    color: #fff;
}

.red-btn:hover { opacity: .8  }

.call-back-btn { font-size: 1.1em; }

.screen-holder {
	z-index: 555;
	background-color: rgba(0,0,0,.7);
}

.screen-holder .modal-win {
	background-color: var(--page-background-color);
	margin: auto;
    font-size: 16px;
    padding: var(--modal-padding);
}

.modal-win .close-modal {
	width: calc(var(--modal-padding) - 10px);
    height: calc(var(--modal-padding) - 10px);
    text-align: center;
    line-height: calc(var(--modal-padding) - 10px);
    border-radius: 50%;
    margin-top: 5px;
    font-size: calc(var(--modal-padding) / 3);
    color: #aaa;
    margin-right: 5px;
    transition: .2s ease-out;
}

.modal-win .close-modal:hover {
	background-color: #f5f5f5;
	color: var(--action-color-green);
}

.modal-win .inputCaption {
    margin-bottom: 0;
    margin-top: 30px;
}

.modal-win .inputCaption sup {
    font-size: 20px;
    position: relative;
    top: 0px;
}

.modal-win input {
    padding: 10px;
    width: 100%;
    border: 1px solid #ccc;
  	outline: none !important;
}

.modal-win input.error {
	border-color: var(--action-color-red);
}

.modal-win h1 { font-size: 26px; }

@media (min-width: 1600px) {

}

@media (max-width: 1599px) and (min-width: 1400px) {
	:root {
		--logo-size: 40px;
		--logo-v-padding: 4px;	
		--logo-aspect-ratio: 2;
	}
}

@media (max-width: 1399px) and (min-width: 1200px) {
	:root {
		--logo-size: 35px;
		--logo-v-padding: 3px;	
		--logo-aspect-ratio: 1.5;
		--header-text-size: 16px;
		--body-h-padding: 50px;
	}
}

@media (max-width: 1199px) and (min-width: 1024px) {
	:root {
		--logo-size: 35px;
		--logo-v-padding: 3px;	
		--logo-aspect-ratio: 1.8;
		--header-text-size: 16px;
		--body-h-padding: 40px;
		--shop-info-padding: 20px;
	}

	.shop-timetable-wrapper, .shop-phone-wrapper { width:  100%;	}
	.shop-working-time {margin-bottom: 2px;}
}

@media (max-width: 1023px) and (min-width: 740px) {
	
}

@media (max-width: 580px) {
	:root {
		--body-h-padding: 15px;
	    --body-v-padding: 15px;
	    --body-font-size: 11px;
	    --header-text-size: 16px;
	    --logo-size: 30px;
	    --logo-aspect-ratio: 1.73;
	    --logo-v-padding: 2px;
	    --shop-v-padding: 100px;
	    --shop-info-padding: 15px;
	}

	.shop-sides-list {
	    padding: var(--body-v-padding) var(--body-h-padding) var(--shop-v-padding) ;
	}

	.shop-sides-list > .flex {
		max-height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
		display: block;

	}

	.shop-sides-list > .flex .row { margin-left: 0; margin-right: 0; }
}