/* BODY AND BACKGROUNDS*/
body{
  font-family: Montserrat;
   background-color: #ffffff;
}

#startbody{
   background: url(../pix/backgrounds/start1.png) no-repeat, url(../pix/backgrounds/start2.png) no-repeat;
   background-position: top right, left bottom;
   background-size: 600px, 400px;
   max-width: 1920px;
   background-color: #ffffff;
   margin:auto;

}
#ombondabody{
  background: url(../pix/backgrounds/ombonda4.png) no-repeat;
  background-position: top right;
  background-size: 700px;
  max-width: 1920px;
  background-color: #ffffff;
  margin:auto;
}

#spelbody{
  background: url(../pix/backgrounds/spel1.png) no-repeat;
  background-position: top right;
  background-size: 700px;
  max-width: 1920px;
   background-color: #ffffff;
   margin:auto;
}

#filmerbody{
  background: url(../pix/backgrounds/filmer1.png) no-repeat, url(../pix/backgrounds/filmer_2.png) no-repeat ;
  background-position: top right, left bottom;
  background-size: 900px, 900px;
  max-width: 1920px;
   background-color: #ffffff;
   margin:auto;
}

#wrapper{
  margin: auto;
  padding: 2.5em;
  width: 95%;
  max-width: 1200px;
  min-height: 50em;
}

#menywrapper{
  margin: auto;
  width: 100%;
  max-width: 1200px;
}


/* MENU */
#menybg{
  background-color: transparent;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0);
  height: 6em;
  padding-top: 2.5em;
}



.meny {
  padding-top: 0.7em;
}



.meny a:hover {
  color: rgb(0,0,0,0.5);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: right;
}

.content p a:link{
  color:#000000;

}

.content p a:visited{
  color:#000000;
}

.content p a:hover{
  color:#000000;
}


li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  font-weight: bold;
}




#active{
  border-bottom: 2px solid #ffffff;
  padding-top: -20px;
}

.logo img{
width: 5em;
}

/*HEADER*/
.header{
  margin-top: 5em;
  margin-bottom: 3em;
  padding: 2em;
}

.headervideo{
  margin-top: 8em;
  margin-bottom: 3em;
  text-align:center;
  height: auto;
}

.headervideo video{
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}

h1{
  font-size: 3.5em;
  font-weight: bold;
}

#startbody h1{
  color:#B6554D;
}

#startbody h2{
  color:#B6554D;
}

#ombondabody h1{
  color:#db9c2c;
}

#spelbody h1{
  color:#024C4A;
}

#filmerbody h1{
  color:#0F2F4F;
}

h3{
  font-weight: 8em;
}

/*FIRST PAGE CONTENT*/
p{
  line-height: 1.8em;
}

.instagram{
  margin:auto;
  margin-bottom: 5em;
  margin-top: 2em;
  text-align: center;
}

video {
  width: 100%;
  height: auto;
  max-width: 600px;
}

/*ombonda CONTENT*/
.ombondacontent{
  margin: 2em 0em 2em 0em;


}

hr{

    border: 2px solid #FFE5BB;
}

.ombondacontent img{
  margin: auto;
  text-align:center;
  display: block;
  padding-top: 2em;
  width: 50%;
  max-width: 20em;
  z-index: -1;

}

/*GAME CONTENT*/
#spel{
  margin-bottom: 2em;
}

#gamegif{
  margin-bottom: 3em;
  margin: auto;
  display:block;
}

.game{
  margin: auto;
  text-align:center;
  margin-top: 8em;
  padding-top: 1em;
  background: #073836;
}

.gametext{
  margin-top: 2em;
  margin-bottom: 10em;
  margin-left: -1em;
}

.gamebuttons img{
    margin-top: 3em;
    float: right;
}

/*FILMER CONTENT*/
.filmwrapper{
  margin-top: 10em;
  margin-bottom: 10em;
}

.filmer img{
  border: 1px solid #999999;
  border-radius: 5px;
  cursor: pointer;
  width:100%;
}

.filmer img:hover{
  border: 1px solid #0F2F4F;
  border-radius: 5px;
}

.filmer a{
      color: #000000;
      text-decoration: none;
      cursor: pointer;
}

.filmer a:hover{
      color: #0F2F4F;
      text-decoration: none;
}

.filmer h2{
      margin: 0.1em 0em -1em 0em;
      font-size: 1em;
}

.filmer h3{
      font-size: 1em;
}

.documentdownload {
      display: block;
}

/*MODAL BOX*/
    #modalwrapper{
      width: 100%;
      max-width: 1000px;
      margin:auto;
      padding: 5rem 0 5rem 0;
    }

    #modalwrapper button{
      line-height: 2em;
      position: absolute;
      right: 2em;
      text-align: center;
      top: 2em;
      width: 2em;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer;
    }

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#modalwrapper h2{
  color:#0F2F4F;
}

#modalwrapper p{
  width: 100%;
  max-width: 50em;
}

.modalask{
  border: 1px solid #D5D5D5;
  background: #ffffff;
  width: 90%;
  margin: auto;
  margin-top: 2em;
  padding: 2em;
}

.modallike{
  float: right;
  text-align: right;
}

.modallike img:hover{
  content: url(../pix/like_full.png);
}

/*FOOTER*/


#footerbg  {
  background:#231F20;
  width: 100%;
  height: auto;
  padding: 1em 0em 1em 0em;
}

#footerbg2  {
  background:#363636;
  width: 100%;
  height: auto;
}

#footerwrapper{
  max-width: 1200px;
  margin: auto;
}

.footerlinks li {
  float:left;
  margin-top: 1em;
}

.footerlinks a{
  color: white;
}

.footerlinks2 li {
  float:left;
  margin-top: 3em;
}

.footerlinks2 a{
  color: white;
}

.footerlogo img{
  float:right;
}

.footerlogo2 img{
  float:right;
  margin-top: 4em;
  margin-left: 2em;
}

#footerwrapper h3 {
  color: #ffffff;

    padding: 16px 16px 0px 16px;
}

#footerwrapper p {
  color: #ffffff;
  padding: 0px 16px 0px 16px;
}

.copyright {
  color: white;
  text-align: center;
  margin-top: 5em;
}


img.label {
  border: none;
  cursor: default;
  margin-right: 0.2em;
}

img.label:hover {
  border:none;
}



/* PRODUCT FILTER CSS START
/* Create three equal columns that floats next to each other */
.column {
    display: none; /* Hide columns by default */
}

/* Clear floats after rows */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: #46668D;
  color: white;
}
/* PRODUCT FILTER CSS END*/

#myBtnContainer {
margin-bottom: -8em;
margin-top: 5em;
}

/*MEDIA QUEARIES*/

/*LARGER SCREEN*/
@media screen and (min-width: 1640px) {

  #menywrapper{
    margin: auto;
    width: 100%;
    max-width: 1200px;

  }


  /* MENU */
  #menybg{
    background-color: white;
    height: 6em;
    padding-top: .5em;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: relative;

  }

li a {
  color: black;
}

#active{
  border-bottom: 2px solid #ffffff;
  padding-top: -20px;
}

.menybar{
    padding-top: 0em;
}


#large-bg-start {
  background: url(../pix/backgrounds/start1.png) no-repeat, url(../pix/backgrounds/start2.png) no-repeat;
  background-position: top right, left bottom;
  background-size: 600px, 400px;
  max-width: 1920px;
  background-color: #ffffff;
  margin:auto;
}

#large-bg-filmer {
  background: url(../pix/backgrounds/filmer1.png) no-repeat, url(../pix/backgrounds/filmer_2.png) no-repeat ;
  background-position: top right, left bottom;
  background-size: 900px, 900px;
  max-width: 1920px;
  background-color: #ffffff;
  margin:auto;
}

#large-bg-spel{
  background: url(../pix/backgrounds/spel1.png) no-repeat;
  background-position: top right;
  background-size: 700px;
  max-width: 1920px;
  background-color: #ffffff;
  margin:auto;
}

#large-bg-ombonda{
  background: url(../pix/backgrounds/ombonda4.png) no-repeat;
  background-position: top right;
  background-size: 700px;
  max-width: 1920px;
  background-color: #ffffff;
  margin:auto;
}


#startbody{
   background: none;
}

#ombondabody{
  background: none;
}

#spelbody{
  background: none;
}

#filmerbody{
  background: none;
}



}


/*MEDIUM*/
@media screen and (max-width: 1025px) {
    .menybar{
      margin-top: -1em;
    }

  /*START*/
  .headervideo{
    margin-top: 2em;
    margin-bottom: 2.1em;
    text-align:center;
    height: auto;
  }

  .header{
    margin-top: 5em;
    margin-bottom: 0em;
  }

  #startbody{
     background: url(../pix/backgrounds/start1_mini.png) no-repeat;
     background-position: top right;
     background-size: 1025px, 400px;
      background-color: #ffffff;
  }

/*SPEL*/
  #spelbody{
    background: url(../pix/backgrounds/spel1_mini.png) no-repeat;
    background-position: top right;
    background-size: 1025px, 700px;
     background-color: #ffffff;
  }

  /*FILMER*/
  #filmerbody{
    background: url(../pix/backgrounds/filmer1_mini.png) no-repeat;
    background-position: top right;
    background-size: 1025px, 900px;
     background-color: #ffffff;

  }

  .filmwrapper{
    margin-top: 10em;
    margin-bottom: 6em;

  }

  /*ombonda*/
  #ombondabody{
    background: url(../pix/backgrounds/ombonda4mini.png) no-repeat;
    background-position: top right;
    background-size: 1025px;
     background-color: #ffffff;
  }

/*FOOTER*/


    .footerlink li {
      margin-bottom: 3em;
    }


}

/*SMALL SCREEN*/
@media screen and (max-width: 600px) {



  /*START PAGE*/
   #startbody {
    overflow: hidden;
  }
  
  #startbody h1{
    font-size: 2.8em;
    margin-top: 1em;
  }

  /*ombonda*/
  #ombondabody h1{
    font-size: 2.8em;
    margin-top: 1em;
  }

  .ombondacontent img{
    margin: auto;
    text-align:center;
    display: block;
    padding-top: 0em;
    width: 100%;
    max-width: 15em;
  }

  /*SPEL*/
  #spelbody h1{
    font-size: 2.8em;
    margin-top: 1em;
  }

  /*FILMER*/
  #filmerbody h1{
    font-size: 2.8em;
    margin-top: 1em;
  }


/*MENY*/
.meny li a {
  text-align: left;
  display: block;
  color: white;
  text-align: center;
  padding: 16px 0px 0px 0px;
  margin-right: 15px;
  margin-left: 5px;
  text-decoration: none;
  font-weight: bold;
  float:right;
}

.meny li:first-child {
   margin-right: -1em; /* zeros out margin on last li */
}



.meny ul{
  float:right;
  width: 250px;
  text-align: left;
}
  h3{
    font-size: 1.2em;
  }

  .logo {
    margin-right:0px;
  }

/*FOOTER*/
  #footer {
   text-align: center;
  }

  .footerlinks li {
    text-align: center;
    display: block;
    color: white;
    text-decoration: none;
    font-weight: bold;
    float: none;

  }

  .footerlinks li a{
  padding: 5px;

  }

  .footerlogo {
    text-align: center;
    margin: auto;

  }

  .footerlogo img{
    float: none;
    margin-top: 3em;
    margin-bottom: 2em;
  }


  .footerlinks2 {
    margin: auto;
    text-align:center;

  }

  .footerlinks2 li {
    text-align: center;
    color: white;
    text-decoration: none;
    font-weight: bold;
    float: none;
    display:inline-block;

  }


    .footerlogo2 {
      text-align: center;
      margin: auto;

    }

    .footerlogo2 img{
      float: none;
      margin-left: 0em;
      margin-top: 3em;
      margin-bottom: 2em;
    }

.meny{
  font-size: 0.95em;
}
}