/*******
CSS is split in to 3 parts. defaults, Components and Page Specific.

#Defaults
Default styles for Typography, links etc.

#Components
Styles for components. Ex Header, Footer.

#Page Specific
Styles for specific pages. In some cases overwrites Component styles.
******/




/*******
DEFAULTS
********/

p{
  font-family: "Segoe UI Light","Segoe UI","Tahoma","Helvetica","Arial","Verdana","sans-serif";
  font-size: 14px;
  font-weight: 400;
}

h1, h2, h3{
  font-family: "Segoe UI Light","Segoe UI","Tahoma","Helvetica","Arial","Verdana","sans-serif";
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h3{
  font-size: 18px;
  margin: 15px 0;
}

a{
  font-family: "Segoe UI Light","Segoe UI","Tahoma","Helvetica","Arial","Verdana","sans-serif";
  text-decoration: none;
  /*color: #F34C50;*/
  color: black;
  -webkit-font-smoothing: antialiased;
}

a:hover{
  color: #444;
  transition: color .3s ease;
}

.container{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}





/****************
COMPONENTS
*****************/

/*****
HEADER
******/
.header{
  max-width: 800px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 0 20px;
}

.nav{
  margin: 10px 0 5px 0;
  max-width: 800px;
}

.nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav ul li{
  display: inline-block;
  margin: 5px 0 0 5px;
}

.nav a{
  display: block;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  transition: color .3s ease;
}

.nav a:hover{
  color: #479399;
}

.header .nav .active-nav-link{
  text-decoration: underline;
}

@media (max-width: 680px){
  .header .nav{
    text-align: center;
  }

  .header .nav ul li{
    display: block;
  }

  .header .nav ul li a{
    padding: 5px;
  }

  .header img{
    display: block;
    margin: 20px auto;
  }
}


/*****
FOOTER
******/
.line{
  padding: 60px 10px 20px 10px;
}

.line hr{
  max-width: 960px;
}

.bullets .bullet a{
  text-decoration: none;
  text-transform: uppercase;
}

.footer .bullets{
  -webkit-flex-wrap: nowrap; /* Safari 6.1+ */
  flex-wrap: nowrap;
}

.footer .bullets .bullet{
  width: 200px;
}

@media (max-width: 700px) {
  .footer .bullets{
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
  }
}


/******
BULLETS
*******/
.bullets{
  display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* Firefox 19 */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* Chrome */
  display: flex;             /* Opera 12.1, Firefox 20+ */

  -webkit-box-justify-content: center;
  -moz-box-justify-content: center;
  -ms-flexbox-justify-content:center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-flex-wrap: wrap;
  -moz-box-flex-wrap: wrap;
  -ms-flexbox-flex-wrap:wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  margin-bottom: 10px;
}

.bullets .bullet{
  display: block;
  text-align: center;
  width: 250px;
  height: auto;
  margin: 0 30px;
}


/*********
GREEN AREA
**********/
.green-area{
  width: auto;
  height: 300px;
  background-color: #479399;
}

@media (max-width: 619px) {
  .green-area{
    height: 150px;
  }
}





/***************
PAGE SPECIFIC
****************/

/**************
COMPANY-TITLE
***************/
.title{
  padding: 0 10px;
  text-align: center;
  margin-top: 40px;
  font-weight: 400;
  color: #479399;
}

.title span{
  text-transform: uppercase;
}

@media (max-width: 550px) {
  .title{
    font-size: 1.7em;
  }
}

@media (max-width: 470px) {
  .title{
    font-size: 1.3em;
  }
}


/********************
HALLBARHETSFORKLARING
*********************/
.explanation{
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

@media (max-width: 680px){
  .explanation{
    padding: 10px 20px;
  }
}


/************
TEKNIKOMRADEN
*************/
.teknikomraden-container{
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
}

.column{
  display: inline-block;
  max-width: 320px;
  padding: 0 10px;
  vertical-align: top;
}

.column.left{
  text-align: right;
  border-right: 1px solid #CCC;
}

.column.right{
  text-align: left;
  border-left: 1px solid #CCC;
}

.circle-img{
  display: inline-block;
  vertical-align: top;
}

.circle-img img{
  margin: 0 50px;
}

.teknikomraden-container:after{
  content: " ";
  display: block;
  clear: both;
}

.descriptions{
  display: none;
}

@media (max-width: 1200px) {

  .column{
    max-width: 200px;
  }

  .circle-img img{
    width: 350px;
  }

}

@media (max-width: 900px) {

  .teknikomraden-container{
    margin: 0;
    max-width: 900px;
  }

  .descriptions{
    display: block;
    margin-top: 0;
  }

  .circle-img{
    display: block;
    vertical-align: none;
    max-width: 400px;
    padding: 20px;
    margin: 0 auto;
  }

  .circle-img img{
    margin: 0;
    display: block;
    width: 100%;
  }

  .teknikomraden-container .column{
    display: none;
  }

}


/*************
LEVERANSMODELL
**************/
.leveransmodell-container{
  max-width: 1400px;
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
}

.leveransmodell-container:after{
  content: " ";
  display: block;
  clear: both;
}

.leveransmodell-container .column a{
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 5px;
}

.leveransmodell-container .column.right{
  padding-right: 20px;
}

.leveransmodell-container .column.right h2{
  display: none;
}

.leverans-img{
  display: inline-block;
  vertical-align: top;
  max-width: 700px;
  padding: 0 20px;
}

.leverans-img img{
  margin: 0;
  display: block;
  width: 100%;
}

.active-leveransmodell-link{
  text-decoration: underline;
}

@media (max-width: 1305px) {

  .leverans-img{
    max-width: 600px;
  }

}

@media (max-width: 1205px) {
  .leveransmodell-container .column{
    max-width: 200px;
  }
}

@media (max-width: 1085px){
  .leverans-img{
    max-width: 450px;
  }
}

@media (max-width: 950px){

  .leveransmodell-container{
    max-width: 800px;
  }

  .leverans-img{
    display: block;
    max-width: 500px;
    margin-top: 40px;
  }

  .leveransmodell-container .column{
    display: block;
    border: none;
    padding: 0 20px;
    max-width: 500px;
  }

  .leveransmodell-container .column.left{
    display: block;
    text-align: left;
  }

  .leveransmodell-container .column.right{
    display: block;
    margin-top: 40px;
  }

  .leveransmodell-container .column.right h2{
    display: block;
  }

}


/*****
KUNDER
******/
.kunder-header .header{
  position: relative;
}

.satellite{
  position: absolute;
  right: 0px;
  top: -90px;
  bottom: 0;
}

.satellite-mobile{
  display: none;
}

.container .above-earth{
  padding: 40px 0;
}

.container .antenna-small-img{
    display: block;
    margin: 0 auto;
}

.green-area.small{
  height: 40px;
}

.container .under-earth{
  padding: 35px 0 0 0;
}

.container .underground img{
  float: right;
  margin: 30px 0;
}

.container .underground:after{
  content: " ";
  display: block;
  clear: both;
}

.container.centered{
  text-align: center;
}

.container.centered p{
  max-width: 300px;
  margin: 0 auto;
}

@media (max-width: 680px){
  .kunder-header .header .satellite{
    display: none;
  }

  .satellite-mobile{
    display: block;
    width: 50%;
    margin-top: 20px;
  }

  .container .above-earth{
    padding: 0px 0;
  }

  .container p{
    padding: 30px 0;
  }

  .container img{
    display: inline-block;
  }

  .container{
    text-align: center;
  }

  .container .underground img{
    float: none;
  }
}

@media (max-width: 470px) {
  .container .satellite-mobile{
    display: block;
    width: 100%;
  }
}

@media (max-width: 350px) {
  .container img{
    width: 60%;
  }

  .container .underground img{
    width: 100%;
  }
}