@charset "UTF-8";


:root {
	--body-color: #ffffff;
	--theme-color: #2C3E50;
	--theme-color2: #F39442;
	--bs-yellow: #F39442;
	--theme-color3: #538252;
	--theme-color4: #2B70A8;
	--logo-color: #2C3E50;
	
	--link-color: #000000;
	--link-color-hover: #f39442;
	--link-color-active: rgba(243,148,66,0.5);

	--link-underline: #000000;
	--link-underline-hover: #f39442;
	--link-underline-active: #ffffff; 

	--menu-line-color: #2B70A8;
	--menu-line-color-hover: #2B70A8;

    --title-color: #005475;
    
	--outline-color: red;

	--button-hover: #fabf8c;

	/* bootstrap */

    --mast-height: 100px;
    --bs-nav-link-color: rgba(130, 207, 219, 1);
}

.home .banner-title-container .container-xl{
    display: flex;
    justify-content: center;
}

@media (max-width: 767px) {
    .dropdown-menu {
      display: none !important;
    }
  }

  
#masthead{
    /* background: linear-gradient(to right, rgb(46, 82, 161), rgb(12, 23, 91)); */
    background: linear-gradient(to right, rgb(57,64,77), rgb(29,35,52));
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
    z-index: 5;
    position: sticky;
    top:0;
}

#masthead nav{
    height: var(--mast-height);
}

#masthead .navbar-nav li.nav-item a.nav-link{
    color: rgba(255,255,255,0.8);
    font-size: 20px;
    font-weight: 500;
    text-transform:  uppercase;

}

#masthead .navbar-nav li.nav-item{
    border-bottom: 2px solid transparent;
}

#masthead .navbar-nav li.nav-item:hover,
#masthead .navbar-nav li.nav-item.current-menu-item,
#masthead .navbar-nav li.current-menu-parent{
    border-bottom: 2px solid white;
}

#masthead .navbar-nav .dropdown-menu li.nav-item.current-menu-item{
    color: white;
    background-color: rgba(0, 213, 255, 0.5);
}

@media all and (max-width: 767px){
    #main-logo{
        max-width: 160px;
    }
}


@media all and (max-width: 1199.98px){

    .navbar-toggler-icon{
        width: 90px;
        height: 37px;
        background-image: none;
    }

    #navbar-icons-collapsed{
        background-image: url(/wp-content/themes/kvam/img/menuicon.svg?v=2);
        background-repeat: no-repeat;
        background-size: 80% auto;
        background-position: center center;
    }

    #navbar-icons-collapsed, #navbar-icons{
        width: 100%;
        height: 50%;
        display: block;
    }

    .navbar-toggler{
        border: 0;
    }

    .navbar-toggler:active, 
    .navbar-toggler:focus-visible, 
    .navbar-toggler:focus{
       outline: -webkit-focus-ring-color auto 1px;
       box-shadow: none;
    }

    .navbar-toggler-icon{
        position: relative;
        overflow: hidden;
    }

    #navbar-toggler-icons-wrap{
        display:block;
        width: 100%;
        height: 74px;
    }

    .navbar-toggler.collapsed #navbar-toggler-icons-wrap{
        position: absolute;
        display: block;
        top: 0%;

    }

    .navbar-toggler #navbar-toggler-icons-wrap{
        position: absolute;
        display: block;
        top: -94%;

    }

    .forside-tekst{
        margin-top: 0;
    }


}

.dropdown-menu{
    border-radius: 0;
}

@media all and (min-width: 1200px){
    #masthead .navbar-nav > .menu-item:hover > .dropdown-menu {
        display: block;
    }

    #menu-toppmeny > .menu-item{
        margin-left: 60px;
    }

	.navbar-expand-xl .navbar-nav .nav-link {
		padding-right: 0;
		padding-left: 0;
	}
    
    .front-page-title{
        font-size: 5vw;
    }

    .forside-tekst{
        margin-top: -250px;
        z-index: 5;
        max-width: 1500px;  
    }
}

.karusell-text{
    color: rgba(12, 23, 91, 1);
}

.front-page-title{
    font-size: clamp(23px, 86vw, 66px)
}



.karusell-wrapper{
    margin: auto auto auto auto;
    max-width: 1920px;
}   

.karusell-heading-container{
    height: 100%;
    width: 47.1%;
    height: 70%;
    background: linear-gradient(to right, rgba(130, 207, 219, 0.8), rgba(0, 148, 179, 1));
    background: linear-gradient(to right, rgba(242, 114, 17, 0.8), rgba(224, 64, 2, 1));
}

.karusell-text-wrapper{
    background: linear-gradient(to right, rgba(130, 207, 219, 0.8), rgba(0, 148, 179, 1));
}

.karusell-tekst p:last-of-type, 
.karusell-subheading :last-child {
    margin-bottom: 0;
}

.carousel-indicators [data-bs-target]{
    height: 10px;
    top: 0;
}

.carousel h2{
	font-weight: 600;
}

.carousel .karusell-subheading h3{
	font-weight: 600;
	font-size: 20px;
}

.karusell-subheading, .karusell-tekst{
	color: rgba(12,23,91,1);
}

.carousel, 
.carousel-inner, 
.carousel-item, 
.carousel-item-inner{
    height: 100%;
}

.carousel-image{
}

.carousel-indicators{
    bottom: unset;
}


@media all and (min-width: 1200px){

    .karusell-wrapper{
        height: 700px;

    }

    .carousel-image{
        max-width: 1920px;
        min-height: 700px;
        position: absolute;
        margin: auto;
        object-fit: cover;
        object-position: center center;
    }

}


@media all and (max-width: 1199.98px){

    #masthead{
       /* position: fixed; */
        width: 100%;
    }

    #masthead .nav-item{
        text-align: center;
    }

    #masthead .navbar-nav li.nav-item a.nav-link {
        font-size:8vw;
        width: 100%;
    }

    #navbar-collapse-main{
        justify-content: center;
    }
    #navbar-collapse-main.show{
        display: flex;
    }

    #menu-toppmeny{
        margin-top: calc(-1 * var(--mast-height) );
    }

    .menu-icon-text{
        color: white;
    }

    .dropdown-menu.show{
        animation-name: dropdownMenu;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .dropdown-toggle::after{
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: unset;
        border-right: unset;
        border-bottom: unset;
        border-left: unset; 
        background-image: url( ../img/arrow-forward-outline.svg );
        background-size: contain;
        background-repeat: no-repeat;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 27px;
    }

    @keyframes dropdownMenu{
        0%{
            opacity: 0;
            transform: translateY(-10px);
        }
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }


    .karusell-wrapper{
        height: 350px;

    }

    .carousel-image{
        min-height: 350px;
    }

}


@media all and (min-width: 768px) and (max-width: 1199px){

    #navbar-collapse-main{
        position: absolute;
        top: var(--mast-height);
        left: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(to right, rgba(242, 114, 17, 0.9), rgba(224, 64, 2, 1));
        z-index: 4;
        margin: auto;
    }

    #masthead .navbar-nav .dropdown-menu{
        box-shadow: none;
        border: 0;
        border-radius: 0;
        position: absolute;
        right: 0;
        top: 0;
        height: 100vh;
        width: 50%;
        padding: 2%;
        z-index: 4;
        background-color: #b8c4b8;
    }

    #masthead .nav-link{
        width: 50%;
        padding: 2%;
    }

    #masthead .nav-item>.nav-link{
        font-size: 40px;
        font-weight: 500;
    }
    
    #masthead .navbar-nav a{
        font-size: 24px;
    }
}




@media all and (max-width: 767px){

    #navbar-collapse-main{
        position: absolute;
        top: var(--mast-height);
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(to right, rgba(242, 114, 17, 0.9), rgba(224, 64, 2, 1));
        z-index: 4;
        margin: auto;
    }

    #masthead .navbar-nav .dropdown-menu{
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 2%;
        z-index: 4;
        background-color: #b8c4b8;
    }

    #masthead .nav-link{

        padding: 2%;
    }

    #masthead .nav-item>.nav-link{
        font-size: 40px;
        font-weight: 500;
        color: #b2a59c;
    }
    
    #masthead .navbar-nav a{
        font-size: 24px;
    }

    .front-page-title{
        font-size: 7vw;
    }

    .karusell-wrapper{
        height: 350px;

    }

    .carousel-image{
        min-height: 350px;
    }

}

.archive-title, .page-title{
    font-size: 100px;
    font-weight: 200;
    text-align: left;
    text-transform: uppercase;
    color: white;
}

.archive-title-wrap {
    position: relative;
    margin-top: 100px;
}

/* testing */
#masthead .navbar-nav li.nav-item a.nav-link{
    /* text-transform:  lowercase; */
    padding: 0;
}

.archive-title, .page-title, .section-title{
    text-transform:  lowercase;
    color:white;
    padding: 0;
    text-align: right;
}

.section-title{
    text-transform:  capitalize;
    color:white;
    padding: 0;
    text-align: right;
}

@media all and (max-width: 1199.98px){
    .archive-title, .page-title, .section-title{
        font-size: 9vw;
    }
}


@media all and (min-width: 1500px){

    .karusell-text-wrapper{
        height: 30%;
    }

    .carousel, 
    .carousel-inner, 
    .carousel-item, 
    .carousel-item-inner{

    }

    .carousel-image{

    }

    .front-page-title{
        font-size: 99px;
    }
}


@media all and (min-width: 1300px) and (max-width: 1499.98px){

    .karusell-text-wrapper{
        height: 30%;
    }

    .carousel, 
    .carousel-inner, 
    .carousel-item, 
    .carousel-item-inner{

    }

    .carousel-image{
     
    }

    .front-page-title{
        font-size: 5.3vw;
    }
}



@media all and (min-width: 992px) and (max-width: 1299.98px){
    .karusell-text-wrapper{
        height: 30%;
    }

    .carousel, 
    .carousel-inner, 
    .carousel-item, 
    .carousel-item-inner{

    }

    .karusell-heading-container{
        clip-path: polygon(59.9% 0, 100% 70.1%, 83.6% 100%, 0 100%, 0 0);
    }
}

@media all and (max-width: 991.98px){
    .karusell-text-wrapper{
        height: auto;
    }

    .carousel, 
    .carousel-inner, 
    .carousel-item, 
    .carousel-item-inner{

    }

    .carousel-image{

    }

    .karusell-heading-container{
        height: 54.5%;
        clip-path: polygon(71% 0, 100% 18%, 100% 100%, 0 100%, 0 42%);

        transform: rotate(180deg);
        width: 100%;
        height: 200px;
    }

    .karusell-heading{
        transform: rotate(180deg);
        width: 100%;
        padding: 5%;
    }

}