@import url(https://fonts.googleapis.com/css?family=Roboto);
@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto_light_macroman/Roboto-Light-webfont.eot');
    src: url('../fonts/roboto_light_macroman/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto_light_macroman/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/roboto_light_macroman/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/roboto_light_macroman/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
html, body{
    min-height: 100%;
}
html {
  overflow-y: scroll;/*Scrollhjulet förskjuter nu inte något GH*/
}
*{
    font-family: robotolight, roboto, sans-serif;
    box-sizing: border-box;
}
.wrapper{
    width: 100%;
    height: 100%;
}
.load{
	display: none;
}
/*///////////////////////////////header GH*/
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    padding-left: 0;
    padding-right: 0;
}
.header{
    display: block;
    height: 100px;
    padding: 0;
    margin: 0;
    background: rgba(255,255,255,1);
    position: relative;
    float: left;
}
li{
    padding: 0;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    float: right;
    display: block;
    background: rgba(255,255,255,1);
}
li a{
    color: rgba(0,0,0,1);
    background: rgba(255,255,255,1);
    display:block;
    height: 100px;
    text-decoration: none;
    float: right;
    text-align: center;
    padding-top: 35px;
    z-index: 10;
    clear: none;
    box-sizing: border-box;
    min-width: 100px;
    width: 100%;
    -webkit-transition: all 0.3s cubic-bezier(.83, .67, .15, .37);
    -moz-transition: all 0.3s cubic-bezier(.83, .67, .15, .37);
    -o-transition: all 0.3s cubic-bezier(.83, .67, .15, .37);
    transition: all 0.3s cubic-bezier(.83, .67, .15, .37);
}
li a:hover{
	background: rgba(0,0,0,0.7);
    color: rgba(255,255,255,1);
}
li#current a{
    background: rgba(0,0,0,0.7);
    color: rgba(255,255,255,1);
}

.nav{
    display: block;
    z-index: 10;
    float: right;
    clear: none;
}
.hamburgare{
    float:right;
    position: relative;
    top:0;
    right:0;
    height: 50px;
	width: 50px;
    right: 20px;
}
.menu{
    display:none;
}
.headersection{
    width: 100%;
    position:fixed;
    z-index: 10;
    background: rgba(255,255,255,1);
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
}
/*class för att ta bort padding och eller padding och margin GH*/
.noextra{
    padding: 0;
    margin: 0;
}
/*Index/Hem     GH*/
#body1{
    background-image: url(../img/index-16-9.jpg);
    background-attachment:fixed;
    background-size: 100% 100%;
    z-index: 0;
    height: 100%;
}
#section1{
    background: rgba(255,255,255,0.9);
    z-index: 5;
    margin-bottom: 50px;
    position: relative;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
}
.h1{
    font-size: 2.25em;
    color: rgba(0,0,0,1);
    text-align: left;
    font-weight: 100;
}
.paragraph/*används inte bara i index GH*/{
    font-size: 1.25em;
    font-weight: 100;
    text-align: left;
    /*width: 50%; Tog bort, gör med unsemantic istället GH*/
    margin: 0px 0px 10px 10px;
}
.padding/*används inte bara i index GH*/{
    padding: 30px 0px 30px 58px;/*första kanten på headern är 58px från vänster sida, vill aligna text med den *GH*/
    box-sizing: border-box;
}
#knappar{
    opacity: 0;
    margin: 0 0 50px 0;
    height: 200px;
    float:left;
}
#knapp1{
    background-image: url(../img/bildspel/sortiment.jpg);
}
#knapp2{
    background-image: url(../img/bildspel/kontakt.jpg);
}
#knapp3{
    background-image: url(../img/bildspel/om_oss.jpg);
}
#knapp4{
    background-image: url(../img/bildspel/policy.jpg);
}
.bildknapp{
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    align-content: center;
    z-index: -1;
}
.knapp{-webkit-text-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -moz-text-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -o-text-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    display: block;
    background-color: rgba(255,255,255,0.5);
    color: rgba(0,0,0,1);
    width: 80%;
    text-decoration: none;
    border:2px rgba(0,0,0,1) solid;
    border-radius: 5px;
    margin:auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 50px;
    font-weight: 600;
    font-size: 1.5em;
    vertical-align: middle;
    z-index: 0;
}
.knapp:hover{
    background-color: rgba(0,0,0,0.9);
    color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.9);
}

.bildspel{
    overflow: hidden;/*16:9 aspect ratio baserat på grid-50. GH*/
    max-width: 640px;
    line-height: 1em;
}
.bilder{
    display: block;
    width: 6000px;
    height: 360px;
    margin: 0;
    padding: 0;
}
.bild{
    float:left;
    list-style-type: none;
    width: 640px;
    height: 360px;
    z-index: 4;
}
.nuvarande{
    margin-bottom: 20px;
    position: absolute;
    bottom: 20px;
    margin-left:20px;
    list-style: none;
    display: block;
}
.boll{
    height: 20px;
    width: 20px;
    background: rgba(0,0,0,0.7);
    border-radius: 5px;
    display: block;
    float: left;
}
.boll:hover{
    background: rgba(255,255,255,1);
}
li.current.boll{
    background:rgba(255,255,255,1)
}


/*////////Footer GH*/
.footer{
    background: rgba(255,255,255,1);
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    height: 50px;
    position: fixed;
    bottom: 0;
    z-index: 10;
}
.h3{
    font-weight: 100;
    color: rgba(0,0,0,1);
    font-size: 1em;
    text-align: center;
}
/*Sortiment GH*/
#body2{
    background-image: url(../img/sortiment.jpg);
    background-attachment: fixed;
    background-size: cover;
    z-index: 0;
}
.center/*centrerar text även vertikalt om förälder har vertical-align:middle; används inte bara i sortiment GH*/{
    text-align: center;
    line-height: 1em;
}
.sortimentcat/*sortimentcategory*/{
    font-weight: 100;
    font-size: 1.75em;
    color: rgba(0,0,0,1);
}
.sortimentsubcat/*sortimentsubcategory*/{
    font-weight: 100;
    font-size: 1.5em;
    color: rgba(0,0,0,0.7);
}
.sortimentcontainer{
    background: rgba(255,255,255,0.9);
    min-height: 200px;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    text-align: center;
    padding-top: 50px;
    box-sizing: border-box;
    z-index: 5;
}
.topsort{
    background: rgba(255,255,255,0.9);
    min-height: 200px;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    text-align: center;
    padding-top: 50px;
    box-sizing: border-box;
    margin-top: 150px;
    margin-bottom: 50px;
    z-index: 5;
}
/*Kontakt GH*/
#body3{
    background: url(../img/kontakt.jpg);
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    min-height: 800px/*så att det minst blir 100px över och under innehållet GH*/;
    z-index: 0;
}
.contactcontainer{
    background: rgba(255,255,255,0.9);
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    z-index: 5;
    position: relative;
    display:block;
}
.h2{
    font-weight: 100;
    color: rgba(0,0,0,1);
    font-size: 1.5em;
    text-align: left;
}
.kontaktp/*kontaktparagraftext*/{
        font-weight: 100;
    color: rgba(0,0,0,1);
    font-size: 1.5em;
    text-align: center;
}
/*Css för om_oss.html GH*/
#body4{
    background: url(../img/om_oss.jpg);
    height: 100%;
    min-height: 980px/*så att det minst blir 100px över och 100px under innehållet GH*/;
    background-attachment: fixed;
    background-size: cover;
    z-index: 0;
}
.omossp/*om oss paragraph GH*/{
    font-size: 1.25em;
    color: rgba(0,0,0,1);
    font-weight: 100;
}
.container/*används inte bara i om_oss*/{
    background: rgba(255,255,255,0.9);
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    z-index: 5;
    position: relative;
    display:block;
}
/*css för policy.html GH*/
#body5{
    background: url(../img/policy.jpg);
    height: 100%;
    min-height: 816px/*så att det minst blir 100 pixlar över och under innehållet GH*/;
    background-attachment: fixed;
    background-size: cover;
    z-index: 0;
}
.mail{
    text-decoration:none;
}

/*MEDIA QUERIES GH*/
@media screen and (max-width: 1024px){
    .header,.headerimg{
      height: 50px;
    }
	/*Under ser vi några ändringar i font-size för att förbättra mobil läslighet GH*/
	.h1{
		font-size: 2.5em;
	}
	.paragraph, li a{
		font-size: 1.5em;
	}
	.sortimentcat{
    	font-size: 2em;
	}
	.sortimentsubcat{
    	font-size: 1.75em;
	}
	.kontakt{
		margin-bottom: 20px;
	}
	.padding{
		padding: 30px 10px 30px 10px;
	}
	li a{
		height: 50px;
		padding-top: 10px;
		box-sizing: border-box;
	}
}
@media screen and (min-width: 1025px){
    .menu{
        display: block;
    }
	.sortimentcontainer{
			margin-bottom: 50px;
		}
}