/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

   html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
   body{line-height:1}
   article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
   nav ul{list-style:none}
   blockquote,q{quotes:none}
   blockquote:before,blockquote:after,q:before,q:after{content:none}
   a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
   mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
   del{text-decoration:line-through}
   abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
   table{border-collapse:collapse;border-spacing:0}
   hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
   input,select{vertical-align:middle}
   li{list-style:none}
   
   textarea,
   input.text,
   input[type="text"],
   input[type="button"],
   input[type="submit"],
   .input-checkbox {
       -webkit-appearance: none;
       border-radius: 15px;
   }
   
   :root {
       --text: #FFFFFF;
       --greytext: #acacac;
       --white: #ffffff;
       --black: #000000;
       --offblack: #121212;
       --blue: #0926c3;
       --purple: #8722f2;
       --red: #c90012;
       --pink: #ce00a0;
       --yellow: #fffe00;
       --magenta: #ff00ff;
       --cyan: #0af8ff;
       --grey: #333333;
       --lightgrey: #d9d9d9;
       --hr: #212121;
       --fs-gradient:linear-gradient(135deg,rgba(200, 0, 161, 1) 0%,rgba(10, 38, 194, 1) 100%);
       --fs-gradient-green: linear-gradient(135deg,rgb(0 200 85) 0%,rgb(64 10 194) 100%);
       --fs-gradient-three:  linear-gradient(180deg,#0074d3 0%,#003751 100%);
       --fs-gradient-four: linear-gradient(180deg,#00a547 0%,#00a5a8 100%);
       --mid-grey: #666666;
   }
   
   ::placeholder {
       color: var(--text); opacity: 1!important;
   }
   ::-webkit-input-placeholder {
       color: var(--text); opacity: 1!important;
   }
   ::-moz-placeholder {
       color: var(--text); opacity: 1!important;
   }
   :-ms-input-placeholder {
       color: var(--text); opacity: 1!important;
   }
   :-moz-placeholder {
       color: var(--text); opacity: 1!important;;
   }
   /*
   @font-face {
       font-family: 'Ethnocentric Rg';
       src: url('../webfonts/EthnocentricRg-Italic.woff2') format('woff2'),
           url('../webfonts/EthnocentricRg-Italic.woff') format('woff');
       font-weight: normal;
       font-style: italic;
       font-display: swap;
   }
   
   @font-face {
       font-family: 'Ethnocentric Rg';
       src: url('../webfonts/EthnocentricRg-Regular.woff2') format('woff2'),
           url('../webfonts/EthnocentricRg-Regular.woff') format('woff');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }*/
   
   
   
   /*
   ==========================================================================
   GLOBAL & WP SPECIFIC STYLES
   ==========================================================================
   */
   
   * {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       -webkit-text-size-adjust: none;
   }
   
   input, textarea, select {
       -webkit-border-radius:0;
       border-radius:15px;
   }
   
   img,
   audio,
   video,
   canvas {
       max-width: 100%;
   }
   
   html {
       min-height: 100%;
       margin-bottom: 1px;
       overflow: -moz-scrollbars-vertical!important;
   }
   
   ::selection {
       background: var(--pink);
       color: var(--white);
   }
   
   ::-moz-selection {
       background: var(--pink);
       color: var(--white);
   }
   
   ::-webkit-selection {
       background: var(--pink);
       color: var(--white);
   }
   
   .cf:before,.cf:after {content: " "; /* 1 */    display: table; /* 2 */}
   .cf:after {clear: both;}
   .cf {clear: both;}
   
   strong, b {
       font-weight:bold;
   }
   
   em, i {
       font-style:italic;
   }
   
   img.alignright {
       float:right;
       margin:0 0 2em 1em;
   }
   
   img.alignleft {
       float:left;
       margin:0 2em 1em 0;
   }
   
   img.aligncenter {
       display: block;
       margin-left: auto;
       margin-right: auto;
   }
   
   .alignright {
       float:right;
       margin:0 0 2em 1em;
   }
   
   .alignleft {
       float:left;
       margin:0 0 2em 1em;
   }
   
   img.wp-smiley {
       float: none;
       margin: 0 0 0 5px;
       vertical-align:middle;
   }
   
   p {
       margin: 0 0 20px 0;
   }
   
   a {
       color: var(--pink);
       text-decoration: none;
   }
   
   a:hover {
       color: var(--cyan);
       text-decoration: none;
   }
   
   
   /*
   ==========================================================================
   H & LINKS
   ==========================================================================
   */
   
   h1 {
       font: 50px 'Montserrat',Helvetica,Arial,Lucida,sans-serif !important;
       margin:0 0 20px 0;
       padding:0;
       color: var(--pink);
       font-weight: 400;
   }
   
   h2 {
       font: 42px 'Montserrat',Helvetica,Arial,Lucida,sans-serif !important;
       margin:0 0 20px 0;
       padding:0;
       color: var(--pink);
       font-weight: 400;
   }
   
   h3 {
       font: 36px 'Montserrat',Helvetica,Arial,Lucida,sans-serif !important;
       margin:0 0 20px 0;
       padding:0;
       color: var(--pink);
       font-weight: 400;
   }
   
   h4 {
       font: 28px 'Montserrat',Helvetica,Arial,Lucida,sans-serif !important;
       margin:0 0 20px 0;
       padding:0;
       color: var(--pink);
       font-weight: 400;
   }
   
   h5 {
       font: 24px 'Montserrat',Helvetica,Arial,Lucida,sans-serif !important;
       margin:0 0 20px 0;
       padding:0;
       color: var(--pink);
       font-weight: 400;
   }
   
   /*
   ==========================================================================
   GENERAL
   ==========================================================================
   */
   
   body {
       background: #fff;
       color: #444;
       font: 16px/1.8 "Roboto Condensed", Helvetica, Arial, sans-serif;
       margin:0;
       overflow-x: hidden;
       -webkit-font-smoothing: antialiased;
   
   }
   
   header {
       background: var(--black);
       height: 120px;
       padding: 20px 0;
   }
   
   .sticky {
       position: fixed;
       top: 0;
       padding: 5px 0;
       z-index: 999;
       width: 100%;
       height: 100px;
   }
   
   .sticky .logo {
       width: 120px;
       margin: 10px 0;
   }
   
   .sticky .nav .sub-menu {
       margin: 9px 0 0 0;
   }
   
   .container {
       width:100%;
       margin: 50px auto;
   }
   
   .inner {
       position: relative;
       width: 100%;
       max-width: 1510px;
       margin: 0 auto;
       padding: 0 30px;
   }
   
   .logo {
       width: 160px;
       height: auto;
       float: left;
       margin: -5px 0 0 0;
       transition: all 0.3s ease-in;
   }
   
   .header-contact {
       float: right;
       margin: 5px 0px;
       font-size: 16px;
   }
   
   .head-social a {
       margin: 0 5px;
       transition: all 0.3s ease-in;
   }
   
   .head-social a:hover {
       transition: all 0.3s ease-in-out;
   }
   
   .head-phone,
   .head-social {
       display: inline-block;
       margin: 0 0 0 20px;
   }
   
   .head-phone {
       color: var(--pink);
   }
   
   .head-user {
       float: right;
       font-size: 12px;
       color: var(--pink);
       font-weight: 600;
       margin: 5px 0 0 20px;
       border-left: 1px solid var(--grey);
       padding: 0 0 0 20px;
   }
   
   .head-user p {
       margin: 0 0 -5px 0;
   }
   
   .bigger {
       font-size: 16px;
   }
   
   .content-centre {
       text-align: center;
   }
   
   .content-centre h1 {
       color: var(--pink);
   }
   
   .three-grid {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-column-gap: 30px;
       grid-row-gap: 30px;
       justify-items: stretch;
       align-items: center;
       margin: 30px;
       text-align: center;
   }
   
   .three-grid-alt {
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-column-gap: 30px;
       grid-row-gap: 30px;
       justify-items: stretch;
       align-items: inital;
       margin: 30px;
       text-align: center;
   }
   
   .spacer {
       margin: 50px auto;
   }
   
   .offers-block .three-grid {
       margin: 0px 30px 30px 30px;
   }
   
   .three-col {
       position: relative;
   }
   
   .three-col h5 {
       font: 22px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       font-weight: 600;
       text-shadow: 0px 0px 6px #00000029;
       letter-spacing: 1.3px;
       color: var(--white);
   }
   
   .three-col h4 {
       font: 24px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       font-weight: 600;
       text-shadow: 0px 0px 6px #00000029;
       letter-spacing: 1.3px;
       margin: 0;
       color: var(--white);
   }
   
   .three-col img {
       width: 100%;
       height: auto;
   }
   
   .card-front {
       position: absolute;
       top: 20px;
       left: 0;
       right: 0;
       transition: all 0.3s ease-in-out;
       font-size: 16px;
   }
   
   .card-back {
       opacity: 0;
       background: rgba(0, 0, 0, 0.8);
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       padding: 30px;
       text-shadow: 0px 0px 6px #00000029;
       color: var(--lightgrey);
       font-size: 16px;
       transition: all 0.3s ease-in-out;
   }
   
   
   .card-back-info {
       position: relative;
       top: 50%;
       width: 90%;
       transform: translateY(-50%);
       margin: auto;
   }
   
   .three-col:hover .card-front {
       opacity: 0;
       transition: all 0.3s ease-in-out;
   }
   
   .three-col:hover .card-back  {
       opacity: 1;
       transition: all 0.3s ease-in-out;
   }
   
   .card-back p {
       margin: 0;
   }
   
   .card-back hr {
       border-top: 2px solid var(--cyan);
       height: 2px;
       margin: 5px 0;
       display: inline-block;
       width: 60px;
   }
   
   .card-buttons {
       margin: 20px 0;
   }
   
   .cyan-buttons,
   .price-side .cyan-buttons,
   .gbuttons .dark-blue-button,
   .pbuttons .blue-button,
   .choose-your-room,
   .orange-button,
   #passengers-form .buttons button,
   #booking-process .buttons button,
   .viewmybooking button
   {
       display: inline-block;
       margin: 0 10px;
       padding: 10px 20px;
       font-weight: 600;
       font-size: 16px;
       font-weight: 600;
       font-family: "Roboto Condensed", sans-serif;
       color: #fff;
       transition: all 0.3s ease-in;
       height: 50px;
       background: transparent;
       margin-bottom: 0;
       vertical-align: baseline;
       border-radius: 25px!important;
       /*background-color: var(--cyan);*/
       background-color:#8722f2;
       /*background-image: var(--fs-gradient);*/
       /*border: 0;*/
       border: 2px solid #8722f2;
       outline: 2px solid transparent;
       background-size: 200% 100%;
   }
   .previous-button {
       text-align: center;
   }
   
   #booking-process .buttons button,
   .next-button{
       padding:0!important;
   }
   .cyan-buttons.previous {
       color: var(--grey);
   }
   .cyan-buttons.no-bg {
       background-color: transparent;
   }
   
   .cyan-buttons:hover,
   .price-side .cyan-button:hover,
   .gbuttons .dark-blue-button:hover,
   .pbuttons .blue-button:hover,
   .packed-section .pack-button:hover,
   .choose-your-room:hover,
   .orange-button:hover,
   #passengers-form .buttons button:hover,
   #booking-process .buttons button:hover,
   .viewmybooking button:hover {
       transition: all 0.3s ease-in-out;
       /*color: #fff;*/
       color:#8722f2;
       background-position: 95% 0%;
       background-color:white;
   
   }
   .gbuttons .dark-blue-button,
   .pbuttons .blue-button {
       margin-bottom: 10px;
       width: 100%;
       text-align: center;
       margin-left: 0;
       margin-right: 0;
   }
   .pbuttons .blue-button {
       margin-top: 10px;
   }
   .gbuttons a {
       width: 100%;
       text-align: center;
   
   }
   .price-side .cyan-buttons {
       width: 100%;
       text-align: center;
       margin: 0;
   }
   .price-side form {
       background-color: transparent;
       padding: 0;
   }
   .price-side button {
       width: 100%;
       margin: 0;
   }
   
   .block-trips {
       margin: 50px auto 0 auto;
   }
   
   /*
   ==========================================================================
   HOME
   ==========================================================================
   */
   
   .hero {
       position: relative;
       height: 900px;
       width: 100%;
   }
   
   .hero-inner {
       text-align: center;
       position: absolute;
       top: 300px;
       left: 0;
       right: 0;
       margin: 0 auto;
       max-width: 970px;
   }
   
   .hero-inner h1 {
       font-size: 54px;
       color: var(--white);
       text-shadow: 0px 3px 6px #00000029;
   }
   
   .hero-inner p {
       font-size: 18px;
       font-weight: 600;
       color: var(--white);
       text-shadow: 0px 3px 6px #00000029;
   }
   
   .cyan-button {
       display: inline-block;
       margin: 20px auto;
       padding: 10px 20px;
       font-weight: 600;
       font-size: 16px;
       font-weight: 500;
       color: var(--cyan);
       border:  1px solid var(--cyan);
       transition: all 0.3s ease-in;
   }
   
   .cyan-button:hover {
       transition: all 0.3s ease-in-out;
       background: var(--cyan);
       color: var(--black);
   }
   
   .hero-slide {
       height: 650px !important;
       background-size: cover;
   }
   
   .intro {
       text-align: center;
       font-size: 18px;
       max-width: 970px;
       margin: 50px auto;
   }
   
   .intro h1 {
       color: var(--pink);
   }
   
   
   .share-block {
       padding: 30px 0px;
       text-align: center;
       background: var(--offblack);
   }
   
   .share-social {
       float: left;
       color: var(--lightgrey);
       font-size: 16px;
       text-transform: uppercase;
   }
   
   .share-social a {
       color: var(--cyan);
       margin: 0 0 0 10px;
       font-size: 16px;
       transition: all 0.3s ease-in;
   }
   
   .share-social a:hover {
       color: var(--pink);
       transition: all 0.3s ease-in-out;
   }
   
   #goTop {
       float: right;
       font-size: 14px;
       transition: all 0.3s ease-in;
       color: var(--lightgrey);
       text-transform: uppercase;
   }
   
   #goTop:hover i,
   #goTop:hover {
       color: var(--pink);
       transition: all 0.3s ease-in-out;
   }
   
   #goTop i {
       color: var(--cyan);
       font-size: 16px;
       margin: 5px 0 0 10px;
   }
   
   .home-news-grid {
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-column-gap: 50px;
       grid-row-gap: 50px;
       justify-items: stretch;
       align-items: center;
   }
   
   .news-col img {
       width: 100%;
       height: auto;
   }
   
   .news-col h2 {
       color: var(--pink);
   }
   
   .news-col h5 {
       font: 18px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       color: var(--lightgrey);
       margin: 0 0 10px 0;
   }
   
   .news-col .cyan-buttons {
       margin: 0 20px 20px 0;
       text-align: center;
   }
   
   .col-text {
       padding: 60px 0;
   }
   
   .col-img {
       height: 100%;
   }
   
   .newsletter-block {
       padding: 40px 0px;
       background: var(--offblack);
   }
   
   .newsletter-grid {
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-column-gap: 50px;
       grid-row-gap: 50px;
       justify-items: stretch;
       align-items: center;
   }
   
   .newsletter-block h3 {
       color: var(--pink);
       margin: 0 0 5px 0;
   }
   
   .newsletter-block p {
       margin: 0;
   }
   
   .nl-form {
       position: relative;
   }
   
   .nl-text {
       padding: 10px;
       width: 100%;
       display: block;
       border: 2px solid var(--grey);
       font: 16px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       color: var(--white);
       background: var(--black);
   }
   
   .nl-text:focus {
       border: 2px solid var(--pink);
   }
   
   .nl-go {
       position: absolute;
       padding: 10px 20px;
       right: 0;
       top: 0;
       bottom: 0;
       background: var(--cyan);
       color: var(--black);
       font-weight: 900;
       text-transform: uppercase;
       font-size:16px;
       font-family: "Roboto Condensed", sans-serif;
       border: 1px solid var(--cyan);
       cursor: pointer;
       transition: all 0.3s ease-in;
       border-top-right-radius: 21px;
       border-bottom-right-radius: 21px;
       line-height: 1.2;
   }
   
   .nl-go:hover {
       position: absolute;
       background: var(--black);
       color: var(--cyan);
       transition: all 0.3s ease-in-out;
   }
   
   .inner-hero {
       width: 100%;
       position: relative;
       height: 400px;
   }
   
   .breadcrumbs {
       margin: 0 0 20px 0;
   }
   
   .single-offer-grid {
       width: 100%;
       display: grid;
       grid-template-columns: auto 270px;
       grid-column-gap: 30px;
       grid-row-gap: 30px;
       justify-items: stretch;
       align-items: inital;
   }
   
   .single-offer-grid-alt {
       width: 100%;
       display: grid;
       grid-template-columns: auto 370px;
       grid-column-gap: 30px;
       grid-row-gap: 30px;
       justify-items: stretch;
       align-items: inital;
   }
   
   .price-side {
       background: #fff;
       border: 1px solid var(--hr);
       padding: 30px;
       border-radius: 10px;
   }
   
   #booking-side .content {
       background: #fff;
       border: 0;
       padding: 0;
       border-radius: 0;
   }
   
   .price-box {
       padding: 20px 0;
       border-top: 1px solid var(--offblack);
       border-bottom: 1px solid var(--offblack);
   }
   
   .pb-col {
       display: inline-block;
       margin: 0 50px 0 0;
       vertical-align: middle;
   }
   
   .pb-col p {
       margin: 0;
   }
   
   .pb-col h5 {
       font: 26px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       margin: -5px 0 0 0;
       font-weight: 600;
   }
   
   .info-grid {
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-column-gap: 30px;
       grid-row-gap: 30px;
       justify-items: stretch;
       align-items: inital;
       margin: 30px auto;
       border-radius: 15px;
   }
   
   .info-grid p {
       margin: 0 0 10px 0;
       font-weight: 600;
   }
   .info-col {
       border-radius: 15px;
       padding: 2px;
   
   }
   .info-col:first-child {
       background: var(--fs-gradient-four);
   }
   .info-col:nth-of-type(2){
       background: var(--fs-gradient-green);
   }
   .info-col:last-child {
       background: var(--fs-gradient-three);
   }
   .info-padding {
       border-radius: 15px;
       padding: 18px;
   
       height: 100%;
       width: 100%;
   }
   
   .section {
       border-radius: 15px;
       padding: 15px;
   
       margin-bottom: 30px;
   }
   .single-col .section {
       padding-left: 0;
       padding-right: 0;
   }
   .single-itinerary {
       margin: 30px 0;
   }
   .single-itinerary p {
       margin-bottom: 5px;
   }
   
   .pink {
       color: var(--pink);
       font-weight: 600;
   }
   
   blockquote {
       position: relative;
       margin: 30px auto;
       padding: 0 0 0 70px;
   }
   
   blockquote:before {
       content: '\f10d';
       position: absolute;
       left: 0;
       font: 60px Arial, sans-serif;
       color: var(--grey);
       font-family: "Font Awesome 5 Free";
       font-display: block;
       font-weight: 900;
   }
   
   blockquote  p {
       margin: 0;
   }
   
   .author {
       font-weight: 700;
   }
   
   .single-offer-grid .card-front {
       padding: 10px;
   }
   
   .single-offer-grid .card-front h5{
       margin: 0 0 20px 0;
   }
   
   .single-offer-grid .card-back h5 {
       margin: 0 0 20px 0;
   }
   
   .map {
       margin: 0 0 30px 0;
   }
   
   .call-box {
       padding: 30px 0;
       border-top: 1px solid var(--offblack);
   }
   
   .call-box .cyan-buttons {
       margin: 0 20px 20px 0;
       height: 50px;
   }
   button.cyan-buttons {
       border-radius: 15px;
   }
   
   .gallery-grid {
       display: -ms-flexbox;
       -ms-flex-wrap: wrap;
       -ms-flex-direction: column;
       -webkit-flex-flow: row wrap;
       flex-flow: row wrap;
       display: -webkit-box;
       display: flex;
       margin: 30px auto 20px auto;
   }
   
   .three-gallery-grid {
       display: -ms-flexbox;
       -ms-flex-wrap: wrap;
       -ms-flex-direction: column;
       -webkit-flex-flow: row wrap;
       flex-flow: row wrap;
       display: -webkit-box;
       display: flex;
       margin: 0 auto 50px auto;
   }
   
   .gg-col img {
       width: 100%;
       height: 100%;
       display: block;
       object-fit: cover;
   }
   
   .gg-col {
       position: relative;
       transition: all 0.3s ease-in;
       -webkit-box-flex: auto;
       -ms-flex: auto;
       flex: auto;
       width: 200px;
       margin: .5vw;
   }
   
   @media screen and (max-width: 400px) {
       .gg-col { margin: 0; }
       .gallery-grid { padding: 0; }
   
   }
   
   .tg-no {
       margin: 30px auto;
   }
   
   .pop {
       opacity: 0;
       transition: all 0.3s ease-in-out;
   }
   
   .gg-col:hover .pop {
       opacity: 1;
       background: rgba(0, 0, 0, 0.8);
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       transition: all 0.3s ease-in-out;
   }
   
   .pop i {
       position: absolute;
       top: 45%;
       left: 0;
       right: 0;
       text-align: center;
       font-size: 25px;
       transform: scale(1.5);
       color: var(--cyan);
       transition: all 0.8s ease-in-out;
   }
   
   
   .pop:hover i {
       transform: scale(1);
       transition: all 0.8s ease-in-out;
   }
   
   .price-side-block p {
       margin: 0;
   }
   
   .price-side-block:first-of-type {
       margin: 0 0 30px 0;
       padding: 0 0 30px 0;
       border-bottom: 1px solid var(--hr);
   }
   
   .psb-border {
       padding: 0 0 30px 0;
       border-bottom: 1px solid var(--grey);
   }
   
   .price-side-block {
       margin: 0 0 30px 0;
   }
   
   .price-bold {
       font-size: 18px;
       color: var(--pink);
       font-weight: 600;
   }
   
   .total-price {
       font-size: 26px;
       color: var(--pink);
       font-weight: 600;
   }
   
   
   
   
   .checkGroup {
       display: flex;
       position: relative;
       margin: 0;
       cursor: pointer;
       user-select: none;
       padding: 10px 20px 10px 30px;
       font-size: 13px;
       vertical-align: top;
       justify-content: space-between;
       border-bottom: 1px solid var(--lightgrey);
   }
   
   .checkGroup input {
       position: absolute;
       opacity: 0;
       cursor: pointer;
       height: 0;
       width: 0;
   }
   
   .checkmark {
       position: absolute;
       top: 14px;
       left: 0;
       height: 18px;
       width: 18px;
       background-color: var(--black);
       border: 1px solid var(--cyan);
       border-radius: 6px;
   }
   
   .checkGroup:hover input ~ .checkmark {
       background-color: transparent;
   }
   
   .checkGroup input:checked ~ .checkmark {
       background-color: var(--black);
       border: 2px solid var(--grey);
   }
   
   .checkmark:after {
       content: "";
       position: absolute;
       display: none;
   }
   
   .checkGroup input:checked ~ .checkmark:after {
       display: block;
   }
   
   .checkGroup .checkmark:after {
       left: 5px;
       top: 2px;
       width: 4px;
       height: 8px;
       border: solid var(--white);
       border-width: 0 2px 2px 0;
       transform: rotate(45deg);
   }
   
   .ui-draggable, .ui-droppable {
       background-position: top;
   }
   
   .ui-slider {
       height: 10px!important;
       margin: 10px auto!important;
       padding: 0;
       width: 100%;
       position: relative;
       background: var(--grey);
       border: 1px solid var(--grey)!important;
   }
   
   #amount {
       border: 0;
       color: var(--pink);
       font-weight: bold;
       background: none;
       font-size: 18px;
       color: var(--pink);
       font-weight: 600;
       width: 100%;
   }
   
   .ui-slider-handle {
       background: var(--cyan);
       width: 17px;
       height: 17px;
       display: block;
       position: absolute;
       top: -4px;
       border-radius: 5px;
   }
   
   
   .ui-widget-header {
       border: 0;
       background: var(--lightgrey);
   }
   
   
   /*
   ==========================================================================
   PASSENGERS
   ==========================================================================
   */
   
   .passenger-info {
       margin: 50px auto;
   }
   
   .passenger-info h1 {
       text-transform: uppercase;
   }
   
   .passenger-details-page .cyan-buttons {
       text-align: center;
       display: block;
       margin: 10px 0;
   }
   
   .single-passenger:first-of-type .first-row { display:none; }
   .single-passenger .error {
       color:var(--red);
   }
   .passenger-grid {
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-column-gap: 50px;
       grid-row-gap: 50px;
       justify-items: stretch;
       align-items: baseline;
       margin: 25px auto;
       border-bottom: 1px solid var(--grey);
       padding: 0 0 30px 0;
   }
   
   .thirty-seventy {
       width: 100%;
       display: grid;
       /*grid-template-columns: 1fr 3fr;*/
       grid-template-columns: 1fr;
       grid-column-gap: 20px;
       grid-row-gap: 20px;
       justify-items: stretch;
       align-items: inital;
       margin: 25px auto;
   }
   
   .thirty-grid {
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-column-gap: 20px;
       grid-row-gap: 20px;
       justify-items: stretch;
       align-items: end;
       /*margin: -25px auto 20px auto;*/
       margin: -8px auto 20px auto;
   }
   
   .passenger-grid .nice-select {
       color: var(--black);
       background: var(--white);
       height: 50px;
       border: 1px solid var(--grey);
       padding: 15px;
       font: 16px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       border-radius: 12px;
   }
   
   .ts-col.travel-partners {  }
   
   .form-input,
   .input-row select,
   .input-row input,
   .input-row textarea {
       width: 100%;
       font: 16px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       border: 1px solid var(--grey);
       color: var(--black);
       background: var(--white);
       padding: 10px;
       height: 50px;
       margin: 0 0 20px 0;
       border-radius: 12px;
   }
   
   .input-row textarea { width:100%;height:300px; }
   .input-row.error input,
   .input.error input,
   .input-row.error select,
   .input.error select,
   .input-row.error textarea,
   .input.error textarea { border-color:#f00; }
   .input-row select {
       margin-right: 20px;
   }
   .booking-condition .checkbox.error { border-left:4px solid #f00;padding-left:10px; }
   #booking-process > .inner {
       display: flex;
   }
   
   #booking-process #booking-side {
       width: 370px;
   }
   #passengers-form .buttons, #booking-process .buttons {
       display:grid;
       align-items:center;
       grid-template-columns: 1fr 1fr;
       grid-column-gap: 20px;
   }
   #passengers-form .buttons a,
   #passengers-form .buttons button,
   #booking-process .buttons a,
   #booking-process .buttons button {
       border:0;
   }
   .nice-select:focus,
   .form-input:focus,
   textarea:focus,
   input.text:focus,
   input[type="text"]:focus,
   input[type="button"]:focus,
   input[type="submit"]:focus,
   .input-checkbox:focus
   {
       outline: 0!important;
       border: 1px solid var(--pink);
   }
   
   .passenger-grid .nice-select::after {
       content: '\f078';
       font-family: 'Font Awesome 5 Free';
       font-style: normal;
       font-weight: 900;
       color: var(--lightgrey);
       display: block;
       pointer-events: none;
       position: absolute;
       right: 20px;
       top: 14px;
       transition: all 0.15s ease-in-out;
       width: 5px;
       font-size: 12px;
   }
   
   .passenger-grid label {
       display: block;
       font-size: 14px;
       font-weight: 600;
       margin: 0 0 5px 0;
   }
   
   .passenger-summary {
       background: var(--lightgrey);
   }
   
   .ps-header {
       background: var(--blue);
       color: var(--white);
       padding: 10px;
       text-align: center;
   }
   
   .ps-inner {
       padding: 30px;
   }
   
   .ps-inner p {
       margin: 0 0 10px 0;
   }
   
   .ps-price {
       color: var(--burgundy);
       font-size: 30px;
       font-weight: 600;
   }
   
   .checkGroup .red {
       font-size: 15px;
   }
   
   .passenger-info .checkGroup {
       border: 0;
   }
   
   .radio-container {
       display: inline-block;
       position: relative;
       padding-left: 25px;
       margin: 0 10px 12px 20px;
       cursor: pointer;
       font-size: 16px;
   }
   
   .radio-container input {
       position: absolute;
       opacity: 0;
       cursor: pointer;
   }
   
   .radio-checkmark {
       position: absolute;
       top: 6px;
       left: 0;
       height: 15px;
       width: 15px;
       background-color: var(--black);
       border-radius: 50%;
       border: 2px solid var(--cyan);
   }
   
   
   .radio-container:hover input ~ .radio-checkmark {
       background-color: var(--black);
   
   }
   
   .radio-container input:checked ~ .radio-checkmark {
       background-color: var(--cyan);
   }
   
   
   .radio-checkmark:after {
       content: "";
       position: absolute;
       display: none;
   }
   
   .radio-container input:checked ~ .radio-checkmark:after {
       display: block;
   }
   
   .passenger-buttons {
       border-top: 1px solid var(--grey);
       padding: 30px 0 0 0;
       margin: 30px 0 0 0;
   }
   
   .passenger-buttons .cyan-buttons {
       display: inline-block;
       margin: 0 10px 10px 0;
   }
   
   .nice-select .list {
       font-size: 14px;
       width: 100%;
       background-color:#fff;
   }
   .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
       background-color: #fff;
       color: #000;
   }
   .nice-select .option:hover {
       background-color: #000!important;
       color: #fff!important;
   }
   .nice-select .option.selected {
       background-color: #000;
       color: #fff;
   }
   
   .nice-select .option {
       color: black;
   }
   
   
   
   .billing-check {
       background: var(--black);
       border: 0;
   }
   
   .checkboxes .billing-check label {
       background: var(--black);
       border: 0;
   
   }
   
   
   .billing-check {
       position: relative;
       border: 0;
       width: 48%;
       margin: 0 2% 2% 0;
       float: left;
       border: 1px solid var(--grey);
   }
   
   
   .billing-check :checked + label {
       border: 2px solid var(--cyan) !important;
       background: var(--black)!important;
   }
   
   .billing-check label {
       padding: 30px;
       height: 90px;
       display: block;
       border: 0!important;
   
       position: relative;
   }
   
   .billing-check label .scheck {
       display: block;
       font-size: 0px;
       color: var(--white);
       position: absolute;
       border: 2px solid var(--cyan);
       padding: 7px;
       height: 26px;
       width: 26px;
       border-radius: 50% !important;
       left: 20px!important;
       top: 32px;
   }
   
   .billing-check :checked + label .scheck i {
       display: block;
       text-align: center;
       color: var(--black)!important;
   }
   
   
   .billing-check :checked + label .scheck {
       display: block;
       font-size: 12px;
       color: var(--black) !important;
       position: absolute;
       background: var(--cyan);
       padding: 7px;
       height: 26px;
       width: 26px;
       border-radius: 50% !important;
       left: 20px !important;
       top: 30px;
       border: 0;
   }
   
   .billing-check :checked+label p {
       display: none;
   }
   
   .check-text {
       position: absolute;
       top: 33px;
       left: 65px;
   }
   
   .billing-orange {
       color: var(--pink) !important;
       font-weight: 900!important;
   }
   
   .check-text p {
       margin: 0;
   }
   
   .two-lines {
       top: 15px;
   }
   
   #cb1wbfw,
   #cb1wbfw2 {
       left: -99999px;
       position: absolute;
   }
   
   .paid-grid {
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-column-gap: 30px;
       grid-row-gap: 30px;
       justify-items: stretch;
       margin: 20px auto -21px auto;
       padding: 30px 0;
       border-top: 1px solid var(--grey);
       border-bottom: 1px solid var(--grey);
       font-size: 18px;
   }
   
   .paid-spacer {
       height: 50px;
   }
   
   .paid-col p {
       margin: 0;
   }
   
   .paid-col h5 {
       font: 26px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       font-weight: 600;
   }
   
   .no-border {
       border: 0;
   }
   
   
   /*
   ==========================================================================
   FOOTER
   ==========================================================================
   */
   
   footer {
       padding:50px 0;
       font-size: 14px;
   }
   
   .footer-grid {
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       grid-column-gap: 30px;
       grid-row-gap: 30px;
       justify-items: stretch;
       align-items: inital;
   }
   
   footer h5 {
       font: 16px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       font-weight: 600;
       margin: 0 0 10px 0;
       text-transform: uppercase;
       color: var(--text);
   }
   
   footer a {
       color: var(--text);
       text-decoration: none;
   }
   
   footer a:hover {
       color: var(--pink);
   }
   
   .colophon {
       margin: 50px auto;
       text-align: center;
       padding: 50px 0 0 0;
       border-top: 2px solid var(--offblack);
   }
   
   .colophon .inner {
       max-width: 970px;
   }
   img.footer-logo {
       max-width: 150px;
       margin: auto;
       text-align: center;
   }
   
   
   /*
   ==========================================================================
   ALERT
   ==========================================================================
   */
   
   .alert-block {
       position: relative;
       background: var(--purple);
       padding: 30px 0;
       text-align: center;
   
   }
   .alert-block .inner {
       display: flex;
       justify-content: center;
   }
   
   .alert-block p {
       margin: 0;
       color: var(--white);
       line-height: 20px;
   }
   
   .alert-block a {
       color: var(--white);
       font-weight: 700;
   }
   
   .alert-block a:hover {
       color: var(--cyan);
   }
   
   .close-alert {
       position: absolute;
       right: 10px;
       top: -3px;
       color: var(--white);
       cursor: pointer;
   }
   
   /*
   ==========================================================================
   NAV
   ==========================================================================
   */
   
   nav {
       float: left;
       margin: 30px 0 0 20px;
   }
   
   nav li {
       display: inline-block;
       margin: 0 0 0 30px;
   }
   
   
   .nav {
       list-style: none;
   }
   
   .nav ul {
       list-style: none;
       width: 9em;
       min-width: 200px;
       margin:0;
       padding: 45px 0 0 0;
       text-align: left;
       font-weight: 700;
   }
   
   .sticky .nav ul {
       padding: 27px 0 0 0;
   }
   
   .sub-menu li {
       margin: 0;
       padding: 0px;
       left:-20px;
   }
   
   
   .sub-menu a {
       transition: all 0.3s ease-in;
   }
   
   
   .sub-menu a:hover {
       transition: all 0.3s ease-in-out;
   }
   
   .nav li {
       position: relative;
       display: block;
   }
   
   .nav > li {
       display:inline-block;
   }
   
   
   .nav > li > .parent {
       background-image: url("../images/arrow.svg");
       background-size: 10px;
       background-repeat: no-repeat;
       background-position: center right;
       padding: 0 20px 0 0;
       margin: 0 -5px 0 0;
   }
   
   .nav > li > a {
       display: block;
       font-weight: 500;
       color: var(--cyan);
       text-transform: uppercase;
   }
   
   .nav a {
       position: relative;
       transition: all 0.3s ease-in-out;
   }
   
   .nav li:after {
       content: "";
       position: absolute;
       bottom: -5px;
       left: 0;
       margin: 0 auto;
       right: 0;
       width: 20px;
       height: 0;
       opacity: 0.3;
       background: var(--pink);
       transition: all 0.3s ease-in-out;
   }
   
   .nav li:hover:after {
       content: "";
       position: absolute;
       bottom: -7px;
       left: 0;
       margin: 0 auto;
       right: 0;
       width: 100%;
       height: 3px;
       opacity: 1;
       background: var(--pink);
       transition: all 0.3s ease-in-out;
   }
   
   
   .nav a:hover {
       color: var(--pink);
       transition: all 0.3s ease-in-out;
   }
   
   
   .nav li ul {
       position: absolute;
       top:100px;
       left:0;
       width:100%;
       opacity:0;
       visibility:hidden;
       z-index:999;
       transition: all 0.3s ease-in-out;
   }
   
   .nav > li.hover > ul {
       opacity:1;
       visibility:visible;
       top:100%;
       left:0;
   }
   
   .nav li li.hover ul {
       left: 100%;
       top: 0;
   }
   
   .nav li li a {
       display: block;
       background: var(--black);
       position: relative;
       z-index: 100;
       border-top: 0;
       color: var(--cyan);
       padding: 10px 20px;
       margin: 0;
       text-transform: uppercase;
       font-size: 16px;
       font-weight: 500;
   }
   
   .nav li li li a {
       background: var(--cyan);
       z-index:200;
       border-top: 0;
       color: var(--white);
   }
   
   .nav li li a:hover, .nav li li li a:hover {
       background: var(--pink);
       color: var(--white);
   }
   
   .nav li li:hover:after,
   .nav li li:after {
       content: "";
       display: none;
   }
   
   .nav .sub-menu .menu-item-has-children ul {
       opacity:0;
       visibility: hidden;
   }
   
   .nav .sub-menu .menu-item-has-children:hover ul {
       opacity:1;
       visibility: unset;
   }
   
   .nav .sub-menu {
       list-style: none;
       width: 9em;
       min-width: 200px;
       margin: 9px 0 0 0;
       opacity:0;
       z-index: 9999;
       visibility: hidden;
       padding: 33px 0 0 0;
       text-align: left;
   }
   
   .nav .sub-menu ul {
       list-style: none;
       width: 9em;
       min-width: 200px;
       margin: 0;
       opacity:0;
       z-index: 9999;
       visibility: hidden;
       padding: 0px 0 0 0;
       text-align: left;
   }
   
   .nav li li li a:hover {
       background: var(--cyan);
       color: var(--white);
   }
   
   
   /*
   ==========================================================================
   NAV WRAPPER
   ==========================================================================
   */
   
   .nav-button {
       display: none;
   }
   
   .nav-wrapper {
       background: var(--black);
       height: 100%;
       padding: 100px 50px 30px 50px;
       position: fixed;
       right: 0;
       top: 0;
       font-weight: 500;
       -webkit-transform: translateX(100%);
       transform: translateX(100%);
       transition: visibility 0.5s, -webkit-transform 0.5s;
       transition: transform 0.5s, visibility 0.5s;
       transition: transform 0.5s, visibility 0.5s, -webkit-transform 0.5s;
       visibility: hidden;
       width: 85%;
       max-width: 600px;
       z-index: 999999999999999;
   }
   
   .nav-wrapper li {
       display: block;
       position: relative;
   }
   
   .nav-wrapper .parent::after {
       content: "\f078";
       font-family: "Font Awesome 5 Free";
       color: var(--cyan);
       font-size: 14px;
       padding: 0 5px;
       margin: 0;
       cursor: pointer;
       position: absolute;
       right: 10px;
       top: 7px;
       font-weight: 900;
   }
   
   .side-item {
       position: relative;
       overflow-y: auto;
       height: 100%;
   }
   
   .nav-wrapper a {
       font: 16px 'Roboto Condensed', Helvetica , Arial, sans-serif;
       color: var(--cyan);
       text-transform: uppercase;
       display: block;
       padding: 10px;
       margin: 0;
       background: none;
       transition: all 0.3s ease-in;
   }
   
   .nav-wrapper a:hover {
       color: var(--pink);
       transition: all 0.3s ease-in-out;
   }
   
   .parent ul a {
       background: none;
       color: var(--white);
       margin: 0;
   }
   
   .side-item {
       margin: 0 0 50px 0;
   }
   
   .side-item i {
       padding: 0 5px 0 0;
   }
   
   .nav-wrapper .nav-buttons {
       position: absolute;
       top: 18px;
       right: 10px;
       transition: all 0.3s ease-in;
   }
   
   .nav-wrapper .nav-buttons:hover {
       opacity: 0.6;
       transition: all 0.3s ease-in-out;
   }
   
   .nav-visible .nav-wrapper {
       -webkit-transform: translateX(0);
       transform: translateX(0);
       visibility: visible;
   }
   
   .nav-wrapper .nav {
       position: relative;
       -webkit-transform: rotateY(90deg);
       transform: rotateY(90deg);
       -webkit-transform-origin: left center;
       transform-origin: left center;
       transition: -webkit-transform 0.6s;
       transition: transform 0.6s;
       transition: transform 0.6s, -webkit-transform 0.6s;
       padding: 20% 25% 0 25%;
   }
   
   .nav-visible .nav {
       -webkit-transform: rotateY(0deg);
       transform: rotateY(0deg);
   }
   
   .nav-wrapper .parent ul {
       display: none;
   }
   
   .nav-wrapper .minus ul {
       display: block;
   }
   
   .nav-wrapper .nav a:focus, .nav-wrapper .nav a:hover {
       text-decoration: none;
       transition: all 0.3s ease-in-out;
       color: var(--text);
   }
   
   .button-lines {
       font: 16px Helvetica, Arial, sans-serif;
       background: transparent;
       border: none;
       cursor: pointer;
       display: inline-block;
       padding: 1rem 0.5rem;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
   }
   
   .menutag {
       margin: 5px 0 0 15px;
       vertical-align: middle;
       display: inline-block;
       font-size: 15px;
       text-transform: none;
       color: var(--white);
   }
   
   .nav-visible .lines, .nav-visible .lines:after, .nav-visible .lines:before {
       background: var(--white);
   }
   
   .nav-visible .menutag {
       color: var(--white);
       margin: 0;
       text-transform: uppercase;
       font-size: 15px;
       font-weight: bold;
   }
   
   .nav-visible .lines::after, .nav-visible .lines::before {
       height: 0.2rem;
       width: 2rem;
   }
   
   .nav-visible ul ul {
       display: block;
       margin: 0 0 0 30px;
   }
   
   .nav-wrapper li {
       display: block;
       position: relative;
   
   }
   
   .nav-wrapper li li {
       display: block;
       position: relative;
       border-bottom: 0;
   }
   
   .nav-wrapper .parent {
       padding:  0;
   }
   
   .close {
       color: var(--white);
       font-size: 22px;
   }
   
   
   /*
   ==========================================================================
   MEDIA QUERIES
   ==========================================================================
   */
   
   
   
   @media screen and (max-width: 1350px) {
   
       .header-contact {
           display: none;
       }
   
       nav {
           margin: 30px 0 0 10px;
       }
   
       .card-info {
           display: none;
       }
   
   
   
   }
   
   @media screen and (max-width: 1200px) {
   
       .billing-check {
           position: relative;
           border: 0;
           width: 100%;
           margin: 0 0 0 0;
       }
   
   }
   
   
   @media screen and (max-width: 1140px) {
   
   
       .header-contact {
           display: none;
       }
   
       nav {
           margin: 30px 0 0 10px;
       }
   
       .pb-col {
           display: block;
           margin: 10px 0 0 0;
           text-align: center;
       }
   
   }
   
   
   
   @media screen and (max-width: 820px) {
   
       .info-grid {
           width: 100%;
           display: grid;
           grid-template-columns: 1fr;
           grid-column-gap: 30px;
           grid-row-gap: 10px;
       }
   
       .single-offer-grid-alt,
       .single-offer-grid {
           width: 100%;
           display: grid;
           grid-template-columns: 1fr;
           grid-column-gap: 30px;
           grid-row-gap: 30px;
       }
   
       .footer-grid {
           width: 100%;
           display: grid;
           grid-template-columns: 1fr 1fr;
           grid-column-gap: 30px;
           grid-row-gap: 30px;
       }
   
       .newsletter-grid {
           width: 100%;
           text-align: center;
           display: grid;
           grid-template-columns: 1fr;
           grid-column-gap: 20px;
           grid-row-gap: 20px;
       }
   
       .three-grid-alt,
       .three-grid {
           grid-column-gap: 10px;
           grid-row-gap: 0px;
       }
   
       .offers-block .three-grid {
           margin: 0px 30px 0px 30px;
       }
   
       .card-buttons {
           margin: 10px 0;
       }
   
       .cyan-buttons {
           padding: 5px 20px;
           text-align: center;
           height: 50px;
           line-height: 40px;
           margin: 10px;
       }
   
       .three-col h4,
       .three-col h5 {
           font: 18px 'Roboto Condensed', Helvetica, Arial, sans-serif;
       }
   
       .card-back {
           padding: 10px;
       }
   
       .hero-slider .slick-prev,
       .hero-slider .slick-next {
           display: none!important;
       }
   
       .hero,
       .hero-slide {
           height: 400px;
       }
   
       .inner-hero {
           height: 300px;
       }
   
       .hero-inner {
           top: 75px;
           left: 0;
           right: 0;
           padding: 0 20px;
       }
   
       .inner-hero .hero-inner {
           top: 130px;
       }
   
       h1 {
           font: 30px 'Ethnocentric Rg', Helvetica , Arial, sans-serif;
       }
   
       .hero-inner h1 {
           font-size: 30px;
       }
   
       .nav-button {
           display: block;
           float: right;
           margin: 30px 0 0 0;
       }
   
       .head-user {
           margin: 0;
           border-left: 0;
           padding: 0;
       }
   
       .home-news-grid {
           width: 100%;
           display: grid;
           grid-template-columns: 1fr;
           grid-column-gap: 20px;
           grid-row-gap: 20px;
       }
   
       .col-img {
           margin: 30px 0 0 0;
           height: 200px;
           order: -1;
       }
   
   
   }
   
   
   @media screen and (max-width: 600px) {
   
       .passenger-grid {
           width: 100%;
           display: grid;
           grid-template-columns: 1fr;
           grid-column-gap: 0px;
           grid-row-gap: 0px;
       }
   
       .three-grid-alt,
       .three-grid {
           width: 100%;
           display: grid;
           grid-template-columns: 1fr;
       }
   
       .card-info {
           display: none;
       }
   
       .card-back {
           padding: 60px 30px 30px 30px;
       }
   
       .logo {
           width: 120px;
           height: auto;
           float: left;
           margin: 5px 0 0 -25px;
           transition: all 0.3s ease-in;
       }
   
       .sticky .logo {
           width: 120px;
           margin: 5px 0 0 -25px;
       }
   
       .paid-grid,
       .three-grid,
       .three-grid-alt,
       .single-offer-grid-alt,
       .single-offer-grid {
           display: block;
       }
   
   
       h1 {
           font: 24px 'Ethnocentric Rg', Helvetica , Arial, sans-serif;
       }
   
       h2 {
           font: 21px 'Ethnocentric Rg', Helvetica , Arial, sans-serif;
       }
   
       h3 {
           font: 18px 'Ethnocentric Rg', Helvetica , Arial, sans-serif;
       }
   
       .three-grid {
           margin: 30px 0;
       }
   
       .share-social span {
           display: none;
       }
   
       .gg-col {
           margin: .5vw;
           width: 48%;
       }
   
   }
   
   @media screen and (max-width: 400px) {
   
   
       .offers-block .three-grid,
       .three-grid-alt,
       .three-grid {
           margin: 5%;
           width: 90%;
       }
   
       .cyan-buttons {
           line-height: 40px;
       }
   
   
   }
   
   @media screen and (max-width: 360px) {
   
       .head-user {
           display: none;
       }
   
       .hero-inner h1 {
           font-size: 24px;
       }
   
   }
   
   
   @media screen and (max-width: 320px) {
   
       .container {
           min-width:240px;
           width:100%;
       }
   
   }
   .onlycheck {
       top: 20px;
       display: block;
       width: 40%;
       position: relative;
   }