.dnnLoginActions .dnnSecondaryAction{
    top:0px !important; 
    width: 100% !important;
}


 .toggle-handle {background-color:#e0e0e0 !important}

 
.stat-box {
     flex: 1;
     text-align:center;
     border: solid #D4D4D4 2px;
     border-radius: 5px;
     padding: 30px;
     margin: 20px;
 }
 .stat-box h1 {padding-top: 20px;}
 
 .learn-more{
    width: 100%;
    flex:1;
    background-color:#D4D4D4 !important;
    padding: 10px;
    text-align:center;
    cursor:pointer;
    transition: transform .2s;
    color:#000 !important;
}
.btn-secondary {
    background-color:rgb(95, 95, 95) !important;
    text-align:center;
    color:#fff !important;
    float:right;
}
.btn-success {
    float:right;
}
.btn-secondary:hover {
    background-color: var(--button-hover-color1) !important;
    color: #fff !important;
}
.register-btn {
    width: 100%;
    flex:1;
    background-color:#B5B5B5;
    padding: 10px;
    text-align:center;
    cursor:pointer;
    transition: transform .2s;
    color:#000 !important;
}
.learn-more:hover, .register-btn:hover {
    background-color:#ff0000;
    color:#ffffff !important;
}
#cats .active, .btn.active, .button-01.active {
    background-color: var(--button-hover-color1) !important;
    color: #fff !important;
    border-color: var(--button-hover-color1) !important;
}

.project-view .btn {
 font-size: 12px !important;
 border-color:   var(--button-color1);
 padding: 10px;
 cursor:pointer;
}



body .button-01 {
    border-radius: 3px;
    background-color: var(--button-color1);
    min-width: 150px;
    color: #FFF;
    font-family: var(--family2);
    font-weight: 400;
    padding-bottom: 2px;
}
body .button-01, body .button-01:link, body .button-01:active, body .button-01:visited {
    color: #FFF;
    transition: color ease-in 300ms, background-color ease-in 300ms;
}
body .button-01:hover {
    background-color: var(--button-hover-color1);
    text-decoration: none !important;
}
body .btn-color1.button-01 {
    background-color: var(--button-color1);
}
body .btn-color1.button-01:hover {
    background-color: var(--button-hover-color1);
}
body .btn-color2.button-01 {
    background-color: var(--button-color2);
}
body .btn-color2.button-01:hover {
    background-color: var(--button-hover-color2);
}
body .btn-color3.button-01 {
    background-color: var(--button-color3);
}
body .btn-color3.button-01:hover {
    background-color: var(--button-hover-color3);
}
body .btn-color4.button-01 {
    background-color: var(--button-color4);
}
body .btn-color4.button-01, body .btn-color4.button-01:link, body .btn-color4.button-01:active, body .btn-color4.button-01:visited {
    color: #272727;
    transition: color ease-in 300ms, background-color ease-in 300ms;
}
body .btn-color4.button-01:hover {
    background-color: var(--button-hover-color4);
}
body .btn-color5.button-01 {
    background-color: var(--button-color5);
}
body .btn-color5.button-01, body .btn-color5.button-01:link, body .btn-color5.button-01:active, body .btn-color5.button-01:visited {
    color: var(--accent-color);
}
body .btn-color5.button-01:hover {
    background-color: var(--button-hover-color5);
}
body .btn-color6.button-01 {
    background-image: linear-gradient(to right, var(--accent-color), var(--accent-color2));
    transition: all ease-in 300ms;
}
body .btn-color6.button-01:hover {
    filter: brightness(120%);
}
a.social-01 {
    width: 42px;
    height: 42px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border-radius: 50%;
    margin: 0px 3px 10px;
    color: var(--accent-color);
}
a.social-01, a.social-01:link, a.social-01:visited, a.social-01:hover {
    color: var(--accent-color);
    transition: all ease-in 300ms;
}
a.social-01:hover {
    color: #FFF;
    background-color: var(--accent-color);
}
.ourteam-01 {
    position: relative;
}
.ourteam-01::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 1;
    opacity: 0;
    transition: all ease-in 300ms;
    pointer-events: none;
}
.ourteam-01 .pic img {
    width: 100%;
}
.ourteam-01 .pic .Lazy-loading {
    min-width: 100%;
}
.ourteam-01 .cont {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFF;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: all ease-in 300ms;
}
.ourteam-01 .cont>* {
    pointer-events: all;
}
.ourteam-01 .cont .icon {
    display: flex;
}
.ourteam-01 .cont .icon>a {
    margin: 0px 5px 10px;
}
.ourteam-01 .title {
    color: #FFF;
    font-size: 1.5rem;
    margin: 0 0 10px;
}
.ourteam-01 .position {
    color: #FFF;
    font-size: 1rem;
    margin: 0 0 25px;
}
.ourteam-01:hover::before, .ourteam-01:hover .cont {
    opacity: 1;
}

.col-sm-4 .project-icons {float:right;}

.project-list .project-icons {
    float:clear !important; 
}

.project-spacer{display:none; }

.project-list .box {
display:flex !important; 
align-items: center !important;  
justify-content: center !important;
}

.project-list .box-cont {
flex: 1 !important;
}

.project-list .text_style1 {
flex: 6 !important; 
display:flex !important;
align-items: center !important;  
justify-content: center !important;
}

.project-list .project-title-cont {
width: 100% !important; 
flex:1 !important; 
padding: 15px !important;
}

.project-list .project-title {
    font-size: 2em !important;
}

.project-list .project-category {
flex: 2 !important;
}

.project-list .project-date {

flex: 1 !important;

}


.project-list .project-info {
flex: 2 !important;
}


.project-category-view {
    padding: 5px 15px; 
    margin: 10px 0px; 
    background-color:#ff1d25; 
    border-radius: 5px; 
    color:#ffffff;
    }

    .project-view-icons {
        font-size: 1.5em;
        line-height: 1.5em;
    }

.project-image {
    height: 0; 
    width:100%;
    padding-bottom:100%;
    border-radius: 5px; 
    text-align:center;  
    background-size: cover; 
    background-image-position:center;
}

.project-header {
   width: 100%;
    background-size: cover;
    background-position: center;
    margin-bottom: 50px;
}

.project-header .project-title {
    text-align:center;
    color:#fff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: 30px;
    padding-right: 30px;
}

.sponsors {
    text-align:center; 
    max-width: 1200px; 
    margin:auto; 
    }

    .sponsors h1 {margin-top: 25px;}

.Social-Banner {
    background-color:var(--button-color1);
    width:100%; 
    padding: 4%; 
    text-align:center;
}


a.social {
  color:white !important;
  font-size: 1em;
  padding-left:30px;
  padding-right: 30px;
   transition: all .2s ease-in-out;
    }

.social i {transition: all .2s ease-in-out;}
.social i:hover {
    transform: scale(1.2);
}

.logo_header {
    max-width: 350px;
}

.logo_header img{
    max-width: 250px;
}

.userMessages, .userNotifications, .userProfilename, .userSettings, .userRegister {display:none !important;}

.userName, .userLogin {color:#fff !important;}

.modal {width: 100%;}

.errorcontainer {
    position:fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background-color:#fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.errorHandlerfloat {
}




.Validatecheckmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.Validatecheckmark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  float:left;
}

.Validatecheckmark_large {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    margin:auto;
}

.Validatecheckmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

.Validatecheckmark__check_large {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 60px #7ac142;
  }
}