/** ----------------------------------------------------------
 *
 * Contains the main layout of the page and the individual styles.
 * Acts as the main stylesheet for theme.
 *
 *		Include your notes or table of contents below....
 *		Include color hex's or values of your grid
 *
 *		1. OOCSS GRID
 *		2. MAIN LAYOUT
 *		3. HEADER
 *			- Brand
 *			- Search Form
 *		4. Navigation
 *			- Primary Navigation
 *			- tablet Navigation
 *			- Secondary Navigation
 *			- Secondary Nav 2-5 Levels deep
 *		5. Mixed
 *		6. Footer
 *		7. Page Specific Layout
 *			- Homepage
 *			- Search Results
 *		8. Device and Responsive Layout
 *			- Breakpoint 960px
 *			- Breakpoint 640px
 *				- Search Form
 *				- Main Content
 *		9. Print Styles
 *			- Simple Theme custom print styles
 *
 * @author Your Name <email@silverstripe.com>
 * ------------------------------------------------------- */

/* OOCSS Grid
* https://github.com/stubbornella/oocss/wiki/grids
*/

.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */
.lastUnit {
	overflow:hidden;
	*overflow:visible;
	*zoom:1;
	padding:0 10px;
}
.unit { /* unit - Base class which divides a line into sections (columns). */
	float:left;
	padding:0 10px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; /* box-sizing:border-box; creates a box-model where
	padding and border are NOT added onto the width - they are included in the width,
	so a 200px wide element with 20px padding will be 200px, NOT 240px wide */
}
.unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */
	float:right;
}

/* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space.
The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */
/* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */

.size1of1 {
	float:none;
}
.size1of2 {
	width:50%;
}
.size1of3 {
	width:33.33333%;
}
.size2of3 {
	width:66.66666%;
}
.size1of4 {
	width:25%;
}
.size3of4 {
	width:75%;
}
.size1of5 {
	width:20%;
}
.size2of5 {
	width:40%;
}
.size3of5 {
	width:60%;
}
.size4of5 {
	width:80%;
}
.lastUnit { /* lastUnit - Extends unit. Applied to the last child of every line. */
	float:none;
	width:auto;
	_position:relative; /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters.
	meaning that anything prefixed with _ wouldn't be picked up by any other browsers */
	_left:-3px;
	_margin-right:-3px;
}

/* MAIN LAYOUT */
body {
    margin: 0;
    background: #ededed;
    background: #1f1f1f;

    min-width: 240px;
    -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */

}
	.ie7 body,
	.ie8 body {
	    min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */
	}
	.main {
	    /*background: #fff;*/
	    padding: 40px 0 60px;
	    min-height: 300px;
	    /* LIGHT MODE
	    background: #fdfdfd;
	    END LIGHT MODE */
	}
	.inner {
	    max-width: 1100px;
	    margin: 0 auto;
	    padding: 0 30px;
	}
	.ie6 .inner {
	    width: 960px;
	}
	.no-sidebar .content-container {
	    float: left;
	    width:100%; /* makes content container full width when there is no sidebar */
	}
	.sidebar { /* this is the sidebar element */
	    margin-top: 12px;
	}
	.no-sidebar .sidebar {
		display: none;
	}


.content {
margin-bottom:2rem;
}
.content .video {
margin-bottom: 1.75rem;
}



div.socialShareLinks {
margin-top: 0.5rem;
clear:both;
}

.topLink {
position: fixed;
bottom:1.5em;
right:0;
padding:0;
margin: .5em -1em .5em 0;
margin: .5em 0em .5em 0;
background: rgba(136, 170, 153, 0.7);


writing-mode:tb-rl;
-ms-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
writing-mode:vertical-rl;
/*
-ms-writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
writing-mode:tb-rl;
writing-mode:vertical-rl;
*/

}
.topLink a {
color: rgba(255,255,255,0.7);
padding:.75em;
letter-spacing: 1px;
}

.topLink:hover {
background: rgba(136, 170, 153, 0.9);
}



/* HEADER */
.header {
    background: #1f1f1f;

    position: relative;
z-index: 1;
box-shadow: inset 0 0 50px rgba(0,0,0, 0.9);
box-shadow: inset 0 0 50px #000;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 1);


-webkit-box-shadow: inset 0px 0px 50px 10px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 50px 10px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 50px 10px rgba(0,0,0,0.75);

  border-bottom: 2px solid #222;
padding:0;

}
	.header .inner {
	    padding-top: 45px;
	    position: relative;
	    min-height: 72px;


/*position: absolute;
top: 0;
left: 0;*/
	    padding-top: 0px;
	    width:100%;
	    max-width:100%;
	    min-height: 450px;
padding:0;

	}

	/* Brand */
	header .brand, header .brand:hover {
	    /*float: left;
	    color: #fff;
	    display: inline-block;*/

	    		display:block !important;
		/*width:144px;
		height:144px;
		background: transparent url("../images/John-Carbone-MD-Logo-sm-block.png") no-repeat center center;*/
	}
		.brand h1 {
		    margin: 0;
		    padding: 0;
		    font-size: 48px;
		    font-family: "VAGRegular", "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		    color: #fff;
		    font-weight: 600;
		    font-stretch: normal; /* default value. No font stretching */
		    line-height: 1em;
		    	    display:none;
		}
		.brand p {
		    color: #aaa;
		    margin-bottom: 22px;
		    		    	    display:none;
		}
	header .brand {
		display:block !important;
		width:180px;
		height:185px;

		background: transparent url("../images/John-Carbone-MD-Logo-sm-block.png") no-repeat center center;
		background: rgba(0,0,0,0.5) url("../images/John-Carbone-MD-Logo-sm-block.png") no-repeat center right;

background-size: 165px 155px;
background-image: url("../images/John-Carbone-MD-Logo-sm-block.png");
background-image:
    -webkit-image-set(
      url("../images/John-Carbone-MD-Logo-sm-block.png") 1x,
      url("../images/John_Carbone_MD-Logo-md-block-2x.jpg") 2x,
      url("../images/John_Carbone_MD-Logo-lg-block-3x.jpg") 3x
    );
background-image:
    image-set(
      "../images/John-Carbone-MD-Logo-sm-block.png" 1x,
      "../images/John_Carbone_MD-Logo-md-block-2x.jpg" 2x,
      "../images/John_Carbone_MD-Logo-lg-block-3x.jpg" 3x
    );


		border: 2em solid #1f1f1f;
		border-right: 0;
		position:absolute;
		right:0;
		top:0;
		z-index:10;
		float:none;
		margin: -.5em 30% 0 auto;

		top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}


header .lastUnit {
padding:0;
}

hr {
    border: 0 !important;
    height: 1px;
    background: #2b2b2b;
}

	/* Search form */

	.search-bar {
		position: absolute;
		right: 13px;
		top: 12px;
		top: 0;
	}
		.search-bar .field {
			margin: 0;
			padding: 0;
		}
		.search-bar form input.text {
		   width: 155px;
/*padding: 5px 34px 5px 15px;*/
padding-left: 1em;
font-size: 15px;
color: #555;
margin: 0;
margin-right:31px;

border: none;
-moz-border-radius: 14px;
border-radius: 14px;
border-radius: 14px 0 0 14px;
background: #fff;
    background-color: #999;
min-height: 19px;

		}

		.search-bar form input.action { /* positions the search button icon over the top of the search input */
		    font-size: 15px;
	    position: absolute;
	    right: 0px;
	    right: -1px;
	    top: 0;
	    cursor: pointer;
	    border: none;
	   /* padding: 5px; */
padding: 0px;
min-height: 31px;
min-width: 35px;

	    background: none;
	    font-family: 'WebSymbolsRegular';/**/
	    color: #6F0046;
		border-radius: 0;
		-moz-border-radius: 14px;
border-radius: 14px;
		border-radius: 0 14px 14px 0;
		background: #555;
		margin: 0;
		}
		.search-bar form input.active,
		.search-bar form input.action:hover {
		    color: #000;
		}
		.search-bar form input:focus,
		.header textarea:focus {
		    outline: none; /* removes default browser outlining on focus */
		}
		.search-dropdown-icon {
		    display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */
		}



/* NAVIGATION */

span.navTitle {
display:none;
}

.topLinks {
background-color: rgba(255, 255, 255, .3);
background: #6F0046;
background-color: rgba(111, 0, 70, .85);
box-shadow: -10px 10px 20px rgba(0, 0, 0, .8);

padding: .75em 1.25em 0 1.25em;
margin:0;

position: relative;
z-index:10;
overflow:hidden;
}


.topLinks strong {
padding:0em 0.2em 0 0;
margin:0 0.2em 0 0;
color: #EDEDED;
color: rgba(255,255,255,0.5);
}
.topLinks a {
padding:0em .2em;
margin:0 .2em;
color: #1e1e1e;
color: #EDEDED;
color: #bbb;
color:rgba(255,255,255, .5);
    -moz-transition: color 0.2s;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.topLinks a:hover {
color:rgba(255,255,255, 1);
}

.topLinks .accountButtonContainer {
margin:.2em 0 0 auto;
float:right;
display: table-cell;
}

.topLinks span.cartLinkMini {
margin:-.75em -1.25em 0 1em;
height:100%;
padding: .7em;
float:right;
display: inline;
background: rgb(101,190,86);
}
.topLinks span.cartLinkMini strong {
color: #cec;
}

.topLinks .action {
background: #6F0046;
background: #1e1e1e;
color: #EDEDED;
color: #bbb;
border-radius: 4px;
padding: .2em 1em;
margin-top:2px;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
}


.header .primary {
float:right;
width:26%;
padding: 1em 0 0 0;
font-size: 1.15em;
line-height: 1.45em;
font-family: "VAGLig", Georgia, "Times New Roman", Times, serif;
	position: absolute;
	z-index:15;
	right:2%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}
.header .primary a {
color: #666;
color: #aaa;
color: #999;
border-top:1px dotted rgba(255, 255, 255, 0);
border-bottom:1px dotted rgba(255, 255, 255, 0);
padding: .5em 0;
margin: 0;
display:block;
text-transform: uppercase;
letter-spacing: .15em;
text-align:center;
}
.header .primary a:hover {
color:#fff;
border-top:1px dotted #444;
border-bottom:1px dotted #444;
}

.header .primary .current a {
color:#999;
color:#eee;
/*border-bottom:1px dotted #444;

color: rgba(136, 170, 153, .7);*/

}

.header .primary ul .accountButtonContainer {
display:none;
}


	/* Tablet Navigation */
	/* When navigation and logo overlap tablet-nav is initialized */

			.tablet-nav .header .primary ul li a { /* there is no hover on touch devices so no transition on hover is necessary */
			    -moz-transition: none;
			    -webkit-transition: none;
			    transition: none;
			}
	.tablet-nav .footer .right {
	    float: left;
	    width: 100%;
	}

	/* Secondary navigation */
	.main .secondary h3 {
	    font-size: 20px;
	     line-height: 30px;
/* LIGHT MODE
	    color: #666;
	    */
	    /* DARK MODE */
	    	    color: #999;
	    margin: 0 0 8px 0;
	    font-family: "VAGLig", "CamboRegular", Georgia, "Times New Roman", Times, serif;
	    font-weight: normal;
	}
	.main .secondary {
		   /* Darkmode */
		    border-bottom: 1px solid #696969;
		   /* LIGHT MODE  border-bottom:  1px solid #aaa; */
}
		.main .secondary ul {
		    padding: 0;
		    margin: 0;
		}
		.main .secondary li {
		   /* Darkmode */
		    border-top: 1px solid #696969;
		   /* LIGHT MODE  border-top:  1px solid #aaa; */

		    position: relative;
		    list-style-type: none;
		    margin-bottom: 0;
		}
			.main .secondary li .arrow {
			   /* DARK MODE */
			    color: #AD7793;
			   /* LIGHT MODE  color: #6F0046; */

			    padding-right: 5px;
			    display: block;
			    font-size: 15px;
			    line-height: 20px;
			    position: absolute;
			    left: 2px;
			    top: 10px;
			    -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */
			    -webkit-transition: 0.2s;
			    transition: 0.2s;
			}
		.main .secondary li a:hover .arrow {
		    left: 6px; /* this sets the final position for the arrow transition */
		}
		.main .secondary li a { /* side nav link styling */
		    padding: 12px 0;
		    display: block;
		    text-transform: uppercase;
		    letter-spacing: 2px;
		    font-size: 12px;
		    /* DARK MODE */
		    color: #ABABAB;
		    /* LIGHT MODE color: #666; */

		    line-height: 17px;
		    border-bottom: none;
		    font-family: 'VAGLig', 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
	-moz-transition: color 0.2s;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
		}
		.main .secondary li .text {
		    padding-left: 28px;
		    display: block;
		}
		.main .secondary li.current a.current {
			color: #b80000;
			color: #6F0046;

			color: #aaa;
					    /* DARK MODE */
		    color: #ABABAB;
			/*background-color: #EDEDED;*/
		}
		.main .secondary li.section,
		.main .secondary li.current {
		    /*background-color: #F3F3F3;*/
		}
			.main .secondary li.section a,
			.main .secondary li.current a {
			    color: #aaa;
			    		    /* DARK MODE */
		    color: #ABABAB;
			}


		/* Secondary navigation 2-5 levels deep */
		.main .secondary ul ul {
			display: none;
		}
		.secondary ul li.current ul,
		.secondary ul li.section ul { /* Only show child pages from selected parent */
			display: block;
		}
		.secondary li.current ul ul {
			display: none;
		}
		.main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
			.main .secondary ul ul li a .arrow { left: 12px; }
			.main .secondary ul ul li a:hover .arrow { left: 16px; }

		.main .secondary ul ul ul li a { padding-left: 20px; }
			.main .secondary ul ul ul li a .arrow { left: 22px; }
			.main .secondary ul ul ul li a:hover .arrow { left: 26px; }

		.main .secondary ul ul ul ul li a { padding-left: 30px; }
			.main .secondary ul ul ul ul li a .arrow { left: 32px; }
			.main .secondary ul ul ul ul li a:hover .arrow { left: 36px; }

		.main .secondary ul ul ul ul ul li a { padding-left: 40px; }
			.main .secondary ul ul ul ul ul li a .arrow { left: 32px; }
			.main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }

		.main .secondary li a:hover,
		.main .secondary li.section a:hover,
		.main .secondary li.current a:hover {
			color: #b80000;
			color: #6F0046;
					    /* DARK MODE */
		    color: #fff;
		}




/* MIXED */
header:after,
.main:after,
#Root:after,
.search-bar:after,
header .inner:after,
footer:after { /* clearfix */
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}
.search-bar form input.action,
.header .primary li a,
.footer a { /* adds color transition when links/inputs on hover */
    -moz-transition: color 0.2s;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.footer a.brand { /* LIGHT MODE color: #333; */ color: #888; margin-left: 0; }
.footer a.brand:hover { /* DARK MODE */ color: #C8A3B6; /* Light Mode color: #6F0046; */}
body h1 span.amp {
    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
    font-style: italic;
}



.comments-holder .info {
font-size: 13px;
}
body .comments-holder p.commenting-rss-feed  {
font-size: 13px;
}
body .comments-holder p.commenting-rss-feed  {
font-size: 13px;
}

/* FOOTER */
.footer {
    color: #888;
    /*background: #ededed;*/
    padding: 20px 0;
    font-size: 12px;
    line-height: 24px;
}

	.footer a {
	    /* DARK MODE */
	    color: #aaa;
	}
	.footer a:hover {
	    /*color: #B90000;*/
	    /* LIGHT MODE  color: #6F0046; */
	    /* DARK MODE */
	    color: #fff;
	}
	.footer .left {
	    float: left;
	    color: #000;
	    display: block;
	    margin-bottom: 10px;
	}
	.footer .right {
	    float: right;
	    display: block;
	    margin-bottom: 10px;
	}
	.footer span {
	    padding: 0 3px;
	    color: #444;
	}
	.footer .primary,
	.footer .primary ul {
	    display: inline;
	    margin: 0;
	    padding: 0;
	}
		.footer .primary li {
		    display: inline;
		}
	.ie6 .footer .primary li,
	.ie7 .footer .primary li { /* this is a bugfix for ie6/7 */
	    display: inline;
	    zoom: 1;
	    margin-right: 10px;
	}
	.footer .primary li:after { /* adds '/' to separate the footer navigation items */
	    padding: 0 3px 0 5px;
	    content: '/';
	    color: #444;
	}
	.footer .primary li:last-child:after {
	    content: ''; /* makes sure last nav item doesn't have a '/' following it */
	}
	.footer .arrow {
	    padding: 0 8px 0 5px;
	    color: #C8A3B6;
	    /* LIGHT MODE color: #6F0046; */
	    font-size: 13px;
	}
	.footer .primary .nav-open-button {
	    display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */
	}

	.footer .disclaimerBlock {
	/*font-size: 0.95em;*/
	margin: 1.5em auto 1.5em; auto;
	padding: 1em 0;
	color: #aaa;
	border-bottom: 1px dotted #393939;
    border-top: 1px dotted #393939;
    	border-bottom: 1px dotted #444;
    border-top: 1px dotted #444;
	}

.footer .copyright {
	font-size: 0.85em;
	color: #aaa;
	}





/* PAGE SPECIFIC LAYOUT */

	/* Homepage */
		/* currently no Hompage specific styles - feel free to add your own */

	/* Search Results */
	.searchContainer {
	position: relative;
	z-index:1;
	}

	.typography .searchResults h1 {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	.searchResults p.searchQuery {
	    margin-bottom: 10px;
	    font-size: 15px;
	    font-weight: bold;
	}
	.searchResults ul#SearchResults {
	    padding: 0;
	    border-bottom: 1px solid #2b2b2b;
	    margin:0;
	}
		.searchResults ul#SearchResults li {
		    border-top: 1px solid #2b2b2b;
		    padding: 20px 0;
		    list-style-type: none;
		}
		.searchResults ul#SearchResults p {
		    margin-bottom: 10px;
		}
		.searchResults #PageNumbers a {
		    padding: 0 5px;
		}
		.searchResults #PageNumbers .pagination {
		   	border-bottom: 1px solid #2b2b2b;
		    padding: 20px 0;
		    display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
		    width:100%;
		}
		.searchResults #PageNumbers .pagination span{
			display:table-cell; /* each element in the pagination div displays as a table cell */
		}
		.searchResults #PageNumbers p {
		    text-align: center;
		    padding:20px 0;
		}
		.searchResults #PageNumbers .next,
		.searchResults #PageNumbers .prev {
		    font-size: 14px;
		    padding: 0 20px;
		    display:table-cell; /* each element in the pagination div displays as a table cell */
		    vertical-align: middle;
		    border-bottom:0 !important;
		}
		.searchResults #PageNumbers .next {
		    margin-left: 15px;
		}
		.searchResults #PageNumbers .prev {
		    margin-right: 15px;
		}




/*
Main Images
*/

.block_area_BGImage {
line-height: 0;
    font-size: 0;
margin: 0 auto;
/* min-height:450px;*/
min-height:570px;
width:70%;
margin:0;
	background: transparent url("../images/madula.png") no-repeat center center;
		-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

}

.header .SecurityImage {
display: none;
}

.Security .header .SecurityImage {
display: block;
line-height: 0;
    font-size: 0;
margin: 0 auto;
min-height:450px;
width:70%;
margin:0;
	background: transparent url("../images/madula.png") no-repeat center center;
		-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

}






.block_area_BGImage img {
width:100%;
max-height: 570px;
min-height: 450px;
height:auto;
}
.block_area_BGImage p {
margin: 0 auto;
padding:0;
line-height:0;
}
.block_title {
display:none;
}


/* CONTENT BLOCK */
.typography .block_area-BeforeContent {
}

.typography .contentblock {
margin-bottom: 2.25em;
border:1px solid #444;
padding-left: 1.5em;
padding-right: 1.5em;

float: right;
margin: 0 0 1.5em 1.5em;
clear:both;
width: 28%;
background: #1f1f1f;
}


.typography .block_area_AfterContent .contentblock {
border:none;

clear:left;
float:none;
width: auto;
margin:0 auto;
padding:0;
background:transparent;
}


.soldoutContainer,
.scheduleContainer {
/*float: right;
margin: 0 0 1.5em 1.5em;
padding-left: 1.5em;
clear:none;
width: 28%;
background: #1f1f1f;*/
}





/* BLOG */

div.blogSummary {
position: relative;
display: inline-block;
padding: 1.5em 1.5em;
display: inline-table;
display: inline-block;
width:32.333%;
min-width: 26%;
max-width: 33.333%;
/* min-height: 495px; */
margin: 0.5em .25em;
border: 1px dotted #222;
border: 1px dotted #ccc;
/*
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
*/
border-radius: 7px;
vertical-align: top;
background: #1c1c1c;
background: transparent;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}


.blogSummary div.truncate {  /* Blog Summery */
max-height: 120px;
min-height: 200px;
max-height: 200px;
overflow: hidden;
overflow: scroll;
overflow: auto;
margin-bottom:10px;
}

.blogSummary p.blogVitals {
/* display:none; */
position:absolute;
bottom:0;
font-size:90%;
z-index:0;
margin-bottom: 0.75rem;
}
.authorDate span, .edit-post span, .commenting-rss-feed {
color:#333;
padding: 0 .25em;
}

div.blogSummary *,
.typography div.blogSummary .intro {
vertical-align: top;
font-size: 17px;
line-height: 27px;
}

div.blogSummary h2 * {
font-size: 19px;
}


.Blog .blogSummary h2 {
min-height:55px;
}


/* hiding post date for blog */
.blog-post-meta {
display:none;
}
div.blogSummary .blog-post-meta,
div.blogSummary .blog-post-meta a {
margin-bottom: 0.3rem;
font-size: 0.8rem;
line-height: 1.5;
color:#aaa;
}
.blog-post-meta a {
color:#aaa;
}

div.blogSummary img,
div.blogSummary .post-image {
margin-bottom: .5em;
}
div.blogSummary .postTitle  {
margin-bottom: .1em;

}
body div.blogSummary .postTitle a {
padding: 0.3em 0 0.25em;
font-size: 20px;
line-height: 1.1;
font-size: 22px;
line-height: 1.2;
display: inline-block;
}
body div.blogSummary .readmore {
margin: 0;
}
body div.blogSummary .readmore a {
font-size: 0.9rem;
font-style:italic;
padding: 0.5em 0 0.2rem;
margin: 0 0 0.6rem;
display: inline-block;
border-bottom:1px dashed transparent;
}
body div.blogSummary .readmore a:hover {
border-bottom: 1px dashed #6F0046;
}

div.blogSummary .authorDate {
font-size: 12px;
margin:0;
display:none;
}



.BlogPost #Sidebar {
float: right;
margin-left: 2.5em;
/* border: 1px dotted #222; */
padding:.75em 1em;
margin: 2.5em auto;
}

.BlogPost #Sidebar h3 {
margin: 0;
}
.BlogPost #Sidebar .ArchiveWidget .archiveMonths{
margin: 0;
padding-left:0;
}
.BlogPost #Sidebar .ArchiveWidget li {
list-style-type: none;
}



.BlogPost .authorDate {
font-size: 12px;
margin:0 0 1em 0;
}
.BlogPost .postTitle {
color:#666;
color:#999;
margin:.75em 0 0 0;
}
.BlogPost .aboutAuthor {
margin: 1.25em auto;
}
.BlogPost .aboutAuthor img {
float:left;
margin-right: 1.25em;
margin-bottom: .75em;
}
.BlogPost .aboutAuthor p {
font-size:1em;
line-height: 1.5em;
font-size:1.1em;
line-height: 1.6em;
}

.SubscribeRSSWidget h3 {
display:none;
}

.ArchiveWidget {
float:left;
display: inline-block;
padding: .5em 3em 1em 0em;

display: inline-table;
width:27%;
min-width: 24%;
max-width: 28%;
margin: 0.5em .15em;
border: 1px dotted #1f1f1f;
/* box-shadow: inset 0 0 20px rgba(0,0,0,0.2); */
border-radius: 7px;
vertical-align: top;
}

.BlogPost img.featuredImage {
width:100%;
}
.BlogPost .socialShareLinks {
clear:both;
margin: 2em auto 2.5em;
margin: 4em auto 4.5em;
}

form#Form_CommentsForm {
display: block;
overflow: hidden;
}


img.gravatar {
float: left;
margin: .3em 1.25em 1.25em auto;
}




.floatRight {
float:right;
clear:none;
}



/* SHOP*/
.attribution {
display:none;
}

.checkout .personal-details div .CompositeField {
float:none;
}
.checkout .personal-details div .CompositeField p.alert {
width:42%;
max-width:42%;
float:right;
}
.sws .CompositeField .alert .Actions {
text-shadow: none !important;
margin: 0 .5em;
float:none;
}
.sws label {
color: #555;
}
.sws input, .sws textarea, .sws select, .sws .uneditable-input {
color: #333;
}
.sws .alert {
overflow:hidden;
}
.checkout .personal-details div .CompositeField p.alert {
float:none;
width:95%;
max-width: 95%;
padding: 2px 14px 2px 14px;
margin:0 0 15px 0;
}
.checkout section.payment-details {
display:none;
}

.sws .field.coupon_ input {
background-color: #999;
}
.sws .coupon {
display: none; /* hide coupon for orders */
}
.sws .coupon + hr {
display: none; /* hide coupon for orders */
}

.sws .payment-details {
display: none; /* hide notes for orders */
}

.editCartContainer {
float:right;
clear:none;
font-size: .6em;
}

.sws .notes {
display: none; /* hide notes for orders */
}

/* .sws .mailRegContainer {
float: right;
max-width: 25%;
margin: 0 0 2em 2em;
}
*/









/* DEVICE & RESPONSIVE LAYOUT */
.header .nav-open-button {
    display: none; /* removes the nav toggle button for desktop site */

}
#media-query-trigger {
    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries)
    instead to trigger the hiding/showing of nav and search in mobile mode */
    display: none;
    visibility: hidden;

}










/*
======================
=======================

 BREAKPOINT 960px
 ========================
 ========================
 */

@media only screen and (max-width: 960px) {
	.content img {
	    max-width: 97%;
	    height: auto;
	}

.header .inner, .Security .header .SecurityImage {

    min-height: 400px;

	}


	.header .primary ul {
	    margin-left: -12px;
	    -webkit-padding-start: 0px; /* removes default webkit padding on ul items */
	}

	.header .primary ul {
		    z-index: 10;
		    position: relative;
		    /*display: none;  initially hiding the navigation */
		    float: left;
		    margin: 0;
		    padding: 0;
		    white-space: normal;
		    width: 100%;
		}


	.header .primary {
-webkit-transform: translateY(-49%);
-moz-transform: translateY(-49%);
transform: translateY(-49%);
		}

.header .primary ul .accountButtonContainer {
display:none;
}

.socialFollowContainer strong {
display:none;
}
.socialFollowContainer {
float: left;
margin-top: -2px;
}


.product-category {
float:none;
}

.product-category .product-row {
margin-bottom: 1em;
overflow:hidden;
}
.product-category .product-row .product-brief {
/*
width: 55%;
float:none;
margin-right: auto;
margin-left: auto;
min-height: 160px;
*/
}


.block_area_BGImage {
		line-height: 0;
  font-size: 0;
margin: 0 auto;
min-height:400px;
/*width:100%;*/
margin:0;
background: transparent url("../images/madula.png") no-repeat center center;
-webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
		}
.block_area_BGImage img {
max-height: 400px;
min-height: 400px;
		}

/* BLOG */

div.blogSummary {
padding: 1.5em 1.5em;
width:48%;
min-width: 44%;
max-width: 48%;
min-height: 495px;
margin: 0.5em .25em;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

.ArchiveWidget {
padding: 1.5em 1.5em;
width:44%;
min-width: 44%;
max-width: 48%;

}



.product-category .product-row .product-brief {
}
.product-category .product-row .product-brief:last-child {
}
.product-category .product-row .product-brief .product-brief-title {
font-size:20px;
line-height: 25px;
}




.typography .contentblock {
/*
float: none;
margin: 0 auto 1.5em auto;
padding:5px 0;
clear:both;
width: 100%;
background: #1f1f1f;
border:none;
*/
}

.sws .checkout .personal-details div .CompositeField {
margin: 0;
}

}





/*
====================
====================

 BREAKPOINT 850px
 =====================
 =====================
 */

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


.header .primary {
}

.product-category .product-row .product-brief {
width: 24%;
}

.product-category .product-row .product-brief .product-brief-title {
font-size:18px;
line-height: 20px;

}

.typography .contentblock {
width: 32%;
}

}



/*
====================
====================

 BREAKPOINT 680px
 =====================
 =====================
 */

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

.header .primary {
}

.product-category .product-row {
margin-bottom: 1em;
overflow:hidden;
}
.product-category .product-row .product-brief {
width: 90%;
display: block;
float: none;
margin:0.5em auto 0.5em 0;
min-height: 0;
}
.product-category .product-row .product-brief .product-brief-title {

min-height: 0;
margin:0 auto 1em auto;
}
.product-category .product-row .product-brief .product-brief-price {
position:relative;
min-height: 0;
margin:0 auto .5em auto;
}
.product-category .product-row .product-brief .Actions {
position:relative;
min-height: 0;
margin:0 auto .5em auto;
}

.typography .contentblock {
width: 32%;
}

}






/*
====================
====================

 BREAKPOINT 640px
 =====================
 =====================
 */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 640px) {
	body {
	    max-width: 640px;
	}
	#media-query-trigger {
	    visibility: visible;
	}


.typography .contentblock {
float: none;
margin: 0 auto 1.5em auto;
padding: 0px 0px .1em 0px;
clear:both;
width: 100%;
background: #1f1f1f;
border:none;
}

.product-category .product-row .product-brief {
width: 90%;
display: block;
float: none;
margin:0.5em auto;
min-height: 0;
}
.product-category .product-row .product-brief .product-brief-title {

min-height: 0;
margin:0 auto 1em auto;
}
.product-category .product-row .product-brief .product-brief-price {
position:relative;
min-height: 0;
margin:0 auto .5em auto;
}
.product-category .product-row .product-brief .Actions {
position:relative;
min-height: 0;
margin:0 auto .5em auto;
}


.socialFollowContainer strong {
display:none;
}
.socialFollowContainer {
float: left;
margin-top: -5px;
}

.topLinks .accountButtonContainer {
display:none;
}

	/* Navigation*/

	.tablet-nav .header .brand {
	    /*float: none;
	    display: inline-block;
	    margin-left: 22px;
	    margin-bottom: 22px;*/
	    display:block !important;
width:180px;
height:185px;
background: transparent url("../images/John-Carbone-MD-Logo-sm-block.png") no-repeat center center;
background: rgba(0,0,0,0.35) url("../images/John-Carbone-MD-Logo-sm-block.png") no-repeat center right;
border: 2em solid #1f1f1f;
border-right: 0;
position:absolute;
right:0;
top:0;
z-index:10;
float:none;
margin: 1.25em 0 0 auto;
margin: 2% 0 0 auto;

top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
	}
		.brand h1 {
		    font-size: 40px;
		}
		.brand h1 {
		    padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */
		}


.block_area_BGImage, .Security .header .SecurityImage {
		line-height: 0;
  font-size: 0;
margin: 0 auto;
min-height:300px;
width:100%;
margin:0;
background: transparent url("../images/madula.png") no-repeat center center;
-webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
		}
		.block_area_BGImage img {
max-height: 320px;
min-height: 300px;
		}
		.header .primary ul .accountButtonContainer {
display:inline;
}

	.tablet-nav .header {
	    padding: 0px;
	}
		.tablet-nav .header .inner {
		    padding: 0;
		    min-height: 0;
		}

		.tablet-nav .header .inner .topLinks {
		    padding: 1.4em 1.25em 0em 1.25em;
		    padding: 1.4em 1.25em 0.25em 1.25em;
		}

.topLinks span.cartLinkMini {
margin:-1.5em -1.25em 0 1em;
height:100%;
padding: 1.5em 6.5em .7em 1.1em;
		}

.tablet-nav .header .primary {
	        top:0;
      top: 3.25em;
-webkit-transform: translateY(0%);
         -moz-transform: translateY(0%);
         transform: translateY(0%);
         width:97%;
		 padding:0;
		 margin: 0 auto;
		}

span.navTitle {
display:inline-table;
margin:0;
margin-top: -2.3em;
padding:0;
line-height: 0;
margin: 0;
margin-top: -2.4em;
padding: 0;
padding-right: 0.9rem;
text-align: right;
color:rgba(255,255,255,0.75);
font-size:15px;
float:right;
margin-right:0px;
writing-mode:tb-rl;
writing-mode:vertical-rl;
/*
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
*/
				}

footer span.navTitle {
			display:none;
		}

		.tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */
 z-index: 100;
	    width: 25px;
	    height: 25px;
	    position: absolute;
	    right: 25px;
	    top: 12px;
	    top:0;
        top: -1.4em;
	    display: block;
	    cursor: pointer;
	    font-family: 'WebSymbolsRegular';
	    font-size: 25px;
	    color: #ededed;
		}
		.tablet-nav .header .primary .nav-open-button:hover {
		color: #fff;
		-moz-transition: color 0.2s;
   -webkit-transition: color 0.2s;
   transition: color 0.2s;
		}

		.tablet-nav .header .primary ul {
z-index: 10;
position: relative;
display: none; /* initially hiding the navigation */
float: left;
margin: 0;
padding: 0;
/* padding-top: .85em; */
white-space: normal;
width: 100%;
		}
		.tablet-nav .header .primary ul . {
			    width: 100%;
			    margin: 0;
			    padding: 0;
			    float: none; /* displays list items vertically */
			    background: none;
			    position: relative;
			    text-shadow: 0 1px #fff;
			}
			.tablet-nav .header .primary ul li {
			    width: 100%;
			    margin: 0;
			    padding: 0;
			    float: none; /* displays list items vertically */
			    background: none;
			    position: relative;
			    text-shadow: 0 1px #fff;
			}
			.tablet-nav .header .primary ul li:after { /* creates the arrow for the primary nav links */
			    content: '\003e';
			    display: block;
			    position: absolute;
			    right: 20px;
			    top: 0px;
			    font-family: 'WebSymbolsRegular';
			    font-size: 14px;
			    color: #999;
			    text-align: center;
			    vertical-align: middle;
			    line-height: 38px;
			}
			.tablet-nav .header .primary ul li a,
			.tablet-nav .header .primary ul li.current a,
			.tablet-nav .header .primary ul li.section a { /* styling the  top level nav links */
			    padding: 10px 0 10px 22px;
padding: 10px 11px 10px 11px;
			    font-weight: bold;
			    border-bottom: 1px solid #bbb;
			    color: #434343;
			    background: #e7e7e7;
			}
			.tablet-nav .header .primary ul li.current a,
			.tablet-nav .header .primary ul li.section a {
				background: #CCCCCC; /* makes background on current top level page slightly darker */
			}
			.tablet-nav .header .primary ul li a:hover {
			    color: inherit;
			}
			.tablet-nav .header .primary li.section:after,
			.tablet-nav .header .primary li.current:after {
			    display: none; /* hides the link arrow on current top level page */
			}
			.tablet-nav .tablet-nav .header nav.primary ul li {
				padding: 0;
			}

/* BLOG */
.ArchiveWidget {
display: none;
}


.socialNetworkingHeader {
display:none;
}

.socialNetworkingHolder {
margin: 1em auto;
float:none;
display:block;
clear:both;
text-align:center;
}
.socialNetworkingList {
float:none;
}
.socialNetworkingList.fa-ul {
margin: 0 auto 0 auto;
}
.socialNetworkingList.fa-ul li a {
font-size: 160%;
}



div.blogSummary {
width:99%;
min-width: 90%;
max-width: 99%;
min-height: 0;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
.blogSummary p.blogVitals {
/* display:none; */
position:relative;
bottom:0;
font-size:90%;
z-index:0;
margin: 0;
padding:0.75rem 0;
}


.Blog .blogSummary h2 {
min-height: auto;
}

	/* Search Form */
	.search-bar { /* adds new styling to mobile search bar */
	   width: 100%;
    position: relative;
    position: absolute;
    z-index:1;
    top: 3.4em;
    right: 0;
    display: none; /* hides searchbar initially */
    padding: 25px 0;
    margin: 0;
    background-color: #1f1f1f;
	border-top:1px dotted #333;
	border-bottom:1px dotted #333;
	}
	.search-dropdown-icon { /* styling for search toggle button */
display: block;
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    right:5px;
    top: 5px;
    font-family: 'WebSymbolsRegular';
    font-size: 20px;
    color: #ededed;
    color: rgba(255,255,255,0.3);
    text-align: center;
    line-height: 20px;
	}
	.search-bar form {
	    margin: 0;
	    width: 100%;
	}
		.search-bar form fieldset {
		    padding: 0 18px;
		    left: 0;
		    right: 0;
		    position: relative;
		}
	.search-bar div.field {
	    margin-bottom: 0;
	}
	.search-bar form input.text {
	    width: 89%; /* makes search input full width - allowing for space either side */
	    max-width: 89%;
	    padding: 8px 10% 8px 1%;
	    text-indent: 15px;
	    position: relative;
	    display: block;
	    right: 0;
	    left: 0;
	    border: 1px solid #2b2b2b;
	    background: #999;
	    font-size: 17px;
	    -moz-border-radius: 20px; /* increase border radius due to increased padding */
		border-radius: 20px;

	}
	.search-bar form input.action {
	right: 3%;
top: 0px;
font-size: 23px;
-moz-border-radius: 20px;
border-radius: 20px;
	border-radius: 0 20px 20px 0;

min-height: 38px;
	min-width:37px;

	}

	/* Main Content */
	.main {
	    padding: 20px 0 45px; /* decrease padding so that more content can fit on screen */
	}
	.content-container,
	.sidebar {
	    width: 100%; /* sidenav is now shown above the page content */
	    margin-bottom: 30px;
	}
		.typography h1 { /* decrease size of page heading due to smaller screen */
		    font-size: 30px;
			line-height:35px;
		    margin-bottom: 15px;
		    padding-bottom: 10px;
		}
		.typography p {
		    font-size: 16px;
		    line-height: 27px;
		    font-size: 18px;
		    line-height: 29px;
		}
	p.intro {
	    font-size: 21px;
	    line-height: 29px;
	}
	.main .inner {
	    padding: 0 22px;
	}
	/* Secondry Nav */
	.secondary li a {
	    line-height: 24px;
	}
	.secondary li .arrow {
	    line-height: 26px;
	}
	/* Footer */
	.footer .right {
	    float: left;
	    width: 100%;
	}
}








/*
====================
====================

 BREAKPOINT 494px
 =====================
 =====================
 */

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

.tablet-nav .header .brand {
width:120px;
height:125px;
background: transparent url("../images/John-Carbone-MD-Logo-sm-block.png") no-repeat center center;
background: rgba(0,0,0,0.35) url("../images/John-Carbone-MD-Logo-sm-block.png") no-repeat center right;

-webkit-background-size: 110px 105px;
-moz-background-size: 110px 105px;
-o-background-size: 110px 105px;
background-size: 110px 105px;

background-image: url("../images/John-Carbone-MD-Logo-sm-block.png");
background-image:
    -webkit-image-set(
      url("../images/John-Carbone-MD-Logo-sm-block.png") 1x,
      url("../images/John_Carbone_MD-Logo-md-block-2x.jpg") 2x,
      url("../images/John_Carbone_MD-Logo-lg-block-3x.jpg") 3x
    );
background-image:
    image-set(
      url("../images/John-Carbone-MD-Logo-sm-block.png") 1x,
      url("../images/John_Carbone_MD-Logo-md-block-2x.jpg") 2x,
      url("../images/John_Carbone_MD-Logo-lg-block-3x.jpg") 3x
    );


border: 1.5em solid #1f1f1f;
border-right: 0;
margin: 10% 0 0 auto;

}

.typography img.right {
max-width: 100%; /* Responsive width */
margin: 5px auto 10px auto;
}

.socialNetworkingList.fa-ul li a {
font-size: 115%;
}


.typography blockquote  {
float:none;
margin: 0 0 30px;
text-indent: 20px;
width: 100%;
margin-right: 20px;
}

.typography blockquote p {
font-size: 14px;
line-height: 20px;
}

.product-category .product-row .product-brief {
width: 90%;
display: block;
float: none;
margin:0.5em auto;
min-height: 0;
}
.product-category .product-row .product-brief .product-brief-title {

min-height: 0;
margin:0 auto 1em auto;
}
.product-category .product-row .product-brief .product-brief-price {
position:relative;
min-height: 0;
margin:0 auto .5em auto;
}
.product-category .product-row .product-brief .Actions {
position:relative;
min-height: 0;
margin:0 auto .5em auto;
}

.topLinks span.cartLinkMini {
margin:2.5em -1.25em 0 -1.25em;
padding: 1em 1.1em 1em 1.1em;
text-align: right;
float:none;
display:block;
}

.block_area_BGImage img {
}
.block_area_BGImage, .Security .header .SecurityImage {
max-height: 210px;
min-height: 210px;
}

}










/* ==================
=====================

Print Styles
======================
=======================
*/

/* Based on HTML5 boilerplate print styles */
@media print {
	* {
	    background: transparent !important;
	    color: black !important;
	    box-shadow: none !important;
	    text-shadow: none !important;
	    filter: none !important;
	    -ms-filter: none !important;
	}
	a,
	a:visited {
	    text-decoration: underline
	}
	a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

	thead {
	    display: table-header-group
	}
	tr,
	img {
	    page-break-inside: avoid
	}
	img {
	    max-width: 100% !important
	}
	pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    /* Simple theme custom print styles */
	.header,
	.footer,
    .nav-open-button,
    .search-bar,
    .search-dropdown-icon,
    nav.primary {
	    display: none;
	}
}
