/* ---------------- Basic styles ---------------------- */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
body {font-family: 'Open Sans', sans-serif; font-size:10px; color:#000;}
img {width:100%;height:auto;}
p, span { font-size:1.6em; }
a { color:#000; }
span.info { font-size:1em; display:block; margin-bottom:2em;}
.modal-dialog { width:auto; margin:0 10%; max-width:100%;}
.modal-content iframe{margin: 0 auto;display: block;}

/* ---------------- Navbar ---------------------- */
#navbar-change { display:none;}
.navbar-custom { background:#504b18; height:40px;}
.navbar-brand {display:block; height:100%; padding-top: 0rem; padding-bottom: 0rem; margin-right: 0rem; font-size: 1em;}
.navbar-brand img{height:100%; width:auto;}
.navbar-custom .nav-link {color:#fff; font-size:1.4em; font-weight:300;}

/* ---------------- Header ---------------------- */
.header-section { width:100%; height:100vh; background-image:url('../img/wotrubakirche_intro.jpg'); background-position:center center; background-size: cover; }
.header-section h1 { color:#526231; font-size:8em; font-weight:300; line-height:0.8em;}
.header-section h2 { color:#27b047; font-size:4em; font-weight:700; line-height:0.8em;}
.header-section h3 { color:#526231; font-size:3em; font-weight:300; letter-spacing:-2px;}
.vertical-navigation { margin-top:2em;list-style:none; font-size:1.6em; font-weight:600; -webkit-padding-start: 0px;line-height:1.8em;}
.vertical-navigation li>a  { color:#000; }
/* ---------------- Das Kunstwerk ---------------------- */
.das-kunstwerk { margin-top: 10em;}
.kunstwerk-info {padding-left:1em; padding-right:5em;}
.das-kunstwerk h1 { color:#acc180; font-size:9em; font-weight:300; letter-spacing:-2px; line-height:0.8em; margin-bottom:1em;}
.das-kunstwerk p { padding-left:0.5em; }
/* ---------------- Die Bedrohung ---------------------- */
.die-bedrohung { margin-top: 10em;}
.die-bedrohung h1 { color:#cf644b; font-size:9em; font-weight:300; letter-spacing:-2px; line-height:0.8em; margin-bottom:1em; text-align:center;}
.die-bedrohung p { padding-left:0.5em;  text-align:center;}
.die-bedrohung p.grun { color:#1b6f3b; }
.die-bedrohung p.rot { color:#cf644b; }
/* ---------------- Situation ---------------------- */
.section-situation { margin-top: 10em;}
.section-situation h1 { color:#646adc; font-size:9em; font-weight:300; letter-spacing:-2px; line-height:0.8em; text-transform:uppercase; margin-bottom:0.5em;}
.section-situation p { line-height:1.2em;}
.btn-youtube { background:transparent; border:0px; width: 100px; cursor:pointer;}
.letterpopup-btn { font-weight:600; text-decoration:underline; color:#000; }
.letterpopup-btn:a { color:#000; }
/* ---------------- Project Georgenpark ---------------------- */
.projekt-section { margin-top: 10em;}
.big-margin-top {margin-top:10em; }
.small-margin-top {margin-top:5em; }
.align-right { text-align:right;}
/* ---------------- wertschatzung-section ---------------------- */
.wertschatzung-section { margin-top: 10em;}
.wertschatzung-section h1 { color:#e8771c; font-size:6em; font-weight:300; letter-spacing:-2px; line-height:0.8em; text-transform:uppercase; margin-bottom:0.5em; text-align:center; margin-bottom:1.5em;}
.section-situation p { line-height:1.2em;}

/* ---------------- video-section ---------------------- */
.video-container{ position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

/* ---------------- Footer ---------------------- */
footer { background:#000; color:#fff; text-align:center; margin-top:5em;padding-top:5em;padding-bottom:10em;}
.website-info { font-size:1em; margin-top:2em;}
footer a { color:#fff; }
footer a:hover { color:#fff; text-decoration:underline; }


/* ---------------- Other ---------------------- */
.hidden-md-up {display:none;}
.hidden-md-down {display:block;}
.points-list { font-size:1.4em; margin-top:3em; }
#letterpopup .modal-dialog { max-width:600px; margin:0 auto;}
.modal-header { padding: 0px 15px; border-bottom:0px;}


/* ---------------- Responsive ---------------------- */
@media screen and (max-width: 1200px) { h1 { font-size:7em !important; }}
@media screen and (max-width: 992px) { 
	.navbar-custom{ background:#504b18 !important; height:auto;}
	.navbar-brand { width:50%;} 
	.navbar-brand img { width:100%; height:auto;}
	h1 { font-size:6em !important; }
	.navbar-toggler-icon {width:1em; height:1em; background-image: url(../img/menu.svg);}
	.navbar-toggler-icon:focus { outline:none; border:none;}}
@media screen and (max-width: 768px) { 
	h1 { font-size:5em !important; }
	.vertical-navigation {display:none;}
	.header-section .container-fluid {background: rgba(255,255,255,0.5)}
	.hidden-md-up {display:block;}
	.hidden-md-down {display:none;}
	}
@media screen and (max-width: 576px) { h1 { font-size:3.5em !important; line-height:1em;} 
    .das-kunstwerk h1 {margin-top:20px;}}