/* Theme Name: Flatsome Child Description: This is a child theme for Flatsome Theme Author: UX Themes Template: flatsome Version: 3.0 */ .ux-builder-iframe .detailPost-img, .ux-builder-iframe .detailPost-infodate{display:none} /*************** ADD CUSTOM CSS HERE. ***************/ /* MARK: HEADER */ #header{position: fixed;/*background: #fff;*/} .header-main{padding-left: 32px;} .header-main { height: 62px !important; } .header-shadow .header-wrapper, .header-wrapper.stuck, .layout-shadow #wrapper{background: #fff;} body .header.show-on-scroll, body .stuck .header-main{height: 62px !important;} .header-bg-container{display: none;} .dev-hidden-menuHam{display: none !important;} .cs-menu-btn{position: relative;margin:0;width:60px;display: flex;flex-direction: column;gap:2px;background: #000;padding:10px;align-items: center; justify-content: center;cursor: pointer;} .cs-menu-btn span{ height: 3px; width:100%; background: #fff; 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; } .cs-menu-btn:hover span:first-child, .cs-menu-btn:hover span:last-child{width:70%;} .cs-contact-btn{ height: 62px; display: inline-flex; padding:0 15px; background: #000; color:#fff; font-size: 20px; font-weight: bold; text-transform: uppercase; align-items: center; justify-content: center; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; } .cs-menu-right{display: inline-flex;background: #000;height: 100%;} .cs-contact-btn:hover{background: #f57539;color:#fff;} /* MARK: MENU CUSTOM */ #boxMenu-fixed{ position: fixed; top:0; right:0; width:100%; height:100vh; display: flex; justify-content: end; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); visibility: hidden; opacity: 0; z-index: -99; transition: all ease 0.7s; -webkit-transition: all ease 0.7s; -moz-transition: all ease 0.7s; -ms-transition: all ease 0.7s; -o-transition: all ease 0.7s; } #boxMenu-fixed.showMenu-fixed-active{visibility: visible;opacity: 1;z-index: 99999;} .boxMenu-fixed-contain{width:100%;height:100%;background: #000;max-height: 100%; overflow: auto;display: flex ; align-items: center; justify-content: center;position: relative;} .boxMenu-fixed-box{max-width: 1200px;margin: auto;display: flex;flex-direction: column;justify-content: space-between;gap:30px;padding-top:40px;padding-bottom:40px;} .boxMenu-fixed-top{display: flex;align-items: center;justify-content: space-between;display: none;} .cs-menu-close{position: absolute;margin:0;width:40px;display: flex;flex-direction: column;gap:2px;background: #000;padding:0px;align-items: center; justify-content: space-around;cursor: pointer;height: 40px;top:30px;right:30px;} .cs-menu-close span{ height: 3px; width:100%; background: #fff; 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; } .cs-menu-close span:first-child{transform: rotate(45deg); /*transform-origin: 9px;*/} .cs-menu-close span:last-child{ transform: rotate(-45deg); /*transform-origin: 1px;*/ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); margin-top: -42px;} .boxMenu-langs{display: flex;gap:12px} .boxMenu-langs a{color:#fff;font-size: 26px;font-weight: bold;} .boxMenu-fixed-middle{display: flex;align-items: center;gap:80px;justify-content: space-between;} .boxMenu-middle-info *{color:#fff;} .boxMenu-middle-infoTitle{font-weight: 600;font-size: 16px;} .boxMenu-middle-infoBtn{ border:1px solid #fff; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; font-size: 36px; font-weight: bold; padding:14px 20px; transition:all ease 0.5s ; -webkit-transition:all ease 0.5s ; -moz-transition:all ease 0.5s ; -ms-transition:all ease 0.5s ; -o-transition:all ease 0.5s ; display: inline-block;} .boxMenu-middle-infoBtn:hover{background: #fff;color:#000;} .boxMenu-middle-line{display: block;width:1px;background: #fff;height: 100%;} .boxMenu-bottom-title{color:#fff;text-transform: uppercase;font-size: 38px;font-weight: bold;margin-bottom: 10px;} #showMenu-fixed .header-search-form{display: none;} #showMenu-fixed .nav > li > a{color:#fff;text-transform: capitalize;font-weight: bold;font-size: 36px;font-family: 'Montserrat', sans-serif;padding: 0;} #showMenu-fixed .nav > li > a:hover{color: #f57539;} #showMenu-fixed .nav-sidebar.nav-vertical>li+li{border: none;} #showMenu-fixed ul > li:last-child{display: none;} /* MARK: PAGE CONTAINER */ .container-page{max-width: 1280px !important;margin: auto;} .subcontainer-page{max-width: 1100px !important;margin: auto;} /* MARK: PAGINATION CSS */ .page-numbers{margin-bottom:40px !important;} .nav-pagination>li>.current, .nav-pagination>li>a:hover, .nav-pagination>li>span:hover{background: #F7941D;border-color: #F7941D;} .nav-pagination>li>a, .nav-pagination>li>span{min-width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;font-size: 14px; font-weight: 400;color:#fff !important;border-width: 1px;background: #999;border-radius: 4px;} /* MARK: TITLE PAGE DEFINE */ .custom-subtitle1 *{color:#efefef;font-size: 17px;text-transform: capitalize;margin-bottom: 10px;} .custom-title1 *{color:#efefef;font-size: 46px;text-transform: capitalize;margin-bottom: 0;line-height: 130%;font-weight: 700;} /* MARK: BUTTON PAGE DEFINE */ .button-style1{ background: #000; width:219px; height:70px; display: inline-flex; align-items: center; justify-content: center; margin: 0; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s;box-shadow: none !important; } .button-style1 *{color:#fff;font-size: 25px;font-weight: bold;} .button-style1:hover{background: #f57539;} .button-style1 span{ 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 ; } .button-style1:hover span{ transform:scale(0.8) ; -webkit-transform:scale(0.8) ; -moz-transform:scale(0.8) ; -ms-transform:scale(0.8) ; -o-transform:scale(0.8) ; } /* MARK: HOME - TITLE */ .titleMain-1{} .titleMain-1 *{font-size: 64px;font-weight: bold;color:#000;margin-bottom: 0;line-height: 120%;} /* MARK: HOME - SLOGAN */ @keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -300px 0; } } @-moz-keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -300px 0; } } @-webkit-keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -300px 0; } } @-ms-keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -300px 0; } } @-o-keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -300px 0; } } .animate-area { width: 100%; height: 50px; background-image: url('../flatsome/images/bar.png'); background-position: 0px 0px; background-color: #000; animation: animatedBackground 10s linear infinite; -moz-animation: animatedBackground 10s linear infinite; -webkit-animation: animatedBackground 10s linear infinite; -ms-animation: animatedBackground 10s linear infinite; -o-animation: animatedBackground 10s linear infinite; background-size: contain; } /* MARK: FOOTER */ .s-footer{background: #000;padding:44px 0 70px !important;} .s-footer-container{display: flex;} .s-footer-left{flex-basis: 420px !important; max-width: 420px !important;} .s-footer .s-footer-right{padding-left: 80px !important;flex-basis: calc(100% - 420px) !important; max-width: calc(100% - 420px) !important;} .s-footer-info{margin-bottom: 30px;} .s-footer-info *{margin: 0;color:#fff;font-size: 25px;text-align: right;} .absolute-footer{display: none !important;} .s-footer-social{display: flex;} .s-footer-social-item{flex-basis: auto !important;max-width: auto !important;} .s-footer-social-item > .col-inner{display: flex;justify-content: end;gap:24px;} .s-footer-social-item > .col-inner .img{ width:63px !important; margin: 0; } .s-footer-social-item > .col-inner .img img{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 ;} .s-footer-social-item > .col-inner .img:hover img{ transform:scale(0.9) ; -webkit-transform:scale(0.9) ; -moz-transform:scale(0.9) ; -ms-transform:scale(0.9) ; -o-transform:scale(0.9) ; } .s-footer-infoTitle , .s-footer-infoTitle *{color:#fff;margin: 0; margin-top: 10px; font-weight: bold; font-size: 18px;} /* MARK: FORM */ /* MARK: UX BLOCK - BLOG */ .uxblock-blog{padding: 87px 0 !important;} .ux-block-blog-contain{display: flex;max-width: 1280px !important;margin: auto;gap:140px;} .uxblock-blog .ux-block-blog-left{flex-basis:calc(100% - 592px - 140px) !important;max-width: calc(100% - 592px - 140px) !important;padding-left: 42px !important;} .ux-block-blog-right{flex-basis:592px !important;max-width: 592px !important;} .ux-block-blog-contain:after{display: none !important;} .ux-blog-des{margin-top: 20px;} .ux-blog-des *{color:#4A5568;font-size: 30px;margin: 0;} .ux-block-blog-left .iconCircle{margin-left: 8px;} .detailPost-author{color:#2D3748;font-size: 18px;font-weight: bold;padding-bottom: 40px;border-bottom: 1px solid #E8E7E7;margin-bottom: 50px;} .detailPost-title{color:#2D3748;font-size: 45px;font-weight: bold;} .detailPost-content *{color:#718096} .detailPost-content h2 *, .detailPost-content h3 *, .detailPost-content strong{color:#2D3748;} .page-header-wrapper{padding:0 90px;padding-top:120px;} @media screen and (max-width: 1550px){ #showMenu-fixed .nav > li > a, .boxMenu-middle-infoBtn{font-size: 26px;} } @media screen and (max-width: 1366px){ .ux-blog-des *{font-size: 22px;} } @media screen and (max-width: 1280px){ .s-footer{padding: 44px 5% 70px !important;} .s-footer-info *{font-size: 20px;} .uxblock-blog { padding: 40px 5% !important; } .titleMain-1 * { font-size: 50px;} .ux-block-blog-left .iconCircle { width: 40px; height: 42px;} .ux-block-blog-contain{gap:40px;} .uxblock-blog .ux-block-blog-left { flex-basis: calc(45% - 40px) !important; max-width: calc(45% - 40px) !important; padding-left: 0px !important; margin-top: 30px;} .ux-block-blog-right { flex-basis: 55% !important; max-width: 55% !important; } } @media screen and (max-width:1024px){ .boxMenu-fixed-contain{width:100%;height:100%;} .boxMenu-fixed-contain{padding-right: 5%; padding-left: 5%;} .cursor-outline{display: none;} .animate-area{background-size: cover;} } @media screen and (max-width:849px){ .s-footer-left { flex-basis: 300px !important; max-width: 300px !important; } .s-footer .s-footer-right { padding-left: 0 !important; flex-basis: 100% !important; max-width: 100% !important; margin-top:40px;} .s-footer-info *{text-align: left;} .ux-blog-des * { font-size: 16px; } .ux-block-blog-left .titleMain-1 * { font-size: 42px; } .ux-block-blog-left .iconCircle { width: 34px; height: 36px; } .medium-logo-center .logo{order: 0;margin: 0;} .header-main { padding-left: 5%; } .boxMenu-fixed-middle{gap:40px;} #showMenu-fixed .nav > li > a, .boxMenu-middle-infoBtn, .boxMenu-bottom-title{font-size: 28px;} } @media screen and (max-width:700px){ .uxblock-blog .ux-block-blog-left { flex-basis: 100% !important; max-width: 100% !important; padding-left: 0px !important; } .ux-block-blog-right { flex-basis: 100% !important; max-width: 100% !important; } .cs-contact-btn{font-size: 16px;} } @media screen and (max-width:650px){ .boxMenu-langs a{font-size: 18px;} #showMenu-fixed .nav > li > a, .boxMenu-middle-infoBtn{ font-size: 18px; } .boxMenu-middle-infoBtn{padding: 8px 15px;} .boxMenu-fixed-middle { gap: 20px; } .normal-title .page-title-inner{min-height: 250px !important;} .boxMenu-bottom-title{font-size: 24px;} .s-footer-infoTitle, .s-footer-infoTitle *{font-weight: 500; font-size: 14px;} .cs-menu-close span{height: 2px;} .cs-menu-close{width: 30px;height: 30px;right: 3%;} .cs-menu-close span:first-child{margin-top: -8px;} .animate-area{height: 40px;background-size: cover;} } @media screen and (max-width: 549px){ .s-footer-info * { font-size: 16px; } .s-footer-social-item > .col-inner{justify-content: start;gap:10px;} .s-footer-social-item > .col-inner .img{width:40px !important;} .s-footer .s-footer-right{margin-top:30px;} .ux-block-blog-left .titleMain-1 * { font-size: 38px; } .ux-block-blog-left .iconCircle { width: 28px; height: 30px; } .boxMenu-fixed-middle{flex-direction: column; justify-content: start; align-items: start;gap:20px;} .boxMenu-middle-line { display: block; width: 100%; background: #fff; height: 1px; opacity: 1; } .medium-logo-center .logo img{width: 150px; margin-left: 0;} .cs-contact-btn{display: none;} .header-main { height: 50px !important; } }