@charset "utf-8";

/**
 * Theme Name:     Ferienhof Turmwirt Völlan
 * Theme URI:      www.turmwirt.info
 * Description:    Urlaub für die ganze Familie
 * Author:         Pircher Stefan
 * Author URI:     www.ps-design.it
 * Version:        1.0
 */

/* ============================
   > CONTENTS
   ==================
		> BODY, HTML
		> LINKS
		> WRAPPER
		> HEADER
		> FOOTER
		> BACKTOP
		> COOKIE-LAW
*/

/* ============================
   > BODY, HTML
   ================== */

body, html, input, button, textarea, select {
		font-family:'Poppins', Arial, Helvetica, sans-serif;
		font-size:20px; line-height:28px; color:#fff;
}
body, html { height:100%; }

/* ============================
   > LINKS
   ================== */

a:link 			{ font-family:'Poppins', Arial, Helvetica, sans-serif; font-size:20px; color:#383838; text-decoration:underline; }
a:visited 	{ font-family:'Poppins', Arial, Helvetica, sans-serif; font-size:20px; color:#383838; text-decoration:underline; }
a:active 		{ font-family:'Poppins', Arial, Helvetica, sans-serif; font-size:20px; color:#383838; text-decoration:none; }
a:hover 		{ font-family:'Poppins', Arial, Helvetica, sans-serif; font-size:20px; color:#383838; text-decoration:none; }

/* ============================
   > PRELOADER
   ================== */

div#preloader {
		position:fixed; top:0; z-index:99;
		width:100%; height:100%; overflow:visible;
		background:rgba(0,66,114,.9) url('images/loading.svg') no-repeat center;
		background-size:80px 80px;
}

/* ============================
   > FLEXBOX
   ================== */

.flex {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
}

/* ============================
   > TRANSITIONS
   ================== */

div#vcard .plus {
		-webkit-transition:all .4s;
		-moz-transition:all .4s;
		transition:all .4s;
}
div.nameofstyle {
		-webkit-transition:all .8s;
		-moz-transition:all .8s;
		transition:all .8s;
}

/* ============================
   > H/V CENTERING
   ================== */

.halign { left:50%; transform:translateX(-50%); }
.valign { top:50%; transform:translateY(-50%); }
.hvalign { top:50%; left:50%; transform:translate(-50%,-50%); }

/* ============================
   > BG-IMAGE
   ================== */

body {
		background:#fff url('images/studio-gasslitter-bg.webp') no-repeat center;
		background-size:cover;
}

/* ============================
   > V-CARD
   ================== */

div#vcard {
		position:absolute;
		width:665px; height:390px;
		background:#004272;
		overflow:hidden;
}
div#vcard .white {
		position:absolute;
		bottom:0; left:61px;
		width:84px; height:0;
		transition:height .8s;
		background:#fff;
}
div#vcard .white.grow {
		height:210px;
}
div#vcard .white:after {
		position:absolute; content:''; width:84px; height:70px; margin-top:13px;
		background:url('images/studio-gasslitter-symbol.webp') no-repeat center;
}
div#vcard .hl {
		position:absolute; bottom:64px;
		/* animation */
		white-space:nowrap;
		opacity:0;
}
div#vcard .hl.grow {
		animation:fadeInRight .8s ease forwards;
		animation-delay:.6s;
}

/* keyframe-animations */
@keyframes fadeInRight {
  0% {
		opacity:0;
    left:100%;
  }
  100% {
		left:175px;
		opacity:1;
  }
}

div#vcard .hl h1 {
		display:inline-block;
		font-size:34.5px; line-height:100%;
		font-weight:600; letter-spacing:0.2;
}
div#vcard .hl h1:after {
		display:block; content:'';
		height:2px; background:#869fbb;
		margin:3px 0 15px;
}
div#vcard .hl h2 {
		font-size:18.8px; line-height:24px;
		font-weight:400; letter-spacing:0.2;
}

/* btn-plus */
div#vcard #slidein {
		position:absolute; width:100%; height:100%; top:0; right:-600px;
		background:#fff url('images/flower-bg.webp') no-repeat 88% center;
		/* animation */
		transition:right .8s;
}
div#vcard #slidein.open {
		right:0;
}
div#vcard .plus {
		cursor:pointer;
		position:relative;
		background:#869fbb;
		width:65px;
}
div#vcard .plus:hover {
		background:#6e8eae;
}
div#vcard .plus:after {
		position:absolute; color:#fff;
		top:50%; left:50%; transform:translate(-50%,-50%);
		font-size:45px; content:'+'; font-weight:400;
}
div#vcard #slidein.open .plus:after {
		content:'-';
}
div#vcard .inner {
		position:absolute; color:#383838;
		font-weight:300; white-space:nowrap;
		letter-spacing:.4px;
}
div#vcard .inner strong {
		display:block; margin-bottom:24px;
		font-size:24px; font-weight:600;
}
div#vcard .inner label {
		display:inline-block;
		font-weight:600;
		width:80px;
}
div#vcard .inner a {
		text-decoration:none;
		color:#383838;
}
div#vcard .inner a:hover {
		text-decoration:underline;
}

/* media-queries */
@media screen and (max-width: 720px) {
		div#vcard {
				position:relative;
				transform:none; transition:none;
				width:100%; height:100%;
				top:auto; left:auto;
		}
		div#vcard .white {
				overflow:hidden;
				bottom:126px;
		}
		div#vcard .hl {
				bottom:190px;
		}
		div#vcard #slidein {
				width:100%; height:100%;
				top:auto; right:auto; bottom:-100%;
				background-position:center;
				/* animation */
				transition:bottom .8s;
		}
		div#vcard .plus {
				width:100%; height:65px; top:-65px;
		}
		div#vcard #slidein.open { bottom:0; }
		div#vcard #slidein.open .plus { top:0; }
}
@media screen and (max-width: 600px) {
		div#vcard .white {
				left:41px; width:64px;
		}
		div#vcard .white.grow {
				height:170px;
		}
		div#vcard .white:after {
				width:100%; margin-top:10px;
				background-size:80%;
		}
		div#vcard .hl {
				bottom:168px;
		}
		div#vcard .hl h1 {
				font-size:28px;
		}
		div#vcard .hl h2 {
				font-size:16px; line-height:20px;
		}
		/* keyframe-animations */
		@keyframes fadeInRight {
			0% {
				opacity:0;
				left:100%;
			}
			100% {
				left:138px;
				opacity:1;
			}
		}
}
@media screen and (max-width: 480px) {
		div#vcard .white {
				left:20px;
		}
		/* keyframe-animations */
		@keyframes fadeInRight {
			0% {
				opacity:0;
				left:100%;
			}
			100% {
				left:108px;
				opacity:1;
			}
		}
		div#vcard .inner,
		div#vcard .inner a {
				font-size:18px;
		}
		div#vcard .inner strong {
				margin-bottom:18px;
				font-size:20px;
		}
}
@media screen and (max-width: 380px) {
		div#vcard .hl h2 {
				white-space:normal;
		}
		div#vcard .hl {
				bottom:148px;
		}
		div#vcard .inner,
		div#vcard .inner a {
				line-height:24px;
				font-size:16px;
		}
		div#vcard .inner strong {
				font-size:18px;
		}
		div#vcard .inner label {
				width:48px;
		}
}