@charset "utf-8";

/**
 * Theme Name:     Dr. Ing. Klaus Verber
 * Theme URI:      www.i-kv.it
 * Description:    Ingenieurbüro für das Bauwesen
 * Author:         Pircher Stefan
 * Author URI:     www.ps-design.it
 * Version:        1.0
 */

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

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

body, html, input, button, textarea, select {
		font-family:var(--ikv_font_regular); font-size:18px;
		line-height:26px; color:var(--ikv_text_dark);
}

/* media-queries */


/* ============================
   > CSS-VARIABLES
   ================== */

:root {
		/* farbwerte */
		--ikv_body:#2a3942;
		--ikv_blue_dark:#2e86de;
		--ikv_blue_light:#54a0ff;
		--ikv_text_dark:#181818;
		--ikv_white:#fff;
		/* schriften */
		--ikv_font_light:'Roboto-Light', Arial, Helvetica, sans-serif;
		--ikv_font_regular:'Roboto-Regular', Arial, Helvetica, sans-serif;
		--ikv_font_medium:'Roboto-Medium', Arial, Helvetica, sans-serif;
}

/* ============================
   > FONT-EMBEDS
   ================== */

@font-face {
		font-family:'Roboto-Light';
		src:url('fonts/Roboto-Light.woff2') format('woff2');
}
@font-face {
		font-family:'Roboto-Regular';
		src:url('fonts/Roboto-Regular.woff2') format('woff2');
}
@font-face {
		font-family:'Roboto-Medium';
		src:url('fonts/Roboto-Medium.woff2') format('woff2');
}

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

#preloader {
		position:fixed; z-index:1000;
		top:0; left:0; width:100%; height:100%;
}
#preloader .loader-section {
		position:fixed; z-index:1000;
		width:100%; height:50%;
		background-color:var(--ikv_body);
		-webkit-transform:translateX(0);
		-ms-transform:translateX(0);
		transform:translateX(0);
}
#preloader .logo, #preloader #loader {
		position:absolute; z-index:1001;
		transform:translate(-50%, -50%);
		top:50%; left:50%;
}
#preloader .logo {
		width:201px; height:53px; margin-top:-80px; display:none;
		background:url('images/i-kv.svg') no-repeat center;
}
#preloader #loader {
		width:48px; height:48px; background-size:48px 48px;
		background:url('images/loading.svg') no-repeat center;
}
#preloader .loader-section.section-top { top:0; }
#preloader .loader-section.section-bottom { bottom:0; }

/* fully-loaded */
.loaded #preloader .loader-section.section-top {
		-webkit-transform:translateY(-100%);
				-ms-transform:translateY(-100%);
						transform:translateY(-100%);

		-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
						transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #preloader .loader-section.section-bottom {
		-webkit-transform:translateY(100%);
				-ms-transform:translateY(100%);
						transform:translateY(100%);

		-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
				transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #preloader #loader,
.loaded #preloader .logo {
		opacity:0;
		-webkit-transition:all 0.3s ease-out;
						transition:all 0.3s ease-out;
}
.loaded #preloader {
		visibility:hidden;
		-webkit-transition:all 0.3s 1s ease-out;
						transition:all 0.3s 1s ease-out;
}

/* js-turned-off */
.no-js #preloader {
		display:none;
}

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

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

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

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

/* ============================
   > HEADLINES
   ================== */

h1, h2 {
		font-family:var(--ikv_font_medium);
		line-height:111%; hyphens:auto;
		color:var(--ikv_text_dark);
}
h1 {
		font-size:36px;
		margin:0 0 24px;
}
h2 {
		font-size:22px;
		margin:0 0 10px;
}
body strong {
		font-family:var(--ikv_font_medium);
}

/* media-queries */
@media screen and (max-width: 980px) {}

/* ============================
   > OUTER
   ================== */

#outer {
		background:var(--ikv_body);
		display:flex; align-items:center;
		justify-content:center;
		height:100vh;
}

/* media-queries */

/* ============================
   > INNER
   ================== */

#inner {
		display:flex;
		position:relative;
		flex-direction:column;
		justify-content:center;
		align-items:flex-end;

		background-color:var(--ikv_white);
		max-width:1440px; width:100%;
		min-height:840px;
}
/* logo-grid */
#inner .ikv {
		position:absolute;
		top:-80px; left:-80px;
		width:840px; height:840px;

		display:grid; grid-gap:0;
		grid-template-columns:1fr 1fr 1fr;
		grid-template-rows:1fr 1fr 1fr;
}
.ikv .item {
		animation-fill-mode:both;
}
.ikv .item.d {
		background-image:url('images/i-kv.svg');
		background-repeat:no-repeat;
		background-position:center;
		background-size:154px;
}
.ikv .item.a, .ikv .item.e, .ikv .item.f {
		background-color:var(--ikv_blue_dark);
}
.ikv .item.c, .ikv .item.g {
		background-color:var(--ikv_blue_light);
}
.ikv .item.a, .ikv .item.f {
		grid-column:1 / 3;
}
/* animation-steps */
.loaded .ikv .item.d {
		visibility:hidden;
}
.loaded .ikv .item {
		animation-duration:1s;
}
/* step-1 */
.loaded .ikv .item.a {
		animation-name:right_to_left;
		animation-delay:1s;
}
/* step-2 */
.loaded #inner .item.c {
		animation-name:top_to_bottom;
		animation-delay:2s;
}
/* step-3 */
.loaded .ikv .item.f {
		animation-name:left_to_right;
		animation-delay:2s;
}
/* step-4 */
.loaded .ikv .item.g {
		animation-name:bottom_to_top;
		animation-delay:3s;
}
/* step-5 */
.loaded .ikv .item.e {
		animation-name:right_to_left;
		animation-delay:3s;
}
/* step-6 */
.loaded .ikv .item.d {
		visibility:visible;
		animation-name:fade_in;
		animation-delay:4s;
}
/* keyframe-animations */
@keyframes left_to_right {
    0% { transform:scaleX(0); transform-origin:left; }
    100% { transform:scaleX(1); transform-origin:left; }
}
@keyframes right_to_left {
    0% { transform:scaleX(0); transform-origin:right; }
    100% { transform:scaleX(1); transform-origin:right; }
}
@keyframes top_to_bottom {
    0% { transform:scaleY(0); transform-origin:top; }
    100% { transform:scaleY(1); transform-origin:top; }
}
@keyframes bottom_to_top {
    0% { transform:scaleY(0); transform-origin:bottom; }
    100% { transform:scaleY(1); transform-origin:bottom; }
}
@keyframes fade_in {
    from { opacity:0; }
    to { opacity:1; }
}

/* kontaktinfos */
#inner .wrap {
		margin-right:120px;
		max-width:460px;
}
#inner .contact {
		display:flex; grid-gap:10px;
		margin:20px 0; flex-direction:column;
}
#inner .contact a {
		display:flex; grid-gap:12px;
		align-items:center;
}
#inner .contact a, #inner .pec {
		color:var(--ikv_text_dark);
		text-decoration:none;
}
#inner .contact .tel:before,
#inner .contact .mail:before {
		display:block; content:''; width:40px;
		height:40px; border-radius:50%;
		background-color:var(--ikv_blue_light);
		background-repeat:no-repeat;
		background-position:center;
		background-size:18px;
}
#inner .contact .tel:before { background-image:url('images/ico-phone.svg'); }
#inner .contact .mail:before { background-image:url('images/ico-mail.svg'); }
#inner .contact .tel:after, #inner .contact .mail:after { display:block; }
#inner .contact .tel:after { content:'+39 340 5340070'; }
#inner .contact .mail:after { content:''; }

/* media-queries */
@media screen and (max-width: 1520px) {
		#inner {
				flex-direction:row;
				justify-content:center;
				align-items:center;

				min-height:0; grid-gap:40px;
				max-width:none; width:auto;
		}
		#inner .ikv {
				position:relative; top:0;
				left:0; width:640px; height:640px;
				align-self:flex-start;
		}
		#inner .wrap {
				flex:1; margin-right:60px;
		}
}
@media screen and (max-width: 1200px) {
		#outer {
				height:auto;
		}
		#inner {
				flex-direction:column;
				grid-gap:0; margin-top:40px;
		}
		#inner .wrap {
				margin:0; padding:40px;
				text-align:center;
		}
		#inner .contact {
				justify-content:center;
				align-items:center;
		}
}
@media screen and (max-width: 720px) {
		h1 {
				font-size:32px;
				margin:0 0 20px;
		}
}
@media screen and (max-width: 640px) {
		h1 {
				font-size:28px;
				margin:0 0 18px;
		}
		h2 {
				font-size:20px;
		}
		#inner {
				margin-top:0;
		}
		#inner .ikv {
				width:100%; height:240px;
				grid-template-columns:auto;
				grid-template-rows:auto;
				top:0; left:0;
		}
		#inner .item {
				display:none;
		}
		#inner .item.d {
				display:block !important;
				background-size:144px;
				animation-delay:1.5s;
		}
		#inner .wrap {
				padding-top:40px;
				background:#eee;
		}
		#inner .contact {
				flex-direction:row;
		}
		#inner .contact .tel:after,
		#inner .contact .mail:after {
				display:none;
		}
		#inner .contact .mail {
				display:block; overflow:hidden;
  			width:40px; height:40px;
		}
}