body {
    font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    /* fonter och font-weight's att välja mellan är Roboto:300,400,500|Lora:400,400italic,700,700italic*/
}

header {
background: #FFFFFF;
}

.startsidatext h1 {
    font-family: 'Lora', serif;
    font-weight: 400;
    color: rgba(102, 112, 122, 0.6);
    letter-spacing: 0;
    font-weight: 300;
    font-size: 2.5em;
    line-height: 1.1em;
}

.startsidatext {
    border-color: #757e87;
    border-style: solid;
    border-width: 10px;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    padding-bottom: 5vh;

}


.ordertitlekolumn2 h5 {
    margin-top: 4vh

    
}



.titlekolumn2 h3 {
    margin-top: 4vh
    
}


/* ---------------------------------- Rubrikerna h1 h2 h3 h4 h5 h6 --------------------------- */

h1 {
    font-family: 'Lora', serif;
    font-weight: 400;
    color: #a4aab0;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 2.5em;
    line-height: 1.1em;
}

h2 {
    font-family: 'Lora', serif;
    font-weight: 400;
    color: #a4aab0;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 2.0em;
    line-height: 1.1em;
}

h3 {
    font-family: 'Lora', serif;
    font-weight: 400;
    color: #a4aab0;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 1.8em;
    line-height: 1.1em;
}

h4 {
    font-family: 'Lora', serif;
    font-weight: 400;
    color: #a4aab0;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 1.6em;
    line-height: 1.1em;
}

h5 {
    font-family: 'Lora', serif;
    font-weight: 400;
    color: #a4aab0;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 1.2em;
    line-height: 1.1em;
}


p {
    color: rgba(102, 112, 122, 1.0);
    font-size: 1.2em;
    font-weight: 300;
    letter-spacing: 1.2px;
    line-height: 150%;
}

.bodykolumn2 p {
    color: rgba(102, 112, 122, 1.0);
    font-size: 1.0em;
    font-weight: 300;
    letter-spacing: 1.2px;
    line-height: 135%;
}


.bodykolumn2 p strong {
    color: rgba(102, 112, 122, 0.8);
    font-size: 1.0em;
    font-weight: 500;
    letter-spacing: 1.2px;
    line-height: 135%;
}



/*----------------------------------- Logotype --------------------------------------*/

.logo a {
   margin: 0;
    padding: 30px 0 15px 30px;
}/*Add width:100% för att ge egen "rad"*/


.logo img {
    max-height: 10vh;
    width: auto;
    fill:#336699;
}


img {
    max-width: 100%;
    height: auto;
}


/*----------------------------------- SLUT Logotype --------------------------------------*/

a {
    color: #406471;
    text-decoration: none;
}


a:active, a:hover {
    text-decoration: underline;
    
}


/*----------------------------------- Meny / Menu --------------------------------------*/

nav {
    color: #FFFFFF;
    float: left;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.1em;
    letter-spacing: 1.5px;
}


nav li a
{
    color: #FFFFFF;
    background: rgba(102, 112, 122, 0.4);
    text-decoration: none;
    padding: 8px 20px 8px 20px;
    border-radius: 0px 0px 10px 0px;
}



nav ul.menu .active > a, nav ul.menu .current a
{
    color: rgba(102, 112, 122, 1.0);
    background: rgba(102, 112, 122, 0.1);
    text-decoration: none;
    padding: 8px 20px 8px 20px;
    border-radius: 0px 0px 10px 0px;
}


 nav li a:hover
{
    background: rgba(102, 112, 122, 0.4);
    text-decoration: none;
    padding: 8px 20px 8px 20px;
    border-radius: 0px 0px 10px 0px;

}



/*----------------------------------- SLUT Meny / Menu --------------------------------------*/




/*-------------------------------------------------------------- Bildspel ------------------------------------------------------------------------*/
.slick-slider {
    font-weight: 300;
    font-size: 1.8em;
    line-height: 1.5em;
    margin: 0 auto;
    position: relative;
    background: rgba(102, 112, 122, 0.9);
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: -1; /* z-index - sätter vilken "nivå" bildspelet / "vad man vill" ska hamna på */
}

.slick-track {
    height: 70vh;
    max-height: 70vh;
}

.slick-slide {
    background-size: cover;
    background-position: center top;
}

.bildspel_titel {
    color: #FFFFFF;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.1em;
    letter-spacing: 2.5px;
    position:absolute; bottom: 12%;
    background: rgba(102, 112, 122, 0.4);
    width: 100%;
    text-align: center;
    padding: 10px;
    
    
}


.slick-active .bildspel_titel {
    -webkit-animation-duration: 0.5s;
    animation-delay: 1.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/*-------------------------------------------------------------- SLUT Bildspel ------------------------------------------------------------------------*/


/*----------------------------------- Go Down / Click to begin --------------------------------------*/

.click2begin a {
    position: absolute;
    margin-top: -8vh;
    margin-left: -3vw;
    opacity: 0.15;
}

.click2begin a:hover img {

    -webkit-animation-duration: 1.5s;
    animation-delay: 0s;
    animation-duration: 1.5s;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;

 }

.click2begin a:hover {
    opacity: 0.8;
}

/*----------------------------------- SLUT Go Down / Click to begin --------------------------------------*/


/*-------------------------------------------------------------- Topbild Sidor ------------------------------------------------------------------------*/

.topbild  {
    position: relative;
    border-color: #757e87;
    border-style: solid;
    border-width: 20px;
    background-size: cover;
    background-position: top center;
    border-left: 0px;
    border-right: 0px;
    height: 65vh;
    max-height: 65vw;
    content:"";

    z-index: -1; /* z-index - sätter vilken "nivå" bildspelet / "vad man vill" ska hamna på */
}


/*-------------------------------------------------------------- SLUT Topbild Sidor ------------------------------------------------------------------------*/


/*---------------------------------------------- Delar upp texten i 2 spalter -----------------------------------------------------*/

.spaltX2 p {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 50px;
       -moz-column-gap: 50px;
            column-gap: 50px;
    text-align: left !important;
    margin:0px; /* margin 0px för att p-taggen inte ska tryckas ner vid 2 spalter */
} 

/*---------------------------------------------- SLUT Delar upp texten i 2 spalter -----------------------------------------------------*/


/*-------------------------------------------------------------- Länkboxar ------------------------------------------------------------------------*/

.lankboxbild {
    min-height: 50vh;
    position: relative;
    background-size: cover;
    background-position: center top;
}


.lankboxbild span{
    font-family: 'Lora', serif;
    font-weight: 300;
    font-size: 1.2em;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.5em;
    position:absolute; 
    bottom:40%;
    width: 100%;
    color: #FFFFFF;
    background: rgba(102, 112, 122, 0.4);
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-style: solid;
    border-width: 2px;
    border-left: 0px;
    border-right: 0px;
}

/*
.lankboxbild {position:relative; z-index:0;}
.lankboxbild:after {content:""; background:rgba(0,0,0,0.4); width:100%; height:100%; position:absolute; z-index:2; }
*/

a.lankboxbild{
    display:block;
}

.lankboxbild:hover span{
    -webkit-animation-duration: 1.5s;
    animation-delay: 0s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    color: rgba(102, 112, 122, 1.0);
    background: rgba(255, 255, 255, 0.80);
    text-decoration: none;
}


/*-------------------------------------------------------------- SLUT Länkboxar ------------------------------------------------------------------------*/


/*---------------------------------------------------- Blogg & blogginlägg ----------------------------------------------------*/




.lasmer {
    color:#FFFFFF;
    background: rgba(102, 112, 122, 0.9);
    padding: 10px;
}



.bloggtitelinramning h1 a {
color: rgba(102, 112, 122, 0.4);
}


.blogginlagg:nth-child(even) {
    background: #FFFFFF;
}

.blogginlagg:nth-child(odd) {
    background: #EEEEEE;

}




.bloggbild {
    margin-top:4vh;
    margin-bottom:0;
 
}


.bloggfilm {
    margin-top:0vh;
    margin-bottom:0;
}


/*---------------------------------------------------- SLUT Blogg & blogginlägg ----------------------------------------------------*/



/* --------------------------------------------------------- Sociala-medier & Kontaktformulär / Kontaktbanner ----------------------------------------- */


.sociala-medier {
margin-top: 20px;
}

.fa {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.8em;
    margin-bottom:2.0vh;
    margin-left:2vh;
}



.boltforms-row label {
    font-weight: 400;
    margin-bottom: 0;
}

.boltforms-row input {
    width: 100%;
    color: #606060;
}

.boltforms-row textarea {
    width: 100%;
    color: #606060;
    height: 15vh
}

.boltforms-row button  {
    display: block;
    width: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 0;
    border: none;
    border-radius: 2px;
    height: auto;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.1em;
}
.boltforms-row button:hover  {
    display: block;
    width: 100%;
    color: #fff;
    background-color:  rgba(50, 165, 35, 0.8);
    margin: 0;
    border: none;
    border-radius: 2px;
    height: auto;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.1em;
}




/*--------------------- Kontaktbanner-texten ----------------------*/
.kontaktbanner {
    background: rgba(102, 112, 122, 0.9);
    color: #ffffff;
    padding-top: 30px;
    padding-bottom: 10px;
    margin-top: 0vh;

}

.kontaktbanner a {
    color: #ffffff;
}

.kontaktbanner h5 {
    font-size: 1.5em;
    margin-top: 0px;
}

.kontaktbanner h2 {
    padding: 0px 0 10px;
}

.kontaktbanner p {
    font-size: 1.2em;
    margin-bottom: 0px;
}

.kontaktsocialamedier .fa{
    margin-top: -10px;
    text-align: left;
    font-size: 1.8em;
    margin-right: 20px;
}

.kontaktinfoutrymme{
    margin-top: -10px;
    text-align: center;
}



.kontaktbanner .boltforms-row {
    float: left;
    width: 33.3%;
    padding-right: 10px;
}



.kontaktbanner .boltforms-row:nth-child(n+4) {
    width: 100%;
}



/* --------------------------------------------------------- SLUT Kontaktformulär / Kontaktbanner ----------------------------------------- */




/*------------------Give map a height and it's images no max-width----------*/
.map-canvas {
    height: 50vh;
}

.map-canvas img {
    max-width: none;
}

/*--------------------------Make FB widget responsive------------------------*/
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style],
.twitter-timeline {
    width: 100% !important;
}


/*--------------------------- Example media queries -----------------------------*/

/*Allt under 1500*/
@media (max-width: 1500px) {
   
    #menu-icon {
    color: rgba(102, 112, 122, 0.6);
    }
    
    .menu.show {
    overflow-y: auto;
    max-height: 100vh;
    max-width: 100vw;
    text-align: center;    
}

    
    nav {
    color: #FFFFFF;
    float: left;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.6em;
    letter-spacing: 1.5px;
}
    
        nav li a {
            color:#CCCCCC;
            background: rgba(102, 112, 122, 0.9);
        }
    
        nav li a:hover {
            color:#FFFFFF;
            background: rgba(102, 112, 122, 0.8);
        }

            nav ul.menu .active > a, nav ul.menu .current a
            {
                color:#FFFFFF;
                background: rgba(102, 112, 122, 0.8);
                text-decoration: none;
                padding: 8px 20px 8px 20px;
                border-radius: 0px 0px 10px 0px;
            }

     nav li a:hover
{
    background: rgba(102, 112, 122, 0.4);
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    border-radius: 0px 0px 10px 0px;

}
    
    
    
    
    
}
    

/*Allt under M-nivå*/
@media (max-width: 1099px) {
  


} /* SLUT - Allt under M-nivå*/ 


/*Allt under S-nivå*/
@media (max-width: 799px) {
    
 
    

.spaltX2 p {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 2;
    -webkit-column-gap: 0px;
       -moz-column-gap: 0px;
            column-gap: 0px;
    text-align: left !important;
   /* margin:0px;  margin 0px för att p-taggen inte ska tryckas ner vid 2 spalter */
} 



}  

/*Allt under XS-nivå*/
@media (max-width: 549px) {}