* {
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
}

.hero {
  width: 100%;
  min-height: 300px;
  position: relative;
  top: 0;
  left: 0;
  background-color: #d9edfd;
}

.layer-1 {
  -webkit-animation: parallax_fg linear 20s infinite both;
          animation: parallax_fg linear 20s infinite both;
/*  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/1.png) 0 100% repeat-x;*/
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 136px;
}

.layer-2 {
  -webkit-animation: parallax_fg linear 30s infinite both;
          animation: parallax_fg linear 30s infinite both;
  background: url(img/2.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 145px;
}

.layer-3 {
  -webkit-animation: parallax_fg linear 55s infinite both;
          animation: parallax_fg linear 55s infinite both;
  background: url(img/3.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 158px;
}

.layer-4 {
  -webkit-animation: parallax_fg linear 75s infinite both;
          animation: parallax_fg linear 75s infinite both;
  background: url(img/4.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 468px;
}

.layer-5 {
  -webkit-animation: parallax_fg linear 95s infinite both;
          animation: parallax_fg linear 95s infinite both;
  background: url(img/5.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 311px;
}

.layer-6 {
  -webkit-animation: parallax_fg linear 120s infinite both;
          animation: parallax_fg linear 120s infinite both;
  background: url(img/6.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 222px;
}

.bike-1,
.bike-2 {
  background: url(img/bike.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}

.bike-1 {
  -webkit-animation: parallax_bike linear 10s infinite both;
          animation: parallax_bike linear 10s infinite both;
}

.bike-2 {
  -webkit-animation: parallax_bike linear 15s infinite both;
          animation: parallax_bike linear 15s infinite both;
}

@-webkit-keyframes parallax_fg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}

@keyframes parallax_fg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}
@-webkit-keyframes parallax_bike {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}
@keyframes parallax_bike {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}
.logo {
  margin: 70px auto;
  position: absolute;
  z-index: 2;
  width: 100%;
}
.testimonials h3 {
    color: #fff;
    margin: 0;
}
.logo img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
@media (max-width: 700px) {
  .logo img {
    max-width: 90%;
  }
}

nav {
  background-color: #12212f;
  overflow: hidden;
}
nav ul {
  list-style: none;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
nav li {
  padding: 10px 20px;
}
@media (max-width: 700px) {
  nav li {
    width: 50%;
    text-align: center;
  }
}
nav a {
  /* Tilmelding: */
  font-weight: 700;
  font-size: 1.25em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.dark-bg {
  background-color: #12212f;
  padding: 50px 50px;
}
.dark-bg img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
}

.light-bg {
  background-color: #005596;
  padding: 0px 50px;
}
.light-bg img {
  display: block;
  margin: 0 auto;
/*  width: auto;*/
  max-width: 100%;
}

.extra {
  max-width: 700px;
  margin: 0 auto;
  font-size: 18px;
  color: #12202F;
  letter-spacing: 0px;
  line-height: 27px;
}








.services {
    background: #fff;
    padding: 16px;
    margin: 5px;
    border-radius: 11px;
}




.shadow-effect {
		    background: #fff;
		    padding: 20px;
		    border-radius: 4px;
		    text-align: center;
	border:1px solid #ECECEC;
		    box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
    background-image: url(img/pattern.png);
    background-repeat: no-repeat;
    background-position: 93px 103px;
   
		}
		#customers-testimonials .shadow-effect p {
		    font-family: inherit;
		    font-size: 17px;
		    line-height: 1.5;
		    margin: 0 0 17px 0;
		    font-weight: 300;
		}
		.testimonial-name {
		    margin: -17px auto 0;
		    display: table;
		    width: auto;
		    background: #00b14f;
		    padding: 9px 35px;
		    border-radius: 18px;
		    text-align: center;
		    color: #fff;
		    box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
            font-weight: bold;
		}
		#customers-testimonials .item {
		    text-align: center;
/*		    padding: 28px;*/
				margin-bottom:80px;
		    opacity: .2;
/*
		    transform: scale3d(0.8, 0.8, 1);
		    transition: all 0.3s ease-in-out;
*/

		}
.wrap {
    word-wrap: break-word;
}
		#customers-testimonials .owl-item.active.center .item {
		    opacity: 1;
/*		    transform: scale3d(1.0, 1.0, 1);*/
		}
		.owl-carousel .owl-item img {
		    transform-style: preserve-3d;
		    max-width: 90px;
    		margin: 0 auto 17px;
		}
		#customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
#customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span {
		    background: #3190E7;
		    transform: translate3d(0px, -50%, 0px) scale(0.7);
		}
#customers-testimonials.owl-carousel .owl-dots{
	display: inline-block;
	width: 100%;
	text-align: center;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot{
	display: inline-block;
}
		#customers-testimonials.owl-carousel .owl-dots .owl-dot span {
		    background: #3190E7;
		    display: inline-block;
		    height: 20px;
		    margin: 0 2px 5px;
		    transform: translate3d(0px, -50%, 0px) scale(0.3);
		    transform-origin: 50% 50% 0;
		    transition: all 250ms ease-out 0s;
		    width: 20px;
		}


@media only screen and (max-width: 400px) {
 .light-bg {
    padding: 0px 5px;
}
}

.more a{
    font-size: 30px;
}

.more {
    text-align: right;
}

.back a{
    font-size: 30px;
        margin: 0px 16px;
}

.back {
    text-align: left;
}

.item {
  width: 300px;
  height: 260px;
  margin: 40px 0;
}



.living {
    color: #225691;
    margin: 0;
    padding: 0;
}

.health {
    color:#60ae56;
}

.living-west {
    font-size: 15px;
}

.ssno {
    margin-top:35px;
}

.p-clear {
    margin:0 !important;
}



        .flip-box {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: .5em;
  display: block;
  text-align: center;
  -webkit-transition: 
    box-shadow .4s .45s, 
    -webkit-transform 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 150px;
  -webkit-transform-origin: bottom;
}
[class^="flip-box-"] {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  -webkit-perspective: 150px;
  -webkit-transition: opacity .25s .25s linear;
}

.flip-box-back {
  -webkit-transform: rotateX(180deg); 
  -webkit-transition: color .2s .5s, background .2s .5s ease-in-out, opacity .25s .4s linear;
  z-index: 1;
  opacity: 0;
    
}
.flip-box.flipped {
  -webkit-transform: rotateX(180deg) translateY(20em) translateZ(40px);
}
.flipped .flip-box-front {
   opacity: 0;
}
.flipped .flip-box-back {
  background: #fff;
  color: #222;
  z-index: 3;
  opacity: 1;
      background-image: url(img/pattern.png);
        background-repeat: no-repeat;
       background-position: 100px 148px;
}


        .flip-box1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: .5em;
  display: block;
  text-align: center;
  -webkit-transition: 
    box-shadow .4s .45s, 
    -webkit-transform 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 150px;
  -webkit-transform-origin: bottom;
}
[class^="flip-box1-"] {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  -webkit-perspective: 150px;
  -webkit-transition: opacity .25s .25s linear;
}

.flip-box-back1 {
  -webkit-transform: rotateX(180deg); 
  -webkit-transition: color .2s .5s, background .2s .5s ease-in-out, opacity .25s .4s linear;
  z-index: 1;
  opacity: 0;
    
}
.flip-box1.flipped1 {
  -webkit-transform: rotateX(180deg) translateY(20em) translateZ(40px);
}
.flipped1 .flip-box-front1 {
   opacity: 0;
}
.flipped1 .flip-box-back1 {
  background: #fff;
  color: #222;
  z-index: 3;
  opacity: 1;
      background-image: url(img/pattern.png);
        background-repeat: no-repeat;
       background-position: 100px 148px;
}


     .flip-box3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: .5em;
  display: block;
  text-align: center;
  -webkit-transition: 
    box-shadow .4s .45s, 
    -webkit-transform 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 150px;
  -webkit-transform-origin: bottom;
}
[class^="flip-box3-"] {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  -webkit-perspective: 150px;
  -webkit-transition: opacity .25s .25s linear;
}

.flip-box-back3 {
  -webkit-transform: rotateX(180deg); 
  -webkit-transition: color .2s .5s, background .2s .5s ease-in-out, opacity .25s .4s linear;
  z-index: 1;
  opacity: 0;
    
}
.flip-box3.flipped3 {
  -webkit-transform: rotateX(180deg) translateY(20em) translateZ(40px);
}
.flipped3 .flip-box-front3 {
   opacity: 0;
}
.flipped3 .flip-box-back3 {
  background: #fff;
  color: #222;
  z-index: 3;
  opacity: 1;
      background-image: url(img/pattern.png);
        background-repeat: no-repeat;
       background-position: 100px 148px;
}