@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

*{
	margin: 0;
	padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html, body{
	font-family: 'Rubik', sans-serif;  
	width: 100%;
	height:100%;
}

html {
	font-size: 16px;
}

h1 {
	font-size: 6rem;
}

h2 {
	font-size: 3rem;

}

h3 {
	font-size: 2rem;
	font-weight: 500;
}

h4{
	font-size: 28px;
	font-weight: 500;
}

p{
	font-size: 20px;
	font-weight: 300;
}

.italic{
	font-style: italic;
}




body{
	background-color: #353a40;
  	color:#b4ada5;
}

/*Start Content as the Wrapper*/
content {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto  auto 1fr auto auto;
    /*grid-template-columns: 100%;*/
}
/*End Content as the Wrapper*/





.logo{
  	background-color: #272b2f;
	padding: 30px 30px 30px 30px;
	text-align: center;

}
 .logo img {
  width: 100%;
  height: auto;
  max-width: 576px;
  
}




.helloWrapper img {
  width: 100%;
  height: auto;
 max-width: 400px;

}



.helloWrapper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 40px 20px 10px 20px;
}

.say-hello{
	grid-column-start: 2;
	grid-column-end: 3;

	/*padding: 0 10px 40px 10px;*/
}

.say-hello h2{
	font-weight: 500;
}

.hello-form {
  grid-column-start: 2;
  grid-column-end: 3;


}

form{
  margin-top: 50px;
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.form-control{
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 2px solid gray;
	color: #fff;
	font-size: 18px;
	margin-bottom: 16px;
	-webkit-appearance: none;
}


input{
	height: 45px;
	
}


form .submit{
	background: #ff5722;
	border-color: transparent;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	height:50px;
	margin-top: 20px;
}

form .submit:hover{
	background-color: #f44336;
	cursor: pointer;
}

hr .style1 {
	color: 10px solid #535f6b;
	border: none;
	}
	
	
form .website{ 
	display:none;
	} /* hide because is spam protection */


/*Start Navigation Bar and Links*/
.navbar{
  	background-color: #2b2f34;
  	text-align: end;
}


.navbar li {
	padding: 10px;
}


.navbar ul {
	list-style: none;	
	display: inline-flex;
	margin: 10px;
}

.navbar a {
	text-decoration: none;
}

.navbar a:link {
    color: #b4ada5;
}

.navbar a:visited {
    color: #88837d;
}

.navbar a:hover {
    color: #fdf3e7;
}

#navigation li a.current{
   color: #f99420;
}
/*End Navigation Bar and Links*/






/*Start Header*/
.header{
	background-color: #353a40;
	padding: 40px 40px 40px 40px;
	line-height: 1;
}
/*End Header*/

@media only screen and (min-width: 400px){

}


@media only screen and (min-width: 480px){
  .navbar{
	padding-right: 20px;
}

.helloWrapper{
	grid-template-columns: 5% 1fr 5%;
	grid-template-rows: auto;
	padding: 40px 0 0 0;
	
}



}


@media only screen and (min-width: 640px){

.helloWrapper{
	grid-template-columns: 10% 1fr 10%;
	grid-template-rows: auto;
	padding: 40px 0px 0 0;
	
}




}

@media only screen and (min-width: 768px){

.helloWrapper{
	grid-template-columns: 15% 1fr 15%;
	grid-template-rows: auto;
	padding: 40px 0 0 0;
	
}

}


@media only screen and (min-width: 800px){




}

@media only screen and (min-width: 1024px){




}


/*Start Footer*/

/*Start Social Portion of Footer*/
.footerSocial{
  	background-color: #2b2f34;
	width: 100%;
	padding: 30px 0 10px 0;
	text-align: center;
	font-weight: 300;
	margin: 40px 0 0 0;

}

.footerSocial img{
	max-width: 40px;
	margin: 0 5px 0 5px;
}

.footerSocial li {
   display:inline-block;
   padding: 10px;
}
/*End Social Portion of Footer*/


/*Start Copyright Portion of Footer*/
.footerCopyright{
  	background-color: #272b2f;
	color: #3d4249;
	width: 100%;
	padding: 20px 0 20px 0;
	text-align: center;
	font-weight: 300;

}

.footerCopyright h3{
	font-weight: 500;
	font-size: 1rem;
	color:#b4ada5;
	line-height: 1.5;
}



.footerCopyright p{
	font-size: 12px;
}
/*End Copyright Portion of Footer*/



/*Start Navigation Bar and Links*/



.footerSocial li {
	padding: 10px;
}


.footerSocial ul {
	list-style: none;	
	display: inline-flex;
	margin: 10px;
}

.footerSocial a {
	text-decoration: none;
}

.footerSocial a:link {
    color: #b4ada5;
}

.footerSocial a:visited {
    color: #88837d;
}

.footerSocial a:hover {
    color: #fdf3e7;
}

#navigation li a.current{
   color: #f99420;
}
/*End Navigation Bar and Links*/


/*End Footer*/