@import url("fonts.css");
@import url("reset.css");

body{font-family:'Roboto', sans-serif;min-height: 100vH;}

content{margin-bottom:150px;display:block;min-height: 100vH;}
.clear{clear:both;}

h1{font-family:'EB Garamond', serif;font-weight:600;}
section.column h1{font-family:'Roboto', sans-serif;}
section.column h2,
section.column article > p > strong {font-family:'EB Garamond', serif;}
section.column article > p > strong {font-size:18px;}

header{padding:10px 20px 20px 20px;position:relative;z-index:2;}
header div:first-child{float:left;}
header div:first-child a{text-decoration:none;}
header nav{float:right;padding-top:0;}
header nav li{padding:5px 20px;margin-right: 0;display:inline-block;/*background-color:#0062ae;*/}
header nav li a{font-size:20px;color:#0062ae;text-decoration:none;font-family:'EB Garamond', serif;font-weight:600;}
header nav li a:hover{text-decoration:underline;}
.head_label{position: absolute;display: flex;justify-content: center;left: 0;right: 0;flex-direction: column;align-items: center;}
.head_label h1,.head_label h3,.head_label h4{background-color:#fff;padding:2px 50px;margin-top:-30px;font-family:'EB Garamond', serif;font-weight:600;text-align: center;}
.head_label h1:last-child{font-size:48px;}
.head_label h3{font-size:20px;line-height:24px;text-align: center;}

.bgimg{background-size:cover;background-position:center top;height: 300px;}
.bgimg.full{position:absolute;top:0;right:0;bottom:60px;left:0;height: unset;background-position:center;}
.bgimg.full.anim{background-position:center bottom;top:-150px;bottom:-50px;left:-50px;right:-150px;transition:all 3s ease-in-out;-webkit-transition:all 3s ease-in-out;-o-transition:all 3s ease-in-out;-moz-transition:all 3s ease-in-out;}

.logo {max-height: 50px;}
.logo + span {margin-left: -165px;font-family:'EB Garamond', serif;font-size:16px;color:#0062ae;font-style:italic;font-weight: 600;}

.p1 h1{font-size: 80px;text-align:right;float:right;margin-right:5%;margin-top:5%;margin-left: 20%;max-width: 1200px;position:relative;z-index:2;}
.p1 h1 a{text-decoration:none;color:#0062ae;}

content nav {max-width: 1550px;margin: 0 auto;padding-top: 100px;}
content .full > nav {padding-top: 184px;}
content nav > ul > li {width: 33.33%;float: left;min-height: 50px;}
content nav > ul > li > div {margin: 0 50px;position:relative;}
content nav > ul > li > div div.bgimg {position: absolute;right: 0;left: 0;background-position: center;}
content nav > ul > li > div div.bgimg span{position: absolute;bottom: 0;font-weight: 600;font-size: 20px;left: 0;right: 0;text-align: center;color: #fff;background-color: rgba(0,0,0,0.3);padding: 10px 0;}
content nav > ul > li > div > a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px;
  background-color: #0062ae;
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-size: 26px;
  float: right;
  margin-top: -25px;
  position: relative;
  z-index: 1;
}
content nav > ul > li >div > ul {
  position: absolute;
  top: 25px;
  background-color: #fff;
  left: 0;
  right: 0;
  min-height: auto;
  border-top: 4px solid #0062ae;
  border-right: 30px solid #0062ae;
  padding: 15px 50px 40px 15px;
  display:none;
  z-index: 1;
}
content nav > ul > li:hover ul {display:block;}
body.p4 content nav > ul > li div.bgimg,
body.p3 content nav > ul > li div.bgimg,
body.p5 content nav > ul > li div.bgimg,
body.p6 content nav > ul > li div.bgimg{display:none;}
content nav > ul > li.active > div > a:after{
  content: ' ';
  margin-top: 5px;
  border-bottom: 4px solid red;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -8px;
}
content nav > ul > li.active:hover > div > a:after{display:none;}
content nav > ul > li:hover > div > a:before{content: '▲';color:#fff;transform:rotate(-134deg);font-size: 68px;position: absolute;right: 35%;top: 26px;}
content nav > ul > li ul li:first-child h1{margin-bottom: 5px;}
content nav > ul > li ul li {border-bottom: 1px solid black;padding:5px 0;}
content nav > ul > li ul li a{text-decoration:none;color:#000;font-weight:600;}
content nav > ul > li > div > ul > li > ul {padding-left: 15px;}
content nav > ul > li > div > ul > li > ul li {border: none;padding-top:0;padding-bottom:0;}
content nav > ul > li > div > ul > li > ul li a {font-size: 18px;font-weight:400;}

.column{float: left;}
.column:first-child{width: 52%;}
.column+.column{width: 48%;}
.column:first-child article{margin: 50px 40px 50px 100px;}
.column+.column article{margin: 50px 100px 50px 40px;max-width:550px;}
.column+.column article a{text-decoration: none;color:#000;}
.column+.column article a:hover{text-decoration: underline;}

.row{clear:both;display:blocK;}

.column img{max-width: 100%; height: auto;}

.img_content img{object-fit: cover;height: 350px;max-width: 100%;display:block;}
.overview{max-width: 1650px;margin: 80px auto 0;}
.overview section.big{width:33.33%;float:left;}
.overview section.small{width:25%;float:left;}
.overview section.small .img_content img{height: 250px;}
.overview section article{margin: 0 20px 40px;position:relative;}
.overview section article.title{padding-bottom: 30px;padding-top:20px;margin-bottom:0;}
.overview section article > h2{margin-bottom: 10px;font-weight:600;font-size:30px;text-align: center;font-family:'EB Garamond', serif;}
.overview section article.title > h2{font-size: 38px;}
.overview section .title > h2{font-size:36px;}
.overview section .title p {font-size: 22px;text-align: center;hyphens:auto;}
.overview section .title p strong {font-weight: 600;}
.p5 .overview section article > h2{font-family:'EB Garamond', serif;}
.overview section article > h2 > a{text-decoration:none;color: #0062ae;display:block;text-align: center;font-weight:600;font-size:32px;}
.overview section article > h2 > a:hover{text-decoration:underline;}
.overview section.big article > h2 > a,
.overview section.small article > h2 > a{font-family:'EB Garamond', serif;}
.overview section article span{font-size: 18px;font-weight: 600;position: absolute;bottom: 0;left: 0;right: 0;text-align: center;color: #fff;background-color: rgba(0,0,0,0.3);padding: 10px 0;}

footer{
    position: fixed;
    bottom: 0;
    height: 60px;
    width: 100vW;
    background-color: #bad4e8;
    display: flex;
    justify-content: center;
    align-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px;
    gap: 20px;
}
footer.relative {
  position: relative;
  width: auto;
}
footer section{font-family:'EB Garamond', serif;flex-grow: 1;}
footer section:first-child{padding-left:50px;}
footer section:last-child{padding-right:50px;}
footer section h4{font-size: 20px;}
footer section div{line-height: 28px;}
footer section a{text-decoration: none;color: #000;}
footer section a:hover{text-decoration: underline;}

img.responsive{width:auto;height: 100% !important;}
footer img.responsive{max-height: 100px;padding: 5px 5px 0;}
.social_img{max-height:60px!important;}
br.smallOnly{display:none;}

.grid-sizer,
.grid-item { width: 33%;}
.gutter-sizer{ width: 0.33%;}
.grid-item img{max-width:100%;height:auto;}
.overview.grid{margin-left:0.33%;}

label,
input[type=submit]{
  display: block;
  font-size: 1em;
  margin: 15px 0 5px;
}
select,
input[type=text],
input[type=submit]{
    display: block;
    height: 25px;
    width: 50%;
}
label > input[type=text] {
  float: left;
  margin-right: 20px;
  width: 15% !important;
}

textarea{width: 50%;}
.error{color:red;}
.success{color:green;}
a.gototop{float:right;clear:both;cursor:pointer;font-size: 30px;margin: -25px 20px 0 0;}

@media screen and (min-width: 1750px) { /*Big-Screens*/
    .head_label h1{font-size:38px;}
    .head_label h1:last-child{font-size:48px;}
    .head_label h3{font-size:24px;line-height:28px;}
    .column:first-child article{margin-left:auto;max-width:750px;}
    .column+.column article{margin-right:auto;}
    .bgimg{height: 350px;}
    content nav > ul > li ul li a {font-size: 20px;line-height: 28px;}
    .overview{margin-top: 100px;}
    .overview section article > h2 {font-size: 32px;}
    .overview.grid{margin-left:auto;}
    .grid-sizer,
    .grid-item { width: 19%; }
    .gutter-sizer{ width: 1%;}
    .overview.grid{margin-left:auto;}
}

@media screen and (max-width: 1285px) { /*Smaller-Screens*/
    /*header nav li {padding: 5px 10px;}
    header nav li a {font-size: 16px;}*/
    
    header{padding-right: 20px;}
    header nav:before,
    header nav:after{
      content: ' ';
      display: block;
      width: 50px;
      border: 2px solid black;
    }
    header nav ul {margin: 8px 0;border: 2px solid black;}
    header nav ul li{display:none;}
    header nav {padding-top:0;margin-top: 20px;cursor: pointer;}
    header nav.open > ul {
      border: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin-top: 0;
      min-height: 100vH;
      background-color: #0062ae;
      padding-top: 50px;
      text-align: center;
    }
    header nav.open > ul > li {
      display: block;
      margin-right: 0;
    }
    header nav li a {font-size: 28px;line-height:38px;color:#fff;}
    header nav.open:before,
    header nav.open:after{position: absolute;right: 20px;transform: rotate(45deg);z-index:2;border-color:#fff;}
    header nav.open:after{transform: rotate(-45deg);}
    
    footer img.responsive{max-height: 40px;}
    .social_img{max-height:30px!important;}
    .bgimg{height: 250px;}
    .overview section article > h2 > a{font-size:26px;}
    .overview section .title > h2{font-size:30px;}
    .img_content img{height: 300px;}
    footer section:last-child{display: flex;padding-right:15px;}
    content nav > ul > li > div {margin: 0 20px;}
    footer section:first-child{padding-left:15px;}
    footer, footer section h4 {font-size: 17px;}
    footer section div{line-height: 23px;}
    .overview section article > h2 {font-size: 22px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .overview section article.title > h2 {overflow: visible;text-overflow: initial;white-space: normal;}
    .column:first-child article {margin-left:40px;}
    .column + .column article {margin-right: 40px;}
    br.smallOnly{display:block;}
    footer section:last-child div{text-align:right;}
    .grid-sizer,
    .grid-item { width: 32%;}
    .gutter-sizer{ width: 1.33%;}
    .overview.grid{margin-left:1.33%;}
    select,
    input[type=text],
    input[type=submit],
    textarea{
        width: 98%;
    }
}

@media screen and (max-width: 720px) { /*Tablet*/
    /*header{padding-right: 20px;}*/
    .logo + span{
      display: block;
      margin: 0 0 0 20px;
    }
    /*header nav:before,
    header nav:after{
      content: ' ';
      display: block;
      width: 50px;
      border: 2px solid black;
    }
    header nav ul {margin: 8px 0;border: 2px solid black;}
    header nav ul li{display:none;}
    header nav {padding-top:0;margin-top: 20px;cursor: pointer;}
    header nav.open > ul {
      border: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin-top: 0;
      min-height: 100vH;
      background-color: #0062ae;
      padding-top: 50px;
      text-align: center;
    }
    header nav.open > ul > li {
      display: block;
      margin-right: 0;
    }
    header nav li a {font-size: 28px;line-height:38px;color:#fff;}
    header nav.open:before,
    header nav.open:after{position: absolute;right: 20px;transform: rotate(45deg);z-index:2;border-color:#fff;}
    header nav.open:after{transform: rotate(-45deg);}*/
    .head_label h1:last-child {font-size: 34px;}
    content nav {padding-top: 20px;position:relative;}
    content nav > ul > li {width: 100%;padding-top: 5px;}
    content nav > ul > li > div > a {float: left;margin-top: 0;}
    content nav > ul > li > div {margin: 0;position:unset;}
    content nav > ul > li > div > ul {top: 0;margin-left: 200px;}
    content nav > ul > li:hover > div > a:before{left: 190px;top: 16px;transform: rotate(-90deg);}
    content nav > ul > li > div div.bgimg {display:none;}
    content nav > ul > li > div > ul > li > ul li a {font-size: 16px;}
    content .full > nav {margin-top: 154px;padding-top: 0;}
    .bgimg.full {bottom: 45px;}
    .overview section.big .img_content img,
    .overview section.small .img_content img{height: auto;}
    .overview section.big {width: 100%;}
    .overview section.small {width: 50%;}
    footer{
        height:35px;
        cursor: pointer;
        justify-content: left;
        padding-left: 20px;
        padding-top: 5px;
    }
    footer:before,
    footer:after,
    footer section:first-child:after{
      content: ' ';
      display: block;
      width: 50px;
      border: 2px solid black;
      position:absolute;
    }
    footer:before{
        top: 10px;
    }
    footer:after{
        top: 36px;
    }
    footer section:first-child:after{
        top: 23px;
    }
    footer section,
    footer section:first-child h4,
    footer section:first-child div,
    footer section:last-child{
        display: none;
        padding-right: 0;
    }
    footer section:first-child{
        padding: 0;
        justify-content: left;
        display: flex;
    }
    footer img.responsive{padding-top:0;}
    br.smallOnly{display:none;}
    footer.open {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding: 0;
      min-height: 100vH;
      z-index: 2;
      display: block;
      text-align: center;
    }
    footer.open section:first-child,
    footer.open section,
    footer.open section:first-child h4,
    footer.open section:first-child div{display:block;}
    footer.open section:first-child:after{border:0;}
    footer.open:before,
    footer.open:after{position: absolute;left: 20px;transform: rotate(45deg);z-index:2;border-color:#fff;}
    footer.open:after{transform: rotate(-45deg);}
    footer.open:before{top: 36px;}
    footer.open section{padding-top:20px;}
    footer.open section:last-child div {text-align: center;}
    .grid-sizer,
    .grid-item { width: 49%; }
    .gutter-sizer{ width: 1%;}
    .overview.grid{margin-left:1%;}
}

@media screen and (max-width: 520px) { /*Phone*/
  .p1 h1{font-size: 60px;}
  .logo + span {
      margin: 0 0 0 8px;
      max-width: 215px;
    }
    .logo {max-height: 30px;}
    content nav > ul > li > div > a {font-size:22px;}
    content nav > ul > li > div > ul {margin-left: 175px;}
    content nav > ul > li:hover > div > a::before {left: 170px;}
    content nav > ul > li ul li h1 {font-size: 20px;}
    footer img.responsive,
    .social_img {max-height: 25px !important;padding-top:5px;}
    .overview section.small {width: 100%;}
    .column:first-child,
    .column + .column{width: 100%;}
    .grid-sizer,
    .grid-item { width: 98%; }
    .gutter-sizer{ width: 2%;}
    .overview.grid{margin-left:2%;}
    .column:first-child article{margin-top: 80px;margin-bottom:0;}
    .row+.row > .column:first-child article{margin-top: 0;margin-bottom:0;}
}
a.gotonext{color:#000;text-decoration:none;float:right;clear:both;margin-right:20px;}
a.gotonext:hover{text-decoration:underscore;}