@charset "utf-8";

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	background-color: #FFF;
	background-image: url();
	background-repeat: repeat-y;
	font-style: normal;
	font-weight: 300;
//	width: 1366px;
    padding-top: 51px;
}
.announcement_dialog {
	color: #333;
	background-color: #F5F5F5;
}

    * /* "Universal rule". Set's border, padding and margin to 0 for all CSS values*/
    {
    padding: 0;
    margin: 0;
    border: 0;
    }
    .Menu {
    font-family: Arial, sans-serif;
    border-bottom: 0px solid #ccc; /* EDITED from 1px */
    font-size: 14px;
	font-weight:bold;
    text-align: center; /* We are using text-align: left on ul to left align our menu to the page. If you want the menu aligned centered or right just change text-align to either center or right */
    margin: 5px 0 5px 10px;
    padding: 0 0 3px 0;
    }
    .Menu li {
    margin: 0 2px 0 0;
    border-bottom: none;
    display: inline; /* Menu links are horizontally aligned using display: inline */
    }
    .Menu li a {
    margin: 0 -2px 0 0;
    padding: 3px 12px 3px 12px; /* Display: block won't work in this example, instead we are using padding */
    color: #666;
    text-decoration: none;
    border: 1px solid #ccc;
    background: #f5f5f5;
    }
    .Menu li a:hover {
    background: #ededed;
    color: #000;
    }
    .Menu li#active {
    margin: 0 3px 0 0;
    padding: 3px 6px 3px 8px; /* Display: block won't work in this example, instead we are using padding */
    background: white;
    border: 1px solid #ccc;
    border-bottom: 1px solid white;
    }
    .Menu li a:hover {
    background: #ededed;
    color: #000;
    }
    .Menu .subMenu {
    float: left;
    text-align: center; /* If both menus are going to be left-aligned we really don't need to use text-align: left on the sub menu, since this menu will inherit the alignment from .Menu */
    width: 100%;
    margin: 6px 0 5px 0;
    padding: 3px 0 3px 0;
    border-bottom: 2px solid #F89226;
    }
    * html .Menu .subMenu {
    margin: 2px 0 5px 0; /* IE hack */
    }
    .Menu .subMenu li {
    padding: 3px 0 3px 0;
    border: 0;
    }
    .Menu .subMenu li a {
    border: 0;
    background-color: #fc9;
    }
    .Menu .subMenu li a:hover {
    background: #d4de7c;
    }
    .Menu .subMenu li#subActive {
    padding: 3px 6px 3px 8px;
    font-weight: bold;
    }

navbar {
	background-color: #FF0000;
	color: #FF0000;
}
.navbar-default {
	background-color: #fff;
    border-color: #ED1C24;
    border-color: #e7e7e7;
}
.navbar-brand {
	padding-top: 0px;
	padding-bottom: 0px;
}
.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: #e7e7e7;
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}
.carousel-indicators li {
  display: inline-block;
/*10*/  width: 5px;
/*10*/  height: 5px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
/*fff*/  border: 1px solid #999;
  border-radius: 10px;
}
.carousel-indicators .active {
/*12*/  width: 6px;
/*12*/  height: 6px;
  margin: 0;
/*fff*/  background-color: #999;
}

/*.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  filter: alpha(opacity=50);
  opacity: .5;
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
  background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  background-repeat: repeat-x;
}
.carousel-control.right {
  right: 0;
  left: auto;
  background-color: #fff;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
  background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  background-repeat: repeat-x;
}*/
.carousel-control.left, .carousel-control.right {
	background-image: none;
/*	background-color: #555; */
}
.carousel-control {
    color: #999;
}
.carousel-control:hover, .carousel-control:focus {
    color: #333;
}

.row-footer {
	margin: 0px auto;
	padding: 20px 0px;
	background-color: #e7e7e7;
	font-size: small;
}

.container-fluid .jumbotron {
    border-radius: 0px;
}

.jumbotron {
    padding: 1px;
    margin-bottom: 1em;
}

.winemakers {
	class: col-lg-3;
}

..grid-item { width: 400px; }

.grid-item {
    float: left;
    width: 320px;
    height: 340px;
    border: 0px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--height2 { height: 420px; }

.wrapper{
    display: grid;
    grid-template-columns: 1fr;
    /* grid-auto-rows: 70 px; */
    /* grid-auto-rows: minmax(100px' auto); */
    /* grid-column-gap: 1em; */
    grid-column-gap: 2em;
}

/* .wrapper > div{
    background: #eee;
    padding: 1em;
}

.wrapper > div:nth-child(odd){
    background: #ddd;
} */

/* LARGE SCREENS */
@media(min-width:500px){
    .wrapper{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width:1000px){
    .wrapper{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(min-width:1400px){
    .wrapper{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}
