@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,900&family=Libre+Caslon+Text:wght@400;700&display=swap');
@import url("menuoverlay.css");
@import url("testimonials.css");

* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Kanit", sans-serif;}

h1, h2, h3, h4, h5, h6 {font-family: "Libre Caslon Text", serif;}

/*
font-family: "Kanit", sans-serif;
font-family: "Libre Caslon Text", serif;

#333333  koksgrå
#ff4500  orange
#cfffdc  lightgreen
#253d2c  primary green
#68ba7f  medium green 
#2e6f40  main green
*/

.ccm-edit-mode body {background: red; padding-top: 50px;}

img {max-width: 100%}
video {max-width: 95%}
hr {background: #253d2c; border: none; height: 1px; margin: 5px 0;}
input[type=text] {width: 100%;padding: 12px 20px;margin: 8px 0;box-sizing: border-box;}
input[type=email] {width: 100%;padding: 12px 20px;margin: 8px 0;box-sizing: border-box;}
input[type=tel] {width: 100%;padding: 12px 20px;margin: 8px 0;box-sizing: border-box;}
input[type=submit] {background: #253d2c; color: #fff;padding: 12px 20px;margin: 8px 0;box-sizing: border-box;cursor: pointer; border: none;}
input[type=submit]:hover {background: #2e6f40;}
textarea {width: 100%;height: 100px;margin: 8px 0;box-sizing: border-box;}

.control-label:after {
    content:" (*)";
}
.text-muted {opacity: 0!important;display: none;}

/* id mainer */
html, body {height: 100%;}
body {background: #f1f1f1;}
#mainer, #backgroundDiv {width: 70%;max-width: 1140px;margin: 30px auto 0;box-shadow: 0 0 14px #333;background: #fff;}
#mainer main {display: flex;flex-direction: row;width: 100%;justify-content: space-between;}
#mainer main section {display: flex;flex-direction: column;width: 40%;}

main#col {flex-direction: column;}
#privacy {width: 100%!important;}
#contentprivate {width: 70%;margin: 0 auto;padding-bottom: 20px;}

#mainer main section + aside {width: 60%;background: #253d2c;}

#services article {position: relative; border-bottom: 1px solid #fff;padding: 1em 0 0 1.2em}
#services article img {position: absolute; top: 0; left: 0; z-index: 0; object-fit: cover;width: 100%; height: 100%}
#services article:first-child {width: 100%;height: 180px; background: pink;}
#services article:nth-child(2) {width: 100%;height: 180px; background: lightgreen;}
#services article:last-child {width: 100%;height: 180px; background: orange;}

#services article h3 {position: relative; z-index: 3;color: #fff}
#services article p {position: relative; z-index: 5;color: #fff}
#services article a {position: relative; z-index: 7;color: #fff}

#bottom {display: flex;flex-direction: row;}
#bottom article {width: 70%;height: auto;}
#bottom article div {margin: 0!important;}
#bottom article video {max-width: 100%;}
#bottom article:last-child {padding: 50px 10px 10px 10px;color: #fff; width: 30%}
#bottom article:last-child footer {display: flex; flex-direction: row;justify-content:center;padding: 0;width: 100%;}
#bottom article:last-child footer a {width: 60px; height: 60px;display: inline-block; margin-right: 15px;}
#bottom article:last-child footer a img {width: 100%!important;height: 100%!important;object-fit: contain;display: block;}

body#subpage #backgroundDiv {position: relative;display: flex;flex-direction: row;margin-top: 30px;justify-content: flex-end;}
body#subpage #backgroundDiv nav {position: absolute; top: 0; left: 0; width: 375px;height: 95px;background: rgba(255, 255, 255, 0.85);}
body#subpage #backgroundDiv main {width: 40%;max-width: 500px;min-height: 450px;background: rgba(255, 255, 255, 0.85);padding: 20px;}

body#subpage #backgroundDiv .thumbnail-container {position: absolute; bottom: 0; left: 0px;background: rgba(255, 255, 255, 0.85);padding: 8px}
body#subpage #backgroundDiv .thumbnail-container img {box-shadow: 0 0 5px #000;}

nav {display: flex;flex-direction: row;justify-content: space-between; width: 100%;padding: 10px 14px 5px 14px;}

#content {padding: 20px 15px}

body#subpage #backgroundDiv #ref {margin: 200px auto 0px auto;width: 100%;max-width: 100%}
body#subpage #backgroundDiv #ref .inner {display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between;}
body#subpage #backgroundDiv #ref .inner article {width: 30%}

footer {width: 75%;max-width: 1050px;margin: 0 auto;padding: 5px 20px 0 20px;position: relative}

#one {width: 100%;height: 300px; background: url(img/martin.jpg) center center no-repeat;}
#two {width: 100%;height: 200px; background: url(img/tire.jpg) center top no-repeat; border-top: 2px solid #fff;padding: 60px 20px 0 20px}
#three {width: 100%;height: 200px; background: url(img/pullrobe.jpg) center top no-repeat; border-top: 2px solid #fff;padding: 60px 20px 0 20px}
#seven footer {display: flex;justify-content: space-around;padding-bottom: 5px;}

#seven a {width: 60px;}
#seven a img {width: 100%;}

#mainer main aside {position: relative;}
aside #five {width: 100%;height: 200px; background: url(img/sauna.jpg) center center no-repeat; border-top: 2px solid #fff;padding: 60px 20px 0 20px; position: absolute; bottom: 0;}

/**************** TEKSTER *****************/
/* tekster */
p {font-size: 1.1em; color: #333;}
footer p {color: #999;font-size: 0.9em }
footer p > a {color: #999!important;}
footer p a#mg {position: absolute; right: 20px; text-align: center; display: inline-block;color: #ccc!important;font-weight: 300}
nav a:first-child {width: 85px;}
nav a:first-child img {width: 100%;}
span.iconmenu {width: 40px;display: inline-block; cursor: pointer; margin-top: 20px;}
span.iconmenu img {width: 100%;}

#bottom article:last-child h4 {text-align: center;}

#content h1{font-size: 1.9em;color: #253d2c;}
body#subpage #backgroundDiv main h1 {font-size: 1.8em;color: #253d2c;}
#content h2 {font-size: 1.2em;font-weight: 600; color: #253d2c;margin-bottom: 5px;margin-top: 10px;}
body#subpage #backgroundDiv main h2 {font-size: 1.1em;font-weight: 600; color: #253d2c;margin-bottom: 5px;margin-top: 10px;}
body#subpage #backgroundDiv main ul {padding-left: 20px;margin-bottom: 15px;}
body#subpage #backgroundDiv main li {font-size: 1.1em;line-height: 1.3em; color: #333}

#content p {font-size: 1.1em;color: #333;margin-bottom: 20px;}
#content p + a {display: inline-block; background: #253d2c; color: #fff;border-radius: 20px;padding: 5px 15px;font-size: 0.95em; text-decoration: none;}
#content p + a:hover {background: #ff4500; color: #fff;border-radius: 20px;padding: 5px 15px;font-size: 0.95em; text-decoration: none;}

#services article h3 {color: #fff;}
#services article p {color: #fff;line-height: 1.2em;margin-bottom: 10px;}
#services article a {display: inline-block; background: #cfffdc; color: #000;border-radius: 20px;padding: 5px 15px;font-size: 0.95em; text-decoration: none;}
#services article a:hover {display: inline-block; background: #ff4500; color: #fff;border-radius: 20px;padding: 5px 15px;font-size: 0.95em; text-decoration: none;}

.testimonial-slide a {color: #253d2c; text-decoration: none;display: block; margin: 10px 0 0 10px;font-weight: 600;}
.testimonial-slide a:hover {color: #666;}

#seven h4 {text-align: center; padding-top: 20px;}


 /* Styling for thumbnails */
.thumbnail-container {margin-top: 0px;}
.thumbnail {width: 100px;height: 60px;margin: 5px 5px 0 5px;cursor: pointer;border: 2px solid transparent;transition: border 0.3s ease;}
.thumbnail:hover {border: 2px solid #ccc;}


/**************** TEKSTER SLUT *****************/

/* media queries */
@media screen and (min-width: 325px) and (max-width: 640px) {
    #mainer {width: 95%;max-width: 6409px;margin: 30px auto 0 auto;box-shadow: 0 0 14px #333;background: #fff;}
    #mainer main {display: flex;flex-direction: column;width: 100%;}
    #mainer main section {display: flex;flex-direction: column;width: 100%;}
    #mainer main section article {width: 100%; order: 2;display: flex;flex-direction: column;}
    #mainer main section aside {width: 100%;order: 1; min-height: 400px;}
    #mainer main section + article {width: 100%;} 

    #mainer main section + aside {width: 100%;}

    nav {box-shadow: 0 0 5px #253d2c}
    #privacy nav {box-shadow: 0 0 5px #253d2c; margin-bottom: 20px;}

    #bottom article {width: 70%;height: auto;}
    #bottom article div {width: 100%;height: 100%;object-fit: cover;}
    #bottom article:last-child {padding: 5px 10px 10px 10px;color: #fff; width: 30%}


    #bottom article:last-child footer {flex-direction: column;justify-content: flex-end;text-align: center;}
    #bottom article:last-child footer a {padding: 10px;}
    #bottom article:last-child footer a {height: 60px;display: inline-block; margin: 0 auto;}

    #mainer main section aside #content h1 {font-size: 1.75em;}

    #content h1 {font-size: 1.7em;}

    #mainer, #backgroundDiv {width: 95%;max-width: 1140px;margin: 30px auto 0;box-shadow: 0 0 14px #333;background: #fff;}
    body#subpage #backgroundDiv {position: relative;display: flex;flex-direction: column;margin-top: 30px;justify-content: flex-end;}
    body#subpage #backgroundDiv nav {width: 100%;height: 95px;background: rgba(255, 255, 255, 0.85);}
    body#subpage #backgroundDiv main {width: 100%;max-width: 620px;min-height: 450px;background: rgba(255, 255, 255, 0.85);padding: 20px;margin: 200px auto 120px auto}
    body#subpage #backgroundDiv .thumbnail-container {position: absolute; bottom: 0; left: 0; margin-top: 20px;background: rgba(255, 255, 255, 0.85);padding: 8px;width: 100%;}

    body#subpage #backgroundDiv #ref {margin-bottom: 0;}
    body#subpage #backgroundDiv #ref .inner {flex-direction: column;}
    body#subpage #backgroundDiv #ref .inner article {width: 90%; margin: 0 auto;}
    
    footer {width: 100%;max-width: 479px;margin: 0 auto;padding: 5px 20px 0 20px;position: relative}

    footer p {color: #999;line-height: 40px;text-align: center;}
    footer p a {position: relative; right: 0px;color: #ccc;font-weight: 300; display: block;}
    footer p a#mg {position: relative; right: auto; text-align: center; display: inline-block;width: 100%;color: #ccc!important;font-weight: 300}
}

@media screen and (min-width: 641px) and (max-width: 768px) {
    #mainer {width: 95%;max-width: 768px;margin: 30px auto 0 auto;box-shadow: 0 0 14px #333;background: #fff;}
    #mainer main {display: flex;flex-direction: row;width: 100%;}
    #mainer main section {display: flex;flex-direction: column;width: 60%;}
    #mainer main section article {width: 100%;order: 2;display: flex;flex-direction: column;}
    #mainer main section aside {width: 100%;order: 1; min-height: 400px;}
    #mainer main section + article {width: 40%;} 

    #mainer main section + aside {width: 100%;}

    #mainer, #backgroundDiv {width: 85%;max-width: 1140px;margin: 30px auto 0;box-shadow: 0 0 14px #333;background: #fff;}

    #content h1{font-size: 1.7em;}

    main#col {flex-direction: column;}
    #privacy {width: 100%!important;}
    #contentprivate {width: 85%;margin: 0 auto;padding-bottom: 20px;}

    #bottom {display: flex;flex-direction: row; flex-wrap: wrap;}
    #bottom article {width: 100%;height: auto;}
    #bottom article:last-child {padding: 10px 10px 10px 10px;color: #fff; width: 100%}

    aside #five {width: 100%;height: 200px; background: url(img/sauna.jpg) center center no-repeat; border-top: 2px solid #fff;padding: 60px 20px 0 20px; position: relative; bottom: 0;}

    #one {width: 100%;height: 300px; background: url(img/martin.jpg) center center no-repeat;order: 3;}
    #two {width: 100%;height: 200px; background: url(img/tire.jpg) center top no-repeat; border-top: 2px solid #fff;padding: 60px 20px 0 20px; order: 1;}
    #three {width: 100%;height: 200px; background: url(img/pullrobe.jpg) center top no-repeat; border-top: 2px solid #fff;padding: 60px 20px 0 20px; order: 2;}

    #mainer main section aside #content h1 {font-size: 1.75em;}

    body#subpage #backgroundDiv {position: relative;display: flex;flex-direction: column;margin-top: 30px;justify-content: flex-end;}
    body#subpage #backgroundDiv nav {width: 100%;height: 95px;background: rgba(255, 255, 255, 0.85);}
    body#subpage #backgroundDiv main {width: 90%;max-width: 680px;min-height: 450px;background: rgba(255, 255, 255, 0.85);padding: 20px;margin: 200px auto 120px auto}
    body#subpage #backgroundDiv .thumbnail-container {position: absolute; bottom: 0; left: 0; margin-top: 20px;background: rgba(255, 255, 255, 0.85);padding: 8px;width: 100%;}

    footer {width: 85%;max-width: 768px;margin: 0 auto;padding: 5px 20px 0 20px;position: relative}

    footer p {color: #999;line-height: 40px;}
    footer p > a {color: #999!important;position: relative;}
    footer p a#mg {position: absolute; right: 20px;color: #ccc!important;text-decoration: none;font-weight: 300}

}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    #mainer, #backgroundDiv {width: 98%;max-width: 1140px;margin: 30px auto 0;box-shadow: 0 0 14px #333;background: #fff;}
    #mainer main section {display: flex;flex-direction: column;width: 45%;}
    #mainer main section + aside {width: 55%;background: #253d2c;}
    #mainer, #backgroundDiv {width: 98%;max-width: 1140px;margin: 30px auto 0;box-shadow: 0 0 14px #333;background: #fff;background-position: -200px 50%!important;}

    #bottom {display: flex;flex-direction: row;flex-wrap: wrap;}
    #bottom article {width: 100%;height: auto;}
    #bottom article div {margin: 0!important;}  
    #bottom article:last-child {padding: 20px 10px 10px 10px;color: #fff; width: 100%}

    body#subpage #backgroundDiv main li {font-size: 0.85em;line-height: 1.2em;}

    p {font-size: 0.85em;}
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
    #mainer {width: 85%;}
    #backgroundDiv {width: 85%;background-position: -200px 50%!important;}
}