@font-face {
font-family: 'Oswald';
src: url('font/Oswald-Regular.ttf');
url('font/Oswald-Regular.ttf') format('truetype'),
font-style: normal;
font-weight: 400;
}

@font-face {
font-family: 'Oswald';
src: url('font/Oswald-Light.ttf');
url('font/Oswald-Light.ttf') format('truetype'),
font-style: normal;
font-weight: 300;
}

@font-face {
font-family: 'Oswald';
src: url('font/Oswald-Bold.ttf');
url('font/Oswald-Bold.ttf') format('truetype'),
font-style: normal;
font-weight: 700;
}


@font-face {
    font-family: 'dubtoneregular';
    src: url('font/dubtone-webfont.woff2') format('woff2'),
         url('font/dubtone-webfont.woff') format('woff'),
         url('font/dubtone-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


body {
	margin:0;
	padding: 0;
	font-family: Georgia, Serif;
	font-size: 16px;
	line-height: 22px;
	color: #444;
	background: #fff;
	text-align: center;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
    clear: both;
    height: 0px;
}

input[type=submit],input[type=button],button{margin:1px 5px;padding:1px 5px; cursor: pointer;}

.pagebg {
	z-index: 1000;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	float: left;
	margin-bottom: -40px;
    height: 1px;
}

.pagebg img {z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: auto; background-size: cover;

}

/* PAGE-CONTAINER */

#page-container {
	height: auto;
	margin: 0 auto;
	text-align: left;
 	background: #fff;
	z-index: 1;
	position: relative;
	padding-top: 0px;
}



/* TEXT STYLES */

a, a:link, a:visited {
	color: #9a0000; /* red #9a0000 f2718c fabb00*/
	text-decoration: none;
}

a:hover {text-decoration: underline;}


h1, h2, h3, h4, h5, .more {font-family: Oswald, Arial, Helvetica, Sans-serif; font-weight: 300; }

h2, h3, h4 {margin-top: 15px; margin-bottom: 5px;}

#right-content h3 {margin-top: 0px;}

p {margin: 10px 2px;}

h1 {
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 400;
	padding: 10px 15px;
	background: url(images/bg-pattern.png) repeat;
	line-height: 1.2em;
}

h2 {
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 300;
	padding: 5px 0px 0px;
	line-height: 1.2em;
}

h3 {
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 300;
	padding: 5px 0px 0px;
	line-height: 1.2em;
}

h4 {
	text-transform: capitalize;
	font-size: 20px;
	font-weight: 300;
	padding: 5px 0px 0px;
	line-height: 1.2em;
}

h5 {
	text-transform: capitalize;
	font-size: 18px;
	font-weight: 300;
	padding: 5px 0px 0px;
	line-height: 1.2em;
}
h6 {
	text-transform: capitalize;
	font-size: 16px;
	font-weight: 300;
	padding: 5px 0px 0px;
	line-height: 1.2em;
}

.more {font-weight: 300;	text-transform: uppercase;}

/*** IMAGES: equivelant of .img-responsive, massive overhaul from old set up  ***/
#left-content img, #full-content img, #left-content p img, #full-content p img {margin: 10px 1px; display: block; max-width: 100%; height: auto;}
#left-content .inline-image, #full-content .inline-image, .inline-image, #left-content form img, #left-content .simple_image_gallery_container img, #right-content .simple_image_gallery_container img,
#full-content .simple_image_gallery_container img, #left-content .simple_image_gallery_container p img, #full-content .simple_image_gallery_container p img, #right-content .simple_image_gallery_container p img { margin: 10px;}

#left-content .sortable_responsive_gallery_image img,
#full-content .sortable_responsive_gallery_image img {
    max-width: 98%;
    margin: 0 auto 10px;
}
/* **************** Custom Bullet Points ********************** */
#left-content ul, #left-content-forum ul, #full-content ul, #left-content ol, #full-content ol {
    margin: 10px 15px; 
    list-style-type: none;
    padding-left: 15px;
}

#left-content ul li, #left-content ol li, #full-content ul li, #full-content ol li {
    margin-top: 15px; 
    margin-bottom: 15px; 
    background-image: url(images/bullet.png);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 24px; 
}


/* **************** Page title Sprockets ********************** */
span.pagetitle {position: relative;}
span.pagetitle h1 {margin-left: 60px;}
span.titlesprocket {
	background: url(images/black-sprocket-small.png) top left no-repeat;
	width: 40px;
	height: 40px;
	position: absolute;
    top: 18px;
	left: 10px;
}

#product-content span.titlesprocket {
    top: 4px;
}

#page-container .checkout_content span.titlesprocket {
    top: 4px;
}



/* The <p> styles are duplicated in content.css */
/*
p {padding: 1em; padding-bottom: 0;}
p:last-child {padding-bottom: 1em;}
*/

/*
#left-content p, #left-content-forum p { margin-left: 50px;}
#full-content p {margin-left: 50px;}
*/

#left-content span.quote, #full-content span.quote {
	margin-left: -63px;
	margin-right: 10px;
	margin-top: 30px;
	margin-bottom: 20px;
	padding-right: 25px;
	width: 180px;
	float: left;
	font-family: Oswald, Arial, Helvetica, Sans-serif; font-size: 20px; font-weight: 300; line-height: 1.4em;
}

.giantquote {font-size: 30px; font-family: Georgia, serif; }

#tinymce span.quote {margin-left: 0px;	padding-right: 25px;}

/********** MENU **********/
#menu {
	width: 100%;
	min-height: 45px;
	text-align: center;
	background: #9a0000; /* red #9a0000 f2718c fabb00*/
	box-shadow: 0px 0px 5px #121212;
	position: fixed;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
}

#main-nav {
	width: 100%;
	min-height: 40px;
	text-align: center;
	background: #000;
	box-shadow: 0px 0px 5px #121212;
	margin: 0;
	padding: 0;
	z-index: 4;
    box-sizing: border-box;
}

#sub-nav {
	min-height: 5px;
	text-align: center;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 3;
}

#main-nav-wrap, #sub-nav ul{width: 960px; margin: 0 auto; padding: 0;font-size: 0;}

#main-nav ul {margin: 0 auto; width: auto; padding: 0; font-size: 0;box-sizing: border-box;}

#main-nav .clevyr-nav {
    margin-left: -50px;
}

#main-nav-wrap .sociallinks  {
	/* max-height: 40px;
	max-width: 100px;
	position: absolute;
	top: 4px;
	right: 0;
	font-size: 16px; */
	display: none; /* TURN OFF SOCIAL LINKS IN THE MENU BAR */
}

#main-nav-wrap .sociallinks img:hover{opacity: 0.5;}
#main-nav-wrap .sociallinks p {margin: 0; padding: 0;} 

#main-nav ul li, #sub-nav ul li {
	list-style-type: none; 
	display: inline-block; 
	font-size: 16px; 
	font-family: Oswald, Arial, Helvetica, Sans-serif;
	text-transform: uppercase;
	font-weight: 300;
	padding: 8px 7px;
}

#main-nav ul li:first-child {padding-left: 0px;}

#main-nav a, #main-nav a:link, #main-nav a:visited {
	text-decoration: none;
	color: #fff;
}
#main-nav a:hover {color: #9a0000;} /* red #9a0000 f2718c fabb00*/

#sub-nav a, #sub-nav a:link, #sub-nav a:visited {
	text-decoration: none;
	color: #fff;
	font-size: 16px;
}
#sub-nav a:hover {color:#000;}

/*********** SlickNav Responsive Menu *********/
@media only screen and (max-width:959px){ 
	#menu {	display:none;}
	.slicknav_menu {display:block;}
}
@media only screen and (min-width:960px){
	#menu {display:block;}
	.slicknav_menu {display:none;}
}



/*********** Inner Content Styles (previously margin on p tag) ********************/

@media only screen and (max-width:768px) {
    .inner-content {margin-left: 10px;}
}

@media only screen and (min-width:769px){
    .inner-content {margin-left: 60px;}
}


/************** FOOTER **************/

footer {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #000;
	text-align: center;
	clear: both;
	z-index: 1000;
    padding-bottom: 15px;
}

#footer-content {
	margin: 0 auto;
    width: 100%;
	padding: 15px;
	color: #fff;
    position: relative;
    box-sizing: border-box;
}

#footer-content-left {
	float: left;
	width: 60%;
	margin: 0;
	padding: 0px;
	padding-top: 15px;
	text-align: left;
}

#footer-content-right {
	float: right;
	width: 40%;
	padding: 0px;
	text-align: right;
}

#footer-content-left ul {margin: 0; padding: 0; list-style-type: none;}
#footer-content-left li {list-style-type: none; text-decoration: none; float: left; padding-right: 10px; padding-left: 10px; border-right: 1px solid #fff; margin-bottom: 20px;}
#footer-content-left li:last-child {border-right: 0px;}

#footer-content-left, #footer-content-left a, #footer-content-left a:link, #footer-content-left a:visited {
	text-decoration: none;
	font-size: 16px; 
	font-family: Oswald, Arial, Helvetica, Sans-serif;
	text-transform: uppercase;
	font-weight: 300;
	color: #fff;
}

#footer-content-left a:hover {color: #9a0000;} /* red #9a0000 f2718c*/

#footer-content-right img:hover{opacity: 0.5;}

#footer-content-right form {
	float: right;
	clear: right;
	color: #fff;
	padding: 10px;
	margin-right:10px;
	border: 1px solid #444;
}

#footer-content-right table {
    color: #fff;font-size: 18px; 
	font-family: Oswald, Arial, Helvetica, Sans-serif;
	font-weight: 300;
}

#footer-content-right input[type=submit]#mc-embedded-subscribe {
	background: #9a0000 !important;
	text-transform: uppercase !important;
	color: #fff !important;
	padding: 4px 18px !important;
	border: 0px !important;
	font-family: Oswald, sans-serif !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	margin: 0px !important;
	float: right;
    box-sizing: border-box;
}

#footer-content-right input[type=submit]#mc-embedded-subscribe:hover {color: #000 !important;}

footer .social a {
    color: #fff;
}

footer .social a:hover {
    color: #9a0000;
}

footer ul.social li {
    display: inline-block;
    margin-left: 10px;
    font-size: 24px;
}

@media only screen and (max-width:768px) {
    #footer-content {width: 300px;}
    #footer-content-left {width: 100%;}
    #footer-content-right {width: 100%;}
    #footer-content-left a, #footer-content-left a:link, #footer-content-left a:visited {font-size: 14px;}
}

@media only screen and (min-width:769px){
    #footer-content {width: 740px;}
    #footer-content-left {width: 50%;}
    #footer-content-right {width: 50%;}
    #footer-content-left a, #footer-content-left a:link, #footer-content-left a:visited {font-size: 14px;}
}

@media only screen and (min-width:960px){
    #footer-content {width: 960px;}
    #footer-content-left {width: 60%;}
    #footer-content-right {width: 40%;}
    #footer-content-left a, #footer-content-left a:link, #footer-content-left a:visited {font-size: 16px;}
}


/************** end FOOTER **************/


/* RESPONSIVE DESIGN */
/* Rember all responsive rules must be last (beneath this line) and master.css must load last. Max-width resets at the bottom of this section are duplicate rules
from above i.e. not necessary above. Responsive resizes certain elements small and then gradually bigger back to original state */

/*-*-*-*-*-*-*-*-*-  <<   MAX 320     -*-*-*-*-*-*-*-*-*/
@media only screen and (max-width:320px) {

.pagebg img {margin-top: 80px;}

#page-container, #main-nav-wrap, #sub-nav ul, #full-content, #product-content, #mid-content .mid-content-block.strava-block {width: 275px;}
#left-content {width: 320px; padding: 0px;}
    
#page-container {padding: 0px;} 
#page-container { padding-top: 15px;}
#top-content, #mid-content, #bot-content {padding-left: 0px;}

#main-nav-wrap {background: #000;}

#left-content table.ccm-discussion-message-list, #left-content table.ccm-discussion-category-list, #left-content-forum div.ccm-discussion-messages {margin-left: 5px;}

    
#full-content, #product-content {width: 320px; padding-left: 0; padding-right: 0px; margin-left: 0px;} /* Set width and remove padding for left content on mobiles */
#right-content, #right-content-forum {padding: 0px;} 
    
#left-content span.quote, #full-content span.quote {margin-left: 0px; padding-right: 40px; margin-top: 25px; margin-bottom: 25px; width: 250px; text-align: center;}

}
/*-*-*-*-*-*-*-*-*-  <<   MIN 321     -*-*-*-*-*-*-*-*-*/
@media all and (min-width:321px) {

.pagebg img {margin-top: 80px;}

#page-container, #main-nav-wrap, #sub-nav ul, #full-content, #product-content, #left-content, #mid-content .mid-content-block.strava-block {width: 275px;}
#page-container {padding: 0px; padding-top: 15px;} 
#top-content, #mid-content, #bot-content {padding-left: 0px;} /* Remove 3 column padding on mobiles */

#main-nav-wrap {background: #000;}

#left-content table.ccm-discussion-message-list, #left-content table.ccm-discussion-category-list, #left-content-forum div.ccm-discussion-messages {margin-left: 5px;}

#right-content, #right-content-forum {padding-left: 0px; padding-right: 0px;} /* Width stays the same for right content but remove padding on mobiles */

#left-content span.quote, #full-content span.quote {margin-left: 0px; padding-right: 40px; margin-top: 25px; margin-bottom: 25px; width: 250px; text-align: center;}

	
}	
/*-*-*-*-*-*-*-*-*-     min 766  >>   -*-*-*-*-*-*-*-*-*/
@media only screen and (min-width: 768px) {
.pagebg img {margin-top: 0;}
#page-container, #main-nav-wrap, #sub-nav ul, #main-nav ul { width: 760px;} /* Set page width for basic containers */
    #full-content {width: 700px;}
    #product-content {width: 680px;}
#left-content {width: 440px; padding-right: 15px;} 
#right-content, #right-content-forum { width: 300px; padding-left: 0px;} 

#mid-content .mid-content-block.strava-block {width: 615px;}
    
#page-container {
	height: auto;
	margin: 0 auto;
    padding: 0px;
	text-align: left;
 	background: #fff;
	z-index: 1;
	position: relative;
}

#top-content, #mid-content, #bot-content {padding-left: 15px;} /* Put padding back on 3 columns (padding top has already been applied to the page-container) */

#main-nav-wrap {background: #000;}
#left-content table.ccm-discussion-message-list, #left-content table.ccm-discussion-category-list, #left-content-forum div.ccm-discussion-messages {margin-left: 60px; display: block; border:0px;}
#left-content span.quote, #full-content span.quote {	margin-left: 0px; 	padding-right: 25px; margin-top: 25px; margin-bottom: 25px; width: 180px; text-align: left;}

}
	
/*-*-*-*-*-*-*-*-*-     min 960  >>   -*-*-*-*-*-*-*-*-*/
@media only screen and (min-width:960px){
#page-container, #main-nav-wrap, #sub-nav ul,#main-nav ul {	width: 960px;} /* Set page width for basic containers */
#left-content {width: 630px; padding-right: 30px;}

#mid-content .mid-content-block.strava-block {width: 615px;}
#main-nav ul {text-align: center;}
#full-content, #product-content {width: 930px;}

#main-nav ul li:first-child {margin-left: 0px;} /* Fixes problem with white sprocket background on #main-nav ul being overlapped by first link !!! NOT CURRENTLY IN USE !!!*/


}

@media all and (-ms-high-contrast: none) and (min-width:960px), (-ms-high-contrast: active) and (min-width:960px) {
/* IE10+ CSS styles go here */
#page-container, #main-nav-wrap, #sub-nav ul,#main-nav ul, #footer-content {width: 945px;} /* Set page width for basic containers */
}

@media only screen and (min-width:960px){

}




/***** LOGO, BANNER AND CONTENT SLIDER STYLES *****/
#home-banner {
	width: 100%;
	height: 440px;
    display: block;
	position: relative;
	z-index: 1;
}

#new-home-banner {
    width: 100%;
    position: relative;
    z-index: 1;
    height: 330px;
}

#logo {
	width: 429px;
	height: 107px;
	position: absolute;
	top: 80px;
	left: 50%;
	margin-left: -214px;
	overflow: hidden;
}

#home-banner:after {
    content: "World Class Cycling Coaching";
    font-size: 24px;
    font-family: Oswald, Arial, Helvetica, Sans-serif;
	font-weight: 300;
    font-style: italic;
    color: #fff;
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: 120px;
    opacity: 0.9;
}

#logo a, #logo a:link, #logo a:visited {cursor: pointer; padding: 55px 225px; position: absolute; top:0; left:0;background: transparent url(images/logo.png) top left no-repeat; }
#logo a:hover {border-radius: 25px; background: transparent url(images/logo-hover.png) top left no-repeat;}

#banner {
	width: 930px;
	text-align: center;
	font-size: 0;
	margin: 0 auto;
	background: #efefef;
}

#banner-content {
	width: 100%;
	max-height: 340px; /* Temp height until slider/image object dictates height*/
	text-align: right;
	font-size: 16px;
	overflow: hidden;
	z-index: 0;
	margin: 0;
	padding: 0;
}

#banner-content img, #banner-content div {
	z-index: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	text-align: right;
}

#content-slider {
	width: 100%;
	padding: 0px 15px;
}

.powerSliderShell {
    padding-top: 15px;
}

@media only screen and (max-width:768px) {
    #top-spacer {
        height: 5px; display: block; background: transparent;
    }
    #home-banner {display: block; height: 160px;}
    #new-home-banner {display: block; height: 180px;}
    
    #logo {top: 25px; margin-left: -55px; width: 110px;} /* Re-position and hide text part of the logo */
    #logo a, #logo a:hover {padding: 55px;} /* Re-size image link */
    
    #home-banner:after {display: none;}
    
    #banner, #content-slider {display: none;}
}

@media only screen and (min-width: 769px) {
    #top-spacer {
        height: 10px; display: block; background: transparent;
    }
    #home-banner {height: 180px;}
    #new-home-banner {display: block; height: 180px;}
    
    #logo {top: 10px; margin-left: -214px; width: 429px;} /* WAS 429px wide; Re-position and uncover text part of the logo back to original size */
    #logo a:hover {padding: 55px 255px;} /* Re-size image link back to original state */
    
    #home-banner:after {font-size: 24px; bottom: 17px; margin-left: -95px;display: block;}
    #banner, #content-slider {display: none;}
}

@media only screen and (min-width:960px){
    #top-spacer {
        height: 60px; display: block; background: transparent;
    }
    #home-banner {height: 260px;} /* Reset home banner height */
    #new-home-banner {height: 330px;} /* Reset home banner height */
    
    #logo{top: 70px;	left: 50%;	margin-left: -480px;} /* Reset logo position */
    #logo a:hover {padding: 55px 255px;} /* Reset logo image link */
    
    #home-banner:after {font-size: 24px; bottom: 30px; margin-left: 220px;display: block;}
    
    #banner, #content-slider {display: block;}
}




/***** FORUM STYLES *****/
@media only screen and (max-width:768px) {
    #left-content-forum {width: 300px; padding-left: 0; padding-right: 0px;} /* Set width and remove padding for left content on mobiles */
    #left-content-forum table.ccm-discussion-message-list, #left-content-forum table.ccm-discussion-category-list { margin-left: 0px !important;}
    #left-content-forum table.ccm-discussion-message-list thead, #left-content-forum table.ccm-discussion-category-list thead { max-width: 300px !important; overflow: hidden !important;}
    #left-content-forum img.u-avatar, #left-content-forum table.ccm-discussion-category-list img, #left-content-forum table.ccm-discussion-category-list td.ccm-discussion-category-last-post {display: none;}
    #left-content-forum table td.ccm-discussion-category-name, #left-content-forum table.ccm-discussion-category-list td.ccm-discussion-category-last-post {width: 25%; font-size: 70%;}
    #left-content-forum table.ccm-discussion-category-list td, #left-content-forum table.ccm-discussion-message-list td {padding: 2px !important;}
}

@media only screen and (min-width: 769px) {
    #left-content-forum {width: 630px; padding-left: 0px; padding-right: 15px; padding-top: 15px;} /* Set width and adjust padding for left content on mobiles !!! ADD PADDING TO THE TOP? !!! */
    #left-content-forum table.ccm-discussion-message-list, #left-content-forum table.ccm-discussion-category-list { margin-left: 60px !important;}
    #left-content-forum table.ccm-discussion-message-list thead, #left-content-forum table.ccm-discussion-category-list thead { max-width: 630px !important; overflow: auto !important;}
    #left-content-forum img.u-avatar, #left-content-forum table.ccm-discussion-category-list img, #left-content-forum table.ccm-discussion-category-list td.ccm-discussion-category-last-post {display: block;}
    #left-content-forum table td.ccm-discussion-category-name, #left-content-forum table.ccm-discussion-category-list td.ccm-discussion-category-last-post {width: 50%; font-size: 100%;}
    #left-content-forum table.ccm-discussion-category-list td, #left-content-forum table.ccm-discussion-message-list td {padding: 12px !important;}
    #forum-right-content {display: none;}
}

@media only screen and (min-width:960px) {
    #left-content-forum {width: 630px;}
    #left-content-forum table.ccm-discussion-message-list, #left-content-forum table.ccm-discussion-category-list { margin-left: 60px !important;}
}
/***** end FORUM STYLES *****/


/**  Breakpoints **/


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

@media all and (min-width:321px) {
    
}

@media only screen and (min-width: 768px) {

}

@media only screen and (min-width:768px) and (max-width:800px) {

}

@media only screen and (min-width:801px) and (max-width:958px){

}

@media only screen and (min-width:960px){

}



/* LIGHTBOX IMAGES AND SORTABLE RESPONSIVE IMAGE GALLERY (ALSO LIGHTBOX) */

#left-content div.lightboxed-image-block img.lightboxed-image {
	width: auto;
	height: auto;
	margin: 0 auto;
}

#left-content div.sortable_responsive_gallery_container .sortable_responsive_gallery_image img {
	width: auto;
	max-width: 98%;
	margin: auto;
	border: 1px solid #efefef;
}
#left-content div.sortable_responsive_gallery_container {
	display: block;
	float: none;
	margin-top: 20px;
}
#left-content div.sortable_responsive_gallery_container:after {
	content: " ";
	display: table;
	clear: both;
}
#left-content div.sortable_responsive_gallery_image {
	
	min-height: 200px;
}

#fancybox-overlay {
	background-image: url(../../packages/lightboxed_image/blocks/lightboxed_image/css/theme1/images/overlay.png);
	background-color: transparent !important;
	opacity: 1 !important;
}

div#cboxLoadedContent {
	width: auto !important;
}

#left-content div#cboxContent img {
	width: 100% !important;
	height: auto !important;
}
@charset "UTF-8";