/******************** Home Page ********************/ /*Slider*/ #mainSlider{position: relative;} .mainSlide{background-repeat: no-repeat; background-size: cover!important; background-position: right top; padding-top: 200px; padding-bottom: 270px; position: relative; height: auto;} .slidTxtWrapper{max-width: 640px; position: relative; z-index: 3;} .slidTxtWrapper > h5{display: inline-block; font-family:"Impact", Arial, Helvetica, sans-serif; font-size: 32px; background: #000; padding: 10px 30px; color: #fff; text-transform: uppercase; font-style: italic; line-height: 1; padding-right: 50px; clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); margin-bottom: 30px; } .slidTxtWrapper h1{ color: #000; font-size: 68px; margin-bottom: 30px; line-height: 1; display: block; font-family:"Capture", Arial, Helvetica, sans-serif; font-style: italic; text-shadow:0.5px 5px 0px rgba(160, 168, 162, 1); text-transform: uppercase; } .slidTxtWrapper p{color: #000; margin-bottom: 35px; font-size: 18px; font-family:"Impact", Arial, Helvetica, sans-serif; } .discBadge{ display: block; width: 190px; height: 190px; position: absolute; right: -50px; top: 10%; } .discBadge img{display: block; width: 100%;transform:scale(1.2)} /*Activites*/ #hmsection_1 h2{text-align: center;} #hm_activitySlider{display: flex; flex-flow: wrap; } #hm_activitySlider > .hm_activitySlide{width: 25%; } .hm_activitySlide{box-sizing: border-box; padding:5px; height: auto; } .hm_activitySlideBlock{display: block; position: relative;} .hm_activitySlideBlock:before{ content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; height: 100%; opacity: 0; border: solid 1px #ff0000; transition:all ease 0.3s ; -webkit-transition:all ease 0.3s ; -moz-transition:all ease 0.3s ; -ms-transition:all ease 0.3s ; -o-transition:all ease 0.3s ; } .hm_activitySlideBlock:hover:before{left: 30px; top: 30px; right: 30px; opacity: 1;} .hm_activitySlideBlock img{display: block; width: 100%;} .hm_activitySlideBlock h4{ font-family:"Capture", Arial, Helvetica, sans-serif; font-size: 40px; text-transform: uppercase; font-style: italic; text-align: center; position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box; padding: 30px 15px; transition:all ease 0.3s ; -webkit-transition:all ease 0.3s ; -moz-transition:all ease 0.3s ; -ms-transition:all ease 0.3s ; -o-transition:all ease 0.3s ; } .hm_activitySlideBlock h4 b{color:#cc1628; font-weight: normal;} .hm_activitySlideBlock h3{ font-family:"Capture", Arial, Helvetica, sans-serif; font-size: 40px; text-transform: uppercase; font-style: italic; text-align: center; position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box; padding: 30px 15px; transition:all ease 0.3s ; -webkit-transition:all ease 0.3s ; -moz-transition:all ease 0.3s ; -ms-transition:all ease 0.3s ; -o-transition:all ease 0.3s ; } .hm_activitySlideBlock h3 b{color:#cc1628; font-weight: normal;} .hm_activitySlideBlock:hover h4{background: rgba(255,255,255,0.7); } .hm_activitySlideBlock:hover h3{background: rgba(255,255,255,0.7); } /*#hm_activitySlider > div{padding: 0 10px !important;}*/ /*Section 2*/ #hmpg_3sec_bg{background-size: 100% !important; background-repeat: no-repeat !important; background-position: center -45% !important; } #hmsec2_txt{display: flex; flex-flow: wrap; } #hmsec2_txt > div{flex: 0 0 50%; box-sizing: border-box;} #hmsec2_txt_left{padding-right: 72px;} #hmsec2_txt_left h4{font-family:"Capture", Arial, Helvetica, sans-serif; font-size: 32px; line-height: 1.2; font-weight: 400;} #hmsec2_txt_left h4 b{color:#cc1628; } #hmsec2_txt_left p{font-family:"Capture", Arial, Helvetica, sans-serif; font-size: 32px; line-height: 1.2; font-weight: 400;} #hmsec2_txt_left p b{color:#cc1628; } #hmsec2_txt_right h2 {font-family: "Inter", Arial, Helvetica, sans-serif; line-height: 1.5;font-size: 16px;font-weight: 400; } /*Product section*/ #hmsec3_txt{text-align: center;} .sec_logo{margin-bottom: 30px;} #homeProductGrid{margin: 0 -10px; display: flex; flex-flow: wrap;} .homeProductBlock{flex: 0 0 33.3%; box-sizing: border-box; padding: 10px;} .productBlockIn{display: block; position: relative; } .hmProductImg{overflow: hidden;} .hmProductImg img{ display: block; width: 100%; transition:all ease 0.3s ; -webkit-transition:all ease 0.3s ; -moz-transition:all ease 0.3s ; -ms-transition:all ease 0.3s ; -o-transition:all ease 0.3s ; } .homeProductBlock:hover .hmProductImg img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; } .productBlockIn h4{text-align: center; padding: 20px 12px; background: #494949; color: #fff; font-family:"Capture", Arial, Helvetica, sans-serif; font-size: 24px; text-transform: uppercase; font-style: italic; } .productBlockIn h4 br{display: none;} .productBlockIn h3{text-align: center; padding: 30px 15px; background: #494949; color: #fff; font-family:"Capture", Arial, Helvetica, sans-serif; font-size: 24px; text-transform: uppercase; font-style: italic; } .productBlockIn h3 br{display: none;} .productOffer{display: inline-block; padding: 15px; background: #ffde46; position: absolute; left: -5px; top: 30px; z-index: 3; display: none !important; } .productOffer > span{display: inline-block; line-height: 1; vertical-align: middle;} .productOfferPercentage{font-family:"Montserrat", Arial, Helvetica, sans-serif; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-image: url('../images/gg.jpg'); background-size: cover; display: inline-block; color: #c6312a; font-size: 56px; font-weight: 700; letter-spacing: -2px; margin-right: 4px;} .productOfferutxt{font-family:"Impact", Arial, Helvetica, sans-serif; font-size: 22px; text-transform: uppercase; color: #c6312a; text-align: left;} #hmsec3_btnwrap{margin-top: 60px; } #hmsec3_btnwrap:after{/*content: ""; display: block; width: 305px; height: 52px; background-image: url('../images/icons2.jpg'); background-position: -1px -242px; margin: 0 auto; margin-top: 20px;*/} /*Video Section*/ #hmsection_4 > .container{max-width: 1600px;} @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); } 70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); } } #hmsec_video{padding-top: 56.3%; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;} #hmsec_video video, #hmsec_video iframe{position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; background: #fff; object-fit: cover; opacity: 1;} #hmsec_video.active video{opacity: 1;} #triggerVideo{position: absolute; left: 50%; top: 50%; transform:translateX(-50%) translateY(-50%) ; -webkit-transform:translateX(-50%) translateY(-50%) ; -moz-transform:translateX(-50%) translateY(-50%) ; -ms-transform:translateX(-50%) translateY(-50%) ; -o-transform:translateX(-50%) translateY(-50%) ; width: 150px; height: 150px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: rgba(0,0,0,0.6); border: solid 2px #c6312a; } #triggerVideo:hover{opacity: 0.5;} #triggerVideo:before{ content: ""; display: block; width: 33px; height: 39px; background-image: url('../images/icons1.png'); background-position:-162px 0; position: absolute; left: 50%; top: 50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); z-index: 3;} #hmsec_video.active #triggerVideo:before{background-image: url('../images/pause.png'); width: 20px; height: 26px; background-position: center; background-size: contain;} #hmsec_video.active #triggerVideo{opacity: 0;} #hmsec_video.active:hover #triggerVideo{} #triggerVideo:after{ content: ""; display: block; position: absolute; z-index: 2; animation: pulse 1.5s infinite; -webkit-animation: pulse 1.5s infinite; width: 100%; height: 100%; border-radius:50% ; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; } /*Video Popup*/ #videoModal{} #videoModal .modal-dialog{max-width: 650px; width: 96%; margin-left: auto; margin-right: auto; } #videoModal .modal-header{border-bottom: 0; padding: 0 10px; text-align: right; } #videoModal .modal-header .close{background: none; border: 0; font-size: 18px; color: #000; margin-top: 8px; cursor: pointer; } #videoModalWrap iframe{width: 100% !important;} /*Review section*/ #hmsec_testiHead{display: flex; flex-flow: wrap; } #hmsec_testiHead_right{margin-left: auto; width: 332px; height: 104px; background: url('../images/icons2.jpg'); } #testiSlider_wrap{padding-top: 25px;} #testiSlider{display: flex; flex-flow: wrap;} #testiSlider > li{flex: 0 0 33.3%; } #testiSlider li{box-sizing: border-box; padding: 15px; height: initial;} .testiBlock{box-sizing: border-box; padding: 40px; border: solid 1px #acacac; /*height: 100%;*/ min-height: 320px;} #testiSlider .slick-track{display: flex;} .testiBlock p{color: #626262; margin-bottom: 25px;} .testiBlock p:before{content: ""; display: block; width: 104px; height: 23px; background: url('../images/icons2.jpg'); background-position: -332px 0; margin-bottom: 20px;} .testiBlock h6{font-family:"Impact", Arial, Helvetica, sans-serif; font-size: 18px; color: #626262; text-transform: uppercase;} #testiSlider .slick-dots{text-align: center; margin-top: 25px; width: 100%;} #testiSlider .slick-dots li button{display: none} #testiSlider .slick-dots li{ display: inline-block; width: 10px; height: 10px; background: #959595; border-radius:50% ; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; margin: 0 10px; opacity: 0.5; padding: 0; cursor: pointer;} #testiSlider .slick-dots li.slick-active{opacity: 1;} .testiBlock .testimonialTitle { font-family: "Impact", Arial, Helvetica, sans-serif; font-size: 18px; color: #626262; text-transform: uppercase; } /*Features section*/ #hmsection_6{background-size: cover !important; background-repeat: no-repeat !important;} #hmsec_features{text-align: center;} #hmsec_features .section_heading_style_2{color: #fff;} #hmsec_features .section_heading_style_2 b{color:#ff3d4f;} #hmFeatureList{padding-top: 25px; display: flex; flex-flow: wrap; margin: 0 -15px;} #hmFeatureList li{box-sizing: border-box; padding: 0 15px; flex: 0 0 25%;} .featureBlock h4{font-family:"Capture", Arial, Helvetica, sans-serif; font-size: 26px; color: #fff; text-transform: uppercase; font-style: italic; margin-top: 25px; } .featureBlock img{mix-blend-mode: lighten;} #hmsec_features .featureTitle{ font-family: "Capture", Arial, Helvetica, sans-serif; font-size: 26px; color: #fff; text-transform: uppercase; font-style: italic; margin-top: 25px; } /*************************** RESPONSIVE ***************************/ @media only screen and (max-width:1580px){ .discBadge{top: 10%;} #hmpg_3sec_bg{background-position: center !important;} #hmsection_4 > .container{max-width: 1240px;} } @media only screen and (max-width:1440px){ .mainSlide{padding-top: 150px;} .slidTxtWrapper > h5{font-size: 28px;} .slidTxtWrapper h1{font-size: 76px; margin-bottom: 20px;} .slidTxtWrapper p{margin-bottom: 20px;} .discBadge{ right: -25px; top: 15%; transform:scale(0.8) ; -webkit-transform:scale(0.8) ; -moz-transform:scale(0.8) ; -ms-transform:scale(0.8) ; -o-transform:scale(0.8) ; } } @media only screen and (max-width:1239px){ .hm_activitySlideBlock h4{font-size: 25px; padding: 15px;} .hm_activitySlideBlock h3{font-size: 25px; padding: 15px;} .discBadge{right: 0; top: -40px; z-index: 1;} .slidTxtWrapper h1{position: relative; z-index: 2;} .mainSlide{background-position: center top;} .productBlockIn h4{font-size: 20px; padding:15px 10px;} .productBlockIn h3{font-size: 20px; padding:15px 10px;} .slidTxtWrapper p{font-size: 18px; max-width: 50%; line-height: 1.1;} #hmsec3_btnwrap{margin-top: 20px;} .testiBlock{min-height: auto;} } @media only screen and (min-width:980px){ .mainSlide:after{content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center top !important; background: url('../images/slider_overlay.png'); height: 64%; z-index: 2;} .mainSlide.inTab:after{display: none;} } @media only screen and (min-width:1441px){ .mainSlide:after{ height: 75%;} } @media only screen and (min-width:979px) and (max-width:1024px){ .mainSlide{padding-bottom: 65px; margin-bottom: 45px;} } @media only screen and (min-width:768px) and (max-width:1366px){ .tabSlideImHolder{position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .tabSlideImHolder img{display: block; width: 100%; height: 100%; object-fit: cover;} .tabSlideImHolder:after{content: ""; display: block; position: absolute; left: 0; bottom: -25px; width: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center bottom !important; background: url('../images/slider_overlay_tab.png'); height: 80%; z-index: 2;} .slidTxtWrapper p{margin-bottom: 12px;} } @media only screen and (max-width:979px){ .hm_activitySlideBlock h4{font-size: 26px;} .hm_activitySlideBlock h3{font-size: 26px;} #hmsec2_txt > div{flex: 0 0 100%; text-align: center; padding: 0;} #hmsec2_txt_left h4{font-size: 23px; margin-bottom: 20px;} #hmsec2_txt_left p{font-size: 23px; margin-bottom: 20px;} .slidTxtWrapper h1{font-size: 64px;} .discBadge { right: 215px; top: -65px; z-index: 1; } .homeProductBlock{flex: 0 0 50%;} #triggerVideo{width: 110px; height: 110px;} #hmsec_testiHead_right{display: none;} #hmsec_testiHead_left{flex: 0 0 100%; text-align: center;} #testiSlider_wrap{padding-top: 0;} .sec_logo{margin-bottom: 12px;} .testiBlock{padding: 30px 15px;} .sec_logo img{max-width: 180px;} .featureBlock h4{font-size: 19px;} #hmFeatureList{padding-top: 0;} .mobSlideImHolder{position: relative; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden;;} .mobSlideImHolder img{display: block; width: 100%; object-position: center bottom; height: 100%;} .mobSlideImHolder:after{content: ""; display: block; position: absolute; left: 0; bottom: -5px; width: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center bottom !important; background: url('../images/slider_overlay_mob.png'); height: 80%; z-index: 2;} .mainSlide{padding-top: 70px; padding-bottom: 0; margin-bottom: 45px; background-image: none !important; background: #fff !important; border-bottom: solid 1px #e9e9e9;} .slidTxtWrapper{margin: 45px 0;} .slidTxtWrapper h1 br{display: none;} .discBadge{ position: relative; right: auto; top: auto; transform:translateX(0) translateY(0) scale(0.85) ; -webkit-transform:translateX(0) translateY(0) scale(0.85) ; -moz-transform:translateX(0) translateY(0) scale(0.85) ; -ms-transform:translateX(0) translateY(0) scale(0.85) ; -o-transform:translateX(0) translateY(0) scale(0.85) ; margin: 0 auto; margin-bottom: 12px;} .slidTxtWrapper{text-align: center;} .slidTxtWrapper p{max-width: 100%;} .slidTxtWrapper{max-width: 100%;} .featureBlock h4{margin-top: 15px;} .mainSlide.inMob .slidTxtWrapper p{margin-bottom: 15px;} } @media only screen and (max-width:900px){ .tabSlideImHolder{height: auto; position: relative;} /* .slidTxtWrapper p{margin-bottom: 100px;}*/ .tabSlideImHolder img{height: auto; object-fit: cover;} #hm_activitySlider > .hm_activitySlide{width: 50%; } .hm_activitySlideBlock h4{font-size: 30px;} .hm_activitySlideBlock h3{font-size: 30px;} /*.mainSlide.inTab .slidTxtWrapper p{margin-bottom: 20px;}*/ .mainSlide.inTab .slidTxtWrapper{margin-top: 0;} } @media only screen and (max-width:767px){ #hmFeatureList li{flex: 0 0 50%; padding: 15px;} .mainSlide{padding-top: 65px;} .slidTxtWrapper > h5{margin-bottom: 15px; font-size: 22px;} .slidTxtWrapper h1{font-size: 55px;} #homeProductGrid{max-width: 300px; margin: 0 auto;} .homeProductBlock{flex: 0 0 100%; padding: 15px 0;} #hmpg_3sec_bg{background: none !important;} .hm_activitySlideBlock:hover:before{left: 10px; top: 10px; right: 10px;} #triggerVideo:before{background:none; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15.6px; border-color: transparent transparent transparent #ffffff;} #hmsec_video.active #triggerVideo:before{border: none;} } @media only screen and (max-width:575px){ .slidTxtWrapper > h5 { margin-bottom: 0px; font-size: 18px; } .slidTxtWrapper h1{ margin-bottom: 12px; font-size: 30px; margin-top: 12px; } .btnStyle1 { margin-top: 5px; } .btnStyle1 { padding: 14px 31px; font-size: 20px; } .mobSlideImHolder{ height: unset!important; } .mainSlide.inMob .slidTxtWrapper p { margin-bottom: 10px; } .slidTxtWrapper p{ font-size: 15px; } .discBadge{ margin-bottom: 6px; } .slidTxtWrapper{ margin: 9px 0; } } @media only screen and (max-width:420px){ .mobSlideImHolder{height: auto; overflow: visible;} .mobSlideImHolder img{height: auto; /*object-position: unset;*/} .slidTxtWrapper{margin-top: -11px;} #hmFeatureList{margin: 0;} #hmFeatureList li{flex: 0 0 100%; padding: 15px 0;} .featureBlock h4 br{display: none;} #triggerVideo{width: 75px; height: 75px;} #hmsec_video{padding-top: 60%;} .mobSlideImHolder:after{height: 55%;} #hm_activitySlider > .hm_activitySlide{width: 100%;} #hm_activitySlider{max-width: 300px; margin: 0 auto;} .hm_activitySlideBlock h4{font-size: 28px;} .hm_activitySlideBlock h3{font-size: 28px;} } @media only screen and (max-width:320px){ .slidTxtWrapper h1{font-size: 44px;} }