/* CSS Document */ /* ############################################################## */ /* HTML Standard Tags */ /* ############################################################## */ body, php, html{margin:0; padding:0; height:100%; width:100%; font-family: 'Roboto', sans-serif;} h2{text-align:center; margin: 100px auto 20px auto; font-size:50px} .ud_h2_balken{margin: -10px auto 10px auto; height: 8px; width: 80px} .ud_button{ padding: 10px 30px 10px 30px; display:inline-block; letter-spacing:3px;} a{text-decoration:none} /* ############################################################## */ /* Zusammengefasste Klassen */ /* ############################################################## */ .ud_active{font-weight:bold} /**############*/ /** Fraben*/ /**############*/ /* { background:#141414;} /* dunklegrauer Hintergrund */ #home_Organisationen .ud_h2_balken, footer, #zeltlager_Startseite .ud_h2_balken, #kjg_Aktionen .ud_zelle,#kjg_Aktionen .ud_h2_balken { background:#ffffff;} /* weißer Hintergrund */ /* {background: #000} /*schwarzer Hintergrund*/ #home_Trennstrich,#zeltlager_Trennstrich, #kjg_Trennstrich { background:#0097a1;} /* türkiser Hintergrund */ #home_Organisationen,#kjg_Aktionen { background:#191e22;} /* graublauer Hintergrund */ #home_Trennstrich ul, #kjg_Trennstrich ul , #home_Trennstrich ul li a:Hover, #home_Organisationen, #home_Organisationen a, #kontakt_Kontakt, #kontakt_Kontakt a, #zeltlager_Trennstrich ul li p ,#zeltlager_Trennstrich ul li a:Hover, #zeltlager_Fotos .ud_button, #zeltlager_Fotos h2, #zeltlager_Startseite h2, #zeltlager_Startseite p, #zeltlager_Startseite .ud_button, #zeltlager_Fotos a, header #ud_responsive_icon #icon span, #kjg_Aktionen { color:#ffffff;} /* weiße Schrift */ header, header nav ul li a, footer nav ul li a, #home_Startseite p,header #ud_kontakt_icon .ud_kontakt_icon span,#kjg_Startseite { color:#989898;} /* mausgraue Schrift */ #home_Trennstrich ul li a, #kjg_Trennstrich ul li a, #kjg_Pfarrjugendleitung div a:Hover,#default p a:Hover,#ministranten p a:Hover,#zeltlager_Trennstrich ul li a { color:#005a5f;} /* türkise Schrift */ #kjg_Pfarrjugendleitung div a,#default p a, #ministranten p a {color:#000000;} /* schwarze Schrift */ footer #design,#default h2, #ministranten h2, .idh h3, .idh p { color:#676767;} /* mittelgraue Schrift */ #default h3, ministranten h3, .idh h2 { color:#313131;} /* dunkelgraue Schrift */ header nav ul li a:hover,header #ud_kontakt_icon .ud_kontakt_icon span:hover,#home_Organisationen ul li a:Hover > h3, .ud_active, .ud_kontakt_icon:Hover, #kjg_Aktionen ul li a:Hover,#kjg_Aktionen ul li a:Hover { color:#5b979b;} /* helltürkis Schrift */ header, header #ud_kontakt_icon, header #ud_kontakt_icon .ud_kontakt_icon, header nav ul li a, header nav ul, header #ud_logo, header #ud_kontakt_icon .ud_kontakt_icon span,#home_Trennstrich ul li a:Hover, #zeltlager_Trennstrich ul li a,#kjg_Pfarrjugendleitung #pfarrjugendleitung_Inhalt, #kjg_Aktionen #listeAktionen ul li, #kjg_Aktionen #listeAktionen ul, .ud_aktion_bild, #kjg_Aktionen listeAktionen span,#kjg_Aktionen ul li a, #kjg_Aktionen ul li a img {transition: all 800ms;-moz-transition: all 800ms; -mo-transition: all 800ms; -o-transition: all 800ms; -transition: all 800ms;} /* ############################################################## */ /* Umfassede Objekte & Klasse */ /* ############################################################## */ .ud_page{width: 100%; min-height: 85% ; overflow: hidden; float:left; margin: 0 ; padding: 0} .ud_landing_page{width: 100%; min-height: 95% ; overflow: hidden; float:left; margin: 0 ; padding: 0} /**.ud_page_content{ width: 100%; height: 100%; overflow: Hidden; float: left}*/ /< header{position:fixed; z-index:1000; top:0; left:0; width:100%; height: 40px; border-bottom:none} header #ud_logo {float:left;width: 200px; margin: 4px 0px 0px 20px} header #ud_logo img{width:100%; height: auto} header #ud_kontakt_icon{float: right; width: 72px; height:40px} header #ud_kontakt_icon .ud_kontakt_icon{font-size:12px; width:35px; height:40px; border-left: none;float:left;margin:o; padding:0; cursor: pointer} header #ud_kontakt_icon .ud_kontakt_icon span{display:block; text-align:center; margin: 16px 0px 0px 0px} header nav{float: right; height: 40px; margin:0; padding:0} header nav ul{margin: 12px 8px 0px 0px ; padding: 0; height: 27px} header nav ul li { margin: 0 20px 0 0; padding:0; list-style:none; float:left; height: 100%} header nav ul li a{ text-transform:uppercase; font-size:12px} header #ud_responsive_icon{position: absolute; right:0; height:100%; width:42px; overflow:hidden} header #ud_responsive_icon span{ font-size: 36px;position: absolute; right:0; padding:2px 6px 2px 4px } header #ud_responsive_icon .fa-bars{ top: 0} header #ud_responsive_icon .fa-times{ top: -40px} /** ############## */ /**header:hover{height:70px;} header:hover > #ud_logo{ width:350px; margin: 6px 0 0 20px} header:hover > #ud_kontakt_icon{ width: 122px; height:70px} header:hover > #ud_kontakt_icon .ud_kontakt_icon{width:60px; height:70px; } header:hover > #ud_kontakt_icon .ud_kontakt_icon span{margin: 25px 0px 0px 0px;font-size:16px;} header:hover > nav ul{margin:26px 30px 0 0} header:hover > nav ul li a{font-size:15px;}*/ #ud_aktZela{ position: fixed; left: -400px; top:50%; height:200px; width: 400px ; background: rgba(255,0,3,0.80); color: #fff; transform:translate(0,-50%); z-index: 1000; overflow:hidden; transition: all 800ms} #ud_aktZela #ud_cross{position: absolute ; right: 5px; top: 5px; color: #F97E80; font-size:25px} #ud_aktZela p{width:100%; text-align:center;color: #fff; margin: 25px 0 10px; font-size: 23px; font-weight: 900} #ud_aktZela p span{ text-transform:uppercase; color: #fff; font-size:28px} #ud_aktZela a{width:100%; text-align:center;color: #fff; float: left; margin: 10px 0; font-weight: 600; font-size: 23px; transition: all 1500ms} #ud_aktZela a:hover{ color:#F97E80; } #ud_aktZela #ud_icon{background-image: url(../img/Home/ZeltlagerPiktogramm.svg); width: 0% ; height:0%; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); } /* ############################################################## */ /* Startseite */ /* ############################################################## */ /* ############################################################## */ /* Landingpage Homepage */ /* ############################################################## */ #home_Startseite{text-align:center; font-weight:300;} #home_Startseite div{position: absolute; top:50%; left: 50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);} #home_Startseite div .ud_Piktogramm{position: relative;background-image:url(../img/Home/StJosefPiktogramm.svg);} #home_Startseite p{position: relative; margin: 50px 0 0 0; padding: 0} @media only screen and (max-width: 3500px ) and (min-width: 1500px){ #home_Startseite{font-size: 60px;} #home_Startseite .ud_Piktogramm{height:200px; width: 200px; margin: -200px 0 0 0 } #home_Startseite div p{margin: 30px 0 0 0; padding: 0} } @media only screen and (max-width: 1500px ) and (min-width: 1000px) and (orientation: landscape){ #home_Startseite{font-size: 60px;} #home_Startseite .ud_Piktogramm{height:150px; width: 150px;margin: -150px 0 0 0 } #home_Startseite div p{margin: 30px 0 0 0; padding: 0} } @media only screen and (max-width: 1200px) and (min-width: 500px) and (orientation: portrait){ #home_Startseite{font-size: 40px;} #home_Startseite .ud_Piktogramm{height: 200px; width: 200px;margin: -200px 0 0 0; } #home_Startseite div p{margin: 20px 0 0 0;} } @media only screen and (max-width: 1000px) and (orientation: landscape){ #home_Startseite{font-size: 25px;} #home_Startseite .ud_Piktogramm{height: 80px; width: 80px; margin: -80px 0 0 0 } #home_Startseite div p{margin: 10px 0 0 0;} } @media only screen and (max-width: 500px) and (orientation: portrait){ #home_Startseite{font-size: 30px;} #home_Startseite .ud_Piktogramm{height: 150px; width: 150px;margin: -150px 0 0 0 } #home_Startseite div p{margin: 15px 0 0 0; } } /* ############################################################## */ /* Trennstrich Homepage */ /* ############################################################## */ #home_Trennstrich{ margin: 0; padding: 0;overflow: hidden; float:left;width: 100%; } #home_Trennstrich ul{padding: 0} #home_Trennstrich ul li{ list-style:none; padding: 0} #home_Trennstrich ul li a{border: 4px solid #005a5f; } #home_Trennstrich ul li a:Hover{border:4px solid #000} @media only screen and (max-width: 3500px ) and (min-width: 1500px){ #home_Trennstrich{height: 100px; font-size: 30px} #home_Trennstrich ul{margin:0px 0 0 40px;} #home_Trennstrich ul li:first-child{margin: 2px 120px 0 0} #home_Trennstrich ul li{float: left; margin: 2px 0 0 80px} #home_Trennstrich ul li a{ margin: 16px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1500px ) and (min-width: 1250px){ #home_Trennstrich{height: 100px; font-size: 25px} #home_Trennstrich ul{margin:0px 0 0 40px;} #home_Trennstrich ul li:first-child{margin: 7px 100px 0 0} #home_Trennstrich ul li{float: left; margin: 7px 0 0 60px} #home_Trennstrich ul li a{ margin: 15px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1250px ) and (min-width: 1000px){ #home_Trennstrich{height: 100px; font-size: 20px} #home_Trennstrich ul{margin:0px 0 0 40px;} #home_Trennstrich ul li:first-child{margin: 17px 80px 0 0} #home_Trennstrich ul li{float: left; margin: 17px 0 0 40px} #home_Trennstrich ul li a{ margin: 10px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1250px ) and (min-width: 1000px){ #home_Trennstrich{height: 100px; font-size: 20px} #home_Trennstrich ul{margin:0px 0 0 40px; } #home_Trennstrich ul li:first-child{margin: 17px 80px 0 0} #home_Trennstrich ul li{float: left; margin: 17px 0 0 40px} #home_Trennstrich ul li a{ margin: 10px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1000px ) and (min-width: 700px){ #home_Trennstrich{height: auto ; font-size: 25px} #home_Trennstrich ul{margin:0;text-align:center} #home_Trennstrich ul li:first-child{margin: 0} #home_Trennstrich ul li{width: 100%; float: left; margin: 0} #home_Trennstrich ul li:last-child{margin: 0 0 10px 0} #home_Trennstrich ul li a{ margin: 0 0 10px 0; width: 90px; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 700px ){ #home_Trennstrich{height: auto ; font-size: 20px} #home_Trennstrich ul{margin:0;text-align:center} #home_Trennstrich ul li:first-child{margin: 0} #home_Trennstrich ul li{width: 100%; float: left; margin: 0} #home_Trennstrich ul li:last-child{margin: 0 0 10px 0} #home_Trennstrich ul li a{ margin: 0 0 10px 0; width: 90px; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } /* ############################################################## */ /* Jugendarbeit Homepage*/ /* ############################################################## */ #home_Jugendarbeit{ background-image:url(../img/Home/jugendarbeit2.jpg);background-size: cover;background-position: center center} #home_Jugendarbeit .ud_h2_balken{background: #000000} @media only screen and (max-width: 3500px ) and (min-width: 1500px){ #home_Jugendarbeit .content{width: 50%; margin:40px auto 0 auto; font-size:15px; font-weight: 600; word-spacing: 2px;} #home_Jugendarbeit p{ text-align:center; display: inline-block} } @media only screen and (max-width: 1500px ) and (min-width: 1000px) and (orientation: landscape){ #home_Jugendarbeit h2{font-size: 45px; width: 90%;margin-top: 80px } #home_Jugendarbeit .content{width: 70% ;margin:20px auto 0 auto; font-size:14px; font-weight: 600; word-spacing: 2px;} #home_Jugendarbeit p{ text-align:center; display: inline-block} } @media only screen and (max-width: 1200px) and (min-width: 500px) and (orientation: portrait){ #home_Jugendarbeit h2{ width: 90%; } #home_Jugendarbeit .content{width: 80%;margin:30px auto 0 auto; font-size:14px; font-weight: 600; word-spacing: 2px;} #home_Jugendarbeit p{ text-align:justify; display: inline-block} } @media only screen and (max-width: 1000px) and (orientation: landscape){ #home_Jugendarbeit h2{font-size: 35px; width: 90%; margin-top: 40px} #home_Jugendarbeit .content{width: 80%; margin:10px auto 0 auto; font-size:14px; font-weight: 600; word-spacing: 1px; } #home_Jugendarbeit p{ text-align: center} #home_Jugendarbeit #firstP{display: inline-block} #home_Jugendarbeit #secondP{display: none} #home_Jugendarbeit #thirdP{display: none} } @media only screen and (max-width: 500px) and (orientation: portrait){ #home_Jugendarbeit h2{font-size:30px; width: 90%; margin-top: 80px} #home_Jugendarbeit .content{width: 80%; margin:35px auto 0 auto; font-size:14px; font-weight: 600; word-spacing: 1px; } #home_Jugendarbeit p{ text-align: justify} #home_Jugendarbeit #firstP{display: inline-block} #home_Jugendarbeit #secondP{display: none} #home_Jugendarbeit #thirdP{display: none} } /* ############################################################## */ /* Organisationen Homepage*/ /* ############################################################## */ #home_Organisationen .u_content{padding: 0} #home_Organisationen .ud_einleitung{margin:0 auto ;} #home_Organisationen ul{padding: 0;height: 100% } #home_Organisationen ul li{float: left; list-style:none; width: 30%;margin: 0 5% 0 0; height : 300px; text-align:center} #home_Organisationen ul li .ud_Piktogramm1{background-image: url(../img/Home/GruppenstundenPiktogramm3.svg); margin: 0 auto 0 auto;} #home_Organisationen ul li .ud_Piktogramm2{background-image: url(../img/Home/ZeltlagerPiktogramm.svg); margin: 0 auto 0 auto } #home_Organisationen ul li .ud_Piktogramm3{background-image: url(../img/Home/MinistrantenPiktogramm.svg); margin: 0 auto 0 auto} #home_Organisationen ul li p{font-size: 14px} @media only screen and (min-width: 1000px){ #home_Organisationen h2{width: 90%;} #home_Organisationen .ud_content{width:90%; height: 90%; margin: 80px auto 0 auto ;} #home_Organisationen ul{margin: 120px 0 0 0 ; width: 100%;} #home_Organisationen ul li{width: 30%;margin: 0 5% 30px 0; height : auto; text-align:center} #home_Organisationen ul li .ud_Piktogramm1{height: 120px; width: 120px; } #home_Organisationen ul li .ud_Piktogramm2{height: 120px; width: 120px; } #home_Organisationen ul li .ud_Piktogramm3{height: 120px; width: 120px;} #home_Organisationen ul li:last-child{margin: 0 0 30px 0} #home_Organisationen ul li h3{font-size:24px;} } @media only screen and (min-width: 500px) and (max-width: 1000px) and (orientation: portrait){ #home_Organisationen h2{width: 90%;} #home_Organisationen .ud_content{width:90%; height: 90%; margin: 80px auto 0 auto ;} #home_Organisationen ul{margin: 120px 0 0 0 ; width: 100%; } #home_Organisationen ul li{width: 30%;margin: 0 5% 30px 0; height : auto; text-align:center} #home_Organisationen ul li .ud_Piktogramm1{height: 120px; width: 120px; } #home_Organisationen ul li .ud_Piktogramm2{height: 120px; width: 120px; } #home_Organisationen ul li .ud_Piktogramm3{height: 120px; width: 120px; } #home_Organisationen ul li:last-child{margin: 0 0 30px 0} #home_Organisationen ul li h3{font-size:24px;} } @media only screen and (max-width: 1000px) and (orientation: landscape){ #home_Organisationen h2{font-size: 35px; width: 90%; margin-top: 40px} #home_Organisationen .ud_content{width:100%; height: 90%; margin: 60px 0 0 0} #home_Organisationen ul{width: 80%; margin:40px auto 0 auto; } #home_Organisationen ul li{width: 100%;margin: 0 auto 0 auto; height : 250px; text-align:justify} #home_Organisationen ul li .ud_Piktogramm1{height: 80px; width: 80px; } #home_Organisationen ul li .ud_Piktogramm2{height: 80px; width: 80px; } #home_Organisationen ul li .ud_Piktogramm3{height: 80px; width: 80px; } #home_Organisationen ul li:last-child{margin: 0 auto 0 auto;} #home_Organisationen ul li h3{font-size:18px; text-align: center} } @media only screen and (max-width: 500px) and (orientation: portrait){ #home_Organisationen h2{font-size:30px; width: 90%; margin-top: 80px} #home_Organisationen .ud_content{width:100%; height: 90%; margin: 60px 0 0 0} #home_Organisationen ul{width: 80%; margin:40px auto 0 auto; } #home_Organisationen ul li{width: 100%;margin: 0 auto 0 auto; height : 250px; text-align:justify} #home_Organisationen ul li .ud_Piktogramm1{height: 80px; width: 80px; } #home_Organisationen ul li .ud_Piktogramm2{height: 80px; width: 80px; } #home_Organisationen ul li .ud_Piktogramm3{height: 80px; width: 80px; } #home_Organisationen ul li:last-child{margin: 0 auto 0 auto;} #home_Organisationen ul li h3{font-size:18px; text-align: center} } /* ############################################################## */ /* KJG */ /* ############################################################## */ /* ############################################################## */ /* Landingpage KJG */ /* ############################################################## */ #kjg_Startseite{text-align:center; font-weight:300;height: auto; } #kjg_Startseite .ud_Piktogramm{margin: 0 auto 0; position: relative;background-image:url(../img/KjG/Seelenbohrer2.svg);} #kjg_Startseite .ud_h2_balken{background-color: #989898} #kjg_Startseite p{position: relative; margin: 50px 0 0 0; padding: 0} @media only screen and (min-width: 1500px){ #kjg_Startseite .content{width: 50%; margin: 0 auto 100px;} #kjg_Startseite{font-size: 60px;} #kjg_Startseite .ud_Piktogramm{height:200px; width: 200px;} #kjg_Startseite p{margin: 30px 0 0 0;font-size: 15px} } @media only screen and (max-width: 1500px ) and (min-width: 1000px) and (orientation: landscape){ #kjg_Startseite{font-size: 60px;} #kjg_Startseite .ud_Piktogramm{height:150px; width: 150px;} #kjg_Startseite div p{margin: 30px 0 0 0; } } @media only screen and (max-width: 1500px) and (min-width: 500px) and (orientation: portrait){ #kjg_Startseite{font-size: 40px;} #kjg_Startseite .ud_Piktogramm{height: 200px; width: 200px;} #kjg_Startseite div p{margin: 20px 0 0 0;} } @media only screen and (max-width: 1000px) and (orientation: landscape){ #kjg_Startseite{font-size: 25px;} #kjg_Startseite .ud_Piktogramm{height: 80px; width: 80px; } #kjg_Startseite div p{margin: 10px 0 0 0;} } @media only screen and (max-width: 500px) and (orientation: portrait){ #kjg_Startseite{font-size: 30px;} #kjg_Startseite .ud_Piktogramm{height: 150px; width: 150px; } #kjg_Startseite div p{margin: 15px 0 0 0; } } /* ############################################################## */ /* Trennstrich KJG */ /* ############################################################## */ #kjg_Trennstrich{ margin: 0; padding: 0;overflow: hidden; float:left;width: 100%; } #kjg_Trennstrich ul{padding: 0} #kjg_Trennstrich ul li{ list-style:none; padding: 0} #kjg_Trennstrich ul li a{border: 4px solid #005a5f; } #kjg_Trennstrich ul li a:Hover{color: #00383B} #kjg_Trennstrich ul li a:Hover{border:4px solid #004145} @media only screen and (max-width: 3500px ) and (min-width: 1500px){ #kjg_Trennstrich{height: 100px; font-size: 30px} #kjg_Trennstrich ul{margin:0px 0 0 40px;} #kjg_Trennstrich ul li:first-child{margin: 2px 120px 0 0} #kjg_Trennstrich ul li{float: left; margin: 2px 0 0 80px} #kjg_Trennstrich ul li a{ margin: 16px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1500px ) and (min-width: 1250px){ #kjg_Trennstrich{height: 100px; font-size: 25px} #kjg_Trennstrich ul{margin:0px 0 0 40px;} #kjg_Trennstrich ul li:first-child{margin: 7px 100px 0 0} #kjg_Trennstrich ul li{float: left; margin: 7px 0 0 60px} #kjg_Trennstrich ul li a{ margin: 15px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1250px ) and (min-width: 1000px){ #kjg_Trennstrich{height: 100px; font-size: 20px} #kjg_Trennstrich ul{margin:0px 0 0 40px;} #kjg_Trennstrich ul li:first-child{margin: 17px 80px 0 0} #kjg_Trennstrich ul li{float: left; margin: 17px 0 0 40px} #kjg_Trennstrich ul li a{ margin: 10px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1250px ) and (min-width: 1000px){ #kjg_Trennstrich{height: 100px; font-size: 20px} #kjg_Trennstrich ul{margin:0px 0 0 40px; } #kjg_Trennstrich ul li:first-child{margin: 17px 80px 0 0} #kjg_Trennstrich ul li{float: left; margin: 17px 0 0 40px} #kjg_Trennstrich ul li a{ margin: 10px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1000px ) and (min-width: 700px){ #kjg_Trennstrich{height: auto ; font-size: 25px} #kjg_Trennstrich ul{margin:0;text-align:center} #kjg_Trennstrich ul li:first-child{margin: 0} #kjg_Trennstrich ul li{width: 100%; float: left; margin: 0} #kjg_Trennstrich ul li:last-child{margin: 0 0 10px 0} #kjg_Trennstrich ul li a{ margin: 0 0 10px 0; width: 90px; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 700px ){ #kjg_Trennstrich{height: auto ; font-size: 20px} #kjg_Trennstrich ul{margin:0;text-align:center} #kjg_Trennstrich ul li:first-child{margin: 0} #kjg_Trennstrich ul li{width: 100%; float: left; margin: 0} #kjg_Trennstrich ul li:last-child{margin: 0 0 10px 0} #kjg_Trennstrich ul li a{ margin: 0 0 10px 0; width: 90px; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } /* ############################################################## */ /* Aktion KJG */ /* ############################################################## */ #kjg_Aktionen{min-height: 80%;} #kjg_Aktionen .ud_h2_balken{margin: 18px auto 20px auto;} #kjg_Aktionen ul {margin:0; padding: 0} #kjg_Aktionen ul li{width: 25%; float: left; margin: 50px 0 ; padding: 0; list-style:none} #kjg_Aktionen ul li a {width: 100%; display: inline-block; text-align: center; font-size: 18px; color: #FFFFFF; } #kjg_Aktionen ul li a .ud_HO{opacity: 0; margin-top:-50% } #kjg_Aktionen ul li a img{width: 50%; display: block; margin:0px auto} #kjg_Aktionen p{margin:80px 0 40px 0; text-align: center; font-size: 18px} #kjg_Aktionen ul li a:Hover > .ud_HO{opacity: 1} #kjg_Aktionen ul li a:Hover > .ud_NO{opacity: 0} @media only screen and (max-width: 1500px ) and (min-width: 1000px) and (orientation: landscape){ #kjg_Aktionen h2{font-size: 50px; margin-top: 80px} #kjg_Aktionen p{margin:60px 5% 30px 5%; width: 90%} #kjg_Aktionen ul li{margin: 15px 0 35px 0} } @media only screen and (max-width: 1200px) and (min-width: 500px) and (orientation: portrait){ #kjg_Aktionen h2{font-size: 50px;} #kjg_Aktionen ul li a img{width: 40%} #kjg_Aktionen ul li a .ud_HO{ margin-top:-40% } #kjg_Aktionen p{margin:60px 5% 30px 5%; width: 90%} #kjg_Aktionen ul li{width: 50%;margin:10px 0 30px 0 } } @media only screen and (max-width: 1000px) and (orientation: landscape){ #kjg_Aktionen h2{font-size: 30px;} #kjg_Aktionen p{margin:80px 5% 40px 5%; text-align: center; font-size: 16px; width: 90%} #kjg_Aktionen ul li a img{width: 40%} #kjg_Aktionen ul li a .ud_HO{ margin-top:-40% } #kjg_Aktionen ul li{width: 50%;margin:20px 0} } @media only screen and (max-width: 500px) and (orientation: portrait){ #kjg_Aktionen h2{font-size: 30px;} #kjg_Aktionen p{margin:80px 5% 40px 5%; text-align: justify; font-size: 16px; width: 90%} #kjg_Aktionen ul li a img{width: 35%} #kjg_Aktionen ul li a .ud_HO{ margin-top:-35% } #kjg_Aktionen ul li{width: 100%;margin:20px 0} } /* ############################################################## */ /* Pfarrjugendleitung KJG */ /* ############################################################## */ #kjg_Pfarrjugendleitung{min-height:0%} #kjg_Pfarrjugendleitung div .ud_h2_balken{margin: -10px auto 20px auto;background: #000000} #kjg_Pfarrjugendleitung .content{text-align:center; background-image:url(../img/KjG/Pfarrjugendleitung2.jpg);background-size: cover;background-position: center center; margin: 0 auto 0 auto} #kjg_Pfarrjugendleitung div a{margin: 30px 0 0 0; font-size: 18px; font-weight:300; display:inline-block} @media only screen and (max-width: 1500px ) and (min-width: 1000px) and (orientation: landscape){ #kjg_Pfarrjugendleitung h2{font-size: 45px; width: 90%;margin-top: 80px } } @media only screen and (max-width: 1200px) and (min-width: 500px) and (orientation: portrait){ #kjg_Pfarrjugendleitung h2{ width: 90%; } } @media only screen and (max-width: 1000px) and (orientation: landscape){ #kjg_Pfarrjugendleitung h2{font-size: 35px; width: 90%; margin-top: 40px} #kjg_Pfarrjugendleitung div a{margin:0; font-size: 14px} } @media only screen and (max-width: 500px) and (orientation: portrait){ #kjg_Pfarrjugendleitung h2{font-size:30px; width: 90%; margin-top: 80px} #kjg_Pfarrjugendleitung div a{margin:0; font-size: 12px} } /* ############################################################## */ /* Zeltlager*/ /* ############################################################## */ /* ############################################################## */ /* Landingpage Zeltlager */ /* ############################################################## */ #zeltlager_Startseite{height: 95%; background-image:url(../img/Zeltlager/Startseite3.jpg); background-position: center center; background-size: cover;} #zeltlager_Startseite #content {width: 100%; height: 100%} #zeltlager_Startseite div h2{ text-align:left; margin: 100px 0 0 50px; font-size:80px; line-height:80px} #zeltlager_Startseite div .ud_h2_balken{margin: 18px 0 20px 50px ;} #zeltlager_Startseite div p{margin: 18px 0 20px 50px; max-width: 700px; font-weight: 300; line-height: 25px; word-spacing: 2px} #zeltlager_Startseite div .ud_button{border: 2px solid #ffffff; margin:18px 0 20px 50px} #zeltlager_Startseite div .ud_button:Hover{border: 4px solid #ffffff; margin:16px 0 20px 48px; font-weight:bold} @media only screen and (max-width: 1300px){ #zeltlager_Startseite {background-image:url(../img/Zeltlager/Startseite.jpg)} #zeltlager_Startseite #box{width: 80%; height: 80%; margin: 0; position: relative; left:50%; top: 50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.7)} #zeltlager_Startseite div #content{width: 100%; height: auto; margin: 0; position: relative; left:50%; top: 50%; transform:translate(-50%,-50%);} #zeltlager_Startseite div div h2{display:inline-block} } @media only screen and (max-width: 1300px ) and (min-width: 1000px) and (orientation: landscape){ #zeltlager_Startseite #box{height: auto;} #zeltlager_Startseite div #content{ left: 0; right: 0; transform:none;} #zeltlager_Startseite div h2{font-size:50px; width: 100%; text-align:center; margin: 20px 0 0 0; line-height: normal} #zeltlager_Startseite div .ud_h2_balken{margin:18px auto;} #zeltlager_Startseite div p{margin: 20px 0; width: 70%;position: relative; left: 50%; transform:translateX(-50%); text-align: justify; line-height: 20px; word-spacing: 1px;} #zeltlager_Startseite div .ud_button{margin: 20px 0; position: relative; left: 50%; transform:translateX(-50%);} #zeltlager_Startseite div .ud_button:Hover{margin:18px 0} } @media only screen and (max-width: 1300px) and (min-width: 500px) and (orientation: portrait){ #zeltlager_Startseite #box{height: auto;} #zeltlager_Startseite div #content{ left: 0; right: 0; transform:none;} #zeltlager_Startseite div h2{font-size:50px; width: 100%; text-align:center; margin: 20px 0 0 0; line-height: normal} #zeltlager_Startseite div .ud_h2_balken{margin:18px auto;} #zeltlager_Startseite div p{margin: 20px 5%; width: 90%; text-align: justify; line-height: 20px; word-spacing: 1px;} #zeltlager_Startseite div .ud_button{margin: 20px 0; position: relative; left: 50%; transform:translateX(-50%);} #zeltlager_Startseite div .ud_button:Hover{margin:18px 0} } @media only screen and (max-width: 1000px) and (orientation: landscape){ #zeltlager_Startseite div h2{font-size:25px; width: 100%; text-align:center; margin: 0; line-height: normal} #zeltlager_Startseite div .ud_h2_balken{margin:8px auto;} #zeltlager_Startseite div p{margin: 0 5%; width: 90%; text-align: justify; line-height: 20px; word-spacing: 1px;} #zeltlager_Startseite div .ud_button{margin: 8px 0 0; position: relative; left: 50%; transform:translateX(-50%); padding: 5px 30px} #zeltlager_Startseite div .ud_button:Hover{margin: 6px 0 0} } @media only screen and (max-width: 500px) and (orientation: landscape){ #zeltlager_Startseite div div p{font-size: 14px; line-height: 16px;} } @media only screen and (max-width: 500px) and (orientation: portrait){ #zeltlager_Startseite div div h2{font-size:30px; width: 100%; text-align:center; margin: 0; line-height: normal} #zeltlager_Startseite div div .ud_h2_balken{margin:18px auto;} #zeltlager_Startseite div div p{margin: 0 5%; width: 90%; text-align: justify; line-height: 20px; word-spacing: 1px} #zeltlager_Startseite div div .ud_button{margin: 18px 0 0; position: relative; left: 50%; transform:translateX(-50%)} #zeltlager_Startseite div .ud_button:Hover{margin: 16px 0 0;} } /* ############################################################## */ /* Trennstrich Zeltlager */ /* ############################################################## */ /**#zeltlager_Trennstrich{ margin: 0; padding: 0;height: 100px;overflow: hidden; float:left;width: 100%; font-size: 30px; } #zeltlager_Trennstrich ul{margin:0px 0 0 40px; padding: 0} #zeltlager_Trennstrich ul li:first-child{margin-right: 180px} #zeltlager_Trennstrich ul li{float: left;list-style:none; margin: 2px 80px 0 0px; padding: 0} #zeltlager_Trennstrich ul li:last-child{margin-right: 0} #zeltlager_Trennstrich ul li a{border: 4px solid #005a5f; margin: 16px 0 0 0; font-weight: 600;letter-spacing:2px;font-size: 32px;padding: 7px 30px 7px 30px; border-radius:8px} #zeltlager_Trennstrich ul li a:Hover{border:4px solid #FFFFFF}*/ #zeltlager_Trennstrich{ height: 100px;margin: 0; padding: 0;overflow: hidden; float:left;width: 100%; } #zeltlager_Trennstrich ul{padding: 0} #zeltlager_Trennstrich ul li{ list-style:none; padding: 0} #zeltlager_Trennstrich ul li a{border: 4px solid #005a5f; } #zeltlager_Trennstrich ul li a:Hover{border:4px solid #FFFFFF} @media only screen and (max-width: 3500px ) and (min-width: 1600px){ #zeltlager_Trennstrich{ font-size: 30px} #zeltlager_Trennstrich ul{margin:0px 0 0 40px;} #zeltlager_Trennstrich ul li:first-child{margin: 2px 120px 0 0} #zeltlager_Trennstrich ul li{float: left; margin: 2px 0 0 80px} #zeltlager_Trennstrich ul li a{ margin: 16px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1600px ) and (min-width: 1350px){ #zeltlager_Trennstrich{ font-size: 25px} #zeltlager_Trennstrich ul{margin:0px 0 0 40px;} #zeltlager_Trennstrich ul li:first-child{margin: 7px 100px 0 0} #zeltlager_Trennstrich ul li{float: left; margin: 7px 0 0 60px} #zeltlager_Trennstrich ul li a{ margin: 15px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1350px ) and (min-width: 1100px){ #zeltlager_Trennstrich{ font-size: 20px} #zeltlager_Trennstrich ul{margin:0px 0 0 40px;} #zeltlager_Trennstrich ul li:first-child{margin: 17px 80px 0 0} #zeltlager_Trennstrich ul li{float: left; margin: 17px 0 0 40px} #zeltlager_Trennstrich ul li a{ margin: 10px 0 0 0; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 1100px ) and (min-width: 800px){ #zeltlager_Trennstrich{height: auto ; font-size: 25px} #zeltlager_Trennstrich ul{margin:0;text-align:center} #zeltlager_Trennstrich ul li:first-child{margin: 0} #zeltlager_Trennstrich ul li{width: 100%; float: left; margin: 0} #zeltlager_Trennstrich ul li:last-child{margin: 0 0 10px 0} #zeltlager_Trennstrich ul li a{ margin: 0 0 10px 0; width: 190px; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } @media only screen and (max-width: 800px ){ #zeltlager_Trennstrich{height: auto ; font-size: 20px} #zeltlager_Trennstrich ul{margin:0;text-align:center} #zeltlager_Trennstrich ul li:first-child{margin: 0} #zeltlager_Trennstrich ul li{width: 100%; float: left; margin: 0} #zeltlager_Trennstrich ul li:last-child{margin: 0 0 10px 0} #zeltlager_Trennstrich ul li a{ margin: 0 0 10px 0; width: 160px; font-weight: 600;letter-spacing:2px;padding: 7px 30px 7px 30px; border-radius:8px} } /* ############################################################## */ /* Fotos Zeltlager */ /* ############################################################## */ #zeltlager_Fotos{height: 100%; width:100%; position:relative} #zeltlager_Fotos #album{ position: relative;left: 50%; top: 50%;transform:translate(-50%,-50%) } #zeltlager_Fotos #album div{ position: absolute; cursor:pointer; overflow:hidden} #zeltlager_Fotos #album div .layer{position: absolute ; height: 0 ; width: 0; left: 0 ; top: 100%; background-color:rgba(0,151,161,0.35);opacity: 1; border-top-right-radius: 100%; transform: translateY(-100%)} #zeltlager_Fotos #album div .HO{position: relative;left: 50%; top: 50%; opacity:0; color: #FFFFFF; text-align:center; transform: translate(-50%,-50%); font-size:16px} #zeltlager_Fotos #album div .HO a span{color: rgba(0,239,255,1.00); font-weight:900; font-size: 20px} #zeltlager_Fotos #album div .HO a:hover{color: rgba(0,239,255,1.00)} #zeltlager_Fotos #album #k1{ background: url(../img/Zeltlager/Bild7.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k2{ background: url(../img/Zeltlager/Bild12.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k3{ background: url(../img/Zeltlager/Bild9.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k4{ background: url(../img/Zeltlager/Bild3.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k5{ background: url(../img/Zeltlager/Bild5.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k6{ background: url(../img/Zeltlager/Bild11.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k7{ background: url(../img/Zeltlager/Bild2.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k8 {background: #191e22} #zeltlager_Fotos #album #k8 .text{height: auto; width: auto; color:#FFFFFF; text-align:center; font-size: 60px; position: relative; left: 50% ; top: 50%; opacity:1; transform: translate(-50%,-50%)} #zeltlager_Fotos #album #k9{ background: url(../img/Zeltlager/Bild6.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k10{ background: url(../img/Zeltlager/Bild1.jpg);background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k11{ background: url(../img/Zeltlager/Bild8.jpg); background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k12{ background: url(../img/Zeltlager/Bild4.jpg); background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k13{ background: url(../img/Zeltlager/Bild13.jpg); background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k14{ background: url(../img/Zeltlager/Bild10.jpg); background-size: cover;background-position: center center;} #zeltlager_Fotos #album #k15{ background: url(../img/Zeltlager/Bild14.jpg); background-size: cover;background-position: center center;} /* ############################################################## */ /* Ministranten*/ /* ############################################################## */ #ministranten h2{font-size: 40px; text-align:left; margin: 150px 0 0 100px} #ministranten h3{font-size: 25px; margin: 50px 0 0 100px} #ministranten p{font-size: 18px; margin: 30px 0 30px 100px} #ministranten p a{text-decoration:underline; font-weight:600} /* ############################################################## */ /* verzögerung*/ /* ############################################################## */ #verzögerung h2{font-size: 40px; text-align:left; margin: 150px 0 0 100px} #verzögerung h3{font-size: 25px; margin: 50px 0 0 100px} #verzögerung p{font-size: 18px; margin: 30px 0 30px 100px} #verzögerung p a{text-decoration:underline; font-weight:600} /* ############################################################## */ /* Kontakt*/ /* ############################################################## */ /* ############################################################## */ /* Landingpage kontakt */ /* ############################################################## */ #kontakt_Kontakt{ background-image:url(../img/Kontakt/Kontakt.jpg);background-size: cover;background-position: center center} #kontakt_Kontakt .ud_h2_balken{background: #ffffff} #kontakt_Kontakt ul{width: 50%; left:50%; top: 50% ; transform:translate(-50%,-50%); position: absolute;list-style:none ; text-align:center; font-size:25px; font-weight: 600; word-spacing: 2px; line-height: 40px} /* ############################################################## */ /* Default*/ /* ############################################################## */ @media only screen and (min-width: 750px) { #default h2{font-size: 40px; text-align:left; margin: 150px 0 0 100px} #default h3{font-size: 25px; margin: 50px 0 0 100px} #default ul{font-size: 18px; margin: 10px 0 0 100px} #default p{font-size: 18px; margin: 30px 0 30px 100px} #default p a{text-decoration:underline; font-weight:600} } @media only screen and (max-width: 750px) { #default h2{font-size: 25px; text-align:left; margin: 100px 0 0 50px} #default h3{font-size: 20px; margin: 30px 0 0 50px} #default ul{font-size: 17px; margin: 10px 0 0 50px} #default p{font-size: 17px; margin: 30px 0 30px 50px} #default p a{text-decoration:underline; font-weight:600} } /* ############################################################## */ /* Impressum, Datenschutz und Haftungsausschluss*/ /* ############################################################## */ .idh{width :60%; margin: 0 20%; text-align: justify} .idh .ud_h2_balken{background: #313131} /* ############################################################## */ /* Footer */ /* ############################################################## */ footer{height: 150px;width: 100%;float: left; overflow: hidden; padding: 20px 0 20px 0; text-align: center;font-size: 10px} footer #ud_logo { width: 500px; margin: 10px auto 0px auto} footer #ud_logo img{width:100%; height: auto} footer #ud_meta_nav{margin: 20px 0 0 0} footer nav ul{margin: 0; padding:0 } footer nav ul li{margin: 0;padding: 0 10px 0 10px ;list-style: none; display: inline; border-right: 1px solid #989898} footer nav ul li:last-child{border: none} footer #design{font-size:12px; margin: 20px 0 0 0 } @media only screen and (max-width: 700px){ footer #ud_logo { width: 300px; margin: 10px auto 0px auto} footer nav ul li{margin: 0;border-right:none; padding: 0; display: block} }