@keyframes opOut{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}

@keyframes opIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

/* Black and white header*/
/*
img.logoBlack {
    display: block!important;
}

img.logoWhite {
    display: none!important;
}

.navigationMenu a {
    color: black!important;
}

html body .header {
    background-color: white!important;
}
*/
/**/


.r3blurb>a {
    display: block;
    width: 100%;
    height: 100%;
}
.r3blurb *{
text-decoration:unset!important;	
}

.r3Text p>span {
    font-weight: 700;
    color: #FF5A12;
}

.r3Blurbs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 5%;
    justify-content: center;
    align-items: center;
}

.r3BlurbImage {
    width: 100%;
    text-align: center;
    padding: 1.2em 0;
    transition: all 0.25s ease-in-out;
}

.r3blurb {
    display: flex;
    flex-direction: column;
    width: 22%;
    justify-content: center;
    align-items: center;
    margin-bottom: 3em;
    cursor: pointer;
}

.r3blurb:hover .r3BlurbImage {
    transform: scale(1.25);
}

.r3Text span {
    font-family: 'Campton Book';
    font-weight: 700;
    font-size: 1.2em;
    text-align: center;
    display: block;
}

.r3BlurbImage img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.r3Text span {
    color: #777771;
    font-family: 'Campton Book';
    font-size: 0.9em;
}

.r3Text p {
    font-family: 'Campton';
    color: black;
    font-weight: 500;
    font-size: 1.5em;
    margin: 0;
    text-align: center;
}

.r3Text {
    width: 90%;
    aspect-ratio: 1/0.9;
    box-sizing: border-box;
    padding: 6% 5%;
    border: 3px solid #29265B;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.KDKCLogos {
    margin: 2em 12%;
    margin-bottom: 8em;
}

.selectorButtons svg * {
    fill: rgba(15,76,153);
}

.r1BGImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.r1BGImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r1BGImage::after {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    backdrop-filter: blur(6px);
    width: 100%;
}


html body .italicsParagraph {
    color: white;
    font-family: 'Campton Book';
    text-align: left;
    margin-bottom: 1em;
    font-size: 1.7em;
    padding-right: 10%;
}

p.boldParagraph {
    color: white;
    font-family: 'Campton Book';
    text-align: left;
    margin-bottom: 1em;
    font-size: 1.7em;
    padding-right: 10%;
}


.r1Text>h3>strong {
    font-style: italic;
}

.r1Text span {
    font-family: 'Campton Book';
    color: white;
    font-size: 2em;
    text-align: left;
    font-weight: 500;
    font-style: italic;
}
.textActive{
    z-index:5!important;
}

.selectorMainContentText {
    z-index: -1;
}

.opIn{
    animation:opIn 0.35s ease-in-out;
}
.opOut{
    animation: opOut 0.75s ease-in-out;
}

.dummy {
    position: static!important;
    z-index: -1;
    opacity:0;
}
.selectorMainContentText {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.selectorButton.selectorButtonActive .selectorButtonText p{
    color:white;
}

.selectorButton.se  lectorButtonActive .selectorButtonImg svg {
    color: white!important;
    fill:white!important;
}



.selectorButton.selectorButtonActive  {
    background-color: #29265B;
}

.selectorButtonText p,
.selectorButton{
    transition: color 0.25s ease-in-out;
}
.selectorButtonImg svg{
    transition: transform 0.15s ease-in-out, fill 0.25s ease-in-out, color 0.25s ease-in-out;
}
.selectorButton.selectorButtonActive .selectorButtonImg svg * {
    fill: white!important;
}
.selectorButton.selectorButtonActive .selectorButtonImg svg {
    transform: unset!important;
}
.selectorButtonImg svg {
    width: 90px;
    height: 90px;
}


.selectorButton:hover .selectorButtonImg svg{
    transform: scale(1.1);
}


.header {
    background-color: #29265B;
}

.r1Text {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.forminator {
    display: flex;
    flex-direction: column;
    flex: 1;
}


.row1 {
    padding-top: 15vh;
    display: flex;
    flex-direction: row;
    padding-left: 10%;
    padding-right: 10%;
    gap: 10%;
    height: 85vh;
    box-sizing: content-box;
   position: relative

}
.forminatorTitle {
    background-color: rgb(255 255 255 / 50%);
    padding: 3% 6%;
}

.row1>div {
    justify-content: center;
}

.KDKCLogos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.r1Text>* {
    margin: 0;
}

.r1Img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 30%);
}

.r1Img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.forminatorTitle h1 {
    color: black;
    font-family: 'Gill Sans';
    font-size: 1.9em;
    white-space: nowrap;
    font-weight: 500;
    text-align: center;
    font-style: italic;
}

.selectorButtons {
    display: flex;
    flex-direction: row;
    position: relative;
    gap: 0.6em;
    margin-bottom: 0.6em;
}


.r3Selector {
    display: flex;
    flex-direction: column;
    padding: 5% 15%;
    padding-top: 1%;
}


.selectorButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1/1;
    background-color: #F6F6F6;
    justify-content: center;
    width: 13.6%;
}

.selectorButton img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.selectorButtonImg {
    width: 100%;
    text-align: center;
}

.selectorButtonText p {
    color: #1D1D1B;
    font-family: 'Campton';
    text-align: center;
    font-size: 0.9em;
    line-height: 1.2em;
    margin: 0;
}

.selector {
    position: absolute;
    top: 0;
    width: 14.285%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid #0F4C99;
    transition: all 0.25s ease-in-out;
    left: 0;
    pointer-events: none;
}
.selectorButton>* {
    pointer-events: none;
}

.selectorMainContent {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    transition: all 0.25s ease-in-out;
    max-height: 100%;
    position: relative;
    background-color:#29265B
}
.selectorMainContentText {
    min-width: 100%;
    min-height: 100%;
}
.selectorContainer {
    overflow: hidden;
    width: 71.4%;
}

.selectorMainContent>div {
    border: 2px solid black;
    box-sizing: border-box;
    border-right: none;
    border-left: none;
    padding: 4% 5%;
    background-color: #29265B;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.r1Text h3 {
    font-family: 'Campton Book';
    font-weight: 500;
    color: white;
    font-size: 3.7em;
    text-align: left;
    margin: 0.1em 0;
    margin-bottom: 0.6em;
}

.r1Text h4 {
    font-family: 'Campton';
    color: white;
    text-align: center;
    font-size: 1.3em;
}


.r1Text li {
    font-family: 'Campton Book';
    font-weight: 700;
    color: white;
    font-size: 0.9em;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    list-style-type: none;
}


.r1Text li::after {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 2200 2200' style='enable-background:new 0 0 2200 2200;' xml:space='preserve'%3E%3Cg id='background'%3E%3Crect style='fill:transparent;' width='2200' height='2200'/%3E%3C/g%3E%3Cg id='Objects'%3E%3Cpath fill='white' d='M1825.6,357.276c-15.114-25.146-47.751-33.278-72.897-18.163c-6.489,3.901-12.46,8.257-18.297,12.733 c-26.744,19.95-54.71,52.067-77.271,76.262c-198.19,213.74-377.794,446.407-525.974,698.124 c-14.743,24.511-30.029,51.412-42.399,77.225c-11.907,24.329-24.593,51.134-35.92,75.88 c-77.943-142.691-200.573-299.28-346.137-363.358c-58.199-24.08-115.786,37.203-86.967,94.077 c8.542,16.77,18.515,32.414,28.495,48.175c48.657,76.658,105.838,146.674,156.37,221.729 c64.247,94.028,118.359,193.589,170.695,294.483c36.052,68.031,138.167,57.828,159.665-16.791 c36.094-75.932,73.191-150.944,112.864-224.908c12.672-23.991,27.309-49.537,39.487-73.696 c11.841-23.738,25.148-51.191,37.459-74.76c102.054-199.786,224.499-388.182,356.901-569.736 c22.438-30.604,53.077-72.035,76.038-102.302c14.6-19.559,38-48.403,50.543-68.731c7.81-12.263,15.139-24.775,20.811-38.347 C1835.377,390.077,1834.651,372.352,1825.6,357.276z'/%3E%3C/g%3E%3C/svg%3E%0A");
    position: absolute;
    top: 12%;
    left: 0;
    transform: translateX(-110%);
    content: "";
    background-size: cover;
    background-position: center;
}
.r1Text ul {
    padding-left: 0;
}

.r2Text.titleText h2 {
    color: black;
    font-family: 'Campton';
    font-size: 3em;
    white-space: nowrap;
}
.row2 {
    padding-left: 10%;
    padding-right: 10%;
}
.r2Blurbs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5%;
    flex-wrap: wrap;
}


.r2Blurb {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border: 3px solid black;
    border-radius: 7px;
    padding-bottom: 2em;
    width: 27%;
    margin-bottom: 4em;

}
.r2Blurb>* {
    pointer-events: none;
}

.r2Blurb>* {
    margin: 0;
}

.r2Blurbs *{
    transition: all 0.25s ease-in-out;;
}

.r2Blurb h3 {
    width: fit-content;
    font-family: 'Campton';
    font-size: 11em;
}


.r2Blurb:hover{
    background-color: black;
}
.r2Blurb:hover *:not(span){
    color: white!important;
}

.r2Blurb>*:not(:first-child):not(:last-child) {
    margin-bottom: 0.8em;
}

.r2Blurb h4 {
    font-family: 'Campton';
    font-size: 1.6em;
    color: black;
}

.r2Blurb span {
    color: #FF5A12;
    font-family: 'Campton Book';
    font-size: 1.9em;
    font-weight: bold;
}

.r4Text h2 {
    color: black;
    font-family: 'Campton';
    font-size: 3em;
    white-space: nowrap;
    padding-left: 10%;
    margin-top: 3em;
    margin-bottom: 1.8em;
}

.r2Text h2 {
    color: black;
    font-family: 'Campton';
    font-size: 3em;
    white-space: nowrap;
    margin-bottom: 2em;
    margin-top: 2em;
}


.forminator .select2-results li {
    font-family: 'Campton Book';
    color: white!important;
}

.forminator :is(p,input,textarea,select,span)::placeholder {
    font-family: 'Campton'!important;
}
.forminator :is(p,input,textarea,select,span) {
    font-family: 'Campton'!important;
}

.forminator-checkbox__wrapper p {
    margin: 0;
}

.forminator-row.forminator-row-last button {
    border: none!important;
    border-radius: 70px!important;
    background-color: #FF5A12!important;
    color: white!important;
    font-family: 'Campton', 'Verdana'!important;
    font-weight: 500!important;
    font-size: 1.4em!important;
    text-align: center!important;
    transition: 0.25s ease-in-out!important;
    padding: 0.5em 2.6em 0.5em 2.6em!important;
    cursor: pointer;
}

.forminator-row.forminator-row-last button:hover{
    filter: brightness(0.9);
} 




.selectorMainContentText h3 {
    font-family: 'Campton';
    font-weight: bold;
    color: white;
    font-size: 2.6em;
    margin:0;
}


.selectorMainContentText p {
    color: white;
    font-family: 'Campton Book';
    font-size: 1.3em;
    margin: 0;
    line-height: 110%;
}
.selectorMainContentText span {
    color: #FF5A12;
    font-family: 'Campton';
    font-weight: bold;
    font-size: 2.8em;
}

.r2Blurb p {
    font-family: 'Campton';
    color: black;
    font-size: 1.1em;
    text-align: center;
}




.select2-results__options::-webkit-scrollbar {
    -webkit-appearance: none;
}

.select2-results__options::-webkit-scrollbar:vertical {
    width: 10px;
}

.select2-results__options::-webkit-scrollbar-button:increment,
body::-webkit-scrollbar-button {
    display: none;
}

.select2-results__options::-webkit-scrollbar:horizontal {
    height: 5px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background-color: #FF5A12;
    border-radius: 20px;
}

.select2-results__options::-webkit-scrollbar-track {
    border-radius: 10px;
}


.select2-results__options>li {
    font-family: 'Campton Book';
}

@media only screen and (max-width:1600px){


    .r3blurb{
        width:33%;
    }

    html .forminatorTitle h1 {
        font-size: 1.8em;
        margin-top: 0.2em;
    }
    html .r2Blurb{
        width: 31%;
    }

    html .row1{
        padding-left:5%;
        padding-right:5%;
    }
    html .r1Text h3 {
        font-size: 2.9em;
    }
    html body .italicsParagraph {
        font-size: 1.5em;
    }

    html p.boldParagraph {
        font-size: 1.5em;
        padding-right: 8%;
    }


    html body .forminatorTitle h1 {
        white-space: normal;
        text-align: center;
    }
    html body .r3Selector {
        padding: 5% 5%;
    }
    html body .r2Blurbs {
        gap: 2%;
    }
    html body .r2Text.titleText h2{
        font-size:2em;
    }
    html body .row2 {
        padding-left: 5%;
        padding-right: 5%;
    }
    html body .r4Text h2 {
        padding-left: 5%;
        font-size: 2.3em;
    }
    html .selectorButtonText p {
        font-size: 0.8em;
    }
    html .selectorMainContentText p {
        font-size: 1.2em;
    }
    html .selectorMainContentText h3 {
        font-size: 2.5em;
    }
    html .selectorMainContentText span {
        font-size: 2.5em;
    }

    html .r2Blurb{
        margin-bottom:1.4em
    }

}

@media only screen and (max-width:1100px){

    html body .r2Blurb p{
        font-size: 1em;
    }

    
    html body .r1Text span{
        font-family: 'Campton';
    }
    html .r3Text{
        height:43vh;
    }

    html .r3Blurbs{
        padding: 0 1%;
    }
    
    html .r3blurb {
        width: 50%;
    }

    html body .r2Blurb {
        width: 45%;
    }
    .KDKCLogos {
        margin: 2em 0.5%;
        margin-bottom: 6em;
    }

    html .row1 {
        height: 100%;
        padding-bottom: 5%;
    }
    html .r1Text span {
        text-align: center;
        font-size: 3.1em;
        margin-bottom: 0.7em;
        font-style: normal;
        font-weight: 700;
    }
    html body .r1Text h3 {
        text-align: center;
        font-size: 1.4em;
    }

    .r1Text p {
        text-align: center!important;
        padding-right:unset!important;
    }


    html body .r3Selector {
        padding: 5% 2%!important;
    }

    html body .row2 {
        padding-left: 1%;
        padding-right: 1%;
    }

    
    html body .r1Text h1 {
        font-size: 1.8em;
    }
    html body .r1Text li {
        font-size: 0.7em;
    }
    html body .row1 {
        flex-direction: column;
        padding-left: 2%;
        padding-right: 2%;
    }
    html body .r1Text h3 {
        font-size: 1.3em;
    }
    html body .titleText h2 {
        white-space: normal!important;
        text-align: center!important;
        padding-left: 0!important;
        font-size: 2em!important;
    }

    .r1Text {
        padding-top: 1em!important;
        padding-bottom: 3em!important;
    }
    html body .forminatorTitle h1 {
        font-size: 2em;
    }



}


@media only screen and (max-width:1240px){
    .selectorButtons {
        flex-wrap: wrap;
        justify-content: center;
    }
    html .selectorButton {
        width: 18%;
    }
    .selectorContainer {
        overflow: hidden;
        width: 71.4%;
        margin: 0 auto;
    }
}

@media only screen and (max-width:960px){
    html .selectorContainer {
        width: 100%;
    }
    html .selectorButton {
        width: 19%;
    }
    html .selectorButtons {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media only screen and (max-width:650px){



    html body .row1 {
        padding-bottom:10%;
    }
    html body .r1Text {
        padding-top: 0em!important;
    }


    html body .r1Text h3 {
        font-size: 1.2em;
    }

    html p.boldParagraph {
        font-size: 1.1em;
    }


    html body .italicsParagraph {
        font-size: 1.1em;
    }


    html body .r2Blurb {
        width: 100%;
        margin-bottom: 1.5em;
    }


    html .r3blurb {
        width: 95%;
    }

    html body .r3Text {
        height: auto;
    }

    html .selectorButtonImg svg {
        width: 60px;
        height: 60px;
    }
    html .selectorButton {
        width: 23%;
    }
    html .selectorMainContentText h3 {
        font-size: 1.8em;
    }
    html .selectorMainContentText p {
        font-size: 1em;
    }
    html .selectorMainContentText span {
        font-size: 2.3em;
    }
    html .selectorButtonText p {
        font-size: 0.7em;
        padding: 0 1%;
    }
}

@media only screen and (max-width:400px){
    html .selectorButton {
        width: 31%;
    }
    html .selectorButtons {
        flex-wrap: wrap;
        justify-content: center;
    }
    html body .r3Selector {
        padding: 5% 0%!important;
    }
}