@import url('https://www.machermakler.ch/layout/machermakler/googlefonts/montserrat/montserrat.css');
@import url('https://www.machermakler.ch/layout/machermakler/googlefonts/hurricane/hurricane.css');

* { margin:0px;padding:0px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; }

:root {
  --color:#df0013;
  --color-rgb:223,0,19;
  --color-font:#1d1d1b;
  --color-background:#ffffff;
  --font-primary:'Montserrat', sans-serif;
  --font-secondary:'Hurricane', sans-serif;
  --transition-default:all 1s ease-in-out;
  --transition-faster:all 0.25s ease-in-out;
  --transition-slow:all 1.75s ease-in-out;

}

html, body { height:100%;font-family:var(--font-primary);font-size:18px;line-height:24px;color:var(--color-font);scroll-behavior:smooth; }
html { -ms-scroll-snap-type:mandatory;scroll-snap-type:mandatory;-ms-scroll-snap-points-y:repeat(100vh);scroll-snap-points-y:repeat(100vh);-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch; }

.overlay { overflow: hidden !important; }

.clearboth { clear:both;height:0px;line-height:0px;font-size:0px; }
.loader { display:none;position:absolute;margin:-25px 0 0 -25px;top:50%;left:50%; }
.hidden { display:none; }
a { color:var(--color);text-decoration:none;border-bottom:3px solid transparent; }
a:hover { border-color:var(--color);-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
a images { border:none; }

a.button { display:inline-block;width:auto !important;padding:10px 25px;border:none;background:rgba(0,0,0,.3);font-family:var(--font-primary);font-size:18px;line-height:1em;font-style:italic;font-weight:800;color:#ffffff;cursor:pointer;border-radius:50px;text-transform:uppercase; }
a.button:hover { background:var(--color);-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }

.akzent { color:var(--color); }
.font-secondary { font-family:var(--font-secondary);font-style:normal;font-weight:400; }

input, select, textarea { font-family:var(--font-primary);font-size:18px;line-height:1em;font-style:italic;font-weight:800;background:transparent;border:none;border-bottom:4px solid rgba(0,0,0,.3);padding:10px 0;outline:0;-webkit-appearance:none; }
input::placeholder, select::placeholder, textarea::placeholder { font-style:normal;font-weight:300; }
input:focus, select:focus, textarea:focus { border-color:var(--color);-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
input[type="submit"], input[type="button"] { width:auto !important;padding:10px 25px;border:none;background:rgba(0,0,0,.3);color:#ffffff;cursor:pointer;border-radius:50px;text-transform:uppercase; }
input[type="submit"]:hover, input[type="button"]:hover { background:var(--color);-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }

header { position:fixed;width:100%;z-index:100; }
header .header-wrapper { display:grid;grid-template-columns:auto 300px;padding:50px; }
header .header-wrapper .header-wrapper-logo a { display:block;width:100%;border:none; }
header .header-wrapper .header-wrapper-logo a img { display:block;width:100%; }

main { position:relative;font-size:22px;line-height:1.36em; }
main section { position:relative;display:flex;min-height:100vh;align-items:center;justify-content:center;flex-direction:column;scroll-snap-align:start;padding:10vh 0; }
main section:nth-child(even) { background:rgba(0,0,0,.05); }
main section.flex-bottom { justify-content:flex-end;padding-bottom:0; }
main section.flex-space-between { justify-content:space-between;padding-bottom:0; }
main section.image-full { background-size:cover;background-position:center; }
main section.image-full.makler-uebersehen { background-position:right center;padding-bottom:12vh; }
main section.makler-uebersehen { align-items:start;justify-content:flex-end;padding-left:130px; }
main section.image-full.welcome:after { content:"";display:block;position:absolute;height:50vh;width:100%;bottom:0px;left:0px;background:linear-gradient(0deg, rgba(0,0,0,.5), transparent);z-index:1; }
main section.no-scroll-snap { scroll-snap-align:none; }

main section.image-left { display:grid;padding:0;grid-template-columns:1.5fr 2.5fr; }
main section.image-left > div:nth-child(1) { background-size:cover;background-position:center;height:100%;width:100%; }
main section.image-left > div:nth-child(2) { padding:100px; }

main section.image-icon { display:grid;padding-bottom:0;grid-template-rows:auto 430px;grid-template-columns:1fr;justify-items:center; }

main .section-navi { position:fixed;left:50px;top:50vh;transform:translate(0,-50%);z-index:99; }
main .section-navi ul { list-style-type:none;margin:0;width:20px;display:flex;flex-direction:column;align-items:center; }
main .section-navi ul li { cursor:pointer;background:rgba(0,0,0,.4);border-radius:50%;width:15px;height:15px;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:15px;margin:0 0 10px 0;color:#ffffff;font-weight:500;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
main .section-navi ul li.active { background:var(--color);font-weight:700; }
main .section-navi ul li:hover { width:20px;height:20px;background:rgba(0,0,0,.65); }
main .section-navi ul li:last-of-type { margin:0; }

main h1 { font-size:46px;line-height:1.2em;font-weight:800;text-align:center;font-style:italic;margin:0 0 46px 0;width:65%; }
main h1 > .font-secondary { font-size:60px; }
main h2 { font-size:40px;line-height:44px;font-weight:800;text-align:center;font-style:italic;margin:0 0 40px 0;width:65%; }
main h3 { font-size:32px;line-height:36px;font-weight:800;text-align:center;font-style:italic;margin:0 0 32px 0;width:65%; }
main p { margin:0 0 40px 0;width:65%;text-align:center; }
main ul { width:65%;margin:0 0 40px 0;list-style-type:none; }
main ul li { margin:0 0 10px 0; }
main ol { width:65%;margin:0 0 40px 30px; }
main ol li { margin:0 0 10px 0; }

main .claim { margin-top:20px;font-weight:700;color:rgba(0,0,0,.4); }

main .form { width:35%; }
main .form label { display:block;width:100%;margin:0 0 20px 0; }
main .form label:last-of-type { margin:0;text-align:center; }
main .form label > input { width:100%; }
main .form label.telefon { display:flex; }
main .form label.telefon select { padding-right:5px; }
main .form label.telefon input { padding-left:5px; }

main .table-list { width:45%;display:grid;grid-template-columns:1fr 4fr;gap:10px; }
main .table-list > span:nth-child(2n-1) { font-weight:600; }

main div.cta-button { position:fixed;z-index:99;bottom:50px;right:50px; }

main section.image-full.makler-uebersehen .textbox { background:rgba(255,255,255,.7);width:45vw;padding:40px 50px;font-size:1em;border-radius:35px;box-shadow:0 0 50px rgba(0,0,0,.2); }
main section.image-full.makler-uebersehen .textbox h2 { width:100%;font-size:40px; }
main section.image-full.makler-uebersehen .textbox ul { width:100%;text-align:center;margin:0; }

main section.image-full.welcome { justify-content:flex-start;padding:10vh 40vw 0 0;color:#ffffff; } /* text-shadow:0 0 30px rgba(0,0,0,.6); */
main section.image-full.welcome h1, main section.image-full.welcome p { z-index:99; }
main section.image-full.welcome h1 { color:var(--color);text-align:left; }
main section.image-full.welcome p { text-align:left;font-size:25px;text-shadow:0 0 10px black; }

main section .left { text-align:left; }
main section.image-left h2 { text-align:left;width:100%; }
main section.image-left ol { margin:0 0 0 30px;width:80%; }

main section ul.icon-list li { display:grid;grid-template-columns:50px 1fr;grid-gap:15px;align-items: center; }
main section .wrapper-icons { width:200px;display:grid;grid-template-columns:repeat(2, 75px);grid-gap:50px;margin:0 auto; }
main section .wrapper-icons a, main section .wrapper-icons a:hover { border-bottom:none;height:75px; }


main .flex-text { display:grid;width:70%; }
main .flex-text h1, main .flex-text h2, main .flex-text h3, main .flex-text p, main .flex-text ul, main .flex-text ol { width:100%; }

main .image-bottom { display:block;height:430px; }
main .image-bottom > img { display:block;height:100%;width:auto;-webkit-filter:drop-shadow(0px 0px 35px rgba(0,0,0,.25));filter:drop-shadow(0px 0px 50px rgba(0,0,0,.25)); }

/* Normal Screen */
@media only screen and (max-width: 1920px) {
  main { font-size:20px; }
  main h1 { font-size:40px; }
}

@media only screen and (max-width: 1440px) {
  
}

@media only screen and (max-width: 1240px) {
  html { -ms-scroll-snap-type:none;scroll-snap-type:none;-ms-scroll-snap-points-y:repeat(100vh);scroll-snap-points-y:repeat(100vh);-ms-scroll-snap-type:y none;scroll-snap-type:y none;-webkit-overflow-scrolling:touch; }
  .section-navi { display:none; }

  main h1 { font-size:42px;line-height:1.1em;margin:0 0 42px 0;width:65%; }
  main h1 > .font-secondary { font-size:60px; }
  main h2 { font-size:36px;line-height:40px;margin:0 0 36px 0;width:65%; }
  main h3 { font-size:28px;line-height:32px;margin:0 0 28px 0;width:65%; }

  main section.image-full.makler-uebersehen .textbox h2 { width:100%;font-size:36px; }
  main section.image-full.welcome p { font-size:22px; }
}

/* Smaller Screen & Tablet Horizontal */
@media only screen and (max-width: 1166px) {
  
} 

@media only screen and (max-width: 1024px) {
  
}

/* Tablet */
@media only screen and (max-width: 821px) {
  header { background-image:linear-gradient(#ffffff, rgba(0, 0, 0, 0)); }
  header .header-wrapper { grid-template-columns:auto 300px auto }

  main h1 { font-size:42px;line-height:1.1em;margin:0 0 42px 0;width:80%; }
  main h1 > .font-secondary { font-size:60px; }
  main h2 { font-size:36px;line-height:40px;margin:0 0 36px 0;width:80%; }
  main h3 { font-size:28px;line-height:32px;margin:0 0 28px 0;width:80%; }
  main p { width:80%; }
  main ul { width:80%; }
  main .form { width:50%; }

  main section.image-full.welcome { padding:18vh 0 0 0;  }
  main section.image-full.makler-uebersehen { background-position:center center; }
  main section.makler-uebersehen { padding-left:85px; }
  main section.image-full.makler-uebersehen .textbox { width:50vw; }
  main section.image-left > div:nth-child(2) { padding:60px; }
  main section.image-left ol { width:90%; }

  main .flex-text { width:80%; }
}

@media only screen and (max-width: 575px) {  
  main .form { width:80%; }

  main section:last-of-type { padding-bottom:120px; }
  main section.image-full.makler-uebersehen { padding-left:0; }
  main section.image-full.makler-uebersehen .textbox { width:80%;margin:0 auto; }
  main section.image-icon { grid-template-rows:auto 300px; }
  main section.image-left { grid-template-columns:1fr;grid-template-rows:400px auto; }
  main section.image-left > div:nth-child(1) { background-position:center top; }
  main .image-bottom { height:300px; }
  main .image-bottom > img {  }
  a.button { background:rgba(0,0,0,.75) }
}        

/* SmartPhone */
@media only screen and (max-width: 480px) {   
  header .header-wrapper { grid-template-columns:auto 200px auto }

  main h1 { font-size:38px;line-height:1em;margin:0 0 38px 0;width:80%; }
  main h1 > .font-secondary { font-size:60px; }
  main h2 { font-size:32px;line-height:36px;margin:0 0 32px 0;width:80%; }
  main h3 { font-size:24px;line-height:28px;margin:0 0 24px 0;width:80%; }
  main p { width:80%; }
  main ul { width:80%; }
  

  main section.image-full.makler-uebersehen .textbox h2 { font-size:32px;line-height:36px; }
}

/* Mobile */
@media only screen and (max-width: 425px) {
  main section.image-full.welcome p { font-size:20px; }
  main section.image-full.makler-uebersehen .textbox { padding:30px 35px; }
  main section.image-left { grid-template-columns:1fr;grid-template-rows:300px auto; }
  main section.image-left > div:nth-child(2) { padding:30px; }
  
  main section.image-icon { grid-template-rows:auto 280px; }
  main .image-bottom { height:280px; }

  input[type="submit"], input[type="button"] { padding:10px 10px; }
}