/*
Version : 1.0
*/

/*----------Table of contents-----------

- Basic
- Preloader
- Logo
- Slides
- Single Image
- Youtube Video
- Vimeo Video
- Sidebar
  - Sidebar Toggle Button
- Content
  - Coming Soon Text
  - Coming Soon Message
  - Countdown
  - Buttons
  - Social Networks
- Page
  - Page Close Button
  - Newsletter Form
  - Contact Address
- Media

----------End Table of contents-----------*/

/***---------- Basic -----------***/

html,
body {
	height: 100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	color: #2c2d2d;
	background: #ebf2f3;
}

/***---------- Preloader -----------***/

.preloader {
	position: fixed;
	z-index: 999999;
	display: table;
	width: 100%;
	height: 100%;
	table-layout: fixed;
	background: url(../images/preloader.gif) no-repeat center #fff;
}

/***---------- Logo -----------***/

.logo {
	/*position: fixed;*/
	/*z-index: 4;*/
	/*top: 20px;*/
	/*left: 20px;*/
	margin-bottom: 50px;
}

/***---------- Slides -----------***/

#slides {
	background: #ebf2f3;
}

.slides-pagination {
	bottom: 50%;
	left: 20px;
	width: auto;
}

.slides-pagination a {
	display: block;
	border-color: #ffa500;
}

.slides-pagination a.current {
	background: #ffa500;
}

/***---------- Single Image -----------***/

.single-image {
	background: #ebf2f3 url(../images/backgroud_3.webp) no-repeat center center;
	background-size: cover;
}

/***---------- Sidebar -----------***/

.sidebar {
	position: fixed;
	z-index: 6;
	top: 0;
	right: 0;
	width: 450px;
	height: 100%;
	padding: 20px;
	transition: all .4s ease;
	background: #fff;
}

.sidebar:before {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	display: block;
	width: 500px;
	height: 100%;
	content: '';
	transition: border-left .4s ease;
	transform: skew(-17deg, 0deg);
	transform-origin: 0 0 0;
	border-left: solid 0;
	background: #fff;
}

.sidebar::before {
	border-left: solid 14px #755139;
}

.sidebar:hover .toggle-sidebar {
	left: -95px;
	opacity: 1;
}

.sidebar.content-hidden {
	right: -500px;
}

/*-- Sidebar Toggle Button --*/

.toggle-sidebar {
	position: absolute;
	top: 318px;
	left: -105px;
	width: 69px;
	height: 25px;
	cursor: pointer;
	transition: all .8s ease;
	transform: rotate(107deg);
	transform-origin: 0 0 0;
	opacity: 0;
	border-radius: 3px;
	background: #755139;
}

.toggle-sidebar:before {
	position: absolute;
	bottom: 5px;
	left: 8px;
	width: 75%;
	height: 2px;
	content: '';
	background: #fff;
}

.toggle-sidebar:after {
	position: absolute;
	top: 5px;
	left: 8px;
	width: 75%;
	height: 2px;
	content: '';
	background: #fff;
}

/***---------- Content -----------***/

.content {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 56px;
	transform: translateY(-50%);
}

/*-- Coming Soon Text --*/

.site-title {
	font-size: 60px;
	position: relative;
	margin: 0;
	color: #2c2d2d;
}

.site-title:before {
	position: absolute;
	z-index: -1;
	bottom: 8px;
	width: 100%;
	height: 2px;
	content: '';
	background: #755139;
}

.site-title span {
	position: relative;
}

.site-title span:before {
	position: absolute;
	z-index: -1;
	bottom: 8px;
	width: 100%;
	height: 2px;
	content: '';
	background: #fff;
}

/*-- Coming Soon Message --*/

.message {
	font-size: 25px;
	margin-top: 10px;
}

/*-- Countdown --*/

#cntdwn h2 {
	font-size: 42px;
	margin-top: 10px;
}

/*-- Buttons --*/

.newsletter-button,
.contact-button {
	position: relative;
	display: inline-block;
	width: 95px;
	margin: 0 4px 20px;
	padding: 10px 20px;
	transition: all .4s ease;
	text-decoration: none;
	color: #fff;
	border: none;
}

.newsletter-button i,
.contact-button i {
	font-size: 38px;
	position: absolute;
	top: -5px;
}

.contact-button i {
	right: -36px;
	color: #755139;
}

.newsletter-button i {
	left: -36px;
	color: #ffa500;
}

.newsletter-button {
	background: linear-gradient(to bottom, #ffa500 50%, #755139 50%);
	background-position: top;
	background-size: 100% 200%;
}

.newsletter-button:hover {
	background-position: bottom;
}

.contact-button {
	background: linear-gradient(to bottom, #755139 50%, #ffa500 50%);
	background-position: top;
	background-size: 100% 200%;
}

.contact-button:hover {
	background-position: bottom;
}


/*-- Social Networks --*/

.socialnetwork {
	padding: 0;
}

.socialnetwork > li {
	display: inline-block;
	margin-right: 5px;
	list-style: none;
}

.socialnetwork > li > a {
	font-size: 22px;
	line-height: 40px;
	display: block;
	width: 40px;
	height: 40px;
	color: #fff;
	border-radius: 100%;
}

.socialnetwork > li:nth-child(1) > a {
	background: #3c55af;
}

.socialnetwork > li:nth-child(2) > a {
	background: #1aabff;
}

.socialnetwork > li:nth-child(3) > a {
	background: #fd3baf;
}

.socialnetwork > li:nth-child(4) > a {
	background: #3971b7;
}

/***---------- Page -----------***/

.page {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 0;
	bottom: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	transition: left .8s ease;
	text-align: left;
}

.page:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	transform: skew(-17deg, 0deg);
	transform-origin: 0 0 0;
	background: #ebf2f3;
}

.page.in {
	left: 0;
}

.page-content {
	position: absolute;
	top: 50%;
	margin-left: 40px;
	padding: 40px;
	transform: translateY(-50%);
	border: dashed 1px;
}

.page-content h2 {
	font-weight: normal;
	margin-top: 0;
}

/*-- Page Close Button--*/

.close {
	font-size: 40px;
	position: absolute;
	top: 50%;
	right: -50px;
	transition: all .4s ease;
	transform: translateY(-50%);
	color: #ffa500;
}

.close:hover {
	color: #755139;
}

/*-- Newsletter Form --*/

#newsletter-form.out {
	display: none;
}

#newsletter-form input {
	display: block;
	width: 100%;
	height: 42px;
	padding: 0;
	text-indent: 15px;
	border: 0;
	border-bottom: solid 2px #ffa500;
	background: #fff;
}

#newsletter-form button {
	margin: 15px auto 0;
	padding: 10px 30px;
	cursor: pointer;
	transition: all .4s ease;
	color: #fff;
	border: none;
	background: linear-gradient(to bottom, #ffa500 50%, #755139 50%);
	background-position: top;
	background-size: 100% 200%;
}

#newsletter-form button:hover {
	background-position: bottom;
}

#newsletter-form input:focus,
#newsletter-form button:focus {
	outline: none;
}

.newsletter-form-success {
	display: none;
	padding: 0 15px;
	border: dashed 1px;
	background: #fff;
}

.newsletter-form-success.in {
	display: none;
}

/*-- Contact Address --*/

.contact-address i {
	font-size: 28px;
	position: absolute;
	top: -8px;
	left: 0;
}

.contact-address p {
	position: relative;
	padding-left: 32px;
	color: #7b7b7b;
}

.contact-address a {
	text-decoration: none;
	color: #7b7b7b;
}

.kontakt a {
	color: #2c2d2d;
}
.kontakt a:hover {
	color: #755139;
}
.kontakt a.fb-link {
	font-size: 30px;
}

/***---------- Media -----------***/

@media screen and (max-width: 767px) {
	.single-image {
		background: #ebf2f3 url(../images/backgroud_3.webp) no-repeat center -200px;
		background-size: cover;
	}

	.sidebar {
		position: absolute;
		top: 50%;
		width: 100%;
		height: auto;
		padding: 0;
	}

	.sidebar:hover::before {
		border: none;
	}

	.sidebar::before {
		border: none;
	}

	.toggle-sidebar {
		display: none;
	}

	.content {
		position: relative;
		top: 0;
		right: 0;
		left: 0;
		width: 433px;
		margin: auto;
		padding: 40px 0;
		transform: translateY(0);
	}

	.logo {
		right: 0;
		left: 0;
	}

	.slides-pagination {
		bottom: 55%;
	}

	.page {
		position: fixed;
		z-index: 6;
	}

	.page:before {
		transform: skew(0deg, 0deg);
	}

	.page-content {
		position: relative;
		top: 45%;
		margin: 20px;
		padding: 30px;
	}

	.page-content h2 {
		font-size: 22px;
	}

	.close {
		top: auto;
		right: auto;
		bottom: -60px;
		left: 50%;
		transform: translateX(-50%);
	}

	#newsletter-form button {
		display: block;
	}
}


@media screen and (max-width: 497px) {
	.site-title {
		font-size: 42px;
	}

	.site-title:after {
		left: 138px;
		width: 34px;
	}

	.message {
		font-size: 14px;
	}

	#cntdwn h2 {
		font-size: 30px;
	}

	.content {
		width: 292px;
	}
}

@media screen and (max-width: 425px) {
	.page-content {
		margin: 20px 10px;
		padding: 20px;
	}

	.page-content h2 {
		font-size: 18px;
	}

	.newsletter-button i,
	.contact-button i {
		display: none;
	}
}

@media screen and (max-height: 360px) {
	.page-content {
		top: 0;
		transform: translateY(0px);
	}
}