* {

  box-sizing: border-box;

}

/* Navbar Menu */

.open-slide {

  z-index: 10000;

  margin: 10px;
margin-top: 7px;

  position: absolute;

}



.dropdown {

  position: relative;

  display: inline-block;

}



.dropdown-content {

  position: absolute;

  top: 40px;

  z-index: 1;

  min-width: 140px;

  text-align: center;

  border-radius: 3px;

}



.side-nav {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #0d1217;

  overflow-x: hidden;

  padding-top: 60px;

  transition: 0.2s;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-delay: 0s;

}



.side-nav a {

  white-space: nowrap;

}



.side-nav .btn-close {

  position: absolute;

  top: 0;

  font-size: 40px;

  right: 22px;

  margin-left: 50px;

}



.btn-close {

  color: white;

  cursor: pointer;

}



.button-slide {

  margin-left: 4.5rem;

}


/* Hover ToolTip */

.tooltip {

  position: relative;

  display: inline-block;

}



/* Tooltip text */

.tooltip {

  position: relative;

  display: inline-block;

}



.tooltip .tooltiptext {

  visibility: hidden;

  width: 120px;

  background-color: #0d1217;

  color: #fff;

  text-align: center;

  border-radius: 3px;

  padding: 5px 0;

  position: absolute;

  z-index: 1;

  bottom: 5%;

  left: 110%;

  opacity: 0;

  transition: opacity 0.3s;

}



.tooltip .tooltiptext::after {

  content: "";

  position: absolute;

  top: 50%;

  right: 100%;

  margin-top: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: transparent #0d1217 transparent transparent;

}



.tooltip:hover .tooltiptext {

  visibility: visible;

  opacity: 1;

}

/* Button Gradient */

.btn-grad {

  background-image: linear-gradient(

    to right,

    #4067f1 0%,

    #3cf2e7 51%,

    #2547bf 100%

  );

}

.btn-grad {

  transition: 0.5s;

  background-size: 200% auto;

  color: white;

}



.btn-grad:hover {

  background-position: right center; /* change the direction of the change here */

  color: #fff;

  text-decoration: none;

}



/* Button Gradient 2 */

.btn-grad-2 {

  background-image: linear-gradient(

    to right,

    #f23ce0 0%,

    #4067f1 51%,

    #ae24a0 100%

  );

}

.btn-grad-2 {

  transition: 0.5s;

  background-size: 200% auto;

  color: white;

}



.btn-grad-2:hover {

  background-position: right center; /* change the direction of the change here */

  color: #fff;

  text-decoration: none;

}



/* Button Gradient 3 */

.btn-grad-3 {

  background-image: linear-gradient(

    to right,

    #4067f1 0%,

    #f2763c 51%,

    #203ea9 100%

  );

}

.btn-grad-3 {

  transition: 0.5s;

  background-size: 200% auto;

  color: white;

}



.btn-grad-3:hover {

  background-position: right center; /* change the direction of the change here */

  color: #fff;

  text-decoration: none;

}



select {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  background: url("https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png")

    white no-repeat 98.5% !important;

  background: url("https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png")

    white no-repeat calc(100% - 10px) !important;

}



.title-font {

  font-family: "Comic Neue", cursive;

  color: #0798dc;

}



.cover-header {

  background-image: url("../assets/images/header-2.png");

}



/* About Section */



.position-image-about {

  right: 0px;

  top: 75%;

}



.position-this {

  bottom: 20%;

  min-width: 450px;

}



.title-font {

  font-family: "Comic Neue", cursive;

  color: #0798dc;

}



.bg-cover-top {

  background-image: url("../assets/images/top-header.jpg");

}



.cover-header-about {

  background-image: url("../assets/images/about-header-2.jpg");

}



/* Gallery Section */



.cover-header-gallery {

  background-image: url("../assets/images/gallery-header-2.jpg");

}



/* Reorder Section */



.dropdown-container {

  position: relative;

  display: inline-block;

}



.dropdown-content-box {

  display: none;

  position: absolute;

  top: 50px;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

}



.dropdown-container:hover .dropdown-content-box {

  display: block;

}



.desc {

  padding: 15px;

  text-align: center;

}



#vid {

  position: relative;

  z-index: -20;

}



.cover-header-reorder {

  background-image: url("../assets/images/reorder-header-2.jpg");

}



@media (min-width: 800px) {

  .cover-header-gallery {

    background-image: url("../assets/images/gallery-header.jpg");

  }

}



@media (min-width: 640px) {

  .cover-header {

    background-image: url("../assets/images/header-image.png");

  }



  .cover-header-about {

    background-image: url("../assets/images/about-header.jpg");

  }



  .cover-header-reorder {

    background-image: url("../assets/images/reorder-header.jpg");

  }

}



@media (min-width: 768px) {

  .main-nav {

    background-color: #0d1217;

  }

}



@media (min-width: 1024px) {

  #side-menu {

    display: block;

    width: 4rem !important;

  }



  .dropdown-content {

    position: none;

    min-width: 4rem;

  }



  .btn-close {

    display: none;

  }

}



@media (min-width: 1024px) {

  .side-nav {

    overflow-x: visible !important;

  }



  .text-nav {

    display: none;

  }



  .tooltiptext {

    display: block;

  }

}



@media (max-width: 1024px) {

  .text-nav {

    font-size: 18px;

  }



  .tooltiptext {

    display: none;

  }

}



@media (min-width: 1023px) and (max-width: 1107px) {

  .image-content-2 {

    margin-left: 50px !important;

  }

}



@media (max-width: 1279px) {

  .position-image-about {

    display: none;

  }



  .position-this {

    display: none;

  }



  .main-title-about {

    text-align: center;

    font-family: "Comic Neue", cursive !important;

  }

}



/* Modal Image */

/* Style the Image Used to Trigger the Modal */

.img-thumbnail {

  cursor: pointer;

  transition: 0.3s;

}



/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  padding-top: 80px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto;  /* Enable scroll if needed */
  
  /*overflow-y: scroll;*/

  background-color: rgb(0, 0, 0); /* Fallback color */

  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */

}



/* Modal Content (Image) */

.modal-content {
  margin: 0 30px;

  display: block;

  width: 26%;

  max-width: 700px;

}

/* Modal Container */

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-arrow-left,
.slide-arrow-right {
  cursor: pointer;
  height: 60px;
}


/* Caption of Modal Image (Image Text) - Same Width as the Image */

#caption {

  margin: auto;

  display: block;

  width: 80%;

  max-width: 700px;

  text-align: center;

  color: #ccc;

  padding: 10px 0;

  height: 150px;
  
  font-size: 25px;

}



/* Add Animation - Zoom in the Modal */

.animation-zoom,

#caption {

  animation-name: zoom;

  animation-duration: 0.6s;

}



@keyframes zoom {

  from {

    transform: scale(0);

  }

  to {

    transform: scale(1);

  }

}

/* Slide Animation */

 .modal-content {
  transition: all ease-in-out 1s;
}
.slide-animation {
  transform: translateY(8rem) rotateZ(20deg);
} 



/* The Close Button */

.close {

  position: absolute;

  top: 15px;

  right: 35px;

  color: #f1f1f1;

  font-size: 40px;

  font-weight: bold;

  transition: 0.3s;

}



.close:hover,

.close:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

}



/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px) {

  .modal-content {
    margin: 0 10px;
    width: 60%;

  }
  .slide-arrow-left,
  .slide-arrow-right {
    height: 50px;
  }

}



@media (min-width: 700px) and (max-width: 1100px) {

  .modal-content {

    display: block;

    width: 40%;

  }

}



/* Image Hover Zoom */



/* [1] The container */

.img-hover-zoom {

  overflow: hidden; /* [1.2] Hide the overflowing of child elements */

}



/* [2] Transition property for smooth transformation of images */

.img-hover-zoom img {

  transition: transform 0.9s ease;

}



/* [3] Finally, transforming the image when container gets hovered */

.img-hover-zoom:hover img {

  transform: scale(1.1);

}



.image-size {

  width: 241px !important;

  height: auto;

}

/* New Code */

@media (min-width: 2000px) {
  .cover-header {
    background-image: url("../assets/images/header-bigger.jpg");
  }

  .cover-header-about {
    background-image: url("../assets/images/about-header-bigger.jpg");
  }

  .cover-header-gallery {
    background-image: url("../assets/images/gallery-header-bigger.jpg");
  }

  .cover-header-reorder {
    background-image: url("../assets/images/reorder-header-bigger.jpg");
  }
}

@media (min-width: 1450px) and (max-width: 1999px) {
  .cover-header-reorder {
    padding-top: 10rem !important;
    padding-bottom: 7rem !important;
  }
}

@media (min-width: 1900px) {
  .bigger-screen-about {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }

  .cover-header-gallery {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }

  .cover-header-reorder {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }
}

@media (min-width: 2400px) {
  .cover-header-gallery {
    padding-top: 12rem !important;
    padding-bottom: 12rem !important;
  }

  .cover-header-reorder {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important;
  }
}

@media (min-width: 2600px) {
  .bigger-screen-about {
    padding-top: 13rem !important;
    padding-bottom: 13rem !important;
  }

  .cover-header-gallery {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important;
  }

  .cover-header-reorder {
    padding-top: 17rem !important;
    padding-bottom: 17rem !important;
  }
}

@media (min-width: 2900px) {
  .bigger-screen-about {
    padding-top: 22rem !important;
    padding-bottom: 22rem !important;
  }
}

@media (min-width: 3000px) and (max-width: 3500px) {
  .cover-header-gallery {
    padding-top: 22rem !important;
    padding-bottom: 16rem !important;
  }

  .cover-header-reorder {
    padding-top: 22rem !important;
    padding-bottom: 16rem !important;
  }
}

@media (min-width: 3501px) {
  .cover-header-gallery {
    padding-top: 22rem !important;
    padding-bottom: 22rem !important;
  }

  .cover-header-reorder {
    padding-top: 22rem !important;
    padding-bottom: 22rem !important;
  }
}

@media (min-width: 3000px) {
  .bigger-screen {
    padding-top: 12rem !important;
    padding-bottom: 12rem !important;
  }
}

@media (min-width: 640px) and (max-width: 1000px) {
  .cover-header {
    background-image: url("../assets/images/header-medium.jpg");
  }

  .cover-header-about {
    background-image: url("../assets/images/about-header-medium.jpg");
  }

  .cover-header-gallery {
    background-image: url("../assets/images/gallery-header-medium.jpg");
  }

  .cover-header-reorder {
    background-image: url("../assets/images/reorder-header-medium.jpg");
  }
}

@media (min-width: 240px) and (max-width: 458px) {
  .cover-header-about {
    background-image: url("../assets/images/about-header-small.jpg") !important;
  }

  .cover-header-gallery {
    background-image: url("../assets/images/gallery-header-small.jpg");
  }
}

@media (min-width: 270px) and (max-width: 310px) {
	.g-recaptcha {
	    transform:scale(0.77);
}
}


@media (min-width: 270px) and (max-width: 380px) {
	.title-font {
		font-size: 2.5rem !important;

}
}


@media (max-width: 400px) {
  .input-file {
    font-size: 11px;
  }
}

/* Footer New */

@media (min-width: 3900px) {
  .footer-margin-fix {
    margin-top: 15rem;
  }
}

@media (min-width: 1500px) {
  .footer-logo {
    width: 450px !important;
  }
}

@media (min-width: 3003px) {
  .margin-bigger {
    margin-top: 15rem !important;
  }
}

@media (min-width: 1500px) {
  .margin-bigger {
    margin-top: 15rem !important;
  }
}

@media (min-width: 1900px) {
  .margin-bigger {
    margin-top: 25% !important;
  }
}

@media (min-width: 3000px) {
  .margin-bigger {
    margin-top: 32% !important;
  }
}

@media (min-width: 3815px) {
  .margin-bigger {
    margin-top: 19% !important;
  }

}

/* New Code */
.parallax {
  /* The image used */
  background-image: url("img_parallax.jpg");
}

body {
  background-image: url("../assets/images/background.jpg");
  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  
}

::-webkit-scrollbar-track {
  background: #f0f0f0; 
}
 
::-webkit-scrollbar-thumb {
  background: #5B8AB5;
}