/*
 * Header and Nav responsive styles
 */
#header-container .header-primary {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding-top: 40px;
	background-color: #fff;
	opacity: 1;
	transition: opacity 0.3s
}

#header-container .header-primary #nav-main{ width: 100%; }
 
#header-container .header-primary .header-left {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	z-index: 20;
}
#header-container .header-primary .header-right {
	width: 15%;
	font-size: 10px;
	text-align: right;
	padding-right: 30px;
}
#header-container .lang-selector {
	position: static !important;
	padding: 0;
	width: auto;
	margin-left: 30px;
}
#header-container .lang-selector .locale-mini-selector {
	line-height: 40px;
	margin-right: 10px;
	padding: 0;
}
#header-banner { display: none; }

#header-container .header-primary .site-search {
	position: relative;
}
#header-container .header-primary .site-search .search-submit {
	position: absolute;
    top: 0;
    right: 12px;
    color: #000;
    background: transparent none;
    height: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
}

#header-container #search-suggestions{
	visibility: hidden;
	position: absolute;
    width: 260px;
    background-color: #fff;
    border: 1px solid #707070;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 14px;
    right: 30px;
    top: 103px;
}
body.header-docked #header-container #search-suggestions{right: 85px; top: 110px;}

#header-container #search-suggestions .product-suggestions a{ color: #000; }
#header-container #search-suggestions .product-suggestions a:hover,
#header-container #search-suggestions .phrase-suggestions a:hover{ text-decoration: underline; }
#header-container #search-suggestions .product-suggestions .product-name{
	margin-bottom: 0;
    font-size: 14px;
}
#header-container #search-suggestions  a.selected{ font-weight: bold; text-decoration: underline }
#header-container #search-suggestions  a:focus{outline: transparent; outline-offset: 0;}
#header-container #search-suggestions .search-phrase{ text-align: center; }
#header-container #search-suggestions .search-phrase a{ text-decoration: underline; }
#header-container #search-suggestions .search-phrase a:hover{ text-decoration: underline; font-weight: bold; }
#header-container #search-suggestions .hitgroup{ margin-top: 1rem; }
#header-container #search-suggestions h4{ font-family: 'Roboto', sans-serif; text-transform: capitalize; letter-spacing: normal; margin-top: 1rem; }
#header-container #search-suggestions .hitgroup a{ display: block; color: #000; text-transform: capitalize;}
#header-container #search-suggestions .no-result-msg{ margin: 0; }

#header-container .header-primary .header-links {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 40px;
	text-align: right;
	border-bottom: 1px solid #eaeaea;
	padding-right: 15px;
	font-family: 'Roboto', sans-serif;
}

#header-container .header-primary .header-links > a:hover {
	text-decoration: underline;
	color: #707070;
} 

#header-container .header-primary .header-tabs > *,
#header-container .header-primary .header-links > * {
	display: inline-block;
	position: relative;
	height: 40px;
	line-height: 40px;
	padding: 0 15px;
	color: #000;
	font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

#header-container .header-primary .header-links #help-section .help-icon-text:hover,
#header-container .header-primary .header-links #account-section .account-icon-text:hover,
#header-container .header-primary .header-links #cart-icon .cart-icon-text:hover {
	text-decoration: underline;
	color: #707070;
}

#header-container .header-primary .header-tabs {
	z-index: 1;
	top: 0;
	left: 0;
	display: inline-block;
	height: 40px;
	border-right: 1px solid #d1d1d1;
	background-color: #f7f7f7;
	text-transform: uppercase;
	font-size: 0;
	font-weight: bold;
	font-family: 'Roboto Condensed', sans-serif;
}
#header-container .header-primary .header-tabs > * {
	border-bottom: 1px solid #d1d1d1;
}
#header-container .header-primary .header-tabs a:first-of-type { border-right: 1px solid #d1d1d1; }
#header-container .header-primary .header-tabs > .active {
	position: relative;
	background-color: #fff;
	height: 40px;
	border-bottom: 0;
}
#header-container .header-primary .header-tabs > .active:before {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	width: 3px;
	height: 40px;
	background: transparent url(../images/tab-corner.svg) no-repeat top right;
	background-size: cover;
	z-index: 1;
}
#header-container .header-primary .header-tabs > .active:after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 3px;
	height: 40px;
	background: transparent url(../images/tab-corner.svg) no-repeat top left;
	background-size: cover;
	z-index: 1;
}

#header-container .fa-icon {
	font-size: 18px;
	line-height: 40px;
	margin-right: 5px;
}
#header-container .svg-icon {
	width: auto;
	height: 18px;
	margin-right: 5px;
	margin-top: -3px;
}

#header-container #cart-icon .svg-icon{ height: auto; }

#header-container .header-tabs .svg-icon {
	width: 13px;
	height: auto;
}

#header-container .header-primary #logo {
	display: block;
	margin:20px auto;
	background-color: transparent;
	background-repeat:  no-repeat;
	background-position: center center;
	background-size: contain;
	background-image: url(../images/callaway-logo-black.svg);
	width: 87px;
	height: 40px;
}
.ody #header-container .header-primary #logo,
.odyssey #header-container .header-primary #logo {
	background-image: url(../images/odyssey-logo-color.svg);
	width: 281px;
	height: 39px;
}

#header-container .cart-utility-text { line-height: 20px; }
#header-container .cart-icon { font-size: 20px; }

.header-docked #header-container .header-links-docked .site-search{ 
	    position: absolute;
	    display: none;
	    width: auto;
	    min-width: 300px;
	    height: auto;
	    right: 16px;
	    top: 30px;
	    opacity: 0;
	    transition: opacity 0.25s, top 0.25s;
    }

.header-docked #top-bar {
	display: none;
}

.header-docked #header-container .header-links-docked .site-search{ width: 100%; }
.header-docked #header-container .header-links-docked .site-search.show-search{ top: 65px; opacity: 1; transition: opacity 0.25s, top 0.25s; z-index: 10; }

#header-container .header-links-docked .site-search .search-input.form-control{ padding-right: 5rem; }
#header-container .header-links-docked .site-search button.search-submit{
   	 min-width: unset;
	 padding: 0 20px;
	 margin: 0;
	 background-color: transparent;
	 color: #000;
	 position: absolute;
	 right: 0;
	 top: 12px;
	 width: auto;
}
#header-container .header-links-docked .site-search button.search-close{
	display: none;
    position: absolute;
    right: 1.5rem;
    font-size: 1.5rem;
    height: auto;
    border: none;
    background-color: transparent;
}

#header-container #signinmodal{ height: auto; position: fixed; }
.modal-backdrop{ z-index: 1060; }
.modal-backdrop.login-modal-backdrop{ z-index: 10600; }

@media (min-width: 992px) {
	
	#header-container {
		position: relative;
		display: block;
		z-index: 1040;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
	}
	
	#header-container .nav-mobile-btn,
	#header-container .header-links-mobile,
	#header-container .header-links-docked {
		display: none;
	}
	
	#sign-in-menu {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
	}
	
	#header-banner {
		display: block;
		padding: 0;
	}
	
	.header-docked #header-banner{
		display:none;
    }
    
	#header-banner > * {
		min-height: 40px;
		padding: 9px 30px;
		background: #f7f7f7 none;
		font-size: 14px;
		text-align: center;
	}
	
	#nav-primary ul {
		position: relative;
		z-index: 2;
		padding: 0;
		margin: 0;
	}
	#nav-primary ul > li {
		padding: 0;
		margin: 0;
		list-style: none outside none;
	}
	#nav-primary ul.level-1 {
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}
	#nav-primary ul.level-1 > li {
		display: inline-block;
	}
	#nav-primary ul.level-1 > li > .nav-item {
		height: 85px;
		display: flex;
		align-items: center;
		padding: 10px 20px	0;
		color: #000;
		font-size: 14px;
		font-weight: bold;
		text-transform: uppercase;
		font-family: 'Roboto Condensed', sans-serif;
	}
	#nav-primary ul.level-1 > li > .nav-item .nav-item-label {
		display: block;
		padding-bottom: 10px;
		border-width: 0 0 2px;
		border-style: solid;
		border-color: transparent;
		line-height: 1.1em;
	}
	.csstransitions #nav-primary ul.level-1 > li > .nav-item .nav-item-label {
		transition: border-color 250ms, text-shadow 250ms;
	}
	#nav-primary ul.level-1 > li > .nav-item.active .nav-item-label {
		border-color: #000;
	}
	#nav-primary ul.level-1 > li > a.nav-item:focus {
		text-decoration: none;
	}
	
	#nav-primary .nav-back {
		display: none;
	}
	#nav-primary .nav-panels {
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #fff;
		display: flex;
		align-items: flex-end;
		width: 100%;
		height: 0;
		overflow: hidden;
		transition: height 250ms, border-width 0ms 250ms;
	}
	#nav-primary .nav-panels.open {
		height: 275px;
		border-width: 1px 0;
		transition: height 250ms, border-width 250ms;
	}
	
	#nav-primary .nav-container {
		position: absolute;
		z-index: 10;
		overflow: auto;
		width: 100%;
		opacity: 0;
		background-color: #fff;
		padding: 15px 30px;
		border-top: 1px solid #eaeaea;
		border-bottom: 1px solid #eaeaea;
	}
	.csstransitions #nav-primary .nav-container {
		transition: opacity 0ms 250ms;
	}
	#nav-primary .nav-container.active {
		position: relative;
		z-index: 20;
		opacity: 1;
	}
	.csstransitions #nav-primary .nav-container.active {
		transition: opacity 250ms;
	}
	#nav-primary .nav-container > .container-fluid {
		max-width: 1440px;
	} 
	
	#nav-primary .nav-column {
	    width: 25%;
	}
	#nav-primary .nav-column .nav-item-header {
		font-weight: 700;
	}
	#nav-primary .nav-column .nav-item {
		display: block;
		padding: 8px 0;
		color: #000;
		font-size: 14px;
		line-height: 19px;
	}
	#nav-primary .nav-column a:hover .nav-item-label {
		border-bottom:1px solid #000;
	}
	#nav-primary .nav-column .view-all {
		font-weight: 700;
	}
	#nav-primary .nav-column .nav-item-link:first-of-type {
		margin-top: 35px;
	}
	#nav-primary .nav-item-mobile {
		display: none !important;
	}
	
	#nav-primary .nav-slot {
		background-color: #f7f7f7;
		width: 100%;
		height: 245px;
	}
	
	#nav-primary .nav-slot-hide {
		display: none;
	}
}

@media (max-width: 991px) {
	#header-container .header-primary .header-logo{
		width: 33.33333333%;
		padding-left:15px;
	}
	#header-container .header-primary .header-right {
		width: 55%;
	}
	
	#header-container .lang-selector {
		display: none;
	}
	
	#header-container .header-links,
	#header-container .header-right .site-search{
		display: none !important;
	}
	
	#header-container .header-primary {
		position: relative;
		width: 100%;
		z-index: 10001;
		border-bottom: 1px solid #cdcdcd;
		justify-content: space-between;
		padding-top:0;
	}
	
	#header-container .header-primary.tabs-enabled{ padding-top: 40px; }
	#header-container .header-primary.tabs-enabled .header-left{ width: 100%; }
	
	#header-container .header-nav-btn {
		width: 25%;
	}
	
	#header-container .nav-mobile-btn {
		padding: 0;
		border: 0;
		background: transparent none;
		font-size: 24px;
		line-height: 50px;
		margin-left: -15px;
	}
	#header-container .nav-mobile-btn.open:before {
		content: "\f00d";
	}
	
	#header-container .header-links-mobile {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: -15px;
	}
	#header-container .header-links-mobile > * {
		display: inline-block;
		min-width: 0;
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 24px;
		font-weight: normal;
		background: none transparent;
		outline: none;
		color: #000;
		text-align: center;
		padding: 0;
		margin-left: 10px;
		border: 0;
		border-radius: 0;
	}
	#header-container #cart-icon-mobile .svg-icon {
		height: 24px;
		margin-right: 0;
		margin-top: 0;
	}
	
	#nav-primary {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		right: -100%;
		background-color: #fff;
		z-index: 10000;
	}
	
	#nav-primary ul.level-1,
	#nav-primary .nav-panels > .nav-container {
		position: absolute;
	    width: 100%;
	    top: 121px;
	    right: 0;
	    bottom: 0;
	    margin: 0;
	    padding: 0;
	    background-color: #fff;
	    overflow: auto;
	    border-left: 1px solid #cdcdcd;
	    height: calc(100% - 91px);
	}
	
	.header-primary.tabs-enabled #nav-primary ul.level-1,
	.header-primary.tabs-enabled #nav-primary .nav-panels > .nav-container {
	
	}
	
	.csstransitions #nav-primary ul.level-1,
	.csstransitions #nav-primary .nav-panels > .nav-container {
		transition: right 300ms;
	}
	
	#nav-primary ul.level-1.open,
	#nav-primary .nav-panels > .nav-container.active {
		right: 100%;
	}
	
	#nav-primary ul.level-1 > li {
		padding: 0;
		margin: 0;
		list-style: none outside none;
	}
	
	#nav-primary .nav-back {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
	}
	
	#nav-primary .nav-back-btn,
	#nav-primary .nav-item {
		position: relative;
		display: block;
		width: 100%;
		text-transform: uppercase;
		padding: 15px 60px 15px 30px;
		color: #000;
		background-color: #fff;
		text-align: left;
		font-family: 'Roboto Condensed', sans-serif;
    	font-weight: bold;
    	font-size: 16px;
	}
	#nav-primary .nav-back-btn,
	#nav-primary .level-1 > li > .nav-item {
		border-width: 0 0 1px;
		border-style: solid;
		border-color: #cdcdcd;
	}
	#nav-primary .nav-back-arrow {
		margin-right: 15px;
	}
	#nav-primary .level-1 > li > .nav-item:after {
		font-family: 'Font Awesome 5 Pro';
		font-weight: 900;
		content: "\f054";
		position: absolute;
		display: inline-block;
		padding: 15px 30px;
		right: 0;
		top: 0;
	}
	#nav-primary .level-1 > li > .nav-item.allowance i { margin-right: 9px; }
	#nav-primary .level-1 > li > .nav-item.allowance:after {content: "";}
	
	#nav-primary #account-icon-mobile.nav-item:after,
	#nav-primary #order-status-icon-mobile.nav-item:after,
	#nav-primary #accessibility-icon-mobile.nav-item:after {
		content: none;
	}
	#nav-primary .nav-container .nav-item {
		padding-left: 58px;
    	font-family: inherit;
    	text-transform: inherit;
    	font-weight: normal;
	}
	#nav-primary .nav-container .nav-item.view-all {font-weight:bold;}
	#nav-primary .nav-item-mobile .nav-item {
		background-color: #f7f7f7;
		font-weight: normal;
    	font-family: inherit;
	}
	
	#nav-primary .nav-column {
		padding-left: 0;
		padding-right: 0;
	}
	#nav-primary .nav-slot-1,
	#nav-primary .nav-slot-2 {
		padding: 0 30px;
		margin: 30px 0;
	}
	#nav-primary .nav-item-header ~ .nav-item {
		display: none;
	}
	
	body.nav-mobile-open{ overflow: hidden; height: 100%; }
	
	#header-container .header-links-docked .site-search{ 
        position: absolute;
	    display: none;
	    width: 100%;
	    min-width: 300px;
	    height: auto;
	    right: 0;
	    top: 0;
	    opacity: 0;
	    transition: opacity 0.25s, top 0.25s;
    }
	#header-container .header-links-docked .site-search{ width: 100%; }
	#header-container .header-links-docked .site-search.show-search{ top: 65px; opacity: 1; transition: opacity 0.25s, top 0.25s; z-index: 10; }
	#header-container .header-links-docked .site-search button.search-close{ display: block; width: auto; color: #000; }
	#header-container .header-links-docked .site-search button.search-submit{
  	    min-width: unset;
    	padding: 0 20px;
    	margin: 0;
    	background-color: transparent;
    	color: #000;
    	position: absolute;
    	left: 10px;
    	top: 30px;
    	font-size: 1.2rem;
    	right: auto;
	}
	#header-container{ position: relative; }
	#header-container .header-primary .header-tabs {
		display: flex;
		align-content: stretch;
		width: 100%;
	}
	#header-container .header-primary .header-tabs > * {
		flex-grow: 1;
		text-align: center;
	}
	
	#header-container #search-suggestions{
	    z-index: 100;
	    width: 95%;
	    right: 2.5%;
	    top: 173px;
	    left: 2.5%;
    }
    #header-container.tabs-enabled-container #search-suggestions{ top: 213px; }
    #header-container #search-suggestions .search-suggestion-wrapper{
    	padding-top: 1rem;
    }
    #header-container #search-suggestions .search-suggestion-wrapper > div{
    	flex: 50%;
    	padding: 0 1rem;
    }
    #header-container #search-suggestions .search-suggestion-wrapper .product-suggestions .product-suggestion:nth-of-type(1n+6),
    #header-container #search-suggestions .search-suggestion-wrapper .product-suggestions .hitgroup .hit:nth-of-type(1n+6){ display: none; }
    
    #header-container #search-suggestions .product-suggestions .product-name,
    #header-container #search-suggestions .hitgroup a{ margin-bottom: 0.5rem; }
    body.header-docked #header-container #search-suggestions{
    	width: 90%;
    	right: 5%;
	    top: 163px;
	    left: 5%;
    }
    
    
}
@media (max-width: 480px) { 
	
}

/* BEGIN - Docked Header */

/* All Sizes */
.header-docked #header-container {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0;
	width: 100%;
/* 	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); */
	z-index: 10006;
}

.header-docked #header-container .header-links,
.header-docked #header-container .header-tabs {
	display: none;
}

/* Screen reader only */
.header-docked #header-container .header-links-docked .account-icon-text {
	clip: rect(0 0 0 0); 
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

/* Desktop */
@media (min-width: 992px) and (max-width: 1024px) {
	#nav-primary ul.level-1 > li > .nav-item {
		padding: 10px 14px 0;
		font-size:12px;
	}
}

@media (min-width: 992px) {
	#header-container .header-primary .header-logo {padding-left: 30px; position: absolute; left: 0; z-index: 10; }
	#header-container .header-primary .header-right{ position: absolute; right: 0; z-index: 10; }
	
	.header-docked #header-container .header-left,
	.header-docked #header-container .header-right {
		display: none;
	}
	
	.header-docked #header-container .header-primary {
		padding-top: 0;
		width:100%;
	}
	.header-docked #header-container .header-primary #logo {
		width: 54px;
		height: 30px;
		margin: 15px 0;
	}
	.header-docked #nav-main {margin:0 auto;}
	.header-docked #nav-primary ul.level-1 > li > .nav-item {
		height: 60px;
		display: flex;
		align-items: center;
	font-size: 12px;
	}
	
	.header-docked #nav-primary .nav-panels {
		display: none;
		position: fixed;
		top: 60px;
		left: 0px;
		width: 100%;
	}
	
	.header-docked #header-container .header-links-docked {
		display: block;
		margin: 0 30px;
		white-space: nowrap;
		position: absolute;
		right: 0;
		z-index: 10;
	}
	
	.header-docked #header-container .header-links-docked > * {
		display: inline-block;
		min-width: 0;
		width: 35px;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		font-weight: normal;
		background: none transparent;
		outline: none;
		color: #000;
		text-align: center;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
	}
	
	.header-docked #header-container .header-links-docked #account-menu{
	    position: absolute;
	    display: none;
	    top: -10000px;
	    width: auto;
	    height: auto;
	    z-index: 1000;
	    right: 34px;
	    display: block;
	    text-align: right;
	    background-color: #fff;
	    font-size: 12px;
	    border: 1px solid #d1d1d1;
	    transition: opacity 0.25s;
	}
	
	.header-docked #header-container .header-links-docked #account-section #account-menu.show-menu{ 
	    opacity: 1;
	    display: block;
	    border: 1px solid #C7C7C7;
	    top: 60px;
    }
	
	.header-docked #header-container .header-links-docked #account-menu a{ display: block; }
	
	.header-docked #header-container .header-links-docked .svg-icon {
		margin-right: 0;
	}
	
	#help-section #header-help-container, .header-docked #help-section #header-help-container, #account-section #account-menu {
		top: -1000px;
        display: block;
	    transition: opacity 0.25s ease-in-out 0s;
	    z-index: -1;
	}
	
	#help-section #header-help-container.show-menu, #account-section #account-menu.show-menu {
	    opacity: 1;
	    z-index: 10009;
	    display: block;
	    border: 1px solid #C7C7C7;
	    top: 39px;
	}
	
	
}

/* Mobile */
@media (max-width: 991px) {
	.header-docked #header-container .header-primary {
		padding-top: 0;
	}
	
	.header-docked #header-container .header-primary #logo {
		margin: 15px auto;
	}
	
	#header-container .header-links-docked #account-section,
	#header-container .header-links-docked #account-icon,
	#header-container .header-links-docked .search-mobile-btn,
	#header-container .header-links-docked #cart-icon-mobile{
		display: none;
	}
	.header-docked #header-container{ display: block; }
	#header-container .header-links-docked{ position: relative; z-index: 100000; }
	.header-docked #header-container .header-links-docked .site-search{
	    width: 95%;
	    top: 0;
	    right: 0;
	    left: 0;
	    margin: 0 auto;
    }
	#header-container .header-links-docked .site-search.show-search {
	    right: 0;
	    top: 10px;
	    opacity: 1;
	    transition: opacity 0.25s, top 0.25s;
	    z-index: 1;
	    left: 0;
	    margin: 0 auto;
	}
	.header-docked #header-container .header-links-docked .site-search.show-search{ top: 10px; }
	#header-container .header-links-docked .site-search > form{
	    width: 95%;
    	margin: 0 auto;
    	display: flex;
    	align-items: center;
   	}
	#header-container .header-links-docked .site-search label{ color: #fff; }
	#header-container .header-links-docked .site-search .search-input{
        background-color: #fff;
    	height: 3rem;
    	border-radius: 0;
    	padding: 2.5rem 2rem 2.5rem 4rem;
    }
	
	.header-docked #nav-primary ul.level-1,
	.header-docked #nav-primary .nav-panels > .nav-container {
		top: 71px;
	}
	
/* 	body.config-open #header-container{opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;} */
	
}

/* END - Docked Header */

/* ODYSSEY SITE SPECIFIC STYLES */
.ody #nav-primary ul.level-1 > li > .nav-item,
.odyssey #nav-primary ul.level-1 > li > .nav-item {
	font-family: 'open-sans-condensed', sans-serif; font-size:16px;
}

@media (min-width: 992px) {
	.ody .header-docked #header-container .header-primary #logo,
	.odyssey .header-docked #header-container .header-primary #logo {
		width: 150px;
	}
}
@media (max-width: 991px) {
	.ody #header-container .header-primary #logo,
	.odyssey #header-container .header-primary #logo {
		width:47px;
		background-position:0;
		background-size: auto;
	}
	.ody #header-container .header-primary #logo.box-16x9:before,
	.odyssey #header-container .header-primary #logo.box-16x9:before {
		padding-top:100px;
	}
}
	