/* == 2018 WELCOME/JOIN/RENEW/REJOIN POPUP CSS == */

/* popup visibility */

.popup18-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9998 !important;
	background-color: rgba(0, 0, 0, 0.8);
	opacity: 0;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.popup18-overlay.active {
	opacity: 1;
	visibility: visible;
}
@media(max-width:800px){

	.popup18-overlay{
			position:absolute;
		}

}
.popup18.active {
  visibility: visible;
  opacity: 1;
  box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.2);
  transition: 1.1s ease-out;
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* popup default style */

.popup18 {
	z-index: 9999 !important;
  background:url('popup-welcome.jpg');
  background-size:cover;
	background-repeat:repeat-y;  
	overflow-x:hidden;
	overflow-y:hidden;
  display: flex;
	align-items: center;
	height:548px;
	max-height:100vh;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  background-color: #000;
  width:100%;
  max-width: 900px;
  border-radius: 0px;
  border: 1px solid rgba(255, 2550, 255, 0.2);
  opacity: 0;
  overflow-y: auto;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    transition: 1.1s ease-out;
   -webkit-filter: blur(8px);
          filter: blur(8px);
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
  box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
  margin-top:-5%;
}





/* close button */
.popup18 .close-popup18 {
  z-index:99999;
  position: absolute;
  cursor: pointer;
  top: 5px;
  right: 15px;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.3s;
}
.popup18 .close-popup18 svg {
  width: 1.75em;
  height: 1.75em;
}
.popup18.active .close-popup18 {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  opacity: .6;
}
.popup18.active .close-popup18:hover {
  opacity:1 !important;;
}


/* popup full width positioning */
.popup-interior {
  position:relative;
  width:100%;

}
.popup18-right {
	position:absolute;
  right:calc(5% + 10px);
  right:12px;
  bottom:10px;
}  

.popup18-left {

  width:50%;
  padding-left:50px;
  font-family: futura-pt-condensed, "Didact Gothic", "Arial Narrow", Helvetica, Arial, sans-serif;  
}



/* popup responsitivity */

  
@media(max-width:700px){

  
  .popup18-left { 
    width:100%;
    padding:45px;
  }

  .popup18-right { 
    position:relative;
    right:0px;
    width:100%;
  }
  .popup18-button {
    flex-grow:1;
  }
  .button-one {
    margin-left:15px;
  }
}


@media(max-width:500px){

    .popup18 {
     height:auto;
    }

    .popup18-buttons {
      flex-direction:column;
    }
    .popup18-button {
     margin-left:15px;
     margin-bottom:20px;
    }

}




/* popup default buttons */

  .popup18-buttons {
		display: flex;
		justify-content: space-around;
	}
  .popup18-button {
    background:rgba(236,0,140,.3);
    font-family: 'PT Sans Narrow';
    font-family: futura-pt-condensed, "Didact Gothic", "Arial Narrow", Helvetica, Arial, sans-serif;
    color:white;

		font-size:24px;
		padding:15px 30px;
		text-transform:uppercase;
		margin-right:14px;
		font-weight:800;
		text-decoration:none;
  }
  .button-one:hover,.button-two:hover{
		background-color:#eee;
		color:black;
	}
  .popup18-button .fa {
  font-size:19px;
  font-weight:bold
	}
	

 

 @supports (offset-rotation: 0deg) {
  .popup18.active {
    offset-rotation: 0deg;
    offset-path: path("M 250,100 S -300,500 -700,-200");
  }
  .popup18 {
    offset-distance: 100%;
  }
}
@media (prefers-reduced-motion) {
  .popup18.active {
    offset-path: none;
  }
}



/* popup typography */

.popup18 h2 {
  margin-top: 0;
  font-size: 44px;
  font-family: 'Open Sans Condensed', 'Didact Gothic', 'Arial Narrow',"Segoe UI", Helvetica, Verdana, Arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  display: block;
  color:white;
}


.popup18 h3 {
  font-size: 26px;
  margin-top: 0;
  font-family: 'Didact Gothic', 'Arial Narrow',"Segoe UI", Helvetica, Verdana, Arial, sans-serif;
  font-weight: 900;
  display: block;
  color:white;
  letter-spacing:.8px;
}
.popup18 h4 {
  font-size:24px;
  font-family: 'Didact Gothic', 'Arial Narrow',"Segoe UI", Helvetica, Verdana, Arial, sans-serif;
  font-weight:300;
  color:white;
  letter-spacing:.9px;

}