html,
body {
  font: 14px / 14px Avenir, 'Avenir Next', sans-serif;
  background-color: black;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  height: auto !important;
  height: 100%;
  --plyr-color-main: #353333;
  max-width: 100%;
  overflow-x: none;
  /* min-width: 108vw; */
  /* height: 100%;
  width: 100%; */
}
* {
  outline: none;
  object-fit: contain;
}

/* p {
  padding: 2em 2em 5em;
} */

.content{
  padding-top: 50px;
  display: inline-block;
  min-width: 50vw;
}

a {
  text-decoration: none;
  position: relative;
  /* color: inherit; */
  color: white;
  font-size: 12px;
}
@media only screen and (min-width: 992px) {
  a::after {
    position: absolute;
    content: '';
    height: 0.1em;
    top: 65%;
    background: currentColor;
    z-index: 1;
    left: 0;
    right: 0;
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    /* color: white; */
    text-decoration: none;
  }

  .masonary_type_1 {
    display: inline;
    margin-top: 15px;
  }
  .masonary_type_2 {
    display: inline-flex;
  }

}
.award{
  height: 6vw;
  width: 4vw;
  background-position: center;
  /* background-image: url(./dubailynx.png); */
  background-repeat: no-repeat;
  background-size: contain;
  float: right;
    position: relative;
     margin-top: -0.6vh; 
}

.awardIcon{
  height: 5vh;
  width: 2vw;
  /* background-image: url(./dubailynx.png); */
  background-repeat: no-repeat;
  background-size: contain;
}
.row-award{
  display: inline-flex;
  width: 12vw;
  height: 1vh;
  margin-bottom: 5vh;
}

.awardText{
  width: 5.99vw;
  padding-left: 10px;
}


.award-modal{
 
  display: inline-flex;
  z-index: 5;
  position: absolute;
  top: 1.2vh;
}


.award-modal{
  height: 6vw;
  width: 4vw;
  background-position: center;
  /* background-image: url(./dubailynx.png); */
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(63vw, 0%);
}

/* @media only screen and (min-width: 1600px) {
  a::after {
    position: absolute;
    content: '';
    height: 0.1em;
    top: 65%;
    background: currentColor;
    z-index: 1;
    left: 0;
    right: 0;
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    text-decoration: none;
  }

  .masonary_type_1 {
    display: inline-flex;
  }
  .masonary_type_2 {
    display: inline-flex;
    margin-top: 30px;
  }
  #about {
    float: right;
    left: 2640px;
    position: relative;
    top: 5px;
    color: white;
  }

  #reel {
    left: 2740px;
    position: relative;
    top: 5px;
    color: white;
  }
  #home {
    float: left;
    top: 5px;
    padding-left: 20px;
    color: white;
  }
} */

a:hover {
  background: black;
}
#projects {
  min-height: 700px;
  display:grid;
  min-width: 100vw;
}

.nav > li > a:focus,
.nav > li > a:hover {
  text-decoration: none;
  background-color: transparent;
  color: whitesmoke;
}

a:hover::after {
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: scaleX(0.72);
 
  text-decoration: none;
}

.side-nav {
  width: 100vh;
  height: 45px;
  position: fixed;
  -webkit-transform-origin: left top;
  -webkit-transform: rotate(-90deg) translateX(-100%);
  color: white;
  margin-top: 180px;
}

.sideList {
  margin-right: 20px;
  float: right;
  height: 100%;
  line-height: 45px;
  list-style-type: none;
  color: white;
  font-size: 14px;
}

.bootbox {
  left: auto !important;
  width: auto !important;
  margin-left: auto !important;
  background-color: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 50% !important;
  overflow: visible !important;
  transition: opacity 0.15s linear 0s !important;
}

.masonary_type_4 {
  display: inline-flex;
}
.row {
  display: inline;
  margin-left: 2px;
}

.masonary_type_5 {
  display: inline-flex;

}

.column {
  margin-left: 0px;
  float: left;
}
.column1 {
  width: 47vw;
  margin-top: 15px;
}
.column2 {
  float: left;
  margin-left: 100px;
  margin-top: 30px;
}

.top-left {
  position: absolute;
  margin-top: -20px; 
  font-size: 12px;
}

.top-left {
  position: absolute;
  margin-top: -20px; 
  font-size: 12px;
}

.top-right {
  margin-top: -20px; 
  font-size: 12px;
  margin-left: auto;
  margin-right: 0;
}

.top-right-prev {
  position: absolute;
  margin-top: -20px; 
  font-size: 12px;
  margin-left: 24vw;
  text-align: end;
}

.top-left-last {
  position: absolute;
  padding-bottom: 5px; 
  font-size: 10px;
  margin-top: -20px;
}

footer {
  height: 100px;
  margin-left: 100px;
}

#git {
  left: 100px;
}

.content-about {
  display: inline-flex;
  width: max-content;
}

#img_asem {
  background-image: url('images/about.jpg');
  width: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  height: 550px;
  vertical-align: middle;
  margin-right: 60px;
  background-position: center;
}

#text-content {
  color: white !important;
  vertical-align: middle;
  width: 600px;
  text-align: left;
}

p {
  color: white !important;
}

.last {
  height: 370 !important;
}

#closeModal {
  color: white !important;
  font-size: 14px;
  text-decoration: none;
  margin-top: -10px;
  margin-left: inherit !important;
  padding-right: 50px;
  padding-left: 50px;
  padding-bottom: 2vh;
  opacity: unset !important;
  font-weight: unset !important;
  text-shadow: none;
}

.social{
  padding-left: 10vw;;
  cursor:pointer;
}



/* ==========================================================================
   Desktop: single-screen layout (100vh, no page scroll)
   Mobile pages (mobile*.html / mobile3.css) are not affected.
   ========================================================================== */
@media only screen and (min-width: 992px) {
  html,
  body {
    height: 100vh !important;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  body > header,
  body > ul.nav,
  body > footer {
    flex: 0 0 auto;
  }

  /* Home: nav on top, projects fill the remaining height */
  .content {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    padding-top: 0;
    position: relative;
  }

  #projects {
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Footer: compact, scoped so the project modal is unaffected */
  footer {
    height: auto;
    margin-left: 100px;
    padding-bottom: 8px;
  }

  footer .container-info {
    margin-top: 0 !important;
    height: auto;
  }

  footer .row-info-body {
    height: auto;
  }

  footer h5 {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  /* About: single column, internal scroll between nav and footer */
  .content-about {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 100px !important;
    align-items: center;
    justify-content: center;
  }

  .content-about #img_asem {
    flex: 0 0 auto;
    width: clamp(220px, 22vw, 400px);
    height: min(550px, 100%);
    margin-right: 60px;
  }

  .content-about #text-content {
    flex: 0 1 auto;
    width: min(46vw, 640px);
    max-height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 28px 18px 28px 0;
    font-size: clamp(12px, 1.9vh, 15px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }

  .content-about #text-content p {
    margin: 0;
    font-size: inherit;
    line-height: 1.6 !important;
  }

  /* Thin dark custom scrollbars for internal scroll areas */
  #projects,
  .content-about #text-content {
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent;
  }

  #projects::-webkit-scrollbar,
  .content-about #text-content::-webkit-scrollbar {
    width: 6px;
  }

  #projects::-webkit-scrollbar-track,
  .content-about #text-content::-webkit-scrollbar-track {
    background: transparent;
  }

  #projects::-webkit-scrollbar-thumb,
  .content-about #text-content::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 3px;
  }

  #projects::-webkit-scrollbar-thumb:hover,
  .content-about #text-content::-webkit-scrollbar-thumb:hover {
    background: #8a8a8a;
  }
}