@charset "utf-8";
/* CSS Document */

/* Styles go here */

body {font-size: 110%; padding: 0; margin: 0;}

.bgimg {padding: 0; margin-top: -30px;}

.flexslider {
  width: 80%;
  max-width: 80%;
  overflow: hidden;
  margin: 67px auto 20px auto;
  padding: 0;

 }

.flexslider .slides {  margin-top: 30px;
  height: 70%;
}

.flexslider .slides li {
 height: 100%;
 position: relative;}

.flexslider .slides li h1 {
  position: absolute;
  z-index:9;
  top: 30px;
  left: 25%;
  width: 50%;
  text-align:center;
  text-shadow: 1px 1px 1px #fff;
}

.flexslider .slides li .bgimg {
  background-position: center;
  width: 100%;
  transition: transform 4s ease-in-out;
  -webkit-backface-visibility: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 1;
}

.flexslider .slides li.flex-active-slide .bgimg {
  transform: scale(1.05);
}

/*****************************************************************************/
@media screen and (orientation: landscape) {
	.flexslider .slides li .bgimg {
  	height: 85vh; }}

/*****************************************************************************/
@media screen and (orientation: portrait) {
	.flexslider .slides li .bgimg {
	height: calc(80vw * (5/7))
  	/*height: 42vh;
	max-height: 40%; */
	}	}