@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;300;400;700&display=swap');
/* CSS Document */

	*{
		padding:0px;
		margin: 0px;
		box-sizing: border-box;
		font-family: 'Roboto', sans-serif;
	}

	html {scroll-behavior: smooth;}
	
	body, html{height: 100%;}
	
	body{margin-top:30px;}
	
    body.no-scroll{overflow: hidden;}

	.container{	
	    width: 1140px;
		margin: 0px auto;
		min-height: 200px;
		padding: 100px 0px;
		display: flex;
		justify-content: left;
		flex-direction: column;
	}

	header{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		display: flex;
		height: 200px;
		transition:all 0.2s;
		background-image: url("img/yoga.jpg");
		z-index: 9999;
	}
	
	header.solid{
		background-color:white; 
		border-bottom:1px solid #ececec;
		height: 80px;
	}

	header.solid a{
		color: black;
	}


	header > section{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0px 80px;
	}
	
	header .first{
		color: black;
		font-size: 12px;
		justify-content: flex-start;
	}

	header .first span{
			margin-left: 4px;
			font-weight: 300;
	}
	
	header .middle{
		justify-content: flex-end;
	}
	
	header .middle a{
		margin: 20px;
		text-decoration: none;
		color: black;
		position: relative;
		font-size: 14px;
		transition: 0.5s;
	}

	header .middle a:focus{
		color: #E3667D;	
	}

	header .middle a:hover{
		color: #E3667D;	
	}

	header .last{
		justify-content: flex-end;
	}

	header .last a{
		display: block;
		font-size: 14px;
		padding: 10px 14px;
		box-sizing: border-box;
		background-color: #ffffff1c;
		border-radius: 6px;
		text-decoration: none;
		color: black;
	}

	header .last a:hover{
		background-color: #E3667D;
		transition: all 0.2s ease;
		color: white;
	}

    header p{    
		color: #3C4043;
		line-height: 32px;
		font-weight: 400;
		margin-bottom: 32px;
		
    }
    ul.a {
    		list-style-type: square;
    		margin-left: 1.5em;
	    }

	#Form{
		width: 100%;
		height: auto;
		padding: 0px 40px;
		background-color: white;
	}

	#Form h2{margin-bottom: 48px;}

	#Form h1{
		margin-bottom: 16px;
		font-size: 52px;
		font-weight: 200;
	}
	
	#Form #Divider{
		height: 4px;
		width: 100%;
		display: block;
		margin-bottom: 48px;
		background-color: #E3667D;
	}
	
	#Form #Content{
		display: flex;
		width: 60%;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 54px;
	}
	
	#Content .row{
		display: flex;
		flex-direction: row;
	}
	
	.input-group{
		flex:1;
		display: flex;
		flex-direction: column;
		margin:0px 6px;
	}

	.input-group button{
		background-color: #E3667D;
		color: white;
		border: none;
		height: 48px;
		width: 200px;
		border-radius: 4px;
		font-size: 16px;
		font-weight: bold;
		margin-top:12px;
		cursor: pointer;
		transition: all ease 0.2s;
	}

	.input-group button:hover{
		background-color: white;
		color: #E3667D;
		border: 1px solid #E3667D;
	}
	

	#Content input{
		height: 48px;
		background-color: white;
		border: 2px solid #e7e7e7;
		border-radius: 4px;
		margin-top: 8px;
		padding: 12px;
		font-size: 18px;
		font-weight: 300;
		margin-bottom: 24px;
	}
	/*	#Content dropdown-content{*/
	/*	height: 48px;*/
	/*	background-color: white;*/
	/*	border: 2px solid #e7e7e7;*/
	/*	border-radius: 4px;*/
	/*	margin-top: 8px;*/
	/*	padding: 12px;*/
	/*	font-size: 18px;*/
	/*	font-weight: 300;*/
	/*	margin-bottom: 24px;*/
	/*}*/
	
	#Content label{
		font-size: 14px;
	}

	#Form form input:focus{
		border:blue;
	}

	#Footer{
		background-color:black;
		padding: 0px 40px;
	}

	#Footer .subHead h1 {
		float: left;
		line-height: 20px;
		font-size: 52px;
		color: white;
	}

	#Footer .subCount span {
		color: white;
		font-weight: 700;
	}

	#Footer .line {
		opacity: 0.2;
	}

	#Footer .container{
		align-items: center;
	}

	.contact{
		display: flex;
		color: white;
		padding: 0px;
		
	}

	.contact h2{margin-bottom: 12px;}
	
	.contact > section{
		width: 100%;
	}

	.contact ul li{
		list-style-type: none;
		color:#828d96;
		font-size: 14px;
    	margin-bottom: 10px;
    	margin-left: 1.5em;
	}

@media only screen and (max-width: 900px){
	
	body{margin-top:60px;}
	
	.container{
		width: 100%;
	}
	
	header{
		flex-direction: column;
	}
	
	header > section{
		justify-content: center !important;
	}
	
	header .left{
		font-size: 8px;
		text-align: center;
	}
	
	header.solid{
		height: 120px;
	}
	
	#Form #Content{
		width: 100%;
	}
	
	#Content .row{flex-direction: column;}

	header .last {
    	display: none;
	}
	
	.input-group button{width: 100%;}
}