/*----------------------------------------------------------------------------------- Template Name: Lyhour Template URL: kaknnea.com/templates/kn Description: KN - Muultipurpose Landing Page Template Author: UIdeck Author URL: https://kaknnea.com/ Support: https://kaknnea.com/support/ Version: 1.0.1 ----------------------------------------------------------------------------------- CSS INDEX =================== 01. Theme default CSS 02. Header 03. Hero 04. Footer -----------------------------------------------------------------------------------*/ /*=========================== 1. COMMON css ===========================*/ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800"); @font-face { font-family: 'Khmer Os Content'; src: url(//lyhourleasing.com.kh/wp-content/themes/lyhour/assets/fonts/KhmerOS_content.ttf); font-weight: normal; } body { font-family: 'Open Sans' , 'Kantumruy Pro', 'Proxima Nova',Arial, 'Khmer Os Content', Arial, "Muli", "Poppins", sans-serif; font-weight: normal; font-style: normal; color: #6d6e72; overflow-x: hidden; -webkit-font-smoothing: antialiased; font-size:12px; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 0.5px solid rgb(145 145 145 / 19%); } .top-bar-right { text-align: right; } .top-bar, .top-bar-desktop{ background:#c7000b; color:#fff; } .top-bar { padding-top: 8px; padding-bottom: 8px } ul.custom-header-contact { list-style: none; padding: 0; margin: 0; text-transform: uppercase; font-size: 12px; letter-spacing: -.04em } ul.custom-header-contact li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center } ul.custom-header-contact span { margin-left: 12px } ul.custom-header-contact li+li { margin-left: 50px } ul.custom-header-contact.pdr-35 { padding-right: 35px } ul.custom-header-contact li a{ color:#fff; } .item{ /*opacity: .4;*/ transition: .4s ease all; margin: 0 20px; transform: scale(.8); } .active .item{ opacity: 1; transform: scale(1); } .item img{ width: 100%; /*height: 600px;*/ object-fit: cover; } .owl-controls{ display: none; } @media (max-width:600px){ .item{ margin: 0; } .item img{ height: auto; } } @media (min-width: 992px){ body { font-size: 16px; } } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; } a:focus, input:focus, textarea:focus, button:focus { text-decoration: none; outline: none; } a:focus, a:hover { text-decoration: none; color:#0056b3; } a { color:#0c1a38; } i, span, a { display: inline-block; } .post-news { /*font-family: 'Khmer Os Content',Arial !important;*/ } .post-news h3{ line-height: 48px; } .content .title .small ul,.content .title .small ol { margin: 0px !important; padding: 0px !important; list-style-type: none; } h1, h2, h3, h4, h5, h6 { font-family: 'Khmer Os Content', "Muli", "Poppins", sans-serif; font-weight: 700; color: #0c1a38; margin: 0px; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 25px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul, ol { margin: 0px; padding: 0px; /*list-style-type: none;*/ } p { font-size: 16px; font-weight: 400; line-height: 26px; color: #121212; margin: 0px; } .bg_cover { /*background-position: center center;*/ /*background-size: cover;*/ /*background-repeat: no-repeat;*/ /*width: 100%;*/ /*height: 100%;*/ } /*==== Section Title =====*/ .section-title .title { /* font-size: 44px; */ font-weight: 500; color: #121212; line-height: 55px; } .section-title .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 24px; } /*===== All Preloader Style =====*/ .preloader { /* Body Overlay */ position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; /* Change Background Color */ background: #fff; z-index: 99999; } .preloader .loader { display: table-cell; vertical-align: middle; text-align: center; } .preloader .loader .ytp-spinner { position: absolute; left: 50%; top: 50%; width: 64px; margin-left: -32px; z-index: 18; pointer-events: none; } .dropdown-toggle::after{ content:"" !important; } .preloader .loader .ytp-spinner .ytp-spinner-container { pointer-events: none; position: absolute; width: 100%; padding-bottom: 100%; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; animation: ytp-spinner-linspin 1568.23529647ms linear infinite; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator { position: absolute; width: 100%; height: 100%; -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; right: 50%; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right { position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden; left: 50%; } .preloader .loader .ytp-spinner-circle { box-sizing: border-box; position: absolute; width: 200%; height: 100%; border-style: solid; /* Spinner Color */ border-color: #c7000b #dc6454 #cbced1e1; border-radius: 50%; border-width: 6px; } .preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #cbced1; -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner-right .ytp-spinner-circle { left: -100%; right: 0; border-left-color: #cbced1; -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } /* Preloader Animations */ @-webkit-keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } } @-webkit-keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } } @keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } } @-webkit-keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } } @keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } } /*=========================== 2.BUTTON css ===========================*/ .main-btn { display: inline-block; font-weight: 600; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 2px solid transparent; padding: 0 32px; font-size: 16px; line-height: 46px; color: #666; cursor: pointer; z-index: 5; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; position: relative; /* text-transform: uppercase; */ } @media (max-width: 767px) { .main-btn { font-size: 14px; padding: 0 20px; line-height: 40px; } } /*===== Rounded Buttons =====*/ .rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .rounded-buttons ul li { margin-left: 0; } } .rounded-buttons ul li:first-child { margin-left: 0; } .rounded-buttons .main-btn { border-radius: 50px; } .rounded-buttons .rounded-one { border-color: #dc6454; color: #dc6454; } .rounded-buttons .rounded-one:hover { background-color: rgba(56, 249, 215, 0.4); } .rounded-buttons .rounded-two { color: #fff; background-color: #dc6454; border-color: #dc6454; } .rounded-buttons .rounded-two:hover { background-color: rgba(56, 249, 215, 0.4); border-color: rgba(56, 249, 215, 0.4); } .rounded-buttons .rounded-three { overflow: hidden; line-height: 42px; background: -webkit-linear-gradient(left, #1a6093 0%, #1a6093 50%, #1a6093 100%); background: -o-linear-gradient(left, #1a6093 0%, #1a6093 50%, #1a6093 100%); background: linear-gradient(to right, #1a6093 0%, #1a6093 50%, #1a6093 100%) background-size: 200% auto; color: #fff; border: 0; -webkit-transition: all 0.1s ease-out 0s; -moz-transition: all 0.1s ease-out 0s; -ms-transition: all 0.1s ease-out 0s; -o-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-three { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-three { line-height: 44px; } } .rounded-buttons .rounded-three:hover { background-position: right center; } .rounded-buttons .rounded-four { border-color: #dc6454; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-four { padding-left: 40px; } } .rounded-buttons .rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-four span { left: 15px; } } .rounded-buttons .rounded-four:hover { color: #fff; background-color: #dc6454; } .rounded-buttons .rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-five { color: #fff; background-color: #dc6454; border-color: #dc6454; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-five { padding-left: 40px; } } .rounded-buttons .rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-five span { left: 15px; } } .rounded-buttons .rounded-five:hover { color: #dc6454; background-color: transparent; } .rounded-buttons .rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient(left, #43cae9 0%, #dc6454 50%, #43cae9 100%); background: -o-linear-gradient(left, #43cae9 0%, #dc6454 50%, #43cae9 100%); background: linear-gradient(to right, #43cae9 0%, #dc6454 50%, #43cae9 100%); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-six { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-six { padding-right: 40px; line-height: 44px; } } .rounded-buttons .rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-six span { right: 15px; } } .rounded-buttons .rounded-six:hover { background-position: right center; } .rounded-buttons .rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } @-webkit-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @-moz-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } /*=========================== 3.HEADER css ===========================*/ /*===== NAVBAR EIGHT =====*/ .navbar-area { /* background: -webkit-linear-gradient(left, #43cae9 0%, #dc6454 100%); background: -o-linear-gradient(left, #43cae9 0%, #dc6454 100%); background: linear-gradient(to right, #43cae9 0%, #dc6454 100%); */ /*padding: 10px 0;*/ position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #fff; /*-webkit-transition: all 0.3s ease-out 0s;*/ /*-moz-transition: all 0.3s ease-out 0s;*/ /*-ms-transition: all 0.3s ease-out 0s;*/ /*-o-transition: all 0.3s ease-out 0s;*/ /*transition: all 0.3s ease-out 0s;*/ } /* header Nav */ .header-navigation { box-shadow: inset 0px 0px 10px -5px rgb(59 83 163 / 25%) !important; } .navbar-brand{ display: inline-block; padding-top: 0px !important; padding-bottom: 0px !important; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; } .navbar-area .navbar-brand img { max-width: 350px; /*max-height:100px;*/ width:auto; } .navbar-nav .dropdown-menu { width: 16rem; margin-top: -1px; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; padding:0px; } .navbar-nav .dropdown-menu > li > a { padding: 14px 15px 14px 20px !important; font-weight: 400 !important; border-bottom: 1px solid #f9fafd; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area { padding: 10px 0; } } @media (max-width: 767px) { .navbar-area { padding: 10px 0; } } .navbar-area .navbar { position: relative; padding: 0; } .navbar-area .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #121212; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 108%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 16px; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } } @media (max-width: 767px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 108%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 16px; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } } .navbar-area .navbar .navbar-nav { margin-right: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav { margin-right: 0; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav { margin-right: 0; } } .navbar-area .navbar .navbar-nav .nav-item { position: relative; } .home-menu-item { padding-left: 0; } .dropdown-menu .sm-menu.show { width: 16rem; margin-top: -1px; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; padding: 0px; } .navbar-area .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 600; padding: 24px 15px; color: #c7000b; text-transform: uppercase; position: relative; font-family: 'Open Sans' , 'Kantumruy Pro' , sans-serif; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; /*margin: 4px 0;*/ } .navbar-area .navbar .navbar-nav .nav-item a:hover{ color:#eb1f27; } .navbar-area .navbar .navbar-nav .sm-menu a{ padding: 14px 15px 14px 20px !important; font-weight: 400 !important; border-bottom: 1px solid #f9fafd; width: 100%; } .navbar-area .navbar .navbar-nav .spnav-item a { padding-left:5px !important; padding-right:5px !important; font-family: 'Open Sans',Arial ,'Khmer Os Content'; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; border: 0; margin: 0; } } .navbar-area .navbar .navbar-nav .nav-item a::before { position: absolute; content: ''; width: 60%; height: 4px; background-color: #fff; left: 50%; bottom: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translateX(-50%) scaleX(0); -moz-transform: translateX(-50%) scaleX(0); -ms-transform: translateX(-50%) scaleX(0); -o-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } .navbar-area .navbar .navbar-nav .nav-item.active>a::before, .navbar-area .navbar .navbar-nav .nav-item:hover>a::before { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -ms-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); } .navbar-area .navbar .navbar-nav .nav-item .sub-menu { position: absolute; right: 0; top: 100%; width: 260px; margin:0px !important; padding:0px !important; background-color: #fff; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu { position: relative !important; width: 100% !important; left: 0 !important; top: auto !important; opacity: 1 !important; visibility: visible !important; display: none; right: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all none ease-out 0s; -moz-transition: all none ease-out 0s; -ms-transition: all none ease-out 0s; -o-transition: all none ease-out 0s; transition: all none ease-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: left; border-top: 0; } } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li { position: relative; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler { color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 24px; position: relative; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; margin: 0 0; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i { float: right; font-size: 14px; margin-top: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i { display: none; } } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i { display: inline-block; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a::after { position: absolute; content: ''; top: 0; left: 0px; width: 100%; height: 100%; border-radius: 5px; background: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%); background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%); opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a::before { display: none; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { right: auto; left: 100%; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu { padding-left: 30px; } } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler { color: #fff; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover>a { color: #fff; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover>a::after { opacity: 1; } .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover>a::before { opacity: 1; } .navbar-area .navbar .navbar-nav .nav-item:hover .sub-menu { opacity: 1; visibility: visible; } .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler { display: inline-block; position: absolute; top: 0; right: 0; padding: 10px 14px; font-size: 16px; background: none; border: 0; color: #fff; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 70px; top: 11px; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 60px; top: 11px; } } .navbar-area .navbar .navbar-btn .menu-bar { font-size: 32px; position: relative; overflow: hidden; color: #5177bd; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area.navbar-transparent { background: transparent; } .navbar-area.navbar-transparent .navbar .navbar-toggler .toggler-icon { background-color: #fff; } .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a { color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a { color: #121212; } .jumbotron{ padding: 3rem 1rem !important; } } .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a::before { background-color: #dc6454; } .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item.active a, .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item:hover a { color: #dc6454; } .navbar-area.navbar-transparent .navbar .navbar-btn .menu-bar { color: #fff; } .navbar-area.navbar-transparent .navbar .navbar-btn .menu-bar:hover { color: #dc6454; } .navbar-area.navbar-transparent.sticky { background-color: #fff; } .navbar-area.navbar-transparent.sticky .navbar .navbar-toggler .toggler-icon { background-color: #121212; } .navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item a { color: #121212; } .navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item.active a, .navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item:hover a { color: #dc6454; } .navbar-area.navbar-transparent.sticky .navbar .navbar-btn .menu-bar { color: #121212; } .navbar-area.navbar-transparent.sticky .navbar .navbar-btn .menu-bar:hover { color: #dc6454; } .navbar-area.navbar-transparent-2 { background: transparent; } .navbar-area.navbar-transparent-2 .navbar .navbar-toggler .toggler-icon { background-color: #fff; } .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item a { color: #121212; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item a { color: #121212; } } @media (max-width: 767px) { .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item a { color: #121212; } } .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item a::before { background-color: #dc6454; } .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item.active a, .navbar-area.navbar-transparent-2 .navbar .navbar-nav .nav-item:hover a { color: #dc6454; } .navbar-area.navbar-transparent-2 .navbar .navbar-btn .menu-bar { color: #fff; } .navbar-area.navbar-transparent-2 .navbar .navbar-btn .menu-bar:hover { color: #dc6454; } .navbar-area.navbar-transparent-2.sticky { background-color: #fff; } .navbar-area.sticky { position: fixed; /*-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);*/ /*-moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);*/ /*box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);*/ /*padding: 5px 0;*/ background: #FFFFFF; } .jumbotron{ background:#fae4dd; } .postcontent ul, .postcontent ol { margin: 0px; padding-left: 15px !important; /*list-style-type: none;*/ } .sidebar-right { position: fixed; top: 0; right: 0; background-color: #f4f6f7; height: 100%; width: 300px; padding-top: 80px; z-index: 9999; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar-content .sidebar-logo img { width: 50%; } .sidebar-right.open { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } @media (max-width: 767px) { .sidebar-right { width: 250px; } } .sidebar-right .sidebar-close { position: absolute; top: 30px; left: 30px; } .sidebar-right .sidebar-close .close { font-size: 24px; color: #121212; } .sidebar-right .sidebar-content .sidebar-menu { /* margin-top: 40px; */ } .sidebar-right .sidebar-content .sidebar-menu ul li a { font-size: 16px; line-height: 24px; /* font-weight: 700; */ padding: 11px 25px; color: #333; font-family: 'Open Sans' !important; /* text-transform: uppercase; */ position: relative; /* border-radius: 5px; */ -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; /* border-bottom: 1px solid #b1b1b1; */ display: block; } .sidebar-right .sidebar-content .sidebar-menu ul li a:hover { color: #dc6454; } .sidebar-right .sidebar-content .sidebar-social { margin-top: 30px; } .sidebar-right .sidebar-content .sidebar-social span { font-size: 16px; line-height: 24px; color: #6c6c6c; text-transform: uppercase; font-weight: 700; margin-right: 14px; } .sidebar-right .sidebar-content .sidebar-social ul li { display: inline-block; margin-right: 5px; } .sidebar-right .sidebar-content .sidebar-social ul li a { font-size: 32px; color: #dc6454; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .overlay-right { position: fixed; background-color: rgb(152 28 48 / 90%); top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 999; } .overlay-right.open { display: block; } /*===== SLIDER ONE =====*/ .slider-area { padding-top: 74px; } .slider-area .bd-example .carousel .carousel-inner { /*background-color: #dc6454;*/ overflow:visible; } .carousel-item { opacity: 0; transition: opacity .8s ease-out; transition-property: opacity; } .carousel-item.active, .carousel-item-left.carousel-item-next, .carousel-item-right.carousel-item-prev { opacity: 1; } /*.slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 535px;*/ /*}*/ .sider-img{ width:100%; height:auto; } /* 1600 750px*/ /*1440*/ /*900px*/ /*@media only screen and (min-width: 1919px) and (max-width: 2000px) {*/ /* .slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 918px;*/ /* }*/ /*}*/ /*@media only screen and (min-width: 1518px) and (max-width: 1538px) {*/ /* .slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 718px;*/ /* }*/ /*}*/ /*@media only screen and (min-width: 1441px) and (max-width: 1518px) {*/ /* .slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 720px;*/ /* }*/ /*}*/ /*@media only screen and (min-width: 1200px) and (max-width: 1440px) {*/ /* .slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 675px;*/ /* }*/ /*}*/ /*900px*/ /*@media only screen and (min-width: 992px) and (max-width: 1199px) {*/ /* .slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 535px;*/ /* }*/ /*}*/ /*@media only screen and (min-width: 992px) and (max-width: 1199px) {*/ /* .slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 535px;*/ /* }*/ /*}*/ @media only screen and (min-width: 768px) and (max-width: 991px) { /* .slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 200px;*/ /*}*/ /*.slider-area .bd-example .carousel .carousel-inner {*/ /*background-color: #dc6454;*/ /* overflow:hidden;*/ /*}*/ /*.sider-img{*/ /* height:100%;*/ /* width:auto;*/ /*}*/ } @media only screen and (min-width: 425px) and (max-width: 767px) { /* .slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 100%;*/ /* height:280px;*/ /*}*/ /*.slider-area .bd-example .carousel .carousel-inner {*/ /*background-color: #dc6454;*/ /* overflow:hidden;*/ /*}*/ /*.sider-img{*/ /* height:100%;*/ /* width:auto;*/ /*}*/ } @media (max-width: 424px) { /*.slider-area .bd-example .carousel .carousel-inner .carousel-item {*/ /*height: 100%;*/ /* height:280px;*/ /* }*/ /* .slider-area .bd-example .carousel .carousel-inner {*/ /*background-color: #dc6454;*/ /* overflow:hidden;*/ /* }*/ /*.sider-img{*/ /* height:100%;*/ /* width:auto;*/ /*}*/ } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption { top: 70%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; left: 0; } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title { font-size: 26px; font-weight: 400; margin-bottom: 15px; color: #fff; line-height: 26px; text-align: left; outline-color: #a4a4a4; } @media (max-width: 767px) { .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title { font-size: 24px; line-height: 32px; } } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li { display: inline-block; margin: 16px 8px 0; float: left; } @media (max-width: 767px) { .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li { margin: 16px 3px 0; } } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-three { border: 0; } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-one { border-color: #fff; color: #fff; } .slider-area .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-one:hover { background-color: rgba(255, 255, 255, 0.3); } .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { top: 50%; width: auto; height: auto; font-size: 70px; color: #fff; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); bottom: auto; left: 0px; opacity: 0; z-index: 99; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { left: 30px; font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { left: 30px; font-size: 50px; } } @media (max-width: 767px) { .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { left: 20px; font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-area .bd-example .carousel .carousel-control-prev, .slider-area .bd-example .carousel .carousel-control-next { font-size: 34px; } } .slider-area .bd-example .carousel .carousel-control-next { right: 0px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-area .bd-example .carousel .carousel-control-next { right: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-area .bd-example .carousel .carousel-control-next { right: 40px; } } @media (max-width: 767px) { .slider-area .bd-example .carousel .carousel-control-next { right: 20px; } } .slider-area .bd-example .carousel .carousel-indicators { margin-bottom: 20px; /*right: unset;*/ } .slider-area .bd-example { color: #fff; } .slider-area .bd-example .carousel .carousel-indicators li { width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50px; border: 0; } .slider-area .bd-example .carousel .carousel-indicators li.active { width: 16px; background-color: #fff; border-radius: 5px; } .slider-area .bd-example .carousel:hover .carousel-control-prev { left: 70px; opacity: 1; } .slider-area .bd-example .carousel:hover .carousel-control-next { right: 70px; opacity: 1; } .slider-3 { padding-top: 0px; } .slider-3 .bd-example .carousel .carousel-inner .carousel-item { height: 850px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-3 .bd-example .carousel .carousel-inner .carousel-item { height: 650px; } } @media (max-width: 767px) { .slider-3 .bd-example .carousel .carousel-inner .carousel-item { height: 550px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-3 .bd-example .carousel .carousel-inner .carousel-item { height: 650px; } } /*===== HEADER TOW =====*/ .header-hero { height: 850px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-hero { height: 700px; } } @media (max-width: 767px) { .header-hero { height: 650px; } } .header-hero::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(rgba(232, 237, 255, 0.9), rgba(239, 254, 255, 0.9) 50%, rgba(254, 255, 244, 0.3) 68%, rgba(255, 255, 255, 0.12)); background: -o-linear-gradient(rgba(232, 237, 255, 0.9), rgba(239, 254, 255, 0.9) 50%, rgba(254, 255, 244, 0.3) 68%, rgba(255, 255, 255, 0.12)); background: linear-gradient(rgba(232, 237, 255, 0.9), rgba(239, 254, 255, 0.9) 50%, rgba(254, 255, 244, 0.3) 68%, rgba(255, 255, 255, 0.12)); } .header-hero .header-content { padding-top: 195px; position: relative; z-index: 9; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-hero .header-content { padding-top: 130px; } } @media (max-width: 767px) { .header-hero .header-content { padding-top: 120px; } } .header-hero .header-content .header-title { font-size: 44px; line-height: 55px; color: #121212; font-weight: 600; } @media (max-width: 767px) { .header-hero .header-content .header-title { font-size: 30px; line-height: 40px; } } .header-hero .header-content .text { font-size: 20px; line-height: 32px; color: #6c6c6c; margin-top: 16px; } @media (max-width: 767px) { .header-hero .header-content .text { font-size: 16px; line-height: 24px; } } .header-hero .header-content .header-btn { margin-top: 22px; } .header-hero .header-content .header-btn li { display: inline-block; margin: 10px 10px 0; } .header-hero .header-content .header-btn li a.main-btn { border-radius: 50px; overflow: hidden; background-color: #fff; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border: 0; line-height: 50px; } .header-hero .header-content .header-btn li a.main-btn i { margin-left: 18px; } .header-hero .header-content .header-btn li a.main-btn.btn-two:hover { -webkit-box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); color: #dc6454; } .header-hero .header-shape { position: absolute; bottom: 0; left: -6px; width: 102%; } .header-hero .header-shape img { width: 100%; } /*=========================== 4.ABOUT css ===========================*/ .about-area { position: relative; background-color: #f4f6f7; padding-bottom: 50px; } .about-area .section-title .title { font-size: 44px; font-weight: 600; line-height: 55px; color: #121212; } @media (max-width: 767px) { .about-area .section-title .title { font-size: 22px; line-height: 32px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-area .section-title .title { font-size: 25px; line-height: 38px; } } .about-area .section-title .text { font-size: 20px; line-height: 25px; color: #121212; margin-top: 8px; } @media (max-width: 767px) { .about-area .section-title .text { font-size: 16px; } } .single-about .about-icon img { width: 120px; } @media (max-width: 767px) { .single-about .about-icon img { width: 100px; } } .single-about .about-content { padding-left: 30px; } @media (max-width: 767px) { .single-about .about-content { padding-left: 0; padding-top: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-about .about-content { padding-left: 30px; padding-top: 0; } } .single-about .about-content .about-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; } .single-about .about-content .text { font-size: 16px; color: #121212; margin-top: 16px; } /*===== ABOUT 2 =====*/ .about-area-2 { position: relative; padding-top: 120px; padding-bottom: 120px; } .about-area-2 .about-image { position: absolute; width: 40%; height: 100%; top: 0; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-2 .about-image { width: 34%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area-2 .about-image { position: relative; width: 720px; margin: 0 auto; } } @media (max-width: 767px) { .about-area-2 .about-image { position: relative; width: 100%; padding-left: 15px; padding-right: 16px; margin: 0 auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-area-2 .about-image { position: relative; width: 540px; margin: 0 auto; } } .about-area-2 .about-image .image { max-width: 580px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area-2 .about-image .image { margin: 0 auto; padding-top: 50px; } } @media (max-width: 767px) { .about-area-2 .about-image .image { margin: 0 auto; padding-top: 50px; } } .about-area-2 .about-image .image img { width: 100%; } .about-content-2 { position: relative; z-index: 9; } .about-content-2 .about-icon i { font-size: 64px; color: #dc6454; } .about-content-2 .about-content { padding-left: 15px; } @media (max-width: 767px) { .about-content-2 .about-content { padding-left: 0; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-content-2 .about-content { padding-left: 15px; padding-top: 0; } } .about-content-2 .about-content .about-title { font-size: 24px; font-weight: 500; line-height: 30px; color: #121212; } .about-content-2 .about-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 8px; } /*===== ABOUT 3 =====*/ .about-area-3 { background-color: #f4f6f7; padding-top: 50px; padding-bottom: 100px; } .about-area-3 .image { width: 100%; } .about-area-3 .about-content .sub-title { color: #121212; font-size: 24px; line-height: 30px; font-weight: 700; text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-3 .about-content .sub-title { font-size: 20px; } } @media (max-width: 767px) { .about-area-3 .about-content .sub-title { font-size: 20px; } } .about-area-3 .about-content .about-title { font-size: 44px; font-weight: 500; line-height: 55px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-3 .about-content .about-title { font-size: 38px; line-height: 45px; } } @media (max-width: 767px) { .about-area-3 .about-content .about-title { font-size: 32px; line-height: 35px; } } .about-area-3 .about-content .text { color: #6c6c6c; font-size: 20px; font-weight: 500; margin-top: 16px; line-height: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area-3 .about-content .text { font-size: 18px; } } @media (max-width: 767px) { .about-area-3 .about-content .text { font-size: 16px; line-height: 24px; } } .about-area-3.about-area-bg-3 { background-color: #fff; } /*=========================== 19.portfolio css ===========================*/ .portfolio-area { padding-top: 90px; padding-bottom: 100px; } .portfolio-menu ul li { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; display: inline-block; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; margin: 0 2px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-menu ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .portfolio-menu ul li { font-size: 14px; padding: 0 22px; line-height: 42px; } } .portfolio-menu ul li::before { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 4px; background: -webkit-linear-gradient(left, #43cae9 0%, #dc6454 100%); background: -o-linear-gradient(left, #43cae9 0%, #dc6454 100%); background: linear-gradient(to right, #43cae9 0%, #dc6454 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 4px; } .portfolio-menu ul li:hover, .portfolio-menu ul li.active { color: #dc6454; } .portfolio-menu ul li:hover::before, .portfolio-menu ul li.active::before { opacity: 1; } .single-portfolio .portfolio-image { position: relative; overflow: hidden; border-radius: 8px; } .single-portfolio .portfolio-image img { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-portfolio .portfolio-image .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; background-color: rgba(0, 0, 0, 0.8); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); border-radius: 8px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content { padding: 16px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon { position: relative; display: inline-block; margin: 0 20px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 48px; color: #dc6454; position: relative; z-index: 5; line-height: 50px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape { position: absolute; top: 7px; left: 0; } .single-portfolio .portfolio-text { padding-top: 16px; } .single-portfolio .portfolio-text .portfolio-title a { color: #121212; font-size: 24px; line-height: 30px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-portfolio .portfolio-text .portfolio-title a { font-size: 20px; } } @media (max-width: 767px) { .single-portfolio .portfolio-text .portfolio-title a { font-size: 20px; } } .single-portfolio .portfolio-text .portfolio-title a:hover { color: #dc6454; } .single-portfolio .portfolio-text .text { color: #121212; font-size: 14px; line-height: 20px; margin-top: 8px; } .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } .portfolio-2 { background-color: #f4f6f7; } /*=========================== 25.SERVICES css ===========================*/ .services-area { background-color: #f4f6f7; padding-top: 115px; padding-bottom: 120px; } .single-services { background-color: #fff; padding: 50px 30px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-services .services-icon i { font-size: 34px; color: #dc6454; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-services .services-content .services-title a { font-size: 18px; color: #121212; margin-top: 25px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-services .services-content .text { margin-top: 15px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-services:hover { background-color: #dc6454; -webkit-box-shadow: 0px 5px 30px 0px rgba(254, 81, 150, 0.3); -moz-box-shadow: 0px 5px 30px 0px rgba(254, 81, 150, 0.3); box-shadow: 0px 5px 30px 0px rgba(254, 81, 150, 0.3); } .single-services:hover .services-icon i { color: #fff; } .single-services:hover .services-content .services-title a { color: #fff; } .single-services:hover .services-content .text { color: #fff; } /*=========================== 16.PRICING css ===========================*/ .pricing-area { background-color: #f4f6f7; padding-top: 90px; padding-bottom: 100px; } .pricing-2 { background-color: #fff; } .pricing-style-one { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 38px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-one .pricing-icon img { width: 200px; } .pricing-style-one .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; position: relative; margin-top: 24px; } .pricing-style-one .pricing-header .month { font-size: 20px; font-weight: 300; line-height: 25px; color: #6c6c6c; margin-top: 3px; } .pricing-style-one .pricing-header .month .price { font-size: 36px; font-weight: 600; line-height: 45px; color: #121212; margin-top: 8px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-one .pricing-header .month .price { font-size: 24px; margin-top: 32px; line-height: 30px; } } .pricing-style-one .pricing-list { margin-top: 24px; } .pricing-style-one .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-one .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-one .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-one .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-one .pricing-list ul li i { color: #dc6454; margin-right: 8px; } .pricing-style-one .pricing-btn { margin-top: 31px; } .pricing-style-two { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px; border-radius: 8px; position: relative; overflow: hidden; background-color: #fff; } .pricing-style-two .pricing-icon img { width: 112px; } .pricing-style-two .pricing-header { margin-top: 24px; } .pricing-style-two .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; } .pricing-style-two .pricing-header .price { display: block; font-size: 64px; font-weight: 600; line-height: 80px; color: #121212; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-two .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media (max-width: 767px) { .pricing-style-two .pricing-header .price { font-size: 50px; margin-top: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-two .pricing-header .price { font-size: 64px; margin-top: 32px; } } .pricing-style-two .pricing-header .year { font-size: 20px; font-weight: 500; line-height: 25px; color: #6c6c6c; margin-top: -10px; } .pricing-style-two .pricing-list { margin-top: 33px; } .pricing-style-two .pricing-list ul li { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style-two .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style-two .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style-two .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style-two .pricing-list ul li i { color: #dc6454; margin-right: 8px; } .pricing-style-two .pricing-btn { margin-top: 26px; } /*=========================== 25.ERROR css ===========================*/ .call-action-area { padding-top: 50px; padding-bottom: 100px; } .call-action-area .call-action-content .action-title { font-size: 32px; font-weight: 600; line-height: 40px; color: #121212; } @media (max-width: 767px) { .call-action-area .call-action-content .action-title { font-size: 24px; line-height: 35px; } } .call-action-area .call-action-content .text { font-size: 16px; color: #121212; line-height: 27px; margin-top: 16px; } .call-action-area .call-action-form { position: relative; } .call-action-area .call-action-form input { width: 100%; height: 60px; border: 1px solid #cbced1; background: none; padding: 0 25px; border-radius: 50px; } @media (max-width: 767px) { .call-action-area .call-action-form input { height: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-area .call-action-form input { height: 60px; } } .call-action-area .call-action-form input::placeholder { opacity: 1; color: #a4a4a4; } .call-action-area .call-action-form input::-moz-placeholder { opacity: 1; color: #a4a4a4; } .call-action-area .call-action-form input::-moz-placeholder { opacity: 1; color: #a4a4a4; } .call-action-area .call-action-form input::-webkit-input-placeholder { opacity: 1; color: #a4a4a4; } .call-action-area .call-action-form input:focus { border-color: #dc6454; } .call-action-area .call-action-form .action-btn { position: absolute; top: 5px; right: 5px; } @media (max-width: 767px) { .call-action-area .call-action-form .action-btn .main-btn { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-area .call-action-form .action-btn .main-btn { width: auto; } } @media (max-width: 767px) { .call-action-area .call-action-form .action-btn { position: relative; top: 0; right: 0; margin-top: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .call-action-area .call-action-form .action-btn { position: absolute; top: 8px; right: 8px; margin-top: 0; } } .call-action-2 { background-color: #f4f6f7; } .call-action-3 { background: -webkit-linear-gradient(left, #43cae9 0%, #dc6454 50%, #43cae9 100%); background: -o-linear-gradient(left, #43cae9 0%, #dc6454 50%, #43cae9 100%); background: linear-gradient(to right, #43cae9 0%, #dc6454 50%, #43cae9 100%); } .call-action-3 .call-action-content .action-title { color: #fff; } .call-action-3 .call-action-content .text { color: #fff; } .call-action-3 .call-action-form input { color: #fff; border-color: #fff; } .call-action-3 .call-action-form input::placeholder { opacity: 1; color: #fff; } .call-action-3 .call-action-form input::-moz-placeholder { opacity: 1; color: #fff; } .call-action-3 .call-action-form input::-moz-placeholder { opacity: 1; color: #fff; } .call-action-3 .call-action-form input::-webkit-input-placeholder { opacity: 1; color: #fff; } .call-action-3 .call-action-form input:focus { border-color: #fff; } .call-action-3 .call-action-form .action-btn .main-btn { background-color: #fff; color: #dc6454; border-color: #fff; } .call-action-3 .call-action-form .action-btn .main-btn:hover { background-color: rgba(255, 255, 255, 0.3); color: #fff; } /*=========================== 28.ERROR css ===========================*/ .testimonial-area { padding-top: 100px; padding-bottom: 70px; background-color: #f4f6f7; } .testimonial-2 { background-color: #fff; } .single-testimonial { background-color: #fff; padding: 30px; -webkit-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); } .single-testimonial .testimonial-image img { width: 90px; border-radius: 50%; display: inline-block; } .single-testimonial .testimonial-content { padding-top: 25px; } .single-testimonial .testimonial-content .text { font-size: 16px; line-height: 24px; color: #121212; border-bottom: 1px solid #cbced1; padding-bottom: 24px; } .single-testimonial .testimonial-content .author-name { font-size: 18px; font-weight: 600; color: #121212; margin-top: 24px; } .single-testimonial .testimonial-content .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .testimonial-active-2 .slick-dots, .testimonial-active .slick-dots { text-align: center; } .testimonial-active-2 .slick-dots li, .testimonial-active .slick-dots li { display: inline-block; margin: 0 3px; } .testimonial-active-2 .slick-dots li button, .testimonial-active .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .testimonial-active-2 .slick-dots li.slick-active button, .testimonial-active .slick-dots li.slick-active button { background-color: #dc6454; } .single-testimonial-4 { border: 2px solid #cbced1; padding: 25px 30px; border-radius: 8px; background-color: #fff; } .single-testimonial-4 .testimonial-author .author-image img { width: 80px; border-radius: 50%; } .single-testimonial-4 .testimonial-author .author-name { padding-left: 20px; } @media (max-width: 767px) { .single-testimonial-4 .testimonial-author .author-name { padding-left: 0; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-testimonial-4 .testimonial-author .author-name { padding-left: 20px; padding-top: 0; } } .single-testimonial-4 .testimonial-author .author-name .name { font-size: 18px; font-weight: 600; line-height: 24px; color: #121212; } .single-testimonial-4 .testimonial-author .author-name .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .single-testimonial-4 .testimonial-text { margin-top: 25px; } .single-testimonial-4 .testimonial-text .text { font-size: 14px; line-height: 24px; color: #121212; } .testimonial-active-4 .slick-dots { text-align: center; margin-top: 25px; } .testimonial-active-4 .slick-dots li { display: inline-block; margin: 0 3px; } .testimonial-active-4 .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .testimonial-active-4 .slick-dots li.slick-active button { background-color: #dc6454; } /* Promotion */ .promotion-area { padding-top: 50px; padding-bottom: 50px; /* background-color: #f4f6f7; */ } .promotion-2 { background-color: #fff; } .single-promotion { background-color: #fff; padding: 30px; -webkit-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1); } .single-promotion .promotion-image img { width: 90px; border-radius: 50%; display: inline-block; } .single-promotion .promotion-content { padding-top: 25px; } .single-promotion .promotion-content .text { font-size: 16px; line-height: 24px; color: #121212; border-bottom: 1px solid #cbced1; padding-bottom: 24px; } .single-promotion .promotion-content .author-name { font-size: 18px; font-weight: 600; color: #121212; margin-top: 24px; } .single-promotion .promotion-content .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .promotion-active-2 .slick-dots, .promotion-active .slick-dots { text-align: center; } .promotion-active-2 .slick-dots li, .promotion-active .slick-dots li { display: inline-block; margin: 0 3px; } .promotion-active-2 .slick-dots li button, .promotion-active .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .promotion-active-2 .slick-dots li.slick-active button, .promotion-active .slick-dots li.slick-active button { background-color: #dc6454; } .single-promotion-4 { border: 2px solid #cbced1; padding: 25px 30px; border-radius: 8px; background-color: #fff; } .single-promotion-4 .promotion-author .author-image img { width: 80px; border-radius: 50%; } .single-promotion-4 .promotion-author .author-name { padding-left: 20px; } @media (max-width: 767px) { .single-promotion-4 .promotion-author .author-name { padding-left: 0; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-promotion-4 .promotion-author .author-name { padding-left: 20px; padding-top: 0; } } .single-promotion-4 .promotion-author .author-name .name { font-size: 18px; font-weight: 600; line-height: 24px; color: #121212; } .single-promotion-4 .promotion-author .author-name .sub-title { font-size: 14px; line-height: 24px; color: #a4a4a4; } .single-promotion-4 .promotion-text { margin-top: 25px; } .single-promotion-4 .promotion-text .text { font-size: 14px; line-height: 24px; color: #121212; } .promotion-active-4 .slick-dots { text-align: center; margin-top: 25px; } .promotion-active-4 .slick-dots li { display: inline-block; margin: 0 3px; } .promotion-active-4 .slick-dots li button { font-size: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #cbced1; border: 0; cursor: pointer; } .promotion-active-4 .slick-dots li.slick-active button { background-color: #dc6454; } .promotion-carousel .box-image img { /* border-radius: 10px 10px 0 0; */ width: 100%; height: 250px; object-fit: cover; object-position: center; } /*=========================== 25.CLIENT css ===========================*/ /*===== Client Logo Two =====*/ .client-logo-area { padding-top: 80px; padding-bottom: 80px; } .client-logo-2 { background-color: #f4f6f7; } /*=========================== 21.BLOG css ===========================*/ .blog-area { padding-top: 115px; padding-bottom: 120px; } .single-blog .blog-image img { width: 100%; border-radius: 8px; } .single-blog .blog-content { padding-top: 16px; } .single-blog .blog-content .blog-title a { font-size: 20px; font-weight: 600; line-height: 25px; color: #121212; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-blog .blog-content .blog-title a { font-size: 18px; } } @media (max-width: 767px) { .single-blog .blog-content .blog-title a { font-size: 20px; } } .single-blog .blog-content .blog-title a:hover { color: #dc6454; } .single-blog .blog-content span { font-size: 14px; line-height: 20px; color: #6c6c6c; margin-top: 8px; margin-right: 10px; } .single-blog .blog-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .single-blog .blog-content .more { text-transform: uppercase; font-size: 16px; font-weight: 700; color: #dc6454; margin-top: 29px; } /*=========================== 20.CONTACT css ===========================*/ .contact-area { padding-top: 95px; padding-bottom: 100px; background-color: #f4f6f7; } .form-message.error, .form-message.success { font-size: 16px; color: #121212; padding: 10px 15px; margin-top: 15px; background-color: #e9ecef; } .form-message.error { color: #fc3832; } .single-contact-box { background-color: #fff; border-radius: 8px; padding: 24px 35px; height: 255px; } @media (max-width: 767px) { .single-contact-box { padding: 24px 20px; } } .single-contact-box .box-icon { position: relative; display: inline-block; } .single-contact-box .box-icon i { font-size: 88px; position: relative; z-index: 5; color: #dc6454; } .single-contact-box .box-icon .shape { position: absolute; top: 0; left: 0; } .single-contact-box .box-content { margin-top: 24px; } .single-contact-box .box-content .box-title { font-size: 25px; line-height: 35px; color: #121212; } .single-contact-box .box-content .text { font-size: 14px; line-height: 20px; color: #121212; margin-top: 16px; } .contact-two .contact-title { font-size: 24px; font-weight: 600; color: #121212; } .contact-two .text { font-size: 16px; line-height: 24px; margin-top: 16px; color: #6c6c6c; } .contact-two .contact-info { margin-top: 40px; } .contact-two .contact-info li { color: #6c6c6c; margin-top: 8px; font-size: 16px; } .contact-two .contact-info li i { margin-right: 5px; color: #121212; } .contact-map .gmap_canvas iframe { width: 100%; height: 400px; } .form-group { margin-bottom: 0; } .form-input label { font-size: 12px; line-height: 18px; color: #6c6c6c; margin-bottom: 8px; display: inline-block; } .form-input .input-items { position: relative; } .form-input .input-items input, .form-input .input-items textarea { width: 100%; height: 44px; border: 2px solid #a4a4a4; padding-left: 44px; padding-right: 12px; position: relative; font-size: 16px; color: #6c6c6c; } .form-input .input-items input:focus, .form-input .input-items textarea:focus { border-color: #dc6454; } .form-input .input-items input::placeholder, .form-input .input-items textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items input::-moz-placeholder, .form-input .input-items textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items input::-moz-placeholder, .form-input .input-items textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items input::-webkit-input-placeholder, .form-input .input-items textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items textarea { padding-top: 8px; height: 130px; resize: none; } .form-input .input-items i { position: absolute; top: 11px; left: 13px; font-size: 20px; z-index: 9; color: #6c6c6c; } /*=========================== 22.HEADER css ===========================*/ .footer-area { background-color: #f4f6f7; } .footer-area .footer-widget { padding-top: 35px; padding-bottom: 35px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .footer-widget { padding-top: 70px; padding-bottom: 100px; } } @media (max-width: 767px) { .footer-area .footer-widget { padding-top: 50px; padding-bottom: 80px; } } .footer-area .footer-widget .footer-title { font-size: 14px; font-weight: 700; line-height: 18px; color: #6c6c6c; } .footer-area .footer-widget .footer-link { margin-top: 32px; } .footer-area .footer-widget .footer-link ul { margin-top: 8px; } .footer-area .footer-widget .footer-link ul li a, .about-area .footer-widget { font-size: 16px; line-height: 24px; color: #121212; margin-top: 16px; font-weight: 500; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-area .footer-widget ul, .footer-area .footer-widget ol{ list-style: none; } .footer-area .footer-widget ul li a { font-size: 15px; line-height: 15px; color: #121212; margin-top: 14px; font-weight: 400; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-area .footer-widget ul li a:hover { color:#dc6454; } .footer-area .footer-widget .footer-link ul li a:hover { color: #dc6454; } .footer-area .footer-copyright { padding-top: 13px; padding-bottom: 23px; } .footer-area .footer-copyright .copyright .text { color: #121212; font-size:14px; } .footer-area .footer-copyright .social li { display: inline-block; margin-right: 10px; } .footer-area .footer-copyright .social li:last-child { margin-right: 0; } .footer-area .footer-copyright .social li a { font-size: 24px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-area .footer-copyright .social li a:hover { color: #dc6454; } .footer-area.footer-dark { background-color: #121212; } .footer-area.footer-dark .footer-widget .footer-title { color: #fff; } .footer-area.footer-dark .footer-widget .footer-link ul li a { color: #fff; } .footer-area.footer-dark .footer-widget .footer-link ul li a:hover { color: #dc6454; } .footer-area.footer-dark .footer-copyright .copyright .text { color: #fff; } .footer-area.footer-dark .footer-copyright .social li a { color: #fff; } .footer-area.footer-dark .footer-copyright .social li a:hover { color: #dc6454; } /*===== BACK TO TOP =====*/ .back-to-top { font-size: 20px; color: #fff; position: fixed; left: 20px; bottom: 20px; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; background-color: #dc6454; text-align: center; z-index: 99; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: none; } .back-to-top:hover { color: #ffffff; background-color: #dc6454; } /*# sourceMappingURL=style.css.map */ .card-wrapper { position: relative; overflow: hidden; } .card-wrapper:after { content: ''; display: block; /* padding-top: 100%; */ } .card-wrapper img { width: auto; height: 100%; max-width: none; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .product-carousel .box-image img { /* height: 150px; */ } .product-carousel .box-image img { /* border-radius: 10px 10px 0 0; */ width: 100%; height: 150px; object-fit: cover; object-position: center; } .product-carousel a:hover .card-title { color: #dc6454; } .carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .6s ease-in-out; transition: transform .6s ease-in-out; transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out; } .card { margin-right: -7px !important; margin-left: -7px !important; border-radius: 10px; border: 1px solid #eceef2; } .card-img-top, .box-image { width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; /* border-radius: calc(1rem - 1px); */ } /* Loan Calculator */ .calculator-loan { border: 1px solid #e9ecef; border-radius: 10px; overflow: hidden; margin-bottom:20px; width: 100%; } .calculator-loan .form label { /* width: 160px !important; */ display: block; padding:4px; } .calculator-loan .form { background-color: #fff; width: 50%; } .thirty { float: left; padding: 20px; min-height: 300px; min-width: 300px; width: 50%; } .spthirty { display: flex; justify-content: center; align-items: center; text-align: center; background:#dc6454; height: 100%; } .thirty .results { display: flex; justify-content: center; align-items: center; text-align: center; height:100%; } .thirty .results p,.thirty .sp-result p { color: #fff; font-size: 140%; line-height: 1.5em; } .thirty .results label { color: #fff; font-size: 140%; line-height: 1.5em; } .results span { font-size: 180%; margin-top: 20px; } .calculator-loan .form input[type="text"] { box-sizing: border-box; width: 100%; font-size: 140%; font-family: 'Open Sans' , 'kantumruy' , sans-serif; font-weight: 200; padding: 10px 15px; border-width: 0px; border: 1px solid #cbced1; } .calculator-loan .form input { -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; color: -internal-light-dark(black, white); letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; appearance: auto; background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); -webkit-rtl-ordering: logical; cursor: text; margin: 0em; font: 400 13.3333px Arial; padding: 1px 2px; border-width: 2px; border-style: inset; border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); border-image: initial; } @media screen and (max-width: 600px) { .calculator-loan .form { /* background-color: #fff; */ width: 100% !important; } .thirty{ width: 100% !important; } } /* Popup */ .sppopup {} .sppopup .modal-content { /* border: none !important; background: none !important; */ padding: 20px; } .sppopup .modal-content .carousel-control-next, .sppopup .modal-content .carousel-control-prev { top: unset; margin-bottom: 10px; width: 20px; height: 20px; border-radius: 30px; background: #007bff; } .sppopup .modal-content .carousel-control-next-icon, .sppopup .modal-content .carousel-control-prev-icon { width: 13px; /* height: 15px; */ } .sppopup .modal-content .carousel-control-prev { right: 0; margin-right: 30px; left: unset; } .sppopup .modal-content .carousel-control-next { right: 5px; } #sppopup { background: #12121296; } .sppopup button.close { z-index: 9999; position: absolute; right: 0; padding: 8px; top: -7px; color: #343a40; font-size: 17px; } .spcontact .card { flex-direction: row; } .spcontact .card img { width: 30%; } .here-help { height: 170px; /* padding-right: 50px; */ border: 1px solid #d2d2d287; box-shadow: 0 0 10px #ececec; padding-top: 30px; padding-left: 30px; color: #525252; } .here-help p{ /*font-size: 16px;*/ font-weight: 400; /*line-height: 24px;*/ } .here-help:hover { background-color: #dc6454; color: #fff; } .here-help:hover a { /* background-color: #0067f4; */ color: #fff; } .here-help a { width: 100%; } @media only screen and (min-width: 576px) and (max-width: 990px) { .here-help { height: 170px; /* padding-right: 50px; */ border: 1px solid #d2d2d287; box-shadow: 0 0 10px #ececec; padding-top: 30px; padding-left: 8px; color: #525252; } .here-help img{ display:none; } } @media (max-width: 570px) { .here-help { height: 138px; } .here-help img{ margin: 0px 10px !important; } .help-title{ padding-top:6px; } } .wpcf7 label { display: block; width: 100%; } .wpcf7 input, .wpcf7 select, .wpcf7 textarea { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem; line-height: 1.25; color: #464a4c; background-color: #fff; background-image: none; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; } .wpcf7 textarea::-ms-expand, .wpcf7 input::-ms-expand { background-color: transparent; border: 0; } .wpcf7 select:focus, .wpcf7 textarea:focus, .wpcf7 input:focus { color: #464a4c; background-color: #fff; border-color: #5cb3fd; outline: none; } .wpcf7 textarea::-webkit-input-placeholder, .wpcf7 input::-webkit-input-placeholder { color: #636c72; opacity: 1; } .wpcf7 textarea::-moz-placeholder, .wpcf7 input::-moz-placeholder { color: #636c72; opacity: 1; } .wpcf7 textarea:-ms-input-placeholder, .wpcf7 input:-ms-input-placeholder { color: #636c72; opacity: 1; } .wpcf7 textarea::placeholder, .wpcf7 input::placeholder { color: #636c72; opacity: 1; } .wpcf7 textarea:disabled, .wpcf7 textarea[readonly], .wpcf7 input:disabled, .wpcf7 input[readonly] { background-color: #eceeef; opacity: 1; } .wpcf7 textarea:disabled, .wpcf7 input:disabled { cursor: not-allowed; } select.wpcf7 textarea:not([size]):not([multiple]), select.wpcf7 input:not([size]):not([multiple]) { height: calc(2.25rem + 2px); } select.wpcf7 textarea:focus::-ms-value, select.wpcf7 input:focus::-ms-value { color: #464a4c; background-color: #fff; } .wpcf7 input[type="submit"] { cursor: pointer !important; /* margin-top: 20px; */ display: inline-block; font-weight: normal; line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; display: block; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: 0.5rem 1rem; font-size: 1rem; border-radius: 50px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; color: #ffffff; background-color: #dc6454; border-color: #dc6454; } .wpcf7 input[type="submit"]:focus, .wpcf7 input[type="submit"]:hover { text-decoration: none; } .wpcf7 input[type="submit"]:focus, .wpcf7 input[type="submit"].focus { outline: 0; -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25); box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25); } .wpcf7 input[type="submit"].disabled, .wpcf7 input[type="submit"]:disabled { cursor: not-allowed; opacity: .65; } .wpcf7 input[type="submit"]:active, .wpcf7 input[type="submit"].active { background-image: none; } .wpcf7 input[type="file"] { border: 0 !important; } .wpcf7 input[type="checkbox"] { display: inline; width: auto; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } .wpcf7-submit { width: 200px !important; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Kantumruy Pro' , sans-serif; font-weight: 700; /* color: #0c1a38; */ margin: 0 0 20px; } .spicon-bike { mask: url(../images/icon-bike-black.svg); } .icon-bell { mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg); } .icon-arrow { mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-arrow-black.svg); } .nav-link[data-toggle].collapsed:after { content: "â–¾"; } .nav-link[data-toggle]:not(.collapsed):after { content: "â–´"; } .lang-kh{ font-family:'Kantumruy Pro' !important; } .sidebar-header { padding: 80px 20px 40px; background: -webkit-linear-gradient( top, rgba(44, 48, 47, 1) 16%, rgba(44, 48, 47, 1) 16%, rgba(0, 0, 0, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient( to bottom, rgba(44, 48, 47, 1) 16%, rgba(44, 48, 47, 1) 16%, rgba(0, 0, 0, 1) 100%); color: #fff; } .navigation { width: 300px; } .header-navigation{ } /* reset our lists to remove bullet points and padding */ .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } /* make ALL links (main and submenu) have padding and background color */ .mainmenu a { display: block; /* background-color: #C5C5C5; */ text-decoration: none; padding: 10px; color: #000; } /* add hover behaviour */ .mainmenu a:hover { background-color: #C5C5C5; } /* when hovering over a .mainmenu item, display the submenu inside it. we're changing the submenu's max-height from 0 to 200px; */ .mainmenu li:hover .submenu { display: block; max-height: 200px; } /* we now overwrite the background-color for .submenu links only. CSS reads down the page, so code at the bottom will overwrite the code at the top. */ .submenu a { /* background-color: #999; */ padding-left: 40px !important; } /* hover behaviour for links inside .submenu */ .submenu a:hover { background-color: #C5C5C5; } /* this is the initial state of all submenus. we set it to max-height: 0, and hide the overflowed content. */ .submenu { overflow: hidden; max-height: 0; -webkit-transition: all 0.5s ease-out; } .content-wrap { padding: 20px 0px; } .sphr-line { border-top: 0px; } /* News */ .news .title{ font-size: 18px; /*line-height: 34px;*/ /*margin-bottom: 10px;*/ } .news .title .small{ margin-bottom: 10px; font-size:13px; padding-bottom: 15px; border-bottom: 1px solid #eeeeee; /*margin-top: 10px;*/ } #posts_list .list-item { margin-bottom: 15px; } .list-items .list-item { padding: 0; } @media (max-width: 767px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 0px !important; top: 0px; } } .aspect-16to9 { /* height: auto; */ height: 200px; width: 100%; object-fit: cover; object-position: center; } .p-16to9 { position: relative; /* padding-bottom: 56%; */ overflow: hidden; } .spimg { width: 100%; height: 200px; object-fit: cover; object-position: center; } .product-carousel .splist { margin-right: 15px; border: solid 1px #eceef2; border-radius: 10px; padding: 0 15px; } .splist { overflow: hidden; } .product-carousel .splist .spbox-image { margin-right: -15px; margin-left: -15px; } .product-carousel .box-title { display: -webkit-box; font-size: 18px; line-clamp: 1; padding: 0px 10px; -webkit-line-clamp: 1; overflow: hidden; box-orient: vertical; -webkit-box-orient: vertical; /*height: 20px;*/ margin-bottom: 10px; } .product-carousel h4 { margin: 20px 0; } /*promotion-carousel*/ .promotion-carousel .splist { margin-right: 15px; border: solid 1px #eceef2; border-radius: 10px; padding: 0 15px; } .splist { overflow: hidden; } .promotion-carousel .splist .spbox-image,.promotion .splist .spbox-image { margin-right: -15px; margin-left: -15px; } .promotion-carousel .box-title, .promotion .box-title { display: -webkit-box; font-size: 18px; line-clamp: 1; padding: 0px 10px; -webkit-line-clamp: 1; /*overflow: hidden;*/ box-orient: vertical; -webkit-box-orient: vertical; height: 20px; /*margin-bottom: 10px;*/ } .card-body h4.box-title{ font-size: 18px; padding-bottom: 0; margin: 8px; } .promotion-carousel h4,.promotion h4 { margin: 20px 0; } .card-img-top, .spbox-image { /*width: 100%; */ border-top-left-radius: 10px; border-top-right-radius: 10px; /* border-radius: calc(1rem - 1px); */ } .left { float: left; } .right { float: right; } .my-row { margin-left: -15px; } .promotion-title, .product-title { padding-top: 50px; display: inline-block; } @media (max-width:767px) { .promotion-title, .product-title { padding-top: 15px; padding-bottom: 10px; display: inline-block; } .product-carousel .owl-controls { display:none; } .promotion-title h3, .product-title h3,h3 { margin:0px; font-size: 20px; } .content-wrap{ /*padding:0px;*/ } p { font-size: .75rem; line-height: 18px; } .postcontent ul, .postcontent ol { padding-left: 15px !important; } } .product-link, .promotion-link { font-weight: 400; color: #444444; } .product-link.pull-right:after, .promotion-link.pull-right:after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-left: 15px; color: #444; } /*News*/ .box { position: relative; /* width: 100%; */ height: 150px; width: 250px; } .box .ele { position: absolute; top: 0; left: 0; bottom: 0; right: 0; /*background-color: #161616;*/ background-position: center center; background-repeat: no-repeat; background-size: calc(100% + 10px) auto } .box:before { padding-top: 100% } .item:hover .box .ele { background-size: 100% auto; transition: all .2s ease; box-shadow: inset 0 0 10px 0 #000 } .ratio2_1:before { padding-top: 50% } .ratio1_2:before { padding-top: 200% } .ratio4_3:before { padding-top: 75% } .ratio16_9:before { padding-top: 56.25% } .list-items .list-item { padding: 0 } .list-items .list-item .tumbnail { padding-right: 0 } .list-items .list-item .tumbnail .box { width:100%; } @media (max-width: 600px) { .list-items .list-item .tumbnail .box { width:100%; height:320px; } } .grid .list-items { padding: 0 5px } .grid .list-items .list-item { position: relative; overflow: hidden; min-height: 180px } .grid .list-items .list-item a { position: absolute; width: calc(100% - 20px); top: 0; left: 10px; bottom: 0; right: 0; overflow: hidden } .grid .list-items .list-item:before { padding-top: calc(80% + 10px) } .category-tab-content { position: relative; padding: 0 } #posts_list { padding: 25px } .grid .list-items .list-item .content, .grid .list-items .list-item .tumbnail { padding-left: 0 } @media(min-width:991px) { .list .list-item .tumbnail { /*padding-right: 15px!important;*/ margin-bottom: 10px } } @media (max-width: 600px) { .banner-section.height_long{ height:400px !important; } .list .list-item .tumbnail { padding-right: 15px!important; /*margin-bottom: 10px*/ } .grid .list-items { /*padding: 0 15px*/ } .grid .list-items .list-item a { /*width: calc(100% - 10px);*/ /*left: 5px*/ } .grid .list-items .list-item:before { /*padding-top: calc(80% + 30px)*/ } .mean-category-posts { /*padding: 0 15px*/ } #posts_list { padding: 15px; } .list-items>.list-item>a>.tumbnail { /*padding: 20px*/ } .list-items>.list-item>a>.content { /*padding-left: 20px;*/ /* padding-right:20px;*/ } } #clockdiv { color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; position: absolute; top: 160px; right: 106px } #clockdiv>div { padding: 0; display: inline-block; color: #333 } #clockdiv div>span { text-align: center; width: 82px; height: 90px; padding-top: 25px; background-image: url(../img/errors/clock.gif); background-size: 100% 100%; display: inline-block } .smalltext { padding-top: 5px; font-size: 20px; color: #999 } .no-padding { padding: 0 } .sections-content { padding: 10px 44px 30px } #posts_list { position: relative } #posts_list .list-item { margin-bottom: 15px } #posts_list .list-item .content, #posts_list .list-item .img-cover { display: table-cell; vertical-align: top } #posts_list .list-item .img-cover { padding-right: 10px; padding-top: 6px } #posts_list.list .list-item .img-cover .img { width: 250px; height: 131px } #posts_list .content .title, .mean-category-posts .item .title { font-size: 16px; color: #333; font-weight: 700; line-height: 26px; padding-bottom: 0; margin-bottom: 10px; border-bottom: 1px solid #eee } .mean-category-posts { margin-bottom: 30px } .mean-category-posts .item .title { border: 0; margin-top: 10px } #posts_list .content .title .small { font-weight: 400 } #posts_list .content .detail { color: #555 } #posts_list.grid .list-item { display: inline; margin-bottom: 5px; overflow: hidden } #posts_list.grid .list-item .content, #posts_list.grid .list-item .img-cover { display: block; vertical-align: top } #loading i, #posts_list.grid .content .detail, #posts_list.grid .content .small { display: none } #posts_list.grid .content .title, #posts_list.grid .mean-category-posts .item { border: 0; font-size: 14px; line-height: 24px } #posts_list.grid .content .title { margin-top: 5px } .right-small-post .img-cover { width: 50px; height: 50px; background-color: #eee; background-size: auto 100% } .single-right-content>.posts_item { margin-top: 30px; margin-bottom: 40px } .news-items>.title, .single-right-content>.posts_item .title { font-size: 20px; position: relative; padding-bottom: 10px } .news-items>.title>.border, .single-right-content>.posts_item .title>.border { position: absolute; width: 55px; height: 3px; background-color: #E4242C; left: 0; bottom: 0 } .news-items>.title { margin-top: 40px; margin-bottom: 5px; } .single-right-content .media-body a { font-weight: 700; color: #444; } .news-items a>.title { margin-top: 5px } .post_tags>.title { font-size: 16px; font-weight: 700; } .post_tags a.tag { float: left; background-color: #F15B63; padding: 4px 10px; color: #fff; margin-top: 4px; margin-right: 4px } #posts_list .content .small ul li, .header .small ul li { font-size: 1em; color: #999; } .single-left-content { /*width:calc(100% - 325px);*/ min-height:300px; float:left; padding:0 } .single-right-content { width:300px; float:right } .single-right-content .ads_items { margin-top:8px } .single-right-content .ads_items:first-child { margin-top:0 } .single-left-content .header { margin-bottom:10px; padding-bottom:15px; border-bottom:1px solid #eee; margin-top:10px } .sp-latest-posts-widget h3{ font-size: 16px; color: #333; font-weight: 700; line-height: 26px; padding-bottom: 0; margin-bottom: 10px; border-bottom: 1px solid #eee; } .elementor-widget-toggle .elementor-toggle-title{ font-size: 20px; font-family: 'Open Sans', 'Kantumruy Pro' , sans-serif; font-weight: 400; } .elementor-column-gap-default>.elementor-column>.elementor-element-populated { padding: 10px; font-family: 'Open Sans', 'Kantumruy Pro' , sans-serif; font-weight: 400; } .elementor-toggle .elementor-tab-content p{ line-height: 28px; } .elementor-toggle .elementor-tab-content{ padding: 5px 15px 20px 35px; border-bottom: 1px solid #d4d4d4; } /*footer*/ .top-footer strong { font-size:20px; font-weight:700; color:#1e202d } .top-footer .col-xs-12 { margin-bottom:25px } .social-media-icons { margin-top:25px } .social-media-icons li { display:inline; margin-right:15px } .social-media-icons li i { font-size:18px; width:43px; height:43px; background:#eceef2; text-align:center; line-height:43px; border-radius:50% } .content-footer { background:#f1f3f7 } .footer-title { position:relative } .footer-title h4 { font-size:14px; color:#1e202d; margin:30px 0 } .footer-col { overflow:hidden; border-bottom:solid 1px rgba(211,227,235,.5) } .footer-col .footer-item .footer-title:after { content:"\f078"; font-family:"Font Awesome 5 Free"; font-weight:700; margin-left:5px; font-size:16px; position:absolute; right:0; top:-3px } .footer-col .footer-item.dropdowns .footer-title:after { content:"\f077" } .footer-col .menu { margin-bottom:30px } .footer-col .menu a { line-height:30px; font-size:14px; color:#1e202d } .footer-col .menu a:hover { color:#b4208c } .footer-container { display:none; -webkit-animation:fadeIn 2s; animation:fadeIn 2s } .footer-container.show { display:block } .footer { background:0 0; padding:30px 0; overflow:hidden; color:#4a4a4a; font-size:11px } .bottom-footer { padding-bottom:50px; border-bottom:solid 1px rgba(211,227,235,.5); margin-bottom:30px; text-align:center } .footer-left { float:left; width:100% } .footer-right { float:right; width:100% } .footer-right span { float:left } .footer-right .menu { float:left; margin-bottom:25px } .footer .menu li { display:inline; margin-left:20px } .footer-left span { display:block } .sp-accordion ul.list-group-item-text{ /*padding-top:10px;*/ padding-bottom:10px; list-style:none; } .sp-accordion .card-header{ border-bottom:none; } .sp-accordion .accordion .card-body{ background:#f7f7f7; padding:0px; } .sp-accordion .accordion .card-header:after { font-family: "Font Awesome 5 Free"; content: "\f077"; font-weight: 900; margin: 20px 0; float: right; } .sp-accordion .accordion .card-header.collapsed:after { /* symbol for "collapsed" panels */ content: "\f078"; margin: 20px 0; } .sp-accordion .list-group-item{ position: relative; display: block; padding: .75rem 1.25rem; margin-bottom: -1px; background-color: unset; border: solid 1px rgba(211,227,235,.5); } .sp-accordion h4,.sp-accordion .card-title { margin:0px; font-size: 14px; color: #1e202d; font-weight:700; margin: 20px 0; } .sp-accordion .list-group-item-text li { /*display: inline; */ margin-left: 20px; margin-left: 20px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; } .sp-accordion .list-group-item-text li:hover { color:#1e202d; } .sjb-page .list-data .sjb-job-info{ width:100%; } .sp-table1 { font-family: 'Open Sans', 'Kantumruy Pro' , sans-serif; border-collapse: collapse; width: 99%; } .sp-table1 td, .sp-table th { border: 1px solid #ddd; padding: 8px; } .sp-table1 tr:nth-child(even){background-color: #f2f2f2;} .sp-table1 tr:hover {background-color: #ddd;} .sp-table1 th { padding-top: 12px; padding-bottom: 12px; padding: 8px; text-align: left; background-color: #1a6093; color: white; white-space: nowrap; } .col-sm-3.list-items { float: left; margin-bottom: 10px !important; flex-grow: 1; flex-shrink: 0; flex-basis: 18%; padding: 0px; padding-top: 10px; padding-right: 10px; overflow: hidden; padding-bottom: 10px; padding-left: 10px; max-width: 20%; } .blog-post-list-thumb { background-size: cover; height: 280px; } .sp-card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; } .card-body.content-report { padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; position: absolute; color: rgb(255, 255, 255); text-align: left; bottom: 0px; background-image: linear-gradient( 0deg, rgb(80 119 187) 0%, rgba(0, 131, 72, 0) 100%) !important; background-position-x: initial !important; background-position-y: initial !important; background-size: initial !important; background-repeat-x: initial !important; background-repeat-y: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-right: 20px !important; } .card-body.content-report { padding: 20px 0px; background: linear-gradient( 0deg, rgb(80 119 187) 0%, rgba(0,131,72,0) 100%)!important; position: absolute; color: #fff; text-align: left; margin-right: 20px !important; bottom: 10px !important; width: 91%; } .report-title a { text-decoration: none; color: #fff; } h4.report-title { font-size: 16px; margin-bottom: 0px; text-align: left; margin-left: 7px; font-weight:400; } .btn-download-pdg a { padding-top: 0px; font-weight:400; padding-right: 7px; padding-bottom: 0px; padding-left: 7px; color: rgb(255, 255, 255); } .btn-download-pdg a { padding: 0 7px; color: #fff; } img.bn-image { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .accrue-field-rate{ margin: 5px 0px; padding: 10px 15px; border-width: 0px; border: 1px solid #cbced1; } /*JOb*/ .ui.items>.item>.image:not(.ui) { width: 175px; } .ui.items>.item>.image { position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; float: none; margin: 0; padding: 0; max-height: ''; -ms-flex-item-align: top; -ms-grid-row-align: top; align-self: top; } .ui.items>.item { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1em 0; width: 100%; min-height: 0; background: 0 0; padding: 0; border: none; border-radius: 0; box-shadow: none; -webkit-transition: box-shadow .1s ease; transition: box-shadow .1s ease; z-index: ''; } .job-items{ } .job-items .item { display: inline-table; width: 100%; /*margin-bottom: 15px;*/ } .job-items .item .image{ width:150px; float:left; } .job-items .item .image img{ width:130px; padding:5px 15px; float:left; } .job-items>.item>.content>.header:not(.ui) { font-size: 16px !important; font-weight: bold; } .job-items>.item>.content>.description { margin-top: .6em; max-width: auto; font-size: 14px; color: rgba(0,0,0,.87); } .job-items>.item>.content>a.header { color: rgba(0,0,0,.85); } .job-items>.item>.content>a.header:hover { color: #c7000b; } .job-items .item .content .extra{ margin-top: 10px; } .job-items>.item .meta { margin: .5em 0 .5em; font-size: 12px; line-height: 12px; color: rgba(0,0,0,.6); } .job-items>.item .extra>* { margin: .25rem .5rem .25rem 0; } @media (max-width: 600px) { .job-items .item { border-bottom: 1px solid #ddd; padding-bottom: 15px; } .job-items .item .image{ /*width:100%;*/ /*float:left;*/ } .job-items .item .image img{ /*width:200px;*/ /*float:left;*/ } } .ui.basic.blue.button, .ui.basic.blue.buttons .button { box-shadow: 0 0 0 1px #2185d0 inset!important; color: #2185d0!important; float:left; } /*FAQ*/ .elementor-toggle{ } .elementor-toggle { } .elementor-toggle .elementor-toggle-item h3 { /*font-size:16px;*/ } .elementor-widget-toggle .elementor-toggle-title{ font-size:20px; } h4.elementor-heading-title.elementor-size-default{ font-weight:700; } @media (max-width: 600px) { .elementor-widget-toggle .elementor-toggle-title{ font-size:14px; width:95%; line-height: initial; } .elementor-toggle .elementor-tab-content p{ line-height: normal; font-size: 12px; } h4.elementor-heading-title.elementor-size-default{ font-weight:700; font-size:20px; } h4{ font-size: 16px; } .product-carousel .box-title, .promotion-carousel .box-title{ font-size: 16px; } .col-sm-3.list-items { float: left; margin-bottom: 10px !important; flex-grow: 1; flex-shrink: 0; flex-basis: 49.99%; padding: 0px; padding-top: 10px; padding-right: 10px; overflow: hidden; padding-bottom: 10px; padding-left: 10px; max-width: 49%; } } @media only screen and (min-width: 620px) and (max-width: 768px) { .col-sm-3.list-items { float: left; margin-bottom: 10px !important; flex-grow: 1; flex-shrink: 0; flex-basis: 29.99%; padding: 0px; padding-top: 10px; padding-right: 10px; overflow: hidden; padding-bottom: 10px; padding-left: 10px; max-width: 29.99%; } } /**/ .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline: 0; border: none; vertical-align: baseline; background: #e0e1e2 none; color: rgba(0, 0, 0, .6); font-family: 'Open Sans', 'Kantumruy Pro' , sans-serif; margin: 0 .25em 0 0; padding: .78571429em 1.5em .78571429em; text-transform: none; text-shadow: none; font-weight: 700; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; border-radius: .28571429rem; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease; transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease; will-change: ''; -webkit-tap-highlight-color: transparent } .ui.button:hover { background-color: #cacbcd; background-image: none; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset; color: rgba(0, 0, 0, .8) } .ui.button:hover .icon { opacity: .85 } .ui.button:focus { background-color: #cacbcd; color: rgba(0, 0, 0, .8); background-image: ''!important; box-shadow: ''!important } .ui.button:focus .icon { opacity: .85 } .ui.active.button:active, .ui.button:active { background-color: #babbbc; background-image: ''; color: rgba(0, 0, 0, .9); box-shadow: 0 0 0 1px transparent inset, none } .ui.active.button { background-color: #c0c1c2; background-image: none; box-shadow: 0 0 0 1px transparent inset; color: rgba(0, 0, 0, .95) } .ui.active.button:hover { background-color: #c0c1c2; background-image: none; color: rgba(0, 0, 0, .95) } .ui.active.button:active { background-color: #c0c1c2; background-image: none } .ui.loading.loading.loading.loading.loading.loading.button { position: relative; cursor: default; text-shadow: none!important; color: transparent!important; opacity: 1; pointer-events: auto; -webkit-transition: all 0s linear, opacity .1s ease; transition: all 0s linear, opacity .1s ease } .ui.loading.button:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -.64285714em 0 0 -.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: .2em solid rgba(0, 0, 0, .15) } .ui.loading.button:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -.64285714em 0 0 -.64285714em; width: 1.28571429em; height: 1.28571429em; -webkit-animation: button-spin .6s linear; animation: button-spin .6s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border-radius: 500rem; border-color: #fff transparent transparent; border-style: solid; border-width: .2em; box-shadow: 0 0 0 1px transparent } .ui.labeled.icon.loading.button .icon { background-color: transparent; box-shadow: none } @-webkit-keyframes button-spin { from { -webkit-transform: rotate(0); transform: rotate(0) } to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes button-spin { from { -webkit-transform: rotate(0); transform: rotate(0) } to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } .ui.basic.loading.button:not(.inverted):before { border-color: rgba(0, 0, 0, .1) } .ui.basic.loading.button:not(.inverted):after { border-top-color: #767676 } .ui.button:disabled, .ui.buttons .disabled.button, .ui.disabled.active.button, .ui.disabled.button, .ui.disabled.button:hover { cursor: default; opacity: .45!important; background-image: none!important; box-shadow: none!important; pointer-events: none!important } .ui.basic.buttons .ui.disabled.button { border-color: rgba(34, 36, 38, .5) } .ui.animated.button { position: relative; overflow: hidden; padding-right: 0!important; vertical-align: middle; z-index: 1 } .ui.animated.button .content { will-change: transform, opacity } .ui.animated.button .visible.content { position: relative; margin-right: 1.5em } .ui.animated.button .hidden.content { position: absolute; width: 100% } .ui.animated.button .hidden.content, .ui.animated.button .visible.content { -webkit-transition: right .3s ease 0s; transition: right .3s ease 0s } .ui.animated.button .visible.content { left: auto; right: 0 } .ui.animated.button .hidden.content { top: 50%; left: auto; right: -100%; margin-top: -.5em } .ui.animated.button:focus .visible.content, .ui.animated.button:hover .visible.content { left: auto; right: 200% } .ui.animated.button:focus .hidden.content, .ui.animated.button:hover .hidden.content { left: auto; right: 0 } .ui.vertical.animated.button .hidden.content, .ui.vertical.animated.button .visible.content { -webkit-transition: top .3s ease, -webkit-transform .3s ease; transition: top .3s ease, -webkit-transform .3s ease; transition: top .3s ease, transform .3s ease; transition: top .3s ease, transform .3s ease, -webkit-transform .3s ease } .ui.vertical.animated.button .visible.content { -webkit-transform: translateY(0); transform: translateY(0); right: auto } .ui.vertical.animated.button .hidden.content { top: -50%; left: 0; right: auto } .ui.vertical.animated.button:focus .visible.content, .ui.vertical.animated.button:hover .visible.content { -webkit-transform: translateY(200%); transform: translateY(200%); right: auto } .ui.vertical.animated.button:focus .hidden.content, .ui.vertical.animated.button:hover .hidden.content { top: 50%; right: auto } .ui.fade.animated.button .hidden.content, .ui.fade.animated.button .visible.content { -webkit-transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease; transition: opacity .3s ease, transform .3s ease, -webkit-transform .3s ease } .ui.fade.animated.button .visible.content { left: auto; right: auto; opacity: 1; -webkit-transform: scale(1); transform: scale(1) } .ui.fade.animated.button .hidden.content { opacity: 0; left: 0; right: auto; -webkit-transform: scale(1.5); transform: scale(1.5) } .ui.fade.animated.button:focus .visible.content, .ui.fade.animated.button:hover .visible.content { left: auto; right: auto; opacity: 0; -webkit-transform: scale(.75); transform: scale(.75) } .ui.fade.animated.button:focus .hidden.content, .ui.fade.animated.button:hover .hidden.content { left: 0; right: auto; opacity: 1; -webkit-transform: scale(1); transform: scale(1) } .ui.inverted.button { box-shadow: 0 0 0 2px #fff inset!important; background: transparent none; color: #fff; text-shadow: none!important } .ui.inverted.buttons .button { margin: 0 0 0 -2px } .ui.inverted.buttons .button:first-child { margin-left: 0 } .ui.inverted.vertical.buttons .button { margin: 0 0 -2px 0 } .ui.inverted.vertical.buttons .button:first-child { margin-top: 0 } .ui.inverted.button:hover { background: #fff; box-shadow: 0 0 0 2px #fff inset!important; color: rgba(0, 0, 0, .8) } .ui.inverted.button.active, .ui.inverted.button:focus { background: #fff; box-shadow: 0 0 0 2px #fff inset!important; color: rgba(0, 0, 0, .8) } .ui.inverted.button.active:focus { background: #dcddde; box-shadow: 0 0 0 2px #dcddde inset!important; color: rgba(0, 0, 0, .8) } .ui.labeled.button:not(.icon) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background: 0 0!important; padding: 0!important; border: none!important; box-shadow: none!important } .ui.labeled.button>.button { margin: 0 } .ui.labeled.button>.label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 0 -1px!important; padding: ''; font-size: 1em; border-color: rgba(34, 36, 38, .15) } .ui.labeled.button>.tag.label:before { width: 1.85em; height: 1.85em } .ui.labeled.button:not([class*="left labeled"])>.button { border-top-right-radius: 0; border-bottom-right-radius: 0 } .ui.labeled.button:not([class*="left labeled"])>.label { border-top-left-radius: 0; border-bottom-left-radius: 0 } .ui[class*="left labeled"].button>.button { border-top-left-radius: 0; border-bottom-left-radius: 0 } .ui[class*="left labeled"].button>.label { border-top-right-radius: 0; border-bottom-right-radius: 0 } .ui.facebook.button { background-color: #3b5998; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.facebook.button:hover { background-color: #304d8a; color: #fff; text-shadow: none } .ui.facebook.button:active { background-color: #2d4373; color: #fff; text-shadow: none } .ui.twitter.button { background-color: #55acee; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.twitter.button:hover { background-color: #35a2f4; color: #fff; text-shadow: none } .ui.twitter.button:active { background-color: #2795e9; color: #fff; text-shadow: none } .ui.google.plus.button { background-color: #dd4b39; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.google.plus.button:hover { background-color: #e0321c; color: #fff; text-shadow: none } .ui.google.plus.button:active { background-color: #c23321; color: #fff; text-shadow: none } .ui.linkedin.button { background-color: #1f88be; color: #fff; text-shadow: none } .ui.linkedin.button:hover { background-color: #147baf; color: #fff; text-shadow: none } .ui.linkedin.button:active { background-color: #186992; color: #fff; text-shadow: none } .ui.youtube.button { background-color: #cc181e; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.youtube.button:hover { background-color: #bd0d13; color: #fff; text-shadow: none } .ui.youtube.button:active { background-color: #9e1317; color: #fff; text-shadow: none } .ui.instagram.button { background-color: #49769c; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.instagram.button:hover { background-color: #3d698e; color: #fff; text-shadow: none } .ui.instagram.button:active { background-color: #395c79; color: #fff; text-shadow: none } .ui.pinterest.button { background-color: #bd081c; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.pinterest.button:hover { background-color: #ac0013; color: #fff; text-shadow: none } .ui.pinterest.button:active { background-color: #8c0615; color: #fff; text-shadow: none } .ui.vk.button { background-color: #4d7198; color: #fff; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.vk.button:hover { background-color: #41648a; color: #fff } .ui.vk.button:active { background-color: #3c5876; color: #fff } .ui.button>.icon:not(.button) { height: .85714286em; opacity: .8; margin: 0 .42857143em 0 -.21428571em; -webkit-transition: opacity .1s ease; transition: opacity .1s ease; vertical-align: ''; color: '' } .ui.button:not(.icon)>.icon:not(.button):not(.dropdown) { margin: 0 .42857143em 0 -.21428571em } .ui.button:not(.icon)>.right.icon:not(.button):not(.dropdown) { margin: 0 -.21428571em 0 .42857143em } .ui[class*="left floated"].button, .ui[class*="left floated"].buttons { float: left; margin-left: 0; margin-right: .25em } .ui[class*="right floated"].button, .ui[class*="right floated"].buttons { float: right; margin-right: 0; margin-left: .25em } .ui.compact.button, .ui.compact.buttons .button { padding: .58928571em 1.125em .58928571em } .ui.compact.icon.button, .ui.compact.icon.buttons .button { padding: .58928571em .58928571em .58928571em } .ui.compact.labeled.icon.button, .ui.compact.labeled.icon.buttons .button { padding: .58928571em 3.69642857em .58928571em } .ui.mini.button, .ui.mini.buttons .button, .ui.mini.buttons .or { font-size: .78571429rem } .ui.tiny.button, .ui.tiny.buttons .button, .ui.tiny.buttons .or { font-size: .85714286rem } .ui.small.button, .ui.small.buttons .button, .ui.small.buttons .or { font-size: .92857143rem } .ui.button, .ui.buttons .button, .ui.buttons .or { font-size: 1rem } .ui.large.button, .ui.large.buttons .button, .ui.large.buttons .or { font-size: 1.14285714rem } .ui.big.button, .ui.big.buttons .button, .ui.big.buttons .or { font-size: 1.28571429rem } .ui.huge.button, .ui.huge.buttons .button, .ui.huge.buttons .or { font-size: 1.42857143rem } .ui.massive.button, .ui.massive.buttons .button, .ui.massive.buttons .or { font-size: 1.71428571rem } .ui.icon.button, .ui.icon.buttons .button { padding: .78571429em .78571429em .78571429em } .ui.icon.button>.icon, .ui.icon.buttons .button>.icon { opacity: .9; margin: 0!important; vertical-align: top } .ui.basic.button, .ui.basic.buttons .button { background: transparent none!important; color: rgba(0, 0, 0, .6)!important; font-weight: 400; border-radius: .28571429rem; text-transform: none; text-shadow: none!important; box-shadow: 0 0 0 1px rgba(34, 36, 38, .15) inset } .ui.basic.buttons { box-shadow: none; border: 1px solid rgba(34, 36, 38, .15); border-radius: .28571429rem } .ui.basic.buttons .button { border-radius: 0 } .ui.basic.button:hover, .ui.basic.buttons .button:hover { background: #fff!important; color: rgba(0, 0, 0, .8)!important; box-shadow: 0 0 0 1px rgba(34, 36, 38, .35) inset, 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.basic.button:focus, .ui.basic.buttons .button:focus { background: #fff!important; color: rgba(0, 0, 0, .8)!important; box-shadow: 0 0 0 1px rgba(34, 36, 38, .35) inset, 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.basic.button:active, .ui.basic.buttons .button:active { background: #f8f8f8!important; color: rgba(0, 0, 0, .9)!important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset, 0 1px 4px 0 rgba(34, 36, 38, .15) inset } .ui.basic.active.button, .ui.basic.buttons .active.button { background: rgba(0, 0, 0, .05)!important; box-shadow: ''!important; color: rgba(0, 0, 0, .95) } .ui.basic.active.button:hover, .ui.basic.buttons .active.button:hover { background-color: rgba(0, 0, 0, .05) } .ui.basic.buttons .button:hover { box-shadow: 0 0 0 1px rgba(34, 36, 38, .35) inset, 0 0 0 0 rgba(34, 36, 38, .15) inset inset } .ui.basic.buttons .button:active { box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset, 0 1px 4px 0 rgba(34, 36, 38, .15) inset inset } .ui.basic.buttons .active.button { box-shadow: ''!important } .ui.basic.inverted.button, .ui.basic.inverted.buttons .button { background-color: transparent!important; color: #f9fafb!important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important } .ui.basic.inverted.button:hover, .ui.basic.inverted.buttons .button:hover { color: #fff!important; box-shadow: 0 0 0 2px #fff inset!important } .ui.basic.inverted.button:focus, .ui.basic.inverted.buttons .button:focus { color: #fff!important; box-shadow: 0 0 0 2px #fff inset!important } .ui.basic.inverted.button:active, .ui.basic.inverted.buttons .button:active { background-color: rgba(255, 255, 255, .08)!important; color: #fff!important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9) inset!important } .ui.basic.inverted.active.button, .ui.basic.inverted.buttons .active.button { background-color: rgba(255, 255, 255, .08); color: #fff; text-shadow: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7) inset } .ui.basic.inverted.active.button:hover, .ui.basic.inverted.buttons .active.button:hover { background-color: rgba(255, 255, 255, .15); box-shadow: 0 0 0 2px #fff inset!important } .ui.basic.buttons .button { border-left: 1px solid rgba(34, 36, 38, .15); box-shadow: none } .ui.basic.vertical.buttons .button { border-left: none } .ui.basic.vertical.buttons .button { border-left-width: 0; border-top: 1px solid rgba(34, 36, 38, .15) } .ui.basic.vertical.buttons .button:first-child { border-top-width: 0 } .ui.labeled.icon.button, .ui.labeled.icon.buttons .button { position: relative; padding-left: 4.07142857em!important; padding-right: 1.5em!important } .ui.labeled.icon.button>.icon, .ui.labeled.icon.buttons>.button>.icon { position: absolute; height: 100%; line-height: 1; border-radius: 0; border-top-left-radius: inherit; border-bottom-left-radius: inherit; text-align: center; margin: 0; width: 2.57142857em; background-color: rgba(0, 0, 0, .05); color: ''; box-shadow: -1px 0 0 0 transparent inset } .ui.labeled.icon.button>.icon, .ui.labeled.icon.buttons>.button>.icon { top: 0; left: 0 } .ui[class*="right labeled"].icon.button { padding-right: 4.07142857em!important; padding-left: 1.5em!important } .ui[class*="right labeled"].icon.button>.icon { left: auto; right: 0; border-radius: 0; border-top-right-radius: inherit; border-bottom-right-radius: inherit; box-shadow: 1px 0 0 0 transparent inset } .ui.labeled.icon.button>.icon:after, .ui.labeled.icon.button>.icon:before, .ui.labeled.icon.buttons>.button>.icon:after, .ui.labeled.icon.buttons>.button>.icon:before { display: block; position: absolute; width: 100%; top: 50%; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .ui.labeled.icon.buttons .button>.icon { border-radius: 0 } .ui.labeled.icon.buttons .button:first-child>.icon { border-top-left-radius: .28571429rem; border-bottom-left-radius: .28571429rem } .ui.labeled.icon.buttons .button:last-child>.icon { border-top-right-radius: .28571429rem; border-bottom-right-radius: .28571429rem } .ui.vertical.labeled.icon.buttons .button:first-child>.icon { border-radius: 0; border-top-left-radius: .28571429rem } .ui.vertical.labeled.icon.buttons .button:last-child>.icon { border-radius: 0; border-bottom-left-radius: .28571429rem } .ui.fluid[class*="left labeled"].icon.button, .ui.fluid[class*="right labeled"].icon.button { padding-left: 1.5em!important; padding-right: 1.5em!important } .ui.button.toggle.active, .ui.buttons .button.toggle.active, .ui.toggle.buttons .active.button { background-color: #21ba45!important; box-shadow: none!important; text-shadow: none; color: #fff!important } .ui.button.toggle.active:hover { background-color: #16ab39!important; text-shadow: none; color: #fff!important } .ui.circular.button { border-radius: 10em } .ui.circular.button>.icon { width: 1em; vertical-align: baseline } .ui.buttons .or { position: relative; width: .3em; height: 2.57142857em; z-index: 3 } .ui.buttons .or:before { position: absolute; text-align: center; border-radius: 500rem; content: 'or'; top: 50%; left: 50%; background-color: #fff; text-shadow: none; margin-top: -.89285714em; margin-left: -.89285714em; width: 1.78571429em; height: 1.78571429em; line-height: 1.78571429em; color: rgba(0, 0, 0, .4); font-style: normal; font-weight: 700; box-shadow: 0 0 0 1px transparent inset } .ui.buttons .or[data-text]:before { content: attr(data-text) } .ui.fluid.buttons .or { width: 0!important } .ui.fluid.buttons .or:after { display: none } .ui.attached.button { position: relative; display: block; margin: 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(34, 36, 38, .15)!important } .ui.attached.top.button { border-radius: .28571429rem .28571429rem 0 0 } .ui.attached.bottom.button { border-radius: 0 0 .28571429rem .28571429rem } .ui.left.attached.button { display: inline-block; border-left: none; text-align: right; padding-right: .75em; border-radius: .28571429rem 0 0 .28571429rem } .ui.right.attached.button { display: inline-block; text-align: left; padding-left: .75em; border-radius: 0 .28571429rem .28571429rem 0 } .ui.attached.buttons { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 0; width: auto!important; z-index: 2; margin-left: -1px; margin-right: -1px } .ui.attached.buttons .button { margin: 0 } .ui.attached.buttons .button:first-child { border-radius: 0 } .ui.attached.buttons .button:last-child { border-radius: 0 } .ui[class*="top attached"].buttons { margin-bottom: -1px; border-radius: .28571429rem .28571429rem 0 0 } .ui[class*="top attached"].buttons .button:first-child { border-radius: .28571429rem 0 0 0 } .ui[class*="top attached"].buttons .button:last-child { border-radius: 0 .28571429rem 0 0 } .ui[class*="bottom attached"].buttons { margin-top: -1px; border-radius: 0 0 .28571429rem .28571429rem } .ui[class*="bottom attached"].buttons .button:first-child { border-radius: 0 0 0 .28571429rem } .ui[class*="bottom attached"].buttons .button:last-child { border-radius: 0 0 .28571429rem 0 } .ui[class*="left attached"].buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: -1px; border-radius: 0 .28571429rem .28571429rem 0 } .ui[class*="left attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0 .28571429rem 0 0 } .ui[class*="left attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0 0 .28571429rem 0 } .ui[class*="right attached"].buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 0; margin-right: -1px; border-radius: .28571429rem 0 0 .28571429rem } .ui[class*="right attached"].buttons .button:first-child { margin-left: -1px; border-radius: .28571429rem 0 0 0 } .ui[class*="right attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0 0 0 .28571429rem } .ui.fluid.button, .ui.fluid.buttons { width: 100% } .ui.fluid.button { display: block } .ui.two.buttons { width: 100% } .ui.two.buttons>.button { width: 50% } .ui.three.buttons { width: 100% } .ui.three.buttons>.button { width: 33.333% } .ui.four.buttons { width: 100% } .ui.four.buttons>.button { width: 25% } .ui.five.buttons { width: 100% } .ui.five.buttons>.button { width: 20% } .ui.six.buttons { width: 100% } .ui.six.buttons>.button { width: 16.666% } .ui.seven.buttons { width: 100% } .ui.seven.buttons>.button { width: 14.285% } .ui.eight.buttons { width: 100% } .ui.eight.buttons>.button { width: 12.5% } .ui.nine.buttons { width: 100% } .ui.nine.buttons>.button { width: 11.11% } .ui.ten.buttons { width: 100% } .ui.ten.buttons>.button { width: 10% } .ui.eleven.buttons { width: 100% } .ui.eleven.buttons>.button { width: 9.09% } .ui.twelve.buttons { width: 100% } .ui.twelve.buttons>.button { width: 8.3333% } .ui.fluid.vertical.buttons, .ui.fluid.vertical.buttons>.button { display: -webkit-box; display: -ms-flexbox; display: flex; width: auto } .ui.two.vertical.buttons>.button { height: 50% } .ui.three.vertical.buttons>.button { height: 33.333% } .ui.four.vertical.buttons>.button { height: 25% } .ui.five.vertical.buttons>.button { height: 20% } .ui.six.vertical.buttons>.button { height: 16.666% } .ui.seven.vertical.buttons>.button { height: 14.285% } .ui.eight.vertical.buttons>.button { height: 12.5% } .ui.nine.vertical.buttons>.button { height: 11.11% } .ui.ten.vertical.buttons>.button { height: 10% } .ui.eleven.vertical.buttons>.button { height: 9.09% } .ui.twelve.vertical.buttons>.button { height: 8.3333% } .ui.black.button, .ui.black.buttons .button { background-color: #1b1c1d; color: #fff; text-shadow: none; background-image: none } .ui.black.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.black.button:hover, .ui.black.buttons .button:hover { background-color: #27292a; color: #fff; text-shadow: none } .ui.black.button:focus, .ui.black.buttons .button:focus { background-color: #2f3032; color: #fff; text-shadow: none } .ui.black.button:active, .ui.black.buttons .button:active { background-color: #343637; color: #fff; text-shadow: none } .ui.black.active.button, .ui.black.button .active.button:active, .ui.black.buttons .active.button, .ui.black.buttons .active.button:active { background-color: #0f0f10; color: #fff; text-shadow: none } .ui.basic.black.button, .ui.basic.black.buttons .button { box-shadow: 0 0 0 1px #1b1c1d inset!important; color: #1b1c1d!important } .ui.basic.black.button:hover, .ui.basic.black.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #27292a inset!important; color: #27292a!important } .ui.basic.black.button:focus, .ui.basic.black.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #2f3032 inset!important; color: #27292a!important } .ui.basic.black.active.button, .ui.basic.black.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #0f0f10 inset!important; color: #343637!important } .ui.basic.black.button:active, .ui.basic.black.buttons .button:active { box-shadow: 0 0 0 1px #343637 inset!important; color: #343637!important } .ui.buttons:not(.vertical)>.basic.black.button:not(:first-child) { margin-left: -1px } .ui.inverted.black.button, .ui.inverted.black.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #d4d4d5 inset!important; color: #fff } .ui.inverted.black.button.active, .ui.inverted.black.button:active, .ui.inverted.black.button:focus, .ui.inverted.black.button:hover, .ui.inverted.black.buttons .button.active, .ui.inverted.black.buttons .button:active, .ui.inverted.black.buttons .button:focus, .ui.inverted.black.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.black.button:hover, .ui.inverted.black.buttons .button:hover { background-color: #000 } .ui.inverted.black.button:focus, .ui.inverted.black.buttons .button:focus { background-color: #000 } .ui.inverted.black.active.button, .ui.inverted.black.buttons .active.button { background-color: #000 } .ui.inverted.black.button:active, .ui.inverted.black.buttons .button:active { background-color: #000 } .ui.inverted.black.basic.button, .ui.inverted.black.basic.buttons .button, .ui.inverted.black.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.black.basic.button:hover, .ui.inverted.black.basic.buttons .button:hover, .ui.inverted.black.buttons .basic.button:hover { box-shadow: 0 0 0 2px #000 inset!important; color: #fff!important } .ui.inverted.black.basic.button:focus, .ui.inverted.black.basic.buttons .button:focus { box-shadow: 0 0 0 2px #000 inset!important; color: #545454!important } .ui.inverted.black.basic.active.button, .ui.inverted.black.basic.buttons .active.button, .ui.inverted.black.buttons .basic.active.button { box-shadow: 0 0 0 2px #000 inset!important; color: #fff!important } .ui.inverted.black.basic.button:active, .ui.inverted.black.basic.buttons .button:active, .ui.inverted.black.buttons .basic.button:active { box-shadow: 0 0 0 2px #000 inset!important; color: #fff!important } .ui.grey.button, .ui.grey.buttons .button { background-color: #767676; color: #fff; text-shadow: none; background-image: none } .ui.grey.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.grey.button:hover, .ui.grey.buttons .button:hover { background-color: #838383; color: #fff; text-shadow: none } .ui.grey.button:focus, .ui.grey.buttons .button:focus { background-color: #8a8a8a; color: #fff; text-shadow: none } .ui.grey.button:active, .ui.grey.buttons .button:active { background-color: #909090; color: #fff; text-shadow: none } .ui.grey.active.button, .ui.grey.button .active.button:active, .ui.grey.buttons .active.button, .ui.grey.buttons .active.button:active { background-color: #696969; color: #fff; text-shadow: none } .ui.basic.grey.button, .ui.basic.grey.buttons .button { box-shadow: 0 0 0 1px #767676 inset!important; color: #767676!important } .ui.basic.grey.button:hover, .ui.basic.grey.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #838383 inset!important; color: #838383!important } .ui.basic.grey.button:focus, .ui.basic.grey.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #8a8a8a inset!important; color: #838383!important } .ui.basic.grey.active.button, .ui.basic.grey.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #696969 inset!important; color: #909090!important } .ui.basic.grey.button:active, .ui.basic.grey.buttons .button:active { box-shadow: 0 0 0 1px #909090 inset!important; color: #909090!important } .ui.buttons:not(.vertical)>.basic.grey.button:not(:first-child) { margin-left: -1px } .ui.inverted.grey.button, .ui.inverted.grey.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #d4d4d5 inset!important; color: #fff } .ui.inverted.grey.button.active, .ui.inverted.grey.button:active, .ui.inverted.grey.button:focus, .ui.inverted.grey.button:hover, .ui.inverted.grey.buttons .button.active, .ui.inverted.grey.buttons .button:active, .ui.inverted.grey.buttons .button:focus, .ui.inverted.grey.buttons .button:hover { box-shadow: none!important; color: rgba(0, 0, 0, .6) } .ui.inverted.grey.button:hover, .ui.inverted.grey.buttons .button:hover { background-color: #cfd0d2 } .ui.inverted.grey.button:focus, .ui.inverted.grey.buttons .button:focus { background-color: #c7c9cb } .ui.inverted.grey.active.button, .ui.inverted.grey.buttons .active.button { background-color: #cfd0d2 } .ui.inverted.grey.button:active, .ui.inverted.grey.buttons .button:active { background-color: #c2c4c5 } .ui.inverted.grey.basic.button, .ui.inverted.grey.basic.buttons .button, .ui.inverted.grey.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.grey.basic.button:hover, .ui.inverted.grey.basic.buttons .button:hover, .ui.inverted.grey.buttons .basic.button:hover { box-shadow: 0 0 0 2px #cfd0d2 inset!important; color: #fff!important } .ui.inverted.grey.basic.button:focus, .ui.inverted.grey.basic.buttons .button:focus { box-shadow: 0 0 0 2px #c7c9cb inset!important; color: #dcddde!important } .ui.inverted.grey.basic.active.button, .ui.inverted.grey.basic.buttons .active.button, .ui.inverted.grey.buttons .basic.active.button { box-shadow: 0 0 0 2px #cfd0d2 inset!important; color: #fff!important } .ui.inverted.grey.basic.button:active, .ui.inverted.grey.basic.buttons .button:active, .ui.inverted.grey.buttons .basic.button:active { box-shadow: 0 0 0 2px #c2c4c5 inset!important; color: #fff!important } .ui.brown.button, .ui.brown.buttons .button { background-color: #a5673f; color: #fff; text-shadow: none; background-image: none } .ui.brown.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.brown.button:hover, .ui.brown.buttons .button:hover { background-color: #975b33; color: #fff; text-shadow: none } .ui.brown.button:focus, .ui.brown.buttons .button:focus { background-color: #90532b; color: #fff; text-shadow: none } .ui.brown.button:active, .ui.brown.buttons .button:active { background-color: #805031; color: #fff; text-shadow: none } .ui.brown.active.button, .ui.brown.button .active.button:active, .ui.brown.buttons .active.button, .ui.brown.buttons .active.button:active { background-color: #995a31; color: #fff; text-shadow: none } .ui.basic.brown.button, .ui.basic.brown.buttons .button { box-shadow: 0 0 0 1px #a5673f inset!important; color: #a5673f!important } .ui.basic.brown.button:hover, .ui.basic.brown.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #975b33 inset!important; color: #975b33!important } .ui.basic.brown.button:focus, .ui.basic.brown.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #90532b inset!important; color: #975b33!important } .ui.basic.brown.active.button, .ui.basic.brown.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #995a31 inset!important; color: #805031!important } .ui.basic.brown.button:active, .ui.basic.brown.buttons .button:active { box-shadow: 0 0 0 1px #805031 inset!important; color: #805031!important } .ui.buttons:not(.vertical)>.basic.brown.button:not(:first-child) { margin-left: -1px } .ui.inverted.brown.button, .ui.inverted.brown.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #d67c1c inset!important; color: #d67c1c } .ui.inverted.brown.button.active, .ui.inverted.brown.button:active, .ui.inverted.brown.button:focus, .ui.inverted.brown.button:hover, .ui.inverted.brown.buttons .button.active, .ui.inverted.brown.buttons .button:active, .ui.inverted.brown.buttons .button:focus, .ui.inverted.brown.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.brown.button:hover, .ui.inverted.brown.buttons .button:hover { background-color: #c86f11 } .ui.inverted.brown.button:focus, .ui.inverted.brown.buttons .button:focus { background-color: #c16808 } .ui.inverted.brown.active.button, .ui.inverted.brown.buttons .active.button { background-color: #cc6f0d } .ui.inverted.brown.button:active, .ui.inverted.brown.buttons .button:active { background-color: #a96216 } .ui.inverted.brown.basic.button, .ui.inverted.brown.basic.buttons .button, .ui.inverted.brown.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.brown.basic.button:hover, .ui.inverted.brown.basic.buttons .button:hover, .ui.inverted.brown.buttons .basic.button:hover { box-shadow: 0 0 0 2px #c86f11 inset!important; color: #d67c1c!important } .ui.inverted.brown.basic.button:focus, .ui.inverted.brown.basic.buttons .button:focus { box-shadow: 0 0 0 2px #c16808 inset!important; color: #d67c1c!important } .ui.inverted.brown.basic.active.button, .ui.inverted.brown.basic.buttons .active.button, .ui.inverted.brown.buttons .basic.active.button { box-shadow: 0 0 0 2px #cc6f0d inset!important; color: #d67c1c!important } .ui.inverted.brown.basic.button:active, .ui.inverted.brown.basic.buttons .button:active, .ui.inverted.brown.buttons .basic.button:active { box-shadow: 0 0 0 2px #a96216 inset!important; color: #d67c1c!important } .ui.blue.button, .ui.blue.buttons .button { background-color: #2185d0; color: #fff; text-shadow: none; background-image: none } .ui.blue.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.blue.button:hover, .ui.blue.buttons .button:hover { background-color: #1678c2; color: #fff; text-shadow: none } .ui.blue.button:focus, .ui.blue.buttons .button:focus { background-color: #0d71bb; color: #fff; text-shadow: none } .ui.blue.button:active, .ui.blue.buttons .button:active { background-color: #1a69a4; color: #fff; text-shadow: none } .ui.blue.active.button, .ui.blue.button .active.button:active, .ui.blue.buttons .active.button, .ui.blue.buttons .active.button:active { background-color: #1279c6; color: #fff; text-shadow: none } .ui.basic.blue.button, .ui.basic.blue.buttons .button { box-shadow: 0 0 0 1px #2185d0 inset!important; color: #2185d0!important } .ui.basic.blue.button:hover, .ui.basic.blue.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #1678c2 inset!important; color: #1678c2!important } .ui.basic.blue.button:focus, .ui.basic.blue.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #0d71bb inset!important; color: #1678c2!important } .ui.basic.blue.active.button, .ui.basic.blue.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #1279c6 inset!important; color: #1a69a4!important } .ui.basic.blue.button:active, .ui.basic.blue.buttons .button:active { box-shadow: 0 0 0 1px #1a69a4 inset!important; color: #1a69a4!important } .ui.buttons:not(.vertical)>.basic.blue.button:not(:first-child) { margin-left: -1px } .ui.inverted.blue.button, .ui.inverted.blue.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #54c8ff inset!important; color: #54c8ff } .ui.inverted.blue.button.active, .ui.inverted.blue.button:active, .ui.inverted.blue.button:focus, .ui.inverted.blue.button:hover, .ui.inverted.blue.buttons .button.active, .ui.inverted.blue.buttons .button:active, .ui.inverted.blue.buttons .button:focus, .ui.inverted.blue.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.blue.button:hover, .ui.inverted.blue.buttons .button:hover { background-color: #3ac0ff } .ui.inverted.blue.button:focus, .ui.inverted.blue.buttons .button:focus { background-color: #2bbbff } .ui.inverted.blue.active.button, .ui.inverted.blue.buttons .active.button { background-color: #3ac0ff } .ui.inverted.blue.button:active, .ui.inverted.blue.buttons .button:active { background-color: #21b8ff } .ui.inverted.blue.basic.button, .ui.inverted.blue.basic.buttons .button, .ui.inverted.blue.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.blue.basic.button:hover, .ui.inverted.blue.basic.buttons .button:hover, .ui.inverted.blue.buttons .basic.button:hover { box-shadow: 0 0 0 2px #3ac0ff inset!important; color: #54c8ff!important } .ui.inverted.blue.basic.button:focus, .ui.inverted.blue.basic.buttons .button:focus { box-shadow: 0 0 0 2px #2bbbff inset!important; color: #54c8ff!important } .ui.inverted.blue.basic.active.button, .ui.inverted.blue.basic.buttons .active.button, .ui.inverted.blue.buttons .basic.active.button { box-shadow: 0 0 0 2px #3ac0ff inset!important; color: #54c8ff!important } .ui.inverted.blue.basic.button:active, .ui.inverted.blue.basic.buttons .button:active, .ui.inverted.blue.buttons .basic.button:active { box-shadow: 0 0 0 2px #21b8ff inset!important; color: #54c8ff!important } .ui.green.button, .ui.green.buttons .button { background-color: #21ba45; color: #fff; text-shadow: none; background-image: none } .ui.green.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.green.button:hover, .ui.green.buttons .button:hover { background-color: #16ab39; color: #fff; text-shadow: none } .ui.green.button:focus, .ui.green.buttons .button:focus { background-color: #0ea432; color: #fff; text-shadow: none } .ui.green.button:active, .ui.green.buttons .button:active { background-color: #198f35; color: #fff; text-shadow: none } .ui.green.active.button, .ui.green.button .active.button:active, .ui.green.buttons .active.button, .ui.green.buttons .active.button:active { background-color: #13ae38; color: #fff; text-shadow: none } .ui.basic.green.button, .ui.basic.green.buttons .button { box-shadow: 0 0 0 1px #21ba45 inset!important; color: #21ba45!important } .ui.basic.green.button:hover, .ui.basic.green.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #16ab39 inset!important; color: #16ab39!important } .ui.basic.green.button:focus, .ui.basic.green.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #0ea432 inset!important; color: #16ab39!important } .ui.basic.green.active.button, .ui.basic.green.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #13ae38 inset!important; color: #198f35!important } .ui.basic.green.button:active, .ui.basic.green.buttons .button:active { box-shadow: 0 0 0 1px #198f35 inset!important; color: #198f35!important } .ui.buttons:not(.vertical)>.basic.green.button:not(:first-child) { margin-left: -1px } .ui.inverted.green.button, .ui.inverted.green.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #2ecc40 inset!important; color: #2ecc40 } .ui.inverted.green.button.active, .ui.inverted.green.button:active, .ui.inverted.green.button:focus, .ui.inverted.green.button:hover, .ui.inverted.green.buttons .button.active, .ui.inverted.green.buttons .button:active, .ui.inverted.green.buttons .button:focus, .ui.inverted.green.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.green.button:hover, .ui.inverted.green.buttons .button:hover { background-color: #22be34 } .ui.inverted.green.button:focus, .ui.inverted.green.buttons .button:focus { background-color: #19b82b } .ui.inverted.green.active.button, .ui.inverted.green.buttons .active.button { background-color: #1fc231 } .ui.inverted.green.button:active, .ui.inverted.green.buttons .button:active { background-color: #25a233 } .ui.inverted.green.basic.button, .ui.inverted.green.basic.buttons .button, .ui.inverted.green.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.green.basic.button:hover, .ui.inverted.green.basic.buttons .button:hover, .ui.inverted.green.buttons .basic.button:hover { box-shadow: 0 0 0 2px #22be34 inset!important; color: #2ecc40!important } .ui.inverted.green.basic.button:focus, .ui.inverted.green.basic.buttons .button:focus { box-shadow: 0 0 0 2px #19b82b inset!important; color: #2ecc40!important } .ui.inverted.green.basic.active.button, .ui.inverted.green.basic.buttons .active.button, .ui.inverted.green.buttons .basic.active.button { box-shadow: 0 0 0 2px #1fc231 inset!important; color: #2ecc40!important } .ui.inverted.green.basic.button:active, .ui.inverted.green.basic.buttons .button:active, .ui.inverted.green.buttons .basic.button:active { box-shadow: 0 0 0 2px #25a233 inset!important; color: #2ecc40!important } .ui.orange.button, .ui.orange.buttons .button { background-color: #f2711c; color: #fff; text-shadow: none; background-image: none } .ui.orange.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.orange.button:hover, .ui.orange.buttons .button:hover { background-color: #f26202; color: #fff; text-shadow: none } .ui.orange.button:focus, .ui.orange.buttons .button:focus { background-color: #e55b00; color: #fff; text-shadow: none } .ui.orange.button:active, .ui.orange.buttons .button:active { background-color: #cf590c; color: #fff; text-shadow: none } .ui.orange.active.button, .ui.orange.button .active.button:active, .ui.orange.buttons .active.button, .ui.orange.buttons .active.button:active { background-color: #f56100; color: #fff; text-shadow: none } .ui.basic.orange.button, .ui.basic.orange.buttons .button { box-shadow: 0 0 0 1px #f2711c inset!important; color: #f2711c!important } .ui.basic.orange.button:hover, .ui.basic.orange.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #f26202 inset!important; color: #f26202!important } .ui.basic.orange.button:focus, .ui.basic.orange.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #e55b00 inset!important; color: #f26202!important } .ui.basic.orange.active.button, .ui.basic.orange.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #f56100 inset!important; color: #cf590c!important } .ui.basic.orange.button:active, .ui.basic.orange.buttons .button:active { box-shadow: 0 0 0 1px #cf590c inset!important; color: #cf590c!important } .ui.buttons:not(.vertical)>.basic.orange.button:not(:first-child) { margin-left: -1px } .ui.inverted.orange.button, .ui.inverted.orange.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #ff851b inset!important; color: #ff851b } .ui.inverted.orange.button.active, .ui.inverted.orange.button:active, .ui.inverted.orange.button:focus, .ui.inverted.orange.button:hover, .ui.inverted.orange.buttons .button.active, .ui.inverted.orange.buttons .button:active, .ui.inverted.orange.buttons .button:focus, .ui.inverted.orange.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.orange.button:hover, .ui.inverted.orange.buttons .button:hover { background-color: #ff7701 } .ui.inverted.orange.button:focus, .ui.inverted.orange.buttons .button:focus { background-color: #f17000 } .ui.inverted.orange.active.button, .ui.inverted.orange.buttons .active.button { background-color: #ff7701 } .ui.inverted.orange.button:active, .ui.inverted.orange.buttons .button:active { background-color: #e76b00 } .ui.inverted.orange.basic.button, .ui.inverted.orange.basic.buttons .button, .ui.inverted.orange.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.orange.basic.button:hover, .ui.inverted.orange.basic.buttons .button:hover, .ui.inverted.orange.buttons .basic.button:hover { box-shadow: 0 0 0 2px #ff7701 inset!important; color: #ff851b!important } .ui.inverted.orange.basic.button:focus, .ui.inverted.orange.basic.buttons .button:focus { box-shadow: 0 0 0 2px #f17000 inset!important; color: #ff851b!important } .ui.inverted.orange.basic.active.button, .ui.inverted.orange.basic.buttons .active.button, .ui.inverted.orange.buttons .basic.active.button { box-shadow: 0 0 0 2px #ff7701 inset!important; color: #ff851b!important } .ui.inverted.orange.basic.button:active, .ui.inverted.orange.basic.buttons .button:active, .ui.inverted.orange.buttons .basic.button:active { box-shadow: 0 0 0 2px #e76b00 inset!important; color: #ff851b!important } .ui.pink.button, .ui.pink.buttons .button { background-color: #e03997; color: #fff; text-shadow: none; background-image: none } .ui.pink.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.pink.button:hover, .ui.pink.buttons .button:hover { background-color: #e61a8d; color: #fff; text-shadow: none } .ui.pink.button:focus, .ui.pink.buttons .button:focus { background-color: #e10f85; color: #fff; text-shadow: none } .ui.pink.button:active, .ui.pink.buttons .button:active { background-color: #c71f7e; color: #fff; text-shadow: none } .ui.pink.active.button, .ui.pink.button .active.button:active, .ui.pink.buttons .active.button, .ui.pink.buttons .active.button:active { background-color: #ea158d; color: #fff; text-shadow: none } .ui.basic.pink.button, .ui.basic.pink.buttons .button { box-shadow: 0 0 0 1px #e03997 inset!important; color: #e03997!important } .ui.basic.pink.button:hover, .ui.basic.pink.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #e61a8d inset!important; color: #e61a8d!important } .ui.basic.pink.button:focus, .ui.basic.pink.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #e10f85 inset!important; color: #e61a8d!important } .ui.basic.pink.active.button, .ui.basic.pink.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #ea158d inset!important; color: #c71f7e!important } .ui.basic.pink.button:active, .ui.basic.pink.buttons .button:active { box-shadow: 0 0 0 1px #c71f7e inset!important; color: #c71f7e!important } .ui.buttons:not(.vertical)>.basic.pink.button:not(:first-child) { margin-left: -1px } .ui.inverted.pink.button, .ui.inverted.pink.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #ff8edf inset!important; color: #ff8edf } .ui.inverted.pink.button.active, .ui.inverted.pink.button:active, .ui.inverted.pink.button:focus, .ui.inverted.pink.button:hover, .ui.inverted.pink.buttons .button.active, .ui.inverted.pink.buttons .button:active, .ui.inverted.pink.buttons .button:focus, .ui.inverted.pink.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.pink.button:hover, .ui.inverted.pink.buttons .button:hover { background-color: #ff74d8 } .ui.inverted.pink.button:focus, .ui.inverted.pink.buttons .button:focus { background-color: #ff65d3 } .ui.inverted.pink.active.button, .ui.inverted.pink.buttons .active.button { background-color: #ff74d8 } .ui.inverted.pink.button:active, .ui.inverted.pink.buttons .button:active { background-color: #ff5bd1 } .ui.inverted.pink.basic.button, .ui.inverted.pink.basic.buttons .button, .ui.inverted.pink.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.pink.basic.button:hover, .ui.inverted.pink.basic.buttons .button:hover, .ui.inverted.pink.buttons .basic.button:hover { box-shadow: 0 0 0 2px #ff74d8 inset!important; color: #ff8edf!important } .ui.inverted.pink.basic.button:focus, .ui.inverted.pink.basic.buttons .button:focus { box-shadow: 0 0 0 2px #ff65d3 inset!important; color: #ff8edf!important } .ui.inverted.pink.basic.active.button, .ui.inverted.pink.basic.buttons .active.button, .ui.inverted.pink.buttons .basic.active.button { box-shadow: 0 0 0 2px #ff74d8 inset!important; color: #ff8edf!important } .ui.inverted.pink.basic.button:active, .ui.inverted.pink.basic.buttons .button:active, .ui.inverted.pink.buttons .basic.button:active { box-shadow: 0 0 0 2px #ff5bd1 inset!important; color: #ff8edf!important } .ui.violet.button, .ui.violet.buttons .button { background-color: #6435c9; color: #fff; text-shadow: none; background-image: none } .ui.violet.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.violet.button:hover, .ui.violet.buttons .button:hover { background-color: #5829bb; color: #fff; text-shadow: none } .ui.violet.button:focus, .ui.violet.buttons .button:focus { background-color: #4f20b5; color: #fff; text-shadow: none } .ui.violet.button:active, .ui.violet.buttons .button:active { background-color: #502aa1; color: #fff; text-shadow: none } .ui.violet.active.button, .ui.violet.button .active.button:active, .ui.violet.buttons .active.button, .ui.violet.buttons .active.button:active { background-color: #5626bf; color: #fff; text-shadow: none } .ui.basic.violet.button, .ui.basic.violet.buttons .button { box-shadow: 0 0 0 1px #6435c9 inset!important; color: #6435c9!important } .ui.basic.violet.button:hover, .ui.basic.violet.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #5829bb inset!important; color: #5829bb!important } .ui.basic.violet.button:focus, .ui.basic.violet.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #4f20b5 inset!important; color: #5829bb!important } .ui.basic.violet.active.button, .ui.basic.violet.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #5626bf inset!important; color: #502aa1!important } .ui.basic.violet.button:active, .ui.basic.violet.buttons .button:active { box-shadow: 0 0 0 1px #502aa1 inset!important; color: #502aa1!important } .ui.buttons:not(.vertical)>.basic.violet.button:not(:first-child) { margin-left: -1px } .ui.inverted.violet.button, .ui.inverted.violet.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #a291fb inset!important; color: #a291fb } .ui.inverted.violet.button.active, .ui.inverted.violet.button:active, .ui.inverted.violet.button:focus, .ui.inverted.violet.button:hover, .ui.inverted.violet.buttons .button.active, .ui.inverted.violet.buttons .button:active, .ui.inverted.violet.buttons .button:focus, .ui.inverted.violet.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.violet.button:hover, .ui.inverted.violet.buttons .button:hover { background-color: #8a73ff } .ui.inverted.violet.button:focus, .ui.inverted.violet.buttons .button:focus { background-color: #7d64ff } .ui.inverted.violet.active.button, .ui.inverted.violet.buttons .active.button { background-color: #8a73ff } .ui.inverted.violet.button:active, .ui.inverted.violet.buttons .button:active { background-color: #7860f9 } .ui.inverted.violet.basic.button, .ui.inverted.violet.basic.buttons .button, .ui.inverted.violet.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.violet.basic.button:hover, .ui.inverted.violet.basic.buttons .button:hover, .ui.inverted.violet.buttons .basic.button:hover { box-shadow: 0 0 0 2px #8a73ff inset!important; color: #a291fb!important } .ui.inverted.violet.basic.button:focus, .ui.inverted.violet.basic.buttons .button:focus { box-shadow: 0 0 0 2px #7d64ff inset!important; color: #a291fb!important } .ui.inverted.violet.basic.active.button, .ui.inverted.violet.basic.buttons .active.button, .ui.inverted.violet.buttons .basic.active.button { box-shadow: 0 0 0 2px #8a73ff inset!important; color: #a291fb!important } .ui.inverted.violet.basic.button:active, .ui.inverted.violet.basic.buttons .button:active, .ui.inverted.violet.buttons .basic.button:active { box-shadow: 0 0 0 2px #7860f9 inset!important; color: #a291fb!important } .ui.purple.button, .ui.purple.buttons .button { background-color: #a333c8; color: #fff; text-shadow: none; background-image: none } .ui.purple.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.purple.button:hover, .ui.purple.buttons .button:hover { background-color: #9627ba; color: #fff; text-shadow: none } .ui.purple.button:focus, .ui.purple.buttons .button:focus { background-color: #8f1eb4; color: #fff; text-shadow: none } .ui.purple.button:active, .ui.purple.buttons .button:active { background-color: #82299f; color: #fff; text-shadow: none } .ui.purple.active.button, .ui.purple.button .active.button:active, .ui.purple.buttons .active.button, .ui.purple.buttons .active.button:active { background-color: #9724be; color: #fff; text-shadow: none } .ui.basic.purple.button, .ui.basic.purple.buttons .button { box-shadow: 0 0 0 1px #a333c8 inset!important; color: #a333c8!important } .ui.basic.purple.button:hover, .ui.basic.purple.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #9627ba inset!important; color: #9627ba!important } .ui.basic.purple.button:focus, .ui.basic.purple.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #8f1eb4 inset!important; color: #9627ba!important } .ui.basic.purple.active.button, .ui.basic.purple.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #9724be inset!important; color: #82299f!important } .ui.basic.purple.button:active, .ui.basic.purple.buttons .button:active { box-shadow: 0 0 0 1px #82299f inset!important; color: #82299f!important } .ui.buttons:not(.vertical)>.basic.purple.button:not(:first-child) { margin-left: -1px } .ui.inverted.purple.button, .ui.inverted.purple.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #dc73ff inset!important; color: #dc73ff } .ui.inverted.purple.button.active, .ui.inverted.purple.button:active, .ui.inverted.purple.button:focus, .ui.inverted.purple.button:hover, .ui.inverted.purple.buttons .button.active, .ui.inverted.purple.buttons .button:active, .ui.inverted.purple.buttons .button:focus, .ui.inverted.purple.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.purple.button:hover, .ui.inverted.purple.buttons .button:hover { background-color: #d65aff } .ui.inverted.purple.button:focus, .ui.inverted.purple.buttons .button:focus { background-color: #d24aff } .ui.inverted.purple.active.button, .ui.inverted.purple.buttons .active.button { background-color: #d65aff } .ui.inverted.purple.button:active, .ui.inverted.purple.buttons .button:active { background-color: #cf40ff } .ui.inverted.purple.basic.button, .ui.inverted.purple.basic.buttons .button, .ui.inverted.purple.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.purple.basic.button:hover, .ui.inverted.purple.basic.buttons .button:hover, .ui.inverted.purple.buttons .basic.button:hover { box-shadow: 0 0 0 2px #d65aff inset!important; color: #dc73ff!important } .ui.inverted.purple.basic.button:focus, .ui.inverted.purple.basic.buttons .button:focus { box-shadow: 0 0 0 2px #d24aff inset!important; color: #dc73ff!important } .ui.inverted.purple.basic.active.button, .ui.inverted.purple.basic.buttons .active.button, .ui.inverted.purple.buttons .basic.active.button { box-shadow: 0 0 0 2px #d65aff inset!important; color: #dc73ff!important } .ui.inverted.purple.basic.button:active, .ui.inverted.purple.basic.buttons .button:active, .ui.inverted.purple.buttons .basic.button:active { box-shadow: 0 0 0 2px #cf40ff inset!important; color: #dc73ff!important } .ui.red.button, .ui.red.buttons .button { background-color: #db2828; color: #fff; text-shadow: none; background-image: none } .ui.red.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.red.button:hover, .ui.red.buttons .button:hover { background-color: #d01919; color: #fff; text-shadow: none } .ui.red.button:focus, .ui.red.buttons .button:focus { background-color: #ca1010; color: #fff; text-shadow: none } .ui.red.button:active, .ui.red.buttons .button:active { background-color: #b21e1e; color: #fff; text-shadow: none } .ui.red.active.button, .ui.red.button .active.button:active, .ui.red.buttons .active.button, .ui.red.buttons .active.button:active { background-color: #d41515; color: #fff; text-shadow: none } .ui.basic.red.button, .ui.basic.red.buttons .button { box-shadow: 0 0 0 1px #db2828 inset!important; color: #db2828!important } .ui.basic.red.button:hover, .ui.basic.red.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #d01919 inset!important; color: #d01919!important } .ui.basic.red.button:focus, .ui.basic.red.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #ca1010 inset!important; color: #d01919!important } .ui.basic.red.active.button, .ui.basic.red.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #d41515 inset!important; color: #b21e1e!important } .ui.basic.red.button:active, .ui.basic.red.buttons .button:active { box-shadow: 0 0 0 1px #b21e1e inset!important; color: #b21e1e!important } .ui.buttons:not(.vertical)>.basic.red.button:not(:first-child) { margin-left: -1px } .ui.inverted.red.button, .ui.inverted.red.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #ff695e inset!important; color: #ff695e } .ui.inverted.red.button.active, .ui.inverted.red.button:active, .ui.inverted.red.button:focus, .ui.inverted.red.button:hover, .ui.inverted.red.buttons .button.active, .ui.inverted.red.buttons .button:active, .ui.inverted.red.buttons .button:focus, .ui.inverted.red.buttons .button:hover { box-shadow: none!important; color: #fff } .ui.inverted.red.button:hover, .ui.inverted.red.buttons .button:hover { background-color: #ff5144 } .ui.inverted.red.button:focus, .ui.inverted.red.buttons .button:focus { background-color: #ff4335 } .ui.inverted.red.active.button, .ui.inverted.red.buttons .active.button { background-color: #ff5144 } .ui.inverted.red.button:active, .ui.inverted.red.buttons .button:active { background-color: #ff392b } .ui.inverted.red.basic.button, .ui.inverted.red.basic.buttons .button, .ui.inverted.red.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.red.basic.button:hover, .ui.inverted.red.basic.buttons .button:hover, .ui.inverted.red.buttons .basic.button:hover { box-shadow: 0 0 0 2px #ff5144 inset!important; color: #ff695e!important } .ui.inverted.red.basic.button:focus, .ui.inverted.red.basic.buttons .button:focus { box-shadow: 0 0 0 2px #ff4335 inset!important; color: #ff695e!important } .ui.inverted.red.basic.active.button, .ui.inverted.red.basic.buttons .active.button, .ui.inverted.red.buttons .basic.active.button { box-shadow: 0 0 0 2px #ff5144 inset!important; color: #ff695e!important } .ui.inverted.red.basic.button:active, .ui.inverted.red.basic.buttons .button:active, .ui.inverted.red.buttons .basic.button:active { box-shadow: 0 0 0 2px #ff392b inset!important; color: #ff695e!important } .ui.teal.button, .ui.teal.buttons .button { background-color: #00b5ad; color: #fff; text-shadow: none; background-image: none } .ui.teal.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.teal.button:hover, .ui.teal.buttons .button:hover { background-color: #009c95; color: #fff; text-shadow: none } .ui.teal.button:focus, .ui.teal.buttons .button:focus { background-color: #008c86; color: #fff; text-shadow: none } .ui.teal.button:active, .ui.teal.buttons .button:active { background-color: #00827c; color: #fff; text-shadow: none } .ui.teal.active.button, .ui.teal.button .active.button:active, .ui.teal.buttons .active.button, .ui.teal.buttons .active.button:active { background-color: #009c95; color: #fff; text-shadow: none } .ui.basic.teal.button, .ui.basic.teal.buttons .button { box-shadow: 0 0 0 1px #00b5ad inset!important; color: #00b5ad!important } .ui.basic.teal.button:hover, .ui.basic.teal.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #009c95 inset!important; color: #009c95!important } .ui.basic.teal.button:focus, .ui.basic.teal.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #008c86 inset!important; color: #009c95!important } .ui.basic.teal.active.button, .ui.basic.teal.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #009c95 inset!important; color: #00827c!important } .ui.basic.teal.button:active, .ui.basic.teal.buttons .button:active { box-shadow: 0 0 0 1px #00827c inset!important; color: #00827c!important } .ui.buttons:not(.vertical)>.basic.teal.button:not(:first-child) { margin-left: -1px } .ui.inverted.teal.button, .ui.inverted.teal.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #6dffff inset!important; color: #6dffff } .ui.inverted.teal.button.active, .ui.inverted.teal.button:active, .ui.inverted.teal.button:focus, .ui.inverted.teal.button:hover, .ui.inverted.teal.buttons .button.active, .ui.inverted.teal.buttons .button:active, .ui.inverted.teal.buttons .button:focus, .ui.inverted.teal.buttons .button:hover { box-shadow: none!important; color: rgba(0, 0, 0, .6) } .ui.inverted.teal.button:hover, .ui.inverted.teal.buttons .button:hover { background-color: #54ffff } .ui.inverted.teal.button:focus, .ui.inverted.teal.buttons .button:focus { background-color: #4ff } .ui.inverted.teal.active.button, .ui.inverted.teal.buttons .active.button { background-color: #54ffff } .ui.inverted.teal.button:active, .ui.inverted.teal.buttons .button:active { background-color: #3affff } .ui.inverted.teal.basic.button, .ui.inverted.teal.basic.buttons .button, .ui.inverted.teal.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.teal.basic.button:hover, .ui.inverted.teal.basic.buttons .button:hover, .ui.inverted.teal.buttons .basic.button:hover { box-shadow: 0 0 0 2px #54ffff inset!important; color: #6dffff!important } .ui.inverted.teal.basic.button:focus, .ui.inverted.teal.basic.buttons .button:focus { box-shadow: 0 0 0 2px #4ff inset!important; color: #6dffff!important } .ui.inverted.teal.basic.active.button, .ui.inverted.teal.basic.buttons .active.button, .ui.inverted.teal.buttons .basic.active.button { box-shadow: 0 0 0 2px #54ffff inset!important; color: #6dffff!important } .ui.inverted.teal.basic.button:active, .ui.inverted.teal.basic.buttons .button:active, .ui.inverted.teal.buttons .basic.button:active { box-shadow: 0 0 0 2px #3affff inset!important; color: #6dffff!important } .ui.olive.button, .ui.olive.buttons .button { background-color: #b5cc18; color: #fff; text-shadow: none; background-image: none } .ui.olive.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.olive.button:hover, .ui.olive.buttons .button:hover { background-color: #a7bd0d; color: #fff; text-shadow: none } .ui.olive.button:focus, .ui.olive.buttons .button:focus { background-color: #a0b605; color: #fff; text-shadow: none } .ui.olive.button:active, .ui.olive.buttons .button:active { background-color: #8d9e13; color: #fff; text-shadow: none } .ui.olive.active.button, .ui.olive.button .active.button:active, .ui.olive.buttons .active.button, .ui.olive.buttons .active.button:active { background-color: #aac109; color: #fff; text-shadow: none } .ui.basic.olive.button, .ui.basic.olive.buttons .button { box-shadow: 0 0 0 1px #b5cc18 inset!important; color: #b5cc18!important } .ui.basic.olive.button:hover, .ui.basic.olive.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #a7bd0d inset!important; color: #a7bd0d!important } .ui.basic.olive.button:focus, .ui.basic.olive.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #a0b605 inset!important; color: #a7bd0d!important } .ui.basic.olive.active.button, .ui.basic.olive.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #aac109 inset!important; color: #8d9e13!important } .ui.basic.olive.button:active, .ui.basic.olive.buttons .button:active { box-shadow: 0 0 0 1px #8d9e13 inset!important; color: #8d9e13!important } .ui.buttons:not(.vertical)>.basic.olive.button:not(:first-child) { margin-left: -1px } .ui.inverted.olive.button, .ui.inverted.olive.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #d9e778 inset!important; color: #d9e778 } .ui.inverted.olive.button.active, .ui.inverted.olive.button:active, .ui.inverted.olive.button:focus, .ui.inverted.olive.button:hover, .ui.inverted.olive.buttons .button.active, .ui.inverted.olive.buttons .button:active, .ui.inverted.olive.buttons .button:focus, .ui.inverted.olive.buttons .button:hover { box-shadow: none!important; color: rgba(0, 0, 0, .6) } .ui.inverted.olive.button:hover, .ui.inverted.olive.buttons .button:hover { background-color: #d8ea5c } .ui.inverted.olive.button:focus, .ui.inverted.olive.buttons .button:focus { background-color: #daef47 } .ui.inverted.olive.active.button, .ui.inverted.olive.buttons .active.button { background-color: #daed59 } .ui.inverted.olive.button:active, .ui.inverted.olive.buttons .button:active { background-color: #cddf4d } .ui.inverted.olive.basic.button, .ui.inverted.olive.basic.buttons .button, .ui.inverted.olive.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.olive.basic.button:hover, .ui.inverted.olive.basic.buttons .button:hover, .ui.inverted.olive.buttons .basic.button:hover { box-shadow: 0 0 0 2px #d8ea5c inset!important; color: #d9e778!important } .ui.inverted.olive.basic.button:focus, .ui.inverted.olive.basic.buttons .button:focus { box-shadow: 0 0 0 2px #daef47 inset!important; color: #d9e778!important } .ui.inverted.olive.basic.active.button, .ui.inverted.olive.basic.buttons .active.button, .ui.inverted.olive.buttons .basic.active.button { box-shadow: 0 0 0 2px #daed59 inset!important; color: #d9e778!important } .ui.inverted.olive.basic.button:active, .ui.inverted.olive.basic.buttons .button:active, .ui.inverted.olive.buttons .basic.button:active { box-shadow: 0 0 0 2px #cddf4d inset!important; color: #d9e778!important } .ui.yellow.button, .ui.yellow.buttons .button { background-color: #fbbd08; color: #fff; text-shadow: none; background-image: none } .ui.yellow.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.yellow.button:hover, .ui.yellow.buttons .button:hover { background-color: #eaae00; color: #fff; text-shadow: none } .ui.yellow.button:focus, .ui.yellow.buttons .button:focus { background-color: #daa300; color: #fff; text-shadow: none } .ui.yellow.button:active, .ui.yellow.buttons .button:active { background-color: #cd9903; color: #fff; text-shadow: none } .ui.yellow.active.button, .ui.yellow.button .active.button:active, .ui.yellow.buttons .active.button, .ui.yellow.buttons .active.button:active { background-color: #eaae00; color: #fff; text-shadow: none } .ui.basic.yellow.button, .ui.basic.yellow.buttons .button { box-shadow: 0 0 0 1px #fbbd08 inset!important; color: #fbbd08!important } .ui.basic.yellow.button:hover, .ui.basic.yellow.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #eaae00 inset!important; color: #eaae00!important } .ui.basic.yellow.button:focus, .ui.basic.yellow.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #daa300 inset!important; color: #eaae00!important } .ui.basic.yellow.active.button, .ui.basic.yellow.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #eaae00 inset!important; color: #cd9903!important } .ui.basic.yellow.button:active, .ui.basic.yellow.buttons .button:active { box-shadow: 0 0 0 1px #cd9903 inset!important; color: #cd9903!important } .ui.buttons:not(.vertical)>.basic.yellow.button:not(:first-child) { margin-left: -1px } .ui.inverted.yellow.button, .ui.inverted.yellow.buttons .button { background-color: transparent; box-shadow: 0 0 0 2px #ffe21f inset!important; color: #ffe21f } .ui.inverted.yellow.button.active, .ui.inverted.yellow.button:active, .ui.inverted.yellow.button:focus, .ui.inverted.yellow.button:hover, .ui.inverted.yellow.buttons .button.active, .ui.inverted.yellow.buttons .button:active, .ui.inverted.yellow.buttons .button:focus, .ui.inverted.yellow.buttons .button:hover { box-shadow: none!important; color: rgba(0, 0, 0, .6) } .ui.inverted.yellow.button:hover, .ui.inverted.yellow.buttons .button:hover { background-color: #ffdf05 } .ui.inverted.yellow.button:focus, .ui.inverted.yellow.buttons .button:focus { background-color: #f5d500 } .ui.inverted.yellow.active.button, .ui.inverted.yellow.buttons .active.button { background-color: #ffdf05 } .ui.inverted.yellow.button:active, .ui.inverted.yellow.buttons .button:active { background-color: #ebcd00 } .ui.inverted.yellow.basic.button, .ui.inverted.yellow.basic.buttons .button, .ui.inverted.yellow.buttons .basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset!important; color: #fff!important } .ui.inverted.yellow.basic.button:hover, .ui.inverted.yellow.basic.buttons .button:hover, .ui.inverted.yellow.buttons .basic.button:hover { box-shadow: 0 0 0 2px #ffdf05 inset!important; color: #ffe21f!important } .ui.inverted.yellow.basic.button:focus, .ui.inverted.yellow.basic.buttons .button:focus { box-shadow: 0 0 0 2px #f5d500 inset!important; color: #ffe21f!important } .ui.inverted.yellow.basic.active.button, .ui.inverted.yellow.basic.buttons .active.button, .ui.inverted.yellow.buttons .basic.active.button { box-shadow: 0 0 0 2px #ffdf05 inset!important; color: #ffe21f!important } .ui.inverted.yellow.basic.button:active, .ui.inverted.yellow.basic.buttons .button:active, .ui.inverted.yellow.buttons .basic.button:active { box-shadow: 0 0 0 2px #ebcd00 inset!important; color: #ffe21f!important } .ui.primary.button, .ui.primary.buttons .button { background-color: #2185d0; color: #fff; text-shadow: none; background-image: none } .ui.primary.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.primary.button:hover, .ui.primary.buttons .button:hover { background-color: #1678c2; color: #fff; text-shadow: none } .ui.primary.button:focus, .ui.primary.buttons .button:focus { background-color: #0d71bb; color: #fff; text-shadow: none } .ui.primary.button:active, .ui.primary.buttons .button:active { background-color: #1a69a4; color: #fff; text-shadow: none } .ui.primary.active.button, .ui.primary.button .active.button:active, .ui.primary.buttons .active.button, .ui.primary.buttons .active.button:active { background-color: #1279c6; color: #fff; text-shadow: none } .ui.basic.primary.button, .ui.basic.primary.buttons .button { box-shadow: 0 0 0 1px #2185d0 inset!important; color: #2185d0!important } .ui.basic.primary.button:hover, .ui.basic.primary.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #1678c2 inset!important; color: #1678c2!important } .ui.basic.primary.button:focus, .ui.basic.primary.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #0d71bb inset!important; color: #1678c2!important } .ui.basic.primary.active.button, .ui.basic.primary.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #1279c6 inset!important; color: #1a69a4!important } .ui.basic.primary.button:active, .ui.basic.primary.buttons .button:active { box-shadow: 0 0 0 1px #1a69a4 inset!important; color: #1a69a4!important } .ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child) { margin-left: -1px } .ui.secondary.button, .ui.secondary.buttons .button { background-color: #1b1c1d; color: #fff; text-shadow: none; background-image: none } .ui.secondary.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.secondary.button:hover, .ui.secondary.buttons .button:hover { background-color: #27292a; color: #fff; text-shadow: none } .ui.secondary.button:focus, .ui.secondary.buttons .button:focus { background-color: #2e3032; color: #fff; text-shadow: none } .ui.secondary.button:active, .ui.secondary.buttons .button:active { background-color: #343637; color: #fff; text-shadow: none } .ui.secondary.active.button, .ui.secondary.button .active.button:active, .ui.secondary.buttons .active.button, .ui.secondary.buttons .active.button:active { background-color: #27292a; color: #fff; text-shadow: none } .ui.basic.secondary.button, .ui.basic.secondary.buttons .button { box-shadow: 0 0 0 1px #1b1c1d inset!important; color: #1b1c1d!important } .ui.basic.secondary.button:hover, .ui.basic.secondary.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #27292a inset!important; color: #27292a!important } .ui.basic.secondary.button:focus, .ui.basic.secondary.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #2e3032 inset!important; color: #27292a!important } .ui.basic.secondary.active.button, .ui.basic.secondary.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #27292a inset!important; color: #343637!important } .ui.basic.secondary.button:active, .ui.basic.secondary.buttons .button:active { box-shadow: 0 0 0 1px #343637 inset!important; color: #343637!important } .ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child) { margin-left: -1px } .ui.positive.button, .ui.positive.buttons .button { background-color: #21ba45; color: #fff; text-shadow: none; background-image: none } .ui.positive.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.positive.button:hover, .ui.positive.buttons .button:hover { background-color: #16ab39; color: #fff; text-shadow: none } .ui.positive.button:focus, .ui.positive.buttons .button:focus { background-color: #0ea432; color: #fff; text-shadow: none } .ui.positive.button:active, .ui.positive.buttons .button:active { background-color: #198f35; color: #fff; text-shadow: none } .ui.positive.active.button, .ui.positive.button .active.button:active, .ui.positive.buttons .active.button, .ui.positive.buttons .active.button:active { background-color: #13ae38; color: #fff; text-shadow: none } .ui.basic.positive.button, .ui.basic.positive.buttons .button { box-shadow: 0 0 0 1px #21ba45 inset!important; color: #21ba45!important } .ui.basic.positive.button:hover, .ui.basic.positive.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #16ab39 inset!important; color: #16ab39!important } .ui.basic.positive.button:focus, .ui.basic.positive.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #0ea432 inset!important; color: #16ab39!important } .ui.basic.positive.active.button, .ui.basic.positive.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #13ae38 inset!important; color: #198f35!important } .ui.basic.positive.button:active, .ui.basic.positive.buttons .button:active { box-shadow: 0 0 0 1px #198f35 inset!important; color: #198f35!important } .ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child) { margin-left: -1px } .ui.negative.button, .ui.negative.buttons .button { background-color: #db2828; color: #fff; text-shadow: none; background-image: none } .ui.negative.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.negative.button:hover, .ui.negative.buttons .button:hover { background-color: #d01919; color: #fff; text-shadow: none } .ui.negative.button:focus, .ui.negative.buttons .button:focus { background-color: #ca1010; color: #fff; text-shadow: none } .ui.negative.button:active, .ui.negative.buttons .button:active { background-color: #b21e1e; color: #fff; text-shadow: none } .ui.negative.active.button, .ui.negative.button .active.button:active, .ui.negative.buttons .active.button, .ui.negative.buttons .active.button:active { background-color: #d41515; color: #fff; text-shadow: none } .ui.basic.negative.button, .ui.basic.negative.buttons .button { box-shadow: 0 0 0 1px #db2828 inset!important; color: #db2828!important } .ui.basic.negative.button:hover, .ui.basic.negative.buttons .button:hover { background: 0 0!important; box-shadow: 0 0 0 1px #d01919 inset!important; color: #d01919!important } .ui.basic.negative.button:focus, .ui.basic.negative.buttons .button:focus { background: 0 0!important; box-shadow: 0 0 0 1px #ca1010 inset!important; color: #d01919!important } .ui.basic.negative.active.button, .ui.basic.negative.buttons .active.button { background: 0 0!important; box-shadow: 0 0 0 1px #d41515 inset!important; color: #b21e1e!important } .ui.basic.negative.button:active, .ui.basic.negative.buttons .button:active { box-shadow: 0 0 0 1px #b21e1e inset!important; color: #b21e1e!important } .ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child) { margin-left: -1px } .ui.buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: 0; vertical-align: baseline; margin: 0 .25em 0 0 } .ui.buttons:not(.basic):not(.inverted) { box-shadow: none } .ui.buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .ui.buttons .button { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; margin: 0; border-radius: 0; margin: 0 } .ui.buttons:not(.basic):not(.inverted)>.button, .ui.buttons>.ui.button:not(.basic):not(.inverted) { box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset } .ui.buttons .button:first-child { border-left: none; margin-left: 0; border-top-left-radius: .28571429rem; border-bottom-left-radius: .28571429rem } .ui.buttons .button:last-child { border-top-right-radius: .28571429rem; border-bottom-right-radius: .28571429rem } .ui.vertical.buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .ui.vertical.buttons .button { display: block; float: none; width: 100%; margin: 0; box-shadow: none; border-radius: 0 } .ui.vertical.buttons .button:first-child { border-top-left-radius: .28571429rem; border-top-right-radius: .28571429rem } .ui.vertical.buttons .button:last-child { margin-bottom: 0; border-bottom-left-radius: .28571429rem; border-bottom-right-radius: .28571429rem } .ui.vertical.buttons .button:only-child { border-radius: .28571429rem } .ui.items>.item>.content>.header:not(.ui) { font-size: 15px !important; font-weight: bold; } .ui.items>.item>.content>a.header { color: rgba(0,0,0,.85); /*font-size:15px;*/ } .ui.items>.item .meta { margin: .5em 0 .5em; font-size: 12px; /*line-height: 1em;*/ color: rgba(0,0,0,.6); } .ui.items>.item>.content>.description { margin-top: .6em; max-width: auto; font-size: 14px; /*line-height: 1.4285em;*/ color: rgba(0,0,0,.87); } .banner-section.height_long { height: 534px; } .banner-section { overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; } .spproduct-table { /* font-family: 'Khmer Os Content', Arial, Helvetica, sans-serif;*/ border-collapse: collapse; width: 100%; } .spproduct-table td, .spproduct-table th { border: 1px solid #ddd; padding: 8px; } .spproduct-table tr:nth-child(even){ /*background-color: #f2f2f2;*/ } .spproduct-table tr:hover { background-color: #ddd; } .spproduct-table th { padding-top: 12px; padding-bottom: 12px; text-align: left; /*background-color: #04AA6D;*/ color: white; } .vin-img{ width: 320px; border-radius: 50%; } .product-table { border-collapse: collapse; width: 100%; } .product-table th, .product-table td { padding: 0.25rem; text-align: left; border: 1px solid #ddd; vertical-align: top; } .product-table tbody tr:nth-child(odd) { background: #fae4dd; } @media (max-width: 767px) { .vin-img{ width:100%; margin-bottom:15px; border-radius: 4px; } .wp-block-image{ text-align:center; } } .spparter-wrap{ /*max-width: 500px; */ margin: 0 auto; } .partner-logo{ /*width: 200px;*/ /*margin-left: 25px;*/ /*margin-right: 25px;*/ /*float: left;*/ /*margin-bottom: 20px;*/ /*margin-top: 20px;*/ } @media (max-width: 767px) { .spparter-wrap{ max-width:200px; } .partner-logo{ max-width: 250px; margin:0 auto; /*margin-left: 0px;*/ /*margin-right: 0px; */ /*float:left;*/ } .blog-post-list-thumb { background-size: cover; height: 230px; } } @media (max-width: 690px) { .blog-post-list-thumb { background-size: cover; height: 200px; } .card-body.content-report{ width: 89%; } } .lang-nav { display:none; float: left; /*padding: 8px;*/ /*font-size: 16px;*/ /*color: #fff;*/ /*font-weight: 700;*/ } .lang-nav a { /*text-transform: uppercase;*/ /*font-size: 16px;*/ /*line-height: 24px;*/ /*font-weight: 700;*/ /*padding: 11px 5px;*/ /*color: #fff;*/ } /* .btn-top-calculator{*/ /*display:none;*/ /*}*/ @media (max-width: 990px) { .lang-nav { display:block; } .navbar-area .navbar-brand img{ max-width: 180px; margin-left: -15px; padding-top:10px; } .slider-area{ padding-top: 65px; } /*.btn-top-calculator{*/ /* display:block;*/ /*}*/ /*.m-hide{*/ /* display:none;*/ /*}*/ } @media (max-width: 767px) { .section-title .title { font-size: 30px; line-height: 35px; } .post-news img { margin-bottom:15px; height:auto; width:100%; } .spthirty { height: auto; } .thirty,.calculator-loan .form { width: 100%; } } .elementor-button{ background:#2A5EBB; } .carousel-item video { position: absolute; top: 50%; left: 50%; min-width: 100%; /* min-height: 100%; */ width: 100%; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* The hero image */ .hero-image { /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg"); /* Set a specific height */ height: 50%; /* Position and center the image to scale nicely on all screens */ background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } /* Place text in the middle of the image */ .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } /* */ /*Pagin*/ /* Pagination Styles */ .pagination-wrap { clear: both; margin-top: 30px; text-align: center; } .pagination-wrap .page-numbers { display: inline-block; margin: 0 2px; padding: 5px 10px; border: 1px solid #ccc; border-radius: 3px; background-color: #f9f9f9; color: #333; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .pagination-wrap .page-numbers:hover { background-color: #e9e9e9; } .pagination-wrap .page-numbers.current { background-color: #0073aa; color: #fff; border-color: #0073aa; } /* Customize */ .btn-danger { color: #fff; background-color: #c7000b; border-color: #c7000b; } .navbar-area .navbar .navbar-btn .menu-bar{ font-size: 32px; position: relative; overflow: hidden; color: #971b2f; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-btn:hover .menu-bar{ color: #c7000b; } .ui.primary.button, .ui.primary.buttons .button{ background-color: #e04442; color: #fff; text-shadow: none; background-image: none; } .btn-sp-secondary:hover { color: #fff; background-color: #971b2f; border-color: #971b2f; } .btn-sp-secondary { color: #c6200d; background-color: #f9e5de; border-color: #f9e5de; } .product-link.pull-right:after, .promotion-link.pull-right:after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-left: 15px; color: #dc6454; } .product-link, .promotion-link { font-weight: 400; color: #dc6454; } .product-link:hover, .promotion-link:hover { color: #c7000b; } .footer-area h1, .footer-area h2, .footer-area h3, .footer-area h4, .footer-area h5, .footer-area h6{ /*color:#c7000b;*/ } a:focus, a:hover { text-decoration: none; color: #c7000b; } b, strong { font-weight: bolder; }