@font-face {
  font-family: 'AkkRg';
  src: url('typo/AkkRg_Pro_1.otf');
}


*{padding: 0;margin: 0;}

html,body{width: 100%;}

body{
font-family: 'AkkRg', sans-serif;
background-color: rgba(0,0,0,0.1);
}

.initWrap {width: 100%;margin:0 auto;display:table;max-width: 2000px;}

.transFlex {-o-transition: all .2s;-ms-transition: all .2s;-moz-transition: all .2s;-webkit-transition: all .2s;transition: all .2s;}
a, .trans {-o-transition: all .3s;-ms-transition: all .3s;-moz-transition: all .3s;-webkit-transition: all .3s;transition: all .3s;}

.mTrans {
-webkit-transition: all 1000ms cubic-bezier(0.175, 0.885, 0.320, 1); 
-webkit-transition: all 1000ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
   -moz-transition: all 1000ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
     -o-transition: all 1000ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
        transition: all 1000ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

a{color:inherit; cursor: pointer; text-decoration: none;opacity: 1;}
a:hover{}

.init a {text-decoration: underline;}

input, a:hover, a:active, a:focus, input, *:focus {outline: medium none;}

img,video{width: 100%;height: auto;float: left;}


h1 {font-size: 37.5px;line-height: 0.95;}
h2 {font-size: 40px;line-height: 1;}
h3 {font-size: 25px;text-transform: uppercase;letter-spacing: 0.3em;}
h4 {font-size: 16px;text-transform: uppercase;letter-spacing: 0.3em;font-weight: bold;}
p {
    font-size: 16px;
    line-height: 25px;
}

h1,h2,h3,h4,p{margin:0 0 25px;padding: 0 25px;}
h1,h2{font-family: 'Chakra Petch', sans-serif;font-weight: bold;}
nav a {font-family: 'Chakra Petch', sans-serif;}
strong{font-weight:bold;}
.ingress{font-weight:bold;}
p strong {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}
p:last-child {margin: 0;}

.nomarg,.last{margin: 0 !important;}

ul {height: auto;list-style: outside none none;width: 100%;margin:0;}
li {box-sizing: border-box;}

section,footer{z-index: 2;background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;float: left;width: 100%;position: relative;box-sizing: border-box;}
.bgCover{background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
.column{float: left;}.c120 {width: 120%;}.c110 {width: 110%;}.c100{width: 100%;}.c90{width: 90%;}.c80{width: 80%;}.c70{width: 70%;}.c60{width: 60%;}.c50{width: 50%;}.c40{width: 40%;}.c33{width: 33.333%;}.c30{width: 30%;}.c25{width: 25%;}.c20{width: 20%;}.c10{width: 10%;}.c0{width: 0%;}

.columnTable{display: table;width: 100%;}
.columnRow{display: table-row;}
.columnCell {display: table-cell;}
.citatAlign {vertical-align: middle;}
.AlignTop{vertical-align: top;}
.AlignBottom{vertical-align: bottom;}

.AlignVert{display: table;margin: 0 auto;width: 100%;height: 100%;}
.tableCell {display: table-cell;vertical-align: middle;}

.full {height: 100vh;}
.heightNotFull {height: calc(100% - 100px);}

.bgBlue {background-color: #083492;}
.textBlue {color: #083492;}
.bgGrey {background-color: #d4d4d4;}
.textGrey {color: #d4d4d4;}
.bgBlack {background-color: #000000;}
.textBlack {color: #000000;}
.bgWhite {background-color: #ffffff;}
.textWhite {color: #ffffff;}

.p10r{padding-right:10%;box-sizing: border-box;}
.p20r{padding-right:20%;box-sizing: border-box;}
.p10l{padding-left:10%;box-sizing: border-box;}
.p10t{padding-top:10%;box-sizing: border-box;}
.p30t{padding-top:30%;box-sizing: border-box;}
.p10b{padding-bottom:10%;box-sizing: border-box;}
.p20b{padding-bottom:20%;box-sizing: border-box;}
 /* ====================================================================================================================
 * CONTENT
 * ====================================================================================================================*/

.maxNmargin {width: 100%;float: left;padding: 0 10%;box-sizing: border-box;}
.noMax {width: 100%;float: left;padding: 0 10%;box-sizing: border-box;}

header {
    width: 100%;
    height: 200px;
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
}
.mainLogo {
    width: auto;
    padding: 0 0 0 5%;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}
.mainLogo img {width: auto;height: 100%;}

.mainNav {
    width: auto;
    float: right;
    padding: 0 5% 0 0;
    height: 200px;
    display: table;
}

.mainNav ul {display: table-cell;vertical-align: middle;}

.mainNav ul li {float: left;margin: 0 25px;font-size: 13px;}
.mainNav ul li a {
    border-bottom: 1px solid rgba(0,0,0,0);
    padding: 0 0 3px;
}
.mainNav ul li.active a {
    border-bottom: 1px solid rgba(0,0,0,1);
}

.introImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    float: left;
    box-sizing: border-box;
}

.introImg span {
	position: absolute;
	top: 50%;
	left: 50%;
    display: table;
      -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.hoverContent {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 20px;
 opacity: 0;
}
.hCinside{width: 100%;height: 100%;display: table;background-size: cover;background-repeat: no-repeat;background-position: center center;}
.introImg span:nth-child(6) .hoverContent .hCinside{background-image: url("img/front/losningar_intro.jpg");}
.introImg span:nth-child(7) .hoverContent .hCinside{background-image: url("img/front/material_intro.jpg");}
.introImg span:nth-child(8) .hoverContent .hCinside{background-image: url("img/front/projekt_intro.jpg");}


.hCinside a {
     vertical-align: middle;
     display: table-cell; 
         background-color: rgba(0,0,0,0.6);
         color: white;
    }

.introImg span:hover .hoverContent{opacity: 1;}

.introImg span:nth-child(1){
    margin: -11% 0 0 -17.5%;
    z-index: 1;
    width: 25%;
}
.introImg span:nth-child(2){width: 36%;z-index: 5;}
.introImg span:nth-child(3){width: 36%;z-index: 5;}
.introImg span:nth-child(4){width: 36%;z-index: 5;}
.introImg span:nth-child(5){width: 36%;z-index: 5;}

.introImg span:nth-child(6){
    margin: 7.93% 0 0 25%;
    z-index: 1;
    width: 16%;
}
.introImg span:nth-child(7){
    margin: -8.3% 0 0 16.44%;
    z-index: 3;
    width: 25%;
}
.introImg span:nth-child(8) {
    margin: 10.65% 0 0 3.5%;
    z-index: 5;
    width: 15%;
}
.hoverContent{}

section {margin: 0 0 10%;}

#intro {margin: 0; background-image: url(img/concrete.jpg);}
#omoss {margin: 0;padding: 10% 0;}
#vadvigor {}
#seperator {}
#projekt {}
#kontakt{padding:100px 0;background-image: url(img/concrete.jpg);}

.blockText {
    width: 100%;
    float: left;
}

.varaProjekt {width: 100%;float: left;}
.varaProjekt li {width: 50%;float: left;padding: 10px;}
.varaProjekt li h4 {padding: 15px 0;display: inline-block;font-family: 'Chakra Petch', sans-serif;}

.footerLogo {

}
.footerLogo img {
height: 25px;width: auto;
}
.kontaktUppg ul{
	width: auto;
	margin: 0 auto;
	display: table;
	float: none;
}
.kontaktUppg ul li {
    float: left;
    width: auto;
    padding: 0 10px;
}
.kontaktUppg p strong{
    margin: 0 0 15px;display: block;
}
.kontaktUppg p {
    margin: 0 0 5px;
}
.socialMedia ul{
	float: right;
	width: auto;
}
.socialMedia ul li{
	    float: left;
    padding: 0 5px;
}
.socialMedia ul li img {
    height: 30px;
    width: auto;
    padding: 0 25px;
}
#projektet {
    padding: 250px 0 0;
}
#projektet h1 {
    position: absolute;
    font-size: 80px;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    box-sizing: border-box;
    margin: -45px 0 0 0;
}

.contentTextDiverse {
    padding: 30% 20%;
    box-sizing: border-box;
}
.closeImgs {
    position: relative;
}
.closeImgs span{
    position: absolute;height: 100%;
}
.closeImgs span:first-child{left: 0;width: 70%;}
.closeImgs span:last-child{right: 0;width: 30%;}

#andradiverse .contentTextDiverse {
    padding: 0 20% 60%;
}

#andradiverse .closeImgs span:first-child{left: 0;width: 30%;}
#andradiverse .closeImgs span:last-child{right: 0;width: 70%;}

#projektNav {
    width: 100%;
    float: left;
    padding: 0 20%;
    box-sizing: border-box;
    margin: 0 0 100px;
}
#projektNav ul {
    width: auto;
    display: table;
    margin: 0 auto;
    float: none;
}
#projektNav ul li {float: left;margin: 0 10px;color: #d4d4d4;}
#projektNav ul li.active a{font-weight: bold;color: black;}
 /* ====================================================================================================================
 * Animatione
 * ====================================================================================================================*/


@keyframes fadein {
    from { visibility: visible;}
    to   {visibility: hidden; }
}
@-moz-keyframes fadein {
    from { visibility: visible;}
    to   {visibility: hidden; }
}
@-webkit-keyframes fadein {
    from { visibility: visible;}
    to   {visibility: hidden; }
}
@-ms-keyframes fadein {
    from { visibility: visible;}
    to   {visibility: hidden; }
}
@-o-keyframes fadein {
    from { visibility: visible;}
    to   {visibility: hidden; }
}

.reveal1 {
    -webkit-animation: fadein 500ms 0ms forwards;
       -moz-animation: fadein 500ms 0ms forwards;
        -ms-animation: fadein 500ms 0ms forwards;
         -o-animation: fadein 500ms 0ms forwards;
            animation: fadein 500ms 0ms forwards;
          visibility: hidden;
}
.reveal2 {
    -webkit-animation: fadein 500ms 500ms forwards;
       -moz-animation: fadein 500ms 500ms forwards;
        -ms-animation: fadein 500ms 500ms forwards;
         -o-animation: fadein 500ms 500ms forwards;
            animation: fadein 500ms 500ms forwards;
           visibility: hidden;
}
.reveal3 {
    -webkit-animation: fadein 500ms 1000ms forwards;
       -moz-animation: fadein 500ms 1000ms forwards;
        -ms-animation: fadein 500ms 1000ms forwards;
         -o-animation: fadein 500ms 1000ms forwards;
            animation: fadein 500ms 1000ms forwards;
            visibility: hidden;
}


@keyframes fadeinLast {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadeinLast {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadeinLast {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-ms-keyframes fadeinLast {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadeinLast {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.reveal4 {
    -webkit-animation: fadeinLast 500ms 1000ms forwards;
       -moz-animation: fadeinLast 500ms 1000ms forwards;
        -ms-animation: fadeinLast 500ms 1000ms forwards;
         -o-animation: fadeinLast 500ms 1000ms forwards;
            animation: fadeinLast 500ms 1000ms forwards;
            opacity: 0;
}


@keyframes revealAnim {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes revealAnim {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes revealAnim {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes revealAnim {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes revealAnim {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.revealText {
    -webkit-animation: fadeinLast 1s 1s forwards;
       -moz-animation: fadeinLast 1s 1s forwards;
        -ms-animation: fadeinLast 1s 1s forwards;
         -o-animation: fadeinLast 1s 1s forwards;
            animation: fadeinLast 1s 1s forwards;
            opacity: 0;
}

.revealFirst {
    -webkit-animation: revealAnim 1s 1.3s forwards;
       -moz-animation: revealAnim 1s 1.3s forwards;
        -ms-animation: revealAnim 1s 1.3s forwards;
         -o-animation: revealAnim 1s 1.3s forwards;
            animation: revealAnim 1s 1.3s forwards;
           opacity: 0;
}
.revealSecond {
    -webkit-animation: revealAnim 1s 1.5s forwards;
       -moz-animation: revealAnim 1s 1.5s forwards;
        -ms-animation: revealAnim 1s 1.5s forwards;
         -o-animation: revealAnim 1s 1.5s forwards;
            animation: revealAnim 1s 1.5s forwards;
           opacity: 0;
}
.revealThird {
    -webkit-animation: revealAnim 1s 2s forwards;
       -moz-animation: revealAnim 1s 2s forwards;
        -ms-animation: revealAnim 1s 2s forwards;
         -o-animation: revealAnim 1s 2s forwards;
            animation: revealAnim 1s 2s forwards;
           opacity: 0;
}
.revealFourth {
    -webkit-animation: revealAnim 1s 2.5s forwards;
       -moz-animation: revealAnim 1s 2.5s forwards;
        -ms-animation: revealAnim 1s 2.5s forwards;
         -o-animation: revealAnim 1s 2.5s forwards;
            animation: revealAnim 1s 2.5s forwards;
           opacity: 0;
}

 /* ====================================================================================================================
 * RESPONSIV
 * ====================================================================================================================*/
@media only screen and (min-width: 1101px) and (max-width: 1300px) {

}
@media screen and (max-width: 1500px) {
#projektNav ul li {width: 100%;text-align:center;}
}
@media screen and (max-width: 1111px) {
h2 {font-size: 25px;}
.p10l {padding-left: 0;}
.p10t {padding-top: 0;}
.p20r {padding-right: 0;}
.p10r {padding-right: 0;}
.p30t {padding-top: 0;}
.c20,.c25,.c33,.c40,.c50,.c50hh,.c60 {width: 100%;}
#intro {margin: 0 0 10%;}
.noMax {padding: 0 10%;}
.contentDifferentBlocks .column,.contentTextOnly {padding: 0 0 30%;width: 100%;float: left;}
#omprojektet .c50 {width: 100%;}
#projektet h1 {font-size: 40px;margin:-22px 0 0 0;}
#andradiverse .contentTextDiverse {padding: 0 20% 20%;}
#andradiverse .columnCell {float: left;}
.varaProjekt li {width: 100%;}
#projektNav {padding: 0 10%;}
.footerLogo img {height: 25px;width: auto;margin: 0 auto;display: table;float: none;}
.socialMedia ul {float: none;width: auto;margin: 0 auto;display: table;}
.hoverContent {font-size: 14px;}
#intro {background-image: url(img/front/ref3.jpg);background-position: bottom left;}
span.revealFirst,span.revealThird,span.revealFourth {
    display: none;
}
.introImg span:nth-child(1) {
    margin: -15% 0 0 -15%;
    z-index: 1;
    width: 50%;
}
.introImg span:nth-child(2){width: 80%;}
.introImg span:nth-child(3){width: 80%;}
.introImg span:nth-child(4){width: 80%;}
.introImg span:nth-child(5){width: 80%;}
}

@media screen and (max-width: 700px) {
.kontaktUppg ul li {
    float: left;
    width: 100%;
    padding: 0 10px;
    text-align: center;
    margin: 0 0 40px;
}
}