@font-face {
    font-family: 'Raleway';
    src: url('src/Raleway-Regular.ttf');
}

@font-face {
    font-family: 'RalewaySemiBold';
    src: url('src/Raleway-SemiBold.ttf');
}

@font-face {
    font-family: 'Graphik';
    src: url('src/Graphik-Regular.otf');
}

@font-face {
    font-family: 'GraphikSemibold';
    src: url('src/Graphik-Semibold.otf');
}

#customFrame02 {
    display: none;
    height: 0px;
    width: 0px;
}

#elmMailForm {
    display: none;
    height: 0px;
    width: 0px;
}

#previewCreator p {
    margin-bottom: 0;
}

#post-20131 * {
    outline: none;
    font-family: RalewaySemiBold;
}

.txtStart {
    color: #00305b;
    text-align: center;
    margin-top: 7vh;
    font-size: 48px;
}

.red {
    color: #ff0000 !important;
}

.h1 {
    color: #2eaadc;
    text-align: center;
    margin-top: 7vh;
    font-size: 40px;
}

.h2 {
    color: #00305b;
    font-size: 32px;
    text-align: center;
    width: 80%;
    margin: 8vh auto auto auto;
}

.h3 {
    color: #00305b;
    font-size: 24px;
    margin-top: 8vh;
    margin-bottom: 30px;
}

.aLink {
    color: #2eaadc;
}

.info {
    font-size: 24px;
    color: #00305b;
    margin-top: 0;
}

#bildvorschau {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 5%;
}

#bildvorschau img {
    width: 19%;
    height: auto;
}

.fehlermeldungen {
    display: none;
    color: #ff0000;
    font-family: GraphikSemibold !important;
    text-align: center;
    font-size: 18px !important;
}

.bestaetigung {
    display: none;
    color: green;
    font-family: GraphikSemibold !important;
    text-align: center;
    font-size: 18px !important;
}

.checkboxDWDSDIV {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
}

.checkboxDWDSDIV label {
    font-family: Raleway !important;
    font-size: 22px !important;
    color: #00305b;
    cursor: pointer;
    text-align: start;
    padding-left: 10px;
}

.checkboxDWDSDIV input {
    height: 35px;
    width: 35px;
    outline: none;
    cursor: pointer;
}

button {
    margin-top: 40px;
    color: #fff;
    background: #2eaadc;
    border: none;
    border-radius: 5px;
    padding: 1em;
    font-size: 22px;
    font-family: RalewaySemiBold !important;
    width: 100%;
    margin-bottom: 5vh;
    cursor: pointer;
}

.divCopyright label {
    color: #2eaadc;
    cursor: pointer;
}

#divEinwilligungenPDF div,
#divEinwilligungenFB div,
#divEinwilligungenInsta div {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
}

#divEinwilligungenPDF div:nth-child(2),
#divEinwilligungenFB div:nth-child(2),
#divEinwilligungenInsta div:nth-child(2) {
    margin-top: 40px !important;
}

#divEinwilligungenPDF label,
#divEinwilligungenFB label,
#divEinwilligungenInsta label {
    font-family: Raleway !important;
    font-size: 22px !important;
    cursor: pointer;
    text-align: start;
    padding-left: 20px;
}

#divEinwilligungenPDF input,
#divEinwilligungenFB input,
#divEinwilligungenInsta input {
    width: 20px;
    height: 20px;
    margin: 0 !important;
    outline: none;
    cursor: pointer;
}

#divEinwilligungZusatzPDF,
#divEinwilligungZusatzFB,
#divEinwilligungZusatzInsta {
    display: none;
    margin-left: 42px;
}

#copyrightPDF,
#copyrightFB,
#copyrightInsta {
    margin-top: 40px;
    white-space: nowrap;
    width: 40%;
}

#farbeCopyrightPDF,
#farbeCopyrightFB,
#farbeCopyrightInsta {
    color: #2eaadc;
}

#farbeCopyrightPDF p,
#farbeCopyrightFB p,
#farbeCopyrightInsta p {
    color: #00305b;
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 30px;
}

#farbeCopyrightPDF label:not(:first-child),
#farbeCopyrightFB label:not(:first-child),
#farbeCopyrightInsta label:not(:first-child) {
    margin-left: 15px;
}

#copyrightNotwendigPDF,
#copyrightNotwendigFB,
#copyrightNotwendigInsta {
    margin-top: 10px;
}

#contentFacebook {
    display: none;
}

#contentInsta {
    display: none;
}

#navigation {
    margin: 5vh auto;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#navigation p:not([id]) {
    width: 100%;
    text-align: center;
    font-size: 38px;
    color: #00305b;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 2em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#navigation p[id] {
    width: 32%;
    font-size: 38px;
    cursor: pointer;
    color: #00305b;
    user-select: none;
    text-align: center;
}

#navigation p[id] span {
    font-size: 30px;
}

.active {
    color: #2eaadc !important;
}

#secPDF,
#secFacebook,
#secInsta {
    width: 80%;
    margin: auto;
}

#secPDF *,
#secFacebook *,
#secInsta * {
    font-size: 24px;
}

.creatorColumn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #2eaadc;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #2eaadc;
    cursor: pointer;
}

input[type="text"] {
    border: 3px solid #045184;
    color: #2eaadc;
    border-radius: 5px;
    font-size: 18px !important;
    padding: 14px;
    font-size: 22px;
}

input[type="file"] {
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
}

.previewSection {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    margin-top: 5vh;
    background: #fff;
}

#previewCreator {
    width: 8.3in;
    min-width: 8.3in;
    height: 11.7in;
    min-height: 11.7in;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 5px 5px 15px rgb(54, 54, 54);
    margin-bottom: 5vh;
    margin-top: 0;
    transform-origin: top center;
    transform: scale(.7);
}

#facebookPreview {
    margin-right: 0;
    width: calc(1200px*0.6);
    min-width: calc(1200px*0.6);
    height: calc(1500px * 0.6);
    position: relative;
    box-shadow: 5px 5px 15px rgb(54, 54, 54);
    background-color: white;
    overflow: hidden;
    transform-origin: top center;
    margin-bottom: 15vh;
}

#facebookPreview2 {
    margin: 0;
    width: 1200px;
    min-width: 1200px;
    height: 1500px;
    position: relative;
    box-shadow: 5px 5px 15px rgb(54, 54, 54);
    background-color: white;
    overflow: hidden;
    transform-origin: top center;
    display: none;
}

#weiterMotive {
    margin-left: 30%;
    margin-top: 5vh;
    width: 40%;
}

#instagramPreview {
    margin: 0;
    height: calc(1080px*0.6);
    width: calc(1080px*0.6);
    min-width: calc(1080px*0.6);
    position: relative;
    box-shadow: 5px 5px 15px rgb(54, 54, 54);
    background-color: white;
    overflow: hidden;
    transform-origin: top center;
    margin-bottom: 15vh;
}

#instagramPreview2 {
    margin: 0;
    height: 1080px;
    width: 1080px;
    min-width: 1080px;
    position: relative;
    box-shadow: 5px 5px 15px rgb(54, 54, 54);
    background-color: white;
    overflow: hidden;
    transform-origin: top center;
    display: none;
}

.previewRight {
    max-width: 48%;
    margin-top: 0;
    margin-left: 3%;
}

#headerPDF {
    display: flex;
    align-items: center;
}

.headerFB {
    display: flex;
    align-items: center;
}

.headerInsta {
    display: flex;
    align-items: center;
}


#dwdsLogo {
    width: 2.5in;
    height: .65in;
    margin-left: .43in;
    margin-top: .43in;
}

.socialDwdsLogo06 {
    width: 30%;
    margin-left: calc(30px*0.6);
    margin-top: calc(50px*0.6);
}

.socialDwdsLogo {
    width: 30%;
    margin-left: 30px;
    margin-top: 50px;
}

#previewClaimPDF {
    height: 1.39in;
    width: auto;
    position: absolute;
    right: 0;
    top: 1.3in;
}

#previewClaimFB {
    height: calc(2in*0.6);
    width: auto;
    position: absolute;
    right: 0;
    margin-top: calc(0.3in*0.6);
}

#previewClaimFB2 {
    height: 2in;
    width: auto;
    position: absolute;
    right: 0;
    margin-top: 0.3in;
}

#previewClaimInsta {
    height: calc(1.8in*0.6);
    width: auto;
    position: absolute;
    right: 0;
    margin-top: calc(0.3in*0.6);
}

#previewClaimInsta2 {
    height: 1.8in;
    width: auto;
    position: absolute;
    right: 0;
    margin-top: 0.3in;
}

#headerPDF span {
    margin-top: .490551in;
    margin-left: 1.06299in;
    font-size: 22pt;
    color: #2eaadc;
    font-family: GraphikSemibold !important;
}

#headerFB1 span {
    margin-top: calc(.30551in*0.6);
    margin-left: calc(1.699in*0.6);
    font-size: calc(30pt*0.6);
    color: #2eaadc;
    font-family: GraphikSemibold !important;
}

.headerFB span {
    margin-top: .30551in;
    margin-left: 1.699in;
    font-size: 30pt;
    color: #2eaadc;
    font-family: GraphikSemibold !important;
}

#headerInsta1 span {
    margin-top: calc(.30551in*0.6);
    margin-left: calc(1.699in*0.6);
    font-size: calc(30pt*0.6);
    color: #2eaadc;
    font-family: GraphikSemibold !important;
}

.headerInsta span {
    margin-top: .30551in;
    margin-left: 1.699in;
    font-size: 30pt;
    color: #2eaadc;
    font-family: GraphikSemibold !important;
}

.claim {
    position: absolute;
    width: min-content;
    padding: 50px;
    padding-bottom: 20px;
    padding-left: 35px;
    padding-right: 35px;
    margin-left: auto;
    margin-right: -10px;
    top: 25%;
    rotate: -5deg;
    right: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 5px 5px 15px rgb(54, 54, 54);
    clip-path: polygon(0px 20px, 10px, 10px, 10px);
}

.claimPDFpreview {
    font-size: 30px !important;
}

#copyrightPrePDF {
    display: none;
    rotate: -90deg;
    position: relative;
    margin-left: 7.9in;
    margin-top: 9in;
    width: auto;
    z-index: 123;
    white-space: nowrap;
}

#copyrightPreTxtFB1,
#copyrightPreTxtFB2 {
    display: none;
    rotate: 180deg;
    writing-mode: vertical-rl;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    z-index: 123;
    white-space: nowrap;
    font-size: calc(20pt*0.6) !important;
}

#copyrightPreTxtFB1 {
    font-size: 10px !important;
}

#copyrightPreTxtFB2 {
    font-size: calc(20pt*0.6) !important;
}

#copyrightPreTxtInsta1,
#copyrightPreTxtInsta2 {
    display: none;
    rotate: 180deg;
    writing-mode: vertical-rl;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    z-index: 123;
    white-space: nowrap;
    font-size: calc(10pt*0.6) !important;
}

#copyrightPreTxtInsta1 {
    font-size: 10px !important;
}

#copyrightPreTxtInsta2 {
    font-size: calc(20pt*0.6) !important;
}

#copyrightPreTxtPDF {
    color: white;
    font-size: 7pt;
}

#imgHintergrund {
    width: 8.3in;
    height: 9.9in;
    margin-top: 1in;
    clip-path: polygon(0 0.33932in, 8.3in 0, 8.3in 9.56068in, 0 9.9in);
    position: absolute;
    object-fit: cover;
}

#imgTEST {
    width: 16.6in;
    height: 19.8in;
    object-fit: cover;
    position: relative;
    display: none;
}

#imgLogoS {
    display: none;
    width: auto;
    height: 1.2in;
    object-fit: contain;
}

#facebookImgHintergrund {
    width: 100%;
    height: calc(1360px*0.6);
    clip-path: polygon(0 calc(48px*0.6), 0 100%, 100% 100%, 100% 0);
    position: absolute;
    object-fit: cover;
}

#facebookImgHintergrund2 {
    width: 100%;
    height: 1360px;
    clip-path: polygon(0 48px, 0 100%, 100% 100%, 100% 0);
    position: absolute;
    object-fit: cover;
}


#instagramImgHintergrund {
    width: 100%;
    height: calc(950px*0.6);
    clip-path: polygon(0 calc(48px*0.6), 0 100%, 100% 100%, 100% 0);
    position: absolute;
    object-fit: cover;
}

#instagramImgHintergrund2 {
    width: 100%;
    height: 950px;
    clip-path: polygon(0 48px, 0 100%, 100% 100%, 100% 0);
    position: absolute;
    object-fit: cover;
}

#wu {
    position: absolute;
    width: 7in;
    top: 5in;
    background: #2eaadc;
    padding: .25in .25in .25in .30in;
    margin-left: -.05in;
    rotate: -2.45deg;
    /* clip-path: polygon(0 0.31732in, 7in 0, 7in 0.56068in, 0 9.9in); */
}

#wu p {
    width: 100%;
    color: #fff;
    /* rotate: -2.45deg; */
    padding: 0;
    margin: 0;
}

#sloganPre {
    width: 450px;
    font-size: 15pt;
    font-family: GraphikSemibold !important;
}

#quellePre {
    display: none;
    width: 450px;
    margin-top: 10px;
    font-size: 10pt;
    font-family: Graphik !important;
}

#Toolfooter {
    width: 8.3in;
    display: flex;
    align-items: center;
    position: absolute;
    margin-bottom: 0;
    bottom: 0;
}

#footertxt {
    margin-left: .4in;
    bottom: .4in;
    font-size: 14pt;
    font-family: GraphikSemibold !important;
    color: #00305b;
}

#logoPrev {
    width: auto;
    height: .6in;
    margin: auto .1in .2in auto;
    object-fit: contain;
}

.upload label {
    position: relative;
    width: auto;
    padding: 20px;
    border-radius: 25px;
    background: #2eaadc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.claimList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.claimList label {
    display: flex;
    align-items: center;
    color: #00305b;
    padding: 5px;
    cursor: pointer;
    user-select: none;
}

.claimList label img {
    width: auto;
    height: 8vh;
    margin-left: 10px;
}

#slogan {
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    color: #2eaadc;
    resize: none;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #045184;
    border-radius: 5px;
    padding: 14px;
    grid-template-columns: 1;
}

#quelle {
    width: 100%;
    margin-top: 2%;
    box-sizing: border-box;
}

.normalTxtPre {
    white-space: nowrap;
    color: #2eaadc;
    font-size: 52pt;
    line-height: 1em;
    position: relative;
    font-family: GraphikSemibold !important;
}

.rs-label {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 50px;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    border: 2px solid #2eaadc;
    border-radius: 10px;
    background: #2eaadc;
    margin-left: -12px;
    font-family: GraphikSemiBold !important;
    font-size: 20px !important;
    color: #fff;
}

.rs-label:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #2eaadc transparent;
    border-width: 14px 14px 0;
    bottom: -14px;
    left: 50%;
    margin-left: -14px;
}

.rs-label::after {
    content: "";
    display: block;
    font-size: 20px;
}

.rs-range {
    margin-top: 29px;
    width: 600px;
}

.rs-range:focus {
    outline: none;
}

.rs-range::-webkit-slider-runnable-track {
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 1px;
    cursor: pointer;
    box-shadow: none;
    border-radius: 0px;
}

.rs-range::-moz-range-track {
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 1px;
    cursor: pointer;
    box-shadow: none;
    background: #ffffff;
    border-radius: 22px;
}

.rs-range::-webkit-slider-thumb {
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
    height: 42px;
    width: 22px;
    border-radius: 22px;
    background: #2eaadc;
    cursor: pointer;
    margin-top: -20px;
}

.rs-range::-moz-range-thumb {
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
    height: 42px;
    width: 22px;
    border-radius: 22px;
    background: #2eaadc;
    cursor: pointer;
    margin-top: -20px;
}

.rs-range::-moz-focus-outer {
    border: 0;
}

#popup {
    background-color: black;
    position: fixed;
    display: none;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 999;
}