/* cmsms stylesheet: at38-css modified: Freitag, 26. Juli 2024 09:08:59 */
@import url("/fonts/font.css");
@font-face {
    font-family: 'nerea';
    src: url('/fonts/nerea_free_font-webfont.woff2') format('woff2'),
         url('/fonts/nerea_free_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('/fonts/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'xanh';
    src: url('/fonts/xanhmono-italic-webfont.woff2') format('woff2'),
         url('/fonts/xanhmono-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}




@font-face {
    font-family: 'xanh';
    src: url('/fonts/xanhmono-regular-webfont.woff2') format('woff2'),
         url('/fonts/xanhmono-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
margin : 0;
padding : 0;
}
html, body {
font-family : 'Poppins';
line-height : 150%;
letter-spacing: 1px;
color : #474646;
background: #fff url(https://www.atelier38-sued.de/uploads/images/back.jpg) repeat-y;
background-size: 100%;
font-size : 95%;
width : 100%;
position : relative;
text-align: center;
height: 100%;
}
@media screen {
#menu-mob, .mob {
display : none;
}
}
.col-back {
position: relative;
width: 100%;
height: 100%;
background: url(https://www.atelier38-sued.de/uploads/images/col-back.png) repeat-y;
background-size: 100%;
padding: 0;
margin: 0;
}
.col-l {
width: 7em;
position: fixed;
left: 3em;
height: 100%;
opacity: 0.4;
}
.col-r {
width: 7em;
position: fixed;
right: 3em;
height: 100%;
padding: 0;
margin: 0;
opacity: 0.4;
}
.col-l img, .col-r img {
width: 100%;
height: auto;
display: block;
}
.s-bot {position: absolute;
bottom: 0;}
#headcenter {
width : 100%;
max-width : 1280px;
text-align: center;
}
.col {
columns: 3; Column-gap: 4%;}
.col h3 {
font-size: 100% !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
header {
width : 100%;
top : 0;
z-index : 151;
text-align: center;
display : flex;
flex-wrap : wrap;
justify-content : center;
}
#logo {
position: relative;
top: 2em !important;
font-size: 220%;
line-height: 0;
padding: 0.9em 0.7em 0.9em 0.7em;
display: inline;
font-family: 'Palatino';
background: rgba(249,225,24,0.2) url(https://www.atelier38-sued.de/uploads/images/rahmen.png) no-repeat;
background-size: 100% auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px -1px 11px 0px rgba(50, 50, 50, 0.1);
-moz-box-shadow:    0px -1px 11px 0px rgba(50, 50, 50, 0.1);
box-shadow:         0px -1px 11px 0px rgba(50, 50, 50, 0.1);
}
#logo a {
color: grey;
padding: 0.6em;
}
.head {position: relative; top : 8em; left: 0;}
.sticky {
width: 100%;
position: fixed;
top: 0 !important;
z-index: 1000;
background-image:linear-gradient(to right,rgba(255,255,255,0) 22%, rgba(242,243,244,0.9) 28%, rgba(242,243,244,0.9) 72%, rgba(255,255,255,0) 76%);
}
.sticky + #content {
padding-top: 8em;
}
a {
color: #b6a933;
text-decoration: none;}
#menu, .sub {
position: relative;
left : 0;
display : flex;
flex-wrap : wrap;
justify-content : center;
text-align: center;
}
#menu ul, .sub ul {
list-style-type : none;
float : left;
position: relative;
}
#menu li, .sub li {
float : left;
margin-right : 0.3em;
position: relative;
}
#menu a, .sub a {
color : grey;
display : block;
padding : 0 0.3em 0 0.3em;
display: block;
text-transform: uppercase;
}
#menu a.currentpage, #menu a:hover, #menu a.activeparent, .sub a:hover, .sub a.currentpage {
color: #b6a933;
}
#menu li ul {
float: left;
position:  absolute;
background: rgba(244,239,200,0.9);
width: 30em;
margin: 0;
border: 2px solid grey;
overflow: hidden;
transition: background 1s ease;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
z-index: 1000;
border-radius: 8px;
padding: 1em;
}
#menu li ul li /* second-level lists */
{
float: left !important;
right: 0 !important;
margin: 0.2em;
}
#menu li ul li a {
display:block;
font-size: 90%;
}
#menu li ul  a:hover {
background;: #d0d2d4 !important;
}
#menu li ul  a.activeparent {
color: #b81824;
background:  none;
}
#menu li ul  a.activeparent:hover {
color: #b81824;
background:  none;
}
#menu li ul  a.currentpage {
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul
        {
        left: -999em;
        }
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul /* lists nested under hovered list items */
        {
        left: auto;

        }
.sub {padding-left: 0 !important;}
.sub ul { width: 100%; display : flex;
flex-wrap : wrap;
justify-content : center;
 text-align: center !important; background: none !important;}
.sub ul {top: 0;}
.biglink {margin-top: 0.8em; display: block;}
iframe {
width: 100%;
height: 300px;
border: none;
}
h1, h2 {
font-size: 200%;
line-height: 170%;
text-align: center;
font-weight: normal;
float: none;
width: 100%;
padding: 1em 0 1em 0;
margin-bottom: 1.25em;
font-family: 'Palatino';
background: url(https://www.atelier38-sued.de/uploads/images/underline.png) no-repeat bottom;
background-size: 40% auto;
color: grey;
}
.center {
position: relative !important;
width: 70% !important;
max-width: 1200px;
text-align: center;
margin-bottom:3em;
margin: 0 auto;
}
.minipic {
text-align: center !important;
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
width: 30% !important;
}
.minipic img {
width: 100%;
height: auto;
border: 8px solid transparent;
border-radius: 8px;
border: 2px solid #c7bb51;
padding: 2px;
}
.txt {
text-align: left;
}

.blogpost {
text-align: left;
padding: 0;
width: 72%;
margin-bottom: 1em;
text-transform: none;
}
.blogpost h2 {
display: block;
text-align: left;
width: auto;
padding: 0 !important; 
margin-bottom: 0 !important; 
background: none;
font-size: 160%;
}
.sorry { font-size: 130%;}
.over {
position: absolute;
bottom: 0.5em;
left: 0.5em;
color: rgba(255,255,255,7);
}
.search-button, select, input {
appearance : none;
border : none;
height : 2.5em;
font-size : 105%;
padding : 0.3em;
border: 1px solid #c7bb51;
font-family : 'Poppins';
background: rgba(249,225,24,0.2);
background-size: 100% auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 1em;
}
select {margin-bottom: 1em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
input {width: 100%}
.cms_submit {
margin-top: 1em;
width: 70%;
}
.search-button {width: 6em;}
.links {
float : left;
width : 31%;
text-align: center;
}
.rechts {
float : right;
width : 60%;
margin-left : 1em;
}
.links img, .rechts img {
width : 100%;
height : auto;
display : block;
margin-left : auto;
margin-right : auto;
}
.thinline {
border: 1px solid #c7bb51;
padding: 2px;
border-radius: 8px;
-webkit-box-shadow: 0px -1px 11px 0px rgba(50, 50, 50, 0.1);
-moz-box-shadow:    0px -1px 11px 0px rgba(50, 50, 50, 0.1);
box-shadow:         0px -1px 11px 0px rgba(50, 50, 50, 0.1);
}
.border, .info>div, .box {
background:  rgba(255,255,255,0.4) url(https://www.atelier38-sued.de/uploads/images/schnoe-li.png) no-repeat -3px -3px;
background-size: 2.4em auto;
padding: 3em;
border: 3px solid #c7bb51;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
h3 {
font-size: 145%;
margin: 1em 0 0.5em 0;
font-weight: normal;
color: grey;
}
.box h2 {
border: none;
text-align: left;
padding: 0 0 0 0 !important; 
margin-bottom: 0 !important; 
background: none !important;
text-transform: none; }
#content {
margin: 0 auto;
text-align: left;
width : 95%;
max-width: 1400px;
margin-bottom: 2em;
padding-top: 8em;
padding-bottom: 1em;
min-height: 100%;
}
#content ul {margin: 0.7em 0 0.7em 1em;}
#content img {width: 100%; height: auto;}
.or2 {
top: 1em;}
.order {top: 0.5em;}
.pic {
position : relative;
display : block;
float : left;
width : 22%;
margin : 0 2% 2% 0;
overflow: hidden;
height: 130px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-radius: 8px;
border: 2px solid #c7bb51;
-webkit-box-shadow: 0px -1px 11px 0px rgba(50, 50, 50, 0.1);
-moz-box-shadow:    0px -1px 11px 0px rgba(50, 50, 50, 0.1);
box-shadow:         0px -1px 11px 0px rgba(50, 50, 50, 0.1);
}
.pic img {
width: 110% !important;
 position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.pic img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
.boxcl { 
font-size: 175%;
cursor: pointer; 
position: absolute !important;  
right: 0.5em; 
bottom: 0.5em;
}
.thumb {
float: left;
width : 100% !important ;
}
#thumblist, .gallery {
padding : 0;
display : flex;
flex-wrap : wrap;
justify-content : center;
z-index: 1000;
min-height: 100%;
width: 100%;
z-index: 10;
text-align: center;
}
.description {
text-decoration : none;
width : 100%;
height: 100%;
}
.description ul {
margin-bottom : 1em !important ;
}
.desbg {
float : none;
width : 100% !important ;
}
.closeall {
position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: 9 !important;
}
.lightbox2 {
position: fixed;
background-color: rgba(37, 34, 38, 0.9);
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
min-height: 100%;
height: 100%;
z-index: 2001;
opacity: 0;
overflow-y: scroll;
pointer-events: none;
text-align : center !important;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
-ms-overflow-style: none;
scrollbar-width: none;
}
.lightbox2::-webkit-scrollbar {
 display: none;
}
.lightbox2 img {
margin-top : 2em;
}
.big {
position: relative;
display: inline-block;
max-width: 1200px;
text-align: center !important;
margin-top: 7.5em;
animation-duration : 1s;
animation-name : slidein;
z-index: 100;
}
.big img {
max-height: 550px; width: auto !important; max-width: 800px;}
.imgnav {
position : absolute;
left : 50%;
top : 5em !important;
margin-left: -6.4em;
width: 13em;
z-index: 100;
text-transform: uppercase;
}
.imgnav a {color : #fff;}
.previous {
position: absolute;
top: 45%;
left: 2em;
width: 5em;
z-index: 2002;
}
.next {
position: absolute;
top: 45%;
right: 2em;
width: 5em;
z-index: 2002;}
.toppi {position: relative !important; top: 0 !important; margin-bottom: 1em;}
.toppi a{ color: grey !important;}

@keyframes opa {
from {
opacity : 0;
}
to {
opacity : 0.9;
}
}
.box {
display: none;
background-color:  rgba(255,255,255,0.9);
padding: 2em;
line-height: 100%;
position: absolute !important;
top: 4em;
left: 2em;
z-index: 300;
text-align: left;
width: auto;
animation-duration : 0.5s;
animation-name : opa;
}
.box:target {
outline : none;
display : block;
}
.box h2 {
font-size: 155%;
margin-bottom: 0.3em !important;
}
.modal-close {height: 100%;}
.info {
position: fixed;
background-color: rgba(37, 34, 38, 0.5);
top: 0;
left: 0;
padding-left: 1em;
width: 100%;
min-height: 100%;
height: 100%;
z-index: 2003;
opacity: 0;
overflow-y: scroll;
pointer-events: none;
text-align: left;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
   -ms-overflow-style: none;
    scrollbar-width: none;
}
.info::-webkit-scrollbar {
 display: none;
}
.info:target {
  opacity: 1;
  pointer-events: auto;
}
.info>div {
background:  rgba(255,255,255,0.8) url(https://www.atelier38-sued.de/uploads/images/schnoe-li.png) no-repeat -3px -3px;
position: relative;
left: 0;
width: 40% !important;
text-align: left;
top: 9.5em;
padding: 2em;
margin-bottom: 1em !important;
}
.info h2 {border: none; text-align: left; color: grey;  
padding: 1.5em 0 0 0 !important; 
margin-bottom: 0 !important; background: none; line-height: 120% !important;}
.info>div a{z-index: 3000; position: relative; font-weight: bold; text-decoration: underline;}
.lightbox2:target {
  opacity: 1;
  pointer-events: auto;
}
footer {
position: relative;
bottom: 0;
text-align : center;
width : 100%;
padding-top : 1%;
padding-bottom : 1%;
height : 2em;
}
#footcenter {
position : relative;
margin : 0 auto;
width : 85%;
}
#footnav {
float : left;
width : 100%;
}
#footer a {color: #b6a933;}
.cms_submit {color: #fff; background: #252226;}
.captcha img {
box-shadow : none !important ;
width : 70% !important ;
height : auto !important ;
float : left;
margin : 0.5em 0 0.5em 0;
}
@media screen and (max-width:58em){
#menu {
display : none;
}
#menu-mob {
display : block;
}

.center {width: 90% !important;}
.pic {width : 45% !important;}
.box {width: 60% !important;}
.info>div {top: 1.5em; width: 70% !important;}
#menu-mob li {
float : none;
margin : 0;
}
.thin {font-weight: normal; letter-spacing: 0.02em}
#menu-mob img {
position: absolute;
width: 3em !important; height: auto;
right: 1em;
top: 3em;}
.sidenav {
position : fixed;
height : 0;
width : 100%;
z-index : 1999 !important ;
top : 0;
left : 0;
overflow-y: scroll;
background-color: rgba(37, 34, 38, 0.98);;
overflow-x : hidden !important ;
transition : 1s;
text-align: center;
line-height : 170%;
overflow: hidden;
-ms-overflow-style: none;
 scrollbar-width: none;
}
.sidenav ul {
margin-top: 10%;
width: 30%;
display: inline-block;
border-bottom: 1px solid #fff;
list-style-type: none;
position: relative;
z-index: 10;
}
.sidenav a {
padding : 8px 0 8px 0;
text-decoration : none;
color : #fff;
display : block;
transition : 0.3s;
border-top: 1px solid #fff;
}
.sidenav a:hover, .offcanvas a:focus {
color : #f1f1f1;
background : none;
}
.sidenav ul li ul {
border: none;
margin: 0 0 0.5em 0 !important;
text-align: center;
width: 100%;
font-weight: normal;
}
.sidenav ul li ul a{
text-transform: none;
border: none;
font-weight: normal;
padding: 0;
}
.sidenav .closebtn {
position : absolute !important ;
top : 1em;
right: 1em !important;
font-size: 300% !important;
border: none !important;
}
}

@media screen and (max-width:38em){
.sidenav a {font-size: 90%;
padding : 4px 0 4px 0;}
.sidenav ul {
margin-top: 15%;
width: 60%;}
.left, .right {
float: none;
width: 95%;
margin-left: 0;
}
.col {
columns: 2;}
.pic {border: none;}
.blogpost {width: 100%;}
.box {width: 80%;}
.pic { width : 95% !important; height: auto; overflow: visible !important; 
  display: block !important;}
.pic img {position: relative !important; top: 0; left: 0;
-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: none !important;}
.pic a:hover {width: 100% !important;transform: none !important;}
.big img {width: 100% !important; max-width: 100%;}
}
@media screen and (max-width:27em){
.sidenav a {font-size: 100%;padding : 2px 0 2px 0;}
.sidenav ul li ul a {font-size: 80%;}
.sidenav ul {
margin-top: 15%;
width: 60%;}
#menu img {width: 60%;}
.box {width: 80%;}
#logo {font-size: 140%;
padding: 1em 0.7em 1.15em 0.7em;
}
.next {right: 0.3em;
width: 4em;}
.previous {left: 0.3em;
width: 4em;}
.col {
columns: 1; Column-gap: 4%;}
}