.mass-head { position: relative; overflow: hidden; } .domains-section { position: relative; .domain-hero { position: relative; padding: 15px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; .form-search { width: 100%; max-width: 600px; } @media(min-width: 992px) and (max-width: 1200px) { .form-search { max-width: 490px; } } .domain-pricing { display: flex; align-items: center; margin-top: 10px; .featured-tlds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding-right: 10px; margin-right: 10px; border-right: 1px solid @default-border-color; &:last-child { margin-right: 0; padding-right: 0; border: 0 none; } &.tld-img { img { vertical-align: baseline; margin-top: 6px; } } } .tld, .dots { font-weight: 900; margin-right: 4px; } .tld { font-size: 1.2rem; } .dots { margin-right: 0; color: @themeColor; } } } .serach-form { display: flex; align-items: center; position: relative; background: @white; width: 100%; padding: 6px; margin: 0 auto; border-radius: 4px; border: 1px solid @default-border-color; .form-control { border: 0 none; box-shadow: none; } .input-group-icon { margin: 0 8px; font-size: 18px; color: @gray-light; } .input-group-btn { display: flex; width: auto; margin-left: 8px; .btn { min-width: 110px; } } } @media (max-width: 586px) { .serach-form { display: block; background: 0 0; border: 0 none; box-shadow: none; .domain-pricing { margin-top: 15px; } .input-group-icon { display: none; } .form-control { margin-bottom: 7.5px; border: 1px solid @default-border-color; width: 100%; } .input-group-btn { width: 100%; margin-left: 0; .btn { flex: 1; } } } } @media (min-width: 992px) { flex-direction: row; .form-search { margin-left: 15px; order: 2; } .domain-pricing { margin: 0 15px 0 0; order: 1; } } &.in-inner-block { .form-search { max-width: 768px; } .domain-pricing { margin: 30px 0 0; .featured-tlds { div { padding: 8px; margin-top: 8px; border: 1px solid @default-border-color; border-radius: 4px; .tld { font-size: 19px; } } } } .serach-form { box-shadow: 0 4px 16px 0 rgba(19,26,44,.02), 0 0 32px 0 rgba(19,26,44,.1); } } .tld-content { display: flex; align-items: center; position: relative; padding: 8px 40px; &.tld-img { img { vertical-align: baseline; margin-top: 6px; } } .tld, .dots { font-weight: 900; margin-right: 8px; } .tld { font-size: 19px; } .dots { margin-right: 0; color: @themeColor; } .tld-price { white-space: nowrap; } } .tld-content+.tld-content:before { content: ""; width: 1px; height: 24px; background: @default-border-color; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } &.full-width { padding: 0; align-items: normal; .form-search { margin-bottom: 10px; width: 100%; max-width: 100%!important; order: 1; @media (max-width: 633px) { margin-top: 10px; } } .serach-form { border-top-width: 2px; padding: 3px; } .domain-pricing { justify-content: space-between; margin-bottom: 10px; order: 2; @media (max-width: 767px) { flex-direction: column; } .featured-tlds { justify-content: left; margin-left: 10px; } .btn { padding: 10px; } } @media (min-width: 992px) { flex-direction: column; .form-search { margin-left: 0; } .domain-pricing { margin-right: 0; } } } } &.sec-img-bg { background-image: url(../../images/sec-bg10.jpg); } &.bg-primary { .domain-hero .domain-pricing { .dots { color: @white; } } } &.bg-primary, &.dark, &.inverse { .domain-hero .domain-pricing { .tld-content { &.tld-img { .tld { img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } } } } .featured-tlds { .tld-img { .tld { img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } } } } } } } @media (min-width:1200px) { .container-xl { width: 100%; max-width: 1520px; } } section, .sec { &.products, &.about, &.social, &.testimonials, &.features, &.faqs, &.editor, &.feature-list, &.teamlist, &.gallery, &.domains, &.site-banner-domain { padding: 60px 0; &.inner-30 { padding: 30px 0; } h1, h2, .h1, .h2 { margin: 0 0 30px; } .domain-hero { flex-direction: column!important; .form-search, .domain-pricing { margin: 0; } .domain-pricing { margin-top: 20px; order: 2; } } } .tech-specs { ul { margin-bottom: 0; li { position: relative; list-style: none; font-size: 110%; padding: 2px 0 2px 20px; &:before { position: absolute; content: "\f058"; margin-right: 4px; font-family: "Font Awesome 5 Pro"; color: @themeColor; font-size: @baseFontSize + 2; left: 0; } } } } .swiper-pagination-bullet { width: 10px; height: 10px; border: 1px solid @brand-secondary; border-radius: 0!important; background-color: @white; } .swiper-pagination-bullet-active { border-color: @brand-secondary; background-color: lighten(@brand-secondary, 20%); transform: scale(1.2); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0; } .swiper-button-next, .swiper-button-prev { top: 50%; transform: translateY(-50%); height: auto; margin: 0; .btn_icon_large { display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 15px; background-color: var(--white); box-shadow: 2px 15px 30px rgba(0, 0, 0, .15); font-size: 21px; } &:after { display: none; } } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: -40px; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: -40px; } @media (min-width: 1200px) { .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: -60px; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: -60px; } } @media (max-width: 991px) { .swiper-button-next, .swiper-button-prev { .btn_icon_large { padding: 10px; font-size: @baseFontSize; } } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: -5px; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: -5px; } } } @media (min-width: 992px) { section, .sec { &.products, &.about, &.social, &.testimonials, &.features, &.faqs, &.editor, &.feature-list, &.teamlist, &.gallery, &.domains, &.site-banner-domain { padding: 120px 0; &.inner-t-60 { padding-top: 60px; } &.inner-t-30 { padding-top: 30px; } &.inner-b-60 { padding-bottom: 60px; } &.inner-b-30 { padding-bottom: 30px; } } .tech-specs { h3, .h3 { border-bottom: 3px double @default-border-color; padding: 0 0 10px 10px; } ul { padding-left: 0; } } } } section, .sec { &.products { &.margin-up { padding: 0 0 60px; z-index: 2; .@{brand}-pricing-container { margin-top: -100px; } } } &.call-to-action, .sec_banner { .sec-title { margin: 0 0 1.5rem; } .sec-desc { margin-top: 1.5rem; } .sec-actions { padding-top: 2rem; } &.sec-col-2 { .sec-block { display: flex; align-items: center; justify-content: space-between; flex-direction: row; .sec-col-first, .sec-col-last { img { margin: 0 auto; } } } @media only screen and (max-width: 767px) { .sec-block { flex-direction: column; .sec-col-first, .sec-col-last { margin-bottom: 30px; } } } } } } @media only screen and (max-width: 991px) { section,.sec { &.footer { &.spc { padding-bottom: 170px; } } } } section, .sec { &.social { .news-blocks { .card { .card-body { padding: 0; } .card-footer { padding: 0.75rem 0 0; background-color: transparent; border: 0 none; } } } } } section, .sec { &.products, &.about, &.social, &.testimonials, &.features, &.faqs, &.editor, &.feature-list, &.teamlist, &.gallery, &.domains, &.site-banner, &.site-banner-domain { .sec-description { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 768px; margin: 0 auto 3rem; } .sec-caption { display: block; margin-bottom: @headings-margin-bottom * 2; span { display: inline-block; border: 1px solid var(--primary); padding: .08em .5em; } } h1, .h1 { &.sec-title { font-size: @font-size-base * 3; font-weight: 900; margin-bottom: @headings-margin-bottom * 3; } } h2, .h2 { &.sec-title { font-size: @font-size-base * 2.5; font-weight: 700; margin-bottom: @headings-margin-bottom * 3; } } .sec-subtitle { font-size: @h5-font-size; font-weight: 300; ul { text-align: left; } } #enableSoundButton { background-color: rgba(0,0,0,0.6); color: var(--white); border-radius: 0.75rem; position:absolute; padding: 0.5rem; top:1rem; right: 2rem; width: auto; .btn-text { display: none; transition: all 0.2s ease-in-out; } &:hover, &:focus { .btn-text { display: inline-block; } } } } } .site-banner { position: relative; overflow: hidden; .banner_body { padding: 60px 0; position: relative; .banner-content-container { position: relative; z-index: 2; .banner_content { .action { display: flex; align-items: center; margin-top: 2rem; .pricing { display: flex; flex-direction: column; margin-left: 1rem; .price { display: flex; align-items: baseline; white-space: nowrap; .cost { font-size:36px; } } &.group { text-align: left!important; line-height: 33px; } } } } .banner_graphic { display: flex; align-items: center; justify-content: center; .img-fluid { max-height: 480px; } } } &.graphics { &.centered { background-size: cover; background-repeat: no-repeat; background-position: 50%; } } &.bg-primary, &.inverse, &.dark { .banner_content { .sec-caption { span { border-color: var(--white); } } } } &.bg-opacity { &:before { background-color: #000000; content: ""; z-index: 1; position: absolute; height: 100%; width: 100%; left: 0; right: 0; top:0; opacity: 50%; } } &.bg-opacity-light { &:before { background-color: #ffffff; content: ""; z-index: 1; position: absolute; height: 100%; width: 100%; left: 0; right: 0; top:0; opacity: 50%; } } .banner-bg-video-container { position: absolute; bottom: 0; right: 0; top: 0; left: 0; overflow: hidden; .banner-bg-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto; width: 100%; min-width: 100%; min-height: 100%; object-position: 50% 50%; object-fit: cover; background-position: center center; } } .banner-bg-container { position: absolute; bottom: 0; right: 0; top: 0; overflow: hidden; @media (max-width: 1399px) { right: unset; left: 50%; transform: translateX(-50%); } .banner-bg { height: 100%; img { height: 100%; } } } } } .site-banner-domain { position: relative; overflow: hidden; .banner-content-container { position: relative; z-index: 2; .banner_graphic { display: flex; align-items: center; justify-content: center; .img-fluid { max-height: 480px; } } .domain-hero { display: block; .nav { margin-bottom: 1rem; .nav-item { .nav-link { &.active { border-bottom: 3px solid var(--primary); } } } } .tab-content { max-width: 768px; width: 100%; .tab-pane { .form-search { .input-group { display: flex; align-items: center; position: relative; background: @white; width: 100%; padding: 6px; margin: 0 auto; border-radius: 0.25rem; border: 1px solid @default-border-color; box-shadow: 0 4px 16px 0 rgba(19,26,44,.02), 0 0 32px 0 rgba(19,26,44,.1); .form-control { border: 0 none; box-shadow: none; } .input-group-icon { margin: 0 8px; font-size: 18px; color: @gray-light; } .input-group-btn { display: flex; width: auto; margin-left: 8px; .btn { min-width: 110px; } } } @media (max-width: 586px) { .input-group { display: block; background: 0 0; border: 0 none; box-shadow: none; .input-group-icon { display: none; } .form-control { margin-bottom: 0.5rem; border: 1px solid @default-border-color; width: 100%; } .input-group-btn { width: 100%; margin-left: 0; .btn { flex: 1; } } } } } } } .domain-tlds { margin-top: 3rem; .featured-tlds { .tld-container { display: flex; align-items: center; .tld-item { display: flex; align-items: center; padding: 2px 10px; margin-right: 1.5rem; border: 1px solid var(--primary); border-radius: 0.25rem; height: 40px; .tld, .dots { font-weight: 900; } .dots { color: var(--secondary); } .tld { font-size: @font-size-base * 1.25; } .tld-graphics { display: flex; align-items: center; } } .tld-price { font-size: @font-size-base * 1.25; font-weight: 300; } &:not(:first-child) { padding-left: 2.5rem; } &:not(:last-child) { padding-right: 2.5rem; } +.tld-container:before { content: ""; width: 1px; height: 24px; background: @default-border-color; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } } } } } } &.compact { padding: 1rem 0; .domain-tlds { .featured-tlds { .tld-container { .tld-item { .tld { font-size: @font-size-base!important; } } .tld-price { font-size: @font-size-base!important; } } } } } } .site-banner-domain, .sec.features, .sec.gallery { position: relative; overflow: hidden; .banner-content-container { position: relative; z-index: 2; } &.graphics { &.centered { background-size: cover; background-repeat: no-repeat; background-position: 50%; } } &.bg-primary, &.inverse, &.dark { .banner_content { .sec-caption { span { border-color: var(--white); } } .domain-hero { .tab-content { .nav { .nav-item { .nav-link { color: var(--white); &.active { border-bottom: 3px solid var(--white); } } } } } .domain-tlds .featured-tlds .tld-container .tld-item { border-color: var(--white); } } } } &.bg-opacity { &:before { background-color: #000000; content: ""; z-index: 1; position: absolute; height: 100%; width: 100%; left: 0; right: 0; top:0; opacity: 50%; } } &.bg-opacity-light { &:before { background-color: #ffffff; content: ""; z-index: 1; position: absolute; height: 100%; width: 100%; left: 0; right: 0; top:0; opacity: 50%; } } .banner-bg-video-container { position: absolute; bottom: 0; right: 0; top: 0; left: 0; overflow: hidden; .banner-bg-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto; width: 100%; min-width: 100%; min-height: 100%; object-position: 50% 50%; object-fit: cover; background-position: center center; } } .banner-bg-container { position: absolute; bottom: 0; right: 0; top: 0; overflow: hidden; @media (max-width: 1399px) { right: unset; left: 50%; transform: translateX(-50%); } .banner-bg { height: 100%; img { height: 100%; } } } } @media (min-width: 992px) { .site-banner { .banner_body { padding: 120px 0; &.inner-t-60 { padding-top: 60px; } &.inner-b-60 { padding-bottom: 60px; } &.inner-t-30 { padding-top: 30px; } &.inner-b-30 { padding-bottom: 30px; } } } } .site-banner, .@{brand}-Slider { .swiper-pagination { bottom: auto; top:30px; left: auto; right: 30px; width: auto; } } .hero { position: relative; padding: 60px 0; z-index: 1; &.spc { padding: 2rem 0 1rem; .logo-section { .logo { display: inline-flex; align-items: center; img { height: 40px; max-height: 40px; } span { font-size: 1.7em; color: @baseFontcolor; font-weight: 900; white-space: nowrap; } } } .lang-btn { @media (max-width: 991px) { margin-bottom: -45px; } } } } .block-s1 { padding: 10px 0; p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { padding: 0; margin: 10px 15px; } @media (max-width: 992px) { .text-right, .text-left { text-align: center!important; } } @media (max-width: 480px) { h1, h2, .h1, .h2 { font-size: 27px; } } &.notice { padding: 10px; } } .block-s2, .block-s4, .block-s5 { padding: 20px 0 5px; } .block-s3 { h1, h2, .h1, .h2 { margin-bottom: 20px; } padding: 30px 0; &.padding2x { padding: 60px 0; } &.padding3x { padding: 90px 0; } &.padding4x { padding: 120px 0; } &.bottom2x { padding: 30px 0 60px; } &.bottom3x { padding: 45px 0 90px; } } @media(min-width:767px) { .block-s2 { padding: 80px 0 50px; } .block-s5 { padding: 80px 0; } } .arrow-block { display: block; height: auto; position: relative; padding: 15px; &:before { content: ""; width: 25px; height: 25px; display: block; position: absolute; background-color: inherit; margin-left: -15px; top: 100%; margin-top: -15px; left: 50%; .rotate(45deg); z-index: 3; } } .block-footer { .@{brand}-partners { position: relative; padding: 25px 0 15px; z-index:1; } .footer-widgets { padding: 30px 0; border-top: 1px solid @default-border-color; &.primary, &.bg-primary { border-color: @themeColor; } .footer-navbar { display: flex; flex-direction: column; flex-wrap: wrap; @media only screen and (min-width: 768px) { flex-direction: row; } } @media only screen and (max-width: 991px) { .contacts_box { display: flex; flex-direction: column; align-items: center; justify-content: center; h4 { display: block; width: 100%; text-align: center; } .btn-contacts { display: block; width: 100%; } } } @media only screen and (min-width: 768px) { span { &.pull-right { display: none; } } .collapse { display: block!important } ul { height: auto!important; } } ul.list-unstyled { li { &:not(:first-child) { padding-top: 10px; } a { color: @FooterLink; &:hover, &:active, &:focus { color: @FooterHoverLink; text-decoration: none; } } } } h4, .h4 { font-size: @baseFontSize + 4; margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid @default-border-color; @media (min-width: 768px) { display: inline-block; padding-right: 3rem; } } p { display: flex; align-items: center; font-size: @baseFontSize + 4; font-weight: 500; .fas, .fab, .far, .fal, .fad { margin-right: 5px; } } @media only screen and (max-width: 767px) { h4, .h4 { cursor: pointer; padding: 7.5px 0; } } &.dark, &.inverse, &.bg-primary, &.primary { h4, .h4 { color: @white; } ul.list-unstyled, ul.list-inline { a, .fab { color: @navbarDarklink; &:hover, &:active, &:focus { color: @navbarDarklink-hover; } } } .social-icons a.btn-social .fab { color: @navbarDarklink; } p { color: rgba(255,255,255,0.7); } } &.primary { background: linear-gradient(90deg,darken(@themeColor, 25%),@themeColor 100%); } &.picons { padding: 30px 0 45px; } } .fcCode { margin: 2rem 0; } .sfooter { border-top: 1px solid @default-border-color; } .footer-last { display: flex; align-items: center; justify-content: space-between; flex-direction: column; padding: 15px 0; @media (min-width: 768px) { flex-direction: row; } .btn-container { display: flex; align-items: center; @media (max-width: 767px) { flex-direction: column; } } .footer-copyright, li a { font-size: @baseFontSize; color: @FooterLink; a { &:hover, &:focus { color: @FooterHoverLink; } } } .nav { justify-content: center; li { a { margin: 0 0.5rem; } } } @media (min-width: 768px) { .nav { justify-content: flex-start; li { &:first-child { a { margin-left: 0; } } &:last-child { a { margin-right: 0; } } } } } &.picons { padding: 45px 0 30px; } .social-icons { align-items: center; justify-content: center; } } @media (min-width: 768px) { .footer-widgets, .footer-widgets.picons { padding: 90px 0; } } .payment-icons { position: absolute; left: 0; right: 0; top: -30px; display: flex; justify-content: center; align-items: center; z-index: 1; ul { display: flex; justify-content: center; align-items: center; padding: 10px; background-color: @white; border: 1px solid @default-border-color; border-radius: 4px; list-style: none; margin: 0; li { display: inline-block; padding-right: 5px; padding-left: 5px; .fab, .fas, far, .fal, .fed { font-size: 23px; color:#777; @media (min-width: 281px) { font-size: 37px; } } &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } } } } .social-icons { display: flex; flex-wrap: wrap; a { &.btn-social { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: 0.175rem; padding: 0; .fab { font-size: 18px; color: @themeColor; margin: 0; } &:hover, &:focus { background-color: @themeColor; border-color: @themeColor; .fab { color: @white; } } &.large { width: 2.75rem; height: 2.75rem; .fab { font-size: 21px; } } } } } } .back-to-top { &.btn { padding:6px 8px!important; font-size: 1.5rem; @media (min-width: 768px) { margin-left: 1rem; } } } .shadow { &:before { background-color: transparent; background-image: linear-gradient(0deg,transparent 61%,#EDF0F5 100%); z-index: -1; content: ""; position: absolute; height: 100%; width: 100%; left: 0; right: 0; top:0; } } // Call to action block .sec-img-bg { background-image: url(../../images/sec-bg1.jpg); background-attachment: fixed; background-origin: initial; background-clip: initial; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat: no-repeat; background-position: 100% 0; background-position: center; z-index: 1; position: relative; h1, h2, h3, h4, p, .h1, .h2, .h3, .h4 { color: @white; } &.bg-opacity { &:before { background: #000000; content: ""; z-index: -1; position: absolute; height: 100%; width: 100%; left: 0; right: 0; top:0; opacity:0.7!important; } &.inverse, &.dark { &:before { background: #000000; } } } } .sec-img-bg-2 { background-image: url(../../images/sec-bg1.jpg); background-attachment: fixed; background-origin: initial; background-clip: initial; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat: no-repeat; background-position: 100% 0; background-position: center; z-index: 1; position: relative; &.bg-opacity { &:before { background: #000000; content: ""; z-index: -1; position: absolute; height: 100%; width: 100%; left: 0; right: 0; top:0; opacity:0.7; } } } .@{brand}-Slider { position: relative; overflow: hidden; .swiper-container { &.effects .@{brand}-animation[data-delay-transtion="1"] { .transition-delay(100ms); } &.effects .@{brand}-animation[data-delay-transtion="2"] { .transition-delay(300ms); } &.effects .@{brand}-animation[data-delay-transtion="3"] { .transition-delay(600ms); } &.effects .@{brand}-animation[data-delay-transtion="4"] { .transition-delay(900ms); } &.effects .@{brand}-animation[data-delay-transtion="5"] { .transition-delay(1200ms); } &.effects .@{brand}-animation[data-delay-transtion="6"] { .transition-delay(1500ms); } .@{brand}-animation { .transform(translateY(70%)); opacity:0; .transition(all 1.3s); -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .slides { &.swiper-slide-active { .@{brand}-animation { .transform(translateY(0)); opacity:1; } } } } .row { display: flex !important; flex-direction: column !important; align-items: center !important; @media (min-width: 992px) { flex-direction: row !important; } } .slides { .hero-outer { padding: 180px 0; z-index:2; &.sp { padding: 120px 0; } .hgroup { ul { display: flex; flex-direction: column; list-style: none; padding-left: 0; @media (max-width: 991px) { align-items: center; justify-content: center; } li { position: relative; padding: 5px 0 0 25px; &:before { position: absolute; content: "\f00c"; margin-right: 4px; font-family: "Font Awesome 5 Pro"; left: 0; } } } h1, .h1 { font-size: 37px; font-weight: 900; padding: 0; @media (min-width: 992px) { font-size: 65px; } @media (min-width: 768px) and (max-width: 991px) { font-size: 47px; } } h3, .h3 { font-style: italic; margin-top: 10px; font-weight: 100; line-height: normal; } @media (max-width: 599px) { h3, .h3 {font-size: 1.25rem;} } h4, .h4 { font-style: italic; margin-top: 10px; font-weight: 100; } .buttons { margin: 40px 0; br { display : none; } .btn { &:first-of-type { margin-right : 20px; } } .pricing { line-height: 30px; .price { align-items: baseline; flex-wrap: wrap; word-break: break-all; font-size: 36px; font-weight: 900; .cycle { font-size: @baseFontSize; font-weight: 300; } } .starting { font-weight: 300; } } } @media (max-width: 991px) { .buttons { flex-direction: column-reverse; justify-content: center; margin: 0; .btn { &:first-of-type { margin-right : 0; } } } } @media (max-width: 599px) { .buttons { .btn { padding: 13px 15px; font-size: 13px; } } } @media (max-width: 767px) { .flex-row { flex-direction: column !important; .col-md-9 { width: 100%; } } } &.text-dark { h1, .h1 { color: @baseHeadingcolor!important; } h2, .h2, h3, .h3, h4, .h4, h5, .h5, ul li, ul li a { color: @baseFontcolor!important; } } } } .slide-bg { border-top: 5px solid @brand-secondary; position: relative; overflow: hidden; &.ibg { background-image: url(../../images/hero-bg1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } &.ibg, &.bg-primary, &.dark, &.primary { .hero-outer { .hgroup { color: @white; h1, h2, h3, h4, .h1, .h2, .h3, .h4, ul li, ul li a { color: @white; } } } } &.dark { border-color: @brand-secondary!important; } &.bg-primary { border-color: @themeColor; } &.primary { background: linear-gradient(90deg,darken(@themeColor, 7%),@themeColor); } &.bg-opacity { z-index: 1; &:before { background: linear-gradient(to right, #000000 0%, transparent 100%); content: ""; z-index: -1; position: absolute; height: 100%; width: 100%; left: 0; right: 0; } } &.top { background-position: top center; } &.bottom { background-position: bottom center; } } } } /// Couder Slider .hero-bg-wrap { position: relative; border-top: 5px solid @brand-secondary; background-image: url(../../images/hero-bg1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; color: @white; z-index: 1; .page-title { text-align: center; padding: 30px 0; h1, .h1 { margin: 0; font-size: 26px; } } .item { margin-bottom: 15px; } .bg-shape-poly { padding: 20px 55px 55px 105px; margin-left: -90px; background: url(../../images/hero-bg-poly.svg); background-repeat: no-repeat; background-size: 100% 100%; margin-bottom: 30px; } ul { list-style: none; padding-left: 0; li { position: relative; padding: 5px 0 0 25px; &:before { position: absolute; content: "\f00c"; margin-right: 4px; font-family: "Font Awesome 5 Pro"; left: 0; } } } @media only screen and (max-width: 479px) { ul { display: none; } } h1, h2, .h1, .h2 { color: @white; .fab { font-weight: normal!important; } } h1, .h1 { font-size: @baseFontSize + 7; } h2, .h2 { font-size: 27px; margin-bottom: 25px; } .buttons { margin: 10px 0 0; br { display : none; } .btn { &:first-of-type { margin-right : 20px; } } .pricing { line-height: 30px; .price { align-items: baseline; flex-wrap: wrap; word-break: break-all; font-size: 36px; font-weight: 900; .cycle { font-size: @baseFontSize; font-weight: 300; } } .starting { font-weight: 300; } } } @media (max-width: 991px) { .buttons { flex-direction: column-reverse; justify-content: center; margin: 0; .btn { &:first-of-type { margin-right : 0; } } } } @media (max-width: 599px) { .buttons { .btn { padding: 13px 15px; font-size: 13px; } } } .carousel { &.tc-carousel { .carousel-indicators { top: auto; bottom: -23px; margin: 0; width: auto; right: 0; left: 0; li { &.active { width: 15px; background-color: @brand-secondary; } } &.left { justify-content: flex-start; } @media (max-width:768px) { top: -15px; bottom: auto; } } } } @media (min-width: 768px) { padding-bottom: 120px; .page-title { padding: 60px 0; h1, .h1 { font-size: 43px; } } .bg-shape-poly { padding: 70px 130px 60px 105px; } h2, .h2 { font-size: 43px; } } @media (max-width: 468px) { h2, .h2 { font-size: 27px; } } &.small-header { background-image: url(../../images/sec-bg3.jpg); padding: 0; &.bg-opacity { &:before { opacity: 0.70; } } &.bg-primary, &.dark { background-image: none; &:before { display: none; } } &.bg-primary { border-color: @brand-secondary!important; } &.inverse, &.dark { border-color: @brand-secondary!important; } } &.bg-opacity { &:before { background: #000000; content: ""; z-index: -1; position: absolute; height: 100%; width: 100%; left: 0; right: 0; opacity: 0.20; } } } .sheaderbg { position: relative; .page-title { text-align: center; padding: 30px 0; h1, .h1 { margin: 0; font-size: 26px; } } h1, .h1 { font-size: @baseFontSize + 7; } @media (min-width: 768px) { .page-title { padding: 60px 0; h1, .h1 { font-size: 43px; } } h2, .h2 { font-size: 43px; } } @media (max-width: 468px) { h2, .h2 { font-size: 27px; } } &.tborder { border-top: 5px solid @brand-secondary!important; &.primary, &.bg-primary, &.dark, &.inverse, &.bg-light, &.light, &.bg-white { border-top-color: @brand-secondary!important; } } }