body{
    font-family: 'PT Sans', sans-serif;
}
p{
    font-size: 1rem;
} 
.text-right{
    text-align: right;
}
#Logo{
    width: 100px;
    margin: 12px 0px;
}
a {
    color: #009940;
}
.content-element__content a,
.dropdownWrapper h5 a:hover{
    text-decoration: underline;
}
a:hover {
    color: #009940;
}
a.btn{
    color: #FFF;
}
a.nav-link{
    color: #484848;
}
.descriptionarea a:hover, .gm-style-iw-d a:hover{
    color: #00b74a !important;
    text-decoration: underline;
}
/*

TinyMCE

*/
#tinymce{
    padding:10px;
}
/*

Colors

*/
.glaskedjan-green{
    color: #009940 !important;
}
.bg-glaskedjan-green{
    background-color: #009940 !important;
}
.bg-glaskedjan-grey{
    background-color: #484848 !important;
}
.bg-glaskedjan-light-grey{
    background-color: #f5f5f5 !important;
}
.form-outline .form-control:focus~.form-notch .form-notch-leading,
.select-input.focused~.form-notch .form-notch-leading{
    border-color: #00b74a !important;
    box-shadow: -1px 0 0 0 #00b74a, 0 1px 0 0 #00b74a, 0 -1px 0 0 #00b74a !important;
}
.form-outline .form-control:focus~.form-notch .form-notch-middle,
.select-input.focused~.form-notch .form-notch-middle{
    border-color: #00b74a !important;
    box-shadow: 0 1px 0 0 #00b74a !important;
    border-top: 1px solid transparent !important;
}
.form-outline .form-control:focus~.form-notch .form-notch-trailing,
.select-input.focused~.form-notch .form-notch-trailing{
    border-color: #00b74a !important;
    box-shadow: 1px 0 0 0 #00b74a, 0 -1px 0 0 #00b74a, 0 1px 0 0 #00b74a !important;
}
.form-outline .form-control:focus~.form-label,
.select-input.focused~.form-label,
.select-input.focused~.select-arrow{
    color: #00b74a !important;
}
.form-check-input[type=checkbox]:checked {
    background-color: #00b74a !important;
}
.form-check-input:checked {
    border-color: #00b74a !important;
}
.form-check-input[type=radio]:checked:after {
    border-color: #00b74a;
    background-color: #00b74a;
}
.input-group>.form-control:focus {
    transition: all .2s linear;
    border-color: #4caf50;
    outline: 0;
    box-shadow: inset 0 0 0 1px #4caf50;
}
.form-outline .form-control.is-invalid:focus~.form-notch .form-notch-leading, .was-validated .form-outline .form-control:invalid:focus~.form-notch .form-notch-leading {
    box-shadow: -1px 0 0 0 #f93154, 0 1px 0 0 #f93154, 0 -1px 0 0 #f93154;
}
.form-outline .form-control.is-invalid~.form-notch .form-notch-leading, .form-outline .form-control.is-invalid~.form-notch .form-notch-middle, .form-outline .form-control.is-invalid~.form-notch .form-notch-trailing, .was-validated .form-outline .form-control:invalid~.form-notch .form-notch-leading, .was-validated .form-outline .form-control:invalid~.form-notch .form-notch-middle, .was-validated .form-outline .form-control:invalid~.form-notch .form-notch-trailing {
    border-color: #f93154;
}
.form-check-input.is-invalid, .was-validated .form-check-input:invalid {
    border-color: #f93154;
    padding-right:0px;
}
div.field.checkbox span.error {
    margin-top: -1.8rem;
}
/*

Fonts

*/
h1, h2, h3, h4, h5, h6{
    color: #212121;
    font-weight: bold;
}
h1 {
    font-weight: bold;
    font-size: 3.0rem;
    margin-bottom: 2.3rem;
}
h2 {
    font-weight: bold;
    font-size: 2.3rem;
    margin-bottom: 2rem;
}
.text-shadow{
    text-shadow: 0px 0px 10px #000000;
}
/*

Buttons

*/
.btn{
    font-weight: bold;
    border-radius: 0px;
    font-size: 1rem;
    padding-bottom: 10px;
}
.btn.btn-primary{
    background-color: #009940;
}
/*

Forms

*/
.select-no-results{
    padding: 0px 15px !important;
}
div.field span.error{
    position: absolute;
    display: block;
    font-size: .875rem;
    width: auto;
    color: #f93154;
    margin-top: -0.5rem;
}
input.error, textarea.error{
    margin-bottom: 1rem;
    background-image: none;
    border-color: #f93154;
    padding-right: calc(1.6em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.4em + 0.1875rem) center;
    background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);    
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    margin-bottom: 0.8rem;
    background-image: none;
    border-color: #f93154;
}
.mb-4-custom{
    margin-bottom: 2rem!important;
}
/*

Pagination

*/
.page-item.active .page-link {
    background-color: #00b74a !important;
}
/*

Menu

*/
#MainMenu li.current a .menuTitle,
#MainMenu li.section a .menuTitle,
a.megadropdown.section{
    font-weight: bold !important;
    text-decoration: underline !important;
}
/*

MobileMenu

*/
#MobileMenuContainer{
    position: fixed;
    z-index: 1000;
    height: 100%;
    width: 100%;
    top: 0px;
    padding-top: 70px;
    overflow: scroll;
}
#MobileMenuContainer.lightMenu{
    position: fixed;
    z-index: 1000;
    height: initial;
    width: fit-content;
    top: 112px;
    padding-top: 0px;
    left: 32px;
    z-index: 1005;
}
.absoluteTopMenu{
    position: absolute;
    top: 0px;
    z-index: 1003;
}
.fixedTopMenu{
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1002;
}
.noscroll { 
  overflow: hidden;
}
/*

Main

*/
main{
    margin-top: 80px;
    min-height: 450px;
}
.square {
    width: 50vw;
    height: 50vw;
}
/*

IntroCarosel

*/
#introCarousel,
#introCarousel .carousel-inner,
#introCarousel .carousel-item,
#introCarousel .carousel-item.active {
  height: 100vh;
}
.multi-carousel .multi-carousel-inner .multi-carousel-item img {
  max-height: 100%;
}
#introCarousel .carousel-item {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.carousel-caption {
    width: 100%;
    left: 0%;
    top: 0%;
    text-align:initial;
    height: 100%;
}
/*

NAVIGATION

*/
#MenuContainer{
    z-index: 2000;
}
.navbar-light .navbar-nav .nav-link{
    color: #484848;
}
.icon-container{
    display: inline-block;
}
.arrow-down{
    position: relative;
    top: 2px;
    left: 5px;
}
.arrow-right{
    position: relative;
    top: 1px;
    left: 4px;
}
.dropdownWrapper {
    transition:height 0.5s ease-out;
    height:0;
    overflow:hidden;
    margin-top: 80px;
    z-index: 1500;
}
a.nav-link .menuTitle:hover{
    text-decoration: underline;
}
a.megadropdown{
    cursor: pointer;
}
a.megadropdown:hover{
    text-decoration: underline;
}
#MobileNavBarToggle.lightMenu{
    padding: 12px;
    width: 48px;
    height: 48px;
    position: fixed;
    top: -48px;
    left: 32px;
    display: block;
    margin-top: 0px;
}
#MobileNavBarToggle i{
    font-size: 1.5rem; 
}
#MobileMenuContainer a:hover{
    text-decoration: underline;
}
/*

Slideshow

*/
.carouselContainer{
    overflow: hidden
}
div.carousel-indicators button.slideshowNavButton,
.splide__pagination__page{
    height: 20px;
    width: 20px;
    opacity: 1;
    background: #00652B !important;
    display: block;
    border: none;
    margin: 0px 10px;
    border-radius: initial;
    transform: initial !important;
}
div.carousel-indicators button.slideshowNavButton.active,
.splide__pagination__page.is-active{
    background: #008438 !important;
}
.splide__pagination{
    top: 20rem !important;
}
.splide__arrow{
    background: none !important;
}
.splide__arrow svg{
    display: none;
}
.splide__arrow--next {
    right: -1.5em;
}
.splide__arrow--prev {
    left: -1.5em;
}
.carousel-item img{
    width: 100%!important;
}
.img-gradient{
    position:relative;
    display:inline-block;
    width: 100%;
}
.img-gradient img{
    display:block;
}
.bannerblockcontainer img{
    max-height: 100%;
    width: 100%;
}
.bannerblockcontent{
    position: absolute;
    display: inline-block !important;
    width: 100%;
    height: auto;
    top: 0px;
    z-index: 1;
}
.img-gradient:after {
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    display:inline-block;
}
.silverstripe__elementalbannerblock__block__bannerblock {
    position: initial !important;
    width: initial !important;
    display: block !important; 
    height: initial !important;
    align-items: initial !important;
    justify-content: initial !important;
}
#desktopSlideshow .carousel-indicators,
#mobileSlideshow .carousel-indicators{
    position: initial;
}
.carousel-indicators [data-mdb-target] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    margin-left: 8px;
    background-color: #009941;
    text-indent: initial;
    color: white;
    font-weight: bold;
    padding: 3px;
    line-height: normal;
}
/*

Content

*/
.content-element__content img{
    width: 100%;
    height: fit-content;
}
/*

Banner

*/
.horizontal-content{
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
}
.horizontal-content picture{
    width: 100%;
}
/*

    Twin banner

*/
.element.TwinBanner div.TwinBannerRow{
    margin-bottom: 5rem;
}
.MiniatureImageContainer{
    overflow: hidden;
    position: absolute;
    top: 0%;
    right: -120px;
    width: 350px;
    height: 350px;
    margin-bottom: 10rem;
}
.MiniatureImageContainer .MiniatureImageVerticalCenter {
    margin: 0;
    position: absolute;
    top: 125px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 50%;
    height: 50%;
    left: 0%;
}
/*

Map

*/
.map{
    width: 100%;
    height: 450px;
}
#MapSearcher{
    z-index: 2;
    top: -10%;
}
#MapExtraOptions{
    z-index: 1;
    top: -5%;
    opacity: 0;
}
div.gm-style-iw {
    width: 450px;
}
div.gm-style-iw h5 {
    font-size: 1.2rem;
}
div.gm-style-iw h6 {
    font-size: 1rem;
}
.gm-style-iw-d p{
    font-size: 12px;
}
a.googlemapsbutton:hover{
    color:#FFF !important;
    text-decoration: none;
}
.gm-style-iw-d{
    margin-top: -30px;
    margin-left: -20px;
}
/*

FILE

*/
div.file-element__file img{
    max-width: 100%;
    height: auto;
}
/*

    Footer

*/
footer a{
    color: #FFF;
}
footer a:hover{
    color: #FFF;
    text-decoration: underline; 
}
.footer-icons{
    width: 100%;
}
/*

Uppy

*/
.uppy{
    margin-bottom: 20px;
}
/*

Images

*/
.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill picture,
.fill img{
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
.CertificationIcon{
    width:60%;
}
.square-image{
    aspect-ratio: 1 / 1;          /* Always square */
    width: 100%;
    background-size: cover;       /* Crop image */
    background-position: center; 
}
/*

MAP INTRO

The band above the map on a complex page. Its colour and image come from the Map
tab in the site settings, so only the things that never change live here.

*/
.MapIntro{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.MapIntro .MapIntroPanel p:last-child{
    margin-bottom: 0;
}
/*
   Links in the editor text follow the colour chosen for it, rather than keeping
   the green they have everywhere else. Only once a colour has actually been
   picked: left empty, the band is the ordinary site styling and so are its links.
   Underlined, because a link the same colour as the words around it has nothing
   else left to say it is one.
*/
.MapIntro .MapIntroContent.has-text-color a,
.MapIntro .MapIntroContent.has-text-color a:hover,
.MapIntro .MapIntroContent.has-text-color a:focus{
    color: inherit;
    text-decoration: underline;
}
/* A background image can be anything at all, so the text gets something to sit on */
.MapIntro.has-background-image .MapIntroPanel{
    background: rgba(255, 255, 255, 0.85);
    border-radius: 1rem;
    padding: 2rem;
}
/*

FACEBOOK

*/
#fbPluginContainer{
    height:900px;
}

@media (max-width: 1400px){
    
    
}
@media (max-width: 1200px){
    
    
}
@media (max-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
    #introCarousel,
    #introCarousel .carousel-inner,
    #introCarousel .carousel-item,
    #introCarousel .carousel-item.active {
        height: 50vh;
    }
    h1 {
        font-size: 1.8rem;
    }
    #MobileNavBarToggle{
        margin-top: -64px;
    }
    #MobileNavBarToggle.lightMenu{
        margin-top: 0px;
    }
    .carouselContainer picture{
        width: 100%;
        height: 100%;
        display: flex;
    }
    .carouselContainer img {
        object-fit: cover; 
        height: auto;
        width:100%;
    }
    .carouselContainer .fitContent{
        object-fit: contain; 
    }
    .splide__arrow--prev {
        left: 0em;
    }
    .splide__arrow--next {
        right: 0em;
    }
    .splide__pagination {
        position: initial;
        margin-top: 2rem;
    }
    .element.Carousel {
        margin-bottom: 3rem;
    }
    .img-gradient{
        width: 100%;
        height: 100%
    }
    .bannerblockcontainer img {
        height: 100%;
        width: initial;
    }
    
    .MiniatureImageContainer{
        right: -16%;
        top: 37%;
    }
}
@media (max-width: 768px){
    .MiniatureImageContainer{
        margin-bottom: 5rem;
    }
    .MiniatureImageContainer .MiniatureImageVerticalCenter {
        width: 35%;
        height: 35%;
    }
    .MiniatureImageContainer {
        right: -200px;
        top: 390px;
    }
    .carousel-item img{
        min-height: -webkit-fill-available;
        object-fit: cover;
    }
    #mobileSlideshow .carousel-item img{
        min-height: initial;
        object-fit: cover;
    }
    .horizontal-content picture {
        height: 100%;
    }
    .horizontal-content.banner picture {
        height: initial;
    }
}
@media (max-width: 576px){
    .CertificationIcon{
        width:40%;
    }
}