/**
   * Theme Name:		Parfumerie Stefani
   * Theme URI:	  		http://www.parfumerie-stefani.ch/
   * Description:		Theme für die Parfumerie Stefani in Appenzell
   * Author:			Bruno Gisler
   * Author URI:		https://www.brunogisler.com
   * Version:			2.0
*/
@font-face {
	font-family: 'Helvetica_Neue_LT';
	src: url('fonts/Helvetica_Neue_LT.eot?') format('eot'), url('fonts/Helvetica_Neue_LT.woff') format('woff'), url('fonts/Helvetica_Neue_LT.ttf') format('truetype');
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Helvetica_Neue_LT';
	letter-spacing: 1.5px;
	line-height: 22px;
	text-align: center;
	color: #000;
	font-size: 14px;
}

img {
    display: initial;
}

p {
	margin-bottom: 20px;
}

a, a:hover {
	color: #000;
	text-decoration: underline;
}

section {
	position: relative;
	overflow: hidden;
}

section .main {
	position: relative;
	/*left: 0;
	transition: left 0.5s ease;
	background-size: cover;
	background-position: 50%;
	height: 100%;
	padding: 0;*/
}

.scroll-down-arrow {
	display: none;
}

.content {
	padding: 50px 10px 100px;
}

.banner {
	background-color: #1d1d1b;
	color: white;
	margin-bottom: 100px;
	padding: 30px;
	text-align: left;
}

@media (min-width: 768px) {
	.banner .huge {
		font-size: 70px;
	}
}

.banner a {
	color: inherit;
	text-decoration: none;
}

#start .main,
#petit_salon .main {
	background-color: #f5e3df;
}

/*#start .content {
	padding-top: 3%;
}*/

#start .logo {
	margin: 120px 0 30px;
}

#start .logo img {
	width: 60%;
}

#start .subtitle {
	margin-bottom: 120px;
}

/*#terre .main {
	background-image: url(img/bild2.jpg);
}*/

#events .title img {
	width: 100px;
}

#events .content .text {
	margin-top: 25px;
}

#aktionen .title img {
	width: 140px;
}

#aktionen .content .text {
	margin-top: 25px;
}

#frauen .main .pic {
    position: relative;
	width: 100%;
}

#frauen .main .pic.right {
	display: none;
}

#frauen .main .pic.left {
	left: 0;
	z-index: 1;
}

/*#herren .main {
	background-image: url(img/bild4.jpg);
}*/

#stefani .logo {
	margin-top: 30px;
}

#stefani .logo img,
#permanentMakeUp .content img,
#petit_salon .content img {
	width: 80%;
}

#stefani .text,
#permanentMakeUp .content .text,
#petit_salon .content .text {
	margin-top: 25px;
}

#stefani .unterschrift {
	margin-top: 40px;
}

/*#stefani .unterschrift img {
	width: 50%;
}*/

#stefani .name {
	margin-top: 10px;
}

/* #team img {
	width: 100%;
} */

/*#makeup .main {
	display: none;
}

#makeup .main .pic.left {
	left: 0;
	z-index: 1;
}*/

#makeup {
	display: none;
}

/*#team .main {
	background-image: url(img/bild6.jpg);
}*/

.toggleSidebar {
	display: none;
}
/*.toggleSidebar {
	position: absolute;
    bottom: 45px;
    right: 45px;
	z-index: 2;
}

.toggleSidebar:hover {
	cursor: pointer;
}

.toggleSidebar span {
	margin-right: 50px;
	transition: opacity 0.5s ease;
}

section.infoOpen .toggleSidebar span {
	opacity: 0;
}

.toggleSidebar img {
	transition: all 0.8s ease;
}

section.infoOpen .toggleSidebar img {
	transform: scaleX(-1);
}*/

.sidebar {
	position: relative;
    left: 0;
}

/*section.infoOpen .main {
	left: -50%;
}

section.infoOpen .sidebar {
	left: 50%;
}*/

.imgForMobile {
	width: 100%;
}

#team .teamMembers {
	display: none;
}

.zitat{
	color: #999;
	margin-top: 60px;
}

.datei{
	margin-top: 50px;
}

#pflege .main .pic {
    position: relative;
	width: 100%;
}

#pflege .main .pic.right {
	display: none;
}

#pflege .main .pic.left {
	left: 0;
	z-index: 1;
}

#culti .main .pic {
    position: relative;
	width: 100%;
}

#culti .main .pic.right {
	display: none;
}

#culti .main .pic.left {
	left: 0;
	z-index: 1;
}

#culti .sidebar img {
	display: block;
	margin: 0 auto;
	width: 35%;
}

#onno .sidebar img {
	display: block;
	margin: 0 auto;
	width: 30%;
}

#slideshow-trigger:hover,
#slideshow-closer:hover {
	cursor: pointer;
}

#slideshow-closer img {
	margin-top: -40px;
}

.cinema {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s;
}

.slideshowContainer {
    width: 90%;
    margin: 0 auto;
}

.slider-nav {
    margin-top: 20px;
}

.slick-slide img {
    width: 100%;
}

.slider-nav .slick-slide {
    margin: 0 10px;
}

#prevArrow,
#nextArrow,
.slider-nav {
	display: none !important;
}

.scroll-up-container {
	display: none;
}

.desktop-only {
	display: none;
}

.shop-link {
    position: absolute;
    top: 5vw;
    right: 9vw;
    z-index: 1;
}

@media (min-width: 500px) {
    .shop-link {
        top: 2vw;
        right: 5vw;
    }
}

@media (min-width: 992px) {
    .shop-link {
        position: absolute;
        top: 3vw;
        right: 3vw;
        z-index: 1;
    }
}

.shop-link .shop-icon {
    width: 20vw;
}

@media (min-width: 376px) {
    .shop-link .shop-icon {
        width: 15vw;
    }
}

@media (min-width: 500px) {
    .shop-link .shop-icon {
        width: 10vw;
    }
}

@media (min-width: 992px) {
    .shop-link .shop-icon {
        width: 10vw;
    }
}



/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	body {
		font-size: 17px;
		line-height: 25px;
	}

	.imgForMobile {
		display: none;
	}

	.desktop-only {
		display: block;
	}

	section .main {
		/* position: absolute; */
		position: relative;
		left: 0;
		transition: left 0.5s ease;
		background-size: cover;
		background-position: 50%;
		/* height: 100vh; */
		height: auto;
		min-height: 100vh;
		padding: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.scroll-down-container {
		position: absolute;
		bottom: 0;
		width: 100vw;
		/* font-size: 0.8em; */
	}

	.scroll-down-container.white {
		color: #fff;
	}

	.scroll-down-arrow {
		display: block;
		margin: 0 auto 30px;
		width: 29px;
		transform: rotate(90deg);
		transition: transform 0.3s;
	}

	.scroll-up-container {
		display: block;
		position: absolute;
		bottom: 40px;
		width: 100vw;
		/* font-size: 0.8em; */
	}

	.scroll-up-arrow {
		display: block;
		margin: 0 auto 10px;
		width: 29px;
		transform: rotate(-90deg);
		transition: transform 0.3s;
	}

	.sidebar {
		position: absolute;
		height: 100%;
		overflow: scroll;
	    left: 100%;
		top: 0;
		transition: left 0.5s ease;
	}

	section.infoOpen .main {
		left: -50%;
	}

	section.infoOpen .sidebar {
		left: 50%;
	}

	section.infoOpen .main .inner-row {
		margin-right: 0;
	}

	#start .logo {
		margin-bottom: 80px;
		margin-top: 0;
	}

	#start .subtitle {
		margin: 0;
	}

	#start .sidebar .content p:not(:last-of-type),
	#team .sidebar .content p:not(:last-of-type) {
		margin: 0 0 30px;
	}

	#events .title img {
		width: 240px;
	}

	#events .content .text {
		margin-top: 4%;
	}

	#aktionen .title img {
		width: 320px;
	}

	#aktionen .content .text {
		margin-top: 4%;
	}

	/* #angebot .main {
		background-image: url(img/angebot.jpg);
	} */

	/* #terre .main {
		background-image: url(img/bild2.jpg);
	} */

	#frauen .main .pic {
		height: 100%;
		width: auto;
	    position: absolute;
	}

	#frauen .main .pic.right {
		display: block;
	}

	/* #herren .main {
		background-image: url(img/bild4.jpg);
	} */

	#stefani .logo {
		margin-top: 0;
	}

	#stefani .logo img,
	#permanentMakeUp .content img,
	#petit_salon .content img {
		width: auto;
	}

	#stefani .text,
	#permanentMakeUp .content .text,
	#petit_salon .content .text {
		margin-top: 4%; /*100px*/
	}

	#stefani .unterschrift img {
		width: auto;
	}

	#team .main {
		/*background-image: url(img/bild6.jpg);*/
		position: relative;
	}

	#team .teamMembers {
		display: block;
		color: #fff;
	}

	#team .teamMembers .first {
		position: absolute;
		bottom: 43%;
		left: 29%;
	}

	#team .teamMembers .third {
		position: absolute;
		bottom: 43%;
		left: 46%;
	}

	#team .teamMembers .fourth {
		position: absolute;
		bottom: 43%;
		left: 65%;
	}

	#makeup {
		display: block;
	}

	#makeup .imgContainer1 {
		/* background-image: url(img/bild7_links.jpg); */
		background-size: cover;
	}

	#makeup .imgContainer2 {
		/* background-image: url(img/bild7_rechts.jpg); */
		background-size: cover;
	}

	/*#makeup img {
		width: 100%;
	}*/

	/*#makeup .main {
		display: block;
	}

	#makeup .main .pic {
		height: 100%;
		width: auto;
	    position: absolute;
	}

	#makeup .main .pic.right {
		display: block;
	}*/

	/* #schminken .main {
		background-image: url(img/bild8.jpg);
	} */

	#pflege .main .pic {
		height: 100%;
		width: auto;
		position: absolute;
	}

	#pflege .main .pic.right {
		display: block;
	}

	/* #liege .main {
		background-image: url(img/liege.jpg);
	} */

	#permanentMakeUp .text {
		margin-top: 4%;
	}

	#culti .main .pic {
		height: 100%;
		width: auto;
		position: absolute;
	}

	#culti .main .pic.right {
		display: block;
	}

	/* #onno .main {
		background-image: url(img/onno.jpg);
	} */

	#petit_salon .text {
		margin-top: 4%;
	}

	.toggleSidebar {
		/* display: block;
		position: absolute;
	    bottom: 45px;
	    right: 45px;
		z-index: 2; */
		display: flex;
	    position: absolute;
	    right: 80px;
		top: 0;
	    z-index: 2;
	    flex-direction: column;
	    height: 100%;
	    justify-content: center;
	}

	.toggleSidebar:hover {
		cursor: pointer;
	}

	.toggleSidebar span {
		transition: opacity 0.5s ease;
	    /* font-size: 0.8em; */
	    position: absolute;
	}

	#start .toggleSidebar span {
	    transform: rotate(-90deg) translateY(30px);
	}

	#angebot .toggleSidebar span {
	    transform: rotate(-90deg) translateY(20px);
	}

	#frauen .toggleSidebar span {
		transform: rotate(-90deg) translateY(-54px);
    	width: 250px;
	}

	#herren .toggleSidebar span {
		transform: rotate(-90deg) translateY(-54px);
    	width: 250px;
	}

	#schoenheitsbehandlungen .toggleSidebar span {
		transform: rotate(-90deg) translateY(-59px);
    	width: 260px;
	}

	#team .toggleSidebar span {
	    transform: rotate(-90deg) translateY(30px);
	}

	#schminken .toggleSidebar span {
	    transform: rotate(-90deg) translateY(17px);
	}

	#haarentfernung .toggleSidebar span {
	    transform: rotate(-90deg) translateY(-7px);
	}

	#culti .toggleSidebar span {
	    transform: rotate(-90deg) translateY(50px);
	}

	#onno .toggleSidebar span {
	    transform: rotate(-90deg) translateY(45px);
	}

	.toggleSidebar span.white {
		color: #fff;
	}

	section.infoOpen .toggleSidebar span {
		opacity: 0;
	}

	.toggleSidebar img {
		transition: all 0.8s ease;
	}

	section.infoOpen .toggleSidebar img {
		transform: scaleX(-1);
	}

	.slideshowContainer {
	    width: 50%;
	}

	#prevArrow {
		display: block !important;
	    transform: rotate(180deg);
	    position: absolute;
	    left: -50px;
	    transition: all 0.3s;
	}

	#nextArrow {
		display: block !important;
	    position: absolute;
	    right: -50px;
	    transition: all 0.3s;
	}

	#prevArrow:hover{
	    cursor: pointer;
	    left: -60px;
	}

	#nextArrow:hover {
	    cursor: pointer;
	    right: -60px;
	}

	.slider-nav {
		display: block !important;
	}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}