body {
    background-image: url('img/bg.jpg');
    background-repeat: no-repeat;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 200;
    -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
    background-size: cover;
    word-wrap: break-word;
    background-repeat: repeat;
   }



a {
    color: #CCFFE3;
    text-transform: uppercase;
    
    
}

h1 {
    font-weight: 200;
    color: #CCFFE3 !important;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 20px;
}


h3 {
    font-size: 1.50rem;
}

a:hover { 
    cursor: pointer;
    text-decoration: none !important;}

a:visited { 
    color: #CCFFE3;}

ul li { 
    list-style-type: none;
    display: inline-block;
    font-size: 26px;
    padding-right: 10px;}

ul li a { 
    text-decoration: none;}




.wrapper { 
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    margin-top: 40px;
    height: 300px;
    padding: 20px;}


.wrappall {
    max-width: 350px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.franziska { 
    text-transform: uppercase;
    float:right;
        letter-spacing: 3px;
    font-size: 40px;
    font-weight: 300;
        position: absolute;
    right: 20px;
    color: #CCFFE3;
    }

.ahorn { 
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: upright;
    position: absolute;
    right: 6px;
    letter-spacing: -2px;
    margin: 49px 0 0 0 !important;
    font-size: 40px;
    font-weight: 300;
       color: #CCFFE3;  
}


@media (max-width: 414px) { 
    .ahorn { 
        text-transform: uppercase;
        writing-mode: vertical-rl;
        text-orientation: upright;
        position: absolute;
        right: 9px;
        letter-spacing: -2px;
        margin: 40px 0 0 0 !important;
        font-size: 32px;
        font-weight: 300;
        color: #CCFFE3;}
    .franziska { 
        font-size: 32px;}

}


@media (max-width: 375px) { 
    .ahorn { 
       font-size: 28px;
        right: 10px;}
    .franziska { 
       font-size: 28px;}

}



.foto { 
    filter: opacity(0.8)saturate(0);
    width: 100%;
    position: relative;
}

.port { 
    margin: 0 auto;
    position: relative;
    width: auto;
    max-width: 300px;
}




.draw {
   stroke-dasharray: 2338.5;
   stroke-dashoffset: 2338.5;
   animation: dash 10s forwards ;
}
@keyframes dash {
   to { stroke-dashoffset: 0;}
}

.raute { 
    position: absolute;
    z-index: 99999999;
    left: -18px;
    top: -2px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
   }


.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

.box { 
    width: 100%;
    box-shadow: 0 0 20rem 20px rgba(0, 0, 0, 0.77);
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(3px);
    padding: 10px;
margin-top: 20px;
}

.innerbox { 
   border: 1.5px solid #CCFFE3;
    padding: 20px;
    color: #CCFFE3;
    }

@media (max-width: 414px) { 
    .innerbox { 
        padding: 10px;}}


.mobilebutton { 
position: absolute;
right: 20px;
top: 20px;
    z-index: 4;
}


@media (min-width: 1024px) {  
    .mobilebutton { 
        display: none;}
    }


header {padding-top: 20px;}   

 
@media (max-width: 1024px) {  
    .main-navigation{ 
        color:#CCFFE3 ;
        display: none;
        background-color: #00000069;
        z-index: 2;
        box-shadow: 0 0 20rem 20px rgba(0, 0, 0, 0.77);
        background-color:  #000000a8;
        background-color: #282b29;
        padding-top: 10px;}
        }

 .offen { 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;}

.mail {
    width: 29px;
    position: absolute;
    left: 20px;
    top:20px;
}

.insta {
    width: 22px;
    position: absolute;
    left: 70px;
    top: 20px;
}

#primary-menu {
    margin-left: 70px;
    margin-top: -6px;
}

@media (max-width: 1024px) { 
    #primary-menu { 
    margin-left: 0;
    margin-top: 0px;}
}

.innerbox a { 
    text-transform: none;
    text-decoration: underline;}


.carousel {
    position: relative;
    max-width: 50%;
    margin: 0 auto;
        margin-top: 0px;
    margin-top: 100px;
}

@media (max-width: 1023px) { 
    .carousel {
        max-width: 83%;}}


@media (max-width: 770px) { 
    .carousel {
        margin-top: 80px;}}

@media (max-width: 414px) { 
    .carousel {
        margin-top: 50px;}}

@media (max-width: 375px) { 
    .carousel {
margin-top: 44px;}}



/*
.carousel-inner 
{ 
    height: 800px;
   
}




.carousel-control-prev {
    top: 7%;
    left: -10px;
}

.carousel-control-next {
    top: 7%;
    right: -10px;
}


/*.page-template-projekte .box {
    bottom: -210px;
position: absolute;
}
 

.carousel-caption {
    position: relative;
    right: unset;
    bottom: 20px;
    left: unset;
    z-index: 10;
    padding-top: 0;
    padding-bottom: 0; }*/

.carousel-caption { 
    position: relative;
    left: 0;
    top: 0;}

.btn { 
    padding: .375rem 0rem !important;}

.carousel-control-prev {
    top: 230px;
    left: 90px;
    z-index: 9999999;
    
}

.carousel-control-next {
    top: 230px;
    right: 90px;
    z-index: 9999999;
    
}


.carousel-control-prev-icon { 
    background-image: url('/wp-content/themes/freeziska/img/pfeilL.svg');
     width: 60px !important;
    height: 130px !important;
    background-size: contain;
    background-repeat: no-repeat;}

.carousel-control-next-icon { 
    background-image: url('/wp-content/themes/freeziska/img/pfeilR.svg');
    width: 60px !important;
    height: 130px !important;
    background-size: contain;
    background-repeat: no-repeat;
}}

.carousel-caption { 

text-align: unset !important;}



.innerbox a{ 
    color: #CCFFE3;
}


.innerbox a:visited { 
    color: #CCFFE3;
}

.innerbox a:hover { 
    color: #CCFFE3;
}

.innerbox a:focus { 
    color: #CCFFE3;
}

.btn:focus {
    box-shadow: none;
}