/**
*
* CALLAWAYGOLF-RESPONSIVE.CSS
*
* Write your media query-specific CSS styles here.
*
* Styles that apply to all media query states should be
* added to CALLAWAYGOLF.CSS.
*
*/

body.scroll-lock { overflow: hidden; }

/*
 * HEADER AND NAV STYLES
 */

.header-top-wrapper {
	/* background-color: #F6F7F9; */
	overflow: hidden;
}

#logo a {
	display: block;
	padding: 0;
	margin: 0;
}
.logo-text {
	text-indent: -4000px;
	display: block;
	width: 100%;
	height: 100%;
}

#header-container { position: relative; padding: 0; margin: 0 }

.utility-section { float: left; display: inline-block; }
.utility-section a { display: inline-block; color: #191A1B; padding: 0px 15px; text-decoration: none; }

#nav-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 100%;
	z-index: 50020;
	background-color: rgba(0,0,0,0.37);
	opacity: 0;
}
.rgba #nav-overlay.open {
	opacity: 1;
	right: 0;
}
.csstransitions #nav-overlay {
	-webkit-transition: opacity 500ms, right 0ms 500ms;
	   -moz-transition: opacity 500ms, right 0ms 500ms;
	     -o-transition: opacity 500ms, right 0ms 500ms;
	        transition: opacity 500ms, right 0ms 500ms;
}
.csstransitions #nav-overlay.open {
	-webkit-transition: opacity 500ms, right 0ms 0ms;
	   -moz-transition: opacity 500ms, right 0ms 0ms;
	     -o-transition: opacity 500ms, right 0ms 0ms;
	        transition: opacity 500ms, right 0ms 0ms;
}

#nav-main ul li > a {
	color: inherit;
	text-decoration: none;
}
#nav-main ul li > a:hover {
	text-decoration: none;
}


/*
 * Common Locale Selector Styles
 */
#locale-selector .largeLogo {
	background: #fff url(../images/ogio-logo-horizontal-black.svg) 50% 50% no-repeat;
	width: 138px;
	height: 25px;
	margin-bottom: 20px;
}
#locale-selector h4 {
	font-family: 'Mulish',sans-serif;
	text-transform: uppercase;
}
#locale-selector ul {
	margin: 0;
	padding: 0;
}
#locale-selector ul li {
	list-style: none outside none;
	padding: 10px 0;
	margin: 0;
}
#locale-selector ul li a {
	color: #222;
}
.locale-mini-link .flag-icon {
	margin-right: 10px;
}

.locale-mini-link {
	display: block;
	position: relative;
	color: #222;
	line-height: 40px;
	padding-right: 25px;
}
.locale-mini-link,
.locale-mini-link:active,
.locale-mini-link:focus,
.locale-mini-link:hover {
	text-decoration: none;
}
.locale-mini-link .locale-selected {
	position: absolute;
	right: 0;
	top: 50%;
	font-size: 16px;
	margin-top: -8px;
	color: #C60C30;
}

@media (min-width: 1200px) {
	#locale-selector {
		position: absolute;
		box-sizing: border-box;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 30px solid #fff;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	#locale-list {
		position: absolute;
		box-sizing: border-box;
		top: 100px;
		left: 100px;
		bottom: 100px;
		right: 50%;
		background-color: #fff;
		padding: 60px;
		overflow: scroll;
	}
}
@media (max-width: 1199px) {
	#locale-selector {
		padding: 50px 0;
	}
}
@media (min-width: 769px) {
	#locale-selector h4 {
		margin: 0 0 40px;
		font-size: 40px;
	}
	#locale-selector .welcome {
		display: none;
	}
	
	#locale-utility {
		display: block;
		float: right;
	}
	#locale-utility .locale-mini-selector {
		display: inline-block;
		position: relative;
		line-height: 50px;
	}
	#locale-utility .locale-mini-selector .locale-button {
		display: block;
		color: #222;
		text-transform: uppercase;
		padding: 0;
		margin-left: 10px;
	}
	#locale-utility .locale-mini-selector .locale-label {
		font-size: 75%;
	}
	#locale-utility .locale-mini-selector .locale-dropdown {
		display: none;
		position: absolute;
		right: 0;
		top: 100%;
		background-color: #F6F7F9;
		padding: 20px;
		white-space: nowrap;
		z-index: 10000;
		min-width: 200px;
		line-height: initial;
	}
	#locale-utility .locale-mini-selector.open .locale-dropdown {
		display: block;
	}
	#locale-utility .locale-mini-selector .locale-dropdown h5 {
		font-family: 'Mulish',sans-serif;
		font-size: 16px;
		text-transform: uppercase;
		margin: 15px 0;
	}
	#locale-utility ul { margin: 0; padding: 0; }
	#locale-utility ul li { list-style: none outside none; }
	
	#nav-main ul li.locale-nav {
		display: none !important;
	}
}
@media (max-width: 768px) {
	#locale-utility {
		display: none;
	}
	#locale-selector h4 {
		margin: 0 0 20px;
		font-size: 30px;
	}
	#nav-main .locale-nav {
		display: block;
	}
	
	.landing-products .product-name h3{
	    font-family: 'Mulish', sans-serif;
    	font-size: 12px;
    	font-weight: bold;
	}
	
	.add-to-cart-link .btn-primary.addToCartBtn{
	    padding: 10px 25px;
    	font-size: 12px;
	}
	
	.search-container button{ font-size: 20px; }
}
@media (min-width: 480px) {
	#locale-selector .welcome {
		display: none;
	}
}
@media (max-width: 479px) {
	#locale-selector .largeLogo {
		margin: 0 auto 20px;
		width: 70px;
		height: 40px;
		background-size: cover;
		background-position: left center;
	}
	#locale-selector h4 {
		text-align: center;
		font-size: 30px;
	}
	#locale-selector .welcome {
		display: block;
		text-align: center;
		font-family: 'Mulish',sans-serif;
		font-size: 16px;
		font-weight: 300;
		text-transform: uppercase;
		margin-bottom: 10px;
	}
}


@media (min-width: 992px) {
	/*
	 * Header Styles
	 */
	
	#logo { display: inline-block; float: left; height: 85px; }
	#logo a {
		width: 138px;
		height: 85px;
		line-height: 85px;
		background: #fff url(../images/ogio-logo-horizontal-black.svg) 50% 50% no-repeat;
		background-size: contain;
	}
	
	#header-primary { 
		position: relative;
		zoom: 1; 
	}

	#header-container .nav-left { position: absolute; top: 0; left: 0; float: left;}
	#header-container .nav-right { position: absolute; top: 0; right: 0; float: right;}

	#header-container .nav-left .icon-menu { display: none; }
	
	.utility-container { height: 85px; }
	.utility-section a { 
		line-height: 75px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.utility-section a span:first-child {font-size:2.2rem; line-height:85px;}
	
	.header-basket-count {
		display: inline-block;
	    width: 20px;
	    padding: 3px 7px;
	    font-size: 10px;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: text-bottom;
	    background-color: #F6F7F9;
	    border-radius: 50px;
	    line-height:initial;
	}
	
	#help-utility .menu-caret-desktop, #my-account-utility .menu-caret-desktop {display: inline-block;font-size: 50%; padding-left: 4px;}
	#help-utility, #my-account-utility { position: relative;}
	
	#site-help .menu-caret-desktop, #my-account .menu-caret-desktop {
	    display: inline-block;
	    font-size: 50%;
	    padding-left: 4px;
	}
	
	#nav-main .nav-mobile-header,
	#nav-main .nav-next,
	#nav-main .nav-back,
	#nav-main #mobile-back{
		display: none;
	}
	
	#nav-icon {
		display: inline-block;
		float: left;
		font-size: 15px;
		margin-right: 30px;
		line-height: 85px;
		cursor:pointer;
	}
	.nav-left #nav-icon,
	.nav-left #logo{
		position: relative;
    	z-index: 1000;
    }
	
	#nav-main ul {
		padding: 0;
		margin: 0;
	}
	#nav-main ul li {
		padding: 0;
		margin: 0;
		list-style: none outside none;
		color: #191A1B;
	}
	
	#nav-main ul.nav-level-1 {
		text-align: center;
		white-space: nowrap;
	}
	#nav-main ul.nav-level-1 > li {
		display: inline-block;
		text-transform: uppercase;
		font-weight: 900;
		text-align: left;
		font-size:1.2rem;
	}
	#nav-main ul.nav-level-1 > li > a {
		display: block;
		line-height: 85px;
		padding: 0 20px;
	}
	#nav-main ul.nav-level-1 > li.open > a {
		background: #F6F7F9 none;
	}
	
	#nav-main li > .nav-dropdown-container {
		position: absolute;
		/* display: none; */
	    visibility: hidden;
    	opacity: 0;
		width: 100vw;
	    top: 100%;
	    left: 50%;
	    right: 50%;
	    margin-left: -50vw;
	    margin-right: -50vw;
		background: #fff none;
		z-index: 1100;
		transition: padding 0.5s, opacity 0.3s, visibility 0.3s;
	}
	#nav-main li.open > .nav-dropdown-container {
		display: block;
	    opacity: 1;
    	visibility: visible;
		padding: 2rem 0 2rem 0;
		border-top: 1px solid #F6F7F9;
		width: 100vw;
	    top: 100%;
	    left: 50%;
	    right: 50%;
	    margin-left: -50vw;
	    margin-right: -50vw;
	}
	
	#nav-main .nav-level-2 {
		padding: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: start;
		justify-content: center;
	}
	#nav-main .nav-level-2 > li {
		vertical-align: top;
		flex-grow: 1;
	}

	#nav-main .nav-level-2 > li.nav-section-family {
		display: table-cell;
		width: 50%; 
	}

	#nav-main .nav-level-3 > li {
		font-weight: normal;
		text-transform: none;
		padding: 5px 0;
	}
	
	#nav-main .nav-title {
		display: block;
		font-family:'Mulish', Sans-Serif;
		text-transform: uppercase;
		margin-bottom: 1rem;
		font-size:1.4rem;
	}
	
	#nav-main ul #my-account-link { 
		display: none; 
	}

	#header-container .header-primary .nav-right {
		position: absolute;
		right: 0;
	}

	#search-utility {
		display: none;
	}

	#mobile-back .viewAllMobile {
		display: none;
	}

	#nav-main .nav-level-1 > li > a {
		cursor: default;
	}

	#nav-main .nav-dropdown-container .row {
		display: flex;
		flex-direction: row;
		align-items: start;
		justify-content: center;
	}

	#nav-main .nav-cats-container {
		width: 50%;
	}

	#nav-main .nav-slots-container {
		width: 50%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	#nav-main .nav-slots-container .nav-slot {
		width: 50%;
	}

	#nav-main .nav-cats-container .nav-slot {
		display: none;
	}

}
@media (max-width: 991px) {
	#locale-utility { display: none; }
	
	#header-container .nav-left { position: absolute; top: 0; left: 0; float: left; right: 50%; margin-right: -31px; }
	#header-container .nav-right { position: absolute; top: 0; right: 0; float: right; padding-right: 0; }
	
	#logo {
		position: absolute;
		top: 0;
		right: 0;
	}
	#logo a {
		width: 62px;
		height: 100px;
		line-height: 100px;
		background: #fff url(../images/ogio-logo-o-black.svg) 50% 50% no-repeat;
		background-size: contain;
	}

	#nav-main .nav-logo {
		display: inline-block;
		width: 30px;
		height: 80px;
		line-height: 80px;
		background: #fff url(../images/ogio-logo-o-black.svg) 50% 50% no-repeat;
		background-size: contain;
		margin-left: 15px;
	}
	
	#header-container {
		height: 100px;
	}

	.utility-container { height: 100px; }
	.utility-section a { 
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	 }
	.utility-section a span:first-child { font-size: 2rem; line-height:100px; }
	
	#nav-icon {
		display: inline-block;
		font-size: 16px;
		padding: 0 15px;
		line-height: 100px;
	}
	
	#nav-main .nav-mobile-header {
		display: block;
		position: fixed;
		top: 0;
		left: -268px;
		width: 268px;
		height: 80px;
		z-index: 50030;
		background: #fff none;
		border-right: 1px solid #e6e6e6;
	}
	#nav-main .nav-mobile-header.open {
		left: 0;
	}
	#nav-main .nav-mobile-logo {
		
	}
	
	#nav-main ul {
		display: block;
		position: fixed;
		top: 80px;
		left: -268px;
		bottom: 0;
		width: 268px;
		z-index: 50020;
		background: #fff none;
		padding: 0 15px 15px;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		border-right: 1px solid #e6e6e6;
	}

	#nav-main .nav-slots-container {
		display: none;
	}

	


	#nav-main ul.open,
	#nav-main .nav-slots-container.open {
		left: 0;
	}
	.csstransitions #nav-main ul,
	.csstransitions #nav-main .nav-mobile-header {
		-webkit-transition: left 500ms;
		   -moz-transition: left 500ms;
		     -o-transition: left 500ms;
		        transition: left 500ms;
	}
	
	#nav-main ul li {
		background: #fff none;
		list-style: none outside none;
		border-bottom: 1px solid #e6e6e6;
		text-transform: uppercase;
		color: #191A1B;
	}
	#nav-main ul li > a {
		position: relative;
		display: block;
		padding: 30px 0;
		font-weight: 700;
	}

	#nav-main .nav-title {
		display: block;
		font-weight: 700;
		padding: 30px 0;
	}
	
	#nav-main .nav-close {
		display: block;
		float: right;
		font-size: 2rem;
		line-height:80px;
		padding: 0 15px;
    	cursor: pointer;
    	border: unset;
    	background: unset;
	}
	
	#nav-main .nav-next {
		position: absolute;
		top: 0;
		right: 0;
		line-height: 80px;
	}

	#nav-slot-1, #nav-slot-2 {
		margin: 1rem 0 1rem 0;
	}

	.nav-slot-content {
		margin: 1rem 0 1rem 0;
	}

	#header-container .site-search {
		display: none;
	}

	#mobile-back .viewAllMobile {
		position: absolute;
		top: 50%;
		right: 10%;
		transform: translate(0, -50%);
		text-decoration: underline;
		z-index: 999;
	}

	#mobile-back {
		position: relative;
	}

	#nav-main .nav-back {
		font-weight: 800;
	}
}


/*
 * SECONDARY (LEFT) NAV
 */
#nav-secondary,
#category-results #secondary {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	background: #fff none;
	z-index: 50021;
	overflow: scroll;
}
#nav-secondary.open{
	display: block;
	overflow-y: scroll;
	overflow-x: hidden;
}
#nav-secondary.open,
#category-results #secondary.open { left: 0; }
.csstransitions #nav-secondary,
.csstransitions #category-results #secondary {
	-webkit-transition: left 500ms;
	   -moz-transition: left 500ms;
	     -o-transition: left 500ms;
	        transition: left 500ms;
}

#secondary-nav .nav-secondary-header {
	display: block;
	position: relative;
}

#secondary-nav .nav-secondary-content {
	padding: 20px;
}

@media (max-width: 768px) {
	#nav-secondary{ display: none; }
}
@media (min-width: 769px) {
	#nav-secondary{ display: none; left: -380px; width: 380px; }

	#secondary-nav .nav-logo {
		display: inline-block;
		width: 43px;
		height: 100px;
		line-height: 100px;
		background: #fff url(../images/ogio-logo-o-black.svg) 50% 50% no-repeat;
		background-size: contain;
		margin-left: 30px;
	}

	#secondary-nav .nav-close {
		display: block;
		float: right;
		font-size: 2rem;
		line-height: 100px;
		padding: 0 30px;
    	cursor: pointer;
	}
	
	#secondary-nav .nav-close button { background-color: unset; border: unset; }
}

/**
*
* MEDIA QUERIES
*
* Insert your CSS styles in the appropriate section here
*
*/

/* UP TO LARGE DESKTOP */
@media (max-width: 1440px) {
	#product-media .media-footer { padding: 20px 0; position: static; }
}

/* UP TO LARGE DESKTOP */
@media (min-width: 1200px) {
	#category-slots-footer-1 .product-images-slide .wp-post .icon.video::before { right: 22px; }
	#product-images .badge-wrapper { left: 140px; top: 480px; }

	#nav-slot-1 .nav-slot-content .image, 
	#nav-slot-2 .nav-slot-content .image {
		max-width: 225px;
	}
}

@media (min-width: 1200px) and (max-width: 1440px) {
	#nav-main ul.nav-level-1 > li > a {
		padding: 0 12px;
	}
} 

@media (min-width: 992px) and (max-width: 1199px) {
	#product-images .badge-wrapper { left: 120px; top: 380px; }

	#nav-main ul.nav-level-1 > li > a {
		padding: 0 12px;
	}

	#nav-main ul.nav-level-1 > li {
		font-size: 1rem;
	}

	#nav-slot-1 .nav-slot-content .image, 
	#nav-slot-2 .nav-slot-content .image {
		max-width: 150px;
	}
}
@media (min-width: 992px) {
	#emailSignupModal .modal-body .input-append { width: 560px; margin: auto; }
	#product-media .media-text .box, #product-media .media-image .box { height: 600px; }
	#media-image-right .content, #media-image-left .content { top:50%; transform:translateY(-50%) }
	#media-image-right .content-bottom { display: none; }
}
@media (min-width: 700px) and (max-width: 991px) {
	#product-images .badge-wrapper { left: 120px; top: 440px; }
}
/* IPAD 1,2 LANDSCAPE = 1024px */
@media (max-width: 1024px) {
	
}

/* TABLET UP TO DESKTOP */
@media (min-width: 768px) and (max-width: 979px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}
@media (max-width: 991px) {
	#media-image-right .media-img, #media-image-left .media-img { height:80%; }
	#media-image-right .content-top { display: none; }
	
}
@media (max-width: 989px) {
  .detailsContainer div { padding-left: 45px; }
}


/* PORTRAIT PHONE UP TO PORTRAIT TABLET */
@media (max-width: 1024px) {
	#product-media .media-footer { padding: 0 30px 30px; }
	#product-media .media-text .box .content { padding: 30px; }
}

/* PORTRAIT PHONE UP TO DESKTOP */
@media (max-width: 992px) {
	footer .footer-copyright { text-align: center; }
}

/* PORTRAIT PHONE UP TO DESKTOP/TABLET */
@media (max-width: 767px) {	
	#product-configurator-ajax .section-preview {padding:0 15px;}
	
	.product-bar.affix {position:static;}
	.product-bar .product-info { padding: 20px 20px; height: 150px; }
	.product-bar #product-rating { display: block; margin: 10px 0; }
	.product-bar #product-price {display:block; position:static; line-height:inherit;}
	.product-bar .product-info {height:inherit;}
	
	#product-specs .text-right {text-align:left; margin-top:30px;}
	
	.navbar-right {float:right; margin:0;}
	.utility-container {margin:0;}
	
	ul#player-tabs.has-media-tab li {width: 100%;}
	.player-club-data .product-category {font-size: 14px;}
    .player-club-data .product-name {font-size: 14px;}
	#bio-container .player-social-links {margin: 0 50px 0 0;}
	#bio-container h3.player-name {font-size: 22px;}
	#bio-container .player-tour {position: absolute;font-size: 14px;}
	#bio-container .player-bio p { margin-top: 40px;font-size: 1.6rem;}
	
	#team-container .player-bio-ajax #bio-container { padding: 30px; }
	#team-container ul.tour-nav > li { display: block; width: 100%; }
	
	.numberLocations {padding:0;}
	#map-canvas {height:250px;}
	#store-filter {padding:4rem;}
	#store-filter #retail-search {margin-top:0;}
	.retailNumber {margin-bottom:10px;}
	.eventDetails {margin-left:0;}
	.rsUni .rsFullscreenBtn { right: 20px !important; }
}
@media (min-width: 580px) and (max-width: 767px) {	
	#product-images .badge-wrapper { left: 90px; top: 340px; } 
	#product-images .badge-wrapper img { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8);}

	footer #connect-container .input-append button, #emailSignupModal .modal-body .input-append button {
		padding: 0 15px;
	}	
}
@media (min-width: 521px) and (max-width: 579px) {
	#product-images .badge-wrapper { left: 90px; top: 300px; } 
	#product-images .badge-wrapper img { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8);}

	footer #connect-container .input-append button, #emailSignupModal .modal-body .input-append button {
		padding: 0 15px;
	}	
}
@media (max-width: 520px) {
  #my-account-utility {
    display: none;
  }
  
  #product-images .badge-wrapper img { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6);}
}
@media (min-width: 481px) and (max-width: 520px) {	
	#product-images .badge-wrapper { left: 70px; top: 280px; } 

	footer #connect-container .input-append button, #emailSignupModal .modal-body .input-append button {
		padding: 0 15px;
	}	
}
/* PORTRAIT PHONE UP TO LANDSCAPE PHONE */
@media (max-width: 480px) {
	.product-bar .product-info { position: relative; padding: 10px 20px; }
	.product-bar #product-price { line-height: 1.1em; height: auto; top: auto; bottom: 10px; right: 20px; }
	
	.player-club-data > .btn.btn-primary.pull-right {float: left;}
	#team-container .player-container .player-tile {margin: auto 10%; }
	
	#product-media .media-wrapper.even .media-image { float: none; }
	
	#product-features { padding: 20px; }

	#product-media .media-text .box:before { padding-top: 0 !important; }
	#product-media .media-text .box .content { position: static; }
	#product-media .media-date { text-align: left; }
	#product-media .media-footer { padding: 30px 0; position:static; }
	#product-media .media-text .box .content { padding: 20px; }
	#BVRRQuickTakeContentContainerID .BVRRHistogram {
		width: auto;
		position: relative;
		left: -130px;
		width:300px !important;
	}
	#BVRRQuickTakeContentContainerID .BVRRHistogramTitle .BVRRCount {font-size: 46px !important;}

	#product-images .badge-wrapper { left: 70px; top: 220px; }

	footer #connect-container .input-append button, #emailSignupModal .modal-body .input-append button {
		padding: 0 10px;
	}	
}

/* PORTRAIT PHONE */
@media (max-width: 360px) {
	footer #connect-container .input-append button, #emailSignupModal .modal-body .input-append button {
		padding: 0 5px;
	}	
}

/* PORTRAIT PHONE */
@media (max-width: 320px) {
	footer #connect-container .input-lg, .form-group-lg input.form-control {
		width: 100%;
	}
	footer #connect-container .input-append button, #emailSignupModal .modal-body .input-append button {
		position: static;
		display: block;
		width: 100%;
		margin-top: 10px;
	}	
	
}