/* The Modal (background) */
.newsletter-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top:30px;
  z-index:1000;
  
}

/* The Close Button */
.newsletter-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
	right: 10px;
}

.newsletter-close:hover,
.newsletter-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.newsletter-modal-body{
	overflow:hidden;
	background-size: 400px 500px !important;
	background-repeat:no-repeat  !important;
	
}


.newsletter-modal-body iframe{
	background: #ececec;
	width: 100%;
	height:100%;
	margin: 0;
	
}


/* Modal Content */
.newsletter-modal-content {
  width:800px;
  height:500px;
  position: relative;
  background-color: #fefefe;
  padding: 0;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
	
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,-50%);
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}


#newsletter-myBtn-container{
	position:absolute;
    transform-origin: 100% 100%;
    transform: rotate(-90deg);
    right: 0px;
    top:55vh;
    overflow:hidden;

    padding-top: 10px;
    padding-right: 10px;
}
#newsletter-myBtn{
	background:#000;
	color:#fff;
	padding: 10px 20px;
	cursor: pointer;
	z-index:999;
	border-top: 5px solid #aaa;
	display:none;
	
	position:relative;
    /*transform-origin: 100% 100%;
    transform: rotate(-90deg);
    right: 0px;
    top:55vh;*/
	
	font-family: "Fjalla One", sans-serif;
	font-size: 1.2em;
    letter-spacing: 2px;
	
}

#newsletter-myBtn:hover{
	border-color:#888;
	
}

.newsletter-modal-iframe-container{
	width:400px;
	height:500px;
	float:right;
	padding:20px;
	background:#ececec;
	
}


@media (max-width:1024px){
	.newsletter-modal{padding-top:0;}
	.newsletter-modal-content {
		max-width:400px;
	}
}
@media (max-width:400px){
	.newsletter-modal-iframe-container{
		width:auto;
		height:535px;
	}
	.newsletter-modal-content{
		left: auto;
		margin-right: auto;
		transform: translate(0,0);
		width:100%;
		min-width:320px;
		top:0;
	}
	.newsletter-modal-iframe-container{
		float:none;
	}
}

@media (max-height:500px){
	.newsletter-modal-content{
		transform: translate(-50%,0);
		top:0;
		height:auto;
	}

}

@media (max-width:400px) and (max-height:500px){
	.newsletter-modal-content{
		transform: translate(0,0);
		left:0;
	}

}


#newsletter-myBtn .close{
    position: absolute;
    top: -12px;
    right: -8px;
    background: #ccc;
    border-radius: 100px;
    width: 15px;
    height: 15px;
    text-align: center;
    font-size: 10px;
    padding: 1px;
    line-height: 15px;
    letter-spacing: 0px;
    font-weight: bold;
}

#newsletter-myBtn .close:hover{
    background:#aaa;
}