/* --- TABLETS (PORTRAIT) --- */


    
                body {
                    position:fixed;
                    background-color: #ffffff;
                    overflow-x: hidden;
                    min-width: 100%;
                    max-height: 100dvh;
                }
                
                ::-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 mobile header/menu */
                .header{
                    display:none;
                
                    }
                /* Hide mobile elements */
                .hide-desktop {
                     display:none;
                    }
                
                p {
                    font-family: Montserrat;
                    font-size: 15px;
                }

                .heading {
                    position:relative;
                    top:0;
                    width: 100%;
                    height: 5%;
                    padding-top:0;
                    color: #1c7578;
                    font-family: Futura;
                    font-size:25px;
                    font-weight:bold;
                }
            
                .headerline {
                    position:absolute;
                    top:90%;
                    left:0;
                    margin-top:0;
                    width:70%;
                }

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
        
        
                ul{
                    list-style: none;
                }


 
    
/*  TABLET MENU (PORTRAIT) */
    
                .bryggen {  
                    position:absolute;
                    top:5.45vh;
                    left:54vw;
                    z-index:4000;
                }
        
                .bryggen > img {   
                    width: 30vw;
                }
                
                .bryggen-mobile {  
                    position:absolute;
                    top:60vh;
                    left:-8%;
                    width:120%;
                    overflow:hidden;
                }
                
                .bryggen-toppanel {  
                    position:absolute;
                    top:5.45vh;
                    left:52vw;
                    z-index:4000;
                }
                
                .toppanel {
                    position:absolute;
                    top:2vh;
                    left:7vw;
                    height:6vh;
                    width:83vw;
                }

                .sangpedagogene-mobile {
                    position:absolute;
                    right:0;
                    top:20%;
                    width:50%;
                }
                
                .logo-small {
                    position:absolute; 
                    top: 5vh; 
                    left: 6vw; 
                    z-index: 9000; 
                    width: 14vw;
                }
                
                .sidepanel {
                    position:absolute;
                    top:10vh;
                    left:3vw;
                    margin:0;
                    display:block;  
                    overflow: hidden;
                    width: 19vw;
                    height: 90vh;
                    padding-top:3%;
                }
    
                ul.rtabs {
                    position: absolute;
                    top:10vh;
                    right:0;
                    padding-left: 0;
                    width:100%;
                    list-style: none;
                }
                
                ul.rtabs li i {
                    font-size:1.7vw;
                }    
                
                ul.rtabs li a {
                    background-color: inherit;
                    color: #ffffff;
                    font-family: Futura;
                    display:block;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    padding-right: 8%;
                    padding-top: 5%;
                    padding-bottom: 5%;
                    margin-bottom: 5%;
                    transition: 0.3s;
                    font-size: 2.2vw;
                    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;
                }
                

/*  TABLET FOOTER (PORTRAIT) */


                #footer {
                    position:absolute;
                    bottom:0 !important;
                    height:25vh;
                    width:19vw;
                    margin-bottom:1.5vh;
                    padding-left:10%;
                    padding-top:5%;
                    text-align:center;
                    font-family:Montserrat;
                    font-size:1.2vw;
                    color:#ffffff;
                }
                
                 #footer > span {
                    font-family:Montserrat;
                    font-size:1.2vw;
                    color:#ffffff;
                }
                
                .copyright {
                    width: 15vw;
                    padding-top: 30%;
                    padding-left: 0;
                    font-family: Montserrat;
                    font-size: 1vw;
                    color:#ffffff;
                }
                
                
/* TABLET MAIN CONTENT */
                    
                .container {
                    position: absolute;
                    top: 2vh;
                    display: block;
                    left:3vw;
                    margin-left: 0;
                    padding:0;
                    width: 95vw;
                    height: 90vh;
                    background-color: #1c7578;
                    opacity: 0.8;
                    border-left: 1px solid #000000;
                    border-top: 1px solid #737373;
                    border-right: 1px solid #737373;
                    border-bottom: 1px solid #000000;
                    border-top-left-radius: 40px;
                    border-top-right-radius: 40px;
                    border-bottom-right-radius: 40px;
                    border-bottom-left-radius: 40px;
                    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: 85vh;
                    width: 76vw;
                    margin-left: 0;
                    margin-right: 0;
                    padding: 7% 5% 2% 7%;
                    border-left: 1px solid #000000;
                    border-top: 1px solid #000000;
                    border-top-left-radius: 80px;
                    border-bottom-right-radius: 40px;
                    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;
                }    
                

/* TABLET (PORTRAIT) - 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;
                    max-width:95%;
                    flex-direction: row-reverse;
                    margin-top:0;
                    margin-right:0;
                }
                    
            
                .flex-item-top-left {
                    flex: 45%;
                    top: 0;
                    margin-bottom: 7%;
                    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: 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 {
                    flex: 100% !important;
                    margin-left: 0 !important;
                    margin-right: 0;
                    margin-bottom: 5%;
                }
                    
                .flex-item-bottom-right {
                    flex: 100%;
                    margin-left: -5% !important;
                    margin-right: 0;
                    padding-bottom: 5%;
                    opacity:1;
                }
                    
                .map-preview {
                    width: 90% !important;
                    margin: 2% 2% 2% 5%;
                    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);
                }
                
                
                  
/* TABLET (PORTRAIT) - OM OSS */


    
                .portrait {
                    width: 25%;
                    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;}
    
    

                
/* TABLET (PORTRAIT) - PRISER */
            
            
                .price-desktop {
                        display:none !important;
                    }
                    
                    .price-mobile {
                        display: flex !important;
                    }
                
                    .price-option {
                        width:33%;
                        height:59.9vw;
                        margin-top:0;
                        margin-top:10%;
                        margin-right: 2%;
                        padding:0;
                        background-color: rgba(255, 255, 255, 0.8);
                        border: none;
                        border-top-left-radius: 40px;
                        border-top-right-radius: 40px;
                        border-bottom-left-radius: 40px;
                        border-bottom-right-radius: 40px;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                    }
                
                    .pricetabs {
                        border-top-left-radius: 40px;
                        border-top-right-radius: 40px;
                        border-bottom-left-radius:0 !important;
                        border-bottom-right-radius:0 !important;
                        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.19) !important;
                        padding: 0;
                        width: 100% !important;
                        margin-bottom: -8px;
                    }
                    
                    .price-description {
                        height: 41.2vw;
                        margin-top: 0;
                        padding: 10% 5% 3% 5%;
                        text-align:center;
                        font-size:1.8vw;
                        border-top: none;
                        border-bottom: 1px solid #737373;
                        border-left: 1px solid #737373;
                        border-right: 1px solid #737373;
                        border-bottom-left-radius: 40px;
                        border-bottom-right-radius: 40px;
                    }
                    
                    .policy-mobile {
                        position:relative;
                        margin-top:5%;
                        font-size:12px;
                        text-align: center;
                    }    


/* TABLET (PORTRAIT) - GAVEKORT */
            
            
                .bestill-gavekort {
                    margin-top: 10% !important;
                }
                
                .gavekort {
                    width: 60% !important;
                    margin-right: 40% !important;
                    margin-bottom: 5%;
                    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);
                }
  


/* TABLET (PORTRAIT) - KONTAKT */
    
    
                #kontakt {
                    background: none;
                }
                
                .form-frame {
                    padding-right: 0;
                    padding-top:0;
                    height: 68%;
                    width: 73%;
                    position: absolute;
                    top: 24%;
                    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:2vw;
                    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: 50%;
                    height: 4vh;
                    min-height: 4vh;
                    max-height:22vh;
                    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;
                    top:90%;
                    right:0;
                    background-color: #1c7578;
                    color: white;
                    padding: 12px 16px !important;
                    font-family: futura;
                    font-size: 2vw;
                    border: none;
                    border-radius: 5px;
                    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;
                }


                
              
                    
            
                
                
                
                
                
                
                

