@font-face {
  font-family: 'Chunkfive';
  src: URL('../fonts/Chunkfive Ex.ttf');
}

@font-face {
  font-family: 'Montserrat';
  src: URL('../fonts/Montserrat-Regular.ttf');
}

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

body{
	background-color: #1093f5;
	font-family: Montserrat;
	color: white;
	background: linear-gradient(to right, #003963, #00464f);
	}

#wrapper{
	background: url("../img/bg.png");
	min-height: calc(100% - 70px);
}

#envelope{
	margin: 0 auto;
	margin-top: 20px;
	text-align: center;
	max-width: 1340px;
}

#envelope-top{
	display: block;
	background: url("../img/envelope-top.png") no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 50.077%;
}

#content-top{
	margin-top: -44.5%;
}
 
h1{
	font-family: Chunkfive;
	display: block;
	text-align: center;
	font-size: 36px;
	line-height: 0.95;
	color: white;
}	

#envelope-middle{
	display: block;
	background: url("../img/envelope-middle.png") repeat-y;
	background-size:100%;
	background-position:center top;
	min-height: 256px;
}

#envelope-bottom{
	display: block;
	background: url("../img/envelope-bottom.png") no-repeat;
	background-size: contain;
	width: 100%;
	height: 0;
	padding-top: 7%;

}

#selector{
	margin-top: 22px;
	margin-bottom: 34px;	
}

#selector label{
	cursor: pointer;
}

.personal, .company{
	position: relative;
	display: inline-block;
	width: 62px;
	height: 62px;
	border-radius: 32px;
	border: 2px solid white;
	cursor: pointer;
	margin: 0 10px;
	color: #59c8ff;	
}

.personal{
	background: url("../img/personal.png") 16px 12px no-repeat;
}	

.company{
	background: url("../img/company.png") 16px 14px no-repeat;
}

.company label{
	margin-left: -3px;
	}

.personal-selected{
	width: 62px;
	height: 62px;
	border: 2px solid white;
	background: url("../img/personal-act.png") 16px 12px no-repeat;
	background-color: white;
	color: white;
	font-weight: bold;
}

.company-selected{
	width: 62px;
	height: 62px;
	border: 2px solid white;
	color: white;
	background: url("../img/company-act.png") 16px 14px no-repeat;
	background-color: white;
	font-weight: bold;
}

.sel-text{
	position: absolute;
	top:64px;
	left:-2px;
	font-size: 14px;
}

.cta-text{
	display: block;
	font-size: 18px;
	color: #FFF38C;
	line-height: 1.2;
}

#form-viewport{
	white-space: nowrap;
	overflow-x: hidden;
	width: 300px;
	margin: 0 auto;
	margin-top: 10px;
}

#form-p, #form-c{
	width: 300px;
	display: inline-block;
	vertical-align: top;
}

.e-input{
	display: block;
	height: 32px;
	width: 300px;
	border-radius: 18px;
	border: 0;
	margin-bottom: 4px;
	margin-top: 2px;
	padding: 0 16px;
	font-size: 16px;
	color: #aadaff;
	background-color: #00206b;
	border: 1px solid #3371b8;
	font-family: 'Montserrat';
}

.e-input:focus {
    box-shadow: none;
}

::placeholder {
    color: #3d9adb;
    font-family: 'Montserrat';
}

.btn-generate{
	display: inline-block;
	width: 208px;
	margin-top: 8px;
	cursor: pointer;
	position: relative;
}

.btn-generate:hover svg .st1 { fill: #ff8c00 }

.btn-text{
	position: absolute;
	top:10px;
	left: 50px;
	font-size: 22px;
	font-weight: bold;
}

#results{
	display: block;
	margin: 0 auto;
}

#results-p, #results-c{
	display: none;
	flex-wrap: wrap;
	justify-content:flex-start;
	align-content: flex-start;
	color:#117cde;
}

#results-p{
	max-width: 1000px;
}

#results-c span, #results-p span{
	display: block;
	color: #ff7800;
	font-weight: bold;
	font-size: 14px;
	margin: 0 auto 8px auto;
	text-transform:uppercase;	
}

.email-list{
	padding: 0 8px;
	margin-bottom: 28px;
	width: 294px;
}

.list-addr{
	font-weight: 16px;
}

.list-addr li{
	padding: 6px;
	border-bottom: 1px dotted #b5cde8;
}


#footer{
	text-align: center;
	padding: 35px 0;
	font-family: Chunkfive;
	font-size: 18px;
	color: white;
	background-color: rgba(0,0,0,0.25);
}

#footer a{
	color: #ffe400;
	font-size: 20px;
	padding: 2px 30px 12px 5px;
	}

/*---------------------------------------------------*/
@media screen and (max-width:1359px) {
	#results-p, #results-c {
		max-width: none;
	}
	#results{
		width: 885px;
	}

}


/*---------------------------------------------------*/
@media screen and (max-width:1259px) {
	h1{
		font-size: 50px;
		margin-top: 40px;
	}

	#envelope-top{
    padding-top: 50.01%;
}
	#selector{
		margin: 8% 0 0 0;
	}
	.cta-text{
		color: #0b469a;
	}
	.e-input{
	color: #2e6792;
	background-color: #edf3fa;
	border: 1px solid #b8cde6;
	font-family: 'Montserrat';
	}

	::placeholder {
    color: #7996b9;
	}
}	

/*---------------------------------------------------*/
@media screen and (max-width:980px) {
	h1{
		font-size: 36px;
		margin-top: 30px;
	}

	#results{
		width: 590px;
	}
}	

/*---------------------------------------------------*/
@media screen and (max-width:780px) {

	h1{
		font-size: 36px;
		margin-top: 22px;
	}

	#selector{
		margin: 6% 0 0 0;
	}
}	

/*---------------------------------------------------*/
@media screen and (max-width:640px) {
	h1{
		margin-top: 20px;
		font-size: 32px;
	}

	.personal, .company{
		margin: 0 6px;
	}

	#selector{
		margin: 2% 0 0 0;
	}

	#results{
		width: 295px;
	}
}	

/*---------------------------------------------------*/
@media screen and (max-width:480px) {
	h1{
		margin-top: 30px;
	}	

	#selector{
		margin: 0;
	}

	.sel-text{
		font-size: 14px;
		left: -2px;
	}

	#form{
		margin-top: 36px;
	}

	.personal, .company{
		margin: 0 10px;
		border: 2px solid #117cde;
		color:#73bcff;
	}

	.personal{
		background: url("../img/personal-act.png") 16px 12px no-repeat;
	}	
	.company{
		background: url("../img/company-act.png") 16px 12px no-repeat;
	}	
	.personal-selected{
		border: 2px solid white;
		background: url("../img/personal.png") 16px 12px no-repeat;
		background-color: #117cde;
		color: #117cde;
	}
	.company-selected{
		background: url("../img/company.png") 16px 12px no-repeat;
		background-color: #117cde;
		color: #117cde;
	}	
	
}	


/*---------------------------------------------------*/
@media screen and (max-width:375px) {
	h1{
		margin-top: 28px;
		font-size: 24px;
	}	
	.cta-text{
		font-size: 16px;
	}