@font-face {
	font-family: 'Sylfaen';
	src: url('Sylfaen.eot');
	src: url('Sylfaend41d.eot?#iefix') format('embedded-opentype'),
		url('Sylfaen.woff') format('woff'),
		url('Sylfaen.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
} 

@font-face {
	font-family: 'Publico';
	src: url('Publico-BlackItalic.eot');
	src: url('Publico-BlackItalicd41d.eot?#iefix') format('embedded-opentype'),
		url('Publico-BlackItalic.woff') format('woff'),
		url('Publico-BlackItalic.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
}  

body { font-family: 'Open Sans'; background: #fff; }
.container-bottom {height:100px;min-height:100px;}
.identity { position: absolute; left: 30px; top: 15px; width: 350px; z-index: 999; }
.identity .menu { position: fixed; left: 20px; top: 20px; width: 40px; /*border: 1px solid rgba(255,255,255,0.35);*/ font-size: 20px; padding: 5px; text-align: center; color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.15); background: #271f1b; cursor: pointer; z-index: 999; }
.identity .logo {padding-top: 12px; width: 110px; cursor: pointer; }

.hero { width: 100%; height: 250px; padding: 0; background: #271f1b; background-size: cover; background-repeat: none; background-position: center; position: relative; text-align: center; }
/*.heading { display: table; background: #271f1b; background-image: url(concrete_wall.png); padding: 0 50px; height: 12vh; width: 100%;}*/
.title { width: 100%; padding: 25px; background-image: url(concrete_wall.png); }
.title .subject { color: #ddd; font-family: 'Sylfaen'; font-size: 28px; display: block; margin: 0; }
.title .description { color: #aaa; font-size: 16px; display: block; text-transform: lowercase; padding-bottom: 10px; }
.piclegend { position: relative; padding: 10px; text-align: center; }

h5 { font-size: 16px; color: #aaa; line-height: 1.3; margin-bottom: 20px; }

.article { padding-top: 40px; padding-bottom: 40px; }
.article h1 { font-family: 'Publico'; font-size: 38px; color: #222; }
.article h2 { font-size: 16px; color: #aaa; padding: 20px; line-height: 1.3; margin-bottom: 20px; }
.article [class*="col-"]  { font-size: 18px; text-align: left; color: #555; font-family: 'Sylfaen'; margin-bottom: 20px;  }
.legend { color: #bbb; font-style: italic; font-size: 11px; font-family: 'Open Sans'; }
.legend-top-margin { margin-top: 10px; }
.col-md-2 .legend { margin-bottom: 40px; }

 p.capital:first-letter{ float:left; background-color:#ccc; color: white; font-size: 80px; padding: 35px 35px 40px 35px; margin-right: 10px; line-height: 45px; }
 
.mosaic { margin-left: 20px; margin-bottom: 20px; margin-top: 20px; }
.mosaic .row [class*="col-"] { margin: 0; padding: 0; }
.mosaic .row [class*="col-"] .photo { margin: 20px 20px 0 0; height: 200px; content: ''; background-size: cover; background-repeat: none; background-position: center; }


.sb-left { background: #271f1b; background-image: url(example-introx.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 40px; }
.sb-left .sb-logo { /* position: absolute; left: 40px; top: 40px; */ width: 100%; }
.sb-left .frontmenu { position: absolute; left: 40px; bottom: 40px; right: 40px; }
.sb-left .frontmenu ul {margin: 0; padding: 0; list-style-type: none; }
.sb-left .frontmenu ul li {margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.15); }
.sb-left .frontmenu ul li:last-child {border-bottom: 1px solid rgba(255,255,255,0.15); } 
.sb-left .frontmenu ul li a {padding: 7px 20px; color: #fff; display: block; font-size: 14px; text-align: left; text-decoration: none; }



.column { font-size: 18px; text-align: left; color: #555; font-family: 'Sylfaen';  }
.column p { margin-bottom: 20px; }
.introduction p { font-size: 20px;  }


@media only screen and (min-width : 992px) {
	.hero { height: 350px; }
	.mosaic .row [class*="col-"] .photo { height: 250px; }
	.title { position: relative; margin: -60px 20px 0 20px; z-index: 999; width: auto; }
	.title .subject, .title .description { display: inline-block; }
	.title .subject { margin-right: 25px; }
.mosaic { margin-left: 5px; }
.mosaic .row [class*="col-"] { margin: 0; padding: 0; }
.mosaic .row [class*="col-"] .photo { margin: 5px 5px 0 0; height: 250px; content: ''; background-size: cover; background-repeat: none; background-position: center; }

}


@media only screen and (min-width : 1200px) {

.column-3 { margin-bottom: 50px; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; }
.column-2 { margin-bottom: 50px; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; }
.column-rule { -webkit-column-rule: 1px solid #eee; -moz-column-rule: 1px solid #eee; column-rule: 1px solid #eee; }
.column-margin-top { margin-top: 50px; }
.margin-top-bottom { margin-top: 100px; margin-bottom: 100px; }
.column-container { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }

h5 { font-size: 20px; }

.identity { left: 60px; top: 52px; }
.identity .menu { left: 55px; top: 55px; }
.identity .logo { padding-top: 8px; width: 120px; }
.article h1 { font-size: 58px; }
.article h2 { font-size: 20px; padding: 20px 180px; }

.hero { height: 70vh; }
.title { position: relative; margin-left: 55px; padding: 25px 60px; display: inline-block; width: auto; margin-top: -50px; z-index: 999999; }
.title .subject { float: left; margin-right: 50px; display: inline-block; }
.title .description { float: left; display: inline-block; padding-top: 12px; text-transform: lowercase; }
.piclegend { float: right; margin-right: 20px; }
.article { padding: 80px 0; }
.article [class*="col-"]  { text-align: justify; margin-bottom: 0; }

.legend { font-size: 14px; }

.mosaic .row [class*="col-"] .photo { height: 450px; }


}