#closingwidget {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
}
#closingwidget + label {
position:absolute;
width:100vw;
height:100vh; bottom:0;
right:50%;
transform:translateX(50%);
z-index:-1;
opacity:0 !important;
}
#closingwidget:checked + label {
display:none;
}
#secondary {
position: fixed;
bottom: 0;
transform: translateX(-50%);
left: 50%;
z-index:7;
display: flex;
} #secondary .widget { margin:0;
}
#secondary .widget input[type=radio] {
position:absolute;
top:0;
right:0;
opacity:0;
visibility:hidden;
}
#secondary .widget > div {
background-color:#FFF;
-webkit-box-shadow: 0 4px 6px 0 rgba(0,0,0,.1);
box-shadow: 0 4px 6px 0 rgba(0,0,0,.1); width: 100%;
border-radius:10px 0 0 0;
padding:2.375rem 1.875rem 3.125rem;
position: absolute;
bottom: 100%;
left: 0;
transform-origin:bottom left;
transition:all .2s ease-in-out;
opacity:0;
transform:scale(.7);
pointer-events:none;
} #secondary .widget input[type=radio]:checked ~ div {
opacity:1;
transform:scale(1);
z-index:2;
pointer-events:inherit;
}
#secondary .widget-label {
width: 70px;
height: 70px;
display: block;
margin:0 1px 0 0;
background-color: #FFF;
transition:all .2s ease-in-out;
-webkit-box-shadow: 0 4px 6px 0 rgba(0,0,0,.1);
box-shadow: 0 4px 6px 0 rgba(0,0,0,.1);
position:relative;
cursor:pointer;
}
#secondary .widget-label::after {
font-family: "jcions";
font-size:1.6875rem;
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:#707070;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transition: color .25s ease-in-out, opacity .25s ease-in-out;
} #secondary .widget:nth-of-type(1) .widget-label::after {
content: '\e804';
}
#secondary .widget:nth-of-type(2) .widget-label::after {
content: '\e806';
}
#secondary .widget:nth-of-type(3) .widget-label::after {
content: '\e817';
}
#secondary .widget:nth-of-type(4) .widget-label::after {
content: '\e805';
}
#secondary .widget:nth-of-type(5) .widget-label::after { content:'';
background:url(//www.jobcenter-mg.de/wp-content/themes/jobcenter-mg/img/ukraine-flagge.svg) center center no-repeat;
background-size:contain;
width:70%;
height:70%;
}
#secondary .widget:nth-of-type(2) .closing--widget {
left:71px;
}
#secondary .widget:nth-of-type(3) .closing--widget {
left:142px;
}
#secondary .widget:nth-of-type(4) .closing--widget {
left:213px;
}
#secondary .widget:nth-of-type(5) .closing--widget {
left:284px;
}
#secondary input[type=radio]:checked ~ .widget-label {
background-color:#F5F6F8;
border-top-left-radius:0;
}
#secondary .widget:last-child input[type=radio]:checked ~ .widget-label { }
#secondary input[type=radio]:checked ~ .widget-label::after {
color:#000;
opacity:0;
}
#secondary .widget:first-of-type .widget-label {
border-radius:10px 0 0 0;
}
#secondary .widget:last-child .widget-label {
border-radius:0 10px 0 0; margin-right:0;
}
#secondary .closing--widget {
position:absolute;
width:70px;
height:70px;
cursor:pointer;
inset:auto auto 0 0;
transform:translateY(100%);
}
#secondary .closing--widget::after {
content: '\e808';
font-family: "jcions";
font-size:20px;
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:#000000;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) rotate(45deg);
transform-origin:center center;
}
#secondary .widget-title {
font-size:1.25rem;
margin:0 0 .85em;
padding-right:1.25em;
}
#secondary .textwidget {
font-size:1.125rem;
}
#secondary .textwidget p {
margin:0;
}
#secondary .textwidget .btn--secondary {
color:#555;
font-size:1.25rem;
margin-top:1em;
padding:.6em .9em;
}
#secondary .textwidget .btn--secondary:hover {
color:#FFF;
}
@media screen and (max-width:360px) {
#secondary {
width:calc(100vw - 2px);
}
#secondary .widget {
flex-grow: 1;
flex-shrink: 1;
}
#secondary .widget-label {
width:auto;
}
#secondary .closing--widget {
width:calc( (100% - 4px) / 5);
}
#secondary .widget:nth-of-type(2) .closing--widget {
left:calc( 1px + (100% - 4px) / 5);
}
#secondary .widget:nth-of-type(3) .closing--widget {
left:calc( (1px + (100% - 4px) / 5) * 2);
}
#secondary .widget:nth-of-type(4) .closing--widget {
left:calc( (1px + (100% - 4px) / 5) * 3);
}
#secondary .widget:nth-of-type(5) .closing--widget {
left:calc( (1px + (100% - 4px) / 5) * 4);
}
}
@media (min-height:840px) and (min-width:1200px) { #secondary {
position:fixed;
flex-direction:column;
top: 50%;
right: 0;
bottom:auto;
left:auto;
transform: translateY(-50%);
}
#secondary .widget-label {
margin:0 0 1px;
}
#secondary .widget:last-child .widget-label {
border-radius: 0 0 0 10px;
margin-bottom: 0;
}
#secondary .widget {
position: relative;
}
#secondary .widget > div {
top: 0;
right: 100%;
bottom:auto;
left:auto;
transform-origin:top right;
max-width: 300px;
width: 100vw;
padding: 1.5rem 1.25rem;
}
#secondary .closing--widget,
#secondary .widget:nth-of-type(2) .closing--widget,
#secondary .widget:nth-of-type(3) .closing--widget,
#secondary .widget:nth-of-type(4) .closing--widget,
#secondary .widget:nth-of-type(5) .closing--widget {
inset:0 0 auto auto;
transform:translateX(100%);
}
#closingwidget + label {
bottom:50%;
right:0;
transform:translateY(50%);
}
}
@media (min-width:1200px) {
#secondary .widget-title {
font-size:1rem;
}
#secondary .textwidget,
#secondary .textwidget .btn--secondary {
font-size:.8333333rem;
}
#secondary .widget-label::after {
font-size:1.25rem;
}
}