@charset "UTF-8";
/* CSS Document */

	/*
	*
	* This content is created by hms-MEDIA.net
	* All rights reserved.
	* (C) 2022 copyright by hms-MEDIA.net / Torsten Hoppe
	*
	*/


/* @import url("/slideshow.css"); */

/*
@font-face {
    font-family:'Roboto';
    src: 
		url("https://www.salon-maasgeschneidert.de/fonts/Roboto-Regular.ttf") format('truetype');
    font-style: regular;
	font-display: swap;

@font-face {
    font-family:'Roboto';
    src: 
		url("https://www.salon-maasgeschneidert.de/fonts/Roboto-Italic.ttf") format('truetype');
    font-style: italic;
	font-display: swap;
*/

:root {
	/*		COLORS		*/
	--hc-prime1              : rgba(29,92,99,1);
	--hc-prime2              : rgba(3,73,81,1);
	--hc-prime3              : rgba(250,240,218,1);
	--hc-bg1                 : rgba(250,240,235,1);
	--hc-bg2                 : rgba(50,50,50,1);
	--hc-bg3                 : rgba(245,245,245,1);
	--hc-bg4                 : rgba(215,215,215,1);
	--hc-sec1                : rgba(175,175,175,1);

	--hc-pix1				 : rgba(250,240,235,0.8);
  	--hc-bg-image            : linear-gradient(35deg, var(--hc-bg1) 5%, var(--hc-bg3) 100%);

	/*		FONTS			*/
	font-family              : 'Roboto';


	/*		BOX etc.		*/
	--h-distance1            : 80px;
	--h-distance2            : calc(var(--h-distance1) * 2.4);
	--h-distance3            : calc(var(--h-distance1) * 3.2);
	--h-distance4            : calc(var(--h-distance1) * 0.8);
	--h-distance5            : calc(var(--h-distance3) - var(--h-distance1));
	--h-distance6            : calc(var(--h-distance1) * 1.6);
	--h-distance7            : calc(var(--h-distance1) * 0.25);	/* Abstand Formularfelder */
  	--h-distance8            : calc(var(--h-distance4) * 0.5);
  	--h-distance9			 : calc(var(--h-distance1) * 1.4);


	--h-radius               : 4px;

	/*		TIME			*/
	--h-time                 : 6s;
	--h-time-img-zoom        : 0.5s;

}
 
html {
	scroll-behavior          : smooth;

}

body {
	margin                   : auto;
	background-color         : var(--hc-bg4);
	background-image         : var(--hc-bg-image);
	width                    : 95%;
	max-width                : 1920px;
/*	scroll-behavior : smooth; */

}

#sp-main-body {
  background-color:	var(--hc-prime2);
}

.img-zoom:hover {
    transform             : scale(1.04) rotate(.02deg) translateZ(0);
    transition            : transform var(--h-time-img-zoom) ease-in;
}


.welcome {
/*  position: relative; */
  z-index: 1002;
}

.whoweare {
  z-index: 1001;
  position: relative;
}



.logo-color {
  fill: var(--hc-prime3);

}

.logo-image {
  fill: var(--hc-prime3);

}


h1 {
  font-size:	25pt;
  font-weight:	400;
  color:		var(--hc-prime2);
  margin:		0;

}

h2 {
  font-size:	15pt;
  font-weight:	300;
  color:		var(--hc-prime1);
  margin:		0;

}

h3 {
  font-size:	25pt;
  font-weight:	400;
  color:		var(--hc-prime2);
  margin:		0;
}

.sppb-addon-text-block {
  font-size:	15pt;
  font-weight:	300;
  color:		var(--hc-prime1);
  margin:		0;
}


.sppb-addon-table-main tbody tr {
  background: var(--hc-bg-image);
}


.footer-adress {
  color:		var(--hc-bg1);
}



/*	SLIDESHOW	*/

.hms-slide {
  height: 600px;
}

.slideshow {
    list-style-type: none;
  }

  .slideshow,
  .slideshow:after { 
      /* top: -16px; */
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0px;
      z-index: 0; 
  }
  
  .slideshow li span { 
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      color: transparent;
      background-size: contain;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      opacity: 0;
      z-index: 0;
      animation: imageAnimation 18s linear infinite 0s; 
  }
  

  .slideshow li:nth-child(1) span { 
      background-image: url(../../../images/Salon/2021-09-21_09.jpg); 
  }

  .slideshow li:nth-child(2) span { 
      background-image: url("../../../images/Salon/2021-09-21_03.jpg");
      animation-delay: 6s; 
  }
  
  .slideshow li:nth-child(3) span { 
      background-image: url("../../../images/Salon/2021-09-21_08.jpg");
      animation-delay: 12s; 
  }
  
  @keyframes imageAnimation { 
      0% { opacity: 0; animation-timing-function: ease-in; }
      8% { opacity: 1; animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  
  @keyframes titleAnimation { 
      0% { opacity: 0 }
      8% { opacity: 1 }
      17% { opacity: 1 }
      19% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  
  .no-cssanimations .cb-slideshow li span {
      opacity: 1;
  }

/* END SLIDESHOW */



@media only screen and (max-width: 1400px) {
:root {
  	/*		BOX etc.		*/
	--h-distance1            : 5em;
  }
}



@media only screen and (max-width: 1400px) {  
  :root {
	--h-distance1            : 50px;

  }
  
}

@media only screen and (max-width: 990px) {  
  :root {
	--h-distance1            : 25px;
	--h-distance2            : calc(var(--h-distance1) * 2);
	--h-distance3            : calc(var(--h-distance1) * 4);
	--h-distance4            : calc(var(--h-distance1) * 2);
	--h-distance5            : calc(var(--h-distance1) * 3);
	--h-distance6            : calc(var(--h-distance1) * 4);
	--h-distance7            : calc(var(--h-distance1) * 0.25);	/* Abstand Formularfelder */
  	--h-distance8            : calc(var(--h-distance4) * 0.5);
  	--h-distance9			 : calc(var(--h-distance1) * 1);
    
  }
	.img-zoom:hover {
    	transform             : scale(1.02) rotate(.02deg) translateZ(0);
	    transition            : transform var(--h-time-img-zoom) ease-in;
	}

}

@media only screen and (max-width: 768px) {
	:root {
		--h-distance1            : 10px;
		--h-distance2            : calc(var(--h-distance1) * 1.5);
		--h-distance3            : calc(var(--h-distance1) * 2);
		--h-distance4            : calc(var(--h-distance1) * 1.5);
		--h-distance5            : calc(var(--h-distance1) * 1);
		--h-distance6            : calc(var(--h-distance1) * 1);
		--h-distance7            : calc(var(--h-distance1) * 0.25);	/* Abstand Formularfelder */
  		--h-distance8            : calc(var(--h-distance4) * 0.5);
  		--h-distance9			 : calc(var(--h-distance1) * 0.5);
	}

  	.img-zoom:hover {
    	transform             : scale(1.01) rotate(.02deg) translateZ(0);
	    transition            : transform var(--h-time-img-zoom) ease-in;
	}

  	h1 {
		font-size:	22pt;
	}
  
	h2 {
		font-size:	13pt;
	}

  	h3 {
		font-size:	20pt;
	}

	.sppb-addon-text-block {
		font-size:	14pt;
  	}

}

.legal {

  h1, h2 {
    color: unset;
  }
}

@media only screen and (max-width: 576px) {
  	h1 {
		font-size:	22pt;
	}
  
	h2 {
		font-size:	12pt;
	}

  	h3 {
		font-size:	20pt;
	}
  
  	.sppb-addon-text-block {
		font-size:	12pt;
  	}
  
	.sp-copyright {
    	font-size: 10pt;  
	}

  .hms-slide {
  height: 400px;
}
  
}


@media only screen and (max-width: 330px) {
    
  	.sppb-addon-text-block {
		font-size:	11pt;
  	}
}