@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/cairo/v10/SLXGc1nY6HkvalIkTpumxdt0UX8.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
  }

body, html {
    font-family: 'Cairo';
    direction:rtl;
    min-height:100%;
    height:100%;
    margin:0px;
    font-size: 12pt;
    
}

img.tt-logo {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    transition: all 1s ease;
    height:50px;
    margin:25px;
  }
 
  img.tt-logo:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
  }


.gside {
    width:16%; float:right; 
}

.gsideDiv{
    width:80%;margin-right:140px; background:white; min-height:500px;
    text-align: center; padding:25px; padding-bottom:0px;
}
.gsideDiv img{
    width:100px; margin-bottom:25px;
}


@media screen and (max-width: 1190px) {
    .gsideDiv{
        margin-right: 115px;
    }
}

/*IPhone Portrait*/
@media screen and (max-width: 428px) {
  .ud-hero-image .cardGold.shape.shape-2 {
    right:0;
    top:0 !important;
  }
  .ud-hero-image .cardGreen.shape.shape-1{
    left:0;
    bottom:50px !important;
  }
  .mainFeature {
    margin-top: 0 !important;
  }
  .ud-section-title{
    max-width: 100%;
  }
  .gsideDiv {
    width:100% !important;
    margin-right:0 !important;
  }
  .gside {
    display: none;
  }
  .gsideDiv img {
    width:25%;
  }
  #adminMain {
    display: none !important;
  }
  .contactUs {
    background-image: none !important;
  }
  .copyright {
    display: none;
  }
  .sideDrawer-toggler {
    display:block
  }
}

/* IPhone Landscape */
@media screen and (min-width:500px) and  (max-width: 926px) {
  .ud-hero-image .cardGold.shape.shape-2 {
    right:0;
    top:-200px !important;
  }
  .ud-hero-image .cardGreen.shape.shape-1{
    left:0;
    bottom:200px;
  }
  #adminMain {
    display: none !important;
  }
  .copyright {
    display: none;
  }
  .contactUs {
    background-image: none !important;
  }
  #sideDrawer.open {
    overflow-y: scroll;
  }
  .navbar-btn {
    display: none !important;
  }
}
/* iPad Landscape */
@media screen and (min-width:927px) and  (max-width: 1080px) {
  .ud-hero-image .cardGold.shape.shape-2 {
    right:0;
    top:-200px !important;
  }
  .ud-hero-image .cardGreen.shape.shape-1{
    left:0;
    bottom:200px;
  }
  
}
.copyright {
  margin-bottom:25px; font-size:13px; margin-top:100px;
}
.contactUs {
  background-image:url('../images/others/arrow.svg'); background-repeat:no-repeat; background-position:top right; min-height: 100px; width:100%;
}
.mainFeature {
  margin-top: 200px;
}

.shadowy
{
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    background-color:white;
}

.cardGreen {
    background:#3c3c3c;
    padding:15px;
    color:white;
    border-radius: 15px;
    min-height: 120px;
    width:300px;
    -webkit-box-shadow: -1px 5px 20px 5px rgba(0,0,0,0.36); 
    box-shadow: -1px 5px 20px 5px rgba(0,0,0,0.36);
    text-align: right;
    opacity: 0.8;
    transition: opacity 1s;
    cursor: pointer;
}
.cardGreen:hover {
    opacity:1;
}
.cardGreen h3 {
    font-size:16pt; color:white; margin-bottom: 5px;
}

.cardGreen a {
    text-align: left; font-size:12px; width:100%; display: block; margin-top:15px
}

.cardGold {
    background:#ffd575;
    padding:15px;
    color:black;
    border-radius: 15px;
    min-height: 120px;
    width:300px;
    -webkit-box-shadow: -1px 5px 20px 5px rgba(0,0,0,0.36); 
    box-shadow: -1px 5px 20px 5px rgba(0,0,0,0.36);
    text-align: right;
    opacity: 0.8;
    transition: opacity 1s;
    cursor: pointer;
}
.cardGold:hover {
    opacity:1;
}
.cardGold h3 {
    font-size:16pt; color:black; margin-bottom: 5px;
}

.cardGold a {
    text-align: left; font-size:12px; width:100%; display: block; margin-top:15px
}

.aboutGradient {
    text-align: right; background: whitesmoke;padding-top: 35px;padding: 35px;
    box-shadow: 1px 10px 60px -26px rgba(0,0,0,0.75);
    -webkit-box-shadow: 1px 10px 60px -26px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 10px 60px -26px rgba(0,0,0,0.75);
}

#arrow {
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:10px;
    height:10px;
    transform: rotate(-45deg);
    margin-top:40px;
}

.others ul li {
    position: relative;
      padding-bottom: 10px;
  }

.others ul {
    list-style: none;
  }

.others li:before{
    content: '';
    position: absolute;
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:10px;
    height:10px;
    top: calc(50% - 4px);
    right: -20px;
    transform: translateY(-50%) rotate(-225deg);
 }  

 
.others2 ul li {
    position: relative;
      padding-bottom: 10px;
  }

.others2 ul {
    list-style: none;
  }

.others2 li:before{
    content: '';
    position: absolute;
    border-right:2px solid white;
    border-bottom:2px solid white;
    width:10px;
    height:10px;
    top: calc(50% - 4px);
    right: -20px;
    transform: translateY(-50%) rotate(-225deg);
 }  


 .Aligner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .Aligner-item {
    max-width: 100%;
  }
  
  .Aligner-item--top {
    align-self: flex-start;
  }
  
  .Aligner-item--bottom {
    align-self: flex-end;
  }
 
  
  .tabNav {
    background-color:rgba(0,0,0,0.5);
    cursor: pointer;
    text-align: right;
    padding: 15px;
    padding-bottom: 20px;
    -webkit-transition: background-color 0.1s ease-in-out;
    -moz-transition: background-color 0.1s ease-in-out;
    -ms-transition: background-color 0.1s ease-in-out;
    -o-transition: background-color 0.1s ease-in-out;
    transition: background-color 0.1s ease-in-out;
    height: 100px;border-left:1px solid black
  }
  .tabNav h4 {
      color:white;
      font-weight: 100;
  }
  .tabNav:hover {
    background-color:rgba(255,255,255,0.7);
    -webkit-transition: background-color 0.4s ease-in-out;
    -moz-transition: background-color 0.4s ease-in-out;
    -ms-transition: background-color 0.4s ease-in-out;
    -o-transition: background-color 0.4s ease-in-out;
    transition: background-color 0.4s ease-in-out;
      opacity: 1;
      border-bottom:solid 5px #449D44
  }
  .tabNav:hover h4 {
      color:black
  }

  .contactDropdown {
      padding:15px;
      margin-top:35px;
      background:rgba(0,0,0,0.7);
      border:none;
      border-bottom:1px solid white;
      width: 300px;
      color:white;
  }
.contactDropdown:focus-visible {
    outline: none;
}

.cont {
    background-image: url('../images/others/stem.png'); 
    background-size:contain; 
    background-position: left center; 
    background-attachment: 
    fixed;background-repeat: 
    no-repeat;transition: all 200ms linear;
  }
.contgr {
    background-image: url('../images/others/stemgr.png');
    background-size: contain;
    background-position: left center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    transition: all 200ms linear;
}


.contgraduated {
    background-image: url('../images/others/graduated.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
   /*transition: all 200ms linear;*/
}
  .cont.blur {
    filter: blur(5px);
  }
  .cont2.blur {
    filter: blur(5px);
  }
  #home.blur{
    filter: blur(5px);
  }
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
  }
  .modal2 {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
  }
  .modal3 {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
  }
  .modal4 {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
  }
  .modalGeneral {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
  }
  .modal5 {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
  }

.modal6 {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
}
.modal7 {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
}
  .modal .content {
    position: relative;
    padding:35px; padding-top: 50px;
    width: 70%;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 0px;
    background-color: #fff;
    -webkit-box-shadow: 2px 5px 16px -2px #000000; 
    box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25);
    text-align: right;
  }
  .modal2 .content {
    position: relative;
    padding:25px; padding-top: 50px;
    width: 80%;
    max-height: 80vh;
    overflow-y: hidden;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.7);
    -webkit-box-shadow: 2px 5px 16px -2px #000000; 
    box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25);
    text-align: right;
  }
  .modal3 .content {
    position: relative;
    padding:25px; padding-top: 50px;
    width: 80%;
    max-height: 80vh;
    overflow-y: hidden;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.7);
    -webkit-box-shadow: 2px 5px 16px -2px #000000; 
    box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25);
    text-align: right;
  }
  .modal4 .content {
    position: relative;
    padding:25px; padding-top: 50px;
    width: 80%;
    max-height: 80vh;
    overflow-y: hidden;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.7);
    -webkit-box-shadow: 2px 5px 16px -2px #000000; 
    box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25);
    text-align: right;
  }
  .modal5 .content {
    position: relative;
    padding:25px; 
    width: 80%;
    max-height: 80vh;
    overflow-y: hidden;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.7);
    -webkit-box-shadow: 2px 5px 16px -2px #000000; 
    box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25);
    text-align: right;
  }
.modal6 .content {
    position: relative;
    padding: 25px;
    padding-top: 50px;
    width: 80%;
    max-height: 80vh;
    overflow-y: hidden;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.7);
    -webkit-box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25);
    text-align: right;
}
.modal7 .content {
    position: relative;
    padding: 25px;
    padding-top: 50px;
    width: 80%;
    max-height: 80vh;
    overflow-y: hidden;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.7);
    -webkit-box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25);
    text-align: right;
}
  .modalGeneral .content {
    position: relative;
    padding:25px; 
    width: 80%;
    max-height: 80vh;
    overflow-y: hidden;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.9);
    -webkit-box-shadow: 2px 5px 16px -2px #000000; 
    box-shadow: 2px 5px 16px -2px #000000;
    box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25);
    text-align: right;
  }
  .modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #7080af;
    clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%);
  }
  .modal2 .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #7080af;
    clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%);
  }
  .modal3 .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #7080af;
    clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%);
  }
  .modal4 .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #7080af;
    clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%);
  }
  .modal5 .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #7080af;
    clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%);
  }
  .modalGeneral .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #7080af;
    clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%);
  }

 .modal6 .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #7080af;
    clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%);
}

.modal7 .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #7080af;
    clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%);
}
  .modal.open {
    opacity: 1;
    visibility: visible;
  }
  .modal.open .content {
    transform: scale(1);
  }

  .modal2.open {
    opacity: 1;
    visibility: visible;
  }
  .modal3.open {
    opacity: 1;
    visibility: visible;
  }

  .modal4.open {
    opacity: 1;
    visibility: visible;
  }
  .modal5.open {
    opacity: 1;
    visibility: visible;
  }
  .modalGeneral.open {
    opacity: 1;
    visibility: visible;
  }
.modal6.open {
    opacity: 1;
    visibility: visible;
}
.modal7.open {
    opacity: 1;
    visibility: visible;
}
  .modal2.open .content {
    transform: scale(1);
  }
  .modal3.open .content {
    transform: scale(1);
  }
  .modal4.open .content {
    transform: scale(1);
  }
  .modal5.open .content {
    transform: scale(1);
  }
  .modalGeneral.open .content {
    transform: scale(1);
  }
.modal6.open .content {
    transform: scale(1);
}
.modal7.open .content {
    transform: scale(1);
}
  .hideContent {
      display:none !important;
  }
  .showContent {
      display: block !important;
  }
  .second .clearfix {
      background:red
  }

  .calendarTab{
    background-color: rgba(0,0,0,0.5); color:white; text-align: right; padding:15px;margin-bottom: 1px;
    cursor: pointer; opacity: 0.5; width:100%;
  }
  .calendarTab:hover {
    opacity: 1;
    transition: all 200ms linear;
  }

  .calendarItem{
    float:right; width:16.5%; min-height:165px; background:rgba(255,255,255,0.8); outline: 1px solid rgba(25); margin-top:1px; margin-left:1px;
    opacity:0.8; cursor: pointer;
    transition: all 200ms linear;
  }

  .calendarItem:hover{
    opacity: 1;
    transition: all 200ms linear;
  }

  .calendarBlank { 
    float:right; width:16.5%; min-height:165px; background:rgba(0, 0, 0, 0.3); outline: 1px solid rgba(25); margin-top:1px; margin-left:1px;
  }

  
.videoItem {
  background:rgba(0,0,0,0.1); padding:15px; margin-bottom:1px; color:white;transition: all 200ms linear;cursor: pointer;
}

.imageItem {
  margin-bottom:25px !important; filter: grayscale(60%); opacity:0.8;padding:15px; width:100%; height:250px; margin-bottom:1px; color:white;transition: all 200ms linear;cursor: pointer;
}
.imageItem:hover {
  transition: all 200ms linear;
  opacity:1;
  filter: grayscale(0%);
}
.videoItem:hover {
  transition: all 200ms linear;
  background:rgba(0,0,0,0.5);
}

.noScroll {
  overflow-y: hidden;
  height: 100vh;
}

.waitModal {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 0, 0, 0, .5 )
  url('loading.svg')
  50% 50%
  no-repeat;
}

body.loading {
  overflow: hidden;
}
body.loading .waitModal {
  display: block;
}

#sideDrawerContainer {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100vh;
  position:fixed;
  display: block;
  z-index:9999999 !important;
  display:none;
  opacity: 0;
  transition: all 0.3s ease;
}
#sideDrawerContainer.open {
  display: block;
  opacity: 1;
  transition: all 0.3s ease;
}

#sideDrawer {
  width:300px;
  height:100vh;
  padding:25px;
  background-color: rgba(38,143,86,0.85); background-image: url('../images/others/pattern_new.png');
  position:absolute;
  left:-300px;
  top:0;
  -webkit-box-shadow: 14px 5px 15px -11px rgba(0,0,0,0.67); 
  box-shadow: 14px 5px 15px -11px rgba(0,0,0,0.67);
  color:white;
  display: none;
  opacity: 0;
  z-index: 9999;
  transition: all 2.3s ease;
}
#sideDrawer.open {
  left:0px;
  display: block;
  opacity: 1;
  transition: all 2.3s ease;
}

#sideDrawer a {
  text-align: right;
  margin-right: 10px;
  margin-top: 10px;
  color: white;
  opacity: 0.8;
  text-decoration: none;
  transition: all 1s ease;
  width:100%;
}
#sideDrawer a:hover {
  opacity: 1;
  transition: all 1s ease;
}

.sideDrawer-toggler {
  padding: 8px;
  background: rgba(0, 0, 0, 0.5);
  margin-right: 4px;
}

.sideDrawer-toggler .toggler-icon {
  width: 20px;
  height: 2px;
  background-color: var(--white);
  display: block;
  margin: 3px 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.sideDrawer-toggler.active .toggler-icon:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 7px;
}

.sideDrawer-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.sideDrawer-toggler.active .toggler-icon:nth-of-type(3) {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: -7px;
}


.gridz {
  width:100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
  max-width: 1500px;
  padding: 0 15px;
  margin: 30px auto;

}
 
.gridz li {
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gray);
  opacity: 1;
  cursor: pointer;
  filter: grayscale(0%);
  -webkit-transition: all 0.3s ease-out 0s;

}
.gridz li a div {
  width:100%; height:100%; background:rgba(255,255,255,0);padding:15px;
}
.gridz li a div h4{
  font-size:20px; font-weight: 100;color:black; text-align: center; margin-top: 45%; display: none; opacity:0;
}
.gridz li:hover {
  opacity: 1;
  filter: grayscale(0%);
  -webkit-transition: all 0.3s ease-out 0s;
}
.gridz li:hover a {
  width:100%;
  height:100%;
}
.gridz li:hover a div{
  -webkit-transition: all 0.3s ease-out 0s;
  border: 20px solid rgba(0,0,0,0.6);
  box-shadow: inset 0px 0px 0px 10px rgba(255,255,255,0.6);
  width:100%; height:100%; background:rgba(255,255,255,0.7);
}
.gridz li:hover a div h4{
  display: block; opacity:1;
  -webkit-transition: all 0.9s ease-out 0s;
}
.gridz li:nth-child(10n + 1):not(:nth-last-child(-n + 3)),
.gridz li:nth-child(10n + 8):not(:last-child) {
  grid-row: auto / span 2;
  height: 100%;
}
 
.gridz li:nth-child(5) ~ li {
  display: none;
}
 
.ajax-load-more {
  font-weight: bold;
  font-size: 18px;
  min-width: 200px;
  padding: 20px;
  color: var(--white);
  background: var(--green);
  border:none;
  outline: none;
}
 
 
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 800px) {
  .gridz li {
    height: 250px;
  }
}
 
@media screen and (max-width: 500px) {
  .gridz li {
    height: 150px;
  }
}

.navbar-nav .nav-item {
    position: relative;
    padding: 0px 10px;
}