/* CSS FONTS */
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Graduate');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS CUSOMIZATION */
body{
	font-family: 'Graduate', cursive;
}
.content-center{
	width:90%;
	margin:0 auto;
	display:table;
}
.header-top {
  display: table;
  padding: 10px 0;
  width: 100%;
}

.header-top img {
  display: table;
  float: left;
  max-width: 240px;
}
h1 {
  color: #dddddd;
  display: table;
  float: right;
  font-size: 30px;
  letter-spacing: 4.1px;
  text-align: right;
  text-transform: uppercase;
  line-height:2.7;
}
header {
  background-color: #000;
}
.header-top span,h2 span {
  color: #60bb46;
}
section{
	background-image:url('img/2023030305.png');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	padding:63px 0 60px;
}
.top-section {
  width: 50%;
  margin-bottom: 16px;
}
h2 {
  color: #fff;
  font-size: 30px;
  letter-spacing: 4.1px;
  line-height: 1.73;
  text-align: center;
}
.register-section {

  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 45px 0 60px;
  width: 50%;
}
h3 {
  color: #fff;
 font-family: JosefinSans;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2.3px;
  line-height: 2.17;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
}
input {
  display: table;
  margin: 0 auto 17px;
  padding: 5px 8px;
  width: 40%;
   box-sizing: border-box;
   font-family: 'Open Sans', sans-serif;
   -webkit-appearance: none;
   border-radius:0;
    border: medium none;
}
input[type=name]::placeholder, input[type=email]::placeholder{
	color:#000;
    opacity:1;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    
}
.sign-me {
  background-color: #60bb46;
  box-sizing: border-box;
  color: #000;
  -webkit-appearance: none;
  display: table;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 0 auto 10px;
  padding: 13px 30px 10px;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
 
   border-radius:0;
 border: medium none;
   -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out; 
}
.sign-me:hover {
  background: #fff none repeat scroll 0 0;
  color: #60bb46;
  opacity: 1;
}
.register-section span {
  color: #fff;
  display: table;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 1.3px;
  line-height: 1.2;
  margin: 4px auto 0;
  text-align: center;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
footer {
  padding: 30px 0;
  background-image:url('img/ft_background.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Josefin Sans', sans-serif;
}
p:first-child {
  margin-bottom: 20px;
}
footer p {
  color: #fff;
  font-size: 14px;
  line-height: 1.64;
    font-family: 'Josefin Sans', sans-serif;
}
footer a{
	-webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out; 
}
footer a:hover {
  color: #60bb46;
   
}

/*RESPONSIVE DESIGN*/

@media(max-width:1030px){
	.content-center {   width: 95%;}
}
@media(max-width:959px){
	.header-top img {   max-width: 230px;margin: 3px 0;}
	h1,h2 {    font-size: 25px; }
	.top-section {   width: 69%;float:left;}
	.register-section {    float: left;    width: 69%;}
	section,footer {   padding: 40px 0;}
	
	
	
	
}
@media(max-width:767px){
	.header-top img {   max-width: 200px;}
	h1 {  font-size: 20px;  margin: 3px 0;}
	.top-section {  margin: 0 auto;  width: 74%;float:none;}
	.register-section {  float: none;  margin: 0 auto;  width: 60%;}
	h2 {   font-size: 22px;   line-height: 1.5; }
	section ,footer{   padding: 26px 0;}
	h3 {    font-size: 20px;   letter-spacing: 2.1px;  line-height: 2;  }
	.sign-me {   font-size: 15px;    line-height: 1.1;  margin: 0 auto 7px;  padding: 9px 24px 5px; }
	input {    margin: 0 auto 15px;  padding: 4px 6px;  width: 61%;}
	footer p {    font-size: 13.5px;  line-height: 1.5;}
	p:first-child {  margin-bottom: 15px;}
	
	
}
@media(max-width:639px){
	.header-top img {  max-width: 170px;}
	h1 {  font-size: 17px; letter-spacing: 3.1px;}
	.top-section ,.register-section{   width: 60%;}
	h2 {   font-size: 18px;   line-height: 1.4; }
	h3 {  font-size: 16px;  letter-spacing: 1.9px;  line-height: 1.8;}
	input {  margin: 0 auto 12px;  padding: 3px 6px;  width: 66%;}
	.sign-me {  font-size: 14px;    margin: 0 auto 6px;  padding: 5px 17px 1px;}
	section ,footer{   padding: 22px 0;}
	footer p {    font-size: 13px;  line-height: 1.3;}
}
@media(max-width:479px){
	.header-top img {  float: none;  margin: 0 auto;  max-width: 155px;}
	h1 {  display: block;  float: none;  font-size: 15px;  letter-spacing: 2.1px;  text-align: center;line-height: 2;}
	.header-top {  padding: 3px 0;  }
	h2 {   font-size: 16px;   line-height: 1.2; }
	.top-section, .register-section {  width: 90%;}
	.register-section {   padding: 30px 0 33px; }
	h3 {  font-size: 15px;  letter-spacing: 1.5px;  line-height: 1.5;  margin-bottom: 3px;}
	input[type="name"]::placeholder, input[type="email"]::placeholder {  font-size: 13px; }
	input {  margin: 0 auto 12px;  padding: 2px 6px;  width: 69%;}
	.sign-me {  font-size: 13px;     }
	footer p {    line-height: 1.2;}
	p:first-child {  margin-bottom: 10px;}
	section ,footer{   padding: 16px 0;}
}