@import url('https://fonts.googleapis.com/css?family=Staatliches');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Crete+Round');
@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
@import url('https://fonts.googleapis.com/css?family=Asap');

/* Generated by Glyphter (http://www.glyphter.com) on  Mon Apr 08 2019*/
@font-face {
    font-family: 'glyphs';
    src: url('fonts/glyphs.eot');
    src: url('fonts/glyphs.eot?#iefix') format('embedded-opentype'),
         url('fonts/glyphs.woff') format('woff'),
         url('fonts/glyphs.ttf') format('truetype'),
         url('fonts/glyphs.svg#glyphs') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'glyphs2';
    src: url('fonts/glyphs2.eot');
    src: url('fonts/glyphs2.eot?#iefix') format('embedded-opentype'),
         url('fonts/glyphs2.woff') format('woff'),
         url('fonts/glyphs2.ttf') format('truetype'),
         url('fonts/glyphs2.svg#glyphs') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Glyphter';
    src: url('fonts/Glyphter.eot');
    src: url('fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
         url('fonts/Glyphter.woff') format('woff'),
         url('fonts/Glyphter.ttf') format('truetype'),
         url('fonts/Glyphter.svg#glyphs') format('svg');
    font-weight: normal;
    font-style: normal;
}

.ruler {
  display: none;
  width: 100px;
  height: 100px;
  position: static;
  top:0px;
  left: 0px;
  background-color: black;
}

[class*='icon-']:before{
	display: inline-block;
   font-family: 'glyphs2';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}

.icon {
	    font-family: 'Glyphter';
}

.icon2 {
      font-family: 'Glyphter';
}

.flex {
    display: flex; 
    /* text-align: center; */
     justify-content: center; 
    width: 100%;

    /* margin: 0 auto; */
    grid-area: 5/1/6/8;
}

.icon, .icon2 { font-size: 76px;}

.menuIcons {
  font-size: 20px;
  float: left;
  padding: 20px;
}

h1 {
  margin: 25px 0px 25px 0px;
    font-size: 43px;
}

.mainGrid {
display: grid;
margin: 25px 10px 20px 10px;
/*    border-radius: 20px 20px 0 0;*/
    /* box-shadow: 0 0 19px 6px #ccc6a063; */
    background-color: rgba(255, 255, 255, 0.3607843137254902);
    border-style: solid;
    border-color: #8f9fab;
    border-width: 2px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    overflow: hidden;
}

/*a::before {
	background-color: red;
	width: 10px;
	height: 10px;
	display: block;
	content: '';
}*/

.topLogo {
	z-index: 2;
   	width: 200px;
    top: 85px;
    position: relative;
    margin: 0 auto;

}

.mainMenu {
display: inline-grid;
    grid-column: 1fr 1fr 1fr 1fr;
    grid-row: 2fr;
    box-shadow: 0 0 4px 0px black;
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 21%, rgb(216, 216, 216) 100%);
    color: black;
    overflow: hidden;
    height: 100px;
}
}

a.nav {
    /* color: black; */

    text-shadow: 2px 4px 11px #34362e;
    transition: .2s;
    transition-timing-function: ease-in-out;
  }

a.nav:hover {
     text-shadow: 1px 1px 11px;
    color: white;
    transition: .2s;
    transition-timing-function: ease-in-out;

}

.mainMenu li {
   float: left;
    font-family: 'Asap', "cursive";
    margin: 11px;
    /* border-width: 1px; */
    /* border-style: solid; */
    /* border-color: black; */
    position: relative;
    top: 5px;
    font-size: 20px;
    border-left-style: solid;
    border-left-width: 20px;
    padding: 8px 18px 8px 18px;
    border-color: rgba(0, 0, 0, 0);
    background-image: white;
    background-position-y: 37px;
    background-position-x: -60px;
    background-repeat: no-repeat;
    background-size: 216px 1px;
    transition: .2s;
    border-radius: 4px;
    color: #285679;
    text-shadow: 2px 1px 6px #00000052;
}

.menuDeco {
  display: none;
	    width: 437px;
    float: right;
    top: -50px;
    right: 6px;
       -webkit-filter: grayscale(50%) sepia(0.51) brightness(65%) contrast(200%);
    position: relative;
}

.mainMenu li:hover {
  background-color: #c5c5c5;
    /* background-position-y: 21px; */
    /* background-position-x: -58px; */
    /* background-repeat: no-repeat; */
    /* background-size: 214px 9px; */
    transition: .2s;
    color: white;
    border-left-style: solid;
    border-left-color: #285679;

}

body {
	margin: 20px 40px 40px 40px;
	font-family: 'Asap', "cursive";
}

.spritePlaceholder {
	    width: 200px;
    height: 72px;
    margin: 0 auto;
    /* padding-top: 25px; */
    top: 25px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

#sprite1, #sprite2  {
	top: -1800px;
	width: 200px;
	left: 0px;
	position: relative;
	
}

.spriteAniFwd {
	animation-name: spriteAniFwd;
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-timing-function:steps(1);	
	-webkit-animation-fill-mode: forwards;
}

.spriteAniRew {
	animation-name: spriteAniRew;
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-timing-function:steps(1);	
	-webkit-animation-fill-mode: backwards;

}

.anchor   { 
    position: relative;
    top: -83px;
        z-index: -999;

}

@keyframes spriteAniFwd {
  0%  {top:-648px; opacity: 0}
  10%  {top:-576px; opacity: 0.1}
  20%  {top:-504px; opacity: 0.2}
  30%  {top:-432px; opacity: 0.3}
  40%  {top:-360px; opacity: 0.4}
  50%  {top:-288px; opacity: 0.5}
  60%  {top:-216px; opacity: 0.6}
  70%  {top:-144px; opacity: 0.7}
  80%  {top:-72px; opacity: 0.8}
  90%  {top:0px; opacity: 0.9}
  100%  {top:0px; opacity: 1}
}

@keyframes spriteAniRew {
   100%  {top:-648px; opacity: 0}
  90%  {top:-576px; opacity: 0.1}
  80%  {top:-504px; opacity: 0.2}
  70%  {top:-432px; opacity: 0.3}
  60%  {top:-360px; opacity: 0.4}
  50%  {top:-288px; opacity: 0.5}
  40%  {top:-216px; opacity: 0.6}
  30%  {top:-144px; opacity: 0.7}
  20%  {top:-72px; opacity: 0.8}
  10%  {top:0px; opacity: 0.9}
  0%  {top:0px; opacity: 1}
}

iframe {
    width: 80%;
}

.table {
    width: fill-available;
    width: -webkit-fill-available;
    margin: 0 auto;
    text-align: center;
    font-size: 17px;
    font-family: 'Poppins';
     min-width: 500px;
    letter-spacing: 1px;
    /* border: saddlebrown solid; */
    background: #84806c;
}

.tablePlaceholder {
    grid-area: 3/1/4/8;
    width: 100%;
}

.table tr {
 background-color: #404137;
    height: 50px;
}

.contactPlaceholder {
       position: relative;
    top: -10px;
    z-index: 0;
    left: 1204px;
    transition: .5s;
  }

.contactPlaceholder img {
	    width: 66px;
    margin: 6px;

}

.floatingMenuText {
    float: right;
    position: relative;
    left: 364px;
    background: #657d65;

    z-index: 200;
    padding: 20px;
    top: -13px;
    color: white;
    border-radius: 20px;
    font-size: 25px;
    text-shadow: 2px 3px 8px black;
    /* background-color: white; */
    box-shadow: 1px 3px 13px 0px #ffffffeb;
}

ol {
	list-style: none;
      grid-area: 1/1/2/11;
}

.pageLogo {
	z-index: 2;
    overflow: hidden;
    position: relative;
    height: 231px;
    left: -110px;
    top: -24px;
    /* transform: scale(2,2); */
}

.mainContent {
 grid-column: 3/8;
    font-size: 50px;
    text-align: center;
    /* border-radius: 0px; */
    color: #285679;
    padding: 10px;
    border-color: #285679;
    border-width: 9px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-bottom-color: #285679;
    border-bottom-style: solid;
    border-radius: 20px;
    margin: 20px;
   background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 21%, rgba(40, 86, 121, 0.46) 368%);
	
}

.paralax {
    height: 100%;
    padding: 10px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: -1;
}

.floatingMenu {
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 21%, rgba(40, 86, 121, 0.46) 368%);
    width: 100%;
    height: 78px;
    position: fixed;
    display: block;
       border-bottom: #285679 6.5px solid;
    top: -78px;
    left: 0px;
    list-style: none;
    transition: all .5s;
    z-index: 999;
    box-shadow: 0px 0px 11px 13px #00000059;
}

#linkBackground {
	background-color: red;
	width: 100px;
	height: 100px;
	transition: all .5s;
}

#linkBackground {
	background: white;
}

#links li {
    margin: 10px;
    float: left;
    position: relative;
    top: -8px;
    font-size: 17px;
    text-align: center;
}

.img-start {
	transition: all smooth .1s;
	
	background-image: url("img/start.jpg");
	background-size: cover;
	background-position: center;
	filter: grayscale(50%)  brightness(65%) contrast(200%);
	-webkit-filter: grayscale(50%) brightness(65%) contrast(200%);
}

.bannerLogo {
	    grid-row: 1/2;
    grid-column: 4/5;
    height: 43px;
    position: relative;
    left: 0px;
    top: 29px;
    /* transform: rotate(16deg); */
}

.inlineGrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
	grid-template-rows: repeat(5, auto);

}

.normalText {
	font-family: 'Montserrat';
	font-size: 17px;
	padding: 0 100px 0 100px;
}

.heading {
	padding-top: 20px;
}

.btn {
       margin: 0 auto;
    display: inline-block;
    border: 2px solid;
    font-size: 20px;
    filter: sepia(1) hue-rotate(159deg);
    -webkit-filter: sepia(1) hue-rotate(159deg);
    padding: 33px;
    margin: 50px 10px 50px 10px;
    width: 150px;
    text-align: center;
    background-position: center;
    border-radius: 12px;
  }

.btn:hover {
        background: linear-gradient(180deg, rgb(142, 193, 232) 0%, rgb(40, 86, 121) 35%, rgb(40, 86, 121) 100%);
    /* transition: .2s; */
}

.partnerLogo{
	margin: 20px;
}

a {
	text-decoration: none;
	color: inherit;
}

.footer {
	background-color: #181915;
	height: 300px;
	font-size: 30px;
	color: white;
	text-align: center;
	padding: 20px;
}



.menuBtn {
      font-family: 'glyphs2';
    position: fixed;
    top: 0px;
    width: 100%;
    color: #d3dade;
    /* padding: 3px 15px 3px 15px; */
    background: #285679;
    right: 0px;
    /* line-height: .9; */
    text-align: right;
    padding: 20px;
    /* border-radius: 15px; */
    z-index: 999;
    font-size: 39px;
    /* background-color: white; */
    box-shadow: 0px 8px 8px 0px #40423885;
}

.mobileMenu {
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 89px;
    left: 0px;
    z-index: 999;
}

.menuBtn a:hover {
    color: white;
      text-shadow: 1px 8px 13px rgb(64, 66, 53);
}

@media only screen and (min-width: 650px) { 
 .mobileMenu {display: none; }
  .mobileMenu .mainMenu {display: none; }
  .menuBtn {display: none;}
}

@media only screen and (max-width: 1345px) { 
  .mainContent {    grid-column: 2/9; }

}

@media only screen and (max-width: 1000px) { 
  .mainContent {    grid-column: 1/10;}
   .flex {display: block;}
  /*.btn {padding: 10px; width: 116px;}
*/
}

@media only screen and (max-width: 915px) { 
.bannerLogo{display: none; }
ol {grid-area: 1/5/2/13;}

}

@media only screen and (max-width: 650px) { 
	body{margin: 10px 10px 10px 10px;}
  /*.btn {display: none;}*/
  .normalText {padding: 0px;}
  .mainContent {font-size: 28px;}
  .mainMenu {display: none;}
  .mobileMenu .mainMenu {display: block; height: auto;}
   .mobileMenu .mainMenu li {float: none;}
  .floatingMenu {display: none;}
 
  

}

.bg1 {height: 140px;background-image: url("/img/akervagen2.PNG")}
.bg2 {height: 140px;background-image: url("/img/centralvagen17.png")}
.bg3 {height: 140px;background-image: url("/img/centralvagen18.png")}

.imgBtn {
      text-shadow: 1px 2px 7px black;
    color: #c5c5c5;
    font-size: 20px;
    z-index: 999;
    /* background: #285679; */
    width: 100%;
    color: white;
}
.btnIcon {
font-family: 'Glyphs2';
color: white;
font-size: 40px;
}