// imports
@import url('//fonts.googleapis.com/css?family=Cabin:400,500,600,700&subset=latin-ext');
@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Oswald:300,400,600,700&subset=latin-ext');

// statics
@primary_font : 'Cabin';
@secondary_font : 'Open Sans';

@primary_color : #f9ac2f;
@secondary_color : #ffbc00;

.spooky{
  position: fixed;
  top: 0;
}

.bg-button:hover{
  background-color: #be8323;
}

.col-5-xs{
  width: 20%;
}

@media (max-width: 600px){
  .col-5-xs{
	width: 50%;
  }

  .full-on-mobile{
	width:100%;
  }
}

// basics
.pr {
	position: relative;
}
.mt30 {
	margin-top: 30px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb15 {
	margin-bottom: 15px;
}
.tar {
	text-align: right;
}
.t {
	display: table;
	width: 100%;
	height: 100%;
	.tc {
		display: table-cell;
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}
}
.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	background: rgba(0, 0, 0, .5);
	transition: all ease .5s;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	padding: 5px;
	i {
		color: #FFF;
	}
	.icon {
		display: inline-block;
		width: 52px;
		height: 52px;
		text-align: center;
		line-height: 52px;
		font-size: 20px;
		background: #ee2125;
		border-radius: 50%;
		color: #FFFFFF;
		margin: 0 5px;
	}
}
.overlay-hover:hover .overlay {
	opacity: 1;
	visibility: visible;
}

// styles
body {
	font-family: @primary_font;
}

header {
	position: relative;
	border-top: 3px solid #eeae4b;
	.inner {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 123;
		.header {
			display: flex;
			padding: 10px 0 0;
			.logo {
				float: left;
				a {
					display: block;
				}
			}
			.prices {
				flex: auto;
				display: flex;
				justify-content: center;
				padding: 32px 0 0;
				div {
					margin: 0 7.5px;
					color: #FFF;
					font: 15px/20px @primary_font;
					img {
						margin: -4px 0 0;
					}
					span {
						color: @primary_color;
					}
				}
			}
			.menu {
				float: right;
				ul {
					padding: 0;
					margin: 32px 0 0;
					list-style: none;
					li {
						float: left;
						a {
							display: block;
							position: relative;
							color: #FFF;
							padding: 0 15px;
							font: 15px/20px @primary_font;
							&:after {
								position: absolute;
								right: -.5px;
								top: 2.5px;
								width: 1px;
								height: 15px;
								background: #FFF;
								display: block;
								content: "";
							}
						}
						&:last-child {
							a {
								padding-right: 0;
								&:after {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

section.header-add {
	position: relative;
	section.bg {
		width: 100%;
		height: 608px;
		background: url("../images/header-bg.png") no-repeat top center;
		&.detail {
			height: 220px;
		}
	}
	.inner {
		padding: 80px 0 0;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		&.flex {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.information-stage {
		margin: 65px 0 0;
		display: flex;
		align-items: center;
		.information {
			color: #FFF;
			flex: auto;
			margin-right: 50px;
			.buttons {
				width: 100%;
				a {
					display: block !important;
					margin: 0 0 15px;
					line-height: 43px;
				}
			}
			h1 {
				font: 700 34px/40px @primary_font;
				margin: 0 0 15px;
				display: block;
			}
			p {
				font: 300 16px/24px @primary_font;
				margin: 0 0 20px;
				display: block;
			}
		}
		.register {
			float: right;
			background: #ffffff;
			padding: 20px;
			border-radius: 6px;
			width: 860px;
			flex-basis: 860px;
			h2 {
				font: 500 21px/22px @primary_font;
				color: #7a7a7a;
				margin: 0 0 14px;
				text-align: center;
				width: 428px;
			}
			input {
				width: 100%;
				height: 41px;
				border: 1px solid #c5c5c5;
				border-radius: 5px;
				padding: 10px;
				font: 14px/19px @primary_font;
				color: #7a7a8a;
			}
			.input {
				margin-bottom: 20px;
			}
			.double {
				display: flex;
				.input {
					width: 50%;
					&:first-child {
						margin-right: 6px;
					}
					&:last-child {
						margin-left: 6px;
					}
				}
			}
			button {
				width: 100%;
			}
		}
	}
}

.bg-button {
	background: @primary_color;
	height: 43px;
	border-radius: 5px;
	border: 0;
	padding: 0;
	margin: 0;
	font: 600 15px/20px @primary_font;
	color: #161721;
}

.border-button {
	border: 2px solid @primary_color;
	border-radius: 5px;
	padding: 8px 15px;
	font: 15px/24px @primary_font;
	color: #FFF;
	display: inline-block;
	&:hover {
		background: #f9ac2f;
		color: #fff;
		text-decoration: none;
	}
}

section.home {
	padding: 30px 0;
}

.news-bar {
	border: 3px solid #edad4b;
	border-radius: 5px;
	display: flex;
	.icon {
		float: left;
		width: 60px;
		height: 48px;
		text-align: center;
		font-size: 20px;
		line-height: 48px;
		color: #000000;
		background: #edad4b;
	}
	.list {
		flex: auto;
		a.new-item {
			display: block;
			text-align: center;
			font: 14px/48px @primary_font;
			color: #5a5a5a;
			span {
				color: #2c9e4d;
			}
		}
	}
	.all {
		float: right;
		width: 84px;
		height: 48px;
		text-align: center;
		background: #edad4b;
		font: 300 13px/16px @primary_font;
		display: flex;
		align-items: center;
		justify-content: center;
		a {
			color: #000;
		}
	}
}

.prices-list {
	margin: 35px 0 5px;
	.price-block {
		background: #e7e7e7;
		border-radius: 5px;
		height: 122px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.title {
			font: 700 13px/18px @primary_font;
			color: #747575;
		}
		h2 {
			margin: 0;
			font: 700 20px/24px @secondary_font;
			color: #262626;
		}
	}
}

span.green {
	color: #258c15;
}

footer {
	.footer {
		background: #242d39;
		padding: 35px 0 30px;
		a.logo {
			display: block;
		}
		.apps {
			a {
				display: block;
				margin: 10px 0 0;
			}
		}
		.links {
			display: flex;
			.link-block {
				margin: 20px 20px 0 20px;
				flex: 1;
				.title {
					font: 600 15px/18px @primary_font;
					color: #ffffff;
					padding: 0 0 15px;
					border-bottom: 2px solid #d7d7d7;
				}
				a {
					display: block;
					margin: 18px 0 0;
					font: 300 14px/20px @secondary_font;
					color: #FFF;
				}
			}
		}
		.subscribe {
			margin: 20px 0 0;
			.title {
				font: 300 14px/19px @secondary_font;
				color: #FFF;
				padding: 0 0 15px;
				border-bottom: 2px solid #d7d7d7;
				text-align: right;
				margin: 0 0 12px;
			}
			form {
				display: flex;
				margin: 0 0 20px;
				input {
					flex: auto;
					height: 38px;
					background: #ffffff;
					padding: 0 14px;
					font: 300 14px @secondary_font;
				}
				button {
					float: right;
					width: 44px;
					height: 38px;
					text-align: center;
					font-size: 14px;
					line-height: 38px;
					border: 0;
					padding: 0;
					background: #cd8416;
				}
			}
		}
	}
	.copyright {
		background: #d4841b;
		padding: 12px 0;
		.inner {
			display: flex;
			align-items: center;
			a.sitemap {
				float: left;
				color: #fff;
				font: 300 15px/18px @secondary_font;
			}
			a.ctrlf5 {
				float: right;
			}
			.social-links {
				flex: auto;
				a {
					font-size: 19px;
					margin: 0 20px;
					color: #fff;
				}
			}
		}
	}
}

h1.title {
	font: 700 28px/36px @secondary_font;
	color: #FFF;
	text-align: center;
	margin: 20px 0;
	&:after {
		display: block;
		content: "";
		width: 56px;
		height: 3px;
		background: #edad4b;
		margin: 8px auto;
	}
}

section.detail-page {
	padding: 35px 0;
}

article {
	p {
		font: 15px/22px @secondary_font;
		color: #7a7a8a;
		margin: 24px 0 0;
	}
}

.sidebar-links {
	border-top: 1px solid #56361e;
	margin: 0 0 30px;
	a {
		display: flex;
		width: 100%;
		border-bottom: 1px solid #c6beb8;
		padding: 10px 0;
		align-items: center;
		font: 13px/20px @secondary_font;
		color: #282828;
		&:hover, &.active {
			text-decoration: none;
			color: #bf8020;
		}
		span {
			flex: auto;
		}
		i {
			float: right;
		}
	}
}

.request-button {
	a {
		display: block;
		text-align: center;
		line-height: 42px;
	}
}

.faq-item {
	margin: 0 0 20px;
	.title {
		display: block;
		position: relative;
		height: 38px;
		background: #f4f4f4;
		padding: 0 0 0 10px;
		font: 14px/38px @secondary_font;
		color: #313131;
		i {
			position: absolute;
			right: 0;
			top: 0;
			width: 38px;
			height: 38px;
			background: #686868;
			text-align: center;
			font-size: 12px;
			line-height: 38px;
			color: #FFF;
			&.open {
				display: block;
			}
			&.opened {
				display: none;
			}
		}
	}
	.information {
		border-bottom: 1px solid #ddd;
		padding: 14px 0;
		p {
			margin: 0;
			font: 15px/24px @primary_font;
			color: #7a7a8a;
		}
	}
	&.active {
		.title {
			background: #f5ae4e;
			i {
				background: #000000;
				&.opened {
					display: block;
				}
				&.open {
					display: none;
				}
			}
		}
	}
}

a:active, a:focus {
	text-decoration: none !important;
	outline: none !important;
}

.contact-info {
	div {
		margin: 0 0 20px;
		h2 {
			font: 700 16px/28px @primary_font;
			color: #12110e;
			border-bottom: 2px solid #edad4b;
			width: 50%;
			margin: 0 0 5px;
		}
		p {
			display: block;
			width: 100%;
			font: 300 16px/22px @secondary_font;
			color: #808183;
			margin: 0;
		} 
	}
}

.contact-form {
	select,
	input[type="text"],
	input[type="number"],
	input[type="tel"],
	input[type="email"],
	input[type="submit"]
	{
		width: 100%;
		height: 38px;
		border: 1px solid #e3e3e3;
		font: 14px @primary_font;
		color: #999;
		margin-bottom: 15px;
		padding: 10px;
	}
	textarea {
		width: 100%;
		height: 98px;
		border: 1px solid #e3e3e3;
		font: 14px @primary_font;
		color: #999;
		margin-bottom: 15px;
		padding: 10px;
	}
	button {
		width: 100%;
		height: 38px;
		background: #edad4b;
		border: 0;
		padding: 0;
		margin: 0;
		text-align: center;
		color: #333;
		font: 15px @secondary_font;
	}
}

section.maps {
	height: 400px;
	iframe {
		height: 400px;
		width: 100%;
	}
}

.slicknav_menu {
	background: #e8ad49 !important;
	color: #000 !important;
	padding: 5px 0 !important;
	.slicknav_menutxt {
		text-shadow: 0 0 0 transparent !important;
	}
}

.popup-content {
	background: #DDD;
	padding: 15px;
	h2 {
		font: 600 22px/30px @primary_font;
		color: #333;
		margin: 0 0 10px;
		text-align: center;
	}
	.popup-form {
		.form-row {
			margin: 0 -5px;
			display: flex;
			.field {
				flex: 1;
				margin: 0 5px;
			}
		}
		input {
			width: 100%;
			height: 40px;
			border: 1px solid #CCC;
			background: #FFF;
			padding: 10px;
			font: 14px/20px @primary_font;
			color: #333;
			margin: 0 0 10px;
		}
		textarea {
			width: 100%;
			height: 100px;
			border: 1px solid #CCC;
			background: #FFF;
			padding: 10px;
			font: 14px/20px @primary_font;
			color: #333;
		}
		button {
			width: 100%;
			height: 40px;
			border: 0;
			background: #f9ac30;
			padding: 10px;
			font: 14px/20px @primary_font;
			color: #333;
			margin: 0 0 10px;

		  &[disabled]{
			background: gray;
			color: white;

			&.success{
			  background: green;
			}

			&.error{
			  background: red;
			}
		  }
		}
	}
}

.calctabs .nav-tabs{
  border: none;
}

.nav-tabs > li{
  width: 50%;
  margin-bottom: 0;
}

.calctabs .nav-tabs > li > a{
  font-size: 17px;
  margin-top: -10px;
  margin-bottom: 10px;
  text-align: center;
}

.calctabs .nav-tabs > li.active > a,
.calctabs .nav-tabs > li.active > a:hover,
.calctabs .nav-tabs > li.active > a:focus{
  border: none;
  border-radius: 0;
}

.calctabs .nav-tabs > li > a,
.calctabs .nav-tabs > li > a:hover,
.calctabs .nav-tabs > li > a:focus{
  border: none;
  border-radius: 0;
}

.calctabs .nav-tabs > li.active > a{
  font-weight: bold
}

.nav > li.active > a,
.nav > li.active > a:focus {
  border-radius: 0 !important;
  text-decoration: none !important;
  background-color: #eeeeee !important;
  color: #555555 !important;
}

.paragraph_input{
  line-height: 2;
}

.paragraph_input input{
  text-align: right;
  border: none !important;
  border-bottom: 1px dotted #000 !important;
  height: 15px !important;
  width: 118px !important;
  line-height: 1.42857143 !important;
  margin: 0 !important;
}

.menu .dropdown{
  position: relative;

  ul{
	position: absolute;
	display:none;
	padding: 0;
	margin: 0 !important;

	min-width: 160px;

	left: 50%;
	top: 100%;

	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);

	li{
	  list-style: none;
	  background-color: #f9ac2f;
	  opacity: .87;
	  margin-top: 3px;
	  display: block;
	  width: 100%;
	  padding-left: 0;

	  a{
		color: black !important;
		display: block;
		text-align: center;
		white-space: nowrap;
		padding: 0 10px !important;
	  }
	}
  }

  &:hover{
	ul{
	  display: block;
	}
  }
}