/*
 Theme Name: 2017-fixed-nav-with-slider
 Author: Free Range Web Design
 Author URI: http://www.freerangewebdesign.com.au
 Template: twentyseventeen
 Description: Child theme for Twenty Seventeen.
 Version: 0.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags:
 Text Domain: 2017-fixed-nav-with-slider
 
 colors:
 yellow/orange from logo #D8A741
 
 */

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Accessibility
3.0 Alignments
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Columns
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/

html {
	background-color:#D8A741; /* bg color shows in footer when not going full length of page */
}

body,
input,
select,
textarea {
	color: #333;
	font-family: Montserrat, helvetica, arial, sans-serif;
	font-size: 18px;
	font-size: 1.15rem;
	font-weight: 300;
	line-height: 1.66;
}

button {
	color: #ffffff;
	background-color:#D8A741;
}


/*--------------------------------------------------------------
6.0 Forms
--------------------------------------------------------------*/
select {
    height: 2em;
}

/*  gravity forms styling:  */

.gform_confirmation_message {
    background-color: #D6F5E0!important;
    border: 1px solid #33CC66!important;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 20px 0;
    text-align: center;
}

/*--------------------------------------------------------------
7.0 Formatting
--------------------------------------------------------------*/

h2 {
    color: #D8A741;
    font-size: 1.25rem;
    font-weight: 800;
}

h2.widget-title {
    color: #D8A741;
}

.nav-title {
    color: #D8A741;
}

.single-post .entry-title, .page .entry-title {
    color: #D8A741;
    padding-top: 2rem;
    font-size: 2rem;
    font-weight: 400;
}


.entry-title a {
    color: #D8A741;
}

.page .panel-content .entry-title, 
.page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
    color: #D8A741;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}


/*--------------------------------------------------------------
8.0 Lists
--------------------------------------------------------------*/

/*--------------------------------------------------------------
9.0 Tables
--------------------------------------------------------------*/

td {
    padding: 0.5em;
}

/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
    color: #D8A741;
    text-decoration: none;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
    color: #D8A741;
	border-bottom:1px dotted #D8A741;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.entry-title a, .entry-meta a, .page-links a, .page-links a .page-number, .entry-footer a, .entry-footer .cat-links a, .entry-footer .tags-links a, .edit-link a, .post-navigation a, .logged-in-as a, .comment-navigation a, .comment-metadata a, .comment-metadata a.comment-edit-link, .comment-reply-link, a .nav-title, .pagination a, .comments-pagination a, .site-info a, .widget .widget-title a, .widget ul li a, .site-footer .widget-area ul li a, .site-footer .widget-area ul li a {
    box-shadow: none;
}


.entry-content a, .entry-summary a, .widget a, .site-footer .widget-area a, .posts-navigation a, .widget_authors a strong {
    box-shadow: none;
    transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s, -webkit-box-shadow 130ms ease-in-out 0s;
}


/*--------------------------------------------------------------
11.0 Featured Image Hover
--------------------------------------------------------------*/

/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/
a.nav-brand img {
    float: left;
    height: 65px;
}

.js .menu-toggle { /* moves button to rhs */
    float: right;
}

@media screen and (min-width: 67em) {
a.nav-brand img {
    height: 115px;
}
}

.main-navigation ul li.connect-login a {
    background-color: #D8A741;
    border-radius: 100px;
    color: #fff;
    font-weight: 400;
    margin-right: 1em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

@media screen and (min-width: 48em) {
.main-navigation ul li.connect-login a {
    margin-right: 1em;
}
}

.menu-toggle {
    font-size: 1rem;
    font-weight: 800;
	text-transform:uppercase;
}

/* Make sure the navigation layer is on top of the image */
.navigation-top {
    background-color:#ffffff;
	z-index: 4;
	border-bottom: none; /* bottom border of nav bar prev 1px solid #eee */
	border-top: none;
	font-size: 18px;
	font-size: 1rem;
	padding-top:0em;
}

.navigation-top div.wrap div.nav-image {
	
}

.navigation-top a {
    color: #000000; 
    font-weight: 400;
	/* letter-spacing: 0.5px; */
}

.main-navigation a:hover {
    color: #D8A741;
}

.main-navigation {
    clear: none;
    display: block;  /* make display: none to hide navigation when using shiftnav */
}

@media screen and (min-width: 48em) {
	.main-navigation {
    display: block;  /* make display: block to show navigation when not using shiftnav */
}
}
.navigation-top nav {
    /* float: right; */
    margin-left: 0;
}

.main-navigation ul {
	background: transparent;
	padding: 0 1.5em;
	text-align: center;
}

.main-navigation ul ul {
    padding: 0;
}


/* Remove the unnecessary margin created for the navigation menu on the header */
.navigation-top:not(.site-navigation-fixed) ~ .custom-header {
    margin-bottom: 0 !important;
}

@media screen and (min-width: 48em) {
    /* Make sure the navigation menu sits at the top of the page */
    .navigation-top {
        bottom: auto;
        position: relative;
        top: 0;
    }
}

/* Move the video play button further down */
.wp-custom-header .wp-custom-header-video-button {
    top: 6em;
}

.menu-main-nav-container {
	padding-top:5em; /* mobile view - moves toggle menu below logo - prev 2em */
}
@media screen and (min-width: 48em) {

.menu-main-nav-container {
    padding-top: 2em;
}
}

/*--------------------------------------------------------------
13.0 Layout
--------------------------------------------------------------*/

.alignfull {
    margin-left: calc( -100vw / 2 + 100% / 2 );
    margin-right: calc( -100vw / 2 + 100% / 2 );
    max-width: 100vw;
}

.wrap {
    max-width: 1200px;
    padding-left: 2em;
    padding-right: 2em;
}

.single-post:not(.has-sidebar) #primary, 
.page.page-one-column:not(.twentyseventeen-front-page) #primary, 
.archive.page-one-column:not(.has-sidebar) .page-header, 
.archive.page-one-column:not(.has-sidebar) #primary {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.break {
    clear: both;
    padding-bottom: 4em;
}

.site-content-contain {
    padding-top: 0;
}

/* hide author on posts - race days */
.single .byline, .group-blog .byline {
    display: none!important;
}


/*--------------------------------------------------------------
13.1 Header
--------------------------------------------------------------*/

.site-branding {
		padding: 3em 0 0;
		display:none;
	}
	
.page:not(.home) .site-branding {
		display: none;
	}

/* removes from every page except homepage
.page:not(.home) #content {
    padding-top: 0;
} */

.site-header {
	background-color: #fff;
}

.site-title {
    font-size: 1.2rem;
    letter-spacing: 0;
}

.site-description {
    display:block;
}


.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    display: none;
}

body.home .custom-logo-link img {
    max-height: 80px; /* default is 80px */
	
}

.custom-header-media::before {
    background: none;
}

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-logo-link img {
	background-color:#fff;
}

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding {
	color:#fff;
}

body.home.has-header-image .site-title, 
body.home.has-header-video .site-title, 
body.home.has-header-image .site-title a, 
body.home.has-header-video .site-title a {
    color: #fff;
}

body.home.has-header-image .site-description, 
body.home.has-header-video .site-description, 
body.home.has-header-image .site-description a, 
body.home.has-header-video .site-description a {
    color: #fff;
	font-size:1.4rem;
}

body.has-header-image .site-title, 
body.has-header-video .site-title, 
body.has-header-image .site-title a, 
body.has-header-video .site-title a {
    color: #000;
}

body.has-header-image .site-description,
body.has-header-video .site-description {
	color: #000;
	opacity: 0.8;
}

body.has-header-image .site-title,
body.has-header-video .site-title {
	display:none;
}


/* positioning of site branding front page / homepage */

body:not(.title-tagline-hidden) .site-branding-text {
    width: 100%;
}

.has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
    vertical-align: middle; /* default is bottom */
}

/*--------------------------------------------------------------
13.2 Front Page
--------------------------------------------------------------*/


.panel-image::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%) repeat scroll 0 0; /* lighter grey overlay */
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 100px;
}

/*--------------------------------------------------------------
13.3 Regular Content
--------------------------------------------------------------*/

.site-content {
	padding: 0.5em 0 0;
}

ol {
    display: block;
    padding: 0 0 0 26px;
    list-style: none;
    background: #fff;
    overflow: hidden;
    counter-reset: numList;
}

ol li {
    margin-bottom: 30px;
    margin-left: 6%;
    margin-right: 4%;
    padding-left: 30px;
    position: relative;
    width: 80%;
}

ol li::before {
    background: #dedede none repeat scroll 0 0;
    border-radius: 999px;
    color: #000000;
    content: counter(numList, decimal);
    counter-increment: numList;
    float: left;
    font: bold 14px/30px sans-serif;
    height: 30px;
    left: -40px;
    position: absolute;
    text-align: center;
    width: 30px;
}

p + img {margin-top:0;}

.entry-meta {
    color: #767676;
    font-size: 1.5rem;
}

/*--------------------------------------------------------------
13.4 Posts ... race days
--------------------------------------------------------------*/
ul.display-posts-listing li.listing-item a.title, 
ul.display-posts-listing li.listing-item span.date {
    vertical-align: top;
}

ul.display-posts-listing {
    list-style: none;
}

/*--------------------------------------------------------------
13.5 Pages
--------------------------------------------------------------*/

/*--------------------------------------------------------------
13.6 Footer
--------------------------------------------------------------*/

.site-footer {
    background-color: #ffffff; 
	border-top: 2px dotted #D8A741;
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 3em;
}

	.site-footer .widget-column.footer-widget-1 {
		float: left;
		width: 48%;
	}

	.site-footer .widget-column.footer-widget-2 {
		float: right;
		width: 48%;
	}

.site-footer aside.widget-area .widget ul li {
    border-bottom: medium none;
    border-top: medium none;
    padding: 0.5em 0;
}

.site-footer aside.widget-area ul#menu-mainmenu.menu li a {
	color: #333;
	text-transform:uppercase;
}

.site-footer aside.widget-area ul#menu-mainmenu.menu li a:hover {
	color: #000000;
}


.social-navigation a {
    background-color: #333333;  /* colour of social nav icons in footer */
    border-radius: 40px;
    color: #fff;
    display: inline-block;
    height: 60px;
    margin: 0 1em 0.5em 0;
    text-align: center;
    width: 60px;
}

.social-navigation .icon {
    height: 30px;
    top: 15px;
    vertical-align: top;
    width: 30px;
}

#dynamic-to-top {
    box-shadow:none!important;
}

footer .menu {
    margin: 0;
}

footer .menu li {
    display: inline-block;
    overflow: hidden;
}

footer .menu a {
    padding: 1em 1.25em;
}

footer .menu a:focus,
footer .menu a:hover {
    text-decoration: underline
}


/*--------------------------------------------------------------
14.0 Columns
--------------------------------------------------------------*/

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth { 
	float:none; width: 100%; padding: 0 7%; }



/*--------------------------------------------------------------
15.0 Widgets
--------------------------------------------------------------*/



/*--------------------------------------------------------------
16.0 Media
--------------------------------------------------------------*/

.single-featured-image-header {
   /* background-color: #fafafa;
    border-bottom: 1px solid #eee; */
	background-color: #fff;
    border-bottom: none;
}


/*--------------------------------------------------------------
16.1 Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
17.0 Customizer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
18.0 SVGs Fallbacks
--------------------------------------------------------------*/


/*--------------------------------------------------------------
19.0 Media Queries
--------------------------------------------------------------*/

/* Adjust positioning of edit shortcuts, override style in customize-preview.css */
@media screen and (min-width: 20em) {


body.customize-partial-edit-shortcuts-shown .site-header .site-title {
		padding-left: 0;
	}
	
	.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
    color: #D8A741; 
}
}

@media screen and (min-width: 30em) {

	

/* Site Branding */

	.site-branding {
		padding: 2em 0 0;
		display:none;
	}

	/* Columns */

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth { 
	position:relative; 
	margin-right:4%; 
	padding: 0 1%;
	float:left; 
	min-height:1px; 
	height:auto!important; 
	height:1px; }
.one_half { width:48%; }
.one_third { width:30.6666%; }
.two_third { width:65.3332%; }
.one_fourth { width:22%; }
.two_fourth { width:48%; }
.three_fourth { width:74%; }
.one_fifth { width:16.8%; }
.two_fifth { width:37.6%; }
.three_fifth { width:58.4%; }
.four_fifth { width:79.2%; }
.one_sixth { width:13.3333%; }
.two_sixth { width:30.6666%; }
.three_sixth { width:47.9998%; }
.four_sixth { width:65.3332%; }
.five_sixth { width:82.6665%; }
.last { margin-right:0!important; clear:right; }
.one_half .one_half { margin-right:8.3333%; width:45.8333%; }
.one_half .one_third { margin-right:8.3333%; width:27.7778%; }
.one_half .two_third { margin-right:8.3333%; width:63.8889%; }
.two_third .one_third { margin-right:6.1224%; width:29.2517%; }
.two_third .two_third { margin-right:6.1224%; width:64.6258%; }
.two_third .one_fourth { margin-right:6.1224%; width:20.4082%; }

}

@media screen and (min-width: 48em) {
/* beginning : move sidebar to left 
 .has-sidebar #secondary {
 float: left;
 }
 .has-sidebar #primary {
 float: right;
 }
 .has-sidebar:not(.error404) #primary {
 float: right;
 }
 end :  move sidebar to left */
 
 .main-navigation {
    float: right;
}

.main-navigation .menu-item-has-children > a > .icon, .main-navigation .page_item_has_children > a > .icon { /* moves little arrow in top nav over to the right - prev 5px */
    left: 10px;
}

/* site branding on front page / homepage */

.has-header-image.twentyseventeen-front-page .site-branding, 
.has-header-video.twentyseventeen-front-page .site-branding, 
.has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
top: 50%;
width:90%;
}

.has-header-image.twentyseventeen-front-page .site-branding .site-title, 
.has-header-video.twentyseventeen-front-page .site-branding .site-title, 
.has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding .site-title {
font-size: 2rem;
}

body.home.has-header-image .site-description, 
body.home.has-header-video .site-description, 
body.home.has-header-image .site-description a, 
body.home.has-header-video .site-description a {
	font-size:2rem;
}




	.twentyseventeen-front-page.has-header-image .custom-header-media,
	.twentyseventeen-front-page.has-header-video .custom-header-media,
	.home.blog.has-header-image .custom-header-media,
	.home.blog.has-header-video .custom-header-media {
		height: 1200px;
		height: calc(100vh - 90px); /* height of top nav bar */
		max-height: 100%;
		overflow: hidden;
	}
	
	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
    height: calc(100vh - 90px);
}


 .single-featured-image-header img {
/* display: block; */
/* margin: auto; 
    max-width:80%; prevents it from showing full width of screen */
    height: 40vh; /* prev 100vh */
    max-width: 1320px;
    object-fit: cover;
}
 
	.site-description {
    display:block;
}

.has-sidebar:not(.error404) #primary {
    float: none;
    margin: 0 auto;
    max-width: 1200px;
	width:68%;
}

	.has-sidebar #secondary {
    padding-left: 3%;
    padding-top: 2%;
		width: 26%;
	}
	

 	/* Site Branding */

	.site-branding {
		padding: 1em 0;
		display:none; /* hiding title  */
	}

 	.custom-logo-link img {
		max-height: 120px;
	}


	body.home .custom-logo-link img {
    max-height: 150px; /* default is 80px */
}

body.has-header-image .site-description,
body.has-header-video .site-description {
	display:block;
}

.main-navigation a {
    padding: 1em 1.6em;
	text-transform: uppercase;
}


/* menu - sub pages hover colour */

	.main-navigation li li:hover,
	.main-navigation li li.focus {
		background: #000000;
	}


/* Layout */

.page .panel-content .entry-title, 
.page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
    font-size: 2rem;
	clear:none;
}


.page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 1.5em;
}


.wrap {
    max-width: 1000px;
    padding-left: 3em;
    padding-right: 3em;
}

.navigation-top .wrap {
    max-width: 1400px;
    padding: 0.75em 2em 0.75em 2em; /* needed extra room in nav bar once i added extra items */
}

.site-content {
    padding: 2em 0 0;
}

.page:not(.home) #content {
    padding-bottom: 0.5em;
}


/* full width page template customisations */
body.page-template-page-full-width #primary .page-full-width .entry-content {
width: 100%;
}

body.page-template-page-full-width #primary .page-full-width .entry-header {
width: 100%;
}

/* center site info in footer */

.site-info {
    float: none;
    padding: 0.7em 0 0;
    text-align: center;
    width: 100%;
}

}

@media screen and ( min-width: 67em ) {



}

@media screen and ( min-width: 79em ) {


}

@media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {


}