@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);

/***************************************************/
/********************** GERAL **********************/
/***************************************************/

body											{ margin:0; color:#000; background: #fff; height: 100%; }
html											{ height: 100%; }

*												{ outline:none; -webkit-font-smoothing: antialiased; font:400 14px 'Open Sans'; }
img												{ border:0px; }
form											{ margin:0px; padding:0px; }

.l												{ float:left; }
.r												{ float:right; }
.b,b,strong										{ font-weight:600; }
.hide											{ display:none; }
.clear											{ clear:both; }
.clear.spacer									{ height: 60px; }
.clear.minSpacer								{ height: 30px; }
.color											{ color: #3696e1; }
.forceSquare									{ width: 100%; height: auto; }
.warningBox										{ text-align: center; padding: 50px 0; width: 100%; color: #000; background: #f1f1f1; }


a:link											{ text-decoration: none; color:#000; transition:color 0.2s; }
a:visited										{ text-decoration: none; color:#000; transition:color 0.2s; }
a:hover											{ text-decoration: none; color:#3696e1; transition:color 0.2s; }
a:active										{ text-decoration: none; color:#3696e1; transition:color 0.2s; }

.input											{ background: #fff; border: 0; box-shadow: 0 0 2px #999; outline: none; resize: none; border-radius:2px; padding:7px 1%; }
.input:focus									{ box-shadow: 0 0 2px #666; }
.input::-webkit-input-placeholder				{ color:#999; }
.input:focus::-webkit-input-placeholder			{ color:#b7b7b7; }
.button,a.button								{ background: #333; color: #fff; margin: 1px; padding: 7px 15px; font-size: 11px; border: 0; transition:color,background 0.1s; border-radius:2px; }
.button:hover,a.button:hover					{ background: #000; cursor: pointer; transition:color,background 0.1s; }
.select											{ background: #fff url('../img/bg-select-arrow.png') no-repeat 98% center; border: none; line-height: 1; -webkit-appearance: none; cursor: pointer; border-radius:2px; box-shadow: 0 0 2px #999; padding:7px 1%; }


/***************************************************/
/********************** MENUS **********************/
/***************************************************/

ul.topmenu						{ position:relative; padding:0; margin:0; list-style-type:none; display:block; }
ul.topmenu li					{ margin:0; padding:0; float: left; width: 12.5%; } 
ul.topmenu li.sep				{ width: 130px; height: 15px; }
ul.topmenu li.option a			{ float:left; text-decoration:none; cursor:pointer; width: 100%; padding: 15px 0; color: #fff; background: rgba(0,0,0,0.2); transition:background 0.2s; text-align: center; text-transform: lowercase; }
ul.topmenu li.option.current a	{ color: #fff; background: rgba(0,0,0,0.6); }
ul.topmenu li a:hover			{ background: rgba(0,0,0,0.4); color: #fff; transition:background 0.2s; }

.submenu,.submenu ul			{ position:absolute; margin:0; padding:0; list-style-type:none; display:none; margin-top:1px; }
.submenu li						{ position:relative; width: 218px; padding-left: 20px; }
.submenu li a					{ display:block; color:#999; text-decoration:none; font-size:16px; }
.submenu li a:hover				{ color: #fff; }



/***************************************************/
/********************* CONTENT *********************/
/***************************************************/


.openMenu										{ position:relative; float:right; width:33px; height:33px; cursor:pointer; }
.openMenu .path									{ position:absolute; left:4px; right:4px; height:3px; background:#fff; }
.openMenu .path:nth-of-type(1)					{ top:8px; transition-property: all,top; transition-duration: 0.2s,0.2s; transition-delay: 0s,0.2s; }
.openMenu .path:nth-of-type(2)					{ top:15px; opacity:1; transition-property: opacity; transition-duration: 0s; transition-delay: 0.2s; }
.openMenu .path:nth-of-type(3)					{ bottom:8px; transition-property: all,bottom; transition-duration: 0.2s,0.2s; transition-delay: 0s,0.2s; }
.openMenu.open .path:nth-of-type(1)				{ transform: rotate(45deg); -webkit-transform: rotate(45deg); top:15px; transition-property: all,top; transition-duration: 0.2s,0.2s; transition-delay: 0.2s,0s; }
.openMenu.open .path:nth-of-type(2)				{ opacity:0; transition-property: opacity; transition-duration: 0s; transition-delay: 0.2s; }
.openMenu.open .path:nth-of-type(3)				{ transform: rotate(4-5deg); -webkit-transform: rotate(-45deg); bottom:15px; transition-property: all,bottom; transition-duration: 0.2s,0.2s; transition-delay: 0.2s,0s; }


.topbar											{ position: fixed; top: 0; right: 0; left: 0; z-index: 10; display:none; background: rgba(0,0,0,0.8);/*  height: 37px; */ }
.topbar .alignTopbar							{ position: relative; padding: 2px 30px; color: #fff; }
.topbar .alignTopbar a							{ color: #fff; font-size: 14px; margin-top: 6px; }
.topbar .menu									{ display: none; }
.topbar .menu ul.topmenu li						{ width: 100%; }
.topbar .menu ul.topmenu li a					{ padding: 10px 0; background: none; }


.header											{ position: relative; z-index: 1; border-bottom: 1px solid #000; }
.header .bg										{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #6D6E71; z-index: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; background-blend-mode: multiply; }
.header .logo									{ position: relative; text-align: center; width: 100%; padding: 20px 0; z-index: 1; }
.header .logo img								{ width: 100%; max-width: 180px; height: auto; }
.header .menu									{ position: relative; width: 100%; }

.header.fixed									{ position:fixed; left:0; top:-166px; right:0; box-shadow: 0 0 5px #000; display:none; }
.header.fixed .menu								{ margin-top:166px; }

.navigator										{ background-color: #f1f1f1; display: none; }

.content										{ position: relative; z-index: 0; }
.content .notices								{ text-align: center; padding: 20px 0; background: #95003C; color: #fff; font-size: 20px; border-bottom: 1px solid #000; }


.bottom											{ position: relative; }
.bottom .mainString								{ padding: 200px 0; border-top: 1px solid #f1f1f1; background: #fff; }
.bottom .footer									{ background: #f1f1f1 url('../img/site/logo-footer.png') no-repeat center center; background-size: contain; }
.bottom .footer .alignFooter					{ padding: 10px 30px; }
.bottom .footer .alignFooter.r					{ text-align: right; }
.bottom .footer .alignFooter h2					{ margin-top: 0; }
.bottom .brand									{ position: relative; width: 100%; background: #e1e1e1; }
.bottom .brand .alignBrand						{ position: relative; padding: 8px 0 0 30px; font-size: 12px; }
.bottom .brand .alignBrand img					{ vertical-align: middle; }

.bottom .brand .social							{ margin-right: 30px; }
.bottom .brand .social .l						{ width: 32px; background-size: contain; transition:background 0.2s; }
.bottom .brand .social .l:hover					{ background-color: #ccc; transition:background 0.2s; }

.bottom .highlightArea							{ position: relative; width: 25%; height: 500px; background-repeat: no-repeat; background-size:cover; }
.bottom .highlightArea .bg						{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); transition:background 0.2s; }
.bottom .highlightArea .bg:hover				{ background: rgba(0,0,0,0.6); transition:background 0.2s; }
.bottom .highlightArea .bg .alignMiddle			{ position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font: 300 26px 'Open Sans'; color: #fff; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); transform: translate(0,-50%); }


/* GERAL */
h1												{ color: #3696e1; font: 300 26px 'Oswald'; text-transform: lowercase; }
h2												{ color: #000; font: 300 26px 'Oswald'; text-transform: lowercase; }
.full											{ width:100%; }
.half											{ position: relative; width: 50%; }
.half.middle									{ margin:0 25%; }
.thirth											{ position: relative; width: 33%; }
.thirth.middle									{ width: 34%; }
.quarter										{ position: relative; width: 25%; }
.fifth											{ position: relative; width: 20%; }
.eighth											{ position: relative; width:12.5%; }

.parallaxImage									{ position: relative; height: 500px; width: 100% !important; margin: 0; padding: 0; overflow: hidden; z-index: 2; }
.parallaxImage .randomImage						{ position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-attachment:fixed; background-position:50% 0; background-color:#fff; }
.parallaxImage .randomImageMobile				{ position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size: contain; background-position: center center; background-color:#fff; }

.middleslide									{ overflow: hidden; z-index: 0; }
.arrow											{ position: fixed; top: 50%; margin-top: -22px; width: 22px; height: 44px; cursor: pointer; z-index: 1; }
.arrow.prev										{ padding-left: 15px; transition:padding 0.2s; left: 0; }
.arrow.next										{ padding-right: 15px; transition:padding 0.2s; right: 0; }
.arrow.prev:hover								{ padding: 0 10px 0 5px; transition:padding 0.2s; }
.arrow.next:hover								{ padding: 0 5px 0 10px; transition:padding 0.2s; }
.arrow div										{ position: relative; width: 22px; height: 44px; background: url('../img/site/img-arrow-horiz.png') no-repeat center center; }
.arrow.prev div									{ background-position: left center; }
.arrow.next div									{ background-position: right center; }

.instagram										{ background: #005787; padding: 10px 0 30px 0; }
.instagram h1									{ padding: 0; margin: 0; padding: 0 0 10px 30px; color: #fff; }
.instagram .elem								{ width: 12.5%; }


/* HOMEPAGE */
.listHomeNews									{ opacity: 0.9; transition:opacity 0.2s; cursor: pointer; }
.listHomeNews:hover								{ opacity: 1; color: #000; transition:opacity 0.2s; }
.listHomeNews .image							{ height: 300px; }
.listHomeNews .info								{ position: relative; padding: 10px 30px; }
.listHomeNews .info h1							{ margin-top: 0; }

.clear.clearhalf								{ clear: none; }

.aboutText										{ position: relative; padding: 30px; }
.aboutText.showNews								{ padding-top: 0; }
.aboutText .image								{ text-align: center; }
.aboutText .image img							{ max-width: 100%; height: auto; }
.aboutText h1									{ margin-top: 0; }
.support .l										{ width: 10.5%; margin: 0 1%; background-repeat: no-repeat; background-position: center center; background-size:contain; transition:all 0.2s; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); }
.support .l:hover								{ opacity: 1; transition:all 0.2s; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%); }

.audioList										{ margin-bottom: 15px; }


/* INSTITUTION */
.institution									{ position: relative; overflow: hidden; }
.institution .images							{ position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background:#f9f9f9; }
.institution .images .l							{ position: relative; background-size:cover; background-repeat: no-repeat; background-position: center center; }


/* RAMBOIA */
.conductor .image								{ background-size:cover; }
.musicians										{ background-size:cover; background-color:#fff; }
.musicians.thirth.middle						{ width:33%; padding:0 0.5%; }
.musicians .bg									{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); opacity:0; transition:opacity 0.2s; }

.desktop .musicians:hover .bg					{ opacity:1; transition:opacity 0.2s; }
.mobile .musicians .bg							{ opacity:1; }

.musicians .bg .alignMiddle						{ position: absolute; left: 0; top: 50%; width: 100%; text-align: center; color: #fff; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); transform: translate(0,-50%); }
.musicians .bg .alignMiddle h2					{ color:#fff; margin:0; text-shadow:0 0 1px #000; }


/* CONTACT */
.map											{ position:relative; width:100%; height:400px; }


/* Pagination */
table.pagination								{ border-collapse:collapse; float:left; margin-top:10px; font:bold 14px 'Open Sans'; }
table.pagination td								{ border:1px solid #fef2e7; padding:0; text-align:center; width:20px; height:20px; }
table.pagination td.submit						{ cursor:pointer; }
table.pagination td.arrow						{ background-color:#fad7b2; }
table.pagination td.arrow.submit				{ background-color:#f1830f; }
table.pagination td.arrow.init					{ background-image:url('../img/pag_goInit.gif'); }
table.pagination td.arrow.end					{ background-image:url('../img/pag_goEnd.gif'); }
table.pagination td.number						{ background:#fff; height:17px; }
table.pagination td.number.submit:hover			{ background:#fef2e7; }
table.pagination td.number.current				{ color:#fff; background:#f1830f; }
table.pagination td.more						{ padding-top:4px; height:16px; border:0; }
table.pagination td.comboPag					{ border:0; padding-left:5px; }


/* USER REGIST */
.registArea											{ width: 100%; }
.registArea .input									{ width:47%; margin:0.5%; padding:7px 1%; }
.registArea .input.error							{ color:#bc0d0d; }
.registArea .input.error::-webkit-input-placeholder	{ color:#f01; }
.registArea .sepZipCode								{ margin-top:9px; color:#fff; }
.registArea .input.zipcode4							{ width:15%; }
.registArea .input.zipcode3							{ width:10%; }
.registArea .select									{ width:49%; margin:0.5%; padding:7px 1%; }
.registArea .button									{ margin:0.5%; }

.passRecover										{  }
.passRecover .input									{ border-right:0; border-radius:2px 0 0 2px; margin-right:0; width:30%; padding:7px 1%; }
.passRecover .button								{ border-radius:0 2px 2px 0; margin-left:0; padding:7px 1%; }

.loginArea											{ width: 30%; }
.loginArea p										{ margin: 0; }


/* SCROLL */
.jspContainer									{ overflow:hidden; position:relative; }
.jspPane										{ position:absolute; }
.jspVerticalBar									{ position: absolute; top: 0; right: 0; width: 6px; height: 100%; padding: 2px; }
.jspHorizontalBar								{ position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; }
.jspVerticalBar *,
.jspHorizontalBar *								{ margin: 0; padding: 0; }
.jspCap											{ display: none; }
.jspHorizontalBar .jspCap						{ float: left; }
.jspTrack										{ background:none; position: relative;  }
.jspDrag										{ background:#1c1c1c; position: relative; box-shadow: 0 0 3px #000; top: 0; left: 0; cursor: pointer; }
.jspDrag:hover									{ background-position:center right; }
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag						{ float: left; height: 100%; }
.jspArrow										{ background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled							{ cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow						{ height: 5px; }
.jspHorizontalBar .jspArrow						{ width: 5px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus					{ outline: none; }
.jspCorner										{ background: #eeeef4; float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner								{ margin: 0 -3px 0 0; }




/* Tooltips */
.tipsy { padding: 5px; font-size:13px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; /*-moz-border-radius:3px; -webkit-border-radius:3px;*/ }
.tipsy-arrow { position: absolute; background: url('../img/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }



/* Messages */
div.dialog{ margin:10px 0; padding:20px 2%; text-align:left; color:#000; box-shadow:0 0 2px #000; border-radius:2px; font-size:11px; }
div.dialog.done{ background:#ceef73; }
div.dialog.error{ background:#ef7373; }
div.dialog.notes{ background:#73b3ef; }
div.dialog li{ margin-left:20px; }
div.dialog p{ margin-left:0; }