:root{
    --czos-green: #9AD51B;
    --czos-light-green: #C7F170;
    --czos-dark-green: #84c225;
    --czos-blue: #0093dd;
    --czos-light-blue: #67C9FF;
    --czos-dark-blue: #0075BC;
    --czos-black: #333333;
    --czos-light-black: #444444;
    --czos-dark-black: #222222;
    --czos-dark-gray: #666666;
    --czos-gray: #d2d2d2;
    --czos-light-gray: #f5f5f5;
    --czos-light-red: #FFB5A0;
    --czos-red: #FF5047;
    --czos-dark-red: #D91D28;
}

.green {
    color: var(--czos-green) !important;
}

.green-bg {
    background-color: var(--czos-green) !important;
}

.light-green {
    color: var(--czos-light-green) !important;
}

.light-green-bg {
    background-color: var(--czos-light-green) !important;
}

.dark-green {
    color: var(--czos-dark-green) !important;
}

.dark-green-bg {
    background-color: var(--czos-dark-green) !important;
}

.blue {
    color: var(--czos-blue) !important;
}

.blue-bg {
    background-color: var(--czos-blue) !important;
}

.light-blue {
    color: var(--czos-light-blue) !important;
}

.light-blue-bg {
    background-color: var(--czos-light-blue) !important;
}

.dark-blue {
    color: var(--czos-dark-blue) !important;
}

.dark-blue-bg {
    background-color: var(--czos-dark-blue) !important;
}

.black {
    color: var(--czos-black) !important;
}

.black-bg {
    background-color: var(--czos-black) !important;
}

.dark-black {
    color: var(--czos-dark-black) !important;
}

.dark-black-bg {
    background-color: var(--czos-dark-black) !important;
}

.light-black {
    color: var(--czos-light-black) !important;
}

.light-black-bg {
    background-color: var(--czos-light-black) !important;
}

.dark-gray {
    color: var(--czos-dark-gray) !important;
}

.dark-gray-bg {
    background-color: var(--czos-dark-gray) !important;
}

.gray {
    color: var(--czos-gray) !important;
}

.gray-bg {
    background-color: var(--czos-gray) !important;
}

.light-gray {
    color: var(--czos-light-gray) !important;
}

.light-gray-bg {
    background-color: var(--czos-light-gray) !important;
}


.light-red {
    color: var(--czos-light-red) !important;
}

.light-red-bg {
    background-color: var(--czos-light-red) !important;
}


.red {
    color: var(--czos-red) !important;
}

.red-bg {
    background-color: var(--czos-red) !important;
}

.dark-red {
    color: var(--czos-dark-red) !important;
}

.dark-red-bg {
    background-color: var(--czos-dark-red) !important;
}

.white-bg{
    background-color: #fff;
}

.white{
    color: #fff;
}

.czos-bordered{
    border: solid white 3px;
}

.czos-borderless{
    border: none !important;
}

.green-bc{border-color: var(--czos-green) !important}
.light-green-bc{border-color: var(--czos-light-green) !important}
.dark-green-bc{border-color: var(--czos-dark-green) !important}
.blue-bc{border-color: var(--czos-blue) !important}
.light-blue-bc{border-color: var(--czos-light-blue) !important}
.dark-blue-bc{border-color: var(--czos-dark-blue) !important}
.black-bc{border-color: var(--czos-black) !important}
.light-black-bc{border-color: var(--czos-light-black) !important}
.dark-black-bc{border-color: var(--czos-dark-black) !important}
.dark-gray-bc{border-color: var(--czos-dark-gray) !important}
.gray-bc{border-color: var(--czos-gray) !important}
.light-gray-bc{border-color: var(--czos-light-gray) !important}
.light-red-bc{border-color: var(--czos-light-red) !important}
.red-bc{border-color: var(--czos-red) !important}
.dark-red-bc{border-color: var(--czos-dark-red) !important}

.fw-300{
    font-weight: 300;
}

.fw-400{
    font-weight: 400;
}

.fw-500{
    font-weight: 500;
}

.fw-600{
    font-weight: 600;
}

.fw-700{
    font-weight: 700;
}

.fs-09{
    font-size: 0.9rem !important;
}

.fs-08{
    font-size: 0.8rem !important;   
}

.fs-07{
    font-size: 0.7rem !important;   
}

.fs-11{
    font-size: 1rem !important;
}

.fs-125{
    font-size: 1.25rem !important;
}

.fs-15{
    font-size: 1.5rem !important;
}

.czos-hover:hover{
    cursor: pointer;
    background-color: #222222;
}

@font-face {
    font-family: "Nunito";
    src: url("../fonts/Nunito/Nunito-VariableFont_wght.ttf");
    font-weight: 100 1000;
}

body{
    font-family: "Nunito";
    color: white;
    font-weight: 300;
}

body a{
    text-decoration: none;
    color: white;
    transition: 0.2s;
}

a[data-lightbox]{
    border-bottom: none !important;
}

body a:hover{
    color: white;
}

a.tab:hover{
    background-color: var(--czos-dark-black);
    border-bottom-color: var(--czos-dark-green);
}

.br-2{
    border-radius: 2px;
}

.br-3{
    border-radius: 3px;
}

.br-0{
    border-radius: 0px;
}

.btn:hover{
    opacity: 0.9;
}

.border-bottom-blue{
    border-bottom: solid var(--czos-blue) 3px;
}

.border-bottom-green{
    border-bottom: solid var(--czos-green) 3px;
}

.border-bottom-gray{
    border-bottom: solid var(--czos-gray) 3px;
}

#breadcrumbs, #pagination{
    z-index: 10;
    padding: 0.75rem 1rem;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    position: relative;
    width: fit-content;
    background-color: #333333ee;
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#breadcrumbs a, #pagination a{
    color: white;
    text-decoration: none;
}

#breadcrumbs a:hover{
    color: var(--czos-dark-green);
    transition: .2s;
}

#content{
    padding:  0rem 1rem 2rem 1rem;
    z-index: 0;    
    min-height: 600px;
}

#page-content{
    z-index:  10;
    padding: 2rem;
    position: relative;
    justify-content: center;
}

#page-background{
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    filter: contrast(60%);
}

#page-background img{
    -webkit-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section{
    position:  relative;
    padding: 2rem 0rem 3rem 0rem;
}

.section:last-of-type{
    margin-bottom: 0rem;
}

.section .main-title{
    font-size: 2rem;
    background-color: rgba(255, 255, 255, 0.867);
    width: fit-content;
    padding: 1rem 1.5rem;
    color: var(--czos-black);
    font-weight: 400;
    text-transform: uppercase;
    transition: .2s;
}

.section a .main-title:hover{
    text-decoration: underline;
}

.section .content{
    border-top: solid white 1px;
}

.section .tab-wrapper {
    position: sticky;
    z-index: 20;
    top: 0px;
    border-bottom: solid #fff 1px;
}

.section .tab-wrapper .left > *{
    margin: 0.25rem;
}

.content{
    padding: 1.5rem;
    color: white;
    z-index: 10;
    border-left: solid white 1px;
    border-right: solid white 1px;
    border-bottom: solid white 1px;
    background-color: #333333ee;
}

form label{
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    display: block;
    font-weight: 700;
    color: #F5F5F5;
    text-transform: uppercase;
}

#contact-form .g-recaptcha{
    padding-top: 0.5rem;
    border-top: solid var(--czos-gray) 2px;
}

#contact_form-section .content,
#general-section .content,
#donation-section .content,
#application-section .content{
    padding: 0px;
}

.headless .content{
    border-top: solid white 1px;
}

.czos-news .tab-wrapper{
    background-color: var(--czos-black);
}

.czos-html-short{
    border: solid var(--czos-light-gray) 3px;
    font-weight: 600;
    background-color: var(--czos-black);
}

.czos-perex{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    font-weight: bold;
}

.czos-perex > *{
    margin: 0.5rem;
}

.czos-perex-text{
    background-color: var(--czos-dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 350px;
    flex: 1 0 0%;
    padding: 1rem 1.5rem;
    line-height: 1.7;
    min-height: 200px;
}

.czos-line-spacer{
    width: 100%;
    display: flex;
    margin: 1rem 0rem 1rem 0rem;
}

.czos-line-spacer > div{
    height: 5px;
    border-radius: 2px;
    width: 30%;
    min-width: 300px;
}

.czos-perex img{
    height: 200px;
}

.czos-news-text{
    padding: 1.5rem 2rem;
    background-color: var(--czos-black);
    margin: 0.5rem;
    width: 100%;
    font-size: 0.9rem;
    text-align: justify;
}

.czos-news-text > *{
    margin-bottom: 0.5rem;
}


.section-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section-content .section-content{
    padding: 1rem;
    border: none;
}

.section-content.form{
    padding-top: 1rem;
}

.section-content a{
    color: white;
    text-decoration: none;
}

#newsfeed a, .czos-table a, .section-content a, .czos-text a, .links a{
    text-decoration: underline;
    text-decoration-color: var(--czos-green);
    text-underline-offset: 0.25rem;
    text-decoration-thickness: 2px;
}

.section .tab{
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-top: solid white 1px;
    border-left: solid white 1px;
    border-right: solid white 1px;
    display:  flex;
    justify-content: space-between;
    align-items:  center;
    flex-wrap: wrap;
    background-color: var(--czos-black);
}

.section .tab .title, .title{
    color: #F5F5F5;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    padding: 0.25rem 0rem 0rem 0rem;
}

.section .section-content .title{
    color: #F5F5F5;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    margin: 1rem 0rem 1rem 0rem;
    /*padding: 0.25rem 0rem 0rem 0rem;*/
}

.section .subtitle{
    padding: 0.25rem 0.75rem 0.2rem 0.75rem;
    margin: 0.5rem 0rem;
    background-color: gray;
    font-weight: bold;
    border-radius: 2px;
    width: min-content;
}

.row-item{
    padding: 0.5rem 0.25rem;
}

.rotate-90{
    transform: rotate(-90deg);
}

.height-100{
    height: 100%;
}

.white-filter{
    filter: brightness(0) invert(1);
}

.section .title-vertical{
    position: absolute;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    font-size: 4rem;
    font-weight: 300;
    opacity: 0.5;
    left: 0.5rem;
    top: 2rem;
    line-height: 1.2;
    transition: 0s;
}

.section .title-vertical a{
    border-bottom: none;
    color: inherit;
}

.section .title-vertical:hover{
    opacity: 1;
}

.subsection + .subsection{
    margin-top: 1.5rem;
}

.subsection .tab{
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    border-bottom: solid var(--czos-gray) 3px;
}

.subsection .czos-perex{
    padding: 1rem;
}

.fade-enter-active{
  transition: opacity .2s;
}

.circle{
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    /*border: solid white 2px;*/
    margin: 0px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/*.circle.dark-green-bg{
    border-color: var(--czos-light-green);
}

.circle.blue-bg{
    border-color: var(--czos-light-blue);
}

.circle.dark-gray-bg{
    border-color: var(--czos-gray);
}*/

.circles-xsm{
    margin-right: 0.25rem;
}

.circles-xsm .circle{
    width: 1.1rem;
    height: 1.1rem;
    margin: 0px 1px;
}

.circles-small .circle{
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.8rem;
}

.circles-horizontal{
    display: flex;
    align-items: center;
}

.title a{
    text-decoration: none;
    color: white;
    border-bottom: none;
}

#top-scroller{
    position: fixed;
    width: 4rem;
    height: 4rem;
    bottom: 1rem;
    right: 1rem;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #333;
    color: white;
    z-index: 1000;
    border: solid white 2px;
    transition: 0.2s;
}

#top-scroller.show{
    display: flex;
}

#top-scroller.hide{
    display: none;
}

#top-scroller:hover{
    cursor: pointer;
    background-color: var(--czos-dark-green);
}

form{
    width: 100%;
    border: solid white 1px;
    padding: 2rem;
}

textarea{
    width: 100%;
}

.tab-button{
    padding: 1rem;
    font-weight: 400;
    background-color: var(--czos-dark-gray);
    font-size: 0.9rem;
    border-top: solid white 1px;
    border-bottom: solid white 1px;
    text-transform: uppercase;
}

.tab-button.active{
    background-color: var(--czos-black);
    font-weight: 700;
    font-size: 1rem;
}

.tab-button:hover{
    background-color: var(--czos-dark-black);
    cursor: pointer;
}

.tab-button + .tab-button{
    border-left: solid white 1px;
}

.tab-buttons{
    border-left: solid white 1px;
    border-right: solid white 1px;
}

.button{
    font-family: "Nunito";
    color: white;
    font-weight: 500;
    padding: 0.5rem 1rem 0.3rem 1rem;
    border-radius: 2px;
    border: none;
    font-size: 1.1rem;
    transition: 0.2s;
}

button.button{
    font-weight: 700;
}

input[type='text'], input[type='email'], select{
    padding: 0.2rem;
    font-family: "Nunito";
    border-radius: 2px;
    border: none;
    width: 100%;
    background-color: white;
}

form .bottom{
    /*margin-top: 0.5rem;*/
    padding-top: 0.5rem;
    border-top: solid var(--czos-gray) 2px;
}

ul.czos-list{
    padding-left: 2.5rem;
    margin: 0rem;
}

ul.czos-list li{
    list-style-type: square;
    color: var(--czos-green);
}

ul.czos-list li span{
    color: white;
}

.czos-list{
    font-weight: 700;
    background-color: var(--czos-light-black);
    /*border-radius: 2px;*/
    padding: 1.5rem;
    font-size: 0.9rem;
}

.czos-list .li{
    display: flex;
    align-items: start;
}

.li + .li{
    margin-top: 0.5rem;
}

.czos-index{
    padding: 0rem 0.3rem;
    background-color: white;
    color: var(--czos-black);
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 2px;
    margin-right: 0.5rem
}

.czos-number{
    padding: 0.1rem 0.5rem;
    background-color: var(--czos-light-gray);
    border-radius: 2px;
    color: var(--czos-black);
}

.czos-number-circle{
    background-color: var(--czos-light-gray);;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    color: var(--czos-black);
    font-weight: 900;
}

.czos-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

form .czos-row + .czos-row{
    margin-top: 0.5rem;
}

.czos-row .label{
    font-weight: bold;
    padding: 0.25rem 0.75rem;
}

form .czos-row label{
    border-left: solid var(--czos-green) 3px;
    background-color: #666;
}

.czos-row .value{
    padding: 0.25rem 0.75rem;
}

.czos-button img{
    height: 5rem;
    margin-right: 1rem;
    padding: 0.5rem;
    border-right: solid var(--czos-dark-green) 3px;
}

.czos-button{
    height: fit-content;
    background-color: #333333ee;
    border: solid white 3px !important;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1rem;
    padding-right: 1.5rem;
    transition: 0.2s;
    z-index: 1;
    text-decoration: none !important;
}



button.button:hover, .czos-button:hover{
    border-color: var(--czos-dark-green) !important;
    color: white;
    opacity: 1 !important;
    background-color: var(--czos-dark-black) !important;
}

#contact_form-section #form-nav .czos-button{
    opacity: 1;
    background-color:  #333;
}

#form-nav .czos-button{
    border: solid white 1px !important;
    font-size: 1.25rem;
    height: 150px;
    justify-content: center;
    background-color:  #666;
    opacity: 0.7;
}

#form-nav .czos-button.active{
    background-color:  var(--czos-dark-black);
    opacity: 1;
}

/*#form-nav .czos-button + .czos-button{
    margin-left:  0.5rem;
}*/

#form-nav .czos-button img{
    height: 4rem;
}

.czos-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.subsection .czos-top{
    margin-bottom: 0.25rem;
}

.czos-top > *{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.czos-text img{
    height: 200px;
}

.czos-text + .czos-text{
    margin-top: 0.5rem;
}

.czos-text, .czos-text-bordered{
    color: white;
    font-weight: 500;
    padding: 1rem 2rem 1rem 2rem;
    line-height: 1.7;
    font-size: 1rem;
    text-align: justify;
    background-color: #444;
}

.czos-text-bordered{
    border-left: solid var(--czos-gray) 5px;
}

.czos-text a, .czos-text-bordered a{
    font-weight: bold;
    font-family: Nunito;
}

.czos-gallery{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--czos-black);
    overflow-x: auto;
    padding: 0.25rem;
}

.czos-gallery a + a{
    margin-left: 0.25rem;
}

.czos-gallery img{
    /*margin: 0.25rem;*/
    width: auto !important;
    border: solid #d2d2d2 1px;
    transition: 0.2s;
    filter: grayscale(1);
}

.czos-gallery img:hover{
    filter: grayscale(0);
    cursor: pointer;
}


.czos-count{
    padding: 0rem 0.5rem;
    background-color: var(--czos-dark-gray);
    border-radius: 2px;
    margin-left: 0.5rem;
    font-weight: bold;
}

/*.czos-count{
    background-color: var(--czos-dark-gray);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    font-weight: bold;
}*/

.czos-cite{
    border: solid var(--czos-gray) 3px;
    padding: 0.5rem 1rem;
    background-color: #444;
}

.czos-cite .title{
    border-bottom:  solid white 1px;
}

.czos-title-md{
    font-size: 1.25rem !important;
    padding: 0.5rem 0.5rem 0.25rem 0rem;
    font-weight: 600 !important;
    margin: 0rem !important;
    font-family: "Nunito";
}

.czos-title-sm{
    font-size: 1.1rem !important;
    padding: 0.5rem 0.5rem 0.25rem 0rem;
    font-weight: 600 !important;
    margin: 0rem !important;
    font-family: "Nunito";
}

.czos-list-title, .czos-title-underline{
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem;
    text-decoration: underline;
    text-decoration-color: white;
    text-decoration-thickness: 3px;
}

.czos-subsection-title{
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.4rem 1rem 0.25rem 1rem;
    color: #222;
    background-color: rgba(255, 255, 255, 0.867);
    width: fit-content;
}

.czos-subsection-title + *{
    margin-top: 0.5rem;
}

.citation{
    font-size: 1rem;
    padding: 0.5rem;
}

.flex-column img{
    align-self: center;
}

.czos-table, .czos-table-scroll{
    font-size: 0.9rem;
    font-weight: 600;
}

.czos-table-scroll .czos-table-content{
    max-height: 400px;
    overflow: auto;
}

.czos-table .czos-table-header{
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
}

.czos-table .czos-table-header .first-col{
    border-right: none;
}

.czos-table .first-col{
    font-size: 1rem;
    padding: 0.5rem 1rem;
    min-width: 50px;
    max-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: solid 3px white;
}

.czos-table-content{
    background-color: var(--czos-black);
    border: solid white 3px;
    font-size: 0.9rem;
}

.czos-table-section + .czos-table-section {
    border-top: solid white 2px;
}

.software-table .czos-row{
    padding: 0.25rem;
}

.software-table .czos-row + .czos-row{
    border-top: solid var(--czos-dark-gray) 1px;
}

.czos-table .czos-row > *{
    padding: 0.75rem 0.75rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.czos-table .czos-row > *:first-child{
    font-weight: 700;
}

.czos-table .czos-row + .czos-row{
    border-top: solid var(--czos-dark-gray) 1px;
}

.czos-table .czos-table-header .icon img{
    height:  60px;
}

.czos-table .czos-table-header .label{
    font-size: 1.1rem;
    font-weight: bold;
    padding:  1rem;
    width: 100%;
}

.czos-table .czos-table-content .fa-circle{
    font-size: 0.7rem;
    margin-right: 0.25rem;
}

.czos-table .czos-table-content .czos-row .col:not(:first-child){
    font-style: italic;
}

.czos-table .czos-table-content .czos-row .col:nth-child(even){
    background-color: var(--czos-light-black);
}

.separate > *{
    margin: 0.5rem;
}

.czos-text-img{
    display: flex;
    flex-wrap: wrap;
}

.czos-text-img .czos-text{
    min-width: 70%;
}

.czos-text-img .img-wrapper{
    height: 100%;
    min-width: 250px;
    overflow: hidden;
    border-left: solid var(--czos-gray) 2px;
}

.czos-text-spacer{
    font-size: 0.6rem;

}

.czos-desc-small{
    padding: 0.5rem 0rem;
    border-radius: 2px;
    font-style: italic;
    font-size: 0.8rem;
    font-weight: 400;
}

.czos-top .czos-date{
    padding: 1rem;
    background-color: #333333dd;
}

.czos-date{
    padding: 0.25rem 0.25rem 0rem 0.25rem;
    font-size: 0.8rem;
    font-style: italic;
    /*background-color: var(--czos-dark-gray);*/
    font-weight: bold;
    word-break: keep-all;
}

::-webkit-scrollbar {
    width: 7px;
}
 
::-webkit-scrollbar-track {
    background-color: #D2D2D2;
    margin: 1px 0px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: gray;
}

/* SUMMERNOTE */

.editable .section-content{
    padding: 1rem;
    background-color: var(--czos-dark-gray);
    display: block;
}

.content .note-editor{
    margin-bottom: 1rem;
}

.note-editable{
    background-color: #333333ee;
}

/* END SUMMERNOTE */

#people-section .person .img-wrapper{
    display: none;
}

#people-section .person{
    padding: 1rem; 
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--czos-black);
    align-self: stretch;
    border: solid white 3px;
}

#people-section .person .name{
    font-size: 1rem;
}

.people-gallery{
    background-color: var(--czos-light-black);
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
}

.person .img-wrapper, .czos-card .img-wrapper{
    height: 160px;
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: 1rem;
}

.person{
    padding: 1.5rem 1rem 1rem 1rem; 
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--czos-black);
}

.person img, .czos-card img{
    width: 130px;
    filter: contrast(90%);
}

.person .name{
    font-weight: bold;
    font-size: 0.9rem;
}

.person a{
    margin-top: 0.5rem;
}

.person .role{
    font-style: italic;
    color: var(--czos-gray);
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-top: solid var(--czos-dark-green) 3px;
}

.czos-card{
    max-width: 400px;
    display: flex;
    padding: 1rem;
    background-color: #333;
    border-radius: 2px;
    align-items: center;
    border: solid white 3px;
    color:  ;
}

.czos-card .name{
    border-bottom: solid var(--czos-dark-green) 3px;
    font-weight: 700;
}

.czos-card .role{
    font-style: italic;
    font-size: 0.8rem;
}

.attachment a{
    font-size: 1.5rem;
    border-bottom: none;
    color: var(--czos-green);
}

#collections-counters{
    padding: 1rem;
    font-weight: bold;
}

#collections-counters .counter{
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

#collections-counters .counter .number{
    font-size: 2rem;
    width: 150px;
    margin-right: 0.5rem;
    text-align: right;
}

#collections-counters .counter .set{
    border-left: solid var(--czos-green) 5px;
    padding-left: 0.5rem;
}


.collection{
    background-color: #333;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid white 3px;
    padding: 1rem;
}

.czos-table-content .czos-row .icon{
    height: 2rem;
    margin-right: 1rem;
}

.collection .czos-desc-small{
    min-height: 90px;
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
}

.collection .label{
    margin-top: 0.5rem;
    font-size: 1.25rem;
    padding: 0rem 0.5rem;
    font-weight: bold;
}

.collection .sublabel{
    font-size: 0.8rem;
    margin-top: 0.25rem;
    font-style: italic;
}

.collection .items{
    text-align: left;
    font-size: 0.9rem;
    color: #f5f5f5;
    padding: 1rem;
    width: 100%;
    margin-top: 0.25rem;
    /*background-color: #444;*/
    border-top: solid 3px var(--czos-gray);
}

.collection .items .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collection .item +.item{
    border-top: solid 1px var(--czos-dark-gray);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

#collections-chart{
    height: 400px;
    width: 600px;
}

#address{
    min-width: 300px;
    padding-right: 10px;
    font-weight: bold;
    color: white;
    font-size: 0.8rem;
}

.map{
    margin-top: 1rem;
    width: 100%;
    height: 350px;
    border-radius: 2px;
}

#newsfeed{
    min-width: 300px;
    width: 100%;
    height: fit-content;
}

.tag{
    font-style: italic;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0rem 0.5rem;
    text-decoration: none !important;
    border: none !important;
    width:  fit-content;
    border-radius: 2px;
}

.tag-news{
    background-color: var(--czos-dark-green);
}

.tag-events{
    background-color: var(--czos-blue);
}

.tag-positions{
    background-color: var(--czos-dark-gray);
}

#positions-section .czos-text{
    font-weight: 600;
    padding: 2rem;
}

#positions-section .icon{
    font-size: 6rem;
    padding: 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--czos-green);
    width: 100%;
}

#newsfeed a{
    text-decoration-color: var(--czos-gray);
    text-underline-offset: 1px;
}

#newsfeed a:hover{
    text-decoration-color: var(--czos-dark-green);
}

@media (min-width: 992px){
    
    #newsfeed{
        max-width: 300px;
    }
}

.d-grid, .grid-gap-1{
    gap: 1rem;
}

.d-grid.czos-row{
    gap: 0rem;
}

.grid-gapless{
    gap: 0rem !important;
}

.grid-gap-05{
    gap: 0.5rem !important;
}

.grid-gap-15{
    gap: 1.5rem !important;
}

.grid-gap-025{
    gap: 0.25rem !important;
}

.grid-img{
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.grid-row-3{
    grid-template-rows: repeat(3, 1fr);
}

.grid-row-4{
    grid-template-rows: repeat(4, 1fr);
}

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

.grid-col-3{
    grid-template-columns: repeat(3, 1fr);
}

.grid-col-4{
    grid-template-columns: repeat(4, 1fr);
}

.grid-col-5{
    grid-template-columns: repeat(5, 1fr);
}

.grid-col-6{
    grid-template-columns: repeat(6, 1fr);
}

.grid-col-span-2{
    grid-column: span 2;
}

.grid-col-span-3{
    grid-column: span 3;
}

.grid-row-span-2{
    grid-row: span 2;
}

.grid-row-span-3{
    grid-row: span 3;
}

@media (min-width: 768px){

    .people-gallery{
        grid-template-columns: repeat(4, 1fr);
    }

    #content{
        padding:  0rem 0rem 2rem 0rem;
    }

    .grid-md-row-3{
        grid-template-rows: repeat(3, 1fr);
    }

    .grid-md-row-4{
        grid-template-rows: repeat(4, 1fr);
    }

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

    .grid-md-col-3{
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-md-col-4{
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-md-col-5{
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-md-col-span-2{
        grid-column: span 2;
    }

    .grid-md-col-span-3{
        grid-column: span 3;
    }

    .grid-md-row-span-2{
        grid-row: span 2;
    }
    
    .grid-md-row-span-3{
        grid-row: span 3;
    }

}

.automation-img{
    background-image: url(/media/photologue/photos/cache/3_full_hd_contrast_80.jpg); 
    background-size: cover;
    background-position: center center;
    height: 400px;
    border-radius: 2px;
    position: relative;
}

.img-background{
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.img-title{
    bottom: 1rem;
    left: 1rem;
    width:  fit-content;
    padding: 1rem 1.5rem;
    max-width: 90%;
    font-size: 1.5rem;
    background-color: #ffffffdd;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
}

.workflow{
    border-radius: 2px;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.workflow img{
    height: 2rem;
    /*filter: brightness(0) invert(1);*/
}


.service .czos-title{
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    line-height: 1;
}

a.service-card{
    text-decoration: none;
}

.service-card{
    padding: 1rem 1.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    background-color: var(--czos-light-black);
    border-radius: 2px;
    border-left: solid white 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-card:hover{
    border-color: var(--czos-dark-green);
    background-color: var(--czos-dark-black);
}

.service-card .apply{
    padding: 0.5rem 1rem 0rem 1rem;
    margin-top: 0.25rem;
    line-height: 1;
    border-top: solid var(--czos-dark-green) 3px;
    font-size: 0.9rem;
}

.links{
    margin-top: 1rem;
    border: solid white 1px;
}

.links a{
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.links a:hover{
    background-color: var(--czos-dark-green);
    transition: 0.2s;
}

.links a + a{
    border-top: solid white 1px;
}

.logos img{
    max-width: 300px;
    max-height: 200px;
}

.logos a{
    filter: brightness(0) invert(1);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    transition: 0.2s;
    padding: 1rem;
}

.logos a:hover{
    background-color: #ffffff33;
}