* {margin:0px; padding:0px; border:0; box-sizing:border-box;}
body {position:relative; min-width:320px; width:100vw; height:100vh; color:#000000; font-family:'Roboto', sans-serif; background-color:#ffffff; text-align:center; overflow-x:hidden;}
tbody {width:100%}
p {margin:15px 0; padding:0; font-size:18px; line-height:1.3;}
ol, ul {margin:0 0 0 20px;}
li {margin:0 0 5px 10px;}
a, a:link, a:visited, a:hover {color:inherit; text-decoration:underline; transition:.3s;}
a:hover {color:#e58600;}

div#back {position:fixed; top:0; left:0; width:100%; height:700px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}

div#top {position:fixed; left:0; top:0; width:100%; height:150px; overflow:hidden; transition:.3s; text-align:center; z-index:1000;}
div#hat {position:relative; display:inline-block; width:100%; max-width:1200px; height:100px; padding:0 25px; text-align:left;}
a#logo {position:absolute; display:inline-block; left:50px; top:25px; width:290px; height:81px; background-image:url(/Images/logo.png); background-position:left top; background-repeat:no-repeat; background-size:contain;}
div#phones {position:absolute; display:inline-block; right:300px; top:25px; width:450px; padding:5px 0 0 55px; background-image:url(/Images/phone.png); background-position:left top; background-repeat:no-repeat; text-align:left; color:#ffffff; transition:.3s;}
div#phones h2 {font-size:28px; line-height:28px; font-weight:bold; margin-bottom:5px;}
div#phones p {font-size:16px; line-height:16px; font-weight:normal; margin:0; padding:5px 0;}
a.phone:link, a.phone:visited {text-decoration:none;}
a.phone:hover {text-decoration:underline;}
div#time {position:absolute; display:inline-block; right:50px; top:25px; width:200px; padding:5px 0 0 55px; background-image:url(/Images/time.png); background-position:left top; background-repeat:no-repeat; text-align:left; color:#ffffff; transition:.3s;}
div#time h2 {font-size:28px; line-height:28px; font-weight:bold; margin-bottom:5px;}
div#time p {font-size:16px; line-height:28px; font-weight:normal; margin:0; padding:0;}
div#address {position:relative; display:none; text-align:left; color:#ffffff;}
div#address h2 {font-size:28px; line-height:28px; font-weight:bold; margin-bottom:3px;}
div#address p {font-size:14px; line-height:16px; font-weight:normal; margin:0; padding:0;}

a#phone {position:absolute; display:none; right:25px; top:25px; width:40px; height:40px; background-image:url(/Images/phone.png); background-position:50% 50%; background-repeat:no-repeat;}

div#main {position:relative; width:100%; margin-top:150px; transition:.5s;}
div#banner {position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:400px; transition:.3s;}
div.banner {width:90%; max-width:900px; padding:30px; background:rgba(0,0,0,.5); color:#ffffff; text-align:center;}
div.banner h2 {font-size:28px; line-height:40px; font-weight:normal; padding:0 0 10px 0; border-bottom:1px solid #777; text-shadow:0 1px 3px rgba(0,0,0,1);}
a.button:link, a.button:visited {display:inline-block; padding:10px 15px 10px 45px; margin-top:20px; color:#ffffff; font-size:20px; line-height:20px; text-decoration:none; text-transform:uppercase; background-color:#339f10; background-image:url(/Images/button.png); background-position:left top; background-repeat:no-repeat; border-radius:5px; transition:.3s;}
a.button:hover {background-color:#2be30e;}

div#options {position:relative; width:100%; min-height:200px; overflow:hidden; background:url(/Images/start.svg); background-position:center top; background-size:cover; display:flex; align-items:center; justify-content:center;}
div.options {width:100%; max-width:1000px; padding:70px 0; display:flex; flex-direction:row; justify-content:space-around;}
div.options div {position:relative; width:42%; height:240px; margin:0 1%; font-size:20px; line-height:24px; overflow:hidden;}
a.price:link, a.price:visited {position:absolute; bottom:0; left:20%; right:20%; display:inline-block; padding:10px 15px; margin:0; color:#ffffff; font-size:14px; line-height:1; text-decoration:none; text-transform:uppercase; background-color:#384053; border-radius:5px; transition:.3s;}
a.price:hover {background-color:#e58600;}

div#page {width:100%; min-height:100vh; background:white; text-align:center;}
div.text {display:inline-block; width:100%; max-width:1000px; padding:30px; text-align:left;}
div.text h2 {color:#e58600; font-size:28px; line-height:1; text-align:center; padding:10px 0; margin:0;}

div.price {width:100%; padding:25px; margin:0; display:flex; flex-direction:row;}
div.price div {width:19%; font-size:20px; line-height:24px; text-align:center; border-left:1px solid #ccc;}
div.price div.header {text-align:left; border:0;}
div.price strong {display:block; color:#18346e; font-size:28px; line-height:38px;}

div#photos {display:inline-block; position:relative; width:100vw; background:linear-gradient(45deg,#384053,#7a8499); overflow:hidden; text-align:center; padding:20px 0; margin:0 0 -10px 0;}
div#photos img {width:14.66%; margin:.5%; cursor:pointer; vertical-align:top; transition:.3s;}
div#photos img:hover {transform:scale(1.2); box-shadow:0 3px 10px #00000077;}
div#photos span {position:absolute; right:25px; bottom:10px; display:inline-block; background-color:#B71C1C; color:#ffffff; width:40px; height:40px; font-size:21px; line-height:1; text-align:center; margin:0; padding:9px 0 0 0; box-shadow:0 1px 3px #000;}

div#slider {display:none; position:relative; left:0; top:0; width:100%; height:100vh; text-align:center; padding:0; background-color:rgba(0,0,0,.9); background-position:50% 50%; background-repeat:no-repeat; background-size:contain; z-index:2000; transition:.5s;}
div#left {display:inline-block; width:70px; height:100%; position:absolute; left:0; top:0; background-image:url(/Images/arrowleft.png); background-position:50% 50%; background-repeat:no-repeat; cursor:pointer;}
div#right {display:inline-block; width:70px; height:100%; position:absolute; right:0; top:0; background-image:url(/Images/arrowright.png); background-position:50% 50%; background-repeat:no-repeat; cursor:pointer;}
div#close {display:inline-block; width:40px; height:40px; position:absolute; right:10px; top:10px; background-image:url(/Images/close.png); background-position:50% 50%; background-repeat:no-repeat; cursor:pointer;}

div#mapbuts {display:flex; justify-content:space-around; width:100%;}
div.address {display:inline-block; padding:10px 15px 10px 45px; background-image:url(/Images/mappoint.png); background-position:10px 5px; background-repeat:no-repeat; text-align:left; color:#000000; font-size:18px; line-height:1; cursor:pointer; transition:.3s;}
div.active {background-color:#FFEB3B; border:0; border-radius:5px;}

@media only screen and (max-width : 1130px), only screen and (max-device-width : 1130px){
	a#logo {left:25px;}
	div#phones {right:25px; top:25px;}
	div#time {display:none;}
	div.options div {height:320px;}
}
@media only screen and (max-width : 820px), only screen and (max-device-width : 820px){
	div#hat {height:auto; padding:25px;}
	div#top {height:100px;}
	a#logo {position:relative; left:0; top:0; width:150px; height:40px;}
	div#banner {height:300px;}
	div.banner h2 {font-size:24px; line-height:32px;}
	div.options {flex-wrap:wrap; padding:40px;}
	div.options div {width:48%;}
	div.options div p {font-size:16px; line-height:20px;}

	div.price {flex-direction:column; padding:0 25px; margin:0;}
	div.price div {width:100%; padding:10px 0; font-size:20px; line-height:24px; text-align:center; border:0; border-top:1px solid #ccc;}
	div.price div.header {text-align:center; border:0;}
	
	div#photos {position:relative; width:100%; height:auto; overflow:hidden; text-align:left;}
	div#photos div {display:inline-block; width:100%; height:auto; text-align:center;}
	div#photos img {width:32%; height:auto; margin:0 0 2px 0;}

	div#phones {display:none;}
	div#address {display:block; position:absolute; top:20px; left:200px;}
	a#phone {display:inline-block;}
	div#main {margin-top:150px;}
	div#mapbuts {flex-direction:column;}
	div.address {font-size:18px; line-height:1;}

}
@media only screen and (max-width : 660px), only screen and (max-device-width : 660px){
	div#back {top:100px;}
	div#top {height:150px;}
	div#address {display:block; position:relative; top:5px; left:0;}
	div#main {margin-top:150px;}
	div#banner {height:300px;}
	div.banner h2 {font-size:18px; line-height:24px;}
	div.text h2 {font-size:24px;}
	div.options {flex-wrap:wrap; padding:40px;}
	div.options div {width:98%; height:250px; margin:20px 0;}
}
@media only screen and (max-width : 400px), only screen and (max-device-width : 400px){
	div.banner h2 {font-size:16px; line-height:24px;}
	div.options div p {font-size:14px; line-height:18px;}

}