body { 
       
        background-color: #ffffff;
        position:fixed; 
        overflow: hidden;
        max-width: 100%;
        height:100vh !important;
    }
   
    ::-webkit-scrollbar {
        width: 12px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
        background: transparent; 
    }
     
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgba(55, 203, 208, 0.3);
        border: 1px solid #1c7578;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    a {
        color: #1c7578;
        text-decoration:none;
        }


    a:hover {
        color:#37cbd0;
        }


    a:visited {
        color:#1c7578;
        }

    a:active {
        color:#37cbd0;
        text-decoration:underline;
        }

    a[href^=tel] {
        color: inherit;
        text-decoration: none;
        }
    
    .hide-desktop {
         display:none;
        }
        
    
    
    p {
        font-family: Montserrat;
        font-size: 17px;
        
        }
   
    
    
    .heading {
        position:relative;
        top:0;
        width: 100%;
        height: 7%;
        padding-top:0;
        color: #1c7578;
        font-family: Futura;
        font-size:35px;
        font-weight:bold;
        
        }

    .headerline {
        position:absolute;
        top:90%;
        left:0;
        margin-top:2%;
        width:60%;
        
        }
    
    

    .sub-headline {
        position:relative;
        color: #1c7578;
        font-family: Futura;
        font-size: 20px;
        font-weight:bold;
        margin-top:0;
        margin-bottom:3%;
    
        }



    
    /* Reset */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        
        }
    
    
    ul{
        list-style: none;
    
        }
    
    /* Hide mobile header/menu */
    .header{
        display:none;
    
        }

    /* Hide mobile elements */
    .hide-desktop {
        display:none;
    
    }
    
    
/* DESKTOP MENU */
    

    .toppanel {
        position:absolute;
        top:0;
        left:0;
        height:10vh;
        width:100vw;
      
    }
    
    
    .sangpedagogene-mobile {
        position:absolute;
        right:5%;
        margin-top:2%;
        height:55%;
    }
    
    .logo-small {
        position:absolute; 
        top: 3vh; 
        left: 4vw; 
        z-index: 9000; 
        width: 9vw;
    }
    
    .sidepanel {
        position:absolute;
        top:10vh;
        left:0vw;
        margin:0;
        display:block;  
        overflow: hidden;
        width: 15vw;
        height: 90vh;
        padding-top:3%;
    }
    
    .bryggen-mobile {  
        position:absolute;
        top:60vh;
        left:-8%;
        width:120%;
        overflow:hidden;
    }
    
    
    ul.rtabs {
        position: absolute;
        top:20vh;
        right:0;
        padding-left: 0;
        width:100%;
        list-style: none;
    }
    
    ul.rtabs li i {
        font-size:1.4vw;
        
    }    
    
    ul.rtabs li a {
        background-color: inherit;
        color: #ffffff;
        font-family: Futura;
        display:block;
        border: none;
        outline: none;
        cursor: pointer;
        padding-right: 16%;
        padding-left: 0;
        transition: 0.3s;
        font-size: 1.8vw;
        width:100%;
        text-align:right;
        list-style: none;
        
    
    }
    
    
    ul.rtabs li a:hover {
        color:#37cbd0;
        background-color:#f2f2f2;
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
   
    }
    
    
    ul.rtabs li.selected a {
        color:#37cbd0;
        background-color:#f2f2f2;
        text-decoration:underline;
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
    
    }
    
    
    /* Hide icon in the navigation tabs by default */
    ul.rtabs li span {
        display: none;
    
    }
    
    
    ul.rtabs li a:hover > span {
        display: inline-block;
        color: #1c7578;
        
    }
    
    
    /* Show the one that's active */
    ul.rtabs li.selected a span {
        display: inline-block;
        color: #37cbd0;
        
    }
    
    /* DESKTOP - FOOTER */
    
    
    #footer {
        position:relative;
        top: 67% !important;
        height:27%;
        width:16vw;
        margin-bottom:2%;
        padding-left:2%;
        padding-top:5%;
        text-align:center;
        font-family:Montserrat;
        font-size:13px;
        color:#ffffff;
    }
    
     #footer > span {
        
        font-family:Montserrat;
        font-size:12px;
        color:#ffffff;
    }
    
    
    .copyright {
        width: 13vw;
        padding-top: 15%;
        padding-left: 2%;
        font-family: Montserrat;
        font-size: 10px;
        color:#ffffff;
    }
        
    
    

    /* DESKTOP MAIN CONTENT */
    
    
    
    
    .container {
        position: fixed;
        top: 0vh;
        display:block;
        left:0vw;
        margin-bottom:0vh;
        padding:0;
        width: 100vw;
        height: 100vh !important;
        background-color: #1c7578;
        opacity: 0.8;
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            
    }
    
    
     
    #content-wrap {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 90% !important;
        width: 85vw;
        margin-left: 0;
        margin-right: 0;
        padding: 7% 5% 2% 10%;
        border-left: 1px solid #000000;
        border-top: 1px solid #000000;
        border-top-left-radius: 80px;
        background-color:rgba(255,255,255,0.99); 
        box-shadow: inset 4px 0px 30px 0px #737373;
        overflow: hidden;
        
    
    }
    
    
    #hjem, #om_oss, #priser, #gavekort, #kontakt {
        display: none;
        
    }
     
     
    #contents {
        margin-left: 0;
        margin-top: 5%;
        padding-right: 5%;
        width: 100%;
        height: 88%;
        overflow:auto;
    
    }
     
     
    

           
     
/* DESKTOP - HJEM */
    
    
    
    
    .flex-container-top {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
        margin-top: 8%;
        margin-right: 0;
    
    }

    .flex-container-bottom {
        display: flex;
        flex-wrap: wrap;
        margin-top: 1%;
        margin-left: 0;
        margin-right: 0;
        
    }

    .flex-item-top-left {
        flex: 45%;
        top: 0;
        margin-bottom: 0;
        padding: 4% 2% 4% 5%;
        color: #202020;
        font-family: Montserrat;
        font-size: 16px;
        font-weight: bold;
        border: 1px solid #757575; 
        border-radius: 20px; 
        background-color: #fada91;
        background-color: rgba(55, 203, 208, 0.1);
        /* background-color: rgba(198, 168, 140, 0.4); */
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
    }

    .flex-item-top-right {
        padding-top: 3%;
        padding-left: 5%;
        padding-right: 2%;
        flex: 55%;

    }

    .flex-item-bottom-left {
        margin-top:3%;
        padding: 1.5%;
        flex: 45%;

    }

    .flex-item-bottom-right {
        padding-left: 5%;
        padding-bottom: 7%;
        flex: 55%;

    }
    
    .map-preview {
        width: 80% !important;
        margin-top: 0;
        margin-left: 1%;
        margin-right: 0;
        border-radius: 20px;
        border: 1px solid #757575;
        opacity:1;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        
    }
    
    
    
    
/* DESKTOP - OM OSS */


    
    .portrait {
        width: 16%;
        float: left;
        margin-right:20px;
        margin-bottom:3px;
        border-radius: 10%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
    }
        
    
    /* Les mer / Les mindre */
    
    .myBtn {
        margin-top: 2%;
        margin-bottom: 0;
        background-color: #fff;
        color: #1c7578;
        float: left;
        outline: none;
        cursor: pointer;
        padding: 1%;
        transition: 0.3s;
        font-size: 15px;
        font-weight: bold;
        border: 1px solid #1c7578;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    
    .myBtn:hover {
        color:#37cbd0;
    }
    
    #cammore {display: none;}
    #orjanmore {display: none;}
    
    
    /* PRICING */
        
    .price-mobile {
        display:none;
        
    }
    
    
    
    
    ul.tabs {
        width:80%;
        height: 10%;
        position: absolute;
        top: 24%;
        
    }
    
    
    .pricetabs {
        border-radius: 20%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width:26%;
        margin-top:5%;
      
        
    }
    
    .tabcontents {
        
        margin-top: 10%;
        padding-bottom: 0;
        width:70%;
        
    }
    
    .enkel {
        width:55%;
        height:auto;
        position:absolute;
        left:0;
        text-align:justify;
        
    }
    
    .standard {
        width:70%;
        height:auto;
        position:absolute;
        left:26%;
        text-align:justify;
        
    }
    
     .standard > p {
        padding: 4% 0 2% 0;
        
    }
    
    .premium {
        width:55%;
        height:auto;
        position:absolute;
        right:-20%;
        margin-right:2.5%;
        text-align:justify;
        
    }
    
     .premium > p {
        padding: 4% 0 2% 0;
        
    }
    
    .priceline-top {
        width:100%;
        position:absolute;
        left:0;
        margin-top:5%;
        margin-bottom: 2%;
        
    }
    
    .priceline-bottom {
        width:100%;
        position:absolute;
        left:0;
        
    }
    
    
    .packages {
        padding: 3% 0 2% 0;
        
    }
    
    
    .policy {
        position:absolute;
        top:80%;
        font-size:12px;
    }
    
    .policy-mobile {
        display: none;
    }
    

/* DESKTOP - GAVEKORT */
    
    
    
    .bestill-gavekort {
        margin-top: 5%;
    }
    
    .gavekort {
        width: 26vw;
        float: left;
        margin-right: 4%;
        margin-bottom:2%;
        border-radius: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    


/* DESKTOP - KONTAKT */
    
    
    * {box-sizing: border-box;}


    #kontakt {
        background: none;
    }
    
    .form-frame {
        padding-right: 0;
        padding-top:0;
        height: 68%;
        width: 70%;
        position: absolute;
        top: 30%;
        left: 12%;
    }

    input[type=text] {
        width: 100%;
        padding:12px;
        height: 4vh;
        outline: none;
        border-bottom: 2px solid #C0C0D1;
        border-top: none;
        border-left: none;
        border-right: none;
        margin-top: 0;
        margin-bottom: 20px;
        background: none;
        resize: vertical;
        font-size: 18px;
        font-family: Montserrat;
    }
    
    input[type=tel] {
        width: 100%;
        padding:12px;
        height: 4vh;
        outline: none;
        border-bottom: 2px solid #C0C0D1;
        border-top: none;
        border-left: none;
        border-right: none;
        margin-top: 0;
        margin-bottom: 20px;
        background: none;
        resize: vertical;
        font-size: 18px;
        font-family: Montserrat;
    }
    
    input[type=email] {
        width: 100%;
        padding:12px;
        height: 4vh;
        outline: none;
        border-bottom: 2px solid #C0C0D1;
        border-top: none;
        border-left: none;
        border-right: none;
        margin-top: 0;
        margin-bottom: 20px;
        background: none;
        resize: vertical;
        font-size: 18px;
        font-family: Montserrat;
    }
    
    #field1 {
        width:46%;
    }
    
    #field2{
        width:46%;
        float:right;
    }
    
    #field7 {
        width:46%;
    }
    
    input[type=text]:hover,  input[type=tel]:hover,  input[type=email]:hover, textarea:hover {
        border-bottom: 2px solid #37cbd0;
        border-top: none;
        border-image-source: url(/images/header-gradient.png);
        border-image-slice: 0 30 60 30;
        color: #37cbd0;
    }
    
    
    /*the container must be positioned relative:*/
    .custom-select {
        position: relative;
        height: 4vh;
        padding:0;
        font-family: Montserrat, FontAwesome;
        font-size:18px;
        width:46%;
        float:right;
        cursor: pointer;
    }
    
    
    .custom-select select {
        display: none; /*hide original SELECT element:*/
    }
    
    
    .select-selected {
        background: none;
        border-top: none;
    }
    
    
    .custom-select:hover, .select-selected:hover {
        color: #37cbd0;
        border-top: none;
    }
    
    
    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        top: 15px;
        width: 0;
        height: 0;
        color: #37cbd0;
        border: 9px solid transparent;
        border-color: #1c7578 transparent transparent transparent;
    }
    
    
    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #37cbd0 transparent;
        top: 8px;
        color: #37cbd0;
    }
    
    
    /*style the items (options), including the selected item:*/
    .select-items div, .select-selected {
        width: 100%;
        color: #1c7578;
        padding: 3%;
        user-select: none;
    }
    
    
    /*style items (options):*/
    .select-items {
        position: absolute;
        width:100%;
        font-family: Montserrat, FontAwesome;
        font-size: 16px;
        border:1px solid #1c7578;
        border-radius: 15px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        color: #37cbd0;
        top: 100%;
        left: 0;
        right: 0;
        padding-left:15%;
        padding-bottom:2%;
        z-index: 99;
    }
    
    
    /*hide the items when the select box is closed:*/
    .select-hide {
        display: none;
    }
    
    
    .select-items div:hover, .same-as-selected {
        color: #37cbd0;
        border-top: none;
    }
    
    
    textarea {
        width: 100%;
        top: 55%;
        height: 4vh;
        min-height: 4vh;
        max-height:17vh;
        outline: none;
        border-bottom: 2px solid #C0C0D1;
        border-top: none;
        border-left: none;
        border-right: none;
        margin-top: 0;
        padding-bottom: 20px;
        padding-left: 12px;
        background: none;
        resize: vertical;
        font-size: 18px;
        font-family: Montserrat;
        position: absolute; 
        overflow: auto;
    }
    
    
    input:focus, textarea:focus, .select-selected:focus {
        border-bottom: 3px solid;
        border-top: none;
        border-image-source: url(/images/header-gradient.png);
        border-image-slice: 0 30 60 30;
        font-family: Montserrat;
        font-size:18px;
    }
    
    ::-ms-input-placeholder { /* Edge 12-18 */
        color: #757575;
    }

    
    ::placeholder {
        color: #757575;
    }
    
    
    input[type=submit] {
        position:absolute;
        bottom:6%;
        right:0;
        background-color: #1c7578;
        color: white;
        padding: 8px 16px;
        font-family: futura;
        font-size: 1.3vw;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        float:right;
        margin-top:1%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    input[type=submit]:hover {
        background-color: #37cbd0;
    }

    /* AUTO RESIZE text area */


    .autoresizing {
        display: block;
        overflow: hidden;
        resize: none;
    }