/* ------------------------------------------------------------ Common elements ------------------------------------------------------------ */


/* -------------------------------------------------- SECTION: Base Elements -------------------------------------------------- */

/* --------------------- CONTENT: Template Parameters --------------------- */
html{
    width: 100%;
}

body{
    padding: 0;
    margin: 0;
    width: 100%;
    /* background-attachment: fixed; */
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    background-color: white;
}

:root{
    --primary: #0038c8;
    --primary_lite: #3770ff;
    --primary_extra_lite: #97cdff;
    --primary_whisp: #e2f5ff;
    --primary_dark: #03007d;

    --secondary: #419873;

    --secondary_lite: #84c5a9;
    --secondary_extra_lite: #baeacc;
    --secondary_whisp: #d4fae3;
    --secondary_dark: #087747;

    --red: #ff0000;

    --tertiary: #7e00c2;
    --tertiary_dark: #4e0178;
    --tertiary_lite: #c27ce8;
    --tertiary_whisp: #dec0f0;

    --accent: #FC7805;
    --accent_dark: #ae5200;
    --accent_lite: #ffa213;
    --accent_whisp: #f9cea1;


    --bg1: #07071a;
    --bg2: #06010e;
    --bg3: #868686;
    /* --bg3: #f0f2f8; */
    --bg4: whitesmoke;
    --bg5: #021464;
    --bg6: #3d52a0;
    /* --bg7: #f7f7f7; */
    --bg7: #f7f8ff;

    --bg_dark1: #2a2d36;
    --bg_dark2: #353e43;
    --bg_dark3: #353839;

    /* Buttons */
    --btn1: #22aaff;
    --btn1_hover: #0397e0;
    --btn2: #0077ff;
    --btn2_hover: #0051ff;
    --btn3: #1c7159;
    --btn3_hover: #275246;

    --btnSec: #00aa3f;
    --btnSec_hover: #019637;


}


/* ------------------------- CONTENT: Text & Fonts ------------------------- */

/* ----- Standard elements ----- */
h1{
    font-size: 56px;
    line-height: 1.5em;
    font-weight: 400;
    padding: 0;
    margin: 5px 0;
}
h2{
    font-size: 48px;
    line-height: 1.5em;
    font-weight: 400;
    padding: 0;
    margin: 5px 0;
}
h3{
    font-size: 36px;
    line-height: 1.5em;
    font-weight: 500;
    padding: 0;
    margin: 5px 0;
}
h4{
    font-size: 28px;
    line-height: 1.5em;
    font-weight: 450;
    padding: 0;
    margin: 5px 0;
}
h5{
    font-size: 22px;
    line-height: 1.5em;
    font-weight: 500;
    padding: 0;
    margin: 5px 0;
}
h6{
    font-size: 18px;
    line-height: 1.5em;
    font-weight: 500;
    padding: 0;
    margin: 5px 0;
}

p{
    font-size: 16px;
    line-height: 1.5em;
    margin-bottom: 1em;
}

br{
    user-select: none;
}

/* ----- Custom elements ------ */
.bodyText_Tiny{
    font-size: 10px;
}
.bodyText_VerySmall{
    font-size: 12px;
}
.bodyText_Small{
    font-size: 14px;
}
.bodyText_Regular{
    font-size: 16px;
}
.bodyText_Large{
    font-size: 20px;
}

/* ----- Hyperstyles ------ */
.hyperstyle1{
    color: var(--primary);
    text-decoration: none;
}
.hyperstyle1:hover{
    cursor: pointer;
    color: var(--secondary);
}
.hyperstyle2{
    color: var(--primary);
    text-decoration: none;
}
.hyperstyle2:hover{
    cursor: pointer;
    color: var(--tertiary);
    /* text-decoration: underline; */
}
.hyperstyle3{
    color: var(--secondary);
    text-decoration: none;
}
.hyperstyle3:hover{
    cursor: pointer;
    /* text-decoration: underline; */
    color: var(--primary);
}
.hyperstyle4{
    color: var(--tertiary);
    text-decoration: none;
}
.hyperstyle4:hover{
    cursor: pointer;
    /* text-decoration: underline; */
    color: var(--primary);
}


/* ------------------------- CONTENT: Buttons ------------------------- */

/* ----- Width styles ----- */
.studioBtnStyleFit{
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* letter-spacing: 0; */

    width: fit-content;
    max-width: fit-content;

    padding: 10px 1.5em;
    margin: 10px;

    border-radius: 5px;

    transition: 0.15s ease-in-out;
}
.studioBtnStyleFull{
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* letter-spacing: 0; */

    width: calc(100% - 3em);
    /* max-width: fit-content; */

    padding: 10px 1.5em;
    margin: 10px;

    border-radius: 5px;

    transition: 0.15s ease-in-out;
}
.studioBtnStyleThumbtack{
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* letter-spacing: 0; */

    width: fit-content;
    max-width: fit-content;

    padding: 5px 1.5em;
    margin: 0;

    border-radius: 20px;

    transition: 0.15s ease-in-out;
}

/* ----- Sizes ----- */

.studioBtnSizeTiny {
    font-size: 10px;
}
.studioBtnSizeSmall{
    font-size: 14px;
}
.studioBtnSizeMedium{
    font-size: 18px;
}
.studioBtnSizeLarge{
    font-size: 20px;
}
.studioBtnSizeVeryLarge{
    font-size: 24px;
}

/* ----- Themes ----- */
.studioBtnThemeRed{

    color: white;
    /* box-shadow: 5px 5px 5px -5px darkgray; */
    background-color: red;
    border: red;
    border: 2px solid red;

    transition: 0.1s ease-in-out;

}
.studioBtnThemeRed:hover{
    cursor: pointer;
    background-color: #a60000;
    border: 2px solid #a60000;
    /* box-shadow: none; */
}

/* ----- "Back to Dashboard" btn ----- */
.studioBtnThemeBack{
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* letter-spacing: 0; */
    position: absolute;
    top: 100px;
    left: 20px;


    font-size: 14px;

    width: fit-content;
    max-width: fit-content;

    padding: 10px 20px;
    /* margin: 40px 0 0 40px; */

    color: var(--primary);
    background-color: white;
    border: 1px solid gray;

    border-radius: 5px;

    box-shadow: 0 0 10px -5px gray;

    transition: 0.15s ease-in-out;
}
.studioBtnThemeBack:hover{
    cursor: pointer;
    background-color: #efefef;
    box-shadow: 0 0 10px -2px gray;
}

.studioBtnThemeDefault{

    color: white;

    background-color: black;
    border: 2px solid black;

    transition: 0.1s ease-in-out;
}
.studioBtnThemeDefault:hover{
    cursor: pointer;
}
.studioBtnThemeDefault_Reverse{

    color: black;

    background-color: white;
    border: 2px solid black;

    transition: 0.1s ease-in-out;
}
.studioBtnThemeDefault_Reverse:hover{
    cursor: pointer;
    color: white;
    background-color: black;
}

.studioBtnThemeAlternate{

    color: white;

    background-color: var(--tertiary);
    border: 2px solid var(--tertiary);

    transition: 0.1s ease-in-out;
}
.studioBtnThemeAlternate:hover{
    cursor: pointer;
    background-color: var(--tertiary_dark);
    border: 2px solid var(--tertiary_dark);
}
.studioBtnThemeAlternateReverse{

    color: var(--tertiary);

    background-color: white;
    border: 2px solid var(--tertiary);

    transition: 0.1s ease-in-out;
}
.studioBtnThemeAlternateReverse:hover{
    cursor: pointer;
    color: var(--tertiary_dark);
    background-color: white;
    border: 2px solid var(--tertiary_dark);
}

.studioBtnThemeTertiary{

    color: white;

    background-color: var(--primary);
    border: 2px solid var(--primary);

    transition: 0.1s ease-in-out;
}
.studioBtnThemeTertiary:hover{
    cursor: pointer;
    background-color: var(--primary_dark);
    border: 2px solid var(--primary_dark);
}


.studioBtnThemeTertiaryReverse{

    color: var(--primary);

    background-color: white;
    border: 2px solid var(--primary);

    transition: 0.1s ease-in-out;
}
.studioBtnThemeTertiaryReverse:hover{
    cursor: pointer;
    color: var(--primary_dark);
    border: 2px solid var(--primary_dark);
}

/* ------------------------- CONTENT: Pagination ------------------------- */
.pagination{
    display: flex;
    
    justify-content: center;
    align-items: center;

    width: calc(100% - 60px - 20px - 2px);
    height: fit-content;

    margin-right: 80px;

    /* border: 1px solid red; */
}
.pagination .center{
    display: inline-block;
    text-align: center;
    width: calc(fit-content); min-width: 100px;
    /* border: 1px solid green; */
}
.pagination .side{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(200px);
    /* border: 1px solid red; */
}
.paginateBtn{
    font-size: 16px;
    text-decoration: none;
    width: fit-content;
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid lightgray;
    transition: 0.2s ease-in-out;
}
.paginateBtn:hover{
    cursor: pointer;
}

/* ------------------------- CONTENT: Filters ------------------------- */

/* ---------- Category filters ---------- */
.categoryBin{
    display: flex;
    align-items: center;
}
.categoryBtnAll{
    text-decoration: none;
    margin: 0 10px;
}
.categoryBtnAll_Selected{
    text-decoration: underline;
    margin: 0 10px;
}
.categoryBtn{
    text-decoration: none;
    margin: 0 10px;
}
.categoryBtn_Selected{
    text-decoration: underline;
    margin: 0 10px;
}



/* ----- Chips ----- */
.studioTagChip{
    display: flex;
    align-items: center;
    font-size: 12px;
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* letter-spacing: 0; */

    width: fit-content;
    max-width: fit-content;

    padding: 4px 10px 6px;
    margin: 0 5px;

    border-radius: 20px;

    transition: 0.15s ease-in-out;
}

.studioTagChip_Edit{
    display: flex;
    align-items: center;
    font-size: 12px;
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* letter-spacing: 0; */

    width: fit-content;
    max-width: fit-content;

    padding: 4px 25px;
    margin: 0;
    margin-right: 10px;

    border-radius: 20px;

    color: white;
    background-color: var(--primary);
    border: 2px solid var(--primary);

    transition: 0.15s ease-in-out;
}
.studioTagChip_Edit .closeSpan{
    position: relative;
    top: 1px;
    font-size: 18px;
    margin: 0;
    margin-left: 10px;
    padding: 0;

    transition: 0.1s ease-in-out;
}
.studioTagChip_Edit .closeSpan:hover{
    cursor: pointer;
    /* color: red; */
}

/* --------------------- CONTENT: Images --------------------- */
/* ----- Icons ----- */
 .iconMicro{
    user-select: none;
    max-width: 12px;
    max-height: 12px;
    margin: 2px;
 }
.iconVeryTiny{
    user-select: none;
    max-width: 16px;
    max-height: 16px;
    margin: 5px;
 }
.iconTiny{
    user-select: none;
    max-width: 24px;
    max-height: 24px;
    margin: 5px;
}
.iconVerySmall{
    user-select: none;
    max-width: 36px;
    max-height: 36px;
    margin: 5px;
}
.iconSmall{
    user-select: none;
    max-width: 48px;
    max-height: 48px;
    margin: 5px;
}
.iconMedium{
    user-select: none;
    max-width: 64px;
    max-height: 64px;
    margin: 5px;
}
.iconLarge{
    user-select: none;
    max-width: 100px;
    max-height: 100px;
    margin: 5px;
}

/* ----- Logos ----- */
.logoThin{
    user-select: none;
    width: fit-content;
    max-width: 250px;
    max-height: 60px;
    margin: 5px;
}
.logoMedium{
    user-select: none;
    object-fit: contain;
    width: fit-content;
    max-width: 250px;
    max-height: 80px;
    margin: 5px;
}
.logoLarge{
    user-select: none;
    width: fit-content;
    max-width: 300px;
    max-height: 110px;
    margin: 5px;
}


/* ----- Images ----- */
.imageSmall{
    object-fit: contain;
    user-select: none;
    width: 100%; max-width: 200px;
    max-height: 200px;
    margin: 5px;
}
.imageMedium{
    object-fit: contain;
    user-select: none;
    width: 100%; max-width: 300px;
    max-height: 400px;
    margin: 5px;
}
.imageLarge{
    object-fit: contain;
    user-select: none;
    width: 100%; max-width: 450px;
    max-height: 450px;
    margin: 5px;
}
.imageVeryLarge{
    object-fit: contain;
    user-select: none;
    width: 100%; max-width: 600px;
    max-height: 600px;
    margin: 5px;
}
.imageMain{
    object-fit: contain;
    user-select: none;
    width: 100%; max-width: 650px; min-width: 400px;
    max-height: 650px;
    margin: 5px;
}
.imageFit{
    object-fit: contain;
    width: fit-content; max-width: fit-content; min-width: fit-content;
    height: fit-content; min-width: fit-content; max-width: fit-content;
    margin: 5px;

    align-self: flex-start;
    /* justify-self: flex-start; */
    border: 4px solid yellow;
}


.imageSquare{
    border-radius: 0;
}
.imageRoundedEdges{
    border-radius: 5px;
}
.imageRounded,
.imageRound{
    border-radius: 50px;
}
.imageFull{
    object-fit: contain;
    width: 100%;
    height: 100%;
}





/* -------------------------------------------------- SECTION: Formatting -------------------------------------------------- */

/* -------------------- CONTENT: Box Shadow -------------------- */

.boxShadowLiteCenter{
    box-shadow: 0 0 10px 2px gray;
}

/* -------------------- CONTENT: Spacing elements -------------------- */
.spanVertTiny{
    height: 5px; min-height: 5px;
}
.spanVertVerySmall{
    height: 10px; min-height: 10px;
}
.spanVertSmall{
    height: 20px; min-height: 20px;
}
.spanVertMedium{
    height: 50px; min-height: 50px;
}
.spanVertLarge{
    height: 100px; min-height: 100px;
}
.spanVertExtraLarge{
    height: 200px; min-height: 200px;
}
.spanHorizTiny{
    width: 5px; min-width: 5px;
}
.spanHorizVerySmall{
    width: 10px; min-width: 10px;
}
.spanHorizSmall{
    width: 20px; min-width: 20px;
}
.spanHorizMedium{
    width: 50px; min-width: 50px;
}
.spanHorizLarge{
    width: 100px; min-width: 100px;
}
.spanHorizExtraLarge{
    width: 200px; min-width: 200px;
}
.fillVertSpace{
    height: 100%; 
}
.fillHorizSpace{
    width: 100%; 
}

/* -------------------------------------------------- SECTION: Banners, Headers, and Navigatio -------------------------------------------------- */

/* -------------------- CONTENT: Banners -------------------- */
.studioBannerThin{
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 950;

    position: sticky;
    top: 0;

    width: calc(100% - 20px);
    height: 30px;

    padding: 5px 10px;
}

/* -------------------- CONTENT: Headers -------------------- */

/* ----- Mobile menu ----- */
#nav-header-mobile{
    display: none;
}
#mobileMenu{
    display: none;
}
#mobileMenu_List{
    display: none;
}

/* ----- Header Containers ----- */
.studioHeaderThin{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 500;
    position: relative;

    height: 75px;
    width: calc(100% - 8px);

    margin: 0;
    padding:  0 4px;

    box-shadow: 0 0 20px 0 lightgray;
}
.studioHeaderContentBinThin{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;

    width: 30%; min-width: 300px;
    height: 100%; max-height: 100%;

    overflow: hidden;

    padding: 0;

    border: none;


    /* border: 1px solid red; */
}
.studioHeaderLogo{
    max-width: 75px;
    max-height: 75px;

    margin-right: 15px;
    /* border: 1px solid blue; */
}
.studioNavBar{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
.studioNavTab{
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    width: fit-content;
    margin: 0 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 15px;
    /* border-bottom: 2px solid rgba(0, 0, 0, 0); */

    /* color: gray; */
}
.studioNavTab:hover{
    cursor: pointer;
}
.studioNavTab_selected{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: fit-content;
    margin: 0 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 2px 5px;
    /* color: black;
    border-bottom: 2px solid black; */

}

/* -------------------- CONTENT: Drop-down menu -------------------- */

.cms_dropDownMenu{
    display: none;
    flex-direction: column;

    z-index: 910;

    position: absolute;
    top: calc(40px + 100px);

    width: calc(100% - 2px);
    height: fit-content;
    /* height: 0; */

    background-color: white;
    border: 1px solid lightgray;

    transition: 0.25s ease-in-out;
}
.cms_dropDownMenu_list{
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    list-style: none;

    width: calc(100% - 40px);
    height: fit-content;

    padding: 20px;
    margin: 0;

    /* border: 1px solid green; */

    /* background-color: whitesmoke; */
}
.cms_dropDownMenu_listItem{
    text-decoration: none;
    font-size: 28px;
    line-height: 100px;

    width: calc(100% - 40px);
    height: 100px;

    padding: 0 20px;
    margin-bottom: 10px;

    color: black;
    /* border: 1px solid lightgray; */

    transition: 0.1s ease-in-out;
}
.cms_dropDownMenu_listItem:hover{
    cursor: pointer;

    background-color: var(--bg7);
    color: var(--primary);

}
.dropDownMenu_btnBin{
    width: calc(100% - 20px);
    height: calc(100% - 20px);

    padding: 10px;
}

/* -------------------- CONTENT: Footer -------------------- */

.studioFooterDefault{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: calc(100% - 40px);
    height: fit-content; min-height: 100px;

    padding: 80px 20px 10px;

    /* border-top: 1px solid gray; */

    /* background-color: #fafafa; */

    /* border: 1px solid red; */
}
.studioFooterDefault .hr{
    width: 80%;
}
.studioFooterDefault .content{
    display: flex;
    justify-content: center;
    align-items: flex-start;

    width: 100%;
    padding: 0 0 50px;

    /* border: 1px solid green; */
}
.studioFooterDefault .content .section{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: calc(150px - 20px);
    height: fit-content;
    padding: 0 10px;
    margin-right: 10px;

    /* border: 1px solid black; */
}
.studioFooterDefault .content .logoLink{
    width: fit-content;
    height: fit-content;
    padding: 0;
    margin: 0;
}
.studioFooterDefault .content .logoLink .logo{
    max-width: 150px;
    max-height: 200px;
    padding: 0;
    margin: 0;
}
.studioFooterDefault .content .navList{
    list-style: none;
    padding: 0;
    margin: 0;
}
.studioFooterDefault .content .navList .navItem{
    width: calc(100%);
    height: fit-content;

    padding: 2px 0;
    margin-bottom: 5px;
}
.studioFooterDefault .content .navList .navItem .link{
    font-size: 14px;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}
.studioFooterDefault .content .navList .navItem .link:hover{
    cursor: pointer;
}
.studioFooterDefault .content .socialList{
    display: flex;
    flex-direction: column;
    list-style: none;

    padding: 0;
    margin: 0;
}
.studioFooterDefault .content .socialList .link{
    width: fit-content;
    height: fit-content;
    padding: 0;
    margin: 0;
}
.studioFooterDefault .content .socialList .link .icon{
    width: 20px;
    max-height: 20px;
    margin: 5px 0;
    border-radius: 50px;
}
.studioFooterDefault .legalBin{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 0 50px;
}
.studioFooterDefault .legalBin .link{
    text-decoration: none;
    font-size: 14px;
    margin-right: 20px;
    /* color: gray; */
}
.studioFooterDefault .legalBin .link:hover{
    cursor: pointer;
    /* color: black; */
}
.studioFooterDefault .mykroBanner{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    padding: 0;
}
.studioFooterDefault .mykroBanner .statement{
    display: flex;
    align-items: center;
    padding-right: 20px;
    border-right: 1px solid black;
}
.studioFooterDefault .mykroBanner .statement .text{
    font-size: 14px;
    margin: 0;
}
.studioFooterDefault .mykroBanner .statement .icon{
    width: 20px;
    height: 20px;
    border-radius: 5px;
}
.studioFooterDefault .mykroBanner .icons8{
    display: flex;
    font-size: 14px;
    padding-left: 20px;
}
.studioFooterDefault .mykroBanner .icons8 .link{
    font-size: 14px;
    text-decoration: none;
    margin-left: 5px;
    transition: 0.2s ease-in-out;
}
.studioFooterDefault .mykroBanner .icons8 .link:hover{
    cursor: pointer;
}

/* -------------------------------------------------- SECTION: Containers & Bins -------------------------------------------------- */

.studioMainContainer{
    display: flex;
    flex-direction: column;
    /* align-items: center; */

    height: fit-content; min-height: 80vh;

    padding: 0;

    /* background-color: #fafafa; */

    background-color: white;
    /* border: 1px solid blue; */
}
.studioHeaderContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow-x: hidden;
    width: calc(100%);
    height: fit-content; min-height: 200px;
    padding: 120px 0;
    margin: 0;
}
.studioSubContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow-x: hidden;
    width: calc(100%);
    height: fit-content; min-height: 100px;
    padding: 50px 0;
    margin: 0;
}
.objectBinFullCentered{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    padding: 0;
    margin: 0;

    /* border: 1px solid blue; */

}
.objectBinFullLeft{
    display: flex;
    flex-direction: column;
    align-items: start;

    width: 100%;

    padding: 20px 0;
    margin: 0;

    /* border: 1px solid blue; */

}
.objectBinFullRight{
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: 100%;

    padding: 10px 0;
    margin: 0;

    /* border: 1px solid blue; */

}
.horizBinFull{
    display: flex;
    flex-wrap: wrap;

    max-width: calc(100% - 4px);
    height: fit-content;

    padding: 2px;
    margin: 0;

}
.horizBinFit{
    display: flex;
    flex-wrap: wrap;

    width: fit-content;
    height: fit-content;


    /* border: 1px solid red; */
}
.bodyTextBin{
    width: calc(100% - 40px); max-width: calc(800px - 40px);
    height: fit-content;

    padding: 0 20px;

    line-height: 1.5rem;

}
.bodyTextBin .half{
    width: calc(40% - 40px);
}
.subtitleTextBin{

    /* font-size: 18px; */
    text-align: center;

    width: calc(100% - 20px); max-width: 800px;
    height: fit-content;

    line-height: 2rem;

}

/* -------------------------------------------------- SECTION: Cards -------------------------------------------------- */

/* ----- Large Blog Post Card ----- */
.blogPostCardLarge{
    display: flex;
    justify-content: space-between;

    width: calc(80% - 80px); max-width: calc(1200px - 80px);
    height: calc(350px - 80px); 

    padding: 40px;
    margin: 0px;
    margin-bottom: 20px;

    color: black;
    background-color: white;

    box-shadow: 0px 0px 25px 0 gray;

    transition: 0.1s ease-in-out;

}

.blogPostCardLarge .contentBin{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

    width: calc(50% - 25px);

    /* border: 1px solid red; */
}

.blogPostCardLarge .imageBin{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    object-fit: contain;

    z-index: 100;
    overflow-y: hidden;

    width: calc(50% - 25px);

    height: 270px;
    max-height: 500px;

    /* border: 1px solid red; */
}


/* ----- Medium Blog Post Card ----- */
.blogPostCardMedium{
    display: flex;
    justify-content: space-between;

    width: calc(50% - 80px); width: calc(650px - 80px);
    height: calc(300px - 80px);

    padding: 40px;
    margin: 0px;
    margin-bottom: 20px;

    /* color: white; */
    color: black;
    background-color: white;
    /* background-color: var(--primary); */
    /* border: 4px solid var(--primary); */
    /* border: 1px solid black; */
    /* border-radius: 5px; */

    box-shadow: 0px 0px 20px 0px gray;

    transition: 0.1s ease-in-out;

}

.blogPostCardMedium .contentBin{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

    width: calc(50% - 25px);

    /* border: 1px solid red; */
}

.blogPostCardMedium .imageBin{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    object-fit: contain;

    width: calc(50% - 25px);

    max-height: 500px;

    /* border: 1px solid red; */
}

/* ---------- Link Cards ---------- */
.articleLinkCard{
    display: flex;
    align-items: center;

    text-decoration: none;
    /* color: var(--primary); */

    width: calc(700px - 20px - 2px);
    height: calc(50px - 20px);

    padding: 10px;
    margin: 5px 0 20px;

    /* box-shadow: 0 0 5px -2px gray;
    border: 1px solid gray; */
    border-radius: 5px;
}
.articleLinkCard:hover{
    cursor: pointer;
    box-shadow: none;

    /* color: var(--primary_dark); */
}

/* -------------------------------------------------- SECTION: Forms -------------------------------------------------- */

/* ----- Standard Django form error list ----- */
.errorlist{
    font-size: 12px;
    list-style: none;
    padding: 0;
    margin: 5px 0 10px;
    color: red;
}
.errorlist li::before {
    content: "*";
}

.studioContactForm_def{
    display: flex;
    flex-direction: column;
    /* align-items: center; */

    width: calc(100% - 120px);

    padding: 20px 60px;

}
.studioContactForm_def .label{
    font-size: 14px;
    width: calc(100%);
    text-align: left;
    margin: 0 0 5px;
}
.studioContactForm_def .consentBin{
    display: flex;
    margin-bottom: 5px;
    /* border: 1px solid red; */
}
.studioContactForm_def .consentLabel{
    font-size: 12px;
    width: calc(100%);
    text-align: left;
    margin: 0;
}
.studioContactForm_defTextInput{
    font-size: 14px;
    text-align: left;
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    letter-spacing: 1px;

    width: calc(100% - 10px - 4px);
    height: fit-content;

    padding: 8px 5px;
    margin: 0 0 20px;

    /* color: #292929; */

    border: none;
    /* border-bottom: 2px solid lightgray; */

    transition: 0.3s ease-in-out;
}
.studioContactForm_defTextInput:focus{
    outline: none;
    /* background-color: whitesmoke;
    border-bottom: 2px solid black; */
}
.studioContactForm_defTextArea{
    font-size: 16px;
    text-align: left;
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    letter-spacing: 1px;
    width: calc(100% - 20px - 4px); min-width: calc(100% - 20px - 4px); max-width: calc(100% - 20px - 4px);
    height: calc(150px - 20px); min-height: calc(150px - 20px); max-height: calc(250px - 20px);
    padding: 10px;
    margin: 10px 0;
    transition: 0.3s ease-in-out;
}
.studioContactForm_defTextArea:focus{
    outline: none;
}
.studioContactForm_defCheckboxInput{
    width: 15px;
    height: 15px;
    margin-right: 10px;
}
.studioContactForm_defButton{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    width: 250px;
    height: 50px;
    transition: 0.1s ease-in-out;
}
.studioContactForm_defButton:hover{
    cursor: pointer;
}
.studioContactForm_defButton:active{
    background-color: gray;
}

.studioNewsletterForm{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: calc(100% - 80px);
    height: fit-content;

    padding: 10px 20px;
    margin: 10px 0;

    /* border: 1px solid green; */

}
.studioNewsletterForm .title{
    margin-bottom: 10px;
}

.studioNewsletterForm .entryBin{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: calc(100%);

    margin: 5px 0;

    /* border: 1px solid red; */
}
.studioNewsletterForm .label{
    font-size: 14px;
    margin-bottom: 5px;
    width: 300px;
}
.studioNewsletterForm .errMsg{
    font-size: 12px;
    min-height: 20px;
    width: 300px;
    margin-top: 5px;
    color: red;
}
.studioNewsletterForm .btn {
    font-size: 14px;

    padding: 8px 20px;
    margin: 10px 0;

    /* color: white;
    background-color: var(--primary);
    border: 1px solid var(--primary); */
    border-radius: 5px;

    /* box-shadow: 0 0 10px -2px gray; */
    transition: 0.2s ease-in-out;
}
.studioNewsletterForm .btn:hover{
    cursor: pointer;
    /* background-color: var(--primary_dark);
    border: 1px solid var(--primary_dark);
    box-shadow: 0 0 10px -5px gray; */
}

/* ----- Input styles ----- */

.studioSiteTextInput_Default{
    font-size: 14px;
    letter-spacing: 1px;
    outline: none;

    width: calc(300px - 20px - 2px);

    padding: 8px 10px;

    border: 1px solid;
    border-radius: 2px;
    transition: 0.2s ease-in-out;
}

/* .studioSiteTextInput_Default:focus{ */
    /* color: black; */
    /* background-color: whitesmoke; */
    /* border: 1px solid rgba(0, 0, 0, 0); */
    /* border-bottom: 1px solid black; */
/* } */

/* -------------------------------------------------- SECTION: Special formatting overrides -------------------------------------------------- */


.alignItemsCenter{
    align-items: center;
}
.alignItemsStart{
    align-items: flex-start;
}
.justifyContentCenter{
    justify-content: center;
}
.justifyContentStart{
    justify-content: flex-start;
}
.justifyContentSpaceBetween{
    justify-content: space-between;
}
.justifyContentSpaceEvenly{
    justify-content: space-evenly;
}
.justifyContentEnd{
    justify-content: flex-end;
}

.noMargin{
    margin: 0;
}
.noPadding{
    padding: 0;
}
.hidden{
    display: none;
}


/* ------------------------------------------------------------ Mobile Device Styles ------------------------------------------------------------ */




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


    /* ---------- Text Styles --------- */

    h1{
        font-size: 32px;
        line-height: 1.5em;
    }
    h2{
        font-size: 26px;
        line-height: 1.5em;
    }
    h3{
        font-size: 24px;
        line-height: 1.5em;
    }
    h4{
        font-size: 22px;
        line-height: 1.5em;
    }
    h5{
        font-size: 20px;
        line-height: 1.5em;
    }
    h6{
        font-size: 16px;
        line-height: 1.5em;
    }
    p{
        font-size: 14px;
    }

    /* ---------- Buttons ---------- */
    .studioBtnSizeTiny {
        font-size: 10px;
    }
    .studioBtnSizeSmall{
        font-size: 12px;
    }
    .studioBtnSizeMedium{
        font-size: 14px;
    }
    .studioBtnSizeLarge{
        font-size: 16px;
    }
    .studioBtnSizeVeryLarge{
        font-size: 18px;
    }

    /* ---------- Containers & Bins ---------- */
    .studioSubContainer{

        width: calc(100%);
        height: fit-content; min-height: 100px;

        padding: 30px 0;
        margin: 0;
        /* border: 1px solid green; */
    }

    .bodyTextBin{
        /* font-size: 18px; */
        width: calc(100% - 40px); max-width: calc(600px - 40px);
        height: fit-content;

        padding: 0 20px;

        line-height: 1.5rem;
    }


    /* ---------- Heroes & Cards ---------- */
    .blogPostCardLarge{
        display: flex;
        flex-direction: column-reverse;

        width: calc(96% - 30px); max-width: calc(600px - 30px);
        height: fit-content; 

        padding: 15px;
        margin-bottom: 20px;

        color: black;
        background-color: white;

        box-shadow: 0px 0px 25px 0 gray;

        transition: 0.1s ease-in-out;
    }
    .blogPostCardLarge .contentBin{
        width: calc(100%);
        /* border: 1px solid red; */
    }
    .blogPostCardLarge .imageBin{
        width: calc(100%);

        height: 150px;
        max-height: 300px;

        /* border: 1px solid red; */
    }

    .articleLinkCard{
        font-size: 10px;
        display: flex;
        align-items: center;

        text-decoration: none;
        color: var(--primary);

        width: calc(96% - 20px - 2px);
        height: calc(40px - 20px);

        padding: 10px;
        margin: 5px 0;

        box-shadow: 0 0 5px -2px gray;
        border: 1px solid gray;
        border-radius: 5px;
    }

    /* ----- Chips ----- */
    .studioTagChip{
        display: flex;
        align-items: center;
        font-size: 8px;
        text-align: center;
        text-wrap: nowrap;
        text-decoration: none;
        letter-spacing: 0.05em;
        /* letter-spacing: 0; */

        width: fit-content;
        max-width: fit-content;

        padding: 2px 8px 4px;
        margin: 0 5px;

        border-radius: 20px;

        transition: 0.15s ease-in-out;
    }



    /* ---------- Forms ---------- */
    .studioNewsletterForm{
        display: flex;
        flex-direction: column;
        align-items: center;

        width: calc(100% - 20px);
        height: fit-content;

        padding: 5px 10px;
        margin: 10px 0;

        /* border: 1px solid green; */

    }
    .studioNewsletterForm .title{
        margin-bottom: 10px;
    }
    .studioNewsletterForm .entryBin{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        width: calc(100%);

        margin: 5px 0;

        /* border: 1px solid red; */
    }
    .studioNewsletterForm .label{
        font-size: 12px;
        margin-bottom: 5px;

        width: 250px;

    }
    .studioNewsletterForm .errMsg{
        font-size: 10px;
        min-height: 18px;
        width: 250px;
        margin-top: 5px;
        color: red;
    }
    .studioNewsletterForm .btn {
        font-size: 12px;

        padding: 8px 20px;
        margin: 5px 0;

        color: white;
        background-color: var(--primary);
        border: 1px solid var(--primary);
        border-radius: 5px;

        box-shadow: 0 0 10px -2px gray;
        transition: 0.2s ease-in-out;
    }
    .studioNewsletterForm .btn:hover{
        cursor: pointer;
        background-color: var(--primary_dark);
        border: 1px solid var(--primary_dark);
        box-shadow: 0 0 10px -5px gray;
    }


    .studioContactForm_def{
        width: calc(100% - 60px);
        padding: 20px 30px;

    }
    .studioContactForm_def .label{
        font-size: 12px;
        width: calc(100%);
        text-align: left;
        margin: 0 0 4px;
    }
    .studioContactForm_def .consentLabel{
        font-size: 10px;
        width: calc(100%);
        text-align: left;
        margin: 0 0 5px;
    }

    .studioContactForm_defTextInput{
        font-size: 12px;
        width: calc(100% - 8px);
        padding: 6px 4px;
        margin: 0 0 10px;
    }
    .studioContactForm_defTextArea{
        font-size: 12px;
        letter-spacing: 1px;

        width: calc(100% - 10px - 4px); min-width: calc(100% - 10px - 4px); max-width: calc(100% - 10px - 4px);
        height: calc(150px - 20px); min-height: calc(150px - 20px); max-height: calc(250px - 20px);

        padding: 5px;
        margin: 5px 0;
    }
    .studioContactForm_defTextArea:focus{
        outline: none;
        border: 2px solid black;
    }
    .studioContactForm_defButton{
        font-size: 14px;
        text-align: center;
        text-decoration: none;

        width: calc(100%);
        height: fit-content;
        /* line-height: 50px; */

        padding: 10px 0;
    }

    /* ----- Input styles ----- */

    .studioSiteTextInput_Default{
        font-size: 12px;
        letter-spacing: 1px;
        outline: none;

        width: calc(250px - 20px - 2px);

        padding: 6px 8px;

        border: 1px solid gray;
        border-radius: 2px;
        transition: 0.2s ease-in-out;
    }
    .studioSiteTextInput_Default:focus{
        color: black;
        background-color: whitesmoke;
        /* border: 1px solid rgba(0, 0, 0, 0); */
        border-bottom: 1px solid black;
    }


    /* ----- Pagination ----- */
    .pagination{
        width: calc(100%);
        margin-right: 0;
        /* border: 1px solid red; */
    }
    .pagination .center{
        font-size: 12px;
        width: 90px; min-width: 90px; max-width: 90px;
        /* border: 1px solid blue; */
    }
    .pagination .side{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(50% - 45px);
        /* border: 1px solid green; */
    }
    .paginateBtn{
        text-decoration: none;
        font-size: 15px;
        width: fit-content;
        margin: 0 5px;
        padding: 5px 8px;
        border: 1px solid lightgray;
    }
    .paginateBtn:hover{
        cursor: pointer;
    }


    /* ---------- Header & Footer ---------- */
    .studioHeaderThin{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        z-index: 500;
        position: relative;

        height: 75px;
        width: calc(100% - 8px);

        margin: 0;
        padding:  0 4px;

        box-shadow: 0 0 20px 0 lightgray;
    }
    .studioHeaderContentBinThin{

        width: fit-content; min-width: 0px;
        height: 100%; max-height: 100%;

        overflow: hidden;

        padding: 0 20px;

        border: none;
    }
    #socials-header, #nav-header{
        display: none;
    }
    #nav-header-mobile{
        display: flex;
    }
    /* #mobileMenuBtn{
        background-color: rgb(94, 94, 94);
        border-radius: 4px;
        padding: 2px;
    } */
    /* #mobileMenuBtn:hover{
        cursor: pointer;
    } */
    #mobileMenu{
        display: none;

        position: absolute;
        top: calc(76px);

        overflow: hidden;

        z-index: 950;

        width: calc(100% - 2px);
        /* height: calc(100% - 4px); */

        height: 0;

        transition: 0.3s ease-in-out;
    }
    #mobileMenu_List{
        display: none;
        flex-direction: column;

        list-style: none;

        width: 100%;

        padding: 0;
        margin: 0;

    }
    .mobileMenu_ListItem{
        display: flex;
        justify-content: flex-start;
        align-items: center;

        width: calc(100%);
        height: calc(60px - 1px);

        padding: 0;
        margin: 0;
    }
    .mobileMenu_ListItem .navLink{
        text-decoration: none;
        line-height: 35px;

        width: calc(100% - 40px);
        height: calc(60px - 20px);

        padding: 10px 20px;

        /* color: black; */

    }
    .mobileMenu_ListItem .navLink:hover{
        cursor: pointer;
        /* color: black; */
    }


    .studioFooterDefault{
        width: calc(100% - 20px);
        height: fit-content; min-height: 100px;
        padding: 50px 10px 10px;
        /* background-color: #fafafa; */
        /* border: 1px solid red; */
    }
    .studioFooterDefault .hr{
        width: 100%;
        border-top: 1px solid gray;
    }
    .studioFooterDefault .content{
        padding: 0 0 30px;
        /* border: 1px solid green; */
    }
    .studioFooterDefault .content .section{
        display: flex;
        flex-direction: column;
        align-items: center;

        width: calc(33.33% - 10px - 10px);
        height: fit-content;
        padding: 0 5px;
        margin-right: 10px;

        /* border: 1px solid black; */
    }
    /* .studioFooterDefault .content .logoLink{
    } */
    .studioFooterDefault .content .logoLink .logo{
        max-width: calc(100%);
        max-height: 150px;
    }
    /* .studioFooterDefault .content .navList{
    } */
    .studioFooterDefault .content .navList .navItem{
        padding: 2px 0;
        margin-bottom: 4px;
    }
    .studioFooterDefault .content .navList .navItem .link{
        font-size: 12px;
    }
    /* .studioFooterDefault .content .navList .navItem .link:hover{
    } */
    /* .studioFooterDefault .content .socialList{
    } */
    /* .studioFooterDefault .content .socialList .link{
    } */
    .studioFooterDefault .content .socialList .link .icon{
        width: 15px;
        max-height: 15px;
        margin: 4px 0;
    }
    .studioFooterDefault .legalBin{
        padding: 10px 0 30px;
    }
    .studioFooterDefault .legalBin .link{
        font-size: 12px;
        margin-right: 15px;
        /* color: gray; */
    }
    /* .studioFooterDefault .legalBin .link:hover{
    } */
    .studioFooterDefault .mykroBanner{
        flex-direction: column-reverse;
    }
    .studioFooterDefault .mykroBanner .statement{
        display: flex;
        align-items: center;
        padding-right: 0;
        margin-top: 5px;
        border: none;
    }
    .studioFooterDefault .mykroBanner .statement .text{
        font-size: 10px;
    }
    .studioFooterDefault .mykroBanner .statement .icon{
        width: 15px;
        height: 15px;
        border-radius: 5px;
    }
    .studioFooterDefault .mykroBanner .icons8{
        font-size: 10px;
        padding-left: 0;
    }
    .studioFooterDefault .mykroBanner .icons8 .link{
        font-size: 10px;
        margin-left: 5px;
    }
    /* .studioFooterDefault .mykroBanner .icons8 .link:hover{
    } */

}