﻿
/****************************************/
/********* RESET CSS ********************/
/****************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, 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; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/*********************************************/
/********* GERAL *****************************/
/*********************************************/


body {   background:#fff;
}
a.go-top {position:fixed; right:0px; top:60px; background:#fff; opacity:0.7; alpha(opacity=70); color:#333; font-family: 'bebas_neueregular',Arial, Helvetica, sans-serif; font-size:14px; padding:20px 10px; display:none; border-left:1px solid #ccc; border-bottom:1px solid #ccc; z-index:1000;}
 h1, h2,  h3,  h4 { font-family: 'bebas_neueregular',Arial, Helvetica, sans-serif; font-weight:400; color:#000; 
}
 h1 { color:#fff; font-size:16px; line-height:50px; padding:0 10px; text-decoration:none; margin-left:20px; float:left; 
}
h2 {font-size:50px; line-height:50px; letter-spacing:-1px;
}
.wrapper {width:90%; max-width:1600px; margin:0 auto;}
hr {margin:40px 0; border:1px solid #ddd;}
strong {font-weight:700;}
em {font-style:italic;}
span.mono {display:inline; font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;}
.obfusc {font-size:22px; display:block; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; line-height:50px; vertical-align:middle; letter-spacing:1px; }
.obfusc img{ width:12px!important; height:13px; display:inline!important; margin:0 2px 0 -5px !important;  border:0 !important;  }
.stroke-shd1_ {text-shadow: -2px -2px 0px #FFF, -2px 2px 0px #FFF, 2px -2px 0px #FFF, 2px 2px 0px #FFF, 4px 4px 0px rgba(0, 0, 0, 0.2), 4px 5px 0px rgba(0, 0, 0, 0.2);}
.table {display:table; font-family:Arial, Helvetica, sans-serif;}
.row {display:table-row;}
.cell {display:table-cell; border-right:10px solid transparent; border-bottom:5px solid transparent;}

/* menu top */
.menu-top {width:100%; background:#772222; height:60px; position:fixed; left:0; top:0; z-index:100;
}
.menu-top .logo {display:inline-block; position:absolute; left:50%; margin-left:-50px;
}
.menu-top .logo img{width:40px; height:40px; float:left; padding:8px 0 0 0;
}
.menu-top h1 {display:inline-block; float:left; padding:8px 0 0 0; margin-left:5px; letter-spacing:1px; color:#fff; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
}
.menu-top .menu-icon { background: url(../images/mobile-menu-icons.png) no-repeat 0 0; width:40px; height:40px;
    display: none;
}

.menu-top .links { /*text-align:right; margin-right:20px; float:right; */ display:none;
}
.menu-top .links a {font-family: 'bebas_neueregular', Arial, sans-serif; color:#ccc; font-size:20px; line-height:50px; padding:0 10px; text-decoration:none;
}
.menu-top .links a:hover { color:#999; 
}
/* aside */
.aside {width:25%; float:left; margin-top:50px; padding:50px 0 50px 0; margin-bottom:20px; background:#fff;
}



.aside .box-1 {width:80%; min-height:80px;  background:#fff; margin:0 auto 1.5% auto; display:block; text-decoration:none; display:table; border-collapse:collapse;
}


.aside .box-1 img {width:70px; height:70px; margin:0 10px 10px 0;  display:table-cell; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);  opacity:0.5;
}
.aside .box-1:hover img, .aside .box-1.active img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);  opacity:1;}
.aside .box-1 span {display:table-cell; vertical-align:top; width:80%; padding-top:10px;
}

.aside .box-1 h2 { font-family: 'bebas_neueregular', Arial, sans-serif; color:#772222; font-weight:400; font-size:20px; margin-bottom:5px; line-height:20px; letter-spacing:normal;
}
.aside .box-1 p {
font-family:  Arial , sans-serif; color:#772222; font-size:12px; line-height:14px;}
/* main container */
#content { width:75%; float:right; margin:50px 0 0px -4px; position:relative; z-index:10; border-left:4px solid #772222;
}
#container { width:100%;
}



/* page */


#container .page {width:70%; overflow:hidden; margin:10px 0 20px 0; background:#fff; padding:40px 40px 80px 40px; position:relative;
}

#container .page p {
 font-family: Georgia, "Times New Roman", Times, serif; color:#000; font-size:16px; line-height:20px; margin:0 0 20px 0; }
#container .page p a {
 color:#772222; }

#container .page img {margin:0 0 20px 0; display:block; /*width:99%;*/ width:100%; border:1px solid #fff;
}
#container .page .half {margin:0 0 20px 0; display:inline-block; width:48.5%; margin-right:2%;}
#container .page .half-end {margin:0 0 20px 0; display:inline-block; vertical-align:top; width:48.5%; overflow:hidden;
}
#container .page .half.max300 { max-width:300px;
}

#container .page .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin:0 0 20px 0; }
 #container .page .embed-container iframe, #container .page .embed-container object, #container .page .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#container .page .embed-container.half {margin:0 0 20px 0; display:inline-block; width:49%; height:50%; margin-right:2%; padding-bottom:30%;}


#container .page h2 {font-size:50px; line-height:50px; 
}
#container .page h2 em{color:#666;font-style:normal;
}
#container .page .half-end h2 {line-height:40px; margin-bottom:5px;}
#container .page h3 {font-family: 'bebas_neueregular', Arial, sans-serif; letter-spacing:normal;font-size:20px; line-height:30px; color:#666; margin-bottom:20px;
}
#container .page .half-end h3 {line-height:20px; margin-bottom:5px;}
#container .page h4 {font-size:30px; line-height:40px; line-height:26px;
}
#container .page img.third {margin:0 0 20px 0; display:inline-block; width:29%; margin-right:2%; 
}


#container .page .third-end {/*margin:0 0 20px 0;*/ display:inline-block; width:67%; vertical-align:top;
}
#container .page .third-end h4, #container .page .half-end h4 {
    line-height: 26px; margin-bottom:5px;
}
#container .page .third-end p {
    line-height: 18px;
}
#container .page .see-more {
    font-family: 'bebas_neueregular',Arial, Helvetica, sans-serif;
    font-size: 20px; padding:5px 10px;
    color: #fff;
    background:#772222; display:block; float:right; text-decoration:none;
}
#container .page .see-more:hover {color: #fff;
    background:#000;
}



/* audio player */
.audio-player-area {width:100%; height:auto; overflow:hidden;}
.audio-player {width:100%; background:#999; min-height:50px; padding:10px; display:block; position:relative; text-decoration:none; margin-bottom:2px;}
.audio-player.on { background:#772222; }
.audio-player:hover { background:#aaa; }
.audio-player .play-button {position:absolute; left:10px; top:10px; width:50px; height:50px; display:block; border:0px none;}
.audio-player .play-button img { border:0px none !important;}
.audio-player .track-name, .audio-player .album-name, .audio-player .album-year {padding:0 20px 0 70px; display:block; font-family: 'bebas_neueregular',Arial, Helvetica, sans-serif; }
.audio-player .track-name {font-size:18px; color:#fff;}
.audio-player .album-name {font-size:16px; color:#000;}
.audio-player .album-year {font-size:14px; color:#000;}
#container .page .audio-player-area .see-more {float:left;}



/* footer */

.footer {width:100%; height:200px; background:#772222; float:left;
}
.footer p{/*width:100%; text-align:center;*/ font-family: "bebas_neueregular", Arial, Helvetica, sans-serif; color:#fff; font-size:14px; font-style:normal; margin:20px 0 20px 20px; 
}

/* media queries */
@media screen and (min-width: 721px) and (max-width: 1080px) {
    .wrapper {
        width: 95%;
    }
  
     .aside {
        width: 35%;
    }
    #content {
        width: 65%;
    }

      #container .page {width:80%; 
}
#container .page .half, #container .page .half-end {margin:0 0 20px 0; display:block; width:100%; 
}

   
	
}

@media screen and (min-width: 0px) and (max-width: 720px) {
	
	
     .wrapper, #content, .aside {
        width: 100%; 
    }
.aside {margin-top:20px; padding:0;}
/*.menu-top .logo img{ padding-top:15px;
}
   .menu-top {height:60px; line-height:60px;}
   .menu-top h1 { line-height:60px;}*/
.menu-top .logo {display:inline-block; position:absolute; left:20px; margin-left:0px;
}
   .menu-top .menu-icon {  width:40px; height:40px; display:block; margin-top:10px; float:right; margin-right:20px; display:block;  cursor:pointer; z-index:100;
    }
	.menu-top .menu-icon.open { background-position: right top;}
	.menu-top .menu-icon.close { background-position: left top;}
     .menu-top .links {position:fixed; top:60px; left:0; background:#772222; display:none; width:100%; text-align:center; padding:10px 0; z-index:100;
}
    .menu-top .links a {font-size:30px; line-height:40px; padding:0; display:block; width:auto;
}
 




.boxes {display:none;
    }
	#content {
    
    margin:0 0 20px 0;
   
}
    #container .page {width: 90%; margin:10px 0 20px 0;  padding:40px 5% 80px 5%;
}
      #container .page h2 {font-size:38px; line-height:40px; margin-left:0px;
}
   #container .page h4 {font-size:25px; /*line-height:40px;*/  line-height:26px;
}
     #container .page .half, #container .page .half-end {margin:0 0 20px 0; display:block; width:100%; 
}
#container .page .half.max300
{ width:inherit;}
#container .page img.third { width:100%; max-width:300px;
}
#container .page .third-end { width:100%;
}
 #container img.center-mobile {float:none; margin:0 auto!important;}

}