main {
    margin: 0;
}
* {	box-sizing: border-box;}
html {	height: 100%;	}main {	display:flex;	flex-direction:row;	flex-wrap: wrap;	margin-left: 0;}
nav {	position: sticky;	top: 0;	padding: 0;	font-size: 22px;	background-color: rgba(255,255,255,.65);	z-index: 100;}
.nav-buttons {	max-width:
1012px;	margin: 0 auto;}
nav ul {	margin: 0;	padding: 0;	list-style: none;	padding: 0 15px;}
nav li {	float: left;}
nav li.nav:hover {	background-color: #00ffcc;}
nav a {	text-decoration: none;	color: black;	padding: 15px;	display:inline-block;}
body {	margin: 0;	background-image: linear-gradient(90deg,aqua,aquamarine);	font-family: 'Roboto', sans-serif;	display: flex;	flex-direction: column;}
.wrapper {	max-width:
1012px;	margin: 0 auto;	display: flex;	flex-direction: column;	background: rgba(0,0,0,.2);}
header {	background: url('pics/header-bg.jpg');	height: 300px;	font-size: 24px;	margin: 0;	padding: 0;}
header h1{	margin: 40px 25px 0 75px;	padding: 0;}
header h2{	margin: 0 0 0 75px;	padding: 0;}
.main-text-content {	padding: 25px 45px 15px 45px;	font-size: 22px;}
.main-text-content h2{	margin: 0;}
.nyaralok-content {	display: flex;	flex-wrap: wrap;	flex-direction: column;}
.content h1 {	margin: 25px 0 0 65px;}
.nyaralok {	display: flex;	padding: 0;	flex-wrap: wrap;}
.nyaralok img {	height: 225px;}
.g-epulet,.e-epulet,.v-epulet {	background-color: white;	width: 300px;	margin: 25px 0;}
.g-epulet:hover,.e-epulet:hover,.v-epulet:hover {	box-shadow: 0px 0px 35px 8px #00ffcc;}
.g-epulet {	margin: 25px 31px;	position: relative;}
.e-epulet {	margin-left: 25px;}
.v-epulet {	margin-right: 25px;}
.nyaralok-text-content {	padding: 0 15px;	position: absolute;	top: 0px;	align-self: flex-start;}
.kornyek-pics {	display: flex;	flex-wrap: wrap;	justify-content: center;}
.kornyek-pics div{	background: rgba(255,255,255,.5);}
.kornyek-pics img {	margin: 25px;}
.reserve-title{	margin-left: 65px;}
.form-content {	display: flex;	flex-wrap: wrap;	width: 500px;}
.form-content .filler {	width: 300px;	flex-basis: auto;}
.form-content form {	max-width: 500px;	flex-basis: auto;	display: flex;	flex-wrap: wrap;}
.form-content form div .input-width,select,textarea {	width:
280px;	border: 3px solid #00ffcc;	background-color: rgba(255,255,255,.9);
margin-right: 0px;}
.form-content form .main-label {	margin: 10px 0;	display: inline-block;	width: 180px;}
.form-element {	display: flex;	margin: 10px 0;	max-width: 500px;	position: relative;	flex-wrap: wrap;}
.form-content>form>input {	margin-left: 314px;	border: 3px solid #00ffcc;	background-color: rgba(255,255,255,.9);	padding:5px;	margin-bottom: 15px}.g-epulet-checkbox {	margin-left:  22px;	margin-right:  22px;}
.g-epulet-checkbox,.e-epulet-checkbox,.v-epulet-checkbox {	border: 3px solid #00ffcc;	padding: 7px 2px;	background-color: #10b594;}
.g-epulet-checkbox,.e-epulet-checkbox,.v-epulet-checkbox label {	color: white;}
.people {	display: flex;	align-items: center;	/*! position: absolute; */	/*! left: 180px; */}.people>input {	width: 50px;	margin: 0 15px;	border: 3px solid #00ffcc;}
.gallery-title {	margin-left: 75px;}
.gallery {	display: flex;	flex-wrap: wrap;	justify-content: center;}
.gallery-element {	padding: 0;	margin: 20px;	border: 3px solid #00ffcc;}
button {	border: 3px solid #00ffcc;	margin-bottom: 15px;	position: absolute;	bottom: 0px;	left: 95px;}
button h2 {	margin: 5px;}
.mail-sent{	margin: 0 auto;	font-size: 24px;}
.mail-sent p{	color: green;}
	.mail-not-sent p{	color: red;}
@media screen and (max-width: 768px) {.form-content form div .input-width,select,textarea {	width: 200px;	height: 39px;}
.line {	width: 30px;	height: 3px;	background: black;	color: black;	margin: 5px;	z-index: 3;}
nav {	position: relative;	height: 100%;}
nav ul{ 	height: 100%;	display: flex;	flex-direction: column;	align-items: center;	margin-top: 50px;}
.nav-buttons {	position: fixed;	background: #00ffcc;	height: 100vh;	width: 100%;	flex-direction: column;	clip-path: circle(100px at 90% -10%);	-webkit-clip-path: circle(0px at 90% -10%);	transition: all 1s ease-out;	pointer-events: none;  }.nav-buttons.open {	clip-path: circle(1000px at 90% -10%);	-webkit-clip-path: circle(800px at 90% -10%);	pointer-events: all;	z-index: 3;}
.nav-buttons li {	opacity: 0;	list-style-type: none;   }.nav-buttons li a {	font-size: 25px;  }.nav-buttons li {	transition: all 0.5s ease 0.2s;  }li.fade {	opacity: 1;  }.hamburger {	position: absolute;	cursor: pointer;	right: 10px;	top: 10px;    z-index: 4;  }main {	flex-wrap: wrap;	margin: 0;}
.calendar{	max-width: 500px;	height: 1100px;	position: static;}
.calendar iframe{	height: 1100px;	max-width: 300px;	position: static;	border: 0;	margin: 0 100px;}
footer .contacts {	padding: 0;}
footer .social {	padding: 0;}
footer>div>p {	margin-left: 15px;}
.main-text-content {	padding-left: 0;	padding-right: 0;}
.e-epulet,.v-epulet,.g-epulet {	margin: 25px 0;}
main {	margin: 0;}
}.calendar{	width: 550px;	height: 1100px;	position: relative;}
.main-checkbox {	display: flex;	flex-wrap: wrap;}
input#arrive-date,input#departure-date {	border: 3px solid #00ffcc;}
.calendar iframe {	height: 100%;	width: 90%;	position: absolute;	right: 0;	top: 0;	bottom: 0;	border: 1px solid rgba(0,0,0,.2);}
img.alaprajz {	width: 256px;	margin: 22px;}
.g-epulet img.alaprajz {	width: 154px;	margin: 22px 73px;}
.nyaralok>div>div {	position: relative;}
img:hover {	cursor: pointer;}
button:hover {	cursor: pointer;}
.gallery-element img{	width: 200px;}
footer {	background-color:#3F3F3F;	display: flex;	flex-wrap: wrap;}
.contacts {	padding: 0 75px;}
.social {	padding: 0 75px;}
footer>div>p {	font-size: 24px;}
footer ul {	list-style-type: none;}
footer li {	display: flex;	flex-direction: row;}
footer p {	color: white;	margin-left: 10px;}
.reverse {	unicode-bidi: bidi-override;	direction: rtl;}
.content2 {	display: flex;}
.reservation-form,.calendar-frame {	max-width:
550px;}

.phone,.facebook-container {
    float: right;
}
.phone,.facebook {
    padding: 15px;
    display: flex;
}
.phone img,.facebook img {
    height: 24px;
    opacity: 0.6;
}
.phone p,.facebook p {
    margin: auto 0;
    padding-left: 8px;
    font-size: 12px;
    color: rgba(0,0,0,.6);
}
.phone img {
    cursor: default;
}



.wrapper-content {
    display: flex;
    flex-wrap: wrap
}
.content2 {
    padding: 25px;
    width: 462px; 
}
.calendar-frame {
    padding-top: 25px;
}
.reservation-form-content {
    margin-left: 10px;
}
.reservation-form-element {
    display: flex;
    justify-content: space-between;
    padding: 5px 2px;

}
.reservation-form-element input,label {
    
    margin: 5px 1px;
}
.reservation-form-element>input {
    border: 3px solid #00ffcc;
    height: 40px;
}
.reservation-form-element input {
    border: 3px solid #00ffcc;
}
.reservation-form-element-textarea {
    margin-right: 40px;
}
.textarea-label {
    padding-left: 0;
}
.form-submit {
    width: 100%;
    display: flex;
    justify-content: center;
}
.form-submit input {
    border: 3px solid #00ffcc;
    font-size: 20px;
    height: 45px;
    margin-top: 10px;
}
iframe {
    width: 550px;
    border: 1px solid #00ffcc;
    height: 1125px;
}
.nav-buttons ul {
    padding: 0;
}
.phone a {
    display: flex;
}
.phone {
    padding: 0;
}
.g-epulet>img {
    padding: 0 65.625px;
}
.titleError-container {
    display: flex;
    justify-content: space-between;
}
p.error {
    margin: auto 6px;
}