/*------------------------------------------------------------------

Table of contents

* Fonts
* Plugins
* Starting Styles
* Navbar Styles
* Controls Styles
* Buttons Styles
* Typography Styles
* Breadcrumbs Styles
* Pagination Styles
* Tables Styles
* Tabs Styles
* Panel restyling
* Restyling UI elements
* Slider restyling
* Restyling media
* Dropdown menu restyling
* Header Styles
* Parallax Styles
* Planner Styles
* Best room Styles
* Room detail Styles
* Blog Styles goes here
* Comments Styles
* Banner parallax
* Testimmonials Styles
* Gallery Styles
* Modules Styles
* Wizzard steps Styles
* About Styles
* Our mission Styles
* Contacts Styles
* Map Styles
* Faq Styles
* 404 page not found Styles
* Footer Styles
* Other Styles

-------------------------------------------------------------------*/
/**
* Fonts
**/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
/**
* Plugins
**/
@import url('font-awesome.min.css');
@import url('jquery-ui.min.css');
/**
* Starting styles
**/
body {
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.37;
  font-family: Lato,sans-serif;
  letter-spacing: 0em;
  text-align: left;
  color: #777;
}
a {
  color: #222;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
a:hover,
a:focus {
  color: #9f000b;
  text-decoration: none;
  outline: 0;
}
p {
  color: #444;
  line-height: 165%;
    margin-top: 25px;
}

blockquote { padding: 30px 40px; font-size: 18px; border-left: 5px solid #ab0000; margin: 20px 40px; color: #ab0000; }

hr {
  border-top: 1px solid #eee;
}
.text-center {text-align: center;}

/**
* Header styles
**/
.header {
  position: relative;
  z-index: 1;
}
.header .header-top {
  background-color: #232222;
  letter-spacing: 1.4px;  
  font-size: 11px;
  line-height: 1.33; 
  height: 52px; 
}
.header .header-top-left {
  display: flex;
  padding: 15px 0;
}
.header .header-top .row {
  justify-content: space-between;
}
.header .header-top .header-phone {
  padding-right: 7px;  
  color: #fff;
}
.header .header-top .header-phone i {
  font-size: 1.1rem;
  color: #777;
  margin-right: 7px;
  margin-top: -1px;  
}
.header .header-top .header-worktime {
  padding: 5px 0px;
}
.header .header-social {
  transition: all .3s ease-out;
  font-size: 1rem;
  line-height: 26px;
  padding: 11px 0;
}
.header .header-social a {
  padding-left: 15px;
  color: #fff;
}
.header .header-bottom {
  box-shadow: 0 0 18px 0 rgba(0,0,0,.12);
  background: #fff;
}
.header .header-bottom .logo {
  width: 64px;
}
.header .header-bottom .container {
  display: flex;
  flex-wrap: wrap;
  height: 112px;
  justify-content: center;
  align-items: center;
}

/*********************************
  Menu
*********************************/

.main_nav_contaner {
  position: relative;
  
}
.main_nav {
  margin: 0;
}
.main_nav li
{
  display: inline-block;
  margin-right: 20px;
  margin-left: 14px;  
}
.main_nav li a
{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.57;
  font-family: Montserrat,sans-serif;
  letter-spacing: 0em;
  text-align: inherit;
  text-transform: uppercase;  
  color: #000;
  display: block;
  width: 100%;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.main_nav li a:hover {
  /*color: #9f000b;*/
  color:#fff;
  background-color:#000;
}
.main_nav .dropdown-menu {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.57;
  font-family: Montserrat,sans-serif;
  letter-spacing: 0em;
  text-align: inherit;
  text-transform: uppercase;  
  background-color: #ffffffd9;
  width: 200px;
  border: none;
  border-radius: 5px;
  transform: translateY(-2px);
  width: max-content;
}
.dropdown-toggle::after {
    font-family: 'Linearicon';
    content: "\e93a";
    font-size: 8px;
    color: #222;
    margin-left: 4px;
    border: none;
}
.main_nav .dropdown-menu .dropdown-item {
  color: #000;
 
}
.main_nav .dropdown-menu .dropdown-item:hover {
  /*color: #919191;*/
  color:#fff;
  background-color:#000;
  background: transparent;
}

.tloHover:hover {
	color:#fff;
	background-color:#000 !important;
}

.mob-logo {
  display: none;
  width: 100%;
  text-align: center;
  padding-left: 51px;  
  font-family: "Dosis";
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.5em;
  letter-spacing: normal;
  text-transform: none;  
}
.mob-logo a:hover {
  color: #222;
}
.menu-background {
  display: none;
}
.menu-background.active {
  display: block;
  background: rgba(255,255,255,0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;  
}
.menu {
  position: fixed;
  top: 0;
  left: -400px;
  width: 400px;
  height: 100vh;
  background: #FFFFFF;
  overflow-y: scroll;
  background-color: #f9f9f9;
  padding-top: 60px;
}
.menu.active {
  left: 0;
  z-index: 10;
}
.trans_400 {
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.menu_close_container {
  position: absolute;
  top: 30px;
  right: 19px;
  width: 28px;
  height: 28px;
  transform-origin: center center;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  cursor: pointer;
}
.menu_close {
  width: 100%;
  height: 100%;
  transform-style: preserve-3D;
}
.menu_close div {
  width: 100%;
  height: 2px;
  background: #232323;
  top: 8px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.menu_close div:last-of-type {
  -webkit-transform: rotate(90deg) translateX(-2px);
  -moz-transform: rotate(90deg) translateX(-2px);
  -ms-transform: rotate(90deg) translateX(-2px);
  -o-transform: rotate(90deg) translateX(-2px);
  transform: rotate(90deg) translateX(-2px);
  transform-origin: center;
}
.menu_close:hover div {
  background: #937c6f;
}
.menu_nav ul, 
.menu_nav li {
  position: relative;
  list-style: none;
  font-family: "Dosis";
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.5em;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
}
.menu_nav .menu_mm ul.menu_mm
{
  background-color: #eff1f1;
}
.menu_nav .chevron::after {
    font-family: 'Linearicon';
    content: "\e93a";
    font-size: 25px;
    color: #000;
    border: none;
    font-weight: 900;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-12%,50%);
    cursor: pointer;
    width: 100px;
    text-align: end;
}
.menu_nav ul.menu_mm li.menu_mm ul.menu_mm {
  display: none;
}
.menu_nav ul.menu_mm li.menu_mm ul.menu_mm.active {
  display: block;
}
.menu_nav .chevron.active::after{
  content: "\e939";
}
.menu_nav .menu_mm ul.menu_mm .sub_menu_mm a {
  padding-left: 50px;
}
.menu_nav .menu_mm ul.menu_mm .sub_menu_mm a:hover {
  color: #222;
  background-color: #eff1f1;
}
.menu_nav ul li a
{
  display: block;
  padding: 10px 20px;
}
.menu_nav ul li a:hover
{
  background-color: #a3d3e8;
  color: #fff;
}

/*********************************
  Hamburger
*********************************/
.hamburger
{
  display: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  width: 31px;
}
.hamburger i
{
  font-size: 30px;
  font-weight: 900;
  color: #000;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.hamburger:hover i
{
  color: #9f000b;
}

/*********************************
  Sections
*********************************/
.onepage-pagination {
  top: 60%;
  transform: translateY(-50%);
}
.main.onepage-wrapper {
	height: calc(100% - 164px);
	font-family: Montserrat,sans-serif;
}
section .background {
  z-index: -1;
  margin: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;  
  overflow: hidden;
}
section .background img {
  position: absolute;
}
section .noimage {
  z-index: -1;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
section .noimage img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#hair-up .background img, #bu-hair .background img, #rokoko-welcome .background img, #peruki-naturalne .background img,
#turbany .background img,
#kosmetyki .background img,
#delicious-hair .background img,
#hair-hero .background img,
#hair-diamonds .background img {
  top: 0;
  right: 0;  
}
#hair2be .background img,
#beaute-de-femme .background img,
#bloom-hair .background img,
#custom-orders .background img {
  top: 0;
  left: 0;  
} 
section .container {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

/*#beaute-de-femme .container,*/
#hair2be .container,
#turbany .container,
#hair-diamonds .container {
	color: #fff;
}
section .container figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	margin-top: 10px;
	text-transform: uppercase;
	z-index: 0;
}
section .container figure img {
	height: 130px;
}
section .container figure h4 {
	display: none;
	font-style: normal;
	font-size: 16px;
	line-height: 1.42;
	letter-spacing: 0em;
	font-weight: 900;	
	margin: 0;
}
#hair2be .container figure h4,
#beaute-de-femme .container figure h4,
#bloom-hair .container figure h4,
#custom-orders .container figure h4 {
	flex-direction: row-reverse;
}
section .container figure h4 a.mob-url {
	display: none;
	transition: .4s;
}
#hair2be .container figure h4 a.mob-url,
#beaute-de-femme .container figure h4 a.mob-url,
#bloom-hair .container figure h4 a.mob-url,
#turbany .container figure h4 a.mob-url,
#hair-diamonds .container figure h4 a.mob-url {
	color: #fff;
}
section .container figure div {
	font-weight: 400;
	margin: 10px 0;
	text-align: center;
}
section .container figure span.section-title {
	font-size: 38px;
}
#turbany .container figure span.section-title {
	color: #fff;
}
section .container .section-content {
	height: 100%;
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	z-index: 0;
}
#hair2be .container .section-content,
#beaute-de-femme .container .section-content,
#bloom-hair .container .section-content,
#custom-orders .container .section-content {
	flex-direction: row-reverse;
}
section .container .section-content .any {
	width: 50%;
}
#custom-orders .container .section-content .any {
  width: 45%;
}
section .section-content .any h6 {
	font-style: normal;
	font-size: 83%;
	line-height: 1.42;
	letter-spacing: 0em;
	text-align: justify;	
  margin-bottom: 0;
  font-weight:300;
}
section .section-content .any .section-url {
	opacity: 0;
	width: 80%;
	margin: 20px auto 0 auto;
	transition: .4s;
}
section .section-content .any .mob-url {
	display: none;
	margin: 10px auto;
	color: #fff;
	padding: 1em 2.2em 1em 2.2em;
	border-radius: 99px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	border: 1px #fff solid;
	font-size: 87.5%;
	transition: background 0.8s ease;
}
section .section-content .any .mob-url:hover {
	background-color: #fff;
	color: #000;
}
section .section-content .any-image {
	width: 50%;
	margin-left: 15px;
	text-align: center;
}
section .section-content .any-image img {
	max-width: 100%;
	opacity: 0;
	transition: .5s;
}


section .bk-color {
  display: none;
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

#rokoko-welcome .bk-color {
  background: rgba(0,0,0,0.5);
}
#delicious-hair .bk-color {
  background: rgba(0,0,0,0.5);
}
#peruki-naturalne .bk-color {
  background: rgba(0,0,0,0.5);
}

#hair-hero .bk-color {
  background: rgba(0,0,0,0.5);
}

#bu-hair .bk-color {
  background: rgba(0,0,0,0.5);
}
#hair-up .bk-color {
  background: rgba(0,0,0,0.5);
}

#hair2be .bk-color {
  background: rgba(0,0,0,0.4);
}
#beaute-de-femme .bk-color {
  background: rgba(0,0,0,0.5);
}
#bloom-hair .bk-color {
  background: rgba(0,0,0,0.5);
}
#lions-hair .bk-color {
  background: rgba(0,0,0,0.5);
}
#hit .bk-color {
  background: rgba(0,0,0,0.5);
}
#turbany .bk-color {
  background: rgba(0,0,0,0.4);
}
#kosmetyki .bk-color {
  background: rgba(0,0,0,0.5);
}
#custom-orders .bk-color {
  background: rgba(0,0,0,0.6);
}
#accessories .bk-color {
  background: rgba(0,0,0,0.5);
}
#hair-diamonds .bk-color {
  background: rgba(0,0,0,0.5);
}


.flip {
  width: 100%;
  height: 48px;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  perspective: 500px;
}
.flip a {
  font-weight: 400;
  font-size: 87.5%;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-25px);
  -moz-transform: translateZ(-25px);
  -o-transform: translateZ(-25px);
  -ms-transform: translateZ(-25px);
  transform: translateZ(-25px);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -ms-transition: -ms-transform 0.3s;
  transition: transform 0.3s;
  cursor: pointer;
}
.flip a .front,
.flip a .back {
  margin: 0;
  width: 100%;
  height: 48px;
  line-height: 48px;
  position: absolute;
  text-align: center;
  /*letter-spacing: 0.4em;*/
}
.flip.invert a .front {
  background-color: #fff;
  color: #222;  
}
.flip a .front {
  background-color: #222;
  color: #fff;
  -webkit-transform: rotateY(0) translateZ(24px);
  -moz-transform: rotateY(0) translateZ(24px);
  -o-transform: rotateY(0) translateZ(24px);
  -ms-transform: rotateY(0) translateZ(24px);
  transform: rotateY(0) translateZ(24px);
}
.flip.invert a .back {
  background-color: #222;
  color: #fff;  
}
.flip a .back {
  background-color: rgba(255,255,255,0);
  color: rgba(34,34,34,0);
  -webkit-transform: rotateX(90deg) translateZ(24px);
  -moz-transform: rotateX(90deg) translateZ(24px);
  -o-transform: rotateX(90deg) translateZ(24px);
  -ms-transform: rotateX(90deg) translateZ(24px);
  transform: rotateX(90deg) translateZ(24px);
  overflow: hidden;
}
.flip.invert a .back:after {
  background: #fff;
}
.flip a .back:after {
  content: '';
  position: absolute;
  top: -32%;
  left: -10%;
  width: 120%;
  height: 50%;
  background: #222;
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transition-delay: 0.15s;
  -moz-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  -ms-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.flip a:hover {
  -webkit-transform: translateZ(-24px) rotateX(-90deg);
  -moz-transform: translateZ(-24px) rotateX(-90deg);
  -o-transform: translateZ(-24px) rotateX(-90deg);
  -ms-transform: translateZ(-24px) rotateX(-90deg);
  transform: translateZ(-24px) rotateX(-90deg);
}
.flip.invert a:hover .front {
  background: #fff;
}
.flip a:hover .front {
  background: #000;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.flip.invert a:hover .back {
  color: #fff;
  background: #222;
}
.flip a:hover .back {
  color: #222;
  -webkit-transition: color 0.4s linear;
  -moz-transition: color 0.4s linear;
  -o-transition: color 0.4s linear;
  -ms-transition: color 0.4s linear;
  transition: color 0.4s linear;
  background: #fff;
}
.flip a:hover .back:after {
  -webkit-transform: rotate(6deg) translate(100px, -34px);
  -moz-transform: rotate(6deg) translate(100px, -34px);
  -o-transform: rotate(6deg) translate(100px, -34px);
  -ms-transform: rotate(6deg) translate(100px, -34px);
  transform: rotate(6deg) translate(100px, -34px);
}

/***********************************
            Contact
***********************************/

.container.contact {
  text-align: center;
  padding: 50px 0;
}
.container.contact .address,
.container.contact .contact-form {
  padding: 50px 0;
}
.container.contact h4 {
  color: #232222;
  text-transform: uppercase;
  font-size: 20px;
}
.container.contact b {
  font-weight: 900;
}
.container.contact .address {
  max-width: 280px;
  margin: 0 auto;
}
.container.contact .social {
  margin: 10px 0;
  text-align: center;
}
.container.contact .social a {
  padding: 5px;
  margin: 0 5px;
}
.container.contact .contact-form {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 0;
}
.container.contact .contact-form .front-form input,
.container.contact .contact-form .front-form textarea {
  width: 100%;
  max-width: 380px;
  padding-left: 0;
  font-size: 16px;
  padding-bottom: 12px;  
  border: none;
  border-bottom: 1px solid rgba(191,191,191,0.7);
  border-radius: 3px;  
}
.container.contact .contact-form .front-form input[type="submit"] {
  margin-top: 35px;
  max-width: 160px;
  padding: 15px 20px;
  color: #fff;
  background-color: #000;
  text-align: center;
  font-family: Montserrat,sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #fff;
  border-radius: 3px;  
}
.container.contact .contact-form .front-form input[type="submit"]:hover {
  border: 1px solid #000;
  color: #000;
  background-color: #fff;  
}

/*

video tło

*/
#kontenerVideo {
	height:80%;
	margin-top:10%;
}
#videoBG {
    /*position:fixed;*/
	margin-top:-90%;
    z-index: -1;
}


@media (min-aspect-ratio: 16/9) {
    #videoBG {
        width:100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #videoBG { 
        width:auto;
       /* height: 90%;*/
    }
}

/***********************************
  our-herritage
************************************/
.container.herritage {
  padding: 50px 0;
  font-family: Montserrat,sans-serif;
  font-size: 16px;
  /*text-transform: uppercase;*/
}
.container.herritage strong {
  font-weight: 900;
  padding-bottom: 5px;
}
.container.herritage figure {
  float: left;
  margin: 0 25px 25px 0;
}
.container.herritage figure img {
  width: 320px;
}
/***********************************
            FOOTER
***********************************/
.footer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border-top: 1px solid #000;
}
.footer .footer-bottom {
  text-align: left;
  font-size: 12px;
  line-height: 1.2em;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 1px; 
  color: #919191;
  padding: 9px 0 9px;
  background-color: #232222;
}
.footer .footer-bottom .footer-bottom_copy {
  margin-top: 10px;
  margin-bottom: 10px;
}
.footer .footer-bottom .footer-bottom_copy a {
  color: #919191;
}
.footer .footer-top .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer .footer-top .about,
.footer .footer-top .contact-info {
  padding: 10px;
  margin: 10px 0;
  flex-basis: 50%;
}
.footer .footer-top h5 {
  padding: 0 0 10px;
  margin-bottom: 15px;
  letter-spacing: .04em;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.57;
  font-family: Montserrat,sans-serif;  
  color: #232222;
  text-transform: uppercase;
  text-align: left;
}
.footer .footer-top img {
  width: 115px;
}
.footer .footer-top .about .footer-social {
  margin: 10px 0;
  max-width: 115px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.footer .footer-top .contact-info div {
  position: relative;
  color: #383838;
  font-family: Lato,sans-serif;
  font-size: 16px;
  line-height: 1.33;
  font-style: normal;
  font-weight: 300;
  margin: 10px 0;
  padding-left: 45px;  
}
.footer .footer-top .contact-info .consult:before,
.footer .footer-top .contact-info .support:before,
.footer .footer-top .contact-info .reviews:before {
  position: absolute;
  font-family: 'Linearicon';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  top: 50%;
  left: 15px;
  transform: translate(-50%,-50%);
  font-size: 26px;  
}
.footer .footer-top .contact-info .consult:before {
  content: "\e76a";
}
.footer .footer-top .contact-info .support:before {
  content: "\e6f0";
}
.footer .footer-top .contact-info .reviews:before {
  content: "\e919";
}

.l65 {
	width:64%;
	float:left;
}

.hbg {
	background-image:url('../images/herritage-bg2.jpg');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	width:100%;
}

.wbg {
	background-image:url('../images/hair-bg2.jpg');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	width:100%;
}


a.white:hover {
color:#fff !important;
text-decoration:underline;	
}