.popup{
	display: block;
	width: 100%;
	max-width:600px;
	height: auto;
	background: #fff;
	border-radius: 5px;
	padding: 40px;
	z-index: 999;
	overflow: hidden;
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
	-moz-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
	-webkit-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
	box-shadow: 0px 0px 20px rgba(56,56,56,.2);
	text-align: center;
	line-height: 7em;
	font-size: 2em;
	position: absolute;
	-webkit-transition: all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	top: calc(50% - 125px);
	left: calc(50% - 340px);
	
}

.popup h1{
  font-family:'Raleway', sans-serif;
  color:#013854;
  text-transform:capitalize;
  font-weight:200;
  font-size:22px;
  position:relative;
  left:10px;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition-delay:200ms;
  transition-delay:200ms;
  line-height:1.2;
}
.popup h2{
 font-family:'Raleway', sans-serif;
  color:#013854;
  text-transform:capitalize;
  font-weight:200;
  font-size:20px;
  position:relative;
  left:10px;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition-delay:400ms;
  transition-delay:400ms;
   line-height:1.2;
}
.popup h3{
  font-family:'Raleway', sans-serif;
  color:#013854;
  text-transform:capitalize;
  font-weight:200;
  font-size:30px;
  margin:30px 0;
  position:relative;
  left:10px;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition-delay:600ms;
  transition-delay:600ms;
   line-height:1.2;
}
.popup p{
  font-family:'Raleway', sans-serif;
  color:#4a4a4a;
  text-transform:capitalize;
  font-weight:200;
  font-size:14px;
  position:relative;
  left:10px;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition-delay:800ms;
  transition-delay:800ms;
   line-height:1.4;
}

.popup .close{
  position:absolute;
  top:-80px;
  right:15px;
  font-size:.9em;
  font-weight:lighter;
  cursor:pointer;
  color:#013854;
  -webkit-transition:.5s;
  transition:.5s;
}

.overlay{
  overflow-x:hidden;
  overflow-y:hidden;
   -webkit-transition:all 3s ease-in-out;
   transition:all 3s ease-in-out;
}

.overlay::before{
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 8;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
   -webkit-transition:3s;
   transition:3s ;
}

@media only screen and (max-width: 768px) {
.popup {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    background: #fff;
    border-radius: 5px;
    padding: 40px;
    z-index: 999;
    overflow: hidden;
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
    -moz-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
    -webkit-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
    box-shadow: 0px 0px 20px rgba(56,56,56,.2);
    text-align: center;
    line-height: 7em;
    font-size: 2em;
    position: absolute;
    -webkit-transition: all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    top: calc(50% - 125px);
    left: calc(50% - 240px);
}
}
@media only screen and (max-width: 480px) {
.popup {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	background: #fff;
	border-radius: 5px;
	padding: 30px 10px;
	z-index: 999;
	overflow: hidden;
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
	-moz-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
	-webkit-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
	box-shadow: 0px 0px 20px rgba(56,56,56,.2);
	text-align: center;
	line-height: 7em;
	font-size: 2em;
	position: absolute;
	-webkit-transition: all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	top: calc(50% - 125px);
	left: calc(50% - 170px);
}
.popup h3{
  font-size:26px;
}
}