@charset "utf-8";

.carousel-item {
  
    img {
      
      height: 60vw;
      object-fit: cover;
      max-width:450px ;
      max-height:450px ;
      
      @media (min-width: 576px) {
        height: 450px;
      }
    }
  }
  /*
  $bootstrap-sm: 576px;
  $bootstrap-md: 768px;
  $bootstrap-lg: 992px;
  $bootstrap-xl: 1200px;*/
  .modal-dialog {
    max-width: 350px;
    margin: 30px auto;
  }

  .modal-dialog2 {
    max-width: 450px;
    margin: 30px auto;
  }

  .modal-dialog3 {
    max-width: 450px;
    margin: 30px auto;
  }

  @media screen and (max-width: 576px) {
    .modal-dialog2 {
      max-width: 350px;
      margin: 30px auto;
    }
  
  }
  
  /*******************************************************************************/

  #exampleModal.custom {
    .modal-content {
      background: none;
      border: none;
      height: auto;
      width: 450px;
    }
    @media screen and (max-width: 576px) {
      .modal-dialog2 {
        max-width: 350px;
        max-height: 350px;
        margin: 30px auto;
      }
      .modal-content {
        background: none;
        border: none;
        height: auto;
        width: 350px;
       /* height:350px;*/
      }
    }
    

    .modal-header {
      border:none;
      
      button {
        background: none;
        border-radius: 100px 100px 0 0;
        padding: 5px 10px;
        opacity: 1;
        position: relative;
        top: 3px;
        border: solid 2px white;
        /*
        @media screen and (max-width: 576px) {
          display: none;

        }
*/
        @media (min-width: 992px) {
          top: 15px;
        }
        
        &:hover {
          top: 3px;
        }
        
      }
      
      span {
        color: white;
      }
    }
    
    .modal-body {
      padding: 0;
      border: none;
      position: relative;
      
      &::before, &::after {
        content: '';
        height: 50px;
        width: 50px;
        display: block;
        position: absolute;
        background: white;
        border-radius: 3px 10px;
        
        @media (min-width:  768px) {
          border-radius: 3px 30px;
          height: 100px;
          width: 100px;
        }
      }
      
      &::before {
        top: -5px;
        left: -5px;
        
        @media (min-width:  768px) {
          top: -15px;
          left: -15px;
        }
      }
      
      &::after {
        bottom: -5px;
        right: -5px;
        z-index: -1;
        
        @media (min-width:  768px) {
          bottom: -15px;
          right: -15px;
        }
      }
    }
    
    .modal-footer {
      border: none;
      margin-top: 60px;
      
      @media (min-width: 992px) {
        margin-top: 40px;
      }
      
      .btn {
        margin: auto;
        border: solid 2px white;
        background: none;
        text-transform: uppercase;
        font-size: 0.8em;
        letter-spacing: 0.1em;
        font-weight: bold;
        padding: 0.2em 0.7em;
        
        &:hover {
          background: white;
          color: black;
        }
      }
    }
    
    .carousel-control-prev, .carousel-control-next {
      font-size: 2em;
      top: auto;
      opacity: 1;
      bottom: -52px;
      
      @media (min-width:  768px) {
        top: 0;
        opacity: 0.5;
        bottom: 0;
      }
    }
    
    .carousel-control-next-icon,  .carousel-control-prev-icon {
      height: 30px;
      width: 30px;
    }
    
    .carousel-control-prev {
      @media (min-width:  768px) {
        left: -90px;
      }
    }
    
    .carousel-control-next {
      @media (min-width:  768px) {
        right: -90px;
      }
    }
    
    .carousel-indicators {
      bottom: -60px;
      
      @media (min-width: 992px) {
        bottom: -30px;
      }
      
      li {
        height: 30px;
        border-radius: 100px;
        background: none;
        border: solid 2px white;
        
        @media (min-width: 992px) {
          height: 10px;
        }
        
        &:hover {
          background: white;
        }
        
        &.active {
          background: white;
        }
      }
    }
  }
  
  
  /*********************************************************************************************************/
  
  #exampleModal2.custom, #exampleModal7.custom, #exampleModal8.custom, #exampleModal9.custom, #exampleModal10.custom, #exampleModal11.custom, #exampleModal12.custom, #exampleModal13.custom, #exampleModal14.custom {
    .modal-content {
      background: none;
      border: none;
      height: auto;
      width: 450px;
    }
    
    @media screen and (max-width: 576px) {
      .modal-dialog2 {
        max-width: 350px;
        max-height: 350px;
        margin: 30px auto;
      }
      .modal-content {
        background: none;
        border: none;
        height: auto;
        width: 350px;
       /* height:350px;*/
      }
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      /* CSS */
      .modal-dialog2 {
        max-width: 350px;
        max-height: 350px;
        margin: 30px auto;
      }
      .modal-content {
        background: none;
        border: none;
        height: auto;
        width: 350px;
       /* height:350px;*/
      }
  } 
    .modal-header {
      border:none;
      
      button {
        background: none;
        border-radius: 100px 100px 0 0;
        padding: 5px 10px;
        opacity: 1;
        position: relative;
        top: 3px;
        border: solid 2px white;
        
        @media (min-width: 992px) {
          top: 15px;
        }
        
        &:hover {
          top: 3px;
        }
      }
      
      span {
        color: white;
      }
    }
    
    .modal-body {
      padding: 0;
      border: none;
      position: relative;
      
      &::before, &::after {
        content: '';
        height: 50px;
        width: 50px;
        display: block;
        position: absolute;
        background: white;
        border-radius: 3px 10px;
        
        @media (min-width:  768px) {
          border-radius: 3px 30px;
          height: 100px;
          width: 100px;
        }
      }
      
      &::before {
        top: -5px;
        left: -5px;
        
        @media (min-width:  768px) {
          top: -15px;
          left: -15px;
        }
      }
      
      &::after {
        bottom: -5px;
        right: -5px;
        z-index: -1;
        
        @media (min-width:  768px) {
          bottom: -15px;
          right: -15px;
        }
      }
    }
    
    .modal-footer {
      border: none;
      margin-top: 60px;
      
      @media (min-width: 992px) {
        margin-top: 40px;
      }
      
      .btn {
        margin: auto;
        border: solid 2px white;
        background: none;
        text-transform: uppercase;
        font-size: 0.8em;
        letter-spacing: 0.1em;
        font-weight: bold;
        padding: 0.2em 0.7em;
        
        &:hover {
          background: white;
          color: black;
        }
      }
    }
  
    .carousel-control-prev, .carousel-control-next {
      font-size: 2em;
      top: auto;
      opacity: 1;
      bottom: -52px;
      
      @media (min-width:  768px) {
        top: 0;
        opacity: 0.5;
        bottom: 0;
      }
    }
    
    .carousel-control-next-icon,  .carousel-control-prev-icon {
      height: 30px;
      width: 30px;
    }
    
    .carousel-control-prev {
      @media (min-width:  768px) {
        left: -90px;
      }
    }
    
    .carousel-control-next {
      @media (min-width:  768px) {
        right: -90px;
      }
    }
    
    .carousel-indicators {
      bottom: -60px;
      
      @media (min-width: 992px) {
        bottom: -30px;
      }
      
      li {
        height: 30px;
        border-radius: 100px;
        background: none;
        border: solid 2px white;
        
        @media (min-width: 992px) {
          height: 10px;
        }
        
        &:hover {
          background: white;
        }
        
        &.active {
          background: white;
        }
      }
    }
  }



  /**************************************************************************************************************************/

  #exampleModal3.custom {
    .modal-content {
      background: none;
      border: none;
      height: auto;
      width: 450px;
    }
    @media screen and (max-width: 576px) {
      .modal-dialog2 {
        max-width: 350px;
        max-height: 350px;
        margin: 30px auto;
      }
      .modal-content {
        background: none;
        border: none;
        height: auto;
        width: 350px;
       /* height:350px;*/
      }
    }
    .modal-header {
      border:none;
      
      button {
        background: none;
        border-radius: 100px 100px 0 0;
        padding: 5px 10px;
        opacity: 1;
        position: relative;
        top: 3px;
        border: solid 2px white;
        
        @media (min-width: 992px) {
          top: 15px;
        }
        
        &:hover {
          top: 3px;
        }
      }
      
      span {
        color: white;
      }
    }
    
    .modal-body {
      padding: 0;
      border: none;
      position: relative;
      
      &::before, &::after {
        content: '';
        height: 50px;
        width: 50px;
        display: block;
        position: absolute;
        background: white;
        border-radius: 3px 10px;
        
        @media (min-width:  768px) {
          border-radius: 3px 30px;
          height: 100px;
          width: 100px;
        }
      }
      
      &::before {
        top: -5px;
        left: -5px;
        
        @media (min-width:  768px) {
          top: -15px;
          left: -15px;
        }
      }
      
      &::after {
        bottom: -5px;
        right: -5px;
        z-index: -1;
        
        @media (min-width:  768px) {
          bottom: -15px;
          right: -15px;
        }
      }
    }
    
    .modal-footer {
      border: none;
      margin-top: 60px;
      
      @media (min-width: 992px) {
        margin-top: 40px;
      }
      
      .btn {
        margin: auto;
        border: solid 2px white;
        background: none;
        text-transform: uppercase;
        font-size: 0.8em;
        letter-spacing: 0.1em;
        font-weight: bold;
        padding: 0.2em 0.7em;
        
        &:hover {
          background: white;
          color: black;
        }
      }
    }
    
    .carousel-control-prev, .carousel-control-next {
      font-size: 2em;
      top: auto;
      opacity: 1;
      bottom: -52px;
      
      @media (min-width:  768px) {
        top: 0;
        opacity: 0.5;
        bottom: 0;
      }
    }
    
    .carousel-control-next-icon,  .carousel-control-prev-icon {
      height: 30px;
      width: 30px;
    }
    
    .carousel-control-prev {
      @media (min-width:  768px) {
        left: -50px;
      }
    }
    
    .carousel-control-next {
      @media (min-width:  768px) {
        right: -50px;
      }
    }
    
    .carousel-indicators {
      bottom: -60px;
      
      @media (min-width: 992px) {
        bottom: -30px;
      }
      
      li {
        height: 30px;
        border-radius: 100px;
        background: none;
        border: solid 2px white;
        
        @media (min-width: 992px) {
          height: 10px;
        }
        
        &:hover {
          background: white;
        }
        
        &.active {
          background: white;
        }
      }
    }
  }

    /**************************************************************************************************************************/

    #exampleModal6.custom {
      .modal-content {
        background: none;
        border: none;
        height: auto;
        width: 450px;
      }
      
      .modal-header {
        border:none;
        
        button {
          background: none;
          border-radius: 100px 100px 0 0;
          padding: 5px 10px;
          opacity: 1;
          position: relative;
          top: 3px;
          border: solid 2px white;
          
          @media (min-width: 992px) {
            top: 15px;
          }
          
          &:hover {
            top: 3px;
          }
        }
        
        span {
          color: white;
        }
      }
      
      .modal-body {
        padding: 0;
        border: none;
        position: relative;
        
        &::before, &::after {
          content: '';
          height: 50px;
          width: 50px;
          display: block;
          position: absolute;
          background: white;
          border-radius: 3px 10px;
          
          @media (min-width:  768px) {
            border-radius: 3px 30px;
            height: 100px;
            width: 100px;
          }
        }
        
        &::before {
          top: -5px;
          left: -5px;
          
          @media (min-width:  768px) {
            top: -15px;
            left: -15px;
          }
        }
        
        &::after {
          bottom: -5px;
          right: -5px;
          z-index: -1;
          
          @media (min-width:  768px) {
            bottom: -15px;
            right: -15px;
          }
        }
      }
      
      .modal-footer {
        border: none;
        margin-top: 60px;
        
        @media (min-width: 992px) {
          margin-top: 40px;
        }
        
        .btn {
          margin: auto;
          border: solid 2px white;
          background: none;
          text-transform: uppercase;
          font-size: 0.8em;
          letter-spacing: 0.1em;
          font-weight: bold;
          padding: 0.2em 0.7em;
          
          &:hover {
            background: white;
            color: black;
          }
        }
      }
      
      .carousel-control-prev, .carousel-control-next {
        font-size: 2em;
        top: auto;
        opacity: 1;
        bottom: -52px;
        
        @media (min-width:  768px) {
          top: 0;
          opacity: 0.5;
          bottom: 0;
        }
      }
      
      .carousel-control-next-icon,  .carousel-control-prev-icon {
        height: 30px;
        width: 30px;
      }
      
      .carousel-control-prev {
        @media (min-width:  768px) {
          left: -50px;
        }
      }
      
      .carousel-control-next {
        @media (min-width:  768px) {
          right: -50px;
        }
      }
      
      .carousel-indicators {
        bottom: -60px;
        
        @media (min-width: 992px) {
          bottom: -30px;
        }
        
        li {
          height: 30px;
          border-radius: 100px;
          background: none;
          border: solid 2px white;
          
          @media (min-width: 992px) {
            height: 10px;
          }
          
          &:hover {
            background: white;
          }
          
          &.active {
            background: white;
          }
        }
      }
    }