/* FIRMA
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.firma > div{margin:40px 0; display:flex; flex-wrap:wrap; width:100%}
.firma h2{width:100%}
.firma p{width:calc(33% - 15px); border:solid 3px var(--grey); padding:15px; margin:0 15px 15px 0; box-sizing:border-box; text-align:center; border-radius:15px; hyphens:auto; -webkit-hyphens:auto; -moz-hyphens:auto;}
.firma p strong{color:var(--grey)}
.firma p a{display:block; margin:10px 0}
.firma a img{height:100px; width:auto; filter:grayscale(100%)}
.firma a:hover img{filter:none}
.partner p{width:calc(20% - 15px);}

@media (max-width: 700px) {
  .firma p{width:100%; margin:0 0 15px 0} 
}

/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen > div > p{padding:0 0 0 50px; box-sizing:border-box}
.kompetenzen > div > p:nth-child(2){padding:0}
.kompetenzen h2{display:flex; margin:40px 0 0 0}
.kompetenzen h2 span{display:block; width:40px; height:40px; border-radius:50%; background:var(--grey); overflow:hidden; padding:5px; box-sizing:border-box; margin:0 10px 0 0 }
.kompetenzen h2 img{filter:brightness(0%) invert(1); width:30px; height:30px}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{background:var(--blue); margin:80px 0}
.contact > div{margin:0 auto; width:100%; max-width:1024px; display:flex; flex-wrap:wrap; align-items:center; padding:40px 0}
.contact p{color:#FFF; text-align:center}
.contact a,.contact a:visited{color:#FFF}
.contact a:hover{color:#000}
.contact > div > div{padding:30px 15px 5px 15px; box-sizing:border-box}
.contact > div .cta{width:50%}
.contact > div .cta > p{font-size:40px; line-height:50px; margin:0 0 40px 0}
.contact > div .icon{width:25%; display:flex; justify-content:center}
.contact > div .icon p{display:block; height:200px;}
.contact > div .icon img{filter:brightness(0%) invert(1); width:auto; height:200px }
.contact > div .icon:last-child img{transform:rotate(180deg)}
.contact > div .cta .content{display:flex; width:100%; flex-wrap:wrap; justify-content:space-around}

@media (max-width: 1000px) {
  .contact > div .cta{width:100%}
  .contact > div .icon{display:none}
}

@media (max-width: 700px) {
  .contact > div .cta .content{display:block}
}

/* BACKGROUNDS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-home > div{height:70vh; background-position:top center; background-size: cover; position:relative; }
.bg-home p{font-size:50px; line-height:70px; max-width:900px; width:100%; padding:0 15px; box-sizing:border-box; text-align:center; text-shadow: 2px 2px #000; position:absolute; top:10%; left:50%; transform:translateX(-50%); color:#FFF}
.bg-content> div{height:50vh; background-position:center center; background-size: cover}

@media (max-width: 700px) {
  .bg-home p{font-size:40px; line-height:50px; top:5%;}
}
@media (max-width: 380px) {
  .bg-home p{font-size:30px; line-height:40px}
}


/* HOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home-content > div{display:flex; justify-content:space-around; flex-wrap:wrap; margin:0 0 80px 0; width:100%}
.home-content p{width:200px; height:100px; border-radius:15px; border:solid 3px var(--grey); color:var(--grey); display:flex; align-items:center; justify-content:center; margin:30px 0; text-transform:uppercase; text-align:center}
.home-kompetenzen{margin:40px auto 80px auto; width:100%; max-width:1024px; padding:0 15px; box-sizing:border-box;}
.home-kompetenzen > div{width:100%; display:flex; justify-content:center; flex-wrap:wrap}
.home-kompetenzen p{font-size:14px; line-height:16px; hyphens:auto; -moz-hyphens:auto; -webkit-hyphens:auto; width:100px; margin:15px 7.5px; text-align:center}
.home-kompetenzen span{background:var(--grey); padding:15px; box-sizing:border-box; width:100px; height:100px; display:block; border-radius:15px}
.home-kompetenzen a:hover span{background:var(--blue)}
.home-kompetenzen img{filter:brightness(0%) invert(1); width:100%; height:auto}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.address{width:100%; margin:40px 0}
.address h2{width:100%; max-width:1024px; padding:0 15px; box-sizing:border-box; margin:0 auto 20px auto}
.address > div > .maps{display:flex; flex-wrap:wrap; width:100%;}
.address > div > .maps > .content{width:33.333%}
.address > div > .maps > .content iframe{width:100%; height:400px; margin:0 0 20px 0}
.address > div > .maps > .content p{text-align:center;}
.address p{margin:0 0 10px 0}

address{font-style:normal; text-align:center}

@media (max-width: 700px) {
  .address > div > .maps > .content{width:100%; margin:0 0 30px 0}
  .address > div > .maps > .content:nth-child(1){order:1}
  .address > div > .maps > .content:nth-child(2){order:0}
  .address > div > .maps > .content:nth-child(3){order:2}
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{width:100%; background:#FFF; height:100px; position:relative}
.logo > div{position:absolute; left:30px; top:10px}
.logo img{width:auto; height:80px}
.logo p{margin:0}
.contact-btn div{position:absolute; top:50px; left:50%; transform:translate(-50%,-50%); display:flex;}
.contact-btn p{margin:10px; position:relative}
.contact-btn img{width:30px; height:auto}
.contact-btn img:hover{filter:brightness(100%);}
.contact-btn div > p:hover:after{position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); font-size:16px; line-height:16px; text-align:center; width:180px; color:var(--blue)}
.contact-btn div > p:hover:nth-child(1):after{content:"7500 St. Moritz"}
.contact-btn div > p:hover:nth-child(2):after{content:"+41 (0)81 832 29 80"}
.contact-btn div > p:hover:nth-child(3):after{content:"info@mittner-ag.ch"}

@media (max-width: 700px) {
  .logo > div{left:10px}
  .contact-btn div{left:auto; right:60px; transform:translate(0,-50%);}
  .contact-btn p{margin:5px}
}
@media (max-width: 380px) {
  .contact-btn img{width:20px}
}
@media (max-width: 350px) {
  .contact-btn div{left:auto; right:10px; top:65px; transform:none}
  .contact-btn p{margin:5px}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{background:var(--blue);}
footer div{width:100%; margin:auto; max-width:1024px; padding:15px; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; height:100px; }
footer p{margin:10px 0}
footer a, footer a:visited{color:#FFF}
footer a:hover{color:#000}
footer p:nth-child(1) > a:nth-child(1){margin:0 30px 0 0}
footer p:nth-child(2){font-size:14px; line-height:16px}

@media (max-width: 700px) {
  footer p:nth-child(1){margin:0 0 30px 0}
  footer div{height:160px}
  footer div{display:block}
  footer p{text-align:center}
}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{margin:40px auto 0 auto; width:100%; max-width:1024px; padding:0 15px; box-sizing:border-box}

@media (max-width: 700px) {
  article{margin:40px auto 0 auto;}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:fixed; top:29px; right:29px; z-index:10}
nav > ul {position:fixed; top:0; right:0; width:320px;}
nav ul{padding:0; margin:0; list-style: none; overflow: hidden; }
nav > ul > li:first-child{padding-top:80px}
nav > ul > li{width:100%; padding:0; margin:20px 0}
nav > ul > li > a{font-weight: 700}
nav a, nav, nav a:visited, nav:visited{color:#FFF}
nav a:hover{color:var(--blue)}
nav > ul > li .arrow:hover:before {content:'\2794 '; padding-right:5px}
nav > ul > li .arrow:hover:after {content:'\2794 '; padding-left:5px; color:transparent}

/* menu */
nav .mod-menu {height: 0;  transition: height .2s ease-out;	text-align: center;}

/* menu icon */
nav .menu-icon {cursor: pointer; display: inline-block; padding: 19px 7px; position: relative; border-radius:9px; z-index:2; background:var(--blue)}
nav .menu-icon:hover{background:#000}
nav .menu-icon .navicon {  background: #FFF;  display: block;  height: 5px;  position: relative;  transition: background .2s ease-out;  width: 30px;}
nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {background: #FFF;  content: '';  display: block;  height: 100%;  position: absolute;  transition: all .2s ease-out;  width: 100%;}
nav .menu-icon .navicon:before {top: 12px;}
nav .menu-icon .navicon:after {top: -12px;}

/* menu btn */
nav .menu-btn {  display: none;	text-align: center;}
nav .menu-btn:checked ~ .mod-menu {height: 100%; background: rgba(0,0,0,0.85)}
nav .menu-btn:checked ~ .menu-icon {background:var(--blue)}
nav .menu-btn:checked ~ .menu-icon .navicon {  background: transparent;}
nav .menu-btn:checked ~ .menu-icon .navicon:before {  background: #FFF; transform: rotate(-45deg);}
nav .menu-btn:checked ~ .menu-icon .navicon:after {  background: #FFF; transform: rotate(45deg);}
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {  top: 0;}

@media (max-width: 1000px) {
nav .menu-btn:checked ~ .menu {height: 100%; background: rgba(0,0,0,1)}
}
@media (max-width: 700px) {
  nav{position:fixed; top:23px; right:6px}
  nav > ul {width:100%;}
  nav > ul > li:first-child{padding-top:20px}
}

@media (max-width: 420px) {
  nav > ul > li:first-child{padding-top:100px}
}


/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--blue:#005297; --grey:#757779}

@font-face {font-family: 'ralewaybold'; src: url('../fonts/raleway-bold.woff2') format('woff2'), url('../fonts/raleway-bold.woff') format('woff'); font-weight: bold; font-style: bold;}
@font-face {font-family: 'ralewayregular'; src: url('../fonts/raleway-regular.woff2') format('woff2'), url('../fonts/raleway-regular.woff') format('woff'); font-weight: normal; font-style: normal;}


html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px; line-height: 30px; font-weight: 300; font-family: ralewayregular, sans-serif; color: #000}
a, a:visited{color: #000;text-decoration: none}
a:hover{color:var(--blue)}
strong {font-weight: 700}
p {margin:0 0 20px 0}

.transition{-ms-transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover{-ms-transition: all 500ms;-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

.auto-hyphens{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}

h1,h2,h3,h4{font-weight:700;text-align:left;color:var(--grey);margin:0}

h1{font-size:40px; line-height:50px; margin:0 0 20px 0}
h2{font-size:30px; line-height:40px; margin: 0 0 20px 0}
h3{font-size:24px; line-height:34px; margin: 0 0 10px 0}
h4{font-size:24px; line-height:34px;}

@media (max-width: 700px) {
  h1,h2,.item-pagedatenschutz p{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
  .item-pagedatenschutz{max-width:100%; overflow:hidden;}
}