/*
Naturstück - Isabellas Kreativwerkstatt © 2023
*/
		
@import "compass/css3";	
	
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, strike, strong, tt, var, b, u, i, center, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
*{box-sizing: border-box;}
*, *::after, *::before {box-sizing: border-box!important;}

*{
	margin: 0;
	padding: 0;
	outline: none;
	line-height: inherit;
	min-width: 0;
	min-height: 0;
}

*, *::before, *::after
{
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
}

:root {
  font-size: calc(100vw / 100);
  --fcolor: white;
  --color-1:#896c71;
  --burger-menu-transition: 300ms;
  --padr:6rem;
  --padl:6rem;

}

@media(max-width: 1199.98px){:root {font-size: calc(100vw / 50);}}
@media(max-width: 767.98px){:root {font-size: calc(100vw / 30);}}
@media(max-width: 767.98px){:root {--padr:3rem;--padl:3rem;}}



body, html
{
font-family: 'Yomogi', cursive;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
color:var(--color-1);
font-size: 0.94rem;
letter-spacing: .04rem;
background: #fff;
font-weight:lighter;
}


.global-frame{padding-left:var(--padl);padding-right:var(--padr);}



/*
##########################################
TOOLKIT
##########################################
*/

@media(max-width: 1199.98px){[class^="col-"], [class*=" col-"] {margin-bottom:3rem;}}

/*
##########################################
HEADINGS
##########################################
*/
h1,h2,h3,h4,h5,h6{line-height:1.1;}

h1{display:inline-block;font-size:3.5rem;padding-bottom:2.5rem;text-transform:uppercase;}
@media(max-width: 767.98px){h1{font-size:3rem;}}

h2{display:inline-block;font-size:2.5rem;text-transform:uppercase;padding-bottom:1rem;}
@media(max-width: 767.98px){h2{font-size:2rem;}}


h4{position:relative;display:inline-block;font-size:1.6rem;color:white;font-weight:600;text-transform:uppercase;padding-bottom:0.5rem;margin-bottom:0.8rem;}
h4::after{content:'';position:absolute;width:4rem;height:0.1rem;background:var(--color-brown);left:50%;margin-left:-2rem;bottom:-0.5rem;}

h5{display:inline-block;width:100%;font-size:1.15rem;padding:1.5rem;color:var(--color-1);padding-right:2rem;}

h6{}


/*
##########################################
GENERAL TRANSITIONS
##########################################
*/
a, header, #scroll-to-content, .button-1, .button-2, .portfolio-box-image, .portfolio-box-overlay, .portfolio-box-text, .btn-close, #lightgallery a img, #lightgallery a::after, .portfolio-box-text h5
{
  -o-transition:.4s;
  -ms-transition:.4s;
  -moz-transition:.4s;
  -webkit-transition:.4s;
  transition:.4s;
}

/*
##########################################
GLOBAL ELEMENTS
##########################################
*/
a{display:inline-block;text-decoration: none;color:white;position: relative;z-index:10;font-weight:300;}
a:hover{color:var(--color-grey);}
a::before{content: '';background-color:white;position: absolute;left: 0;bottom: 0px;width: 100%;height: 0.1rem;z-index: -1;transition: all .3s ease-in-out;}
a:hover::before {bottom: 0;height: 100%;background-color:#c2a3a8;}

p{padding-top: 1rem!important;}
@media(max-width: 767.98px){p{font-size:125%;}}

strong, b{font-weight:600;}

img{max-width:100%;}

.button-1{display:inline-block;padding:0.5rem 1rem 0.5rem 1rem;background:rgb(255,255,255,0.5);font-size:70%;letter-spacing:0.1rem;color:#fff;margin-left:0.25rem;margin-right:0.25rem;border:0px;outline:0px;}
.button-1::before{display:none;}
.button-1:hover{background:rgb(255,255,255,0.8);}


.button-2{display:inline-block;padding:1.5rem 3rem 1.5rem 3rem;background:rgb(255,255,255,0.0);border:1px solid var(--color-1);margin-top:1rem;text-decoration:none;color:var(--color-1);font-weight:600;letter-spacing:0.3rem;}
.button-2:hover{background:rgb(137,108,113,0.2);}
.button-2::before{display:none;}



/*RESPONSE POINTS
@media(max-width: 575.98px){}
@media(max-width: 767.98px){}
@media(max-width: 991.98px){}
@media(max-width: 1199.98px){}
@media(max-width:1600px){}

font-family: 'Manrope', sans-serif;
font-family: 'Playfair Display', serif;



/*

##########################################
GLOBAL SPACERS
##########################################
*/

.spacer-12rem{position:relative;display:inline-block;width:100%;height:12rem;}
.spacer-9rem{position:relative;display:inline-block;width:100%;height:9rem;}
.spacer-5rem{position:relative;display:inline-block;width:100%;height:5rem;}
.spacer-2rem{position:relative;display:inline-block;width:100%;height:2rem;}
.spacer-1rem{position:relative;display:inline-block;width:100%;height:1rem;}



/*
##########################################
GLOBAL ELEMENTS
##########################################
*/

header{display:inline-block;width:100%;text-align:center;}
#image-and-logo-container{position:relative;display:inline-block;width:100%;}
@media(max-width: 1199.98px){#image-and-logo-container{padding:0%;}}

.starter-image-bg{position:relative;display:inline-block;width:100%;height:100vh;background:url(images/background-full-screen.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center center;}


.logo-block-startscreen{position:absolute;top:25%;left:0%;width:100%;text-align:center;}


.startlogo{display:inline-block;height:50vh;width:auto;max-width:80%;}
.footerlogo{display:inline-block;width:15rem;padding-bottom:2rem;}



#content{display:inline-block;width:100%;}



footer{display:inline-block;width:100%;padding-top:9rem;padding-bottom:9rem;background:var(--color-1);}
footer p{color:#fff;}
.company-icon{position:absolute;top:25%;left:0%;width:100%;text-align:center;}
.company-icon img{display:inline-block;width:3rem;height:auto;opacity:0.5;}



.personal-image{display:inline-block;width:100%;float:right;max-width:600px;border-radius:10%;margin-right:10%;}
@media(max-width: 1199.98px){.personal-image{margin-right:0%;}}


/*
##########################################
LEISTUNGEN
##########################################
*/
#portfolio{}

@media(max-width: 1199.98px){#portfolio .col-xl-4{margin-bottom:0.5rem;}}

.wrapper-portfolio-box{position:relative;float:left;display:inline-block;width:100%;margin-bottom:2rem;}
.portfolio-box{position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:hidden;}

.portfolio-box-image{position:relative;z-index:100;display:block;width:100%;height:100%;object-fit: cover;}
.portfolio-box-overlay{position:absolute;z-index:101;top:0px;left:0px;width:100%;height:100%;background:rgb(50,67,51,0.7);}
.portfolio-box-text{position:relative;z-index:102;display:inline-block;width:100%;}
.portfolio-box-text h5{text-align:center;width:100%;border:0.1rem solid var(--color-1);border-radius:2rem;background:rgb(137,108,113,0.1);}



.portfolio-box:hover .portfolio-box-overlay{background:rgb(50,67,51,0.4);}
.portfolio-box:hover .portfolio-box-image{webkit-transform: scale(1.1);transform: scale(1.1);}

/*
##########################################
MODAL
##########################################
*/
.modal-content{background:#fff;border:0px;border-radius:0px;}
.btn-close{position:absolute;top:2rem;right:2rem;}
.modal-header{padding-left:3rem;padding-right:3rem;padding-top:3rem;}
.modal-body{padding-left:3rem;padding-right:3rem;padding-top:1rem;padding-bottom:2rem;}
.modal-footer{padding-left:3rem;padding-right:3rem;padding-bottom:3rem;padding-top:2rem;}
.modal-footer>*{margin:0rem;}
.modal-body a{color:var(--color-1);}
/*
##########################################
LOADING SPINNER
##########################################
*/
#loading-page{position:fixed;z-index:5000;top:0px;left:0px;width:100%;height:100%;background:var(--color-grey);z-index:1000;}
#loading-wrapper{position:absolute;top:50%;left:50%;margin-top:-5rem;margin-left:-5rem;}
#loading{display:inline-block; width: 10rem; height: 10rem;border: 0.5rem solid rgba(255,255,255,.3);border-radius: 50%;border-top-color:white;animation: spin 1s ease-in-out infinite;-webkit-animation: spin 1s ease-in-out infinite;}
@keyframes spin { to { -webkit-transform: rotate(360deg); }}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); }}

/*
##########################################
SCROLL TO CONTENT ARROW
##########################################
*/

#scroll-to-content{position:absolute;left:50%;bottom:3rem;margin-left:-3rem;display:block;width:6rem;height:3rem;background:rgb(137,108,113,0.0);border:0.1rem solid var(--color-1);margin-top:1.5rem;border-radius:0.5rem;}
#scroll-to-content a::before{display:none;}

#scroll-to-content:hover{background:rgb(137,108,113,0.2);}
#scroll-to-content a{position:relative;z-index:100;display:inline-block;width:100%;height:100%;}
#scroll-to-content a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-left: -0.5rem;
  border-left: 0.1rem solid var(--color-1);
  border-bottom: 0.1rem solid var(--color-1);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-1rem, 1rem);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-1rem, 1rem);
    opacity: 0;
  }
}



/*
##########################################
LIGHT GALLERY 
##########################################
*/
#lightgallery{position:relative;float:left;display:inline-block;width:102%;margin-right:-1%;margin-left:-1%;}
#lightgallery a{position:relative;float:left;display:block;overflow:hidden;}
.grid a{width:23%;height:15rem;margin-right:1%;margin-left:1%;margin-bottom:1.8rem;}
@media(max-width: 1199.98px){.grid a{width:48%;height:20rem;margin-right:1%;margin-left:1%;margin-bottom:0.8rem;}}
@media(max-width: 767.98px){.grid a{width:98%;height:15rem;margin-right:1%;margin-left:1%;margin-bottom:1rem;}}
#lightgallery a img{position:relative;z-index:9;display:inline-block;width:100%;height:100%;object-fit: cover;}
.lg-download::before{display:none;}
#lightgallery a::after{content: '';position:absolute;z-index:101;top:0%;left:0%;width:100%;height:100%;background:rgb(137,108,113,0.3);background-position:50% 50%;}
#lightgallery a:hover::after{background:rgb(50,67,51,0.0);background-image: url(images/zoom-in.svg);background-size: 6rem auto;background-repeat:no-repeat;background-position:50% 50%;}
#lightgallery a:hover img{-webkit-transform: scale(1.1);transform: scale(1.1);}