@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);


body {  
    background-color: #f1f1f1;

}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td { 
  margin:0;
  padding:0;
  
}


#main { 
    color:#000; 
    font-family:'Josefin Sans', arial, serif; 
    background-color: transparent;
}

#content {
    background-color: #fff;
}


#top { 
    background-image: url('/img/bgpresentation.png');
    background-size: cover;
    width:100%;
}

#presentation {
    min-height:700px;
    background-color: transparent;
    background-image: url('/img/presentation.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}
 #logo {
    position:fixed;
    top: 3px;
    left: -114px;
    -webkit-transform: rotate(-33deg);
    -moz-transform: rotate(-33deg);
    -o-transform: rotate(-33deg);
    -ms-transform: rotate(-33deg);
    transform: rotate(-33deg);
    }

#startContainer {
    max-width:1024px;
    margin: 0 auto;
}

#presentation h1 {
    padding-top: 120px; 
    color: #f1f1f1;
    font-family:'Josefin Sans', arial, serif; 
    font-size: 4em;
}

.startText {
    color: #f1f1f1;
    font-family:'Josefin Sans', arial, serif; 
    font-size: 1.5em;
}

#startBoxContainer {
    max-width: 1024px;
    margin: 0 auto;
}

.startBox { 
    float: left;
    min-height: 150px;
    width: 300px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.10);
    margin-right: 3px;
    -webkit-box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
    box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
    color: #fff;
}

.startBox img {
    float: left;    
    }

.startBox h1 { 
    padding-top: 0 !important;
    font-size: 1.3em !important;
    color: #FF6A00 !important;
    margin-bottom: 10px;
}

.topNavigation { }


#naviWrap { background-color:#77CC6D; position: fixed; width:100%; text-align: center }

#naviWrap .topNavigation li { display:inline-block; height:60px; line-height:60px; text-align:center; }
#naviWrap .topNavigation li:first-child { border-left: 0 }
#naviWrap .topNavigation li:last-child { border-right: 0 }

#naviWrap .topNavigation li a { 
    transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    -webkit-transition: color .25s ease-in-out;   
    color:#fff; 
    display:block; 
    font-size:18px; 
    font-weight: bold;
    height:60px; 
    padding:0 30px; 
    text-decoration:none; 
    text-transform:uppercase;   }

#naviWrap .topNavigation li a:hover { color: #FFD447 !important; text-decoration:none; }
#naviWrap .topNavigation li.current {  }
#naviWrap .topNavigation li.current a {}



#footerInner .topNavigation { list-style:none; }
#footerInner .topNavigation li a { 
    transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    -webkit-transition: color .25s ease-in-out;   
    color:#FFD447; 
    display:block; 
    font-size:16px; 
    text-decoration:none; 
    }

#footerInner .topNavigation li a:hover { color: #fff !important; text-decoration:none; }
#footerInner .topNavigation li.current {  }
#footerInner .topNavigation li.current a {}


#subNavigation { background-color:#303030; background-color:rgba(0,0,0,0.75); }
#subNavigation ul { margin:0 auto; width:960px; }
#subNavigation ul li { display:inline-block; height:60px; line-height:60px; text-align:center; }
#subNavigation ul li a { color:#FFF; display:block; font-size:12px; font-style:italic; height:60px; padding:0 30px; text-transform:none; }
#subNavigation ul li a:hover { text-decoration:underline; }
#subNavigation ul li chosen { font-style:italic; font-weight: bold; }

#fb { padding-top: 42px; padding-bottom: 42px; }




#subSections { max-width: 1024px; margin: 0 auto; }

.subSection { 
    background-color: #fff;        
    padding-top: 20px; 
    padding-bottom: 40px;
    color: #000;
}

.subSection:nth-child(odd) {
    background-color: #fff; 
      overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
    color: #000;
}

.subSection:last-of-type {
    background:none;
    color: rgba(0,0,0,0.75);
    background-color: #fff;  
}


#footer { 
    background-color: rgba(0,0,0,0.75);
    width: 100%;
    color: #f4f4f4;
    z-index: 50;
}

#footerInner {
   margin: 0 auto;
   width: 600px; 
   padding-top: 40px;
}

#footerInner b {
    color: #c0c0c0;
}

.footerContact {
    float: left;
    padding-right: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
    border-right: 1px solid rgba(0,0,0,0.15);
    display: table-cell;
    min-height: 150px;
}
.footerMenu {
    float: left;
    display: table-cell;
    min-height: 150px;
    margin-bottom: 30px;
    padding-right: 30px;
    margin-right: 30px;
    margin-bottom: 20px;
    border-right: 1px solid rgba(0,0,0,0.15);
}

.footerShare {
    display: table-cell;
    min-height: 150px;
    margin-bottom: 30px;

}

.footerShare a { color:#FFD447; text-decoration:none  }
.footerShare a:hover { color:#fff;  }
/* Referenser */

.refContents {text-align:center; padding: 40px; }

.refContents:nth-child(even) { 
  float: right;
}

.refContents:nth-child(odd) { 
  float: left;
}

.refContainer { 
    padding:10px;
    border: 1px solid rgba(0,0,0,0.10);
    width: 400px;   
	-webkit-box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
	   -moz-box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
	        box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
}

.refImgContainer { text-align:center }

.refImg { 
    width: auto;
    height: auto;
    max-height: 600px;
    border: 1px solid rgba(0,0,0,0.10);
    padding: 4px;
	-webkit-box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
	   -moz-box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
	        box-shadow: 0 12px 15px -6px rgba(0,0,0,0.15);
    margin-bottom: 20px;
}

.refText h1 {
    font-size: 18px;
}

/*Länkar*/
.lankKategori {
	padding-bottom: 20px;
	min-width: 30%;
	}

/* Bilder */
.img-popup-link img {
	border: 1px solid #fff;
    border-radius: 10px;
	margin-right: 3px;
		}


/* Kontakt */
#kontaktPersoner { 
	float:left; 
	width: 48%;
}

#kontaktMaps {
	float:right;
	width:360px;
	height: 360px;
	border: 1px solid #c0c0c0;	
}


#perskontakt {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 5px;
}

#perskontakt li {
    width: 150px;
    margin-right: 10px;
    margin-top: 5px;
    /*font-size: 12px;*/
}

#perskontakt li a {
    text-decoration: none;
    color: #960000;
}

#perskontakt li a:hover {
    text-decoration: underline;
    color: #960000;
}



hr { 
    margin-top: 50px;
    border: 0;
    border-top: 1px solid #f1f1f1;
}

fieldset {
    margin: 20px 0 20px 0; 
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

legend { 
    padding: 0 8px 0 8px; 
    font-size: 20px;
    font-weight: bold;
}

input {
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #c0c0c0;
    margin-top: 5px;
    margin-bottom: 5px;
}

textarea {
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #c0c0c0;
    width: 50%;
    margin-top: 5px;
    margin-bottom: 5px;
}

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

.error { color: red }

/* Responsiv layout */
@media screen and (max-width: 400px) {
    #topNavigationMenu { display: none; }
    .topNavigationMenuButton { text-align: left !important; }
    .topNavigation li {
        display:block !important;
        height: 40px !important;
        line-height:40px !important;
    }

    .topNavigation li a {
         font-size: 14px !important;
    }
    #presentation { display:none !important}
    #logo { display: none !important }
    #logosmall { display: block !important }
    #logosmall img { width: 350px !important; margin-top: 50px;}
    #startContainer { max-width: 800px !important}
    #startBoxContainer { display:none !important}
    .startBox { 
        width: 270px !important;
        margin-right: 16px !important;
    }
    #subSections { max-width: 307px !important;}
    #subSection fieldset { margin: 0 !important}
    #kontaktPersoner {
        float: none !important;
        width:auto !important;
    }
    #kontaktMaps {
        float: none !important;
        text-align: center !important;
        width: 99%;
        border: 0 !important;
        height: 260px !important
    }
    .img-popup-link img { width: 120px !important }
    .kontaktGoogleMap { width: 260px !important; height: 260px !important}
    #footerInner { width: 290px !important}
    .footerContact {float:none !important; border: 0 !important }
    .footerShare { float:none !important; display:block !important; padding-top: 40px }
    .footerMenu { display:none !important}
}

@media screen and (min-width: 401px) and (max-width: 600px) {
    #topNavigationMenu { display: none; }
    .topNavigationMenuButton { text-align: left !important; }
    .topNavigation li {
        display:block !important;
        height: 40px !important;
        line-height:40px !important;
    }

    .topNavigation li a {
         font-size: 14px !important;
    }
    #presentation { display:none !important}
    #logo { display: none !important }
    #logosmall { display: block !important }
    #logosmall img { width: 350px !important; margin-top: 50px;}
    #startContainer { max-width: 800px !important}
    #startBoxContainer { display:none !important}
    .startBox { 
        width: 270px !important;
        margin-right: 16px !important;
    }
    #subSections { max-width: 307px !important;}
    #subSection fieldset { margin: 0 !important}
    #kontaktPersoner {
        float: none !important;
        width:auto !important;
    }
    #kontaktMaps {
        float: none !important;
        text-align: center !important;
        width: 99%;
        border: 0 !important;
        height: 260px !important
    }
   .img-popup-link img { width: 120px !important }
    .kontaktGoogleMap { width: 260px !important; height: 260px !important}
    #footerInner { width: 290px !important}
    .footerContact {float:none !important; border: 0 !important }
    .footerShare { float:none !important; display:block !important; padding-top: 40px }
    .footerMenu { display:none !important}
}

@media screen and (min-width: 601px) and  (max-width: 949px) {
    .topNavigationMenuButton { display:none !important; }
    .topNavigation li {
        height: 40px !important;
        line-height:40px !important;
    }
    .topNavigationMenuButton { display: none; }
    .topNavigation li a {
         font-size: 14px !important;
    }
    #presentation { display:none !important}
    #logo { display: none !important }
    #logosmall { display: block !important }
    #logosmall img { width: 450px !important; margin-top: 100px;}
    #startContainer { max-width: 800px !important}
    #startBoxContainer { display:none !important}
    .startBox { 
        width: 270px !important;
        margin-right: 16px !important;
    }
    #subSections { max-width: 90% !important; }
    #subSection fieldset { margin: 0 !important}
    #kontaktPersoner {
        float: none !important;
        width:auto !important;
    }
    #kontaktMaps {
        float: none !important;
        text-align: center !important;
        width: 99%;
        border: 0 !important;
        height: 260px !important
    }
   .img-popup-link img { width: 120px !important }
    .kontaktGoogleMap { width: 260px !important; height: 260px !important}
    #footerInner { width: 290px !important}
    .footerContact {float:none !important; border: 0 !important }
    .footerShare { float:none !important; display:block !important; padding-top: 40px }
    .footerMenu { display:none !important}       
}


@media screen and (min-width: 950px) and (max-width: 1065px) {
    .topNavigationMenuButton { display:none !important; }
    #naviWrap { 
        top: 530px !important; 
        position: absolute !important;
    }
    .topNavigation li a { 
        font-size: 14px !important;
    }
     .topNavigationMenuButton { display: none; }
    #presentation { min-height:590px !important }
    #logo { position: absolute !important; }
    #startContainer { max-width: 800px !important}
    #startBoxContainer { max-width: 925px !important}
    .startBox { 
        width: 270px !important;
        margin-right: 16px !important;
    }
    #subSections { max-width: 915px !important}
}


@media screen and (min-width: 1066px) and (max-width: 1664px) {
    #naviWrap { 
        top: 640px !important; 
        position: absolute !important;
    }
    #logo { position: absolute !important; }
    .topNavigationMenuButton { display: none !important; }
}

/* fs*/
@media screen and (min-width: 1665px) {
    .topNavigationMenuButton { display: none !important; }
}



/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */