/*stilmall för body*/
body{width:100%;
        background-color:#ffffff;
        font-family: 'Raleway',sans-serif;
        margin: 0px;
        }

/*Stilmall för rubriker i bodyn*/
h1{
width:100%;
font: 700 3.5vw 'Raleway',sans-serif;
text-align:center;
}

h2{
width:100%;
font: 700 2vw 'Raleway',sans-serif;
text-align:center;
line-height:1.78vw;
}

h3{
width:100%;
font:700 1.44vw 'Raleway',sans-serif;
margin-top:2%;
text-align:center;
line-height:1.6vw;
}

/*Stilmall för brödtext i bodyn*/
p{
font:400 1.2vw 'Open-Sans', sans-serif;
width:100%;
line-height:1.6vw;

}

/*Stilmall för länkar i bodyn*/
a{text-decoration: none;
  color:#ffffff;}
a:hover{
  color:#000000;
}


/*Stilmall för huvudmenyn*/
.navigation  {
    width: 100%;
    background-color: #ccd2ca;
    transition: ease .5s;
    transition: all 0.4s ease-in-out;
    z-index: 99;
}

.navigation-pin{
   position: fixed;
   top: 0;
}
.navigation a {
    white-space:nowrap;
    text-decoration: none;
    font:700 1.2vw 'Raleway',sans-serif;
    color: white;
    padding-left:2%; 
    overflow: hidden;
}

.link1 {
   float:right;
    margin-right: 3%;
    padding-top: 2.75%;
}
.link2 {
   float:right;
    padding-top: 2.75%;
}

.linkstartpic {
   align-content:center;
    margin-right: 5%;
    margin-left:43.5%;
    color: #ffffff;
    font:400 1.1vw 'Yeseva one',cursive;
    background:#99989E;
    padding-top: 1.75%;
    padding-left:1%;
    padding-right:1%;
    padding-bottom: 1.75%;
    border-radius:2px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
.dropdown-content {
  display: none;
  overflow: hidden;
  position: absolute;
  min-height:100%;
  min-width:17%;
  padding-top: 2.5%;
  z-index: 99;

}
  .dropdown-content a {
  float: none;
  color: #ffffff;
  padding-top: 5%;
  padding-bottom: 8%;
  padding-left: 5%;
  font:1.1vw 'Lato',sans-serif;
  background-color: #ccd2ca;
  padding-right: 5%;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  color:#000000;
}


.link3:hover .dropdown-content {
    display: block;
}

.link1:hover {
   color:#000000;
}

.link2:hover {
   color:#000000;
}


.linkstartpic:hover {
   color:#ffffff;
   background:#666569;
}

.navigation .icon {
  display: none;
}
/*Stilmall för logotyp högst upp på varje sida*/
.logo-container{
   display:inline-block;
   margin-left:44%;
   margin-top:0.8%;
   margin-bottom:0.5%;
   width: 12%;
   height: 0;
   position:relative;
   padding-top:5.5760303%;
}

.svg-logo{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

#active{
font: bolder 115% 'Lato',sans-serif;
}

.button_back {
  background-color:transparent;
  font:600 1.25vw 'Raleway',sans-serif;
  border: none;
  color: #a6a6a6;
  margin-left: 8%;
  margin-top: 5%;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  outline: none;
}
.button_back:hover,.button-back:focus {
  color:#000000;
}
.button-back:active{
  color:#000000;
}
/*Stilmall för startsida*/
#start {
Display:table;/*Skapar en tabell av innehållet i CSS-koden för att tvinga kolumnerna till att bli lika stora oavsett mängd av innehåll*/
height; 100%;
width:100%;
 margin-top -10px;

}
.startpic{
float:right;
position:relative;
width:100%;
height:0;
padding-top:50%;
margin-bottom:1%;  
}

.startpic2{
float:right;
position:absolute;
width: 100%;
padding-top:13%;
min-height:50%;
background:transparent;
    
}

.mug{
width:10%;
height:auto;
padding-left:45%;
}
#headline{
font: 400 4.3vw 'Yeseva one',cursive;
color:#ffffff;
display:block;
text-align:center;
word-wrap:break-word;
width: 100%;
}
#subline {
display:none;
font: 400 3.3vw 'Yeseva one',cursive;
display:block;
text-align:center;
word-wrap:break-word;
width: 100%;
margin-bottom: 7%;
color:#ffffff;
}

.downarrow {
  display:none;
  /*float:right;
  text-decoration: none;
  cursor: pointer;
  border: solid #ffffff;
  border-width: 0 0.18vw 0.18vw 0;
  display: inline-block;
  padding: 0.69vw;
  margin-right:49%;
  margin-top:7%;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  animation:bounce 2s infinite;*/
}

@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0) rotate(45deg);
		transform: translateY(0) rotate(45deg);
	}

	40% {
		-webkit-transform: translateY(-10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}

	80% {
		-webkit-transform: translateY(-10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}
}

.downarrow:hover {
border: solid #ffffff;
border-width: 0 0.28vw 0.28vw 0;
animation: bounce 1s;
}

.anchor {
float:right;
width:100%;
height: auto;
background-color: rgba(84,172,201,0.);
margin-top: 33%;
}

/*Stilmall tjänsteblocket på startsidan*/
#start-services {
color:#000000;
font-size:1.2vw;
padding-top:1%;
padding-left:1%;
margin-top:0;
text-align:left;
}
#container1{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
Display:block;;/*Skapar en tabell av innehållet i CSS-koden för att tvinga kolumnerna till att bli lika stora oavsett mängd av innehåll*/
height:100%;
max-width: 90%;
margin-left:5%;
margin-right:5%;
background-color: #ffffff;
}
              
/*Stylesheet för "om oss" sidan*/
#startabout {
Display:table;/*Skapar en tabell av innehållet i CSS-koden för att tvinga kolumnerna till att bli lika stora oavsett mängd av innehåll*/
height; 100%;
width:100%;
min-height:100vh;
margin-top -20px;
margin-bottom: -5px;
}
.startpicabout{
display:inline-block;
float:right;
width:30%;
height:100%;
margin-right: 10%;
}
.transboxabout{
display:inline-block;
float:right;
width:30%;
margin-right: 15%;
padding-top:13%;
min-height:57vw;
background-color: rgba(255, 0, 255, 0);
}

.startpic2about{
display:inline-block;
width:50%;
margin-left:25%;
margin-top:10%;
background:transparent;
 -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#headlineabout{
font: 400 4.3vw 'Yeseva one',cursive;
display:block;
text-align:center;
word-wrap:break-word;
width: 100%;
margin-bottom:4%;
margin-top:none;
color:#232323;
}
#sublineabout {
display:block;
text-align:left;
word-wrap:break-word;
width: 80%;
color:#232323;
padding-left: 7%;
}
#textabout{
padding-left: 32%;
padding-right: 7%;
}
.buttonabout {
  background-color: #54acc9; /* Green */
  border: none;
  color: white;
  padding: 2% 5%;
  margin-left: 32%;
  margin-top: 5%;
  margin-bottom: 10%;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.25vw;
  outline: none;
  -webkit-transition-duration: 0.3s; /* Safari */
  transition-duration: 0.3s;
}
.buttonabout:hover {
  background-color:#3da1c2;
  box-shadow:0.49vw 0.49vw 0 0 rgba(0,0,0,0.24);
}

/*Kontaktsidan*/
.startpiccontact{
display:inline-block;
float:right;
width:24%;
}
.transboxcontact{
display:inline-block;
float:right;
width:30%;
margin-right: 10%;
padding-top:13%;
min-height:57vw;
background-color: rgba(255, 0, 255, 0);
}
.startpic2contact{
display:inline-block;
float:left;
width:24%;
height:100%;
}
.transbox2contact{
display:inline-block;
float:left;
width:30%;
margin-right: 10%;
padding-top:13%;
min-height:57vw;
background-color: rgba(255, 0, 255, 0);
}
/*servicesidorna*/
#headline_services{
width:100%;
font: 900 3.1vw 'Raleway',sans-serif;
text-align:center;
display:block;
text-align:left;
word-wrap:break-word;
width: 70%;
color:#232323;
padding-left: 7%;
}

footer p{
   text-align:center;
    margin-block-end:0;
}

/*FAQ page*/
.collapsible {
  background-color: #ccd2ca;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 50%;
  margin-left:25%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.5vw;
  border-radius: 6px;
}

.active, .collapsible:hover {
  background-color: #555;
}
.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}
.content {
  padding: 0 1%;
  max-height: 0;
  width:48%;
  margin-left:25%;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #ffffff;
}
#categoryabout{
  text-align: left;
  margin-left:25%;
  font-size:1.5vw;
}

.startpic2faq{
display:inline-block;
float:right;
width:100%;
min-height:50%;
padding-bottom:5%;
margin-top:8%;
background:transparent;
 -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.button_back2 {
  background-color:transparent;
  font:600 1.25vw 'Raleway',sans-serif;
  border: none;
  color: #a6a6a6;
  margin-left: 25%;
  margin-top: 3%;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  outline: none;
  padding:none;
}

.button_back2:hover,.button-back:focus {
  color:#000000;
}
.button-back2:active{
  color:#000000;
}

/*About page*/
.lisa{
width:20%;
float: right;
margin-right:25%;
padding-left:1%;
padding-bottom:4%;
}

#abouttext {
width:50%;
margin-left:25%;
padding-bottom:5%;
}

/*webshop*/
#shopwidget{
margin-top:6%;
}


/* header */

.header {
  background-color: #ccd2ca;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  margin-bottom:20%;
  z-index: 999;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #ccd2ca;
}

.header li a {
  display: block;
  margin-top:4%;
  margin-bottom:4%;
  text-align:center;
  font: 700 8vw 'Raleway',sans-serif;
  text-decoration: none;
}


.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;

}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 7vw 4vw; 
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #ffffff;
  display: block;
  height: 5px;
  position: relative;
  transition: background .2s ease-out;
  width: 10vw;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #ffffff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 12px;
}

.header .menu-icon .navicon:after {
  top: -12px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 285px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 37.5em = 600px */

@media (min-width: 37.5em) {
  .header li {
    float: left;
  }
  .header li a {
    text-align: center;
    font-size:1.2vw;
    padding-right:40px;
    margin-top:0;
    margin-bottom:0;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
    padding-top:3%;
  }
  .header .menu-icon {
    display: none;
  }
}




/*Layout for small screens*/
@media screen and (max-width: 600px) {
h1{
width:100%;
font: 400 8vw;
text-align:center;
}

h2{
width:100%;
font: 400 5vw;
text-align:center;
}
    
p{
font:400 2.2vw 'Open-Sans', sans-serif;
width:100%;
}

.navigation a:not(:first-child) {display: none;}
  .navigation a.icon {
    float: right;
    display: block;
    font-size:8vw;
    padding-right:3%;
    padding-top:3%;
    padding-bottom:3%;
  }
.navigtion.responsive {position: absolute;
    z-index:1000;}
  .navigation.responsive .icon {
    position: absolute;
    font-size:8vw;
    right:0;
    top: 0; 
  }

.navigation.responsive a {
    float: none;
    display: block;
    text-align: center;
    font-size:6vw;
    padding-top:3%;
    padding-bottom:3%;
    padding-left:0;
    z-index:99;
  }


.link1 {
   float:none;
    Width:100%;
    padding-top:none;
}
.link2 {
   float:none;
    width:100%
    padding-top:none;
}
div.ec-cart-widget{
    display:none;
    float:right;
    padding-top:0;
    padding-right:2%;
}
.logo-container{
   display:inline-block;
   margin-left:36%;
   margin-bottom:0.5%;
   width: 28%;
   padding-top:5.0760303%; 
   padding-bottom:7%;
}
#start {
height; 100%;
width:100%;
 margin-top -10px;

}
.startpic{
display:block;
position:relative;
width:95%;
height:0;
padding-right:5%;
padding-top:55vh;
padding-bottom:15%;
}

.startpic2{
display:block;
float:none;
position:absolute;
width: 100%;
padding-top:35%;
background:transparent;
}
    
    .linkstartpic {
    font:400 4.5vw 'Yeseva one',cursive;
    align-content:center;
    margin-right: 5%;
    margin-left:25%;
    margin-top:15%;
    margin-bottom:10%;
    padding-top: 4.75%;
    padding-left:4%;
    padding-right:4%;
    padding-bottom: 4.75%;
    border-radius:2px;
    background:#807E83;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
.linkstartpic:hover {
   color:#ffffff;
   background:#666569;
}

.mug{
width:24%;
height:auto;
padding-left:40%;
margin-bottom:15%;
}
#headline{
width:100%;
font: 400 11vw 'Yeseva one',cursive;
}
#subline {
display:none;
}
#container1{
display:block;
max-width:90%;
margin-left:5%;
margin-right:0;
}
.downarrow {
display:none;
}
#start-services {
font-size:3vw;
}
#headlineabout{
display:block;
text-align:center;
word-wrap:break-word;
width: 100%;
margin-top:3%;
margin-bottom:4%;
color:#232323;
padding-left: 0;
}
#startabout {
Display:block;/*Skapar en tabell av innehållet i CSS-koden för att tvinga kolumnerna till att bli lika stora oavsett mängd av innehåll*/
height; 100%;
width:100%;
margin-top -10px;
margin-bottom: -5px;
position:relative;
min-height: 100vh;
padding-bottom:10rem;
}
    
.startpic2about {
width:100%;
height:100%;
margin-left:0;
margin-top:20%;
align-content: center;
}
.button_back{
display:none;
}
    

/*FAQ page*/
#headlineabout{
  font-size:7.5vw;
}
.startpic2faq{
margin-top:20%;
}
#contenttext {
  font-size:3.5vw;
  line-height:normal;
}
.startabout{
  overflow:hidden;
}
.collapsible {
  background-color: #ccd2ca;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 95%;
  margin-left:2.5%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 3.5vw;
  border-radius: 6px;
}

.active, .collapsible:hover {
  background-color: #555;
}
.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}
.content {
  padding: 0 1%;
  max-height: 0;
  width:95%;
  margin-left:2.5%;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #ffffff;
}
#categoryabout{
  text-align: left;
  font-size:3.5vw;
  margin-left:2.5%;
}

.startpic2faq{
display:inline-block;
float:right;
width:100%;
min-height:50%;
padding-bottom:5%;
background:transparent;
 -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.button_back2 {
display:none;
}

/*About page*/
.lisa{
width:40%;
float: right;
margin-right:2.5%;
padding-bottom:4%;
}

#abouttext {
width:95%;
padding-left:2.5%;
margin-left:0;
padding-bottom:5%;
font-size:3vw;
line-height:normal;
}

/*webshop*/
#shopwidget{
margin-top:13%;
}
    

footer p{
   text-align:center;
    height: 2.5rem;
}

  }