/***********************************************************
Farben 
- Hintergrund: #FFFFFF
- Menu Hintergrund: #FAF9F8 (250,249,248)
- Schrift: #313131 alt#7E7372
- Border: #beb7ad

************************************************************/
@font-face {
    font-family: "all-round-gothic";
    src:url('../fonts/all-round-gothic 200.woff2') format("woff2"),
    url('../fonts/all-round-gothic 200.woff') format("woff"),
    url('../fonts/all-round-gothic 200.opentype') format("opentype");
    font-style: normal;
    font-weight: 200;
}
@font-face {
    font-family: "all-round-gothic";
    src:url('../fonts/all-round-gothic i 200.woff2') format("woff2"),
    url('../fonts/all-round-gothic i 200.woff') format("woff"),
    url('../fonts/all-round-gothic i 200.opentype') format("opentype");
    font-style:italic;
    font-weight: 200;
}
@font-face {
    font-family: "all-round-gothic";
    src:url('../fonts/all-round-gothic 400.woff2') format("woff2"),
    url('../fonts/all-round-gothic 400.woff') format("woff"),
    url('../fonts/all-round-gothic 400.opentype') format("opentype");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "all-round-gothic";
    src: url('../fonts/all-round-gothic i 400.woff2') format("woff2"),
    url('../fonts/all-round-gothic i 400.woff') format("woff"),
    url('../fonts/all-round-gothic i 400.opentype') format("opentype");
    font-style: italic;
    font-weight: 400;
}
@font-face {
    font-family: "all-round-gothic";
    src:url('../fonts/all-round-gothic 700.woff2') format("woff2"),
    url('../fonts/all-round-gothic 700.woff') format("woff"),
    url('../fonts/all-round-gothic 700.opentype') format("opentype");
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: "all-round-gothic";
    src:url('../fonts/all-round-gothic i 700.woff2') format("woff2"),
    url('../fonts/all-round-gothic i 700.woff') format("woff"),
    url('../fonts/all-round-gothic i 700.opentype') format("opentype");
    font-style: italic;
    font-weight: 700;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    min-width: 320px;
    min-height: 320px;
    font-family: all-round-gothic, sans-serif; 
    font-weight: 200;
    font-style: normal;
    letter-spacing: 1.3px;
    color: #313131; /*#7E7372;*/
    background-color: #e3e2dd;
}

/*#####################################################
    Allgemein
######################################################*/
/*~~ Links ~~*/
a, 
a:hover, 
a:visited, 
a:active {color: #313131; /*#7E7372;*/}

/*~~ Überschriften ~~*/
h1, .h1 {text-transform: uppercase;}
h1, .h1, h2, .h2 {font-size: 1.8rem; font-weight: 400; line-height: 2.1rem; margin-bottom: 0px;}
h2, .h2 {margin-bottom: 20px;}

/*~~ Font ~~*/
.fontSize-small {font-size: 1.0rem; line-height: 1.3rem; font-weight: 200;}
.fontSize-normal {font-size: 1.3rem; line-height: 2.0rem; font-weight: 200;}
.fontWeight-bold {font-weight: 400;}

/*~~ Absätze ~~*/
p {margin-bottom: 0.8rem;}

/*~~ Margins ~~*/
.marginTop-small {margin-top: 10px;}
.marginTop-normal {margin-top: 15px;}
.marginTop-big {margin-top: 25px;}
.marginTop-xbig {margin-top: 40px;}
.marginLeftRight-auto {margin-left: auto; margin-right: auto;}

/*~~ Widths ~~*/
.width-full {width: 100%;}
.width-full img {max-width: 100%;}
.maxWidth-250px {width: 100%; max-width: 250px;}
.maxWidth-300px {width: 100%; max-width: 300px;}
.maxWidth-400px {width: 100%; max-width: 400px;}
.maxWidth-500px {width: 100%; max-width: 500px;}
.maxWidth-600px {width: 100%; max-width: 600px;}
.maxWidth-800px {width: 100%; max-width: 800px;}
.maxWidth-1000px {width: 100%; max-width: 1000px;}

/*~~ Align ~~*/
.textAlign-center {text-align: center;}
.textAlign-left {text-align: left;}
.align-leftCenter {text-align: left;}

/*~~ Separator ~~*/
.separator {border-bottom: 1px solid #beb7ad; padding-bottom: 30px; margin-bottom: 40px; margin-left: auto; margin-right: auto;}
.separator.bottomshadow {border-bottom: 0px; box-shadow: 0 5px 5px -7px #beb7ad;}

/*~~ Listen ~~*/
ul.small-circle {list-style-type: circle; padding-left: 20px;}

@media screen and (max-width: 450px) {
    h1, .h1, h2, .h2 {font-size: 1.5rem; line-height: 1.8rem;}
    .fontSize-small {font-size: 0.8rem; line-height: 1.3rem; font-weight: 200;}
    .fontSize-normal {font-size: 1.0rem; line-height: 1.7rem;}
}
@media screen and (max-width: 500px) {
    /*.align-leftCenter {text-align: center;}*/
}


/*#####################################################
    Header
######################################################*/
#scrollHome {height: 208px;}
#header {position: fixed; top: 0px; z-index: 1; width: 100%; background-color: #e3e2dd; height: 210px; transition: height 0.2s;}
#header.minimize {height: 94px;}

/*~~~~ Logo ~~~~*/
#header #logo-wrapper {width: 300px; height: 120px; display: -webkit-flex; display: flex; justify-content: center; position: fixed; top: 0px; left: 50%; margin-left: -150px; transition: height 0.3s;}
#header.minimize #logo-wrapper {height: 50px; top: 5px; z-index: 20;}

#header.minimize #logo-wrapper {width: 100px; margin-left: -50px;}
#header.minimize #logo-wrapper #logo  {text-align: center;}
#header #logo-wrapper #logo img {height: 120px; transition: height 0.3s;}
#header.minimize #logo-wrapper #logo img {height: 40px;}

/* Menu Desktop */
#menu-desktop-wrapper {width: 100%; height: 50px; position: relative; top: 140px; transition: top 0.3s; background-color: #e3e2dd;}
#menu-desktop-wrapper .nav-link {padding: .5rem 0.8rem;}
#header.minimize #menu-desktop-wrapper {top: 45px;}
#navbar-menulist-desktop {width: 100%; padding-bottom: 20px; box-shadow: 0 5px 5px -7px #beb7ad; margin-left: auto; margin-right: auto; display: -webkit-flex; display: flex; justify-content: center;}
#navbar-menulist-desktop a:hover,
#navbar-menulist-desktop a.active {font-weight: 400;}
#header.minimize #navbar-menulist-desktop {padding-bottom: 0px;}

/*~~~~ Menu Mobil ~~~~*/
#menu-mobile-wrapper {height: 50px; position: relative; top: 0px}

#menu-mobile.navbar {
    padding: 0px; 
    width: 100%;
    z-index: 10;
    position: relative;
}
/* Button */
#menu-mobile .navbar-toggler {outline: none;padding: 8px 10px;}
#menu-mobile .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(190,183,173, 1.0)' stroke-width='6' stroke-linecap='square' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}
#menu-mobile .navbar-collapse {background-color: #f7f7f7; z-index: 10;}
#menu-mobile .nav-item:nth-child(1) {border-top: 1px solid #beb7ad;}
#menu-mobile .nav-item {border-bottom: 1px solid #beb7ad;}
#menu-mobile .nav-link {padding-left: 10px;padding-right: 10px;font-weight: 200;}
#menu-mobile .nav-link:hover,
#menu-mobile .nav-link.active {font-weight: 400;}


/*~~~~ Mobile ~~~~*/
@media screen and (max-width: 999px) {
    #menu-mobile-wrapper {display: block;}
    #menu-desktop-wrapper {display: none;}
    #header #logo-wrapper {top: 40px;}
    #header {box-shadow: 0 5px 5px -7px #beb7ad;}
    #header.minimize {height: 50px;}
}

/*~~~~ Desktop ~~~~*/
@media screen and (max-width: 700px) {
    #menu-desktop-wrapper .nav-link {padding: .5rem 2.0rem;}
}
@media screen and (max-width: 600px) {
    #menu-desktop-wrapper .nav-link {padding: .5rem 1.4rem;}
}
@media screen and (min-width: 1000px) {
    #menu-mobile-wrapper {display: none;}
}

/*#####################################################
    Content
######################################################*/
/*~~~~ Container  ~~~~*/
.container {width: 100%; max-width: 800px;}

.price-info {display: -webkit-flex; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.price-info .left {width: 25%;}
.price-info .right {width: 75%;}

@media screen and (min-width: 600px) {
    .price-info .left {width: 15%;}
    .price-info .right {width: 85%;}
}


#start {display: -webkit-flex; display: flex; flex-wrap: wrap;}
#start #quote, 
#start #sina-portrait {width: 100%;}
#start #sina-portrait img {width: 80%;}
#start #jobs img {width: 50%;}
#start #quote div {width: 100%; position: relative; top: 15%;}
#welcome #jobs a {position: welcome; width: 100%; height: 100%; z-index: 1; display: block;}

/* Desktop */
@media screen and (min-width: 800px) {
    #start #quote {/*padding-top: 40px*/ margin-right: -15px;}
    #start #quote, 
    #start #sina-portrait {width: 50%; box-shadow: 0 5px 5px -7px #beb7ad;}
    #start #sina-portrait {text-align: left; margin: 0px !important;}
    #start #quote img {width: 40%;max-width: 200px;margin-left: 40%;}
}

/* Bilder Borderradius */
#welcome #jobs img {
    position: relative; z-index: -1;
    border-radius: 20px;
}


/* Bilder rund */
#sina-portrait,
#sina img,
#kontakt img {position: relative; z-index: -1;}

#start #sina-portrait img,
#sina img, #gutscheine img,
#kontakt img {-webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); margin-top: 5px; margin-bottom: 5px;}

/* Video */
.html5_video {
    width: 100%;
    height: auto;
}

/* Laufschrift */
.marquee-container {
    overflow: hidden;
}
.marquee {
    width: 100%;
    white-space: nowrap;
    animation: scroll-left 10s linear infinite;
}
.marquee a {
    text-decoration: underline;
}

@keyframes  scroll-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

/*#####################################################
    Contact
######################################################*/
#kontakt ul, #laser ul {padding-left: 0;}
#kontakt ul li, #kontakt ul li a, #laser ul li {list-style-type: none; 
    display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: center;}

#kontakt .contact-icon {width: 30px; height: 30px; margin-right: 5px; background-position: 0% 50%; background-size: 80% 80%; background-repeat: no-repeat;}
#kontakt #telefon-icon {background-image: url('../img/kontakt/tel_150x150.png');}
#kontakt #address-icon {background-image: url('../img/kontakt/pin_150x150.png');}
#kontakt #insta-icon {background-image: url('../img/kontakt/insta_150x150.png');}
#kontakt #mail-icon {background-image: url('../img/kontakt/mail_150x150.png');}
#kontakt #web-icon {background-image: url('../img/kontakt/web_150x150.png');}
#kontakt .whatsapp-icon {background-image: url('../img/kontakt/whatsapp_150x150.png');}
#kontakt #insta-icon {background-image: url('../img/kontakt/insta_150x150.png');}
#laser .contact-icon {min-width: 50px; min-height: 50px; margin-right: 5px; background-position: 0% 50%; background-size: 80% 80%; background-repeat: no-repeat;}
#laser .whatsapp-icon {background-image: url('../img/kontakt/whatsapp_150x150.png');}

/*#####################################################
    Footer
######################################################*/
#footer {
    height: 100px;
    background-color: #4c4c4e;
    display: -webkit-flex; display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 1.0rem;
    line-height: 1.0rem;
}
#footer a {
    color: #d3d3d5;
}
.footer-item {
    padding-left: 10px;
    padding-right: 10px;
}
.footer-item.one {
    border-right: 1px solid #d3d3d5;
}