/*html{  box-sizing:border-box; } scroll-behavior:smooth;*/
*,:before,:after{box-sizing:inherit;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-thumb {
  border: 6px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #fff;
}

body { 
  margin:0; padding:0;
  font-size: 1rem; font-family: "Manrope", sans-serif; font-optical-sizing: auto; 
  color: #fff; background-color: #111317;
}

/*  The basics  */
h1,h2,h3,h4,h5{ 
  font-family: "Manrope", sans-serif; color: #fff;  
  padding:0; margin:0; 
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1 { font-size: 3vw; font-weight:800; letter-spacing: -1px; color: #111317; background-color: #ffdb6e; padding: 0px 20px; display: inline-block; }
h2 { font-size: 3.0vw; font-weight:200; letter-spacing: 3px; padding: 10px 0; color: #ffdb6e; border-radius: 12px; margin-bottom: 10%; }
h3 { font-size: 1vw; font-weight:800; letter-spacing: 2px; color: #ffdb6e; }


hr { border: 0; height: 2px; background: #ffdb6e; width:160px; margin: 20px 0px; }

p { line-height:  1.6em; letter-spacing: 2px; font-size: 1.2rem; padding: 5px 0px; }
a { color:#ffc209; text-decoration: underline; transition: 0.3s; }
a:hover { color: #ffdb6e; }




/*------------------------------*\
    Grid System
\*------------------------------*/

.gridrow, 
.gridcolumn { box-sizing: border-box; }
.gridrow:before,
.gridrow:after { content: ""; display: table;}
.gridrow:after { clear: both; }
.gridcolumn { position: relative; float: left; display: block; }

.gridcolumn + .gridcolumn { margin-left: 0%; }
.gridcolumn-1, .gridcolumn-1x { width: calc( 100% * 1 / 12 ); }
.gridcolumn-2, .gridcolumn-2x { width: calc( 100% * 2 / 12 ); }
.gridcolumn-3, .gridcolumn-3x { width: calc( 100% * 3 / 12 ); } /*{ width: 24.9999999999%; }*/
.gridcolumn-4, .gridcolumn-4x { width: calc( 100% * 4 / 12 ); }
.gridcolumn-5aria, .gridcolumn-5ariax { width: calc( 100% * 1 / 5 ); }
.gridcolumn-5, .gridcolumn-5x { width: calc( 100% * 5 / 12 );}
.gridcolumn-6, .gridcolumn-6x { width: calc( 100% * 6 / 12 ); }
.gridcolumn-7, .gridcolumn-7x { width: calc( 100% * 7 / 12 ); }
.gridcolumn-8, .gridcolumn-8x { width: calc( 100% * 8 / 12 ); }
.gridcolumn-9, .gridcolumn-9x { width: calc( 100% * 9 / 12 ); }
.gridcolumn-10, .gridcolumn-10x { width: calc( 100% * 10 / 12 ); }
.gridcolumn-11, .gridcolumn-11x { width: calc( 100% * 11 / 12 ); }
.gridcolumn-12 { width: 100%; margin-left: 0; }


@media only screen and (max-width: 801px) {
  .gridcolumn-1, .gridcolumn-2, .gridcolumn-3, .gridcolumn-4, .gridcolumn-5, .gridcolumn-5aria, .gridcolumn-6, .gridcolumn-7, .gridcolumn-8, .gridcolumn-9, .gridcolumn-10, .gridcolumn-11, .gridcolumn-12 { 
      float: none; width: auto; text-align: center !important; 
    }
  .gridcolumn + .gridcolumn { margin-left: 0; text-align: center !important; }
}

.imgx { display: block;  /* margin: 0 auto; Centred */  max-width: 100%; }

.gridcolumn { border: 0px solid #4affff; padding: 1px; min-height: 0px; display: block;}
.vertical { display: block; vertical-align: middle; }
.txtCenter { text-align: center; }

.gridrow { margin-bottom: 0px; /*  max-width: 1280px; */  margin: 0px auto; }
.gridrow:last-child { margin-bottom: 0; }
.gridcolumn .gridcolumn { border-color: 0px solid #4ed7ff; }

@media only screen and (max-width: 801px) {
    .gridrow { margin-bottom: 0px; }
    .gridcolumn { margin-bottom: 0px; text-align: center !important; }
    .gridrow:last-child .gridcolumn:last-child { margin-bottom: 0px; text-align: center; }
    .imgx { display: block; margin: 0 auto; max-width: 100%; position: relative; }
}






/*    Custom Css*/

.displayDesktop { display:block; }
.displayMobile { display:none; }



.gridrow { height: 80%; margin: 10% }
.gridcolumn { height: 100%; padding: 5%; }

.offerForm { 
  position: relative; display: block;
  margin: 0; padding: 10%;
  background-color: #363a3f;
  text-align: center;
  border-radius: 12px;
}

input {
  width: 100%; padding: 20px; margin: 0;
  background-color: #232830;
  border-radius: 12px;
  font-size: 1rem;
  color: #fff;
  border: none; outline: none;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 20px;
  border: none;
  background-color: #ffdb6e;
  color: black;
  border-radius: 12px;
  font-size: 16px; font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.2s;
}
button:hover {
  color: #fff; background-color: #111317;
}


/* MOBILE */

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

  .displayDesktop { display: none; }
  .displayMobile { display: block; }


  .gridrow { margin: 0 }
  .gridcolumn { height: 100%; padding: 5%; }

  h1 { font-size: 10vw;  color: #111317; background-color: #ffdb6e; padding: 0px 20px; display:block; text-align: center; border-radius: 12px; }
  h2 { font-size: 5vw; margin-bottom: 6%; }
  h3 { font-size: 5vw; }


  p { line-height:  1.5rem; font-size: 1rem; padding: 5px 0px; margin: 0; }

  .offerForm { padding: 5%; }

}