@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url("https://fonts.googleapis.com/css?family=Oxygen:700|Source+Sans+Pro");


html, body{
  margin: 0;
  padding: 0;
  font-family: 'Roboto';
}

h1{
  margin-top: 4rem;
  color: black;
}

/*  -----  480  ----- */
@media screen and (max-width: 480px){
	.contain
	{
		padding-left: 5%;
		padding-right: 5%;
		margin-left: auto;
		margin-right: auto;
	}
}
/*  -----  720  ----- */
@media screen and (min-width: 481px) and (max-width: 1002px) {
	.contain
	{
		padding-left: 1.502145922746781%;
		padding-right: 1.502145922746781%;
	}
}
/*  -----  976  ----- */
@media screen and (min-width: 1003px){
	.contain
	{
		max-width:  1003px;
		padding-left: 1.278118609406953%;
		padding-right: 1.278118609406953%;
		margin-left: auto;
		margin-right: auto;
	}
}

#header_unsub{
  padding: 50px;
  background-color: #373b50;
}

#p_desc{
  width: 80%;
}
#zone_input{
  margin-top: 3rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 4px;
}
#input_title{
  font-size: 0.9rem;
}
#b_input{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
}
#email_exp{
  height: 60px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.3rem;
  border-radius: 8px;
  background-color: #e0e2ea;
  border: none;
  color: #373b50;
}
#btn_unsub{
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  height: 60px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #373b50;
  color: #FFFFFF;
  border-radius: 8px;
  cursor: pointer;
}

#zone_result{
  margin-top: 2rem;
}
#b_ico_and_desc{
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
  align-items: center;
}
#b_ico_check{
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #e0e2ea;
  border-radius: 50px;
}
#ico_check{
  color: #9dc56e;
  font-size: 2rem;
}
#result_desc{
  color: #9dc56e;
}

.hide{
  display: none;
}