#logo {
	/* tweak the logo for better alignment in the top-bar */
	position: relative;
	top: -3px; 
}

#bodycopy ul.in,
#bodycopy ol.in,
#sidebar ul,
#sidebar ol {
	/* Foundation doesn't indent lists at all, so we fix that here... */
	margin-left: 1.25em; 
}


.breadcrumbs {
	/* change default appearance of Foundation breadcrumbs */
	padding: 0;
	background: none; 
	border: none; 
}
	#bodycopy .breadcrumbs {
		/* make the breadcrumbs appear in the spot between masthead and bodycopy */
		margin: 0 0 -1em 0;
		position: relative;
		top: -1.75em; 
		left: -6px; 
	}
	#bodycopy .breadcrumbs li {
		background: #fff; 
	}
	#bodycopy .breadcrumbs li:first-child {
		padding-left: 8px; 
	}
	#bodycopy .breadcrumbs li:last-child {
		padding-right: 8px; 
	}

#bodycopy ul.side-nav,
#sidebar ul.side-nav {
	/* we don't want navigation lists indented */
	margin-left: 0;
}
	#bodycopy .side-nav li {
		/* when side-nav in bodycopy, make it a little more prominent than Foundation default */
		font-size: 1em; 
	}
		#bodycopy .side-nav a {
			font-weight: bold; 
		}
		#bodycopy .side-nav ul ul a {
			font-weight: normal;
		}

ul.side-nav ul {
	/* nested sub-navigation (tree=true) */
	margin-top: 0.5em; 
	margin-left: 2em;
}


#search-form {
	/* this better aligns the search form with the headline */
	margin: 0.75em 0 0 0; 
}

#masthead h1 {
	/* no need for margin here since h1 is the only thing in masthead */
	margin: 0;
}

#sidebar h3 + ul.side-nav {
	/* get the nav headline closer to the nav */
	margin-top: -1em;
}



body.template-sitemap .breadcrumbs {
	/* breadcrumbs are redundant on a sitemap page */
	display: none; 
}


/*
 * TinyMCE alignment styles, for images placed in bodycopy
 *
 */
.align_left,
.align_right {
	display: block;
	margin: 1em 0;
}

.align-center {
	display: block;
	margin: 1em auto;
}

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

	/* 
 	 * Alignment classes active only when screen is big enough to make them practical.
 	 * In our case we've set 500px as our cutoff under which images no longer align,
 	 * but you may need to tweak that specific to your case.
 	 *
 	 */

	.align_left {
		float: left;
		margin: 0 1em 0.5em 0; 
		position: relative;
		top: 5px; 
	}

	.align_right {
		float: right;
		margin: 0 0 1em 1em; 
		position: relative;
		top: 5px; 
	}
}

.image_caption small {
	display: block;
	color: #666; 	
}


#logo {
	/* tweak the logo for better alignment in the top-bar */
	position: relative;
	top: -3px; 
}

#bodycopy ul.in,
#bodycopy ol.in,
#sidebar ul,
#sidebar ol {
	/* Foundation doesn't indent lists at all, so we fix that here... */
	margin-left: 1.25em; 
}


.breadcrumbs {
	/* change default appearance of Foundation breadcrumbs */
	padding: 0;
	background: none; 
	border: none; 
}
	#bodycopy .breadcrumbs {
		/* make the breadcrumbs appear in the spot between masthead and bodycopy */
		//margin: 0 0 -1em 0;
		//position: relative;
		//top: -1.75em; 
		//left: -6px;
		margin:0.5em 0 1em 0
	}
	#bodycopy .breadcrumbs li {
		background: #333; 
	}
	#bodycopy .breadcrumbs li:first-child {
		padding-left: 8px; 
	}
	#bodycopy .breadcrumbs li:last-child {
		padding-right: 8px; 
	}

#bodycopy ul.side-nav,
#sidebar ul.side-nav {
	/* we don't want navigation lists indented */
	margin-left: 0;
}
	#bodycopy .side-nav li {
		/* when side-nav in bodycopy, make it a little more prominent than Foundation default */
		font-size: 1em; 
	}
		#bodycopy .side-nav a {
			font-weight: bold; 
		}
		#bodycopy .side-nav ul ul a {
			font-weight: normal;
		}

ul.side-nav ul {
	/* nested sub-navigation (tree=true) */
	margin-top: 0.5em; 
	margin-left: 2em;
}


#search-form {
	/* this better aligns the search form with the headline */
	margin: 0.75em 0 0 0; 
}

#masthead h1 {
	/* no need for margin here since h1 is the only thing in masthead */
	margin: 0;
}

#sidebar h3 + ul.side-nav {
	/* get the nav headline closer to the nav */
	margin-top: -1em;
}



body.template-sitemap .breadcrumbs {
	/* breadcrumbs are redundant on a sitemap page */
	display: none; 
}


/*
 * TinyMCE alignment styles, for images placed in bodycopy
 *
 */
.align_left,
.align_right {
	display: block;
	margin: 1em 0;
}

.align-center {
	display: block;
	margin: 1em auto;
}

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

	/* 
 	 * Alignment classes active only when screen is big enough to make them practical.
 	 * In our case we've set 500px as our cutoff under which images no longer align,
 	 * but you may need to tweak that specific to your case.
 	 *
 	 */

	.align_left {
		float: left;
		margin: 0 1em 0.5em 0; 
		position: relative;
		top: 5px; 
	}

	.align_right {
		float: right;
		margin: 0 0 1em 1em; 
		position: relative;
		top: 5px; 
	}
}

.image_caption small {
	display: block;
	color: #666; 	
}


/****************************************************************************
=============================================================================
=============================================================================
CARBURO DESIGN 2015
=============================================================================
=============================================================================

*/
/*SAUL*/

/*colors*/
/*
grey  #A3A3A3
 */


/* general */


body {
background: #333;
font-family: 'Pontano Sans', sans-serif;
}

a {
color: white;
}

a:hover, a:focus, .side-nav li a:hover {
color: #555;
}



/*home*/
@media only screen and (max-height: 650px){
	body.template-home img {
		height:70%;
		width:70%}
	
}


.top-bar .name h1 a {
font-weight: bold;
color: white;
	text-transform:uppercase;
	font-weight:normal;
font-family: 'Pontano Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6, ul.wineAreaList {

  font-weight:normal;
}

hr {
border: solid 1px #444;
margin-left: 2.5em;
margin-right: 2.5em;
}


/*bread*/


.breadcrumbs > * a, .breadcrumbs > * span {
text-transform: uppercase;
color: #999;
}
.breadcrumbs > * a:hover, .breadcrumbs > * span:hover, .breadcrumbs > *{
  text-decoration: none;
  color: #555;
  
}

.breadcrumbs > *.unavailable a, .breadcrumbs > *.unavailable:hover, .breadcrumbs > *.unavailable:hover a, .breadcrumbs > *.unavailable:focus, .breadcrumbs > *.unavailable a:focus {
  color: #555;
}
  

.breadcrumbs > *:before {
content: "/";
color: #555;
}



/* top nav */
img#logo {
  width: 300px;

}
.contain-to-grid, .top-bar{
  background-color: #333;

}
.contain-to-grid{
	box-shadow: 0px 2px 0px 	#333 ;
}


.top-bar-section ul li > a{
  font-size:0.85em;
}

.top-bar-section ul li.active > a {
background: #8f8f8f;
color:#555;

}


@media only screen and (min-width: 58.75em){
  .top-bar-section li a:not(.button) {
  background-color:#333;
  }

  .top-bar-section li a:not(.button):hover {
  background: #8f8f8f;
}
}

/*grid*/

.row.morespace{
	margin-bottom:2.75em
}

.artwordGridTitle{
	margin-top:0.5em
}

.bottleGrid{
	padding-bottom:1.5em;
}

/*footer*/


.breadcrumbs > *.unavailable {
color: #666;
}

body.template-artwork h3{
	border-top:1px solid #999;
	
	margin:-5px 0 1em 0;
	padding:0;
	color:#555
	
}

body.template-artwork p.introp{
	color:#555;
	margin:-0.75em 0 2em 0;
}


.columns.artworkGridContainer.clear{
	float:left
}	

.columns.artworkGridContainer.clear:after{
	clear:both;
}	




/*contact*/

.InputfieldHidden, .InputfieldHeaderHidden, .Inputfield_scf-website{
  display:none
}






/*clearing image gallery*/

.carousel ul.clearing-thumbs {
	margin-top:4em
}