body { padding:0; margin:0; background:#fff; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; }

.clear-fix:after, .ClearFix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

h1, h2, h3, h4, h5, h6 { margin:0 0 14px 0; padding:0; }
h1 { font-size:20px; color:#fff; float:left; margin:5px 0 0 0; line-height:34px; text-transform:uppercase; }
h1 strong { font-size:70px; color:#fff; line-height:80px; }
h3 { font-size:20px; font-weight:normal; color:#999; margin:0 0 30px 0; display:none; }
h4 { font-size:18px; line-height:24px; min-height:24px; padding:0 40px 0 0; margin:0 0 9px 0; }

p { margin:0 0 14px 0; padding:0; font-size:16px; line-height:22px; }
img { margin:0 0 14px 0; max-width:100%; border:none; }

ul, li { list-style:none; padding:0; margin:0;}

a { text-decoration:none; }
a:hover { text-decoration:underline; }

.month { background:url(images/header.gif) no-repeat center #013370; color:#666; display:block; text-transform:none; padding:0; }
.month .wrapper { width:960px; margin:0 auto; padding:30px 0; }
.month ul { float:right; width:300px; text-transform:none; }
.month ul li { width:31%; margin:0 0 1.5% 1.5%; float:left; }
.month ul li a { display:block; background:#fff; border-radius:4px; color:#013370; font-size:13px; padding:5px; transition:0.1s; }
.month ul li a:hover { background:#6785a9; color:#fff; text-decoration:none; }

.wrapper { width:750px; margin:0 auto; padding:50px 0 0 0; }
section .wrapper { padding:50px 0; }

.timeline-next-previous { margin:0 0 20px 0; padding:0 0 0 150px}
.timeline-next-previous a { height:20px; line-height:20px; display:block; float:left; width:29.3%; margin:0 2%; text-align:center; padding:0; color: #333; font-size: 13px; transition: 0.1s; }
.timeline-next-previous a:first-child { text-align:left; margin:0 4% 0 0; width:25.3%; padding:0 0 0 4%; background:url(images/arrow-left.png) no-repeat left center; }
.timeline-next-previous a:last-child { text-align:right; margin:0 0 0 4%; width:25.3%; padding:0 4% 0 0; background:url(images/arrow-right.png) no-repeat right center; }

article { padding:30px 0 30px 150px; margin:0 auto 0 auto; border-top:1px solid #ccc; }
article .date { margin-left:-150px; font-size:14px; float:left; }

.group { border:1px solid #e3e3e3; border-bottom:2px solid #ccc; border-radius:4px; padding:20px; background:#fff; margin:0 0 30px 0; }
.group h4 { background:url(images/icon-photo.png) no-repeat top right; }
.group .stamp { font-size:12px; color:#999; display:block; }

.website { border:1px solid #111; border-bottom:2px solid #000; border-radius:4px; padding:20px; background:#222; margin:0 0 30px 0; }
.website img.profile { width:60px; float:right; margin:0 0 20px 20px; }
.website * { color:#fff; }
.website h4 { background:url(images/) no-repeat top right; }
.website .stamp { font-size:12px; color:#999; display:block; }
.website p { font-size:14px; line-height:18px; }

.tweet { border:1px solid #e3e3e3; border-bottom:2px solid #5ea9dd; border-radius:4px; padding:20px 20px 20px 100px; margin:0 0 30px 0; background:#fff;}
.tweet img.profile { width:60px; margin-left:-80px; float:left; border-radius:6px; }
.tweet h4 { background:url(images/icon-twitter.png) no-repeat top right; }
.tweet .stamp { font-size:12px; color:#999; display:block; }
.tweet h5.retweet { background:url(images/retweet.gif) no-repeat; height:14px; display:block; line-height:14px; font-size:11px; color:#999; padding:0 0 0 20px; font-weight:normal; }

.facebook { border:1px solid #e3e3e3; border-bottom:2px solid #3b579d; border-radius:4px; padding:20px; margin:0 0 30px 0; background:#fff; }
.facebook img { margin:0; }
.facebook img.profile { width:44px; float:left; margin:0 20px 20px 0; }
.facebook h4 { background:url(images/icon-facebook.png) no-repeat top right; margin:0 0 6px 0; }
.facebook .stamp { font-size:12px; color:#999; }
.facebook p { display:block; clear:both; font-size:14px; line-height:18px; }

.youtube { border:1px solid #e3e3e3; border-bottom:2px solid #d12122; border-radius:4px; padding:20px; margin:0 0 30px 0; background:#fff;}
.youtube h4 { background:url(images/icon-youtube.png) no-repeat top right; }
.youtube .stamp { font-size:12px; color:#999; margin:0 0 14px 0; display:block; }
.youtube p { display:block; clear:both; font-size:14px; line-height:18px; }
.youtube iframe { width:100%; height:360px; }

.quote { border-bottom:2px solid #000; border-radius:4px; padding:20px 20px 20px 80px; margin:0 0 30px 0; background:url(images/quotes.png) #333 no-repeat 20px 23px; }
.quote blockquote { color:#fff; margin:0; font-family:Georgia, "Times New Roman", Times, serif; font-size:18px; line-height:24px; }
.quote em { color:#999; font-size:12px; margin:0 0 8px 0; display:block; }

.flickr { border:1px solid #666; border-bottom:2px solid #000; border-radius:4px; padding:20px 20px 0 20px; margin:0 0 30px 0; background:#fff; }
.flickr img.profile { width:44px; float:left; margin:0 20px 20px 0; }
.flickr h4 { background:url(images/icon-flickr.png) no-repeat top right; margin:0 0 6px 0; }
.flickr .stamp { font-size:12px; color:#999; }
.flickr img:last-child { padding:20px; margin-left:-20px; margin-bottom:0; width:100%; background:#000; }
.flickr p { display:block; clear:both; }

.instagram { border:1px solid #e3e3e3; border-bottom:2px solid #9b593e; border-radius:4px; padding:20px 20px 0 320px; margin:0 0 30px 0; background:#fff; min-height:280px; position:relative; }
.instagram img.profile { width:44px; float:left; margin:0 20px 20px 0; border-radius:4px; box-shadow:0 0 10px #ccc; }
.instagram h4 { background:url(images/icon-instagram.png) no-repeat top right; margin:0 0 3px 0; }
.instagram .stamp { font-size:12px; color:#999; }
.instagram p { font-size:14px; line-height:20px; display:block; clear:both; }
.instagram img.main-image { float:left; width:300px; position:absolute; top:0; left:0; max-width:none; }

.screenshot { padding:20px; border:1px solid #e3e3e3; border-bottom:2px solid #ccc; border-radius:4px; margin:0 0 30px 0; background:url(images/website.png) no-repeat center center #fff; }
.screenshot span { width:480px; display:block; margin:0 auto; border:1px solid #999; border-bottom:none; border-radius:3px 3px 0 0; color:#999; text-align:center; font-size:9px; font-weight:bold; padding:8px 4px; }
.screenshot img { width:480px; padding:0 4px 4px 4px; display:block; margin:0 auto; border:1px solid #999; border-top:none; border-radius:0 0 3px 3px; }

.event { border:1px solid #111; border-bottom:2px solid #000; border-radius:4px; padding:20px; background:#222; margin:0 0 30px 0; }
.event * { color:#fff; }
.event .clock { width:110px; float:left; margin:0 20px 0 0; }
.event .clock img { width:110px; }
.event h4 { margin:0 0 5px 0; }
.event h5 { color:rgba(255,255,255,0.5); margin:0 0 10px 0; }
.event .time { font-size:14px; margin:0 0 10px 0; }
.event .details { font-size:14px; line-height:18px; }

/* homepage panel */

#home-panel { background:url(images/home-symbol-4.png) no-repeat -100px center #013370; border-radius:5px; display:block; width:960px; height:500px; margin:30px auto; position:relative; }
#home-panel #symbol-1 {position: absolute; opacity:0.2; right:60px; top:60px; -webkit-animation:spin 20s linear infinite; -moz-animation:spin 20s linear infinite; animation:spin 20s linear infinite;}
#home-panel #symbol-2 {position: absolute; opacity:0.8; right:360px; top:160px; -webkit-animation:spin 10s alternate infinite; -moz-animation:spin 10s alternate infinite; animation:spin 10s alternate infinite;}
#home-panel #symbol-3 {position: absolute; opacity:0.4; right:300px; top:280px; -webkit-animation:spin 30s linear infinite; -moz-animation:spin 30s linear infinite; animation:spin 30s linear infinite;}
#home-panel #symbol-4 {position: absolute; opacity:0.2; right:460px; top:320px; -webkit-animation:spin 40s alternate infinite; -moz-animation:spin 40s alternate infinite; animation:spin 40s alternate infinite; width:60px;}
#home-panel #symbol-5 {position: absolute; opacity:0.6; right:100px; top:380px; -webkit-animation:spin 10s linear infinite; -moz-animation:spin 10s linear infinite; animation:spin 10s linear infinite; width:80px; }
#home-panel h1 { color:#fff; position:absolute; top:120px; left:90px; }
#home-panel h1 strong { color:#fff; }
#home-panel .month { position:absolute; bottom:120px; left:90px; background:#013370; }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@media screen and (max-width:1000px){
	
.month .wrapper { padding:20px; width:750px; }

#home-panel { background:url(images/home-symbol-4.png) no-repeat -100px center #013370; width:90%; height:400px; margin:30px auto; position:relative; }
#home-panel #symbol-1 {position: absolute; opacity:0.2; right:60px; top:40px; -webkit-animation:spin 20s linear infinite; -moz-animation:spin 20s linear infinite; animation:spin 20s linear infinite;}
#home-panel #symbol-2 {display:none; }
#home-panel #symbol-3 {position: absolute; opacity:0.4; right:300px; top:260px; -webkit-animation:spin 30s linear infinite; -moz-animation:spin 30s linear infinite; animation:spin 30s linear infinite;}
#home-panel #symbol-4 {position: absolute; opacity:0.2; right:460px; top:300px; -webkit-animation:spin 40s alternate infinite; -moz-animation:spin 40s alternate infinite; animation:spin 40s alternate infinite; width:60px;}
#home-panel #symbol-5 {display:none; }
#home-panel h1 { color:#fff; position:absolute; top:60px; left:90px; }
#home-panel h1 strong { color:#fff; }
#home-panel .month { position:absolute; bottom:80px; left:90px; background:none; }


}

@media screen and (max-width:800px){
	
.wrapper { padding:20px; width:600px; }

.month .wrapper { padding:20px; width:600px; }

h1 { margin:20px 0 0 0; font-size:12px; line-height:20px; }
h1 strong { font-size:44px; line-height:60px; }

.timeline-next-previous { padding:0; }

article { padding:30px 0 0 0;}
article .date { float:none; margin:0 0 30px 0; }

#home-panel h1 { color:#fff; position:absolute; top:70px; left:90px; }
#home-panel .month { position:absolute; bottom:90px; left:90px; background:none; }

}

@media screen and (max-width:650px){
	
h1 { font-size:12px; text-align:center; float:none; margin:0 0 10px 0; line-height:normal; text-transform:uppercase; display:block; }
h1 strong { font-size:30px; line-height:normal; }

p { font-size:14px; line-height:18px; }

.month .wrapper { width:auto; padding:10px; }
.month ul { float:none; width:auto; text-transform:none; text-align:center; }

.wrapper { width:auto; margin:0 auto; padding:0; }
section .wrapper { padding:0 0 50px 0; }

.timeline-next-previous { display:none;}

article { padding:10px 10px 1px 10px;}
article .date { font-size:20px; font-weight:bold; text-align:center; margin:0 0 15px 0; }

.group, .website, .tweet, .facebook, .youtube, .quote, .flickr, .instagram, .screenshot { padding:10px; margin:0 0 15px 0; }

.tweet img.profile { width:40px; margin:0; margin:0 10px 10px 0; }
.tweet h4 { font-size:16px; line-height:22px; }

.quote { padding:80px 15px 15px 15px; }

.screenshot { background:#fff; }
.screenshot span { display:none; }
.screenshot img { width:90%; padding:2%; display:block; margin:0 auto; border:1px solid #999; border-radius:3px; }

.instagram img.main-image { float:none; width:auto; max-width:100%; position:static; top:0; left:0; }

.event { padding:10px; margin:0 0 15px 0; }
.event * { color:#fff; }
.event .clock { width:110px; float:right; margin:0 0 20px 20px; }
.event h4 { margin:0 0 5px 0; font-size:14px; line-height:20px; }
.event .time { font-size:12px; }

#home-panel { background:#013370; width:90%; height:auto; margin:0 auto; position:relative; padding:5%; border-radius:0; }
#home-panel img {display:none; }
#home-panel h1 { color:#fff; position:static; top:0; left:0; float:none; }
#home-panel h1 strong { color:#fff; }
#home-panel .month { position:static; bottom:0; left:0; background:none; }


}


#breadcrumb { background:#f5f5f5; padding:15px 0; font-size:14px; }
#breadcrumb .wrapper { width:1200px; }
#breadcrumb a {	padding:0 5px; font-weight: bold; color:#333; }
#breadcrumb a:first-child {	padding:0 5px 0 0; }
#breadcrumb a:hover { text-decoration:underline; }

    @media screen and (max-width:800px){
        #breadcrumb { padding:10px 0; font-size:11px; }
    }
	
#breadcrumb .wrapper { max-width:1200px; margin:0 auto; width:auto; padding:0; }

    @media screen and (max-width:1300px){
        #breadcrumb .wrapper { width:auto; padding: 0 40px; }
    }
    @media screen and (max-width:1000px){
        #breadcrumb .wrapper { width:auto; padding: 0 30px; }
    }
    @media screen and (max-width:600px){
        #breadcrumb .wrapper { padding: 0 15px; }
    }