/*

Theme Name: TwentyCustom

Theme URI: https://tasutah.org

Author: Trail Alliance of Southern Utah

Author URI: https://tasutah.org

Description: Custom layout for Trail Alliance of Southern Utah

License: N/A

License URI: N/A

Tags: trail, alliance, southern, utah

Text Domain: twentycustom

*/



/********************************************

	TASU: Trail Alliance of Southern Utah

	Build * Maintain * Ride

*********************************************/



/***** Webfonts *****/

/**

font-family: proxima-nova, sans-serif; font-weight: 400; font-weight:700; font-weight:800;

*/



/******** BROWSER 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, caption,

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;

	/*** Include Padding/Borders in width for all elements ***/

	box-sizing: border-box;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,

q:before, q:after { content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* Responsive images & embedded objects (remove for image cropping) */

img, object, embed { max-width: 100%; }



/****** GLOBAL ELEMENT CSS ******/

html * { max-height: 999999px; } /* Android mobile font sizing fix */



body {

	line-height: normal;

	font-size: 18px;

	font-family: proxima-nova, sans-serif;

	background: #fff;

	-webkit-text-size-adjust: none;

}



body, select, input, textarea { color: #000; }



h1, h2, h3, h4, h5, h6, p { margin: 0px 0px 20px; }

p { line-height:140%; }



a { font-weight:bold; text-transform:uppercase; color:#000; text-decoration:underline; transition:0.2s linear all; padding-bottom:5px; }

a:hover { color:#ed7223; text-decoration:underline; }



a.orange-btn { 

	display:inline-block; margin:0 5px 5px 5px; text-align:center;

	color:#fff; text-decoration:none; text-transform:uppercase; font-weight:800; text-shadow:2px 2px 2px rgba(202,46,39,0.5);

	background:#ed7223; padding:10px 25px !important; box-shadow:2px 2px 10px rgba(0,0,0,0.25); border-radius:4px; border:0;

	transition: all 0.3s linear;

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

}

a.orange-btn:hover { background:#ca2e27; color:#fff !important; }



a.blue-btn { 

	display:inline-block; margin:0 5px 5px 5px; text-align:center;

	color:#fff; text-decoration:none; text-transform:uppercase; font-weight:800; text-shadow:2px 2px 2px rgba(202,46,39,0.5);

	background:#1f79c1; padding:10px 25px; box-shadow:2px 2px 10px rgba(0,0,0,0.25); border-radius:4px; border:0;

	transition: all 0.3s linear;

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

}

a.blue-btn:hover { background:#27a8e0; }


.submit-orange { color: #fff; font-weight:bold; font-size:24px; text-shadow: 2px 2px 2px rgba(202,46,39,0.5); background: #ed7223; padding: 10px 25px; box-shadow: 2px 2px 10px rgba(0,0,0,0.25); border-radius: 4px; border: 0; border-collapse:collapse; cursor:pointer; transition: all 0.3s linear; }
.submit-orange:hover { background:#ca2e27; }


img { border: none; height:auto; }



b, strong { font-weight:bold; }

i { font-style:italic; }



.clear { clear: both; }



.mob { display:block; }

.mob2 { display:inline; }

.dsk, .dsk2 { display:none; }







/****** FRONTEND LAYOUT ******/

#page { margin:0 auto; width:100%; min-width:350px; max-width:1920px; height:auto; position:relative; overflow:hidden; }



#scrollme { width:10px; height:10px; position:absolute; top:50px; left:0; z-index:100; }



div.container { width:100%; margin:0 auto; padding-left:15px; padding-right:15px; }

div.container900 { width:100%; max-width:930px; margin:0 auto; padding-left:15px; padding-right:15px; }





/*** Header ***/

#header { position:fixed; top:0; left:0; width:100%; z-index:200; transition:0.2s linear all; padding:10px; background:rgba(0,0,0,0.80); height:60px; }



#logo { width:80px; height:80px; overflow:hidden; display:block;

	position:fixed; top:10px; left:10px; z-index:300; 

	font-size:1px; text-indent:-3000px;

	background:url('assets/images/tasu-color-web.png') no-repeat; background-size:100% 100%;

}



#menuBtn { width:40px; height:40px; display:block; position:absolute; top:10px; right:15px; z-index:100; cursor:pointer; }

#menuBtn svg:first-child { position:absolute; top:10px; left:0; width:100%; height:4px; transition:0.2s linear all; fill: #fff; }

#menuBtn svg:nth-child(2n) { position:absolute; top:18px; left:0; width:100%; height:4px; transition:0.2s linear all; fill: #fff; }

#menuBtn svg:last-child { position:absolute; top:26px; left:0; width:100%; height:4px; transition:0.2s linear all; fill: #fff; }



#menuBtn.open svg:first-child { transform: rotate(45deg); top:18px; fill:#ed1b36 !important; }

#menuBtn.open svg:nth-child(2n) { opacity:0; }

#menuBtn.open svg:last-child { transform: rotate(-45deg); top:18px; fill:#ed1b36 !important; }



#mainmenu { display:none; 

	position:absolute; top:60px; left:0; z-index:10;

	background:#fff; padding:40px 15px;

	width:100%; height:auto; 

	box-sizing:border-box;

}

#mainmenu ul { margin:0; padding:0; list-style-type:none; }

#mainmenu ul li { display:block; margin:0; text-align:right; }

#mainmenu ul li a { 

	font-size:20px; text-transform:uppercase; text-decoration:none; font-family: 'Century Gothic', sans-serif; font-weight: bold; color:#000;

	display:block; padding:10px 0;

	border-bottom:none;

}



#mainmenu ul li.social { display:none; }



#header.sticky #menuBtn svg:first-child, #menuBtn.open svg:first-child { fill: #999; }

#header.sticky #menuBtn svg:nth-child(2n), #menuBtn.open svg:nth-child(2) { fill: #999; }

#header.sticky #menuBtn svg:last-child, #menuBtn.open svg:last-child { fill: #999; }





#mainmenu input[type=submit] {

	display:inline-block; margin:0 5px 5px 5px; text-align:center;

	color:#fff; text-decoration:none; text-transform:uppercase; font-weight:800; text-shadow:2px 2px 2px rgba(202,46,39,0.5); font-size:18px; font-family: 'Century Gothic', sans-serif;

	background:#ed7223; padding:10px 25px !important; box-shadow:2px 2px 10px rgba(0,0,0,0.25); border-radius:4px; border:0; border-collapse:collapse;

	transition: all 0.3s linear;

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

	cursor:pointer;

}

#mainmenu input[type=submit]:hover { background:#ca2e27; color:#fff !important; }









/*** Content Area ***/

#content { }







/*** Footer ***/

#footer { padding:40px 15px; background:#000; color:#fff; text-align:center; }

#logo-footer { width:auto; display:inline-block; font-size:30px; font-family:'Bodoni Moda', serif; font-weight:600; color:#fff;

	border:none;

	background:url('../images/the-agency.png') no-repeat; background-size:60px 60px; 

	padding:4px 0 0 70px; margin:0 auto 20px auto;

	height:60px;

}

img.social { margin:0 auto 20px auto; }



div.footer-links { display:none; }



p.copy, p.fineprint { font-size:14px; color:#999; margin:0; }

#footer a { color:#fff; font-weight:normal; text-transform:none; }
#footer a:hover { color:#ed7223; }






/****** HOMEPAGE ******/

/** Banners **/

#the-slideshow { width:100%; display:block; margin:0; border-top:60px #000 solid; }

div.aslide { width:100%; height:auto; overflow:hidden; display:block; margin:0; }

div.aslide img { width:100%; display:block; }





/** Home Content **/

#home-content { font-size:20px; text-align:center; }



.gray-gradient { background-image:linear-gradient(#e5e5e5, #ffffff); border-top:7px #fff solid; padding:50px 0 30px 0; }





/** About Section **/

#stats { text-align:center; padding:0 0 50px 0; }

.stat-card { width:90%; max-width:385px; margin:100px auto 0 auto; box-shadow:0 0 50px rgba(0,0,0,0.2); background:#fff; opacity:0; 

	display:inline-block; vertical-align:top; text-align:center; font-size:24px; padding:30px 20px 20px 20px;

}

.stat-card p { margin:0 0 10px 0; }

.stat-card h2.stat { font-size:125px; line-height:100%; }

.stat-card h3.stat-desc { font-size:24px; line-height:125%; }



#stats .stat-card:first-child h2 { color:#ca2e27; }

#stats .stat-card:first-child h3 { color:#ca2e27; }



#stats .stat-card:nth-child(2) h2 { color:#ed7223; }

#stats .stat-card:nth-child(2) h3 { color:#ed7223; }



#stats .stat-card:nth-child(3) h2 { color:#1e75bb; }

#stats .stat-card:nth-child(3) h3 { color:#1e75bb; }





@keyframes fadeup {

	from { opacity:0; margin-top:100px; }

	to { opacity:1; margin-top:0; }

}



.already-visible { opacity:1; margin-top:0; }



.testappear { animation: fadeup 1s 0.25s forwards;

	-webkit-animation: fadeup 1s 0.25s forwards;

	-moz-animation: fadeup 1s 0.25s forwards;

}



/** JOIN US BAR **/

#join-us-bar { display:block; width:100%; height:auto; background:url('assets/images/trail-work-shovels.jpg') 50% 50% no-repeat; background-size:cover; padding:100px 15px 80px 15px; }

div.jub-inner { max-width:900px; margin:0 auto; color:#fff; text-align:center; }

div.jub-inner h2 { font-size:35px; font-weight:700; }

div.jub-inner p { line-height:150%; font-size:22px; }


#create-protect-enhance { text-align:center; padding:40px 20px; width:100%; max-width:1200px; margin:0 auto; }

.mission-square { margin:0 5px; width:29%; max-width:300px; }





/*** PAGE ***/

#page-banner { width:100%; display:block; height:auto; height:225px; position:relative; overflow:hidden; }

#page-banner img { width:100%; object-fit:cover;

	position:absolute; top: 50%; left: 50%;

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

}



#page-content h1 { font-size:1.6em; font-weight:bold; }

#page-content h2 { font-size:1.4em; font-weight:bold; }

#page-content h3 { font-size:1.2em; font-weight:bold; }



#page-content ul { margin:0 0 20px 0; padding:0 0 0 20px; }

#page-content ol { margin:0 0 20px 0; padding:0 0 0 20px; }



/***************************************************
	TABLET LAYOUT BREAKPOINTS
****************************************************/

@media (min-width:600px) {
	#page-banner { height:300px; }
}


/***************************************************

	DESKTOP LAYOUT BREAKPOINTS

****************************************************/

@media(min-width: 800px) {



	/****** GLOBAL ELEMENT CSS ******/

	body { font-size: 18px; }

	p { font-size:18px; }

	.headline { font-size:48px; }

	

	div.container { width:90%; max-width:1060px; }

	

	.dsk { display:block; }

	.dsk2 { display:inline; }

	.mob, .mob2 { display:none; }



	



	/****** FRONTEND LAYOUT ******/

	#header { position:fixed; top:0px; left:0; width:100%; z-index:200; padding:35px; text-align:right; height:auto; background:rgba(0,0,0,0.5); }

	

	#logo { width:272px; height:272px; overflow:hidden; display:block;

		position:fixed; top:25px; left:35px; z-index:300;

		border:0;

		font-size:1px; text-indent:-3000px;

		background:url('assets/images/tasu-color-web.png') no-repeat; background-size:100% 100%;

	}



	#menuBtn { display:none; }

	

	#mainmenu { display:inline-block; width:auto !important; 

		position:relative; top:0; right:0; z-index:1;

		transition:0.2s linear all; margin:0; padding:0;

		text-align:right;

		background:transparent;

	}

	#mainmenu ul { margin:0; padding:0; list-style-type:none; width:auto; display:inline-block; }

	#mainmenu ul li { display:inline-block !important; margin:10px 0 0 0; vertical-align:top; }

	

	#mainmenu ul li#hdr-donate { margin:0; }

	

	#mainmenu ul li a { 

		font-size:18px; text-transform:uppercase; font-weight:bold; color:#fff; text-decoration:none;

		display:block; padding:0 15px;

		border:none;

	}

	#mainmenu ul li a:hover { color:#ed7223; border:none; }

		

	/** Sticky Styles **/

	#header.sticky { padding:15px 35px; border:none; background:rgba(0,0,0,0.8); height:auto; }

	#logo.sticklogo { top:15px; left:35px; width:100px !important; height:100px; }



	

	

	#content { }

	



	/** Footer **/

	#footer { text-align:center; }

	div.footer-inner { max-width:1200px; margin:0 auto; }

	#logo-footer { margin:0; float:left; }

	img.social { float:right; margin:0; }

	

	div.footer-links { display:block; width:55%; margin:50px 0; }

	div.fl-column { width:33%; float:left; }

	div.fl-column p { line-height:150%; font-size:16px; color:#fff; }

	

	p.copy { width:50%; float:left; font-size:14px; color:#999; text-align:left; }

	p.fineprint { width:50%; float:right; text-align:right; font-size:14px; color:#999; }

	

	

	







	/****** HOMEPAGE ******/

	/** Banners **/

	#the-slideshow { border:none; }

	div.aslide { max-height:100vh; }

	div.slide-overlay { font-size:90px; width:50%; max-width:700px; }

	.tag2 { font-size:26px; }

	

	

	/** Home Content **/

	#home-content { font-size:24px; }

	

	.gray-gradient { padding:75px 0 50px 0; }

	

	

	/** About Section **/

	#stats { padding:0 0 75px 0; }

	.stat-card { width:30%; max-width:385px; margin:100px 10px 0 10px; box-shadow:0 0 50px rgba(0,0,0,0.2); background:#fff; opacity:0; }

	

	div.jub-inner h2 { font-size:50px; }

	div.jub-inner p { font-size:24px; }

	
    #create-protect-enhance p { font-size:1.2em; }
	.mission-square { margin:0 10px; width:30%; max-width:300px; }
    
    

	/** Featured Properties **/

	#hp-featured { margin:75px auto; }

	div.featuredp { width:50%; max-width:370px; margin-bottom:0; }

	.middleone { margin-left:3%; margin-right:3%; }

	div.featuredp img { width:370px; height:530px; object-fit:cover; display:block; }

	

	

	

	/*** PAGE ***/

	#page-banner { height:450px; }

	

	



	

	





}  /* @media(min-width: 880px) */









/*** Skip to Content invisible link for accessibility ***/

#skip a

{

position:absolute;

left:-10000px;

top:auto;

width:1px;

height:1px;

overflow:hidden;

}

/* uncommenting will make the link visible when focused

#skip a:focus

{

position:static;

float:left;

width:auto;

height:auto;

}

*/