/* fonts */
/* basic-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Basic';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/basic-v18-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/basic-v18-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* common */
html{font-size:100%;}
body{padding:0;margin:0;overflow-x: hidden;width:100%;background:#000;font-family: 'Basic', Roboto, sans-serif;}
ul,ol,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
ul{list-style-type:none;}
figure{margin:0;}
p{line-height:1.4em;}
a, img{outline:none;}
a:link,
a:active,
a:visited,
a:focus,
a:hover{text-decoration:none;}
.clearer:after{content: "";display: table;clear: both;}
.mainWrapper{margin:0 auto;width:96%;padding:0 2%;max-width:1100px;}
.pageWrapper{background:url("../images/linien.svg")}

/* logo */

#logo img{width:60%;height:auto;max-width:700px;margin:55px 0;}

/* header */

header img{width:100%;height:auto;margin-bottom:50px;}

/* main content */

main{float:left;width:65%;margin-right:5%;}
main h1{color:#fff;font-size: 2.5rem;line-height:1.4em;}
main h2{color:#f39325;font-size: 2rem;margin:40px 0 0 0;line-height:1.4em;}
main h3{color:#f39325;font-size: 1.4rem;margin:25px 0 0 0;line-height:1.4em;}
main p{color:#fff;font-size: 1.1rem;margin:20px 0;line-height:1.4em;max-width:700px;}
.smallMarginTop{margin-top:5px;}
main a:link,
main a:active,
main a:visited,
main a:focus{color:#f39325;}
main a:hover{color:#fff;}

/* aside content */

aside{float:right;width:30%;padding-top:17px;}
aside .cta{color:#000;background:#f39325;line-height:1.4em;max-width:700px;font-size: 1.1rem;padding:20px;}
aside .cta strong {font-size: 1.4rem;display:block;margin-bottom:20px;}
aside .cta a:link,
aside .cta a:active,
aside .cta a:visited,
aside .cta a:focus {color:#000;}
aside .cta a:hover {color:#333333;}

/* gallery */

.gallery {position: relative;width: 1100px;height: 2745.7px;margin: 0;clear:both;margin-top:25px;}
.g {position: absolute;display: block;margin: 0;padding: 0;border: 0;object-fit: fill;}
.galleryTitle{margin-bottom:35px;}
.galleryTitle h2{color:#f39325;font-size: 2rem;padding:25px 0 0 0;line-height:1.4em;clear:both;}

.g01 { left:   0px; top:    0px; width: 349.48px; height: 220.57px; }
.g02 { left: 375.26px; top:    0px; width: 724.74px; height: 220.57px; }

.g03 { left:   0px; top:  246.35px; width: 349.48px; height: 495.57px; }
.g04 { left: 375.26px; top:  246.35px; width: 349.48px; height: 220.57px; }
.g06 { left: 750.52px; top:  246.35px; width: 349.48px; height: 303.65px; }

.g05 { left: 375.26px; top:  492.71px; width: 349.48px; height: 249.22px; }
.g07 { left: 750.52px; top:  575.78px; width: 349.48px; height: 330.86px; }

.g08 { left:   0px; top:  767.71px; width: 349.48px; height: 220.57px; }
.g09 { left: 375.26px; top:  767.71px; width: 349.48px; height: 220.57px; }
.g12 { left: 750.52px; top:  932.42px; width: 349.48px; height: 275px; }

.g10 { left:   0px; top:  1014.06px; width: 349.48px; height: 220.57px; }
.g11 { left: 375.26px; top:  1014.06px; width: 349.48px; height: 303.65px; }
.g15 { left: 750.52px; top:  1234.64px; width: 349.48px; height: 330.86px; }

.g13 { left:   0px; top:  1261.85px; width: 349.48px; height: 220.57px; }
.g14 { left: 375.26px; top:  1343.49px; width: 349.48px; height: 276.43px; }

.g16 { left:   0px; top: 1508.2px; width: 349.48px; height: 633.07px; }
.g17 { left: 375.26px; top: 1645.7px; width: 349.48px; height: 249.22px; }
.g19 { left: 750.52px; top: 1591.28px; width: 349.48px; height: 220.57px; }

.g20 { left: 750.52px; top: 1837.63px; width: 349.48px; height: 356.64px; }
.g18 { left: 375.26px; top: 1920.7px; width: 349.48px; height: 275px; }

.g21 { left:   0px; top: 2167.06px; width: 349.48px; height: 275px; }
.g22 { left: 375.26px; top: 2221.48px; width: 724.74px; height: 220.57px; }

.g23 { left:   0px; top: 2467.84px; width: 349.48px; height: 277.86px; }
.g24 { left: 375.26px; top: 2467.84px; width: 349.48px; height: 277.86px; }
.g25 { left: 750.52px; top: 2467.84px; width: 349.48px; height: 277.86px; }

@media (max-width: 1149px) {
  .gallery {position: relative;width: 100%;height: auto;margin: 0;column-count: 2;column-gap: 24px;}
  .g {position: static;display: block;width: 100%;height: auto;margin: 0 0 24px 0;break-inside: avoid;-webkit-column-break-inside: avoid;page-break-inside: avoid;object-fit: contain;}
}

@media (max-width: 500px) {  
  .gallery {column-count: 1;column-gap: 0;}
  .g {width: 100%;margin-bottom: 24px;}
}

/* footer */

footer{background:#333333;color:#fff;padding:25px 0 70px 0;margin-top:55px;}
.footerCol1{float:left;padding-top: 12px;}
.footerCol1 img{width:100%;height:auto;max-width:350px;margin-right:60px;}
.footerCol2{float:left;margin-right:30px;}
.footerCol3{float:left;}
.footerCol4{float:right;}
footer a:link,
footer a:focus,
footer a:active,
footer a:visited{color:#fff;}
footer a:hover{color:#f39325;}

/* queries */

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

    main{float:none;width:100%;margin-right:0;}
    aside{float:none;width:100%;}
    main p {max-width: 100%;}
    aside .cta {max-width: 100%;}
    .footerCol1{float:none;margin-bottom:20px;}
    .galleryTitle h2{padding:45px 0 0 0;}
  
}

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

    #logo img{margin:45px 0;}    
  
}

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

    #logo img{margin:35px 0;} 
    .footerCol1{width: 100%;}
    .footerCol1 img{width: 70%;}
    .footerCol2{float:none;margin:0 0 15px 0;}
    .footerCol3{float:none;margin:0 0 15px 0;}
    .footerCol4{float:none;}
  
}

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

    #logo img{margin:30px 0;}    
  
}