/*
 Variables color
 */
 @import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Luckiest+Guy&display=swap");
 h1, h2, h3, h4, h5, h6 {
   font-family: "Luckiest Guy", cursive;
   font-weight: 900;
 }

 html, body {
   font-family: "Baloo 2", Arial, Helvetica, sans-serif;
   font-size: 16px;
 }

 body {
   background: #FFFFFF;
 }

 #triggerNav {
   z-index: 999;
 }

 #nav {
   z-index: 999;
   background: white;
   position: fixed;
   width: 100%;
 }
 #nav div .container nav {
   display: flex;
   justify-content: space-between;
   box-shadow: none;
   background: white;
 }
 #nav div .container nav .sidenav-trigger {
   color: #008ed4;
 }
 #nav div .container nav ul li a {
   font-family: "Baloo 2", Arial, Helvetica, sans-serif;
   color: #008ED4;
   font-size: 1.125rem;
   font-weight: 800;
   text-transform: uppercase;
 }

 #wrapHome {
   background: url("../images/verticalBG.jpg");
   background-size: 100% auto;
 }

 #bannerHome.bannerSection {
   height: 100vh;
   padding-top: 110px;
 }
 @media all and (max-width: 600px) {
   #bannerHome.bannerSection {
     height: 100vh;
     padding-top: 56px;
   }
 }

 .bannerSection {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 #modalNewsletter .modal-content {
   width: 600px;
   height: 600px;
 }

 #modalGame {
   min-height: initial;
   min-width: initial;
   max-height: initial;
   max-width: initial;
   top: 50% !important;
   transform: translateY(-50%) !important;
 }
 @media all and (max-width: 600px) {
   #modalGame {
     width: 500px;
     height: 500px;
   }
 }
 @media all and (max-width: 500px) {
   #modalGame {
     width: 400px;
     height: 400px;
   }
 }
 @media all and (max-width: 400px) {
   #modalGame {
     width: 300px;
     height: 300px;
   }
 }
 #modalGame .modal-content {
   width: 100%;
   height: 100%;
 }
 @media all and (max-width: 600px) {
   #modalGame .modal-content {
     padding: 12px;
   }
 }
 #modalGame .modal-content #wrapModalGameIframe {
   width: 100%;
   height: 100%;
 }
 #modalGame .modal-content #wrapModalGameIframe .customIframe {
   width: 100%;
   height: 100%;
 }

 .sectionCenter {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
 }
 @media all and (max-width: 600px) {
   .sectionCenter {
     min-height: initial;
     height: auto;
     padding: 50px 0 0;
   }
 }
 .sectionCenter > div {
   width: 100%;
 }

 /****
     .saturate { filter: saturate(3); }
     .grayscale { filter: grayscale(100%); }
     .contrast { filter: contrast(160%); }
     .brightness { filter: brightness(0.25); }
     .blur { filter: blur(3px); }
     .invert { filter: invert(100%); }
     .sepia { filter: sepia(100%); }
     .huerotate { filter: hue-rotate(180deg); }
     .rss.opacity { filter: opacity(50%); }
  */
 .modalProduct {
   background: url("../images/photo.png");
   background-size: 100% auto;
   border: 10px solid #FFF;
   border-radius: 45px;
 }

 .wrapImageModalProduct {
   text-align: center;
 }
 .wrapImageModalProduct img {
   max-width: 330px;
   margin: auto;
   width: 100%;
 }
 @media all and (max-width: 600px) {
   .wrapImageModalProduct img {
     max-width: 150px;
   }
 }

 @media all and (max-width: 600px) {
   .modalProduct {
     background-size: auto 100%;
     background-position: center center;
   }
 }
 @media all and (max-width: 600px) {
   .modalProduct .modal-content {
     padding: 10px;
   }
 }

 @media all and (max-width: 600px) {
   .wrapDownloadsModalProduct {
     text-align: center;
   }
 }

 .titleDownloads {
   text-align: left;
   font: normal normal 800 24px/54px "Baloo 2", Arial, Helvetica, sans-serif;
   letter-spacing: 0;
   color: #FFFFFF;
   display: block;
   height: 54px;
   background: #F1668C 0% 0% no-repeat padding-box;
   border-radius: 26px;
   margin: 0 0 20px;
 }
 @media all and (max-width: 600px) {
   .titleDownloads {
     font-size: 14px;
     line-height: 24px;
     height: 24px;
     display: inline-block;
     padding: 0 20px;
     text-align: center;
   }
 }
 .titleDownloads span {
   display: inline-block;
   height: 54px;
   width: 54px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   border: 5px solid #FFFFFF;
   line-height: 50px;
   text-align: center;
   margin-right: 25px;
 }
 @media all and (max-width: 600px) {
   .titleDownloads span {
     /*line-height: 20px;
     margin-right: 15px;
     width: 24px;
     height: 24px;
     border-width: 2px;*/
     display: none;
   }
 }

 .singleDownload {
   background: #F1668C;
   color: #ffffff;
   padding: 10px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   margin-bottom: 10px;
 }
 .singleDownload img {
   display: block;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
 }
 .singleDownload p {
   text-align: center;
 }
 @media all and (max-width: 1024px) {
   .singleDownload p {
     font-size: 12px;
     line-height: 1;
   }
 }
 .singleDownload p a {
   color: #ffffff !important;
 }

 .btnBuy {
   text-align: center;
   font: normal normal 800 16px/1 "Baloo 2", Arial, Helvetica, sans-serif;
   letter-spacing: 0;
   color: #FFFFFF;
   background: #F1668C 0% 0% no-repeat padding-box;
   border-radius: 26px;
   margin: 10px 0;
   padding: 5px 30px;
 }
 @media all and (max-width: 600px) {
   .btnBuy {
     font-size: 14px;
     display: inline-block;
     padding: 5px 20px;
   }
 }

 nav ul a:hover {
   background-color: rgba(0, 0, 0, 0);
 }

 .video-container {
   border: 6px solid white;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
 }

 #nav-menu li a:hover, #nav-social li a:hover, #nav-logo li a:hover {
   color: #DDD703;
   text-decoration: underline;
 }

 .dreamImgSidenav {
   max-width: 200px;
   margin: 15px 0 0;
 }

 .sidenav ul li a {
   color: #008ED4;
 }

 #socialmedialinksmobile {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 32px;
 }
 #socialmedialinksmobile a {
   display: block;
   height: auto;
   padding: 0;
   text-align: center;
 }
 #socialmedialinksmobile a i {
   margin: auto;
   font-size: 20px;
   color: #008ED4;
 }

 #nav-logo li a img {
   display: block;
   height: auto;
   max-width: 150px;
   margin: auto;
 }

 #wrapWinners {
   background: #FFFFFF;
   padding: 50px 0 30px;
 }
 #wrapWinners p {
   color: #008ED4;
   font-size: 32px;
   font-weight: 800;
   margin: 0;
 }
 @media all and (max-width: 600px) {
   #wrapWinners p {
     font-size: 13px;
     margin-bottom: 15px;
   }
 }

 section.materBannerIframe {
   min-height: inherit;
   height: 100vh;
 }

 section.materBannerIframe iframe {
   height: 100% !important;
 }

 #nav-mobile {
   display: inline-flex;
   margin: auto;
   justify-content: center;
   align-items: center;
 }

 #nav-mobile li {
   float: inherit;
 }

 .wrapImgVideo a img {
   display: block;
 }

 #videoSlider {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   flex-direction: column;
 }

 .swiper-pagination-bullet {
   width: 24px;
   height: 24px;
   border: 4px solid #FFFFFF;
   background: none;
   opacity: 1;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   transition: width 250ms ease-in-out;
 }

 .swiper-pagination-bullet-active {
   width: 90px;
   background: #DDD703;
   border-color: #DDD703;
 }

 #brandPortfolio h2 {
   position: relative;
   font-size: 196px;
   text-transform: uppercase;
   color: #FFFFFF;
   opacity: 0.2;
   display: block;
   text-align: right;
 }

 h2.titleVideosHome {
   position: relative;
   font-size: 196px;
   text-transform: uppercase;
   color: #FFFFFF;
   opacity: 0.2;
   display: block;
   text-align: right;
   align-self: end;
 }

 #brandPortfolioInside h2 {
   position: relative;
   font-size: 196px;
   text-transform: uppercase;
   color: #FFFFFF;
   opacity: 0.2;
   display: block;
   text-align: right;
 }

 #bgGradient {
   background: #7FCAD0;
   background: -moz-linear-gradient(top, #7FCAD0 0%, #8A4292 100%);
   background: -webkit-linear-gradient(top, #7FCAD0 0%, #8A4292 100%);
   background: linear-gradient(to bottom, #7FCAD0 0%, #8A4292 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7fcad0", endColorstr="#8a4292", GradientType=0);
 }

 .singleBrandSlide {
   position: relative;
   height: 600px;
   width: 100%;
   max-width: 480px;
   text-align: center;
   margin: 0 auto 50px;
 }

 .wrapImageBrand {
   text-align: center;
 }

 .singleBrandSlide > div {
   width: 100%;
   height: 100%;
   position: relative;
 }

 .singleBrandSlide a {
   position: absolute;
   display: block;
   z-index: 9;
   text-align: center;
   width: 100%;
   height: 100%;
 }

 p.nameBrand {
   text-align: right;
   font: normal normal 900 18px/1.2 "Luckiest Guy", sans-serif;
   color: #FFFFFF;
   margin: auto;
   width: 90%;
   position: absolute;
   left: 5%;
   bottom: -28px;
   text-transform: uppercase;
 }

 .singleBrandSlide a:before {
   content: "";
   width: 90%;
   height: 100%;
   background: #FFFFFF;
   z-index: -1;
   display: block;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   position: absolute;
   left: 5%;
 }

 .introSlider {
   position: relative;
   height: 600px;
   width: 100%;
   max-width: 480px;
   margin: auto;
   display: flex;
   flex-direction: column;
 }

 .introSlider h3 {
   color: #FFFFFF;
 }

 .introSlider p {
   color: #FFFFFF;
   font-size: 18px;
   font-family: "Montserrat Alternates", sans-serif;
 }

 .singleBrandSlide img.brand {
   position: absolute;
   top: 10px;
   right: 7%;
 }

 .singleBrandSlide img.fronImage {
   position: absolute;
   top: 20px;
   left: 0;
 }

 #newsHome {
   position: relative;
   overflow: hidden;
 }

 #newsHome h2 {
   text-transform: uppercase;
 }

 #newsHome h2 i {
   font-size: 0.6em;
 }

 #newsHome {
   background: #FFFFFF;
   color: #363636;
 }

 .news_readmore {
   font: normal normal 900 18px/1.2 "Luckiest Guy", sans-serif;
   color: #DDD703;
   text-decoration: underline;
   text-transform: uppercase;
 }

 #awwardsHome h2 {
   text-transform: uppercase;
 }

 #awwardsHome h2 i {
   font-size: 0.6em;
 }

 #awwardsHome {
   background: #FFFFFF;
   color: #363636;
   min-height: auto;
   padding: 200px 0;
 }

 .news_readmore {
   font: normal normal 900 18px/1.2 "Luckiest Guy", sans-serif;
   color: #DDD703;
   text-decoration: underline;
   text-transform: uppercase;
 }

 #about {
   width: 100%;
   height: 100vh;
   background: #49CAD2 url("../images/bg_about.jpg") center right no-repeat fixed;
   display: flex;
   align-items: center;
 }

 #about .col {
   color: #FFFFFF;
 }

 #about .col p {
   font-size: 20px;
 }

 #about .col p a {
   color: #FFFFFF;
   text-decoration: underline;
 }

 #about .col p a:hover {
   color: #DDD703;
 }

 #about h2 {
   color: #FFFFFF;
 }

 #ribbonNewsletter {
   background: #EF6891;
   padding: 30px 0;
   color: #FFFFFF;
   text-align: center;
   font-size: 20px;
   font-family: "Montserrat Alternates", sans-serif;
 }

 #ribbonNewsletter .row {
   margin-bottom: 0;
 }

 #ribbonNewsletter a {
   font: normal normal 900 18px/1.2 "Luckiest Guy", sans-serif;
   color: #DDD703;
   text-decoration: underline;
   text-transform: uppercase;
 }

 /**** newsletter ****/
 #formNewsletter {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: #8A4292 url("../images/bg_newsletter.png") -30px center no-repeat;
   -webkit-background-size: auto 70%;
   background-size: auto 70%;
   z-index: 9999;
   display: none;
 }

 #formNewsletter h2 {
   color: #FFFFFF;
   font: normal normal 900 48px/1.2 "Luckiest Guy", sans-serif;
   text-transform: uppercase;
 }

 #formNewsletter > div {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }

 #formNewsletter > div > div {
   display: flex;
   width: 100%;
   max-width: 900px;
 }

 #formNewsletter > div > div form {
   width: 100%;
 }

 #formNewsletter > a {
   position: absolute;
   top: 30px;
 }

 #formNewsletter .input-field input, #formNewsletter .input-field textarea {
   border: 1px solid #FFFFFF;
   padding-top: 10px;
   color: #FFFFFF;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   text-indent: 10px;
 }

 #formNewsletter label {
   text-transform: uppercase;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   color: #FFFFFF;
   left: 20px;
   top: 5px;
 }

 #formNewsletter label.active {
   color: #DDD703;
   -webkit-transform: translateY(-28px) scale(0.8);
   transform: translateY(-28px) scale(0.8);
 }

 #logoNews {
   left: 30px;
 }

 .closeFormNews {
   right: 30px;
   width: 60px;
   height: 60px;
   line-height: 60px;
   color: #8A4292;
   font-size: 30px;
   background: #FFFFFF;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   text-align: center;
 }

 footer {
   background: #008ED4;
   color: #FFFFFF;
   padding: 50px 0;
 }

 footer .row {
   margin-bottom: 0;
 }

 .txtFooter {
   font: normal normal 900 20px/1.2 "Baloo 2", Arial, Helvetica, sans-serif;
   color: #FFFFFF;
   text-transform: uppercase;
 }

 footer ul li {
   font-size: 16px;
   font-family: "Montserrat Alternates", sans-serif;
   color: #FFFFFF;
 }

 footer ul li a {
   font: normal normal 900 20px/1.2 "Baloo 2", Arial, Helvetica, sans-serif;
   color: #FFFFFF;
 }

 footer ul li a:hover {
   text-decoration: underline;
 }

 #sliderBrand, #sliderBrandInside, #sliderSingleProduct {
   margin-bottom: 60px;
   padding-bottom: 60px;
 }

 .swiper-button-brand-prev, .swiper-button-brand-next {
   width: 50px;
   height: 50px;
   display: block;
   position: absolute;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   border: 4px solid white;
   bottom: 0;
   text-align: center;
   cursor: pointer;
 }

 .swiper-button-brand-prev i, .swiper-button-brand-next i {
   font-size: 32px;
   line-height: 40px;
   color: #FFFFFF;
 }

 #sliderSingleProduct .swiper-button-brand-prev, #sliderSingleProduct .swiper-button-brand-next {
   border: 4px solid #464646;
 }

 #sliderSingleProduct .swiper-button-brand-prev i, #sliderSingleProduct .swiper-button-brand-next i {
   color: #464646;
 }

 .swiper-button-brand-next {
   right: 80px;
 }

 .swiper-button-brand-prev {
   right: 140px;
 }

 .swiper-button-brand-next.swiper-button-disabled, .swiper-button-brand-prev.swiper-button-disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }

 /************ about ut **************/
 #wrapAboutUs {
   background: #7FCAD0;
   background: -moz-linear-gradient(top, #7FCAD0 0%, #3AB4B8 100%);
   background: -webkit-linear-gradient(top, #7FCAD0 0%, #3AB4B8 100%);
   background: linear-gradient(to bottom, #7FCAD0 0%, #3AB4B8 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7fcad0", endColorstr="#3ab4b8", GradientType=0);
 }

 #wrapAboutUs h2 {
   color: #FFFFFF;
   font: normal normal 900 48px/1.2 "Luckiest Guy", sans-serif;
   text-transform: uppercase;
 }

 #wrapAboutUs p {
   color: #FFFFFF;
   font: normal normal 500 32px/1.2 "Luckiest Guy", sans-serif;
 }

 #wrapAboutUs a {
   color: #DDD703;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   text-decoration: underline;
   padding: 10px 20px;
   transition: 250ms all ease-in-out;
   border: 2px solid transparent;
 }

 #wrapAboutUs a:hover {
   text-decoration: none;
   border: 2px solid #DDD703;
 }

 #wrapAboutUs .row {
   margin-bottom: 0;
 }

 #sliderRetailers {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 50px 0;
 }

 #sliderRetailers a {
   opacity: 0.7;
 }

 #sliderRetailers a:hover {
   opacity: 1;
 }

 #wrapSliderRet {
   height: 100vh;
   position: relative;
   display: flex;
   justify-content: center;
   width: 100%;
   align-items: center;
 }

 #wrapPageBrand {
   background: #7FCAD0;
 }

 #wrapBrands {
   background: #7FCAD0;
   background: -moz-linear-gradient(top, #7FCAD0 0%, #8A4292 100%);
   background: -webkit-linear-gradient(top, #7FCAD0 0%, #8A4292 100%);
   background: linear-gradient(to bottom, #7FCAD0 0%, #8A4292 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7fcad0", endColorstr="#8a4292", GradientType=0);
 }

 .singleBrand {
   padding: 100px 0;
 }

 .singleBrand h2 {
   color: #FFFFFF;
   font: normal normal 900 48px/1.2 "Luckiest Guy", sans-serif;
   text-transform: uppercase;
 }

 .singleBrand p {
   color: #FFFFFF;
   font: normal normal 500 32px/1.2 "Luckiest Guy", sans-serif;
 }

 .singleBrand a {
   color: #DDD703;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   text-decoration: underline;
   transition: 250ms all ease-in-out;
   text-transform: uppercase;
 }

 .singleBrand a:hover {
   text-decoration: none;
 }

 #wrapBrands > .singleBrand:nth-child(even) > div {
   flex-direction: row-reverse;
 }

 #wrapFilterChips {
   padding: 50px 0;
   border-top: 2px solid #DDD703;
   border-bottom: 2px solid #DDD703;
   text-align: center;
 }

 #wrapFilterChips .chip {
   padding: 0 25px;
   border: 2px solid #DDD703;
   text-align: center;
   background: none;
   height: 56px;
   -webkit-border-radius: 28px;
   -moz-border-radius: 28px;
   border-radius: 28px;
   font: normal normal 900 24px/56px "Luckiest Guy", sans-serif;
   color: #FFFFFF;
   text-transform: uppercase;
   cursor: pointer;
 }

 #wrapFilterChips .chip.active {
   background: #DDD703;
 }

 .txtFilters {
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   color: #FFFFFF;
   margin: 0 0 20px;
 }

 #wrapVideos {
   background: #7FCAD0;
 }

 #wrapVideos .wrapImgVideo a:hover:after {
   line-height: 60px;
 }

 .titleVideo {
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   color: #FFFFFF !important;
   margin: 0 0 20px;
 }

 .socialMediaShare {
   vertical-align: middle;
 }

 .socialMediaShare i {
   color: #DDD703;
   vertical-align: middle;
   line-height: 24px;
 }

 .socialMediaShare a {
   font: normal normal 900 24px/24px "Luckiest Guy", sans-serif;
   color: #DDD703;
   margin: 0 10px;
 }

 .socialMediaShare a:hover {
   text-decoration: underline;
 }

 #wrapContactenos {
   background: #8A4292;
 }

 #wrapContactenos .row {
   margin-bottom: 0;
 }

 #wrapContactenos h1 {
   text-transform: uppercase;
   font: normal normal 900 48px/1.2 "Luckiest Guy", sans-serif;
   color: #FFFFFF;
 }

 #wrapContactenos section {
   /*background: url("../images/bg_contactanos.png") 120% center no-repeat;*/
 }

 #wrapContactenos .input-field input, #wrapContactenos .input-field textarea {
   border: 1px solid #FFFFFF;
   padding-top: 10px;
   color: #FFFFFF;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   text-indent: 10px;
 }

 #wrapContactenos label {
   text-transform: uppercase;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   color: #FFFFFF;
   left: 20px;
   top: 5px;
 }

 #wrapContactenos label.active {
   color: #DDD703;
   -webkit-transform: translateY(-28px) scale(0.8);
   transform: translateY(-28px) scale(0.8);
 }

 button[type=submit] {
   background: #DDD703;
   color: #FFFFFF;
   font: normal normal 900 24px/56px "Luckiest Guy", sans-serif;
   height: 56px;
   padding: 0 25px;
   -webkit-border-radius: 28px;
   -moz-border-radius: 28px;
   border-radius: 28px;
 }

 button[type=submit]:hover {
   background: #7FCAD0;
 }

 .infoCntact {
   font: normal normal 700 32px/1.2 "Luckiest Guy", sans-serif;
   text-transform: uppercase;
 }

 /*
 @media all and (max-width: 992px) {
     section {
         padding-left: 30px;
         padding-right: 30px;
     }
 }
 @media all and (max-width: 768px) {
     section {
         padding-left: 25px;
         padding-right: 25px;
     }
 }
 @media all and (max-width: 600px) {
     section {
         padding-left: 15px;
         padding-right: 15px;
     }
 }*/
 section#error {
   background: #7FCAD0 url("../images/bg_contactanos.png") 120% center no-repeat;
   color: #FFFFFF;
 }

 section#error h2 {
   font: normal normal 700 48px/1.2 "Luckiest Guy", sans-serif;
 }

 section#error p {
   font: normal normal 700 32px/1.2 "Luckiest Guy", sans-serif;
 }

 #backToTop {
   position: fixed;
   bottom: 30px;
   right: 30px;
   text-align: center;
   z-index: 9999;
   opacity: 0;
 }

 #backToTop a {
   display: block;
   font: normal normal 700 18px/1.2 "Luckiest Guy", sans-serif;
   color: #DDD703;
   margin: auto;
 }

 #backToTop a span {
   margin: auto;
   display: block;
   color: #FFFFFF;
   width: 40px;
   height: 40px;
   background: #DDD703;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   text-align: center;
   line-height: 40px;
 }

 #FrmResultNewsletter {
   color: #FFFFFF;
   font: normal normal 700 18px/1.2 "Luckiest Guy", sans-serif;
 }

 #FrmResult {
   color: #7E7E7E;
   font: normal normal 700 18px/1.2 "Luckiest Guy", sans-serif;
 }

 .swiper-button-next, .swiper-button-prev {
   bottom: 0;
   top: auto;
   color: #DDD703;
   width: 60px;
   height: 60px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   background: #FFFFFF;
 }

 .swiper-button-next:after, .swiper-button-prev:after {
   content: "\f105";
   font-family: "Font Awesome 6 Free";
   color: #DDD703;
   font-weight: 900;
   text-align: center;
   font-size: 30px;
 }

 .swiper-button-prev:after {
   content: "\f104";
 }

 .swiper-button-next:hover, .swiper-button-prev:hover {
   background: #DDD703;
 }

 .swiper-button-next:hover:after, .swiper-button-prev:hover:after {
   color: #FFFFFF;
 }

 /************ Search ***************/
 #formSearch {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: #424C7D url("../images/bg_search.png") -60px center no-repeat;
   -webkit-background-size: auto 50%;
   background-size: auto 50%;
   z-index: 9999;
   display: none;
 }

 #formSearch h2 {
   color: #FFFFFF;
   font: normal normal 900 48px/1.2 "Luckiest Guy", sans-serif;
   text-transform: uppercase;
 }

 #formSearch > div {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }

 #formSearch > div > div {
   display: flex;
   width: 100%;
   max-width: 900px;
 }

 #formSearch > div > div form {
   width: 100%;
 }

 #formSearch > a {
   position: absolute;
   top: 30px;
 }

 #formSearch .input-field input, #formSearch .input-field textarea {
   border: 1px solid #FFFFFF;
   padding-top: 10px;
   color: #FFFFFF;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   text-indent: 10px;
 }

 #formSearch label {
   text-transform: uppercase;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   color: #FFFFFF;
   left: 20px;
   top: 5px;
 }

 #formSearch label.active {
   color: #DDD703;
   -webkit-transform: translateY(-28px) scale(0.8);
   transform: translateY(-28px) scale(0.8);
 }

 #logoSearch {
   left: 30px;
 }

 .closeFormSearch {
   right: 30px;
   width: 60px;
   height: 60px;
   line-height: 60px;
   color: #8A4292;
   font-size: 30px;
   background: #FFFFFF;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   text-align: center;
 }

 .wrapImageLastest, .wrapInfoLastest {
   position: relative;
 }

 #wrapBrand {
   background: #EC6963;
 }

 .wrapperMarquee {
   position: absolute;
   display: flex;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }

 .wrapMarqueeText {
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   text-align: center;
 }

 .nameBrandMarqueeSingle {
   width: auto;
   display: flex;
   color: rgba(0, 0, 0, 0.5);
   text-transform: uppercase;
   margin: 0 10px;
   font: normal normal 900 196px/1.2 "Luckiest Guy", sans-serif;
   flex: none;
 }

 .singleSliderSocialBrand {
   position: relative;
   text-align: center;
 }

 .singleSliderSocialBrand p {
   position: absolute;
   width: 80%;
   left: 10%;
   bottom: 0;
   color: #FFFFFF;
   text-align: left;
 }

 .wrapAllProducts {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
 }

 .wrapAllProducts .singleProduct {
   width: 20%;
   max-width: 325px;
   padding: 0 10px;
   text-align: center;
 }

 .singleProductAllProducts {
   display: block;
   margin: auto;
   overflow: hidden;
   border: 1px solid #DBE2EA;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   margin-bottom: 10px;
 }

 .singleProductAllProducts img {
   display: block;
   margin: auto;
 }

 .wrapAllProducts .singleProduct p {
   color: #7E7E7E;
   font: normal normal 900 18px/1.2 "Luckiest Guy", sans-serif;
   text-align: left;
   margin: 10px 0 20px;
 }

 .wrapAllProducts .singleProduct p a {
   color: #7E7E7E;
   font: normal normal 900 18px/1.2 "Luckiest Guy", sans-serif;
   text-transform: uppercase;
   display: block;
   margin: auto;
   text-align: center;
 }

 #awwardsInside h2 {
   text-transform: uppercase;
 }

 #awwardsInside h2 i {
   font-size: 0.6em;
 }

 #awwardsInside {
   background: #FFFFFF;
   color: #363636;
   min-height: auto;
   padding: 100px 0;
 }

 .wrapDownloads {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
 }

 #sliderSingleProduct .introSlider p {
   color: #464646;
   font-size: 18px;
   font-family: "Montserrat Alternates", sans-serif;
 }

 .singleSpec {
   display: flex;
   justify-content: start;
   align-items: center;
   color: #464646;
   font-size: 18px;
   font-family: "Montserrat Alternates", sans-serif;
 }

 .singleSpec span {
   text-transform: uppercase;
 }

 .singleSpec p:last-child {
   margin-left: 5px;
 }

 #getMoreInfo {
   background: #DDD703;
   color: #FFFFFF;
   font: normal normal 900 24px/56px "Luckiest Guy", sans-serif;
   height: 56px;
   padding: 10px 25px;
   -webkit-border-radius: 28px;
   -moz-border-radius: 28px;
   border-radius: 28px;
 }

 #getMoreInfo:hover {
   background: #7FCAD0;
 }

 #sliderSingleProduct .introSlider {
   justify-content: center;
 }

 #sliderSingleProduct .introSlider h1 {
   font: normal normal 900 32px/56px "Luckiest Guy", sans-serif;
   text-transform: uppercase;
   color: #7FCAD0;
   margin: 10px 0;
 }

 #sliderSingleProduct .introSlider p {
   color: #464646;
   font-size: 18px;
   font-family: "Montserrat Alternates", sans-serif;
   margin: 5px 0;
 }

 #backToBrand {
   padding: 50px 0 50px;
 }

 #backToBrand a {
   font: normal normal 900 18px/48px "Luckiest Guy", sans-serif;
   color: #DDD703;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 #backToBrand a i {
   font-size: 48px;
   line-height: 48px;
   vertical-align: middle;
   margin-top: -5px;
 }

 /**************** form product *******************/
 #formSingleProduct {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: #8A4292 url("../images/bgFormSingleProduct.png") -60px center no-repeat;
   -webkit-background-size: auto 70%;
   background-size: auto 70%;
   z-index: 9999;
   display: none;
 }

 #formSingleProduct h2 {
   color: #FFFFFF;
   font: normal normal 900 48px/1.2 "Luckiest Guy", sans-serif;
   text-transform: uppercase;
 }

 #formSingleProduct > div {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }

 #formSingleProduct > div > div {
   display: flex;
   width: 100%;
   max-width: 900px;
 }

 #formSingleProduct > div > div form {
   width: 100%;
 }

 #formSingleProduct > a {
   position: absolute;
   top: 30px;
 }

 #formSingleProduct .input-field input, #formSingleProduct .input-field textarea {
   border: 1px solid #FFFFFF;
   padding-top: 10px;
   color: #FFFFFF;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   text-indent: 10px;
 }

 #formSingleProduct label {
   text-transform: uppercase;
   font: normal normal 900 24px/1.2 "Luckiest Guy", sans-serif;
   color: #FFFFFF;
   left: 20px;
   top: 5px;
 }

 #formSingleProduct label.active {
   color: #DDD703;
   -webkit-transform: translateY(-28px) scale(0.8);
   transform: translateY(-28px) scale(0.8);
 }

 #logoSingleProduct {
   left: 30px;
 }

 .closeFormSingleProduct {
   right: 30px;
   width: 60px;
   height: 60px;
   line-height: 60px;
   color: #8A4292;
   font-size: 30px;
   background: #FFFFFF;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   text-align: center;
 }

 .imageBrandMaster {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 999;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .imageBrandMaster img {
   display: block;
   margin: auto;
   width: 70%;
   max-width: 1200px;
 }

 body#brand nav {
   background: #EC6963;
 }

 body#productPage nav {
   background: #F1F1F1;
 }

 body#contactUs nav {
   background: #8A4292;
 }

 body#contactUs {
   background: #8A4292;
 }

 body#productPage {
   background: #F1F1F1;
 }

 body#contactUs nav ul li a {
   color: #FFFFFF;
 }

 body#productPage nav ul li a {
   color: #464646;
 }

 #footerEnd p, #footerEnd a, #footerEnd li {
   color: #FFFFFF;
   font-size: 16px;
   font-family: "Montserrat Alternates", sans-serif;
 }

 section .row .col h2 {
   color: #3AB4B8;
 }

 /******** brands *********/
 #brand_1 #wrapBrand, #brand_1 #nav nav {
   background: #EC6963;
 }

 #brand_2 #wrapBrand, #brand_2 #nav nav {
   background: #256652;
 }

 #brand_3 #wrapBrand, #brand_3 #nav nav {
   background: #F55097;
 }

 #brand_4 #wrapBrand, #brand_4 #nav nav {
   background: #094CA1;
 }

 #brand_5 #wrapBrand, #brand_5 #nav nav {
   background: #00AEEF;
 }

 #brand_6 #wrapBrand, #brand_6 #nav nav {
   background: #3E92AB;
 }

 #brand_7 #wrapBrand, #brand_7 #nav nav {
   background: #102B53;
 }

 #brand_8 #wrapBrand, #brand_8 #nav nav {
   background: #F19500;
 }

 #brand_9 #wrapBrand, #brand_9 #nav nav {
   background: #BFD62F;
 }

 #brand_12 #wrapBrand, #brand_12 #nav nav {
   background: #F0A7C3;
 }

 #brand_13 #wrapBrand, #brand_13 #nav nav {
   background: #3E864C;
 }

 #brand_14 #wrapBrand, #brand_14 #nav nav {
   background: #142033;
 }

 #brand_15 #wrapBrand, #brand_15 #nav nav {
   background: #BF9B81;
 }

 #wrapWhereToBuy {
   background: #49CAD2 url("../images/verticalBG.jpg") top center fixed;
   background-size: 100% auto;
 }

 #whereToBuy section:nth-child(1) {
   width: 100%;
   height: 50vh;
   display: flex;
   align-items: center;
 }
 @media all and (max-width: 600px) {
   #whereToBuy section:nth-child(1) {
     height: 50vh;
     padding-top: 56px;
   }
 }
 #whereToBuy .titleImage {
   margin-top: 60px;
 }

 #selectChooseYourCountry {
   text-align: center;
 }
 #selectChooseYourCountry button {
   text-align: center;
   font: normal normal normal 18px/24px Luckiest Guy;
   letter-spacing: 0;
   color: #008CCC;
   padding: 18px 25px;
   background: #ffffff;
   border: none;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.231372549);
   border-radius: 20px;
   display: inline-block;
   transition: all ease 250ms;
 }
 #selectChooseYourCountry button:hover {
   background: #008CCC;
   color: #ffffff;
   cursor: pointer;
 }

 #modalCountry {
   width: 100%;
   max-width: 300px;
   background: #ffffff;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.231372549);
   border-radius: 20px;
 }
 #modalCountry .modal-content {
   padding: 18px 25px;
   text-align: center;
 }
 #modalCountry .modal-content p {
   color: #008CCC;
   font: normal normal normal 18px/24px Luckiest Guy;
 }
 #modalCountry .modal-content a {
   color: #F1668C;
   font: normal normal normal 18px/24px Luckiest Guy;
   text-decoration: none;
   display: block;
   margin: 5px auto;
   cursor: pointer;
 }
 #modalCountry .modal-content a:hover {
   text-decoration: underline;
 }

 #storeContainer div.col[data-country] div {
   padding-bottom: 70%;
   position: relative;
   height: 0;
   overflow: hidden;
   background-size: contain !important;
   margin: 30px 0;
 }
 #storeContainer div.col[data-country] div a {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 #storeContainer > div:nth-child(3n-2)[data-country] > div {
   background: url("../bg-logo-1.png");
 }

 #storeContainer > div:nth-child(3n-1)[data-country] > div {
   background: url("../bg-logo-2.png");
 }

 #storeContainer > div:nth-child(3n)[data-country] > div {
   background: url("../bg-logo-3.png");
 }

 .storeTitle{
     text-align: center;
     font: normal normal normal 48px/24px Luckiest Guy;
     letter-spacing: 0px;
     color: #FFFFFF;
     text-shadow: 1px 10px 8px #00000066;
     opacity: 1;
 }

 @media all and (max-width: 840px) {
   .storeTitle{
     font-size: 36px;
   }
 }
 /*# sourceMappingURL=app.css.map */