@import url(http://fonts.googleapis.com/css?family=EB+Garamond);
html{font-family: Garamond, EB Garamond, Georgia, serif;}
/* NEW TAB STYLE */

/* Style the tab  */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #d8e6ed;
  padding-left: 10%;
}

.tabMobile {
  position: absolute;
  top: 2%;
  height: 6%;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #d8e6ed;
  padding-left: 7%;
}

.mobileTabButton {
  background-color: #d8e6ed;
  float: left;
  border: 1px solid black;
  outline: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: 0.3s;
  font-family: -apple- system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 20px;
}

.mobileTabMenu {
  background-color: #d8e6ed;
  border: 1px solid black;
  outline: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: 0.3s;
  font-family: -apple- system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 20px;
}

.a mobile {
}

/* Style the buttons inside the tab  #a9c5d4 #f1f1f1  #6f98b0 #85b0c7*/
.tab button {
  background-color: #d8e6ed;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 20px 30px;
  transition: 0.3s;
  font-family: -apple- system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 20px;
}

.tab a {
   position: absolute;
   right: 15%; 
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ccc;
  border-radius: 15px 15px 0px 0px;
}

/* Create an active/current tablink class   #ccc; #bcccd4;*/
.tab button.active {
  background-color: white;
  border-radius: 15px 15px 0px 0px;

}

.tab-mobile button.active {
  background-color: white;
  border-radius: 15px 15px 0px 0px;

}

.tab-mobile-content {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  height: 90%;
  min-height: 80%;
  width: 100%;
}

/* Style the tab content */
.tab-mobile-contentRight {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  height: 90%;
  min-height: 80%;
}

/* Style the tab content */
/*     min-height: 800px; */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  height: 90%;
  min-height: 80%;
}

/* Style the tab content */
.tabcontentRight {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  height: 90%;
  min-height: 80%;
}

/*     min-height: 799px; */
.frameInTab {

    height: 89%;  
}

/* Style the tab content */
.tabcontent-mobile {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  height: 100%;
}

/* Style the tab content */
.tabcontent-mobileRight {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  min-height: 500px;
  height: 100%;
}

    
    @media all and (orientation:landscape) { 
        .mobile-iframe {
            
            display: block;       /* iframes are inline by default */
            border: none;         /* Reset default border */
            height: 85%;        /* Viewport-relative units */
            width: 99%;
            min-height: 220px;
            font-family: Garamond;
            padding: 5px 5px 0px 0px;
            color: #ffffff;
            line-height: 80%;
            font-size: 18px;
            margin: 0;
        } 
    }
    @media all and (orientation:portrait) { 
        .mobile-iframe {
            display: block;       /* iframes are inline by default */
            border: none;         /* Reset default border */
            height: 95%;        /* Viewport-relative units */
            width: 99%;
            min-height: 799px;
            font-family: Garamond;
            padding: 5px 5px 0px 0px;
            color: #ffffff;
            line-height: 90%;
            font-size: 18px;
            margin: 0;
        }
    }

/*  End of New Style */


body {
    overflow-y: scroll;
    height: 100%
}

iframe {
    display: block;       /* iframes are inline by default */
    border: none;         /* Reset default border */
    height: 90%;        /* Viewport-relative units */
    width: 99%;
    min-height: 799px;
    font-family: Garamond;
    padding: 5px 5px;
    color: #ffffff;
    line-height: 90%;
    font-size: 18px;
    margin: 0;
}

.wrap {
  /* margin: 0 auto; */
}
ul.tabs {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	list-style: none;
	overflow: hidden;
        padding: 0;
}
ul.tabs li {	
	float: left;
	width: 130px;

  
}
ul.tabs li a {
	position: relative;
	display: block;
	height: 30px;
	margin-top: 40px;
	padding: 10px 0 0 0;
	font-family: Garamond;
	font-size: 18px;
	text-align: center;	
	text-decoration: none;
	color: #ffffff;
	background: #6edeef;
	-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        	border: 0px solid #000000;
	-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
    z-index: 3;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a {
	z-index: 2;
}
.tabs li:last-child a {
	z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
	   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
	        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
ul.tabs li a:hover {
	margin: 35px 0 0 0;
	padding: 10px 0 5px 0;
}
ul.tabs li a.active {
	margin: 30px 0 0 0;
	padding: 10px 0 10px 0;
	background: #545f60;
	color: #6edeef;
	/*color: #ff6831;*/
	z-index: 4;
	outline: none;
}
.group:before,
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.group:after {
    clear: both;
}
#content-mobile {
    /*width: 100%;*/
    height: 500px; 
    margin: 0 auto;
    /*background: #545f60;*/
    background: #fff;
    -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
    box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}
#content {
  width: 100%;
  min-height: 90%; 
  min-height: 100%; 
  margin: 0 auto;
  /*background: #545f60;*/
  background: #fff;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
   	   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
   	        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
p{
  font-family: Garamond;
  padding: 5px 5px;
  color: #ffffff;
  line-height: 100%;
  font-size: 18px;
  margin: 0;
}
#one {
    height: 500px; 
}
#two {
    height: 500px; 
}
#three {
    height: 500px; 
}