/* Domeneshop css framework v.1.4 */
@import url(dsImageThumbGallery.css);
:root{

}


body{
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}

/* Typography */

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
    font-size: 2rem;
}

h3, .h3 {
    font-size: 1.75rem;
}

h4, .h4 {
    font-size: 1.5rem;
}

h5, .h5 {
    font-size: 1.25rem;
}

h6, .h6 {
    font-size: 1rem;
}

p {
    display: block;
    margin-top: 0em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}
/* Typography end */


/* Responsive grids */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.row {
    position: relative;
    margin-right: -15px;
    margin-left: -15px;
}

[class*="col-"] {
    box-sizing: border-box;
    float: left;
    padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-xs-1 {
        width: 8.33%;
    }

    .col-xs-2 {
        width: 16.66%;
    }

    .col-xs-3 {
        width: 25%;
    }

    .col-xs-4 {
        width: 33.33%;
    }

    .col-xs-5 {
        width: 41.66%;
    }

    .col-xs-6 {
        width: 50%;
    }

    .col-xs-7 {
        width: 58.33%;
    }

    .col-xs-8 {
        width: 66.66%;
    }

    .col-xs-9 {
        width: 75%;
    }

    .col-xs-10 {
        width: 83.33%;
    }

    .col-xs-11 {
        width: 91.66%;
    }

    .col-xs-12 {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}

/* Slutt responsiv rammeverk */


/* For dem som ønsker å bruke flexbox som layout */

.blog-items-container{

    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    justify-content: space-around;
}
.blog-items-container > div{

    flex: 1;
    padding: 10px;
       }


.ds-flex-container{
    margin: auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.ds-flex-container > :first-child{
    margin-left: 0px!important;
}
.ds-flex-container > :last-child{
    margin-right: 0px!important;
}
.ds-flex-container > div{
    margin:10px;
    flex-grow: 1;
    flex-basis: 0;
}

.ds-flex-col {
    flex: 1;
}

.ds-flex-container-thirds {
    display: flex;
    justify-content: space-between;
}
.ds-flex-container-thirds .col {
    width: 32%;
}

._50 {
    flex: 5;
}

._40 {
    flex: 4;
}
._30 {
    flex: 3;
}
._20 {
    flex: 2;
}

@media (max-width: 400px) {
    .ds-flex-container, .blog-items-container {
        display: block;
    }
}

/* Slutt på flexbox grid */

.clear {
    clear: both;
}

/* Buttons */

.btn {
    border: none; /* Remove borders */
    color: white; /* Add a text color */
    padding: 14px 28px; /* Add some padding */
    cursor: pointer; /* Add a pointer cursor on mouse-over */
}

a.btn {
    text-decoration: none;
}


/* Hamburger button */
.ds-bar-container{
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
    -webkit-transition: width 2s; /* Safari */

}

/* Rotate first bar */
.ds-hamburger-container-cross .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.ds-hamburger-container-cross .bar2 {
    opacity: 0;
}

/* flip */
.ds-hamburger-container-cross .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}


/* Rotate first bar */
.ds-hamburger-container-rotate .bar1 {
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);
}


/* Fade out the second bar */
.ds-hamburger-container-rotate .bar2 {
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);
}


/* Rotate last bar */
.ds-hamburger-container-rotate .bar3 {
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);

}





/* end Buttons */



/* Colors */
.success {
    background-color: #4CAF50;
}

/* Green */
.success:hover {
    background-color: #46a049;
}

.info {
    background-color: #3498db;
    color: #ffffff;
}

/* Blue */
.info:hover {
    background: #0b7dda;
}

.warning {
    background-color: #f68b20;
}

/* Orange */
.warning:hover {
    background: #e68a00;
}

.danger {
    background-color: #f44336;
}

/* Red */
.danger:hover {
    background: #da190b;
}

.default {
    background-color: #e7e7e7;
    color: black;
}

/* Gray */
.default:hover {
    background: #ddd;
}


.block{
    margin-bottom: 15px;
}

/* Faktaboks */

.box {
    box-sizing: border-box;
    border: 1px solid #ddd; /* Remove borders */
    padding: 10px; /* Add some padding */

}

.alertbox {
    position: absolute;
    text-align: center;
    width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* kan benyttes til å sjule elementer visuelt */
.hidden {
    display: none;
    visibility: hidden;
}

/* modal box * */

/* The Modal (background) */
.dsmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    margin: 5% auto;
    left: 0;
    right: 0;
    top: 10px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

img {
    max-width: 100%;
}

img.alignCenter {
    display: block;
    margin: 0 auto;
}

.alignCenter, .alignCenter input {
    text-align: center;
}

/* TABS */

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* FORMS */

input[type=text], input[type=email], input[type=password], textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: solid #000000 1px;
}

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}

/* ANIMATIONS */

/* FADE */

/* Css fade in animation */
[class*="fade-in-"] {
    opacity: 0;
    -webkit-animation: fade-in linear forwards;
    animation: fade-in linear forwards;
}

.fade-in-1 {
    animation-duration: 1s;
}

.fade-in-2 {
    animation-duration: 2s;
}

.fade-in-3 {
    animation-duration: 2s;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }

}

/* Css fade in animation */
[class*="fade-out-"] {
    opacity: 1;
    -webkit-animation: fade-out linear forwards;
    animation: fade-out linear forwards;
}

.fade-out-1 {
    animation-duration: 1s;
}

.fade-out-2 {
    animation-duration: 2s;
}

.fade-out-3 {
    animation-duration: 2s;
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }

}

/* DELAY */

.delay-1 {
    animation-delay: 1s;
}

.delay-2 {
    animation-delay: 2s;
}

.delay-3 {
    animation-delay: 3s;
}


/* ANIMATIONS END */



/* NAVIGATION */

/* Horizontal menu */

/* Add a black background color to the top navigation */
.ds-navbar {
    background: #e7e7e7;
    overflow: hidden;
}

/* Hide the link that should open and close the topnav on small screens */
.hide-desktop {
    display: none!important;
}


.ds-navbar ul {

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.ds-navbar li {
    float: left;
    list-style: none;
}

.ds-navbar li a {
    color: #000000;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
}

/* Change the link color to #111 (black) on hover */
.ds-navbar li a:hover {
}







/* VERTICAL MENU */

.ds-vertical-navigation {
    width:100%; /* Set a width if you like */

}
.ds-vertical-navigation li{
    list-style: none;
}

.ds-vertical-navigation a {
    background-color: #e7e7e7; /* Grey background color */
    color: black; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.ds-vertical-navigation a:hover {
    background-color: #ccc; /* Dark grey background on mouse-over */
}

.ds-vertical-navigation a.active {
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
    color: white;
}

/* END VERTICAL MENU */







/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .collapse li {
        display: none;
    }

    .ds-navbar ul, .ds-vertical-navigation ul {
        display: block;
    }

    .ds-navbar li, .ds-vertical-navigation li {
        float: none;
        border-bottom: solid 1px #686868;
    }

    .hide-desktop {
        display: block!important;
    }
    .hide-mobile {
        display: none!important;
    }

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .ds-navbar.responsive , .ds-vertical-navigation.responsive {
        position: relative;
    }

    .ds-navbar.responsive li , .ds-vertical-navigation.responsive li {
        float: none;
        display: block;
        text-align: left;
    }
}