@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Courgette&family=Dancing+Script&family=Lobster+Two&family=Montserrat&family=Nunito&family=Nunito+Sans&family=Oxygen&family=PT+Sans&family=Pattaya&family=Poppins&family=Roboto&display=swap");
/* FONT FAMILIES INCLUDED IN FORM
font-family: 'Abril Fatface', cursive;
font-family: 'Courgette', cursive;
font-family: 'Dancing Script', cursive;
font-family: 'Lobster Two', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Nunito', sans-serif;
font-family: 'Nunito Sans', sans-serif;
font-family: 'Oxygen', sans-serif;
font-family: 'Pattaya', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Roboto', sans-serif;
*/
/****************************** Element Colors ********************************/
/******************************* Color variables ******************************/
/*
================================================================================ 
=================================== BODY ======================================= 
================================================================================ 
*/
/*
//////////////////////////////////////////// PREFIXED BY AUTOPREFIXER 28.04.2021
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/
body {
  padding-left: 0;
  padding-right: 0;
  width: auto;
  background-color: transparent !important;
  background-image: url("../images/bg-paper-yellow.jpg");
  background-repeat: repeat;
  overflow-y: scroll;
  font-family: Roboto, sans-serif;
  /* Hide Scrolbars https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp*/
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  overflow-x: hidden;
}

/**************** Hide scrollbar for Chrome, Safari and Opera *****************/
body::-webkit-scrollbar {
  display: none;
}

/*********** Fullscreen background image for 404 page not found page **********/
.bg {
  background: url("../images/elephant.jpg") no-repeat center center fixed;
  background-size: cover;
  -o-background-size: cover;
}

.main-container {
  padding-top: 59px;
}

#footer-container {
  position: absolute;
  bottom: 0;
}

#bg-fullscreen {
  min-height: 100vh;
  position: relative;
  padding-top: 59px;
  padding-bottom: 10rem;
}

div#pnf-error {
  min-height: 25rem;
}

div#pnf-error h4,
div#four-0-four {
  color: #eaecee;
  text-shadow: 1px 1px 4px #343a40;
}

/************* screen size < 576 px */
#spinner-404 {
  position: absolute;
  left: -1.5em;
  bottom: 0.4em;
}

/* ************************** Blockquote styling ******************************/
/************************************ Homepage blockquote */
#blockquote-home p:first-child {
  color: #61604e;
  text-shadow: 1px 1px 4px #b3b3af;
}

#blockquote-home p.blockquote-footer {
  color: #7b7968;
  text-shadow: 1px 1px 4px #b3b3af;
}

/****************************** 404 error page blockquote */
#blockquote-404 p:first-child {
  color: #e1e4e8;
  text-shadow: 1px 1px 4px #343a40;
}

#blockquote-404 p.blockquote-footer {
  color: #c4cad0;
  text-shadow: 1px 1px 4px #343a40;
}

/* ***************************** Heading styling ******************************/
h1 {
  color: #dea773 !important;
}

h2 {
  color: #e88a09 !important;
}

main h2 {
  margin-left: 10%;
}

/* ***************************** Header styling *******************************/
#heading-container {
  position: relative;
}

.header-heading {
  font-size: 3rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

header img {
  margin-bottom: 2.5rem;
}

/*************************** Highlight color classes **************************/
.highlight-color-green {
  color: #248547;
}

.highlight-color-red {
  color: #f20625;
}

.highlight-color-tan {
  color: #fce9b1;
}

.highlight-color-yellow {
  color: #9b7914;
}

.highlight-color-orange {
  color: #ba6f20;
}

.highlight-color-black {
  color: #070303;
}

.highlight-color-white {
  color: #fcfcfc;
}

/************************* Highlight background classes  **********************/
.highlight-bg-light {
  background: #f5f2f0;
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.highlight-bg-dark {
  background: #0c0b0a;
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.highlight-bg-blue {
  background: #14779b;
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

/* 
================================================================================ 
================================= ACCORDION ==================================== 
================================================================================ 
*/
#accordion-col {
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 0;
}

.accordion-heading {
  font-family: "Marck Script", cursive;
  font-size: 24px;
}

.card-header {
  background-color: #fffefbf5 !important;
}

.card-body {
  background-color: #ffffff;
}

.card {
  color: #575246;
  background-color: transparent !important;
}

.dropdown-divider {
  border-color: #d5d4b9 !important;
}

.accordion-heading {
  color: #383836;
}

.form-control {
  background-color: #faf7e6 !important;
  border: 1px solid #cacaca !important;
  color: #434040 !important;
}

.form-control:disabled {
  background-color: #716d6d !important;
}

/* ********************** Text input validation error span ********************/
#required-message {
  position: absolute;
  bottom: -1.6em;
  left: 0.8rem;
}

.show-span {
  color: red;
  opacity: 1;
  -webkit-transition-duration: 2.7s;
  -o-transition-duration: 2.7s;
  transition-duration: 2.7s;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

.hide-span {
  color: red;
  opacity: 0;
  -webkit-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

/* 
================================================================================ 
==================================== NAVBAR ==================================== 
================================================================================ 
*/
/*********** Navbar and offcanbvas coutesy of Bootstrap example code **********/
.navbar {
  background-color: #d39e00ab !important;
  border-bottom: 1px solid #999965;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.bg-navbar-custom {
  background-color: #d39e00bb;
}

/*********************************  Offcanvas *********************************/
#off-canvas-left.offcanvas-collapse {
  position: fixed;
  top: 56px;
  /* Height of navbar */
  bottom: 0;
  right: 100%;
  left: -300px;
  width: 300px;
  padding-right: 1rem;
  padding-left: 1rem;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: left, visibility;
  -o-transition-property: left, visibility;
  transition-property: left, visibility;
}

#off-canvas-left.offcanvas-collapse {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  /*   Adds a subtle drop shadow   */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  border-right: 5px solid rgba(0, 0, 0, 0.2);
}

/****************** Makes the nav visibile with the open class ****************/
#off-canvas-left.offcanvas-collapse.open {
  left: 0;
  visibility: visible;
}

#off-canvas-left.navbar-expand-lg .navbar-nav {
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

#off-canvas-left.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

#off-canvas-left.nav-scroller .nav {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

/* 
================================================================================ 
================================ RANGE SLIDER ================================== 
================================================================================ 

/********************************************************* Range with tooltip */
/********************* https://css-tricks.com/value-bubbles-for-range-inputs/ */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.range-slider {
  margin: 0px 0 0 0%;
}

.range-slider {
  width: 100%;
}

/*******************  disabled styling ********************/
.range-slider__range:disabled {
  background: #716d6d;
}

.range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (74px));
  height: 20px;
  border-radius: 5px;
  background: #6b99f1;
  outline: none;
  padding: 0;
  margin: 0;
}

.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -webkit-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.range-slider__range::-webkit-slider-thumb:hover {
  background: #1abc9c;
}

.range-slider__range:active::-webkit-slider-thumb {
  background: #1abc9c;
}

.range-slider__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -moz-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.range-slider__range::-moz-range-thumb:hover {
  background: #1abc9c;
}

.range-slider__range:active::-moz-range-thumb {
  background: #1abc9c;
}

.range-slider__range:focus::-webkit-slider-thumb {
  -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

.range-slider__value {
  display: inline-block;
  position: relative;
  width: 60px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  background: #2c3e50;
  padding: 5px 10px;
  margin-left: 8px;
}

.range-slider__value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #2c3e50;
  border-bottom: 7px solid transparent;
  content: "";
}

::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}

/* 
================================================================================ 
=================================== BUTTON BLOCK =============================== 
================================================================================ 
*/
/***************************** CSS CODE BLOCK  ********************************/
div#css-button {
  height: auto;
}

/********************************* CSS BUTTON *********************************/
#css-button {
  background-color: #dfdbd3;
  border-radius: 5px 5px 5px 5px;
  z-index: 10;
}

/************** POSITION COLOR PICKER UNDER THE BUTTON DISPLAY  ***************/
.display-background-picker {
  position: absolute;
  bottom: -38px;
  right: 0;
  width: 100%;
}

/*  PRE BLOCK */
pre.language-css {
  padding: 0 5%;
}

#button-output {
  margin-bottom: 7px;
}

#button-main-background {
  background-image: -webkit-linear-gradientt(0deg, rgba(0, 0, 0, 0.3), transparent);
  background-image: -moz-linear-gradientt(0deg, rgba(0, 0, 0, 0.3), transparent);
  background-image: -ms-linear-gradientt(0deg, rgba(0, 0, 0, 0.3), transparent);
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.3)), to(transparent));
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.3), transparent);
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent);
  background-image: -o-linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent);
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 30px;
}

/************************** Copy to clipboard button **************************/
.copy-code-button {
  top: 100px;
  min-height: 50%;
  color: #757373;
  display: inline-block;
  margin-right: auto;
  margin-left: 5%;
  margin-bottom: -2px;
  margin-top: 2rem;
  font-size: 0.8em;
  z-index: 11 !important;
}

#demo-button {
  margin-top: 65px;
  margin-bottom: 65px;
}

.copy-css {
  color: #aa580b;
}

.copy-css:hover {
  cursor: pointer;
  color: green;
}

.copy-css:focus {
  outline: 0 !important;
}

.bazinga pre {
  margin-top: 100px;
}

/* Fixes bug on iPad where code wraps */
code {
  word-wrap: inherit !important;
}

/****************** Highlights the css-container text on copy ******************/
.copy-highlight {
  background-color: rgba(22, 118, 207, 0.33) !important;
}

/* Transition color from css-container aplha 0 to copy-highlight alpha 0.33 */
#css-container {
  transition: background-color 0.5s ease;
  background-color: rgba(22, 118, 207, 0);
}

.show-fadein {
  opacity: 1;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

.hide-fadeout {
  opacity: 0;
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

/************* Error message class for unsuccesful clipboard copy *************/
.error-msg {
  color: red;
  margin-left: 10px;
}

.success-msg {
  color: #09993e;
  margin-left: 10px;
}

/* 
================================================================================ 
=============================== DIRECTIONS BLOCK =============================== 
================================================================================ 
*/
.instructions .content h3 {
  color: #b4e826;
}

.content {
  border-top: 3px solid #9b7914;
}

/* 
================================================================================ 
=================================== FOOTER BLOCK =============================== 
================================================================================ 
*/
div.footer {
  background-color: #343a40;
  border-top: 1px solid black;
  padding-top: 10px;
  -webkit-box-shadow: -2px 0px 3px rgba(0, 0, 0, 0.8);
  box-shadow: -2px 0px 3px rgba(0, 0, 0, 0.8);
  height: 10rem;
}

.social-links ul {
  margin-bottom: 0 !important;
}

.social-links li {
  margin-bottom: 0;
}

.social-links a {
  display: inline-block;
  color: white;
  font-size: 25px;
  -webkit-transition: -webkit-transform 0.7s ease-in-out;
  transition: -webkit-transform 0.7s ease-in-out;
  -o-transition: transform 0.7s ease-in-out;
  transition: transform 0.7s ease-in-out;
  transition: transform 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
  outline: none;
}

.social-links a:hover {
  color: #9bf5f8;
  font-size: 25px;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* 
==============================================================================
============================== CONTACT FORM MODAL ============================
==============================================================================
*/
input#fname.form-control,
input#lname.form-control,
input#email.form-control,
textarea#message.form-control {
  background-color: #ffffff !important;
}

.modal-content {
  background-image: url("../images/bg-paper.jpg");
  background-repeat: repeat;
}

.modal-header,
.modal-body,
.modal-footer {
  background-color: #e7e7e754;
}

input#firstname.form-control,
input#lastname.form-control,
input#email.form-control,
textarea#message.form-control {
  background-color: #f0f0f0 !important;
}

/* 
 ==============================================================================
 =================================== BUTTONS ================================== 
 ==============================================================================
 */
/***************** Buttons created from the site buttonStyler *****************/
.btn-custom-1.btn {
  font-family: "Abril Fatface", cursive;
  color: #9c23ae;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #9c23ae;
  border-radius: 5px;
  background: #ffb24d;
}

.btn-custom-1.btn:hover {
  color: #ffb24d;
  background: #9c23ae;
  border: 1px solid #ffb24d;
}

.btn-custom-2.btn {
  font-family: "Poppins", sans-serif;
  color: #9c23ae;
  font-size: 12px;
  text-shadow: 1px 2px 2px rgba(6, 6, 6, 0.56);
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.52);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.52);
  padding: 4px 12px;
  border: 1px solid #9c23ae;
  border-radius: 6px;
  background: #ffb24d;
}

.btn-custom-2.btn:hover {
  color: #ffb24d;
  background: #9c23ae;
  border: 1px solid #ffb24d;
}

.btn-custom-3.btn {
  font-family: "Montserrat", sans-serif;
  color: #fcfee9;
  font-size: 13px;
  text-shadow: 1px 1px 2px black;
  padding: 4px 16px;
  border: 1px solid #72ae57;
  border-radius: 5px;
  background: #ac9e84;
}

.btn-custom-3.btn:hover {
  color: #ffeac4;
  background: #72ae57;
  border: 1px solid #ac9e84;
}

button.btn.take-me-back {
  font-family: "Dancing Script", cursive;
  color: #f88b43;
  font-size: 42px;
  -webkit-box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.5);
  text-shadow: 1px 2px 3px black;
  padding: 4px 19px;
  border: 3px solid rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.1);
}

button.btn.take-me-back:hover {
  color: #fefccb;
  background: rgba(0, 0, 0, 0);
}

/* 
================================================================================
============================== DIRECTION SECTION =============================== 
================================================================================
*/
/***** display this row with flex and use wrap (= respect columns' widths) ****/
.row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/********* vertical spacing between columns ***********/
[class*=col-] {
  margin-bottom: 30px;
}

.content {
  height: 100%;
  padding: 20px 20px 10px;
  color: #fff;
}

/*********** Demo backgrounds and styling ************/
.colour-4 {
  background: #2f351275;
}

.content h3 {
  margin-top: 0px;
  font-weight: 300;
}

h1 {
  font-weight: 300;
  margin-bottom: 40px;
}

/* 
============================================================================== 
============================ Breakpoint Specific ============================= 
============================================================================== 
*/
/*************** Small devices (landscape phones, 576px and up) ***************/
@media (min-width: 576px) {
  .copy-code-button {
    margin-top: 4em;
  }

  div#css-button {
    margin-bottom: 30px;
  }

  #accordion-col {
    margin-bottom: 0.5rem;
  }

  .display-background-picker {
    width: 100%;
    bottom: -38px;
  }

  .header-heading {
    font-size: 3.2rem;
  }

  html {
    font-size: 1rem;
  }

  h1 {
    font-size: 1.2rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  #spinner-404 {
    position: absolute;
    left: -1em;
    bottom: 1em;
  }
}
/****************** Medium devices (tablets, 768px and up) ********************/
@media (min-width: 768px) {
  #button-output {
    margin-bottom: 0.4rem;
  }

  .copy-code-button {
    margin-top: 2.5rem;
  }

  div#css-button {
    margin-bottom: 33px;
  }

  #accordion-col {
    margin-bottom: 1rem;
  }

  .display-background-picker {
    width: 100%;
    bottom: -41px;
  }

  .header-heading {
    font-size: 3.3rem;
  }

  html {
    font-size: 1.1rem;
  }

  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  #bg-fullscreen {
    padding-bottom: 4rem;
    /* padding bottom for footer in 404.html*/
  }

  div.footer {
    height: 4rem !important;
    /* positioned absolutely to bottom.*/
  }
}
@media (min-width: 992px) {
  #demo-button {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  #accordion-col {
    margin-bottom: 1.1rem;
  }

  .display-background-picker {
    width: 50%;
    bottom: -45px;
  }

  .header-heading {
    font-size: 3.5rem;
  }

  html {
    font-size: 1.2rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.4rem;
  }
}
/************** X-Large devices (large desktops, 1200px and up) ***************/
@media (min-width: 1200px) {
  .header-heading {
    font-size: 3.5rem;
  }

  html {
    font-size: 1.2rem;
  }

  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.6rem;
  }
}
/************* XX-Large devices (larger desktops, 1400px and up) **************/

/*# sourceMappingURL=style.css.map */