@import url('https://fonts.googleapis.com/css?family=Kanit|Lato:400,700,900&display=swap');


body {
  overflow-x: hidden;
  font-family: 'Lato', sans-serif;
  color:#505962
}

html, body {
  height: 100%;
}
/*--- Navigation start --*/

.navbar {
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .1rem;

}

.navbar-brand{
  font-family: 'Kanit', sans-serif;
  text-transform: lowercase;
  letter-spacing: .4rem;
}

.navbar-brand {
  font-size: 2.1rem;
}

.navbar-nav li {
  padding-right: .7rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: white;
  padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.aktive,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #83c3ff;
}

/*--- Navigation end --*/

/*--- Landing Page --*/

/*--- Background Image Main --*/
.page-holder {
  min-height: 100vh;
}

.bg-cover {
  background-size: cover !important;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*--- Background Image Main --*/

/*--- Text in Background Image --*/
.caption {
  width: 100%;
  max-width: 100%;
  z-index:1;
  text-transform: uppercase;
}

.caption h1 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .3rem;
  text-shadow: .1rem .1rem .8rem black;
  padding-bottom: 1rem;
}

/*--- Text in Background Image --*/

/*--- About --*/
hr.new1 { 
  border-top: 1px solid rgba(12, 12, 12, 0.596);
}

.heading {
  background-color: #f7f7f7;
  padding-top: 3rem;
  padding-left: 4rem;
  padding-right: 4rem;
  padding-top: 3rem;
}
.caption-about {
  color: rgba(12, 12, 12, 0.800);
}


/*--- Recipe --*/

.li-ing {
  font-size: 1.3rem;
  color: rgba(12, 12, 12, 0.800);
  font-weight: 600; 
  font-style: italic
}

a:hover {
  color: rgba(12, 12, 12, 0.800);
}


.btn-circle.btn-xl { 
  width: 3.8rem; 
  height: 3.8rem;  
  border-radius: 35px; 
  font-size: 1.1rem; 
  text-align: center; 
  background-color:#f7f7f7 ;
  border-color: rgba(12, 12, 12, 0.800);
  color: rgba(12, 12, 12, 0.800);

} 
.btn-circle.btn-xl:hover { 
  border-color: rgba(12, 12, 12, 0.800);
  background-color:rgba(12, 12, 12, 0.800) ;
  color: white;

} 
.btn-circle.btn-xl.active,
.btn-circle.btn-xl:active { 
  background: black;
  background-color:rgba(12, 12, 12, 0.800) ;
  color: white;

} 
.btn-circle.btn-xl:focus {
  outline:none; 
  box-shadow: none;
}


.slidecontainer {
  width: 100%; /* Width of the outside container */
  color: rgba(12, 12, 12, 0.800);
  padding-top: 1rem;
}

.range {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 60%; /* Full-width */
  height: 25px; /* Specified height */
  background-color: rgba(77, 74, 74, 0.753); /* Grey background */
  outline: none; /* Remove outline */
  opacity: 1; /* Set transparency (for mouse-over effects on hover) */
  border-radius: 5px;  
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.range::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 3.8rem; /* Set a specific slider handle width */
  height: 3.8rem; /* Slider handle height */
  background:  url(img/serving.png) ; 
  background-size: cover !important;
  cursor: pointer; /* Cursor on hover */
  border: 0;
}

.range::-moz-range-thumb {
  width: 3.8rem; /* Set a specific slider handle width */
  height: 3.8rem; /* Slider handle height */
  background:  url(img/serving.png); /* Green background */
  background-size: cover;
  cursor: pointer; /* Cursor on hover */
  border: 0;
}

.Servesclass {
  font-size: 1.5rem;
  padding: 3rem;
}

[type='range'] {
  margin: 0;
  padding: 0;
  background: transparent;
  font: 1em arial, sans-serif;
  width: 60%; /* Full-width */
  height: 25px; /* Specified height */
  background-color: rgba(77, 74, 74, 0.753); /* Grey background */
  outline: none; /* Remove outline */
  opacity: 1; /* Set transparency (for mouse-over effects on hover) */
  border-radius: 5px; 
  overflow: visible; 
}
[type='range'], [type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

[type='range']::-ms-track {
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 3.8rem;
  background: transparent;
}

[type='range']::-ms-thumb {
  width: 25px ; /* Set a specific slider handle width */
  height: 25px ; /* Slider handle height */
  background:  rgba(12, 12, 12, 0.800) ; 
  background-size: contain;
  cursor: pointer; /* Cursor on hover */
  border: 0;
}



.bg-overlay {
  background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(img/Prawns/Prep.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #fff;
  height: 350px;
  padding-top: 50px;
}

.bg-overlay2 {
  background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(img/Prawns/Cooking.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #fff;
  height: 750px;
  padding-top: 50px;
}

.caption2 {
  width: 100%;
  max-width: 100%;
  z-index:1;
  text-shadow: .1rem .1rem .8rem black;

}
.list-middle {
    text-align: left;
    width: 60%;
    position:relative;
    left: 30%;
    
}




/*--- Social Links --*/
.Connect-Caption {
  width: 100%;
  background-color: #1d1d1d;
  padding-left: 4rem;
  padding-right: 4rem;
}

.social a {
  font-size: 4.5em;
  padding: 3rem;
}
.fa-facebook {
  color: #3b5998
}
.fa-pinterest {
  color: #c8232c 
}
.fa-instagram{
  color: #517fa4
}
.fa-youtube{
  color: #bb0000
}

.fa-facebook:hover,
.fa-pinterest:hover,
.fa-instagram:hover,
.fa-youtube:hover {
  transform: scale(1.3);
}


.social{
  background-color: #141414;
  color: #d5d5d5;
  padding-bottom: 1vh;
  padding-top: 1vh;

}

footer {
  background-color: #141414;
  color: #d5d5d5;
}

hr.light {
  border-top: 1px solid #d5d5d5;
  width: 75%;
}
/*--- big desktop --*/
@media (max-width: 1400px){

  .social a {
    font-size: 4.5rem;
    padding: 0.7rem;  
  }
  .list-middle {
    text-align: left;
    width: 60%;
    position:relative;
    left: 30%;
    
}
}
/*--- desktop --*/
@media (max-width: 1200px) {
  .social a {
    font-size: 3.5rem;
    padding: 0.5rem;  
  }
  .list-middle {
    text-align: left;
    width: 80%;
    position:relative;
    left: 10%;
    
  }

}
/*--- tablet and small desktop --*/
@media (max-width: 992px) {
  .social a {
    font-size: 3.5rem;
    padding: 0.2em;   
}
  
}
/*--- Tablet --*/
@media screen and (max-width: 768px) {
  .social a {
    font-size: 3.5rem;
    padding: 0.2em;  
  }
  .heading{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .li-ing {
    font-size: 1.3rem;
    color: rgba(12, 12, 12, 0.800);
    font-weight: 600; 
    font-style: italic
  }
  
}
/*--- Landscape Phone --*/
@media screen and (max-width: 767px) {
  .list-middle {
    text-align: left;
    width: 90%;
    position:relative;
    left: 10%;
}
  .social a {
    font-size: 3.5rem;
    padding: 0.75rem;
  }
  .caption h1 {
   font-size: 2.5rem;
    }
  .caption h3 {
    font-size: 2rem;
    }

  .heading{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .li-ing {
    font-size: 1.3rem;
    color: rgba(12, 12, 12, 0.800);
    font-weight: 600; 
    font-style: italic
  }
  .list-middle {
    text-align: left;
    width: 100%;
    position:relative;
    left: 0%;
    font-size: 1.2rem;

}


/*--- Phone --*/
@media screen and (max-width: 480px) {
  .social a {
    font-size: 3rem;
    padding: 1rem;
  }
  .caption h1 {
    font-size: 2rem;
  }
  .caption h3 {
    font-size: 1.5rem;
  }

  .heading{
    padding-top: 1rem;
    padding-bottom: 1rem;
    
  }
  .li-ing {
    font-size: 1.2rem;
    color: rgba(12, 12, 12, 0.800);
    font-weight: 600; 
    font-style: italic
  }
  .bg-overlay2 {

    height: 1000px;

  }

  .list-middle {
    text-align: left;
    width: 100%;
    position:relative;
    left: 0%;
    font-size: 1.2rem;
}

/*--- Phone --*/
@media screen and (max-width: 380px) {
  .social a {
    font-size: 3rem;
    padding: 1rem;
  }
  .caption h1 {
    font-size: 2rem;
  }
  .caption h3 {
    font-size: 1.5rem;
  }

  .heading{
    padding-top: 1rem;
    padding-bottom: 1rem;
    
  }
  .li-ing {
    font-size: 1rem;
    color: rgba(12, 12, 12, 0.800);
    font-weight: 600; 
    font-style: italic
  }
  .list-middle {
    text-align: left;
    width: 100%;
    position:relative;
    left: 0%;
    font-size: 1.2rem;
    
}
}
/*---extra small Phone --*/
@media screen and (max-width: 340px) {
  .social a {
    font-size: 3rem;
    padding: 1rem;
  }
  .caption h1 {
    font-size: 2rem;
  }
  .caption h3 {
    font-size: 1.5rem;
  }

  .heading{
    padding-top: 1rem;
    padding-bottom: 1rem;
    
  }
  .li-ing {
    font-size: 0.9rem;
    color: rgba(12, 12, 12, 0.800);
    font-weight: 600; 
    font-style: italic
  }
  .bg-overlay2 {

    height: 1200px;

  }
  .list-middle {
    text-align: left;
    width: 100%;
    position:relative;
    left: 0%;
    font-size: 1.2rem;
    
}
}