body {
/*  background-image: url('../img/start_background.jpg');*/
  background-repeat: no-repeat;
  background-size: cover;
  color: #000;
  position: relative;
  font-size: 16px;
  font-family: Arial, sans-serif;
}
.hidden {display: none !important;}
img {max-width: 100%;}
.crossroads .container {max-width: 1680px;}
.crossroads .list-group-item {border: 0;}
.btn {
  background: #e60000;
  color: #fff;
  padding: 5px 15px;
  border-radius: 0;
  font-size: 2rem;
}
.btn:hover {
  background: #22386d;
  color: #fff;
}
h1.slogan {
  color: #fff;
  text-align: center;
}
p.description {
  margin: 0;
  padding: 5px;
}
.level-2 p.description {font-size: 1.4rem;}
.level-1 p.description {font-size: 1.5rem;}
.inner-box-right {display: inline-block;}
.green {background: #009a44;}
.fuksja {background: #981e97;}
.blue {background: #0095c8;}
.yellow {background: #c99700;}
.red {background: #e03c31;}
.white {background: #ffffff;}
.list-box-right, .list-box-right li {display: inline-block;}
ul.tiles {width: 100%;}
ul.tiles, ul.tiles li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vcenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
a.ensite {display: inline-block;}
.flip-card {
 background-color: transparent;
 perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-card-inner {
 position: relative;
 width: 100%;
 height: 100%;
 text-align: center;
 transition: transform 0.8s;
 transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
 transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
 position: absolute;
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden; /* Safari */
 backface-visibility: hidden;
}
.flip-card-back {
 color: black;
 transform: rotateY(180deg);
}

/* Responsive */

@media only screen and (min-width:320px) {
  .level-2 .flip-card {
   width: 279px;
   height: 222px;
  }
  .level-1 .flip-card {
   width: 279px;
   height: 156px;
  }
  h1.slogan {
    font-size: 2.5rem;
    margin-top: 40px;
  }
}
@media only screen and (min-width:360px) {
  .level-2 .flip-card {
   width: 319px;
   height: 222px;
  }
  .level-1 .flip-card {
   width: 319px;
   height: 120px;
  }
}
@media only screen and (min-width:375px) {
}
@media only screen and (min-width:480px) {
}
@media only screen and (min-width: 568px) {
}
@media only screen and (min-width: 600px) {
}
@media only screen and (min-width: 667px) {
}
@media only screen and (min-width: 736px) {
  ul.tiles li {display: inline-block;}
}
@media only screen and (min-width: 1024px) {
}
@media only screen and (min-width: 1224px) {
  .level-2 .flip-card {
   width: 230px;
   height: 222px;
  }
  ul.level-1 {height: 282px}
  .level-1 .flip-card {
   width: 475px;
   height: 182px;
  }
  h1.slogan {
    font-size: 6.5rem;
    margin-top: 0;
    padding-top: 160px;
  }
  html, body {height: 100%;}
  .crossroads .list-group-item:first-child {padding-left: 0;}
  #top, #bottom {
    position: absolute;
    width: 100%;
  }
  #top {top: 40px;}
  #bottom {bottom: 40px;}
  #middle {
      position: relative;
      top: 25%;
      transform: translateY(-25%);
  }
}
@media only screen and (min-width: 1440px) {
}