/* CSS Document */

/*
Theme Name: Musrara Graduation 2025
Author: Taya Sourikov
Description: template for Musrara Graduation website
Text Domain: musrara-textdomain
Domain Path: /languages
Version: 1.0.1
*/
:root {
  --mm-dark-text-color: #000000;
  --mm-light-text-color: #ffffff;
  
  --mm-dark-button-text-color: #ffffff;
  --mm-light-button-text-color: #B49664;
  
  --mm-dark-bg-color: #000000;
  --mm-light-bg-color: #eeeeee;
  
  --mm-secondary-color: #B49664;
  
  --swiper-pagination-color: var(--text-color);
  --swiper-pagination-bullet-size: 0.5em;
  --swiper-pagination-bullet-width: 0.5em;
  --swiper-pagination-bullet-height: 0.5em;
  --swiper-pagination-bullet-inactive-color: var(--text-color);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 0.1em;
}
body{
  font-family: "Ping ", sans-serif;
  font-weight: normal;
  direction: rtl;
  padding: 0;
  margin: 0;
  background: var(--mm-light-bg-color);
  color: var(--mm-dark-text-color);
  font-size: 1.4vw;
}
.clearfix::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  clear: both;
  float: none;
}
.container{
  width: 90%;
  margin: 0 auto;
}

.page-content a{
  color: var(--mm-dark-text-color);
  text-decoration: underline;
}
.page-content a:focus,
.page-content a:hover{
  text-decoration: none;
}
h1, h2{
  font-size: 3.3em;
  line-height: 1em;
  font-weight: normal;
}
.mm-button{
  display: inline-block;
  text-decoration: none;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 2.9em;
  padding: 0 1.65em;
  border-radius: 2.2em;
  text-wrap: nowrap;
}

#site_header{
  position: fixed;
  top: 0;
  width: 96%;
  padding: 1.5vw 2%;
  z-index: 9999;
  /*display: flex;*/
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
}
#site_navigation{
  text-align: left;
}
#site_navigation ul{
  list-style: none;
  background: var(--mm-dark-text-color);
  padding: 0 0.55em;
  margin: 0;
  display: inline-block;
  border-radius: 2.2em;
}
#site_navigation ul li{
  display: inline-block;
  float: inline-start;
}
#site_navigation ul li a{
  display: inline-block;
  background: var(--mm-dark-text-color);
  color: var(--mm-light-text-color);
  text-decoration: none;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 2.9em;
  padding: 0 0.88em;
  border-radius: 2.2em;
  transition: 0.3s;
}
body.home #main_logo img{
  filter: invert(1);
}
body.home #site_navigation ul,
body.home #site_navigation ul li a{
  background: var(--mm-light-text-color);
  color: var(--mm-dark-text-color);
}
/*
#site_navigation ul li.current-menu-item.page_item a{
  font-weight: 900;
}
*/
#site_navigation ul li a:hover,
#site_navigation ul li a:focus{
  color: var(--mm-secondary-color);
}
#musrara{
  line-height: 1em;
  text-align: right;
}
#musrara span{
  display: inline-block;
}
#main_logo img{
  width: auto;
  height: 2em;
}
#department_logo img{
  width: 2.5em;
  height: auto;
  display: block;
  margin: 0 auto;
}

.site_description{
  background: #22171b;
  color: var(--mm-light-text-color);
  padding: 4.8vw 5%;
}
.site_description p{
  margin: 0;
  font-size: 3.1em;
  line-height: 1.1em;
  letter-spacing: -0.02em;
}  
.site_description a{
  background: #eee6dd;
  color: #000000;
  margin-top: 3em;
}
.site_description a:focus,
.site_description a:hover{
  background: #B49664;
  color: #000000;
}
footer .contact-wrapper{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  background: #ffffff;
}
footer div.contact{
  background: var(--mm-secondary-color);
  color: var(--mm-light-text-color);
  align-self: center;
  align-content: top;
  height: 100%;
}
footer div.contact > div{
  padding: 1.5em 20% 3em;
  text-align: center;
}
footer div.contact h3{
  font-weight: normal;
  font-size: 2em;
  line-height: 1em;
  margin-bottom: 0;
}
footer div.contact p{
  font-size: 0.9em;
  font-weight: 700;
}

footer .contact-wrapper div.insta{
  background: #ffffff;
  text-align: center;
  align-self: center;
  padding: 1em 0 1.5em;
}
footer .contact-wrapper div.insta a{
  display: inline-block;
  text-decoration: none;
  color: var(--mm-secondary-color);
  transition: 0.3s;
}
footer .contact-wrapper div.insta a:hover,
footer .contact-wrapper div.insta a:focus{
  color: var(--mm-dark-text-color);
}
footer .contact-wrapper div.insta a:hover .icon,
footer .contact-wrapper div.insta a:focus .icon{
  background: var(--mm-dark-text-color);
}
footer .contact-wrapper div.insta .title{
  font-size: 2em;
  line-height: 1em;
  font-weight: 400;
}
footer .contact-wrapper div.insta .icon{
  width: 45%;
  height: 45%;
  margin: 1em auto 1.5em;
  background: var(--mm-secondary-color);
  border-radius: 50%;
  padding: 15%;
}
footer .contact-wrapper div.insta .icon img{
  width: 100%;
  height: auto;
  display: block;
}
footer .contact-wrapper div.insta .description{
  font-size: 0.9em;
  font-weight: 700;
}
.sponsors-wrapper{
  height: 75px;
  padding: 10px 0 6px;
  background: #000000;
}
.sponsors-wrapper .swiper-slide{
  width: auto;
}
.sponsors-wrapper img{
  height: 68px;
  width: auto;
  display: block;
}

/*
.gallery-wrapper{
  counter-reset: item;
  padding-right: 5em;
}
.gallery-item{
  position: relative;
  margin-top: 1.5em;
}
.gallery-item:before{
  content: "/" counter(item);
  counter-increment: item;
  font-size: 0.8em;
  line-height: 1em;
  position: absolute;
  display: inline-block;
  right: -2em;
  top: 0;
}
.gallery-wrapper img{
  max-width: 100%;
  height: auto;
  display: block;
}
*/
.graduates{
  padding: 3em 0 4em 0;
  position: relative;
}
.graduates h1{
  margin-top: 0;
}
.grad-list-panel{
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.35em;
  margin-bottom: 2em;
  font-size: 1.5em;
}
.grad-list-panel a{  
  font-weight: 900;
  text-decoration: none;
  color: var(--mm-dark-text-color);
}
.grad-list-panel a:hover,
.grad-list-panel a:focus{
  color: #B49664;
}
.grad-list-panel a.active{
  color: #000000;
  border-bottom: 4px solid #000000;
}

.grad-list.gallery{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  align-content: flex-start;
  align-items: flex-start;
}
.grad-list.gallery a{
  display: block;
  text-decoration: none;
  color: var(--mm-dark-text-color);
  font-size: 0.9em;
  line-height: 1.2em;
}
.grad-list.gallery .list-thumbnail{
  position: relative;
  height: 0;
  padding-top: 100%; 
  margin-bottom: 0.5em;
}
.grad-list.gallery .list-thumbnail img{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grad-list.gallery .list-title{
}
.grad-list.gallery .list-project{
  font-weight: 700;
}
.grad-list.gallery a:hover .list-thumbnail::before,
.grad-list.gallery a:focus .list-thumbnail::before{
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: var(--mm-secondary-color);
  mix-blend-mode: multiply;
}
.grad-list.gallery a:hover .list-thumbnail::after,
.grad-list.gallery a:focus .list-thumbnail::after{
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;  
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 21%;
  z-index: 3;
  filter: invert(100%);
}
.grad-list.gallery a.dep-a:hover .list-thumbnail::after,
.grad-list.gallery a.dep-a:focus .list-thumbnail::after{
  background-image: url("images/department-a.png");
}
.grad-list.gallery a.dep-vc:hover .list-thumbnail::after,
.grad-list.gallery a.dep-vc:focus .list-thumbnail::after{
  background-image: url("images/department-vc.png");
}
.grad-list.gallery a.dep-nm:hover .list-thumbnail::after,
.grad-list.gallery a.dep-nm:focus .list-thumbnail::after{
  background-image: url("images/department-nm.png");
}
/*
.grad-list.gallery a:hover,
.grad-list.gallery a:focus{
  color: #FF5A3D;
}
*/
.grad-list.abc{
  column-count: 2;
  column-gap: 4em;
}
.grad-list.abc .list-project{
  display: none;
}
.grad-list.abc .list-thumbnail{
  display: none;
}
.grad-list.abc .grad-list-item{
  /*border-top: solid 4px #000000;*/
  break-inside: avoid-column;
}
.grad-list.abc .grad-list-item:last-child{
  /*border-bottom: solid 4px #000000;*/
}
.grad-list.abc .grad-list-item a{
  padding: 0.3em 0;
  color: var(--mm-dark-text-color);
  text-decoration: none;  
  display: flex;
  column-gap: 0.75em;
  align-items: flex-start;
}

.grad-list.abc .grad-list-item a:hover {
  color: #B49664;
}

.grad-list.abc .grad-list-item a::before{
  content: "";
  height: 2.5em;
  width: 2.5em;
  display: inline-block;
  margin-top: 1.3em;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.grad-list.abc .grad-list-item a.dep-nm::before{
  background-image: url("images/department-nm.png");
}
.grad-list.abc .grad-list-item a.dep-vc::before{
  background-image: url("images/department-vc.png");
}
.grad-list.abc .grad-list-item a.dep-a::before{
  background-image: url("images/department-a.png");
}

.grad-list.abc .grad-list-item .list-title{
  display: inline-block;
  font-size: 3.4em;
}

.events{
  padding: 1em 0 4em;
  background: #22171b;
  color: var(--mm-light-text-color);
}
.events h2{
  font-size: 1.5em;
  font-weight: 900;
  margin: 1.7em 0 2em;
}
.event-item{
  padding: 0.85em 0 0.95em 0;
  border-top: solid 2px var(--mm-light-text-color);
}

.event-item:last-child{
  border-bottom: solid 2px var(--mm-light-text-color);
}
.event-header{
  display: grid;
  grid-template-columns: 25% 60% 15%;
  font-size: 3.1em;
  font-weight: 400;
  text-decoration: none;
  color: var(--mm-light-text-color);
}

.event-time{
  text-align: end;
}
.event-description{
  margin: 3em 25% 3em 15%;
  display: none;
}
.event-description a{
  color: #f5f5f5;
}
.event-item.open .event-description{
  display: block;
}

.single-page{
  padding: 1em 0 4em;
  margin: 0 auto;
}
.page-header{
  text-align: center;
  margin-top: 5em;
  margin-bottom: 5em;
}
.page-title{
  margin: 0;
  font-size: 5em;
  line-height: 1em;
  letter-spacing: -0.02em;
}
.page-subtitle{
  font-size: 5em;
  line-height: 1em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.page-meta{
  width: 15%;
  margin-inline-start: 15%;
  float: inline-start;
  font-weight: 700;
  padding-bottom: 3em;
}
.page-meta h4{
  font-size: 0.65em;
  font-weight: normal;
  margin: 0;
}
.page-meta p{
  margin-top: 0;
}
.page-content > p{
  margin: 4em auto;
}
.page-content > p.narrow{
  width: 48%;
  margin: 1.25em auto;
  padding-inline-start: 15%;
}
.inline-gallery{
  margin: 4em auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
}
.inline-gallery img{
  width: 100%;
  height: auto;
}
.inline-gallery .caption{
  font-size: 0.65em;
}
/*
.subscriber{
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
}
.subscriber:hover,
.subscriber:focus{
  color: #000000;
}
.subscriber span{
  position: relative;
  top: 0.03em;
}
*/
#subscribe_form_wrapper{
  position: fixed;
  width: 100%;
  top: 3em;
  right: 0;
  display: none;
  z-index: 99999;
}
.subscibe-form{
  color: var(--mm-light-text-color);
  background: var(--mm-secondary-color);
  border-radius: 0;
  padding: 10px 20px;
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 99;
  text-align: center;
}
.subscibe-form h3 + .subscibe-form p{
  font-weight: 900;
}
.subscibe-form h3{
  font-size: 2.2em;
  line-height: 1.2em;
  margin: 0 auto;
  max-width: 300px;
  padding-top: 10px;
}
.subscibe-form .wpcf7-form{
  width: 90%;
  margin: 0 auto;
}
#subscribe_form_wrapper::before{
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.65);
  z-index: 10;
}
.close_subscribe_form{  
  background-color: var(--mm-light-text-color);;
  border: solid 0.55em var(--mm-light-text-color);;
  outline: none;
  width: 4em;
  height: 4em;
  line-height: 1em;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: -5.5em;
  top: 0;
  z-index: 999;
  cursor: pointer;
}
.close_subscribe_form img{
  width: 100%;
  height: auto;
  display: block;
}
.close_subscribe_form:hover, 
.close_subscribe_form:focus{
  background-color: #000000;
  border-color: #000000;
}
.subscibe-form input[type=submit]{
  background: var(--mm-light-text-color)!important;
  color: var(--mm-secondary-color)!important;
}
.subscibe-form input[type=submit]:hover{
  background: #000000!important;
}

@media(max-width: 767px){
  #subscribe_form_wrapper{
    top: 6em;
  }
  .subscibe-form{
    width: calc(90% - 6em);
  }
  .subscibe-form h3{
    font-size: 1.4em;
  }
  .subscibe-form .wpcf7-form{
    width: 100%;
  }
  .close_subscribe_form{  
    left: 0;
    top: -4em;
    width: 3em;
    height: 3em;
    border-width: 0.3em;
  }
}
.swiper-wrapper {
  -webkit-transition-timing-function:linear!important; 
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important; 
}
.info-strip{
  font-size: 1.6em;
  line-height: 2em;
  background: var(--mm-light-bg-color);
  color: var(--mm-dark-text-color);
}

.info-strip .swiper-slide{
  display: inline-block;
  width: auto;
}
.info-strip .swiper-slide-inner{
  display: flex;
}
.info-strip .swiper-slide-inner a{
  display: inline-block;
  font-weight: 700;
  color: var(--mm-dark-text-color);
  text-decoration: none;
}
.info-strip .swiper-slide-inner a::after{
  content: "";
  display: inline-block;
  height: 0.5em;
  width: 0.5em;
  background: var(--mm-dark-text-color);
  transform: rotate(45deg);
  margin: 0 1em;
  position: relative;
  top: -0.1em;
}

body.single-graduate .info-strip{
  background: var(--mm-secondary-color);
  color: var(--mm-light-text-color);
}
body.single-graduate .info-strip .swiper-slide-inner a{
  color: var(--mm-light-text-color);
}
body.single-graduate .info-strip .swiper-slide-inner a::after{
  background: var(--mm-light-text-color);
}
#department_mobile_logo,
.hide-on-desktop{
  display: none;
}
@media(max-width: 767px){
  body{
    font-size: 4vw;
  }
  .hide-on-desktop{
    display: inherit;
  }
  .hide-on-mobile{
    display: none;
  }
  #site_header{
    width: 90%;
    padding: 3vw 5% 2vw;
    background: #000000;
  }
  #main_logo img{
    filter: invert(1);
    height: 7vw;
  }
  .nav-toggle{
    display: inline-block;
    text-align: left;
  }
  #toggle-menu{    
    display: inline-block;
    text-decoration: none;
    width: 7vw;
    height: 7vw;
    background-color: #eeeeee;
    border-radius: 50%;
  }
  #toggle-menu::after{
    content: "";
    display: inline-block;
    background: url("images/menu-toggle.svg") no-repeat center center;
    background-size: 50%;
    width: 7vw;
    height: 7vw;
  }
  body.menu-open #toggle-menu::after{
    background: url("images/menu-close.svg") no-repeat center center;
    background-size: 50%;
  }  
  header#site_header nav{
    display: none;
  }
  
  body.menu-open header#site_header nav{
    background: var(--mm-secondary-color);
    display: block;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: calc(100vh - 12.5vw);
    top: 12.5vw;
    left: 0;
    text-align: center;
    z-index: 9;
  }
  body.menu-open header#site_header nav ul{
    background: none;
    display: block;
    font-size: 2.4em;    
    text-align: start;
    padding: 0.5em 5% 0;
  }
  #site_navigation ul li{
    display: block;
    float: none;
  }
  #site_navigation ul li.current-menu-item.page_item a,
  #site_navigation ul li a{
    background: none;
    color: #EEEEEE;
    padding: 0;
    font-weight: 400;
    line-height: 1.4em;
  }
  
  #site_navigation ul li a:hover,
  #site_navigation ul li a:focus{
    color: var(--mm-dark-text-color);
  }
  
  footer .contact-wrapper{
    display: block;
  }
  footer .contact-wrapper div.insta{
    background: #eeeeee;
    padding: 2.5em 0;
  }
  .info-strip{
    font-size: 1.25em;
    background: #ffffff;
  }
  .site_description{
    padding: 2.5em 5% 3em;
  }
  .site_description p{
    font-size: 1.5em;
    line-height: 1.25em;
  }
  .site_description a{
    margin-top: 2em;
  }
  .container{
    width: 100%;
  }
  
  .page-meta{
    width: 90%;
    margin-inline-start: 0;
    float: none;
    margin: 0 auto;
    padding-bottom: 0;
    column-count: 2;
    column-gap: 2em;
  }
  .page-meta h4{
    font-size: 1em;
    break-after: avoid;
  }
  .page-meta p{
    break-inside: avoid-column;
  }
  .page-header{
    padding: 0 5%;
  }
  body.single-graduate .single-page{
    padding: 5.5em 0 4em;
  }
  /*
  body.single-graduate #department_logo{
    display: none;
  }
  */
  /*
  #department_mobile_logo{
    display: block;
    text-align: center;
    margin-bottom: 2.5em;
  }
  #department_mobile_logo img{
    width: 10vw;
  }
  */
  body.single-graduate .page-header{
    margin-top: 3em;
    margin-bottom: 1em;
  }
  body.single-graduate .page-meta{
    margin-top: 3em;
  }
  .page-title,
  .page-subtitle{
    font-size: 1.8em;
  }
  .page-content > p{
    margin: 3em 0;
  }
  .page-content > p.narrow {
    width: 90%;
    margin: 1.7em auto;
    padding-inline-start: 0;
  }
  .inline-gallery{
    grid-gap: 1em;
    grid-template-columns: 1fr;
  }
  .graduates{
    padding: 3em 5% 4em 5%;
  }
  .grad-list-panel{
    font-size: 1.5em;
  }
  .grad-list.abc{
    column-count: 1;
  }
  .grad-list.abc .grad-list-item .list-title{
    font-size: 1.875em;
  }
  .grad-list.abc .grad-list-item a:first-child{
    padding-top: 0;
  }
  .grad-list.abc .grad-list-item a::before{
    height: 1.5em;
    width: 1.5em;
    margin-top: 0.6em;
  }
  
  .grad-list.gallery{
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5em;
    grid-row-gap: 2.5em;
  }
  .events{
    padding: 1em 5% 4em 5%;
  }
  .events h2{
    font-size: 1.5em;
  }
  .event-header{
    font-size: 1.5em;
    line-height: 1em;
  }
  .event-header{
    grid-template-columns: 20% 60% 20%;
  }
  .event-description {
    margin: 2em 20% 2em 20%;
    margin-inline-end: 7.5%;
    font-size: 0.875em;
    line-height: 1.4em;
  }
}

@media(max-width: 1024px){
  #attachment_412 {
    width: 100% !important;
  }
}