/*
URL: Ranch Land Rising
Version: 1.0
Author: Internet Imagineering, LLC
Author URL: https://www.iiweb.io/
*/

/*
font-family: 'Open Sans', sans-serif;
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'PT Serif', serif;
*/

:root {
	/* CUSTOM SITE COLORS */
	--rlr-orange: #f7553f;
	--rlr-yellow: #ffe984;
    
    /* STANDARD COLORS */
    --white: #ffffff;
    --beige: #FF9900;
    --red: #459939;
    --dkred: #990000;
    --black: #000000;
    --ltblack: #333333;
    --ltgray: #DDDDDD;
    --midgray: #CCCCCC;
    --gray: #999999;
    --dkgray: #666666;

}

html {
  scroll-behavior: smooth;
}

body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'League Spartan', trebuchet ms, arial, verdana, sans-serif;
	color: var(--ltblack);
	font-size: 16px;
}

* { box-sizing: border-box; }
.clear { clear: both;}

.separator {border: 0; border-top: 2px dotted var(--midgray); margin: 30px 0;}

/* TEXT */
.textOrange {color: var(--rlr-orange);}
.textYellow {color: var(--rlr-yellow);}
.textWhite {color: var(--white);}

/* LINKS */
a.linkGreen {color: var(--nc-green); text-decoration: none;}
a:visited.linkGreen {color: var(--nc-green); text-decoration: none;}
a:hover.linkGreen {color: var(--black); text-decoration: none;}

a.linkWhite {color: var(--white); text-decoration: none;}
a:visited.linkWhite {color: var(--white); text-decoration: none;}
a:hover.linkWhite {color: var(--white); text-decoration: none;}


/* BUTTONS */
a.buttonWhite {font-family: 'Arvo', serif; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; color: var(--rlr-orange); background-color: var(--white); padding: 10px 20px; text-align: center; text-decoration: none;}
a.buttonWhite:visited {font-family: 'Arvo', serif; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; color: var(--rlr-orange); background-color: var(--white); padding: 10px 20px; text-align: center; text-decoration: none;}
a.buttonWhite:hover {font-family: 'Arvo', serif; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; color: var(--rlr-orange); background-color: var(--black); padding: 10px 20px; text-align: center; text-decoration: none;}

/* HEADINGS */
h2.heading2 {font-family: 'Arvo', serif; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; letter-spacing: 5px;}

/* HEADER */
.tempHeader-Wrapper {position: fixed; width: 100%; z-index: 99999; transition: .2s all;}
.tempHeader-Container {width: 96%; margin: 0 auto; display: grid; grid-template-columns: 200px auto; padding: 20px 0 0 0; transition: .2s all;}
.logo {width: 100%; top: 30px; left: 30px; transition: .2s all;}
.logo img {width: 100%; transition: .2s all;}
.tempTopNav {text-align: right; font-size: 1rem; text-transform: uppercase; letter-spacing: 5px; font-weight: 200; margin: 20px 0 0 0;}
.tempTopNav a {margin: 0 0 0 40px; }

.tempTopNav-Links {width: 160px; display: grid; grid-template-columns: auto auto; align-items: center; justify-self: end; margin: 0 0px 0 0;}
.tempTopNav-Mobile {display: none;}

.scrolled .tempHeader-Wrapper {background-color: var(--black);}
.scrolled .tempHeader-Container {width: 96%; margin: 0 auto; display: grid; grid-template-columns: 100px auto; padding: 20px 0 20px 0;}

a.topnav {color: var(--rlr-yellow); text-decoration: none; transition: .2s all;}
a.topnav:visited {color: var(--rlr-yellow); text-decoration: none;}
a.topnav:hover {color: var(--rlr-orange); text-decoration: none;}

/* LAYOUT */


.tempSect1-Wrapper {position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--black) url('images/temp-background.jpg') no-repeat top; background-size: contain; position: relative; z-index: 55;}

.overlay {
  position: absolute; /* Sit on top of the page content */
  width: 100%;
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, .4); /* Black with 50% opacity */
  z-index: 999;
	}
	
.tempSect1-Intro {position: absolute; width: 80%; text-align: left; top: 60%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-family: 'Arvo', serif; font-size: 3rem; font-weight: 400; z-index: 9999; opacity: .9;}

.keepexploring {text-align: center; position: absolute; z-index: 9999; margin: 0 auto; color: var(--white); bottom: 40px; width: 100%; text-align: center;}
.keepexploring-text {font-size: .8rem; font-weight: 200; letter-spacing: 3px; text-transform: uppercase; text-align: center;}
.keepexploring-icon {font-size: 2rem; margin: 5px 0 0 0;}
	
.tempSect2-Wrapper {width: 100%; padding: 0; background-color: var(--ltblack); border-top: 1px solid var(--rlr-orange); margin: 5px 0 0 0;}
.tempSect2-Logo {margin: 0 auto; text-align: center;}
.tempSect2-Logo img {width: 200px; opacity: .4;}

.tempSect3-Wrapper {width: 80%; margin: 100px auto;}
.text1 {font-size: 1.4rem; line-height: 2rem; margin: 40px 0 0 0;}

.tempBanner-Wrapper {width: 100%; background-color: var(--rlr-orange); padding: 50px 0; margin: 0 auto;}
.tempBanner-Container {width: 80%; margin: 0 auto; text-align: center;}

.tempBanner-Heading {font-family: 'Arvo', serif; font-size: 2rem; font-weight: 400; text-transform: uppercase; letter-spacing: 3px;}
.tempBanner-SubHeading {font-size: 1.5rem; margin: 20px 0 10px 0;}
.tempBanner-text {font-size: 1.2rem;}
.tempBanner-button {margin: 40px auto 0 auto;}

/* FOOTER */

.footerWrapper {width: 100%; background-color: var(--black); color: var(--white); font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; padding: 20px 0; text-align: center; margin: 2px 0 0 0;}

/* SLIDE OUT NAV */
#sidenav {
 position: fixed; 
 /* switch "right" to "left" to switch sides: */
 left: calc(-100vw - 10px); transition: left 0.5s;
 top:0; bottom: 0;
 width: 100vw; max-width: 500px; /* full screen on small screens */
 z-index: 99999999; box-shadow: 0 0 10px #0008;
 background: var(--black); color: var(--sidenav-fg,white);
 font-size:1.2rem;
 height: 100vh;
 overflow: auto;
}
#sidenav.active { left: 0; } /* switch "right" to "left" */
#sidenav-header { display:grid; grid-template-columns: auto; align-items:center; column-gap: 10px; margin: 10px; }
#sidenav-header img { display: block; width:100px; }

#sidenav ul { 
 height: 100vh;
 padding: 0; 
 /* add some bottom padding to allow scrolling lower */ 
 padding-bottom: 0px;  
 margin: 30px 0 0 0; 
 overflow: auto; 
 border-top: 1px solid #444; 
}
#sidenav li { list-style-type: none; border-bottom: 1px solid #444; margin: 0; padding: 8px 2rem; font-size: 1rem; font-family: 'Arvo', serif; font-weight: 400; text-transform: uppercase; letter-spacing: 5px;}
#sidenav a, #sidenav a:visited, #sidenav a.active { color: var(--sidenav-fg,white); text-decoration: none; }
#sidenav-close { 
 /* reposition within the sidenav as needed */
 position: absolute; 
 right: 1rem; top:0.4rem; 
 cursor: pointer; 
 font-size:1.2em;
 transition: all 0.2s; 
}
#sidenav-close:hover, #sidenav-close:active { color: white; text-shadow: 2px 2px 8px #0008; transform: translate(-2px, -2px); }
#sidenav-footer { position:absolute; bottom:0; left:0; right:0; height: 100px; display: flex; justify-content: center; align-items: center; background: var(--black); font-size: 1rem; padding: 0 0 30px 0;}


@media only screen and (max-width: 1440px) {
		.tempHeader-Container {width: 96%; margin: 0 auto; display: grid; grid-template-columns: 180px auto; padding: 20px 0 0 0;}
		.tempSect1-Intro {position: absolute; width: 80%; text-align: left; top: 60%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-family: 'Arvo', serif; font-size: 2.5rem; font-weight: 400; z-index: 9999; opacity: .9;}

	}

	@media only screen and (max-width: 1199px) {
		.tempSect1-Intro {position: absolute; width: 80%; text-align: left; top: 60%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-family: 'Arvo', serif; font-size: 2rem; font-weight: 400; z-index: 9999; opacity: .9;}

	}

	@media only screen and (max-width: 1023px) {
	
		.tempHeader-Container {width: 96%; margin: 0 auto; display: grid; grid-template-columns: 140px auto; padding: 20px 0 0 0;}
		.tempSect1-Intro {position: absolute; width: 80%; text-align: left; top: 60%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-family: 'Arvo', serif; font-size: 1.4rem; font-weight: 400; z-index: 9999; opacity: .9;}
	
		@media only screen and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	
	
		}

	}

	@media only screen and (max-width: 767px) {
		.tempHeader-Wrapper {position: fixed; width: 100%; z-index: 99999; transition: .2s all; background-color: var(--black);}
		
		.scrolled .tempHeader-Container {width: 94%; margin: 0 auto; display: grid; grid-template-columns: 80px auto; padding: 10px 0 10px 0;}
		
		.tempSect1-Wrapper {border-top: 80px solid var(--black);}
		.tempHeader-Container {width: 94%; margin: 0 auto; display: grid; grid-template-columns: 100px auto; padding: 10px 0 10px 0;}
		.tempSect1-Intro {position: absolute; width: 80%; text-align: left; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-family: 'Arvo', serif; font-size: 1rem; font-weight: 400; z-index: 9999; opacity: .9;}
		
		.keepexploring {display: none;}
		
		.tempTopNav-Links {display: none;}
		.tempTopNav-Mobile {display: block; font-size: 1.6rem; margin: 5px 0 0 0; color: var(--white);}
		
		.tempBanner-Heading {font-family: 'Arvo', serif; font-size: 1.4rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px;}
		.tempBanner-SubHeading {font-size: 1.2rem; margin: 20px 0 10px 0;}
		.tempBanner-text {font-size: 1rem;}
		
		a.buttonWhite {font-family: 'Arvo', serif; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; color: var(--rlr-orange); background-color: var(--white); padding: 6px 20px; text-align: center; text-decoration: none;}
		a.buttonWhite:visited {font-family: 'Arvo', serif; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; color: var(--rlr-orange); background-color: var(--white); padding: 6px 20px; text-align: center; text-decoration: none;}
		a.buttonWhite:hover {font-family: 'Arvo', serif; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; color: var(--rlr-orange); background-color: var(--black); padding: 6px 20px; text-align: center; text-decoration: none;}
	
	}

	@media only screen and (max-width: 480px) {
	
	
	}
	
}