body {
 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
 margin: 0;
 padding: 0;
}

.topcontainer {
    width: 100%;
  margin: 0 auto;
text-align: center;
}

a:hover {
color: #999;
}

.centertext {
    text-align: center;
}

.imagecontainer {
    width: 100%;
  margin: 0 auto;
    text-align: center;

}

.toplinks {
  margin: 0 auto;

    display: inline-block;
}

.tagline {
text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
}

blockquote {
  background: url("images/bg-quote1.png") no-repeat;   

  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 50px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote p {
     padding: 0px 0px 0x 50px;    

    display: inline;
}


/* tabs */
.tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {

text-align: center;
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* end tabs */
.barbbanner {
width: 627px; 
height: 161px;
}

@media screen and (max-width: 600px) {
.leftcol {
width: 95%;
padding: 0 0 0 1rem;
}

.rightcol {
width: 95%;
padding: 0 0 0 1rem;
}


.barbbanner {
width: 95%; 
height: auto;
}
}

.nav-example { position: relative; width: 333px; height: 200px; float: center;   margin: 0 auto;}

.nav-slider { position: absolute; top: 0px; left: 0px; z-index: 1;}
      #myslider { width:310px; height:405px; }
      a.slide-button { position: absolute; padding: 200px 0px 0px 0px; top: 0px; left: 11px; z-index: 12; width: 19px; height: 405px; color: #FFF; background-color: rgba(0,0,0,0.4); text-decoration: none; font-weight: 600; box-sizing: border-box; }
      #next-button { left: auto; right: 0px; }

.tilt {
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
    display: inline-block;
}
 
.tilt:hover {
  -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
       -o-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
          transform: rotate(-5deg);
}

.tilted {
  -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
       -o-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
          transform: rotate(-5deg); 
        display: inline-block;
}

a {
color: black;
}

.btn {
  background: #7E8AA2;
  background-image: -webkit-linear-gradient(top, #7E8AA2, #263248);
  background-image: -moz-linear-gradient(top, #7E8AA2, #263248);
  background-image: -ms-linear-gradient(top, #7E8AA2, #263248);
  background-image: -o-linear-gradient(top, #7E8AA2, #263248);
  background-image: linear-gradient(to bottom, #7E8AA2, #263248);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 24px;
 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;  color: #ffffff;
  font-size: 20px;
  padding: 15px 25px 15px 25px;
  text-decoration: none; 
  margin-left: -25px;
}

.btn:hover {
  background: #FF9800;
  background-image: -webkit-linear-gradient(top, #FF9800, #ad6b0e);
  background-image: -moz-linear-gradient(top, #FF9800, #ad6b0e);
  background-image: -ms-linear-gradient(top, #FF9800, #ad6b0e);
  background-image: -o-linear-gradient(top, #FF9800, #ad6b0e);
  background-image: linear-gradient(to bottom, #FF9800, #ad6b0e);
  text-decoration: none;
}
.ms {
font-family: 'Open Sans', sans-serif;
    font-size: 14px;
float: left;
width: 61%;
padding-left: 50px;
padding-top: 35px;
}

.leftcol {
font-family: 'Open Sans', sans-serif;
    font-size: 14px;
float: left;
width: 61%;
padding-left: 50px;
padding-top: -10px;
}

.galcol {
font-family: 'Open Sans', sans-serif;
    font-size: 14px;
float: left;
width: 100%;
padding-left: 0px;
padding-top: -10px;
}

.rightcol {
    text-align: center;
    padding-left: 0px;
    padding-top: 25px;
    float: right;
    width:33%;
}


#gallery {
	width:75%;
	margin: auto;
    padding: 0 0 0 55px;
    padding-left: px;
	}

#gallery a {
	text-decoration:none;
	}

#gallery .item {
	width: 131px; height: 200px; overflow: hidden;
	float: left;
	border: 5px solid #333;
	margin: 5px;
	}

#gallery .item1 {
	width: 175px; height: 200px; overflow: hidden;
	float: left;
	border: 5px solid #333;
	margin: 5px;
	}
#gallery .item a { 
    overflow: hidden;
	}

#gallery .item a img {
	height: 100%; 
	align-self: center;
	}

.lightbox {
	/** Hide the lightbox */
	display: none;
	
	/** Apply basic lightbox styling */
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color:#333333;
	}

.lightbox:target {
    /** Show lightbox when it is target */
    display: block;
    outline: none;
}

.lightbox .box {
  	width: -webkit-min-content;
  	width: -moz-min-content;
  	width: min-content;
	min-width:500px;
 	margin: 2% auto;
	padding:10px 20px 10px 20px;
	background-color:#FFF;
	box-shadow: 0px 1px 26px -3px #777777; 
	}

.lightbox .title {
	margin:0;
	padding:0 0 10px 0px;
	border-bottom:1px #ccc solid;
	font-size:22px;
	}

.lightbox .content {
	display:block;
	position:relative;
      margin: 0 auto;
    text-align: center;
	}


.lightbox .content .desc {
	z-index:99;
	bottom:0;
	position:absolute;
	padding:10px;
	margin:0 0 4px 0;
	background:rgba(0,0,0,0.8);

	color:#fff;
	font-size:17px;
	opacity:0;
	transition: opacity ease-in-out 0.5s;
	}	
	
.lightbox .content:hover .desc	{
	opacity:1;
}

.lightbox .next,
.lightbox .prev,
.lightbox .close {
	display:block;
	text-decoration:none;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:22px;
	color:#858585;
	}

.prev {
	float:left;
	}

.next, .close {
	float:right;
	}
	
	.clear {
		display:block;
		clear:both;
		}