/* --------------------------------------------------------------------------------------  RESET------------------------------------------------------------------------------------ *//* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126   License: none (public domain)*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, pre,a, 
abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, 
strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, 
legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, 
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, 
summary,time, mark, audio, 
video{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}body{line-height: 1;}table{border-collapse: collapse;border-spacing: 0;}iframe, img, object{float:left;}::selection{background:#ddd;}::-moz-selection{background:#ddd;}
/* --------------------------------------------------------------------------------------  GENERAL + ANCHORS------------------------------------------------------------------------------------ */
html{width:100%;height:100%;}
body{
    width:100%;
    height:100%;
    margin: 0;
    padding: 0;
    font-size:100%;
    color: #bbbbad;
    font-family:'Muli', Helvetica, Arial, FreeSans, sans-serif;
    background:#000;
    -webkit-font-smoothing: antialiased;
    }
body#balls{/*for home page only*/}
body#all{;/*for inner pages*/}
#canvas{visibility:hidden;}
a{text-decoration:none;outline:none;color:#911111;}
a:hover{color:#710909;}
img, object, iframe, figure{float:left;}
/* --------------------------------------------------------------------------------------  TYPOGRAPHY------------------------------------------------------------------------------------ */
p{line-height:1.5em;font-size:1.1em;margin-bottom:20px;}
p.last{margin-bottom:0;}
h1, h2, h3{text-transform:capitalize;}
h2{font-size:1.5em;font-weight:600;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);}
h2, h3{line-height:1.4em;}
h3 {font-size:1.3em}
/* --------------------------------------------------------------------------------------  GENERAL DIVS FOR ALL PAGES------------------------------------------------------------------------------------ */ 
.tweet_list {
    list-style:none;
}

ul.tweet_list {
    margin-left:1px;
}

.tweet_list li {
    padding-top:10px;
    padding-bottom:10px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color:#fff;
}


#wrapper{
	width:100%;
	max-width:100%;
	height:100%;
}

#blackline{
	float:left;
	width:100%;
	height:60px;
	background:#000;
	background-repeat: repeat;
    border-bottom:1px solid rgba(221,221,221,0.2);
	box-shadow:0 1px 10px rgba(0,0,0,0.8);
	position:absolute;top:0;left:0;z-index:20;
}
#top{clear:both;position:relative;padding:20px 0;}
#top h1{float:left;margin:0 0 0 60px;}
#top a{color:#911111;text-transform:uppercase;font-weight:700;font-family:'Oswald', sans-serif;font-size:1.2em;}
.glow{-webkit-animation: glow 5s infinite;-moz-animation: glow 5s infinite;-o-animation: glow 5s infinite;-ms-animation: glow 5s infinite;}
@-webkit-keyframes glow{0%{opacity: 1;}30%{opacity: 0.6;}60%{opacity: 0.5;}80%{opacity: 1;}}@-moz-keyframes glow{0%{opacity: 1;}30%{opacity: 0.6;}60%{opacity: 0.5;}80%{opacity: 1;}}@-ms-keyframes glow{0%{opacity: 1;}30%{opacity: 0.6;}60%{opacity: 0.5;}80%{opacity: 1;}}#top aside{float:right;margin:0 60px 0 0;}
/*social icons links with submenu. if you want to add submenu to main navigation (start, about, contact etc) give class [main-menu] to navigation ul as well but be sure to rewrite/adjust styles because styles of ul.main-menu and styles of main site navigation are different*/
ul.main-menu{float:left;list-style:none;position:relative;}
ul.main-menu li{float:left;margin-left:10px;}
ul.child-menu{list-style:none;position: absolute;display: none;background:rgba(0,0,0,0.8);top:-30px;right:0;width:340px;z-index:500;margin:50px 0 0 0;}
ul.child-menu li{float:left;margin:0;}
.submenu-inner{float:left;margin:10px;padding:10px;background:#000;}
/* --------------------------------------------------------------------------------------  TWITTER STYLES------------------------------------------------------------------------------------ */ 
#tweet{float:left;display:block;font-size:0.85em;line-height:1.5em;width:100%;}
#tweet .tweet_list li{overflow-y: auto;overflow-x: hidden;border-bottom:1px solid #171717;margin-bottom:20px;padding-bottom:10px;width:100%;float:left;}
#tweet a{color:#911111;text-decoration:none;font-weight:600;}
#tweet a:hover{color:#f0f0f0;}
.tweet_list a.tweet_avatar{padding-right: 10px;float: left;}
/* --------------------------------------------------------------------------------------  GENERAL STYLES FOR NAVIGATION------------------------------------------------------------------------------------ */ 
#triangle-left-wrap{float:left;width:10px;}#triangle-left{width: 0;height: 0;border-bottom: 10px solid #710909;/*dark red*/border-left: 10px solid transparent;}
#triangle-right-wrap{float:right;width:10px;clear:right!important;}
#triangle-right{width: 0;height: 0;border-bottom: 10px solid #710909;/*dark red*/border-right: 10px solid transparent;}
nav ul{
    float:left;
    list-style:none;
    box-shadow:0 2px 10px #000;
    background:#911111;
    background: -moz-linear-gradient(19% 75% 90deg, #710909, #911111);
    background: -webkit-gradient(linear, left top, left bottom, from(#911111), to(#710909));
    /*dark red + darker red gradient*/    
    background-image: -o-linear-gradient(top,rgb(145,17,17),rgb(113,9,9));
    border:1px solid rgba(255,255,255,0.2);
    }
nav ul li{float:left;padding:1em;}
nav a{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    font-size:1.3em;
    -webkit-transition: background-color 500ms ease-in;
    /* Saf3.2+, Chrome */    
    -moz-transition: background-color 500ms ease-in;
    /* FF3.7+ */    
    -o-transition: background-color 500ms ease-in;
    /* Opera 10.5+ */    
    transition: background-color 500ms ease-in;
    /* futureproofing */    
    color: #bbbbad;}
    nav a:hover{
        color: #bbbbad;
        }
    nav a.active{color: #dedede;}
    li#twitter0{display:none;}
    /*this li is for IE8 only, it is hidden for normal browsers*/
    /* --------------------------------------------------------------------------------------  INDEX PAGE STYLES START HERE------------------------------------------------------------------------------------ */
    /* --------------------------------------------------------------------------------------  GENERAL DIVS + LOGO + NAVIGATION FOR HOME (INDEX) PAGE------------------------------------------------------------------------------------ */    
.dropdown-menu a {
    color: #bbbbad;
    -webkit-transition: background-color 500ms ease-in;
    /* Saf3.2+, Chrome */    
    -moz-transition: background-color 500ms ease-in;
    /* FF3.7+ */    
    -o-transition: background-color 500ms ease-in;
    /* Opera 10.5+ */    
    transition: background-color 500ms ease-in;
    /* futureproofing */    
    color: #bbbbad;
  	width: 250px;
}

.dropdown-menu a:hover {
    color: #bbbbad;
    text-decoration:none;
}

.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {
      color: #bbbbad;
    text-decoration:none;
  	background-color: #710909;
}
.nav > li > a:hover {
    	background-color: #710909;
  	      color: #bbbbad;
}
#inner  {
    width:100%;
    height:444px;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:120px;
    left:0;
    z-index:1;
}
#nav-wrap-home{
    width:100%;
    position:absolute;
    top:110px;
    left:0;z-index:2;}
nav#home{
    margin-left:50px;
    float:left;
    }
/* --------------------------------------------------------------------------------------  HORIZONTAL SCROLL STYLES------------------------------------------------------------------------------------ */#mcs_container{width:100%;height:480px;float:left;margin:0 0 20px 0;}#mcs_container .customScrollBox{position:relative;width:100%;overflow:hidden;margin:70px 0;}#mcs_container .customScrollBox .horWrapper{float:left;position:relative;}#mcs_container .customScrollBox .container{position:relative;display:inline-block;}#mcs_container .customScrollBox .content{clear:both;}#mcs_container .dragger_container{position:relative;margin:20px 0 0 60px;height:10px;width:60%;border-top:2px solid #171717;}#mcs_container .dragger{position:absolute;width:60px;height:10px;text-align:center;background:#911111;margin-top:-6px;cursor:pointer;}#mcs_container .dragger_pressed{position:absolute;width:60px;height:10px;background:#710909;margin-top:-6px;}#mcs_container .dragger:hover{background:#831414;}/*----------header is first block with big logo and welcome text----------*/
#slide-block-first{float:left;width:690px;}

#event-calendar table {background-color:#efefef}
#event-calendar table tr th {
    font-size:16px;
}
#event-calendar table tr td {
    font-size:14px;
    height:110px;}
#event-calendar table tr td {
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
}
#event-calendar table tr td:last-child {
    border-left: solid 1px #fff;
    border-right:none;
    }
#event-calendar table tr td:first-child {
    border-right: solid 1px #fff;
    border-left:none;
}


#content {
	background:rgba(0,0,0,0.9);
	background-repeat:no-repeat;
	border:30px solid rgba(0,0,0,0.9);
}
header{
	padding-top:60px;
	height:100%;
}

.content-inner {
	padding-right:30px;
	padding-left:30px;
}
	/*----------logo (H1 tag). you cannot apply same effect of dancing letters to image----------*/
	header h1{
		color:#911111;
		display:inline-block;
		margin-bottom:60px;}

.fancy_title{
	font-size:5em;
	color:#911111;
	display:inline-block;
	font-family:'Oswald', sans-serif;
	font-weight:700;
	letter-spacing:normal;
	padding-top:50px;
	padding-bottom:20px;
	}
    
    .normal_title {
    font-size:5em;
	color:#911111;
	display:inline-block;
	font-family:'Oswald', sans-serif;
	font-weight:700;
	letter-spacing:normal;
	padding-top:50px;
	padding-bottom:20px;
}

.fancy_title  span{
	display: inline-block;
	position: relative;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-khtml-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	}

.fancy_title  span:hover{
	top:10px;
}
.fancy_title .char1, .fancy_title .char2,.fancy_title .char3,.fancy_title .char4,.fancy_title .char5,.fancy_title .char6,.fancy_title .char7,.fancy_title .char8,.fancy_title .char9{}/*----------if you want to position every character differently you will need to set style for every character. you can give various margins, rotations etc. more informationsee in Lettering.js website: http://letteringjs.com/----------*//*----------content inside the scroller consists of blocks with class [slide-block]. you can add as many such blocks as you wish. inside such block you can insert text, images, video, slider, any html content. important: either height of content placed into block should not exceed 300px or recalculate the height of main wrappers (id inner and id mcs_container) and adjust height of .slide-block----------*/
.slide-block{float:left;margin-right:10px;padding:30px;width:150px;height:100%;background:rgba(0,0,0,0.9);border:1px solid #171717;}.thelast{margin-right:0;}.slide-block p{font-size:1em;}.slide-block h1{font-size:1.6em;margin-bottom:20px;font-weight:600;}/*----------class is entitled [circle] but in fact it is a button with very rounded corners. herebeneath are styles of this red button with corners----------*/.circle{float:right;margin:0 -36px 0 0;width:100px;height:30px;border-top-left-radius:14px;border-bottom-left-radius:14px;background:#911111;background: -moz-linear-gradient(19% 75% 90deg, #710909, #911111);background: -webkit-gradient(linear, left top, left bottom, from(#911111), to(#710909));/*dark red*/    background-image: -o-linear-gradient(top,rgb(145,17,17),rgb(113,9,9));border-top:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(255,255,255,0.1);text-align:center;}.circle a{line-height:30px;color: #bbbbad;text-transform:uppercase;font-family:'Oswald', sans-serif;font-size:0.85em;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-khtml-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.circle a:hover{color:#f0f0f0;padding:0 0 0 20px;}.triangle-wrap{float:left;width:315px;margin:0 -35px 0 0;}.triangle-top{float:right;width: 0;height: 0;border-bottom: 5px solid #710909;/*dark red*/border-right: 5px solid transparent;}.triangle-bottom{float:right;width: 0;height: 0;border-top: 5px solid #710909;/*dark red*/border-right: 5px solid transparent;}/* --------------------------------------------------------------------------------------  INNER PAGES STYLES START NOW------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------  GENERAL DIVS + FOOTER + NAVIGATION FOR INNER PAGES------------------------------------------------------------------------------------ */  #greenline{width:100%;height:180px;background:url(images/pat3.jpg);background-repeat:repeat;border-bottom:1px solid rgba(221,221,221,0.2);box-shadow:0 1px 10px rgba(0,0,0,0.8);z-index:12;position:absolute;top:0;left:0;}
#inner-inner{
	float:left;
	width:100%;
	position: relative;
	z-index:13;
	margin-top:532px;
	background:url(images/pat3.jpg);
	background-repeat:repeat;
	border-top:1px solid rgba(221,221,221,0.3);
	box-shadow:0 1px 20px rgba(0,0,0,0.9);}
#main-content{margin:-410px auto 0 auto;width:1150px;position:relative;}/*----------NAVIGATION INNER PAGES----------*/
#nav-wrap{width:100%;position:absolute;top:0;left:0;z-index:40;}nav#inner-page{margin:-10px 0 0 50px;width:622px;}
/*----------FOOTER----------*/
#footer-wrap{background:rgba(0,0,0,0.6);}
footer{margin:30px;padding:20px;background:rgba(0,0,0,0.9);border:1px solid #171717;position:relative;}footer small{float:left;font-size:0.8em;font-weight:600;}footer ul#small-nav{float:right;list-style:none;}footer ul#small-nav li{float:left;margin-left:20px;}footer ul#small-nav a{color:#bbbbad;font-family:'Oswald', sans-serif;text-transform:uppercase;font-size:0.8em;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-khtml-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}footer ul#small-nav a:hover{color:#f0f0f0;}/* -------------------------------------------------------------------------------------- BEERS PAGE STARTS HERE------------------------------------------------------------------------------------ */ .beer-box{float:left;width:1150px;background:rgba(0,0,0,0.9);position:relative;}.beer-box ul{float:left;width:100%;list-style:none;margin:100px 0 0 0;}.beer-box li{float:left;width:230px;}/*----------SMALL COLOURED BLOCKS INSIDE MAIN BOX (CLASS [BEER-BOX])----------*/.info-small{float:left;width:170px;height:250px;padding:30px;}.red{background:#911111;}.grey{background:#555;}.white{color:#313131;;background:#bbbbad;background-position:20px 260px;}.dark{background:#000;}.info-small p{font-size:0.9em;}.info-small h1{font-size:1.6em;margin-bottom:20px;font-weight:600;}
/*----------RED BUTTON STYLES (WILL REPEAT ON ALL PAGES)----------*/
.red-button{float:right;margin:0 -30px 0 0;width:140px;height:30px;border-top-left-radius:14px;border-bottom-left-radius:14px;background:#911111;background: -moz-linear-gradient(19% 75% 90deg, #710909, #911111);background: -webkit-gradient(linear, left top, left bottom, from(#911111), to(#710909));/*dark red*/    background-image: -o-linear-gradient(top,rgb(145,17,17),rgb(113,9,9));border-top:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(255,255,255,0.1);text-align:center;}
.red-button a{line-height:30px;color: #bbbbad;text-transform:uppercase;font-family:'Oswald', sans-serif;font-size:0.85em;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-khtml-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;cursor:pointer;}.red-button a:hover{color:#f0f0f0;padding:0 0 0 20px;}
/*----------Here should go small-slider styles, but they are placed into separate stylesheets. Once you want to adjust slider styles open small-slider.css file. the reason to place styles into separate stylesheets was that two sliders have slightly diffrent styles and next/prev buttons positions. so, in order not to mix both and not to make too much chaos they were separated and placed in diffrent css files. moreover, if you do not need one of them, you can just trash the related file and delete markup from the page within a second, instead of cleaning up the mixed code of both.----------*//*----------HORIZONTAL SCROLLER STARTS HERE (WILL REPEAT ON MENU PAGE)----------*/#scroller{float:left;padding:30px;margin-top:30px;width:1090px;}#scroller figure{width:140px;padding:20px;background:rgba(0,0,0,0.9);border:1px solid #2d2d2d;margin-right:10px;}/*-------HORIZONTAL SCROLL STYLES-------*//*-------note: it is same scroller like on the home page but it has slightly different styles. * it would be possible to combine (by comma) idetical styles of both, but on purpose they were divided.  * if you will not need the scroller on this page you can quietly delete all styles below and above (referring  * to scroller), without fearing to affect and spoil similar scroller on the home page ------*/
#mcs_container2{width:1090px;height:140px;float:left;margin:30px 0 0 0;}#mcs_container2 .customScrollBox{position:relative;width:1090px;overflow:hidden;margin:0;}#mcs_container2 .customScrollBox .horWrapper{float:left;position:relative;}#mcs_container2 .customScrollBox 
.container{height:100%;position:relative;display:inline-block;}
#mcs_container2 .customScrollBox .content{clear:both;}
#mcs_container .customScrollBox .content figure{margin-right:10px;}
#mcs_container2 .customScrollBox .content figure.last{margin-right:0;}
#mcs_container2 .dragger_container{position:relative;margin:20px 0 0 0;height:10px;width:1090px;border-top:2px solid #171717;}
#mcs_container2 .dragger{position:absolute;width:60px;height:10px;text-align:center;background:#911111;margin-top:-6px;cursor:pointer;}
#mcs_container2 .dragger_pressed{position:absolute;width:60px;height:10px;background:#710909;margin-top:-6px;}#mcs_container2 .dragger:hover{background:#831414;}/* -------------------------------------------------------------------------------------- MENU PAGE STARTS HERE------------------------------------------------------------------------------------ */ /*----------note: vertical-slider styles you will find in separate verical-slider.css file. view more  explanations above about why sliders styles were placed into different files----------*/
.food-box{float:left;width:1150px;background:rgba(0,0,0,0.9);position:relative;}
.slider img{position:relative;}
.title{position:absolute;bottom:0;right:0;background:#911111;background: -moz-linear-gradient(19% 75% 90deg, #710909, #911111);background: -webkit-gradient(linear, left top, left bottom, from(#911111), to(#710909));/*dark red*/    background-image: -o-linear-gradient(top,rgb(145,17,17),rgb(113,9,9));border:1px solid rgba(255,255,255,0.1);padding:14px 34px;text-transform:uppercase;font-weight:600;font-size:1.4em;/*----------class [title] syles will repeat on events and about pages----------*/}/*----------MOVING IMAGE + TEXT-----------*/
.types{float:left;padding:0 30px;border-top:1px solid rgba(214,214,211,0.9);/*#d6d6d3;*/width:1090px;margin-top:30px;background:#bbbbad;clear:both;}
.types article{float:right;margin-left:30px;width:818px;color:#313131;}
.types h3{margin-bottom:20px;font-size:1.6em;padding-bottom:20px;border-bottom:1px solid rgba(214,214,211,0.4);/*#d6d6d3;*/color:#464646;}
.types section{float:left;margin:30px 0;}/*----------note: styles for figure class [move] will repeat on events page----------*/
figure.move{width:220px;height:220px;padding:10px;border:1px solid #d6d6d3;background:#c6c6bf;}
figure.move a{width:220px;height:220px;display:inline-block;cursor:default;}
figure.move a:hover{-webkit-animation: moveImg 9s linear infinite forwards;-moz-animation: moveImg 9s linear infinite forwards;-o-animation: moveImg 9s linear infinite forwards;-khtml-animation: moveImg 9s linear infinite forwards;-ms-animation: moveImg 9s linear infinite forwards;animation: moveImg 9s linear infinite forwards;z-index: 10;-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);-khtml-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.2), 0px 0px 2px rgba(0,0,0,0.2) inset;}@-webkit-keyframes moveImg{0%{background-position: 50% 0%;}50%{background-position: 50% 100%;}100%{background-position: 50% 0%;}}@-moz-keyframes moveImg{0%{background-position: 50% 0%;}50%{background-position: 50% 100%;}100%{background-position: 50% 0%;}}@keyframes moveImg{0%{background-position: 50% 0%;}50%{background-position: 50% 100%;}100%{background-position: 50% 0%;}}
#image1 a{background:url(images/item1.jpg);}#image2 a{background:url(images/item2.jpg);}
#image3 a{background:url(images/item3.jpg);}/*----------bottom scroller styles see above in beer page styles, here are variations:class [click] and class [fading] only----------*/
.click figure{cursor:pointer;}.fading:hover > figure{opacity: 0.3;}.fading:hover > figure:hover{opacity: 1.0;}
/* -------------------------------------------------------------------------------------- EVENTS PAGE STARTS HERE------------------------------------------------------------------------------------ */ 
.events-box{float:left;width:1150px;background:rgba(0,0,0,0.9);position:relative;}
figure#main-pic{position:relative;margin:100px 0 0 0;}
table{width:100%;float:left;border-top:1px solid rgba(214,214,211,0.9);/*#d6d6d3;*/margin-top:0;margin-bottom:20px;background:transparent;}
tr:nth-of-type(odd){background:#bbbbad;}
tr#headings{background:#911111;background: -moz-linear-gradient(19% 75% 90deg, #710909, #911111);background: -webkit-gradient(linear, left top, left bottom, from(#911111), to(#710909));/*dark red*/    background-image: -o-linear-gradient(top,rgb(145,17,17),rgb(113,9,9));border:1px solid rgba(255,255,255,0.1);}th#event{border-right:1px solid rgba(255,255,255,0.1);}
th#event-title{border-right:1px solid rgba(255,255,255,0.1);}
th#date{border-right:1px solid rgba(255,255,255,0.1);}
.black{height:30px;}th{font-size:1.4em;text-align: center;padding: 15px 30px;}
td{padding: 5px;border-top:1px solid rgba(214,214,211,0.9);/*#d6d6d3;*/    text-align: left;color:#313131;vertical-align:top;}
td.pic{width:220px;border-right:1px solid rgba(214,214,211,0.2);/*#d6d6d3;*/}
td.name{width:140px;border-right:1px solid rgba(214,214,211,0.2);/*#d6d6d3;*/    text-align: center;text-transform:capitalize;font-size:1.2em;color:#464646;}
td.name p, td.date p{font-size:0.9em;}
td.date{width:100px;border-right:1px solid rgba(214,214,211,0.2);/*#d6d6d3;*/    text-align: center;text-transform:capitalize;font-size:1.2em;color:#464646;}
td.description p{font-size:1.05em;}
#image1a a{background:url(images/event1.jpg);}
#image2a a{background:url(images/event2.jpg);}
#image3a a{background:url(images/event3.jpg);}
/* -------------------------------------------------------------------------------------- ABOUT PAGE STARTS HERE------------------------------------------------------------------------------------ */ .about-box{float:left;width:1150px;background:rgba(0,0,0,0.9);position:relative;}
.blocks{
    border-top:1px solid rgba(214,214,211,0.9);/*#d6d6d3;*/
    background:#bbbbad;
    color:#313131;
    clear:both;}
.blocks aside{float:left;width:380px;}
.blocks article{float:right;width:680px;margin-left:30px;}
.blocks figure{padding:10px;border:1px solid #d6d6d3;background:#c6c6bf;margin-bottom:30px;}
.blocks h1{margin:0 -30px 30px 0;font-size:1.6em;color: #bbbbad;padding:10px 20px;background:#911111;background: -moz-linear-gradient(19% 75% 90deg, #710909, #911111);background: -webkit-gradient(linear, left top, left bottom, from(#911111), to(#710909));/*dark red*/    background-image: -o-linear-gradient(top,rgb(145,17,17),rgb(113,9,9));border:1px solid rgba(255,255,255,0.1);}.blocks p{font-size:1em;}
/*---------gallery styles (gallery that opens in modal window) see in gallery-slider.css---------*/
/* -------------------------------------------------------------------------------------- INFORMATION PAGE STARTS HERE------------------------------------------------------------------------------------ */ 
#map_canvas{width:100%;height: 100%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 10;}
#mapcontent h1{font-size:1.4em;color: #bbbbad;padding:10px 20px;background:#911111;background: -moz-linear-gradient(19% 75% 90deg, #710909, #911111);background: -webkit-gradient(linear, left top, left bottom, from(#911111), to(#710909));/*dark red*/    background-image: -o-linear-gradient(top,rgb(145,17,17),rgb(113,9,9));border:1px solid rgba(255,255,255,0.1);margin:20px 0 30px 0;}
#mapcontent p{font-size:1em;color:#313131;margin-bottom:10px;}
#inner-inner-noborder{float:left;width:100%;position: relative;z-index:13;margin-top:532px;background:url(images/pat3.jpg);background-repeat:repeat;border-top:none;box-shadow:0 1px 20px rgba(0,0,0,0.9);}
#panel{float:left;width:100%;}
.info-box{float:left;width:1150px;background:rgba(0,0,0,1);position:relative;}
.info-box ul{float:left;list-style:none;padding:30px;border-top:1px solid rgba(214,214,211,0.9);/*#d6d6d3;*/width:1090px;margin-top:30px;background:#bbbbad;}
.info-box li{float:left;width:343px;margin-right:30px;color:#313131;}
.info-box li.last{margin-right:0;}
.info-box h1{font-size:1.4em;margin-bottom:30px;padding-bottom:10px;border-bottom:1px solid rgba(214,214,211,0.4);/*#d6d6d3;*/color:#464646;}.right{float:right;}
.info-box p{border-bottom:1px solid rgba(214,214,211,0.4);/*#d6d6d3;*/font-size:1em;padding-bottom:10px;}
p.note{font-size:0.9em;}
.slide{width:100%;float:left;background:rgba(0,0,0,0.9);padding:30px 0;}
a.btn-slide{float:right;font-family:'Oswald', sans-serif;text-transform:uppercase;padding:0 20px 8px 20px;background:#911111;background: -moz-linear-gradient(19% 75% 90deg, #710909, #911111);background: -webkit-gradient(linear, left top, left bottom, from(#911111), to(#710909));/*dark red*/    background-image: -o-linear-gradient(top,rgb(145,17,17),rgb(113,9,9));border:1px solid rgba(255,255,255,0.1);color: #bbbbad;margin-right:30px;line-height:2em;}
sub.plus{font-size:2em;}
.btn-slide:hover > span{opacity: 0.3;}
.btn-slide:hover > span:hover{opacity: 1.0;}
/*----------div id extras offers just redirecting to one more html page with extra samples which you can involve into your project. delete this div later----------*/
#extras{float:left;margin-top:30px;width:100%;}
/*-----------you can remove all styles and markup below as they belong only to extras.html page itself-------------*/
#wrapper-extras{float:left;width:100%;max-width:100%;height:100%;background:url(images/bg.png);background-repeat:repeat;}
.extras-box{float:left;width:1150px;background:rgba(0,0,0,1);position:relative;}
.extras-wrap{float:left;width:100%;margin-top:100px;}
.extras-box ul{float:left;list-style:none;padding:30px;border-top:1px solid rgba(214,214,211,0.9);/*#d6d6d3;*/width:1090px;margin-top:30px;background:#bbbbad;}
.extras-box li{float:left;width:343px;margin-right:30px;color:#313131;}
.extras-box li.last{margin-right:0;}
.extras-box h1{font-size:1.4em;margin-bottom:30px;padding-bottom:10px;border-bottom:1px solid rgba(214,214,211,0.4);/*#d6d6d3;*/color:#464646;}
.extras-box p{border-bottom:1px solid rgba(214,214,211,0.4);/*#d6d6d3;*/font-size:1em;padding-bottom:10px;}
/*----------styles below belong to various extra elemnts which you can use in your site----------*/
/*----------QUOTES----------*/
blockquote{line-height:1.5em;font-family:'Ruluko', sans-serif;margin-bottom:30px;}q{line-height:1.5em;font-family:'Ruluko', sans-serif;overflow:hidden;padding-top:30px;}
q:before{display: block;float: left;margin: 30px 30px 0 -15px;font-size: 7em;/* could be content:open-quote;*/}
q:after{/* could be content:close-quote;*/}
:lang(en-us)>q{quotes: "\201c" "\201d" "\2018" "\2019";}
:lang(en-gb)>q{quotes: "\2018" "\2019" "\201c" "\201d";}
/*---------CONTACT FORM----------*/

/*---------FAQs ACCORDION----------*/.accordion{float:left;width:100%;}.accordion h3{font-size:1em;color:#464646;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid rgba(214,214,211,0.4);/*#d6d6d3;*/cursor:pointer;text-transform:none;color:#464646;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-khtml-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.accordion h3:hover{padding:0 0 10px 20px;color:#911111;}.accordion p{font-size:0.9em;}