@font-face {
 font-family:Gotham;
 font-weight:400;
 src:url(fonts/Gotham-Book.otf);
 font-display:swap
}
@font-face {
 font-family:Gotham;
 font-weight:200;
 src:url(fonts/Gotham-Light.otf);
 font-display:swap
}
body,html{margin: 0px;font-family:Gotham; font-weight: 300; font-size:16px;line-height: 1.5; background:#e7e7e7; padding-top:0px;}
h1,h2,h3,h4,h5,h6{font-weight: 100;font-size: 26px;text-align: center;color: #fff;}
.clear{clear:both;}
.nav { text-align: center; margin-top: -77px; position: absolute;}
.dl-menu-main li{display: none;}
.dl-menu{padding:0px;}
.nav ul li{list-style: none;float: left;line-height: 2.5;margin: 0 5px 0 0;}
  .nav ul li a {
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    font-family:Gotham;
    font-weight: 400;
    position: relative;
    z-index: 0;
    cursor: pointer;
    -webkit-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
    border-top: 1px solid #f5f5f5;
	border-left: 1px solid #f5f5f5;
	border-right: 1px solid #f5f5f5;
    border-bottom-color: #777\9;
    line-height: 30px;
    height: auto;
    float: left;
    padding: 0px 10px;
	transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
	.nav ul li a:hover{background: linear-gradient(to bottom, #ccc, #fff); color:#333;line-height: 30px;border-bottom: 0px solid #fff; margin-top:-11px;padding-bottom:11px;box-shadow:0px -5px 10px #a4dff6;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }
.green a{background:linear-gradient(to bottom, #8ea896, #8ea896);}
.orange a{background:linear-gradient(to bottom, #e97924, #e97924);}
.blue a{background:linear-gradient(to bottom, #8fc3ea, #8fc3ea);}
.light-green a{background:#aacd3b;}
.brown a{background:linear-gradient(to bottom, #9e8562, #9e8562);}
.pink a{background:linear-gradient(to bottom, #f8bcc9, #f8bcc9);}
.red a{background:linear-gradient(to bottom, #ee2b4b, #ee2b4b);}
.purple a{background:linear-gradient(to bottom, #7d5d9f, #7d5d9f);}
.yellow a{background:linear-gradient(to bottom, #dac33f, #dac33f);}
.frame-padding{margin-top: 65px;}
.pullUp a:hover:before{height: 100%;}
.top_flap_top:before{
	z-index:5;
	content: '';
  position: absolute;
  top: -82px;
  right: 0px;
  width: 100%;
  max-width:640px;
  height: 82px;
  background:url(../img/Box-cover-top4-1.png) !important;
  background-size: cover !important;
  background-position: center !important;
  }
  .top_flap_top2:before{z-index:2; display:none;}
.top_flap{top: -471px;}
.top_flap.close_sesame{top: -472px;}
.top_flap, .top_flap.close_sesame,.top_flap.top_flapImg, .top_flap.top_flapImg2 {
  left: 0px;
  position: absolute;
  height: 471px;
  width: 100%;
  max-width:640px;
  overflow-y: hidden;
  -webkit-transform-origin: bottom;
  -moz-transform-origin: bottom;
  -ms-transform-origin: bottom;
  -o-transform-origin: bottom;
  transform-origin: bottom;
	-webkit-transition: all 1.5s 0ms linear;
	-moz-transition: all 1.5s 0ms linear;
	transition: all 1.5s 0ms linear;
	-webkit-filter: drop-shadow(0 0 0 gray);
  z-index: 3;}
.close_sesame, .top_flap.top_flapImg2 {
  -webkit-transform: rotatex(-180deg) !important;
  -moz-transform: rotatex(-180deg) !important;
  -ms-transform: rotatex(-180deg) !important;
  -o-transform: rotatex(-180deg) !important;
  transform: rotatex(-180deg) !important;
  z-index: 4 !important;}
.top_flap.close_sesame:before{
	content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  max-width:640px;
  height: 471px;
	background:url(../img/Box-cover3.png) !important;
  background-size: cover !important;
  background-position: center !important;}
.top_flap:before {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  max-width:640px;
  height: 471px;
  background:url(../img/Box-cover3.png);
  background-size: cover;
  background-position: center;}
.top_flapImg:before, .top_flap.top_flapImg2:before{background:url(../img/Box-cover-inside.png) !important; background-size: cover !important;background-position: center !important;}
  .top_flap.close_sesame2:before{background:url(../img/Box-cover3.png) !important; background-size: cover !important;background-position: center !important;}
.bottom_flap {
  bottom: 0px;
  left: 0px;
  position: relative;
  height: 620px;
  width: 100%;
  max-width:640px;
  overflow-y: hidden;
  display: block;
  z-index: 1;}
.bottom_flap:before {
  content: '';
  position: absolute;
  top: 0px;
  right: 3px;
  width: 100%;
  max-width:640px;
  height: 620px;
  background:url(../img/Box-bottom.png);
  background-size:cover;
  background-position: center;}
.box {
  position: relative;
  display: flex;
  margin: 100px auto 40px auto;
  width: 100%;
  max-width:640px;
  height: 620px;
  -webkit-box-shadow: 10px 13px 5px 4px #999;
  -moz-box-shadow: 10px 13px 5px 4px #999;
  box-shadow: 10px 13px 5px 4px #999;}
.box .button {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 100px;
  z-index: 10;
  font-family:Gotham; font-weight:100;
  font-size: 30px;
  display: inline-block;
  margin: 0 auto;
  width: 250px;
  height: 50px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  line-height:50px;}
.close_me{display:none !important;}
.side_flaps:before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  max-width:640px;
  height: 620px;
  z-index: 3;
  background:url(../img/Box-bottom-front_2.png) no-repeat;
  background-size:cover;
  background-position: center;}
.container {
  left: 0;
  right: 0;
  bottom: 100px;
  position: absolute;
  width: 100%;
  max-width:600px;
  margin: 0 auto;
  height: 350px;
  background: url(../img/globeBG.jpg) top center #000 no-repeat;
  background-size:contain;
  -webkit-transition: all 800ms 200ms linear;
  -moz-transition: all 800ms 200ms linear;
  -o-transition: all 800ms 200ms linear;
  transition: all 800ms 200ms linear;
  z-index:2;}
.open_form {
  -webkit-transition: all 1s 1.5s linear;
	-moz-transition: all 1s 1.5s linear;
	transition: all 1s 1s linear;
  height: 620px !important;
  bottom: 30px;
  z-index: 3;}
.error {
  color: #f29c9f;
  font-family:Gotham;
  font-size: 18px;
  position: absolute;
  height: 18px;
  width: 60%;
  right: 90px;
  text-align: right;
  top: -5px;}
.form_part { width: 90%; margin: 0 auto; position: relative;}
.message {margin: 20px auto;width: 70%;border: none;background: #f18e92;height: 90px;}
.reset {
  font-size: 30px;
text-align: center;
color: #fff;
line-height: 24px;
position: absolute;
width: 30px;
height: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
background: #8dc1e8;
border: 3px solid #fff;
top: -20px;
right: -10px;
cursor: pointer;
z-index:10;}
.phone2 { background:url(../img/phone.png) no-repeat center;transition: all .5s ease-in-out;
position: absolute;
width: 36px;
height: 36px;
top: -60px;
right: 30px;
cursor: pointer;
z-index:9;}
.phone { background:url(../img/phone.png) no-repeat center;transition: all .5s ease-in-out;
position: absolute;
width: 36px;
height: 36px;
top: -60px;
right: -10px;
cursor: pointer;
z-index:10;}
.phone:hover,.phone2:hover{background:url(../img/phone.png) no-repeat left #d00000; width: auto;border-radius: 30px;transform: scale(1.1);transition: all .5s ease-in-out;}
.phone p, .phone2 p{ overflow:hidden; opacity:0; margin:0px 0px 0px 30px; color:#fff; line-height:36px; text-align: left;transition: all .5s ease-in-out;}
.phone p:hover, .phone2 p:hover{ overflow-x:visible; opacity:1;padding:0px 5px;}
.iframe-pop {height: 95vh; width: 100vw; position:absolute;top:50px;left:0;}
button {
  display: block;
  margin: 5% auto 0;
  background: /*#8dc1e8*/ transparent;
  border: /*3px solid #fff*/ none;
  padding: 0px 9px 6px 9px;
  position: absolute;
  z-index: 300;
  color: #fff;
  border-radius: 50%;
  cursor:pointer;
  font-size: 27px;
  text-align: center;
  line-height: 25px;
  font-weight:100;
  font-family:Gotham;}
button.md-close {margin-top: 15px; margin-left:40px;}
.md-modal, .md-modal2, .md-modal3, .md-modal4, .md-modal5, .md-modal6, .md-modal7, .md-modal8 {
  margin: auto;
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;}
.md-show { visibility: visible;}
.md-overlay { 
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;}
.md-show ~ .md-overlay { opacity: 1;visibility: visible;}
.md-effect-12 .md-content {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;}
.md-show.md-effect-12 ~ .md-overlay { background-color: rgba(0, 0, 0, 0.6);}
.md-effect-12 .md-content h3,.md-effect-12 .md-content {background: transparent;}
.md-show.md-effect-12 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;}
.pep-logo{margin: 0 auto;width: 200px;height: 200px;position: relative;display: block;}
.pace-running{ }
.pace-running:before{background:url(../img/uploading.gif) rgba(255,255,255,1) center center no-repeat;position: absolute; z-index:99; content:''; width:100%; height: 100vh;max-height:100%;margin: 0px 0 0 0; padding:0px; top:0;}
.nav .closebtn{display:none;}
.none, .mobileNav{display:none;}
@media only screen and (max-width: 756px){
	h1,h2,h3,h4,h5,h6{font-size: 21px;}
	.box {margin: 130px auto 40px auto;}
	.nav {margin-top: -100px;}
	.container{max-width: 480px;bottom: 117px;}
	.open_form{height: 420px !important;bottom: 120px;}
	.pep-logo{width: 150px;height: 150px;}
	.box,.top_flap, .top_flap.close_sesame, .top_flap.top_flapImg, .top_flap.top_flapImg2, .side_flaps:before,.bottom_flap,.bottom_flap:before,.top_flap_top:before,.top_flap.close_sesame:before,.top_flap:before{max-width: 540px;}
	.top_flap_top:before{ height:78px;top: -78px;}
	.top_flap, .top_flap.close_sesame, .top_flap.top_flapImg, .top_flap.top_flapImg2,.top_flap.close_sesame:before{height: 399px;}
	.top_flap:before{height: 450px;}
	.top_flap.close_sesame,.top_flap{top: -399px;}
	.box,.side_flaps:before,.bottom_flap,.bottom_flap:before{height: 523px;}
	.box .button{bottom: 75px;font-size: 25px;}
	.col-md-4{margin-top:50px;}
	.reset{z-index: 10;}
	.dl-menu { margin-top: 0px;}
	.phone:hover{width: 230px;margin-right:0px;}
}
@media only screen and (max-width: 480px){
	.mobileNav2{display:none;}
	.container {bottom: 17px;width: 355px;height: 300px;}
	.open_form{height: 270px !important;bottom: 120px;}
	.top_flap, .top_flap.close_sesame, .top_flap.top_flapImg, .top_flap.top_flapImg2,.top_flap.close_sesame:before{height: 269px;}
	.top_flap:before{height: 269px;}
	.top_flap.close_sesame,.top_flap{top: -269px;}
	.box,.side_flaps:before,.bottom_flap,.bottom_flap:before{height: 360px;}
	.top_flap_top::before {height: 48px; top: -48px;}
	.reset {font-size: 20px;line-height: 17px;width: 20px;height: 20px;border: 2px solid #fff; right: 0px;}
	.frame-padding { margin-top: 5px;}
	h1, h2, h3, h4, h5, h6 {font-size: 16px;}
	.box .button {bottom: 45px;}
	.pep-logo { width: 120px; height: 120px;}
	.mobileNav{font-size:20px;cursor:pointer;margin-top: -10px;position: absolute; display:block; color:#fff;}
	.nav{
	height: 100%;
  width: 0;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  margin-top:0px;}
  .sidenav .closebtn { position: absolute; top: 0; right: 25px;font-size: 36px;margin-left: 50px;}
.nav .closebtn { color:#fff; text-decoration:none;display: block;position: absolute;top: 0;right: 25px;font-size: 36px;margin-left: 50px;}
mobileNone{display:none;}
.none{display:block;}
}