/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Poppins&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Poppins&family=Poppins&family=Shadows+Into+Light+Two&display=swap');

.loader {
	/*background: #ffffff;*/
	background: rgb(112,120,126);
	background: radial-gradient(circle, rgba(112,120,126,1) 0%, rgba(46,46,46,1) 100%);
	bottom: 0;
	height: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 9999;
}
.loader-inner {
	left: 0;
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
.loading-spinner {
	width: 200px;
	height: 200px;
	animation: spinner-rotate 2s ease-in-out infinite;
	-webkit-animation: spinner-rotate 2s ease-in-out infinite;
	-moz-animation: spinner-rotate 2s ease-in-out infinite;
	-ms-animation: spinner-rotate 2s ease-in-out infinite;
	-o-animation: spinner-rotate 2s ease-in-out infinite;
}
.spinner {
	animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
	-webkit-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
	-moz-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
	-ms-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
	-o-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
	stroke-linecap: round;
}
@keyframes spinner-rotate {
	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: trotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
	}
}
@keyframes spinner-color {
	0%, 100% {
		stroke: #552d25;
	}
	20% {
		stroke: #c98a6a;
	}
	40% {
		stroke: #552d25;
	}
	60% {
		stroke: #c98a6a;
	}
	80% {
		stroke: #552d25;
	}
	100% {
		stroke: #c98a6a;
	}
}
@keyframes spinner-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 200;
		stroke-dashoffset: -35px;
	}
	100% {
		stroke-dasharray: 90, 200;
		stroke-dashoffset: -125px;
	}
}
/*End preloader*/

html, body {
  height: 100%;
  min-height: 18em;
}

#overlayleft {
  position: fixed;
  width: 50%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(246 4 255 / 14%);
  z-index: 2;
}

#overlayright {
  position: fixed;
  width: 50%;
  height: 100%;
  left: 50%;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
}

.men-side {
  background-image: url("../../assets/images/slides/men.webp");
}

.women-side {
  background-image: url("../../assets/images/slides/women.webp");
}

.split-pane {
  padding-top: 1em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50%;
  min-height: 9em;
  font-size: 2em;
  color: white;
  font-family: 'Poppins', serif;
	/*font-family: 'Shadows Into Light Two', cursive;*/
	font-weight:300;
}

.split-pane > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}
.split-pane > div .text-content {
  line-height: 1.6em;
  margin-bottom: 1em;
}
.split-pane > div .text-content .big {
  font-size: 2em;
}
.split-pane > div img {
  height: 1.3em;
}

.split-pane button, .split-pane a.button {
  font-family: 'Poppins', serif;
	font-weight:800;
  background: none;
  border: 1px solid white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 15em;
  padding: 0.7em;
  font-size: 0.5em;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-decoration: none;
  color: white;
  display: inline-block;
	cursor: pointer;
  margin-top: 58%;
}
.split-pane button:hover, .split-pane a.button:hover {
  text-decoration: none;
  background-color: white;
  border-color: white;
	cursor: pointer;
}
.women-side.split-pane button:hover, .split-pane a.button:hover {
  color: violet;
}
.men-side.split-pane button:hover, .split-pane a.button:hover {
  color: #333;
}

#split-pane-or {
  font-size: 2em;
  color: white;
  font-family: 'Poppins', serif;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 99;
}

#split-pane-or > div img {
  height: 3.5em;
}

.big {
  font-size: 2em;
}

#slogan {
  position: absolute;
  width: 100%;
  z-index: 100;
  text-align: center;
  vertical-align: baseline;
  top: 0.5em;
  color: white;
  font-family: 'Poppins', serif;
  font-size: 1.4em;
}

#slogan img {
  height: 0.7em;
}
.bold {
	text-transform:uppercase;
}
.big {
	font-weight:800;
}
.divloader{
	position: absolute;
	top: 46.5%;
	text-align: center;
}
.logoloader{
		width:3.5%
}

/* #### Tablets Portrait #### */
@media screen and (max-device-width: 1024px) and (orientation: landscape){
    .divloader{
      top: 44.1%;
    }
    .logoloader{
      width: 6.5%;
    }
}

/* #### Tablets Landscape #### */
@media screen and (max-device-width: 650px) and (orientation: portrait){
    .divloader{
      top: 46.5%;
    }
    .logoloader{
      width: 20.5%;
    }
}


/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  .split-pane button, .split-pane a.button {
    margin-top: 10%;
  }
}

/* #### Desktops HD #### */
@media screen and (min-width: 1200px) and (orientation: landscape){
  #slogan {
    top: 5%;
    font-size: 1.8em;
  }
  .col-sm-6 {
    width: 50%;
  }
  .split-pane {
    padding-top: 2em;
    height: 100%;
  }
  #split-pane-or {
    font-size: 3em;
  }
  .split-pane button, .split-pane a.button {
    margin-top: 10%;
  }
  .logoloader{
      width: 5%;
  }
  .divloader{
      top: 45.4%;
  }
}

@media screen and (min-width: 700px) and (orientation: portrait){
  .divloader{
    top: 48%;
  }
  .logoloader{
    width: 6.4%;
  }
}

/* #### Desktops FULL HD #### */
@media screen and (min-width: 1600px){
    #slogan {
      top: 5%;
      font-size: 1.8em;
    }
    .col-sm-6 {
      width: 50%;
    }
    .split-pane {
      padding-top: 2em;
      height: 100%;
    }
    #split-pane-or {
      font-size: 3em;
    }
		.divloader{
			position: absolute;
			top: 46.5%;
			text-align: center;
		}
		.logoloader{
		    width:3.5%
		}
}

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
    .split-pane {
      padding-top: 2em;
      height: 50%;
      width: 100%;
    }
    #overlayleft {
      position: fixed;
      width: 100%;
      height: 50%;
      left: 0;
      right: 0;
      bottom: 0;
      top: 25%;
      background-color: rgb(246 4 255 / 14%);
      z-index: 2;
    }
    #overlayright {
      position: fixed;
      width: 100%;
      height: 50%;
      left: 0;
      right: 0;
      bottom: 0;
      top: 75%;
      background-color: rgba(0,0,0,0.5);
      z-index: 2;
    }
    #split-pane-or > div img {
        height: 8em;
    }
    .split-pane > div .text-content .big {
        font-size: 4em;
    }
    .split-pane button, .split-pane a.button {
      font-size: 1.0em;
      margin-top: 10%;
    }
    .split-pane > div {
      top: 45%;
    }
    .logoloader{
        width: 6.5%;
    }
    .divloader{
        top: 48%;
    }
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
    .split-pane {
      padding-top: 2em;
      height: 100%;
      width: 50%;
    }
    #overlayleft {
      position: fixed;
      width: 50%;
      height: 100%;
      left: 0;
      right: 0;
      bottom: 0;
      top: 50%;
      background-color: rgb(246 4 255 / 14%);
      z-index: 2;
    }
    #overlayright {
      position: fixed;
      width: 50%;
      height: 100%;
      left: 50%;
      right: 0;
      bottom: 0;
      top: 50%;
      background-color: rgba(0,0,0,0.5);
      z-index: 2;
    }
    .split-pane > div {
      top: 40%;
    }
    .split-pane button, .split-pane a.button {
      margin-top: 10%;
    }
    .logoloader{
        width: 6.8%;
    }
    .divloader{
        top: 43.4%;
    }
		.men-side{
	    height: 100% !important;
	  }
	  .women-side{
	    height: 100% !important;
	  }

}

.hover-brightness {
  transition: transform 3s ease-in-out;
  transform-origin: center center;
  filter: brightness(60%);
}

/* The Transformation */
.hover-brightness:hover {
  filter: brightness(100%);
  overflow: hidden;
}

.logoindex{
  opacity: 0.9;
}

.hover-brightness-logo {
  transition: transform 0.7s ease-in-out;
  transform-origin: center center;
  filter: brightness(70%);
}

/* The Transformation */
.hover-brightness-logo:hover {
  filter: brightness(100%);
  overflow: hidden;
}