/*----
GENERAL
----*/
html {
    scroll-behavior: smooth;
}

body {
    background-color: #f4f4f4;
    font-family: 'Heebo', sans-serif;
    color: #1d1d1b;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

a:link {
    text-decoration: none;
    color: #1d1d1b;
}

a:visited {
    color: inherit;
    text-decoration: none;
}

a:active {
    color: darkred;
}

/*--
START MOBILE ---- navigation
--*/

/*--
HAMBURGER MENU
--*/


.navigation {
    position: fixed;
    width: 100%;
    z-index: 3;
}
.navigation li {
    padding: 0px;  
}
.navigation li a {
    display: block;
    padding: 10px 0px;
}
.navigation .menu-wrap .menu {
    display: flex;
    flex-direction: column-reverse;
}
.navigation .menu-wrap .menu ul {
    display: block;
}
.navigation .menu-wrap .menu .dropdown-hover {
    visibility: hidden;
    font-size: 0px;
    padding: 0px;
}
.navigation .menu-wrap .menu .dropdown-hover ul {
    visibility: visible;
    font-size: 30px;
    padding: 0 0 30px 0;
}

/*menu hide (will display when clicked)*/

.navigation .menu-wrap {
    display: none;
}

/*--
menu icon
--*/
.navigation .menu-icon {
    float: right;
    padding: 55px 23px 25px 25px;
    user-select: none;
    cursor: pointer;
}
.navigation .menu-icon .nav-icon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 24px;
    z-index: 4;
    cursor: pointer;    
}
.navigation .menu-icon .nav-icon:before,
.navigation .menu-icon .nav-icon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.navigation .menu-icon .nav-icon:before {
    top: 8px;
}
.navigation .menu-icon .nav-icon:after {
    top: -8px;
}

/*--
hide checkbox
--*/
.navigation .menu-btn {
    display: none;
}

/*--
when meny clicked - reveal fullscreen menu
--*/
.navigation .menu-btn:checked ~ .menu-wrap {
    font-weight: 300    ;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #f4f4f4;
    text-align: center;
}

/*--
animation hamb menu to cross when checked
--*/
.navigation .menu-btn:checked ~ .menu-icon .nav-icon {
    background: transparent;
}
.navigation .menu-btn:checked ~ .menu-icon .nav-icon:before {
    transform: rotate(-225deg);
    top: 0;
    height: 3px;
}
.navigation .menu-btn:checked ~ .menu-icon .nav-icon:after {
    transform: rotate(225deg);
    top: 0;
    height: 3px;
}
/*--end of hamburger menu--*/

/*--
logo layouts
--*/
.navigation .logo-l-subpages {
    display: none;
}

.logo h1 {
    font-size: 50px;
    padding: 0px;
    margin: 0px;
    font-weight: 500;
}
.logo {
    position: relative;
    margin: auto;
    text-align: center;
    padding: 150px 0px 70px 0px;
}
.logo span {
    font-weight: 300;
    color: #919191;
}

/*--
logo subpages
--*/

.logo-sm {
    z-index: 4;
    float: left;
    padding: 43px 23px 25px 11%;
    font-size: 25px;
    user-select: none;
    cursor: pointer;
    font-weight: 500
}

/*--
maincontent start
--*/

/*text*/
.introtext {
    z-index: 1;
    background-color: #f4f4f4;
    position: relative;
    margin: auto;
    padding: 4% 6%;
    font-size: 22px;
    font-weight: 400;
}
.introtextsmall {
    font-size: 14px;
    text-align: right;
    padding: 59px 0px 20px 20%;
    font-weight: 300;
}

.maincontent .introtext #hidebreak {
    display: none;
}
/*.maincontent .introtextsmall span{
    display: none;
}*/
.maincontent .subpages-text-contact{
    padding: 170px 6% 6% 6%;
    font-size: 16px;
}
.maincontent .subpages-text,
.maincontent .subpages-infopage-text {
    font-size: 16px;
    padding: 55px 6% 6% 6%;
}
.maincontent .subpages-text-contact ul:nth-child(6) {
    padding: 0px 0px 0px 6%;
    margin: 0px;
}
.maincontent .subpages-text .general-header,
.maincontent .subpages-infopage-text .general-header {
    font-size: 18px;
    font-weight: 800;
}

.maincontent .general-header2 {
    font-size: 18px;
    font-weight: 800;
    padding: 0 0 15px 6%;
}
.maincontent .subpages-text span,
.maincontent .subpages-text-contact span {
    font-size: 27px;
    font-weight: 800;
}

/*main images sub info page*/
.maincontent .infopage-infowrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1400px;;
    padding: 100px 0px 80px 0;
}
.maincontent .infopage-mainimg {
    display: flex;    
    padding: 0 0 45px 0;
}
.maincontent .infopage-mainimg img {
    max-width: 325px;
    height: auto; 
}

.maincontent .infopage-infowrap .subpages-infopage-text {
    display: flex;
    flex-direction: column;
}

/*.maincontent .infopage-mainimg img {
    width: 100%;
    max-width: 350px;
    height: auto; 
}
.infopage-mainimg {
    text-align: center;
    padding: 100px 15% 5% 15%;
}*/
/*rest images sub info pages*/
.maincontent .infopage-artwrap,
.maincontent .infopage-artwrap-process {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*max-width: 1900px;*/
    padding: 0 0px 35px 0;
}
.maincontent .infopage-artwrap .sub-infopage-art-item img,
.maincontent .infopage-artwrap-process .sub-infopage-art-item img{
   /* width: 768px;*/
    max-width: 100%;
    height: auto; 
}
#imgpadding {
    padding-top: 50px;
}

/*portrait image contact page*/
.maincontent .portrait img {
    width: 100%;
    height: auto;
}
.portrait{
    padding: 170px 18% 0% 18%;
}

/*hr*/
hr {
    float: left;
    padding: 0px;
    margin: 0px;
    width: 50px;
    border-top: 2.5px dashed #1d1d1b; 
}

/*--
Arrow
--*/
.arrowimg {
    position: relative;
    clear: both;
    text-align: center;
    margin: auto;
    padding: 0px 0px 8% 0px;
}
.arrowimg img {
    max-height: 15px;
    padding: 5px;
}
    /*hidenopsubpages*/
.arrowimg-subpages{
    display: none;
}
/*--
Art in maincontent wrapper
--*/
.maincontent {
    position: relative;
    padding: 0px 6%;
}
.art-item img {
    width: 100%;
    height: auto;
}
/*arttext*/

.maincontent .art-wrap .art-info {
    width: 100%;
    padding: 4% 0px 0px 6%;
    margin: 0px; 
}
.maincontent .art-wrap .art-info ul li:nth-child(6) {
    font-style: italic;
    font-size: 13px;
}
h2 {
    font-weight: 800;
    font-size: 14px;
    margin: 0px;
}
.maincontent .art-wrap .art-info ul {
    padding: 14px 0px 70px 0px;
    font-size: 13px;
    font-weight: 400;
}
.art-info-subpages h2 {
    font-size: 12px;
    font-weight: 800;
    padding-bottom: 13px;
}
.art-info-subpages {
    font-size: 12px;
    padding: 150px 18% 0% 11%;   
}

.maincontent .photos .cssbox_thumb {
    width: 100%;
    height: auto;
    padding: 0 0 2px 0;
}

.maincontent .photos {
    column-count: 4;
    column-gap: 2px;
    line-height: 0px; 
}

.maincontent .photos { 
column-count: 3;
    padding-top:130px;
  }

/*
span.cssbox_full,
.cssbox_prev, 
.cssbox_next,
.cssbox_close { 
    display: none;
}


*/




div.cssbox {
  display: inline-block;
}
    
span.cssbox_full {
  z-index: 998;
  position: fixed;
    display: block;  
    height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.85);
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  cursor: default;
  transition: opacity 0.1s linear;
}

.maincontent .photos .cssbox .cssbox_full p {
        display: block;
        z-index: 999;
        text-align: center;
        color: white;
        font-size: 20px;
        padding-top: 15px;
        font-weight: 700;
}
    
span.cssbox_full img {
  position: fixed;
  background-color: white;
  margin: 0px;
  max-height: 75%;
  max-width: 75%;
  top: 50%;
  left: 50%;
  /*margin-right: -50%;*/
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px black;
  z-index: 999;
    padding: 10px;
}

a.cssbox_prev,
a.cssbox_next
    {
    display: block;
  z-index: 999;
  position: fixed;
  text-decoration: none;
  visibility: hidden;
  color: rgba(255,255,255,0.4);
  font-size: 35px;
    padding: 75px 25px;
}

a.cssbox_link {
    display: block;
  z-index: 999;
  position: fixed;
  text-decoration: none;
  visibility: hidden;
  color: white;
  font-size: 15px;
    padding: 75px 25px;
    text-align: center;
    margin: 0% 20%;
    bottom: -35px;
    left: 0;
    right: 0;
}

a.cssbox_close {
    display: block;
    z-index: 998;
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    color: transparent;
    top: 0;
    left: 0;
}



a.cssbox_prev,
a.cssbox_next {
    bottom: -109px;
  transform: translate(0%, -50%);
}

a.cssbox_prev {
  left: 10%;
}

a.cssbox_next {
  right: 10%;
}

a:target ~ a.cssbox_close,
a:target ~ a.cssbox_prev,
a:target ~ a.cssbox_next,
a:target ~ a.cssbox_link {
  visibility: visible;
}

a:target > img.cssbox_thumb + span.cssbox_full {
  visibility: visible;
  opacity: 1;
  pointer-events: initial;
}

@media screen and (max-width: 750px) {
    .maincontent .photos { 
    column-count: 2;
    padding-top:130px;
  }
}
@media screen and (min-width:1200px) {
    
    .maincontent .photos {
    column-count: 4;
    column-gap: 15px;
    line-height: 0px;
    padding-top:0px;
    }
    
    .maincontent .photos .cssbox_thumb {
    width: 100%;
    height: auto;
    padding: 0 0 15px 0;
    }
    /*--
    hide hamb menu
    --*/
    .menu-btn, .menu-icon, nav-icon {
        display: none;
    }

    /*--
    menu style and placement
    --*/
    .navigation .menu-wrap .menu {
        display: flex;
        flex-direction: column;
    }
    .navigation .menu-wrap {
        display: block;
        font-weight: 300;
        font-size: 16px;
        position: fixed;
        bottom: 65px;
        left: 6%;
/*        padding: 150px 0px 0px 5%;*/
/*        margin-left: 5%;*/
        z-index: 5;
        text-align: left;
    }
    .navigation .menu-wrap .menu .logo {
        display: none;
    }
    .navigation li {
        padding: 8px 0px;    
    }
    .navigation li a {
        display: block;
        padding: 15px 0px;
    }
    .navigation .menu-wrap .menu .dropdown-hover {
        visibility: visible;
        font-size: 16px;
        padding: 8px 0px 0 0;
    }
    .navigation .menu-wrap .menu .dropdown-hover ul {
        visibility: visible;
        font-size: 16px;
        background-color: #f4f4f4;
        height: 110px;
        padding-top: 30px;
    }
    /*--
    Dropwdown menu
    --*/
        .navigation .menu-wrap .menu li {
        position: relative;
    }

    .navigation .menu-wrap .menu ul {
        display: none;
        position: absolute;
        left: 0px;
        top: -120px;
        
    }

    .navigation .menu-wrap .menu .dropdown-hover:hover ul {
        display: block;
    }

    .navigation .menu-wrap .menu ul li a {
        padding: 4px 0px;
    }
    .navigation .menu-wrap .menu ul li {
        padding: 0px;
        width: 115px;
    }
    /*--
    Logo layout
    --*/
    .navigation .logo-sm {
        display: none;
    }
    .navigation .logo-l-subpages {
        display: block;
        margin: 0px;
    }
    .logo h1,
    .logo-l-subpages h1 {
        font-weight: 500;
        font-size: 28px;
        padding: 0px;
        margin: 0px;
    }
    .logo,
    .logo-l-subpages{
        background-color: #f4f4f4;
        position: fixed;
        left: 20%;
        padding: 50px 72% 15px 0px;
        z-index: 3;
        cursor: pointer;
    }
    .logo span,
    .logo-l-subpages span {
        font-weight: 300;
        color: #919191;
    }
    
    /*--
    main-content
    --*/
    .maincontent {
    position: relative;
    padding: 128px 0% 0px 20%;
    }
    
    /*--
    text
    --*/
    .introtext {
        position: relative;
        float: left;
        padding: 5% 0px 0px 0px;
        font-size: 49px;
        margin: 0;
    }
    
.maincontent .introtext #hidebreak2 {
        display: none;
    }
    .maincontent .introtext #hidebreak {
        display: block;
    }
  
    .maincontent .introtext .opsommingintrotext {
        position: relative;
        top: 30px;
        left: 50px;
    }
    
    .maincontent .introtext .opsommingintrotext1 {
        position: relative;
        top: 110px;
        left: -306px;
    }
    
    .maincontent .introtext .opsommingintrotext2 {
        position: relative;
        top: 190px;
        left: -549px;
    }
  
    
    
    .maincontent .introtext .spacing {
        position: relative;
        top:105px;       
    }
    /*
    .maincontent .introtext .opsommingintrotext {
        position: relative;
        top: 155px;
        left: 0px;
    }
    
    .maincontent .introtext .opsommingintrotext1 {
        position: relative;
        top: 210px;
        left: -345px;
    }
    
    .maincontent .introtext .opsommingintrotext2 {
        position: relative;
        top: 265px;
        left: -578px;
    }
    */
 /*       .maincontent .introtext .opsommingintrotext {
        position: relative;
        top: 25px;
        left: 00px;
    }*/
    
    .maincontent .introtext .opsommingintrotext1 {
        position: relative;
        top: 175px;
        left: -342px;
    }
    
    .maincontent .introtext .opsommingintrotext2 {
        position: relative;
        top: 171px;
        left: 183px;
    }
    .introtextsmall {
        text-align: left;
        font-size: 13px;
        padding: 44% 0px 0px 0px;
        margin: 0;
    }
/*    .maincontent .introtextsmall span{
    display: block;
    }*/
    .maincontent .subpages-text-contact{
    font-size: 15px;
    padding: 43px 70% 0% 0%;
    }
    .maincontent .subpages-text {
    font-size: 15px;
    padding: 47px 56% 0% 0%;
    }
    .maincontent .subpages-text-contact ul:nth-child(6) {
    padding: 0px 0px 0px 6%;
    margin: 0px;
    }
    .maincontent .subpages-text span,
    .maincontent .subpages-text-contact span{
    font-size: 19px;
    font-weight: bold;
    }
    
    .maincontent .general-header2 {
    font-size: 18px;
    font-weight: 800;
    padding: 0 0 5px 0%;
}
    /*portrait image contact page*/
    .maincontent .portrait img {
    width: 250px;  
    }
    .portrait{
    padding: 37px 0% 0% 0%;
    }
     
    /*hr*/
    hr {
    float: left;
    padding: 0px;
    margin: 0px;
    width: 50px;
    border-top: 2px dashed #1d1d1b; 
    } 
    
    /*--
	Arrow
	--*/
    .arrowimg {
        background-color: #f4f4f4;
        position: relative;
        float: right;
        margin: 0px;
        padding: 0px 0% 8%  0%;
        z-index: 2;
    }
    .arrowimg img,
    .arrowimg-subpages img {
        max-height: 22px;
        padding: 10px 25px 25px 0px;
    }
    .arrowimg-subpages{
        display: block;
        clear: both;
        padding-bottom: 65px;
    }
    
    /*--
	Art
	--*/
    .maincontent .art-wrap {
        display: flex;
        position: relative;
        clear: both;
        width: 90%;
        padding: 0px 0 20% 0px;
    }
    .maincontent art-wrap art-image img {
        width: 90%;
        height: auto;
    }
    .art-item {
        display: flex;
        min-width: 500px;
        max-width: 700px;
        height: auto;
    }
    .maincontent .infopage-artwrap {
        display: flex;
        flex-wrap: nowrap;
        max-width: 1400px;
        padding: 0 0px 50px 0;
    }
    
    .maincontent .infopage-artwrap-process {
        display: flex;
        flex-wrap: nowrap;
        max-width: 1400px;
        padding: 0 0px 50px 0;
    }
    

    .maincontent .infopage-artwrap .sub-infopage-art-item img{
        max-width: 100%;
        height: auto;
    }
    .maincontent .infopage-artwrap-process .sub-infopage-art-item img
    {
        max-width: 75%;
        height: auto; 
    }
    #imgpadding {
        padding-left: 50px;
        padding-right: 3%;
        padding-top: 0px;
    }
    /*ARTSUBPAGES*/
    /*main images sub info page*/
    
    .maincontent .infopage-infowrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        max-width: 1400px;
        padding: 195px 0px 140px 0;
    }
    .maincontent .infopage-infowrap .infopage-mainimg {
        display: flex;
        padding: 0px 85px 0px 80px;
    }
    .maincontent .infopage-mainimg img {
        max-width: 325px;
        height: auto;
    }
    .maincontent .subpages-infopage-text {
        display: flex;
        flex-direction: column;
        max-width: 350px;
        min-width: 305px;
        font-size: 13px;
        padding: 0 235px 0 0;
    }
    
    /*--
    moving images down to clear the logo on top for autoscroll
    --*/
/*
    #artmain {
        padding-top: 20%;
    }
*/
    /*--
    hover images opacity
    --*/
/*    .art-item img {
        opacity: 0.4
    }
    .art-item img:hover {
        opacity: 1;
    }*/
    /*--
    artinfo style
    --*/
    .maincontent .art-wrap .art-info {
        position: sticky;
        /*display: flex;*/
        align-self: flex-start;
        /*left: 58%;*/
        /*bottom: 39%;*/
        top: 102px;
        padding: 0 0 0 15%;
 /*       top: 42%;*/
        margin: 0;
        width: 300px;
    }
    .maincontent .art-wrap .art-info h2 {
        padding: 0% 0px 0px 6%;
        font-weight: bold;
        font-size: 16px;
    }
    .maincontent .art-wrap .art-info ul {
        padding: 20px 0px 0px 6%;
        font-size: 15px;
    }
    .art-info-subpages h2 {
    font-size: 12px;
    font-weight: 800;
    padding-bottom: 11px;
    }
    .art-info-subpages {
    display: none;
    position: fixed;
    font-size: 12px;
    bottom: 567px;
    left: 6%;
    padding: 0px 87% 0px 0px;
    }

    /*--
    art info hover effect
    --*/
/*    .art-info {
        display: none;
    }
    .art-item:hover + .art-info {
        display: block;
    }*/

    /*css lightbox*/
    
    .maincontent .photos {
        margin-right: 55px;
    } 
    
    
    span.cssbox_full img {
    padding: 25px;
}

a.cssbox_prev,
a.cssbox_next {
    
bottom:500px;
    top: 50%;
  transform: translate(0%, -50%);
}

a.cssbox_prev,
a.cssbox_next
    {
    display: block;
  z-index: 999;
  position: fixed;
  text-decoration: none;
  visibility: hidden;
  color: rgba(255,255,255,0.4);
  font-size: 80px;
    padding: 75px 25px;
}
    
a.cssbox_prev {
  left: 3%;
}

a.cssbox_next {
  right: 3%;
}