@media screen and (min-width: 1500px) {
}
@media screen and (max-width: 1280px) {
  .submission-global-settings-section > iframe {
    height: 450px;
  }
}
@media screen and (max-width: 991px) {
  .subheading {
    font-size: 30px;
  }

  .btn.canvas-btn.d-lg-none {
    text-align: right;

    padding: 5px;

    width: auto;
  }

  header .offcanvas {
    background-color: #272727;

    height: 100vh;
  }

  header ul.navbar-nav.m-auto.align-items-center {
    align-items: self-start !important;
  }

  .offcanvas-header .btn-close {
    filter: invert(1);

    opacity: 1;
  }

  .main-header {
    padding: 0 4px;
  }

  .offcanvas-header {
    border-bottom: 1.5px solid #fff;
  }

  header ul.navbar-nav.ms-auto.align-items-center.white {
    align-items: flex-start !important;
  }

  .offcanvas-body ul li {
    padding: 4px 4px;
  }

  .wrong-photo .grid {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;

    gap: 7px;
  }

  .hero {
    padding: 40px 4px;
  }

  .fancybox-show-thumbs .fancybox-inner {
    bottom: 90px;
  }

  .fancybox-thumbs {
    width: 60%;
  }

  .wrong-photo .grid {
    height: 700px;

    overflow: auto;
  }
  .hero.wrong-photo .tab-content-item .grid .main .active img {
    height: 163px;
  }
  .wrong-photo .grid img {
    height: 161px;
  }
  .swiper-slide.image-width {
    width: 468px !important;
  }
  .header_blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .main-header nav.navbar.navbar-expand-lg {
    padding-top: 0;
    padding-bottom: 0;
  }
  header ul.navbar-nav.ms-auto.align-items-center.white {
    align-items: flex-start !important;
    padding: 0 16px 15px;
    background-color: #131112;
    position: absolute;
    width: 100%;
  }
  .navbar-nav li {
    padding: 5px 4px;
  }

  button.navbar-toggler {
    border: 0;
  }

  /* .main-header button.navbar-toggler.collapsed{
  background-color: transparent;
} */
  .main-header button.navbar-toggler {
    border-radius: 0;
    padding: 17px;
    transition: 0.8s all;
  }
  .main-header button.navbar-toggler[aria-expanded="true"] {
    background-color: #131112;
    transition: 0.4s all;
  }
  .main-header .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
  .main-header a.navbar-brand {
    padding-left: 16px;
  }
  .fof-image-error-msg,
  .fof-alt-caption-duplicate-error-msg {
    width: 40%;
  }
  section.hero.fof-lower.second.overflow-hidden .hero-hiker,
  section.hero.fof-lower.second.overflow-hidden h1 {
    padding-left: 16px;
    padding-right: 16px;
  }
  .swiper-hero-right .swiper-wrapper .swiper-slide:first-child {
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  #myProfile .modal-content {
    padding: 16px;
  }
  #crop-image-container .slider-img {
    bottom: -10px;
  }
  button.delete-crop {
    bottom: 72px !important;
    right: 0px;
  }
  button.switch-viewport {
    bottom: 72px !important;
    left: 0;
  }
  div.slider-img {
    bottom: 9px;
    left: 2px;
    width: 100%;
  }
  .cr-slider {
    padding: 0 !important;
  }
  div.croppie-container .cr-slider-wrap {
    width: 72%;
    margin: 20px 38px;
  }
  .slider-img {
    bottom: 6px;
  }
  /*div.cr-slider::-ms-track {

    height: 5px;
  } */
  .hero-slider .swiper-slide.image-width a {
    float: left;
  }
  .nav.nav-tabs.video-hr {
    border-top: 1px solid #ffffff;
    margin-top: 40px;
  }
  .buttonbelowvideo {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .form-input.video-form-input {
    float: left;
    width: 100%;
  }
  .form-input.video-form-input label {
    float: left;
    width: 86%;
    margin-bottom: 0;
  }
  .form-input.video-form-input input {
    float: left;
    width: 6%;
    margin-top: 10px;
  }
  .main-modal-box .modal-content {
    top: calc(47vh - 300px);
  }
  div#home-vidoe-project .video-iframe {
    width: 80%;
    left: 10%;
    position: relative;
    height: 60%;
    top: 5%;
  }
  .discriptopn-mainbox-preview p:first-child {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
  }
  .form-input.licence-section.nomargintop .upload-proof {
    margin-top: 40px;
  }
  .main-modal-box .modal-content {
    width: 100%;
    border: 1px solid #ffffff;
  }
  .cropbtn-mainbox .crop-button {
    width: 47%;
  }
  .dropImg.imgcrop-border button {
    width: 100%;
  }
  .dropImg.imgcrop-border button a {
    width: 100%;
  }
  button.btn.back-btn.text-white.border-white.project_upload_button_extra.fof-form-2-step-1-crop {
    margin-left: 0;
  }
  .fof-submission-next {
    margin-left: 0;
  }
  .fof-form-2-step-2-crop {
    margin-left: 0px;
  }
  .fof-form-2-step-3-crop {
    margin-left: 0px;
  }
  .fof-form-2-step-5-crop {
    margin-left: 0px;
  }
  .fof-form-2-step-4-crop {
    margin-left: 0;
  }
  .video-container .form-input {
    width: 100%;
  }
  .video-container .form-input iframe {
    width: 100%;
  }
  button.btn.back-btn.text-white.border-white.project_video_button_remove {
    margin-left: 0;
  }
  .form-input.video-form-input {
    float: left;
  }
  button.btn.back-btn.text-white.border-white.project_video_button_remove {
    margin-bottom: 40px;
  }
  .buttonbelowvideo {
    width: 100%;
  }
  .fof-form-2-step-6-submit.fof-submission-next {
    margin-left: 0 !important;
  }
  button.btn.border-white.white.mb-40.back-btn.buttonbelowvideoopendoc {
    margin-top: 40px;
  }
  .order-md-2.order-1.fof-form-2-step-5-submit.fof-submission-next {
    margin-left: 0;
  }
  button.fof-form-2-step-11-submit.fof-submission-next {
    margin-top: 40px !important;
    margin-left: 0 !important;
  }
  .buttonbelowvideo button.fof-form-2-step-11-submit.fof-submission-next {
    margin-bottom: 40px;
    margin-top: 0 !important;
  }
  .form-input.video-form-input input {
    margin-right: 12px;
  }
  /* .cr-slider::-webkit-slider-thumb {
        height: 30px !important;
        width: 30px !important;
        background-color: #FCBEAE;
        border-radius: 50%;
		top:-5px;
    }
	.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 18px !important;
	} */
  .page-template-faculty-portfolio .hero.fof-lower .row {
    width: 100%;
    margin: 0 auto;
    display: block;
    padding: 0;
    margin: 0;
  }
  .page-template-faculty-portfolio .hero {
    padding: 40px 24px !important;
  }

  .page-template-faculty-portfolio .col-4.image-section {
    width: 100%;
    padding: 0;
  }
  .page-template-faculty-portfolio .col-8.content-section {
    width: 100%;
    margin-top: 20px;
    padding: 0;
  }
  .crop-change-pic-main {
    display: block;
    column-gap: 32px;
  }
  .crop-change-pic-main .fof-faculty-form-1-step-1-crop {
    margin-top: 40px;
  }
  .modal.main-modal-box .modal-content {
    width: 100%;
    margin-top: 23%;
    border: 1px solid;
  }
  .mainarchove-containaer .h3.center.lightsalmoncolor {
    font-size: 25px;
    line-height: 37px;
  }
  .mainarchove-containaer .fof_column {
    padding-right: 0;
  }
  .mainarchove-containaer .primarybutton.center {
    display: block;
  }
  .desktop-modal {
    display: none;
  }
  .mobile-modal {
    display: block;
    width: 100%;
  }
  .croppie-container .cr-boundary {
    width: 100% !important;
  }
  /* .croppie-container .cr-slider-wrap {
    width: 65% !important;
    float: none;
} */
  .file-uploading-process {
    margin: 10px auto 0;
  }
  button.delete-crop {
    bottom: 9px;
    right: 0px;
  }
  .swiper-slide.image-width img {
    object-fit: cover;
    max-width: 806px;
    height: 450px;
    border-radius: 10px;
    width: 100%;
  }
  .cr-viewport.cr-vp-square {
  }
  .file-img.my-40.main-step1pic {
    width: 100%;
  }
  .file-img.my-40.main-step1pic img {
    width: 250px;
    height: 250px;
  }
  /* #crop-image-container button#deletePhoto{
	    top: -47px;
} */
  /* .croppie-container .cr-slider-wrap {
    margin: 7px auto 2px !important;
} */
  h1 {
    font-size: 25px !important;

    line-height: 38px !important;

    margin-bottom: 22px !important;
  }
  .fof-form-1-step-4-html .container-fluid {
    padding: 0px 24px !important;
  }
  .fof-form-1-step-4-html .container-fluid .row {
    width: 100%;
    display: block;
  }
  .fof-form-1-step-4-html .col-4.image-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
  }
  .fof-form-1-step-4-html .col-4.image-section img {
    width: 100% !important;
  }
  .fof-form-1-step-4-html .col-8.content-section {
    width: 100%;
    margin-top: 20px;
    padding: 0;
  }
  h2 {
    font-size: 25px;

    line-height: 38px;
  }

  h3 {
    font-size: 22px;

    line-height: 34px;
  }

  .hero.fof-lower .form-input .input-file {
    text-align: center;
  }

  .hero.fof-lower.second .btn {
    width: 100%;
  }

  .back-btn {
    margin-right: 0px;
  }

  .form-input .input-file {
    text-align: center;
  }

  .offcanvas-body ul li {
    padding: 0px 4px;
  }

  .hero {
    padding: 0 4px 40px;
  }

  .hero input,
  select,
  textarea {
    width: 100%;
  }

  .hero .btn {
    width: 100%;
  }

  .hero .btn a {
    width: 100%;
  }

  footer {
    padding: 90px 0px 42px;
  }

  footer ul {
    display: flex;

    gap: 30px;

    flex-direction: column;

    margin: 55px 0px 40px;
  }

  .wrong-photo .grid {
    margin-top: 15px;

    padding: 25px 0px 5px 0px;

    grid-template-columns: 1fr 1fr 1fr;
  }

  .btn-box {
    gap: 10px;

    flex-direction: column;
  }
  label.project_photos_one_src {
    float: none;
  }
  .trouble-during-btm {
    margin-bottom: 0 !important;
  }
  .continue-pic {
    margin-bottom: 40px;
  }
  .imgagecrop-main-box-modal .imgcrop-border {
    padding: 110px 20px;
  }
  button.btn.back-btn.white.fof-photo-form-1-step-1-change {
    margin-bottom: 40px;
  }
  button.btn.back-btn.white.fof-submission-form-1-step-1-cropimgpop {
    width: 100%;
  }
  button.btn.back-btn.white.fof-submission-form-1-step-1-cropimgpop a {
    width: 100%;
  }
  .modal.main-modal-box .modal-content {
    top: 8%;
    margin-top: 0;
  }
  .imgcrop-border {
    margin: 0 auto;
  }
  label.project_photos_two_src.circle-profile {
    margin: 0 auto 40px;
  }
  .hero.wrong-photo.fof-step-1 .file-img {
    text-align: center;
  }

  .hero.wrong-photo.fof-step-1 .img-box {
    padding: 48px 0px 88px 0px;

    text-align: center;
  }

  .hero .hero-hiker .hiker-tab-content {
    padding: 40px 0px 0px 0px;
  }

  .swiper.hero-slider2 p {
    margin-top: 10px;

    font-size: 17px;
  }

  .hero .model-content .model-item {
    width: 100%;
  }

  .tab-content-item button.btn.btn-d-block {
    display: block;
  }

  .wrong-photo .tab-content-item .btn-box.my-40.btn-d-none {
    display: none;
  }

  .tab-content-item.tab-mobile {
    display: none;
  }

  .tab-content-item.tab-mobile .btn-d-none {
    display: inline-block;
  }

  .footer-bottom .btn-box {
    margin-top: 12px;

    display: flex;

    flex-direction: column;

    gap: 12px;
  }

  .footer-bottom {
    padding: 12px 0px;
    text-align: center;
  }

  .portfolio-btn-box {
    flex-direction: column;

    gap: 40px;
  }

  .portfolio-btn-box h4.pink {
    font-size: 25px;

    line-height: 37px;

    margin-bottom: 12px;
  }

  .portfolio-btn-box .text-center {
    text-align: left !important;
  }

  .swiper-hero-right .hero-slider .swiper-button-next,
  .swiper-hero-right .hero-slider .swiper-button-prev {
    height: 40px !important;

    width: 40px !important;
    display: none;
  }

  .swiper-hero-right .hero-slider .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 24px !important;
  }

  .swiper-hero-right .hero-slider .swiper-button-next {
    display: none;
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: 0px !important;
  }

  .fancybox-thumbs {
    width: 100%;
  }

  .wrong-photo .grid {
    height: 300px;
  }
  .wrong-photo .grid img {
    height: 166px;
  }
  .hero.wrong-photo .tab-content-item .grid .main .active img {
    height: 168px;
  }
  .hero.wrong-photo .file-img {
    text-align: center;
  }

  .hero.fof-lower .form-input .input-file .project-photo-locked {
    left: 32px;
  }
  .navbar-nav li {
    padding: 3px 4px;
  }

  .hero-slider .swiper-slide {
    width: 309px !important;
  }
  .hero-slider .swiper-slide.image-width {
    width: 309px !important;
    overflow: hidden;
    border-radius: 10px;
  }
  /* .hero-slider .swiper-slide img {
    height: 400px;
    object-fit: cover;
    width: 309px;
  } */
  .fof-image-error-msg,
  .fof-alt-caption-duplicate-error-msg {
    width: 90%;
    margin: auto;
    text-align: justify;
  }
  .hero.fof-lower .form-input .input-file .project-photo-locked,
  .hero.fof-lower
    .form-input
    .input-file
    img.landscape
    ~ .project-photo-locked {
    transform: translate(-50%, 0px);
    left: 50%;
  }
  .footer-bottom.bg-white.fof-form-2-step-7 {
    padding: 0px 0px 12px 0;
  }
  .footer-bottom.bg-white.fof-form-2-step-7 p {
    font-size: 22px;
    text-align: center;
    line-height: 34px;
  }
  .footer-bottom.bg-white.fof-form-2-step-7 .btn-box {
    margin-top: 8px;
    gap: 12px;
  }
  .footer-bottom.bg-white.fof-form-2-step-7 .btn a {
    padding: 12px;
    height: 48px;
  }
  .swiper-hero-right .swiper-wrapper .swiper-slide:first-child {
    /* margin-left: 16px; */
  }
  .swiper-hero-right {
    /* margin-left: 10px; */
  }
  .swiper-hero-right .swiper-wrapper .swiper-slide:last-child {
    margin-right: 16px;
  }
}

@media screen and (max-width: 380px) {
  .wrong-photo .grid img {
    height: 163px;
  }
  .hero.wrong-photo .tab-content-item .grid .main .active img {
    height: 165px;
  }
}

@media screen and (max-width: 374px) {
  .wrong-photo .grid img {
    height: 156px;
  }
  .hero.wrong-photo .tab-content-item .grid .main .active img {
    height: 158px;
  }
}

@media screen and (max-width: 365px) {
  .hero.fof-lower
    .form-input
    .input-file
    img.landscape
    ~ .project-photo-locked {
    width: 344px;
  }
}

/* Below 480px the webflow stylesheet gives .portfolioimage.landscape a
   min-height of 314px, which beats the 243px height set in style.css. The
   locked overlay had no such rule and stayed at 243px, leaving the bottom
   71px of a locked landscape photo uncovered. Mirror the image's own
   constraints so the two always match. */
@media screen and (max-width: 479px) {
  .hero.fof-lower
    .form-input
    .input-file
    img.landscape
    ~ .project-photo-locked {
    min-height: 314px;
    max-height: 575px;
  }
}