/****FULL SCREEN GLOBAL****/


		/*FS*/	body{
					background-color: rgba(255,255,255,1.00);
					font-family: 'Open Sans', sans-serif;
					margin: 0;
					overflow-x: hidden;
					padding: 0;}

		/*FS*/	.container{
					margin: auto;
					overflow: hidden;
					width: 80%;}

		/*FS*/	.current a{
					color: #e8491d;} 

		/*FS*/	a:hover{
					color: #ffffff;}

				@font-face{
					font-family: "Sweet Home Oklahoma";
					font-style: normal;
					font-weight: normal;
					src: url("fonts/Sweet Home Oklahoma.ttf"),
						url("fonts/sweet_home_oklahoma-webfont.woff") format('woff'),
						url("fonts/sweet_home_oklahoma-webfont.woff2") format('woff2');}

	
/****FULL SCREEN HEADER****/

	
		/*FS*/	header .logo{
					float: left;
					font-family: "Sweet Home Oklahoma";
					font-size: 30px;
					letter-spacing: 5px;
					text-shadow: 3px 3px 2px #000000;}

		/*FS*/	header .logo h1{
					margin:0;
					opacity: 0;

							/****START LOGO ANIMATION****/

					position: relative;
					animation: logo;
					animation-duration: 1s;
					animation-delay: 0.25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes logo{
					0%{top: -50px; opacity: 0;}
					100%{top: 0; opacity: 1;}}

							/****END LOGO ANIMATION****/

		/*FS*/	header{
					background: rgba(53,66,74,1);
					border-bottom: rgba(232,73,29,1.00) 3px solid;
					color: #ffffff;
					min-height: 6vh;
					padding: 10px 0px 10px 0px;}

		/*FS*/	header a{
					color: #DDDDDD;
					font-size: 12.5px;			
					text-decoration: none;
					text-shadow: 2px 2px 2px #000000;
					text-transform: uppercase;
					transition: .5s;
					transition-timing-function: ease-in-out;}

		/*FS*/	header ul{
					letter-spacing: 2px;
					margin: 0;
					padding: 0;}

		/*FS*/	header li{
					display: inline;
					float: left;
					margin: 0px 0px 0px 0px;
					opacity: 0;
					padding: 0px 20px 0px 20px;

							/****START NAV ANIMATION****/	

					position: relative;
					animation: navanimation;
					animation-duration: 2s;
					animation-delay: 0.25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes navanimation{
					0%{opacity: 0;}
					100%{opacity: 1;}}

							/****END NAV ANIMATION****/

		/*FS*/	header nav{
					float: right;
					margin: 17.5px 0px 17.5px 0px;}



/****FULL SCREEN HAMBURGER MENU****/


		/*FS*/	.hamburger{
					display: none;
					float: right;
					margin: 10px 0px 5px 0px;
					opacity: 0;

							/****START HAMBURGER ANIMATION****/	

					position: relative;
					animation: hamburger;
					animation-duration: 2s;
					animation-delay: .25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes hamburger{
					0%{opacity: 0;}
					100%{opacity: 1;}}

							/****END HAMBURGER ANIMATION****/


/****FULL SCREEN SIDE_NAV****/


		/*FS*/	.side-nav{
					width: 0;
					position: fixed;
					z-index: 1;
					top: 0;
					right: 0;
					background-color:rgba(0,0,0,0.8);
					overflow-x: hidden;
					padding: 75px 0px 0px 0px;
					transition: .5s;
					transition-timing-function: ease-in-out;
					text-align: right;}

		/*FS*/	.side-nav a{
					padding: 0px 25px 25px 0px;
					color: #DDDDDD;
					display: block;
					font-size: 15px;
					opacity: 0;
					text-decoration: none;
					text-transform: uppercase;
					transition: .5s;
					transition-timing-function: ease-in-out;

							/****START SIDE-NAV ANIMATION****/	

					position: relative;
					animation: side-nav;
					animation-duration: 2.5s;
					animation-delay: 2s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes side-nav{
					0%{opacity: 0;}
					100%{opacity: 1;}}

							/****END SIDE-NAV ANIMATION****/

		/*FS*/	.side-nav a:hover{
					color: #ffffff;}

		/*FS*/	.side-nav .btn-close{
					position: absolute;
					top: 10px;
					left: 20px;
					font-size: 36px;}


/****FULL SCREEN SHOWCASE****/


		/*FS*/	#showcase{
					min-height: 92vh;
					background: url("img/house1.jpg") no-repeat center;
					background-size: cover;
					text-align: center;}

		/*FS*/	#showcase h1{
					color: #dddddd;
					font-size:60px;
					text-shadow: 5px 5px 8px #000000;
					text-transform: uppercase;
					margin: 300px 0px 300px 0px;
					opacity: 0;
					padding: 5px 0px 0px 0px;

							/****START SHOWCASE H1 ANIMATION****/	

					position: relative;
					animation: showcaseh1;
					animation-duration: 1s;
					animation-delay: .25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes showcaseh1{
					0%{right: -500px; opacity: 0;}
					100%{right: 0; opacity: 1;}}

							/****END SHOWCASE H1 ANIMATION****/


/****FULL SCREEN PLANS****/

		/*FS*/	#plans{
					min-height: 83.8vh;
					background: url("img/architect-architecture-blueprint-271667.jpg") no-repeat center;
					background-size:cover}

		/*FS*/	#plansbox{
					background: rgba(53,66,74,.85);
					border-radius: 25px;
					box-shadow: 15px 15px 30px #000000;
					width: 50%;
					margin: 250px 300px 50px 300px;
					padding: 30px 20px 60px 20px;}

		/*FS*/	#plans h1{
					color: #dddddd;
					font-size: 25px;
					opacity: 0;
					margin: 0px 0px 0px 0px;
					text-align: center;
					text-shadow: 2px 2px 5px #000000;
					text-transform: uppercase;

							/****START PLANS H1 ANIMATION****/	

					position: relative;
					animation: plansh1;
					animation-duration: 1s;
					animation-delay: .25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes plansh1{
					0%{top: -500px; opacity: 0;}
					100%{top: 0; opacity: 1;}}

							/****END PLANS H1 ANIMATION****/

		/*FS*/	#plans p{
					color:#FBE202;
					font-family: 'Rock Salt', cursive;
					font-size:35px;
					letter-spacing: 4px;
					line-height: 1.5;
					opacity: 0;
					margin: 40px 0px 0px 0px;
					text-align: center;
					text-decoration: none;
					text-shadow: 3px 3px 2px #000000;

							/****START PLANS P ANIMATION****/	

					position: relative;
					animation:contact;
					animation-duration: 1s;
					animation-delay: .25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes contact{
					0%{left: -500px; opacity: 0;}
					100%{left: 0; opacity: 1;}}

							/****END PLANS P ANIMATION****/


/****FULL SCREEN CONTACT****/


		/*FS*/	#contact{
					min-height: 83.8vh;
					background: url("img/blueprints-entrepreneur-hands.jpg") no-repeat center;
					background-size: cover;}

		/*FS*/	#contactbox{
					background: rgba(53,66,74,.85);
					border-radius: 25px;
					box-shadow: 15px 15px 30px #000000;
					width: 50%;
					margin: 250px 300px 50px 300px;
					padding: 20px 20px 40px 20px;}

		/*FS*/	#contact h1{
					color: #dddddd;
					font-size: 25px;
					opacity: 0;
					text-align: center;
					text-shadow: 2px 2px 5px #000000;
					text-transform: uppercase;

							/****START CONTACT H1 ANIMATION****/	

					position: relative;
					animation: contacth1;
					animation-duration: 1s;
					animation-delay: .25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes contacth1{
					0%{top: -500px; opacity: 0;}
					100%{top: 0; opacity: 1;}}

							/****END CONTACT H1 ANIMATION****/

		/*FS*/	#contact p{
					color: #dddddd;
					font-size:17.5px;
					line-height: 1.5;
					opacity: 0;
					margin-left: 160px;
					text-align: left;
					text-decoration: none;

							/****START CONTACT P ANIMATION****/	

					position: relative;
					animation:contact;
					animation-duration: 1s;
					animation-delay: .25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes contact{
					0%{left: -500px; opacity: 0;}
					100%{left: 0; opacity: 1;}}

							/****END CONTACT P ANIMATION****/

		/*FS*/	#contact a{
					color: #dddddd;
					text-decoration: none;
					transition: .5s;
					transition-timing-function: ease-in-out;}

		/*FS*/	#contact a:hover{
					color: #ffffff;}

		/*FS*/	#mobile_screen_phone_number{
					display: none;}

		/*FS*/	.fb-page{
					opacity: 0;
					padding: 0px 150px 0px 150px;

							/****START FACEBOOK ANIMATION****/	

					position: relative;
					animation:contact;
					animation-duration: 1s;
					animation-delay: 1s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes contact{
					0%{opacity: 0;}
					100%{opacity: 1;}}

							/****END FACEBOOK ANIMATION****/


/****FULL SCREEN SERVICES****/


		/*FS*/	#services{
					min-height: 83.8vh;
					background: url("img/planswithpencil.jpg")no-repeat center;
					background-size:cover;
					text-align: center;}	

		/*FS*/	#servicesbox{
					background: rgba(53,66,74,.85);
					border-radius: 25px;
					box-shadow: 15px 15px 30px #000000;
					width: 50%;
					margin: 150px 40px 50px 20px;
					padding: 20px 20px 20px 20px;}

		/*FS*/	#services h1{
					color: #dddddd;
					font-size: 25px;
					opacity: 0;
					text-align: center;
					text-shadow: 2px 2px 5px #000000;
					text-transform: uppercase;

							/****START SERVICES H1 ANIMATION****/	

					position: relative;
					animation: servicesh1;
					animation-duration: 1s;
					animation-delay: .25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes servicesh1{
					0%{top: -500px; opacity: 0;}
					100%{top: 0; opacity: 1;}}

							/****END SERVICES H1 ANIMATION****/

		/*FS*/	#services li{
					color: #dddddd;
					font-size:17.5px;
					line-height: 1.75;
					opacity: 0;
					text-align: left;
					text-decoration: none;

							/****START SERVICES LI ANIMATION****/	

					position: relative;
					animation: services;
					animation-duration: 1s;
					animation-delay: .25s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;}

				@keyframes services{
					0%{left: -500px; opacity: 0;}
					100%{left: 0; opacity: 1;}}

							/****END SERVICES LI ANIMATION****/


/****FULL SCREEN NEWSLETTER****/


		/*FS*/	#newsletter{
					background-color:#35424a;
					padding: 200px 0px 200px 0px;}

		/*FS*/	.newsletterbox{
					float: left;
					overflow: hidden;
					max-height: 500px;
					padding: 0px 0px 0px 0px;
					width: 50%;}

		/*FS*/	.newsletterbox img{
					width: 100%;
					}

		/*FS*/	#newsletter h1{
					color: #dddddd;
					font-size: 25px;
					padding: 60px 0px 0px 20px;
					text-align: center;
					text-shadow: 2px 2px 5px #000000;}		

		/*FS*/	#newsletter p{
					color: #dddddd;
					font-size: 17.5px;
					line-height: 1.5;
					padding-left: 20px;
					text-align: justify;}


/****FULL SCREEN AFFILIATIONS****/


		/*FS*/	#affiliations{
					padding: 0px 0px 200px 0px;}

		/*FS*/	#affiliations .box{
					float: left;
					text-align: center;
					line-height: 1.5;
					width: 50%;
					padding-top: 200px;
					padding-bottom: 0px;}

		/*FS*/	.box img{
					width: auto;
					height: 150px;
					align-content: center;}

		/*FS*/	.box h1{
					font-size: 20px;
					text-transform: uppercase;}

		/*FS*/	.box p{
					font-size: 15px;
					text-align: justify;}


/****FULL SCREEN FOOTER****/


		/*FS*/	#footer{
					background-color: #35424a;
					padding: 10px 0px 10px 0px;
					text-align: center;}

		/*FS*/	#footer p{
					color: #dddddd;
					font-size: 15px;
					text-shadow: 2px 2px 5px #000000;
					text-transform:uppercase;}




										/**************TABLET MEDIA QUERY**************/



													@media (max-width:1024px){
			
			
/****TABLET HEADER****/
			
			
		/*T*/	header .logo{
					font-size: 20px;
					letter-spacing: 0px;}

		/*T*/	nav{
					display: none;}

		/*T*/	.hamburger{
					display: inline;}

		/*T*/	#showcase h1{
					font-size: 25px;}

		/*T*/	#showcase p{
					font-size: 17.5px;}

		/*T*/	#showcase h1{
					margin-bottom: 2.5px;}
				}



										/**************MOBILE MEDIA QUERY**************/



													@media (max-width:768px){
	
			
/****GLOBAL****/
				
														
		/*M*/	.container{
					width: 90%;}

			
/****MOBILE HEADER****/
			
			
		/*M*/	header .logo{
					font-size: 20px;
					letter-spacing: 0px;}

		/*M*/	nav{
					display: none;}

		/*M*/	.hamburger{
					display: inline;}
			
						
/****MOBILE SHOWCASE****/
			
			
		/*M*/	#showcase{
					margin: 0px 0px 0px 0px;
					padding: 0px 0px 0px 0px;
					text-align: center;
					min-height: 93vh;}

		/*M*/	#showcase h1{
					font-size: 20px;
					text-shadow: 5px 5px 8px #000000;
					margin: 0px 0px 0px 0px;
					padding: 300px 0px 0px 0px;}
			
														
/****MOBILE PLANS****/
			
														
		/*M*/	#plans{
					min-height: 83.8vh;
					background:url("img/architect-architecture-blueprint-271667.jpg")no-repeat center;
					background-size:cover;}	

		/*M*/	#plansbox{
					background: rgba(53,66,74,.85);
					border-radius: 25px;
					box-shadow: 0px 0px 0px #000000;
					width: 100%;
					margin: 100px 0px 0px 0px;
					padding: 20px 0px 20px 0px;}

		/*M*/	#plans h1{
					font-size: 17.5px;
					text-align: center;}

		/*M*/	#plans p{
					font-size: 25px;
					line-height: 1.5;
					margin-left: 0px;
					text-align: center;}														
			
														
/****MOBILE CONTACT****/
			
														
		/*M*/	#contact{
					min-height: 83.8vh;
					background:url("img/blueprints-entrepreneur-hands.jpg") no-repeat center;
					background-size:cover;
					text-align: center;}	

		/*M*/	#contactbox{
					background: rgba(53,66,74,.85);
					border-radius: 25px;
					box-shadow: 0px 0px 0px #000000;
					width: 100%;
					margin: 100px 0px 0px 0px;
					padding: 20px 0px 40px 0px;}

		/*M*/	#contact h1{
					font-size: 17.5px;
					text-align: center;}

		/*M*/	#contact p{
					font-size:15px;
					line-height: 1.5;
					margin-left: 30px;
					text-align: left;}

		/*M*/	#contact #mobile_screen_phone_number{
					display:inline;}

		/*M*/	#full_screen_phone_number{
					display:none;}

		/*M*/	.fb-page{
					padding: 0px 0px 0px 0px;
					width: 90%;}
			
			
/****MOBILE SERVICES****/
			
			
		/*M*/	#services{
					min-height: 83.8vh;
					background: url("img/planswithpencil.jpg")no-repeat center;
					background-size:cover;
					text-align: center;}	

		/*M*/	#servicesbox{
					background: rgba(53,66,74,.85);
					border-radius: 25px;
					box-shadow: 0px 0px 0px #000000;
					width: 100%;
					margin: 100px 0px 0px 0px;
					padding: 20px 0px 20px 0px;}

		/*M*/	#services h1{
					color: #dddddd;
					font-size: 17.5px;
					text-align: center;}

		/*M*/	#services li{
					font-size:15px;
					line-height: 2.5;
					margin-left: 0px;
					text-align: left;}
			
			
/****MOBILE NEWSLETTER****/
																
			
		/*M*/	#newsletter{
					padding: 100px 0px 100px 0px;}

		/*M*/	.newsletterbox{
					max-height: 500px;
					width: 100%;
					padding: 0px 0px 0px 0px;
					float: none;}

		/*M*/	#newsletter h1{
					font-size: 20px;
					padding: 40px 0px 0px 0px;}		

		/*M*/	#newsletter p{
					font-size: 12.5px;
					padding: 0px 0px 0px 0px;}
			
														
/****MOBILE AFFILIATIONS****/
		
														
		/*M*/	#affiliations{
					padding-top: 20px;
					padding-bottom: 80px;}	

		/*M*/	#affiliations .box{
					float: none;
					text-align: center;
					line-height: 1.5;
					width: 100%;
					padding-top: 80px;
					padding-bottom: 20px;}

		/*M*/	.box img{
					width: auto;
					height:100px;
					align-content: center;}

		/*M*/	.box h1{
					font-size: 17.5px;
					text-transform: uppercase;
					padding-top: 20px;
					padding-bottom: 0px;}

		/*M*/	.box p{
					font-size: 15px;
					text-align: center;}		
				}