/* Web Font */ /****** HGS4 Font ******/ @font-face { font-family: 'hgs4'; src: url('../web-font/HurmeGeometricSans4-Hairline.otf'); font-weight: 100; } @font-face { font-family: 'hgs4'; src: url('../web-font/HurmeGeometricSans4-Thin.otf'); font-weight: 200; } @font-face { font-family: 'hgs4'; src: url('../web-font/HurmeGeometricSans4-Light.otf'); font-weight: 300; } @font-face { font-family: 'hgs4'; src: url('../web-font/HurmeGeometricSans4.otf'); font-weight: 400; } @font-face { font-family: 'hgs4'; src: url('../web-font/HurmeGeometricSans4-SemiBold.otf'); font-weight: 500; } @font-face { font-family: 'hgs4'; src: url('../web-font/HurmeGeometricSans4-Bold.otf'); font-weight: 700; } /****** Opan Sans ******/ @font-face { font-family: 'Open Sans'; src: url('../web-font/OpenSans-Bold.ttf'); font-weight: 700; } @font-face { font-family: 'Open Sans'; src: url('../web-font/OpenSans-Light.ttf'); font-weight: 300; } @font-face { font-family: 'Open Sans'; src: url('../web-font/OpenSans-Regular.ttf'); font-weight: 400; } /* Default */ /****** Apply to all Pages ******/ body { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; color: #000; line-height: 1.2; } h1, h2, h3, h4, h5, h6 { font-family: 'hgs4', sans-serif; font-weight: 700; color: #000; line-height: 1.2; } dl, ol, ul { line-height: 1.2; } a { color: #ab0031; } p { line-height: 1.3; } p:last-child { margin-bottom: 0; } img { max-width: 100%; height: auto; } .nilpadding { padding: 0; } .container-full { margin: 0; width: 100%; } ::selection { background: #5a727d; } /****** Home Page ******/ .loader img { top: 43%; left: 48%; position: absolute; width: 4%; animation: fadeIn 3.5s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94); } /****** Member Login CSS ******/ .member-header { padding: 1.5rem 1.2em; } h2.member-login-title { color: #5a727d; font-size: 14px; } .member-body { font-size: 14px; padding: 0 3rem 3em; } .member-body label b { font-weight: 400; } .member-body input { color: #000; font-family: hgs4; font-weight: 400; height: 2.5rem; margin-bottom: 15px; } .member-btn { background-color: #924e4f; box-shadow: none; } .member-btn:hover { background-color: #132834; } /****** Nav Bar & Side Menu ******/ .side-menu-logo { margin: 1rem 0; text-align: center; } .hamburger-menu { text-align: center; } .hamburger-menu p { color: #132834; font-size: 10px; margin-top: 12px; } .side-menu-logo img { width: 25%; } hr.side-nav-space, hr.side-menu-space { margin: 1rem auto; width: 86%; } .side-menu-list { text-align: left; } .side-menu-list ul li { margin-bottom: 15px; } .side-menu-list ul li>ul li { margin-bottom: 0; padding: 0 0 0 5%; } .side-menu-list ul li a { font-family: hgs4; font-size: 14px; font-weight: 500; padding: 0 7% 5px; text-transform: uppercase; } .side-menu-list ul li p { color: #CCC; font-size: 12px; padding: 0 2%; } .side-menu-social { text-align: left; } ul.side-media-icon li { display: inline-block; margin: 0 3%; padding: 0 2%; } .side-menu-social ul li a { padding: 0; } .side-menu-social ul li i:before { color: #FFF; } ul.side-contact { text-align: left; } ul.side-contact li { display: block; margin-bottom: 1rem; } ul.side-contact li p, ul.side-contact li a { color: #FFF; font-family: hgs4; font-size: 14px; font-weight: 500; margin: 0; padding: 0 5% 5px; } ul.side-contact li a { color: #CCC; font-size: 12px; } header.navbar { border: none; margin: 0; z-index: 999; } .admin-login { position: absolute; top: 5em; right: 7em; z-index: 110; transition: 0.3s; } .admin-login a { cursor: pointer; display: block; margin: auto; } .admin-login a img { filter: invert(1); width: 70%; } body.hamopen { overflow: hidden; } body.hamopen .global-menu { overflow-y: auto; visibility: visible; opacity: 1; } body.hamopen .admin-login a img { filter: invert(1); } .global-menu { display: block; margin-top: 6em; visibility: hidden; opacity: 0; } .global-menu .expd-menu { padding: 0em 2em 4em; } .shape-overlays { z-index: 5; } .shape-overlays__path:nth-of-type(1) { fill: #000000; } .shape-overlays__path:nth-of-type(2) { fill: #1d1d1f; } .shape-overlays__path:nth-of-type(3) { fill: #132733; } .hamburger__line-in::before, .hamburger__line-in::after { background-color: #132834; } .hamburger.is-opened-navi .hamburger__line-in::before, .hamburger.is-opened-navi .hamburger__line-in::after { background-color: #fff; } .inner-nav-about { width: 80%; } .inner-nav-about p { letter-spacing: 0.1em; line-height: 1.5em; } .logo-nav img { width: 100px; margin: 2em 0; } .social-list li a:before { color: #fff; } .social-list li a:hover:before { color: #6534ff; } .expd-menu { width: 100%; } .expd-menu, .expd-menu a { color: #fff; } .expd-menu .navbar-inner li { margin: 2em 0; } .expd-menu .navbar-inner li a { font-size: 20px; text-transform: uppercase; letter-spacing: 0.3em; display: inline-block; } .side-menu-list li a:hover, .side-menu-list li.active a { text-decoration: line-through; } .right-login a { border: 3px solid #c7c7c7; border-radius: 50px; padding: 0.5em 1em; font-weight: bold; transition: 0.5s; } .right-login a:hover { background-color: #c7c7c7; } .social-float { position: fixed; top: 50%; right: 30px; transform: translate(0, -50%); } .social-float>a { width: 3.5em; height: 3.5em; display: block; border-radius: 50%; border: 0.3em solid #000; position: relative; font-size: 14.7px; text-align: center; } .social-float>a i.fa-facebook { line-height: 3.3em; } .social-float>a i.fa-instagram { line-height: 3.1em; } .social-float>a:not(:last-child) { margin-bottom: 10px; } .social-float>a:not(:last-child):after { content: ''; position: absolute; top: 100%; left: 50%; height: 1em; border-left: 3px solid #000; z-index: -1; transform: translate(-50%, 0); } .social-float>a:hover { border-color: #6534ff; } .social-float>a:hover i:before { color: #6534ff; } .kl_branch, .kk_branch { padding: 3px 0; } .kl_branch>p, .kk_branch>p { text-decoration: underline; } .company-profile hr {margin: -8px auto 15px; width: 86%;} .company-profile li {margin-bottom: 0 !important;} .company-profile li a {padding-bottom: 0 !important;} /****** Home Page CSS ******/ .home-bg-img { position: relative; } area { outline: none; } .tooltip-9 { background: red; } .home-title { left: 0; right: 0; position: absolute; text-align: center; top: 60%; z-index: 1; } .home-title h2 { color: #FFF; font-family: hgs4; font-size: 3.5em; font-weight: 300; margin: 1rem 0; text-transform: uppercase; } .home-title h2 span { font-weight: 700; } .home-bg-btn a button { background: transparent; border: 1px solid #FFF; color: #FFF; font-family: hgs4; font-size: 13px; font-weight: 400; padding: 1rem 2.7rem; text-transform: uppercase; transition: 0.3s; } .home-bg-btn a button:hover { background: #132834; border: 1px solid #132834; color: #FFF; font-size: 13px; font-weight: 400; outline: none; } .learn-more-btn a button:hover { background: #132834; border: 1px solid #132834; color: #FFF; font-size: 12px; font-weight: 400; } .home-feature-project { background-attachment: fixed; background-image: url('../images/future-project.jpg'); background-position: top; background-repeat: no-repeat; background-size: cover; } .feature-project { padding: 6rem 0; } .home-feat-bg { background: #0000006b; } .home-feat-title { padding: 3rem 10%; } .home-feat-title h1 { color: #FFF; font-size: 4rem; font-weight: 200; } .home-feat-title h1 span { font-weight: 600; } hr.feat-space { margin: 3.8rem 0; } .home-feat-title p { animation-delay: 0.2s; color: #FFF; font-weight: 400; font-size: 14px; line-height: 1.9; } .learn-more-btn a button { background: transparent; border: 1px solid #FFF; color: #FFF; font-family: hgs4; font-size: 12px; font-weight: 400; outline: none; padding: 1rem 2.7rem; text-transform: uppercase; transition: 0.3s; } .home-feat-project { padding: 3rem 1% 3rem 3rem; } .other-project { animation-delay: 0.2s; } .main-project ul li { display: inline-block; list-style-type: none; margin: auto; width: 33%; } .project-title { background: #ffffff9c; background-image: url(../images/feature-project-1.png); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 1rem; } .project-border { border: 1px solid #FFF; } .project-title h3 { background: #ffffff9c; font-size: 25px; margin: 0; padding: 35% 5%; text-align: center; text-transform: uppercase; visibility: hidden; text-overflow: ellipsis; width: 100%; overflow: hidden; white-space: nowrap; } .project-title:hover { filter: gray; -webkit-filter: grayscale(1); filter: grayscale(1); } .project-title:hover h3 { visibility: visible; transition: 1s; } .project-slide { margin: 0 1px 0; max-width: 40%; width: 24.7% !important; } .project-slide h3 { font-size: 20px; padding: 29% 5%; text-align: center; } .other-project .slick-list { margin: auto; text-align: center; width: 100%; } .slick-track { width: 100% !important; } .why-us-bg { background-image: url(../images/homepage.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .why-us-title { padding: 5rem 10% 20%; } .desc-width { width: 90%; } .why-us-title h1 { color: #0e2835; font-size: 4rem; font-weight: 200; } .why-us-title h1 span { font-weight: 700; } hr.join-space { border-top: 1px solid #0e2835; margin: 2rem 0; } .why-us-title p { font-size: 14px; line-height: 1.9; margin-bottom: 0; } .join-us-desc { padding: 0 0 2rem; } .join-us-title { background: #54747e; color: #fff; padding: 15px; } .join-us-border { border: 1px solid #FFF; height: 300px; padding: 10px 15px; } .join-us-title h2 { color: #FFF; font-size: 2rem; font-weight: 300; margin: 0 0 5px; } .join-us-title h2 span { font-weight: 700; } .join-us-title p { font-size: 13px; line-height: 1.6; } .black { background: #0000008f; } .black .join-us-border { border: none; } .join-us-form { margin: 3rem 0; text-align: center; } .join-us { background: #132834; } .join-title { padding: 3rem 10% 3rem 0; } .join-title h1 { color: #FFF; font-size: 4rem; font-weight: 200; } .join-title h1 span { font-weight: 700; } hr.join-us-space { margin: 2rem 0; } .join-title p { animation-delay: 0.2s; color: #FFF; font-size: 14px; line-height: 1.9; } .join-us-form { text-align: center; } .join-us-form label { display: inline-block; margin: 0.5rem 1rem; outline: none; width: 35%; } label.fullname { width: 72.9%; } .arrow-race, .arrow-position { position: relative; } .arrow-position::before, .arrow-race::before { border-radius: 50%; color: #DC352D; content: "\f078"; font-family: fontawesome; right: 6%; top: 30%; padding: 0; position: absolute; } label.text-area { color: #FFF; font-size: 14px; font-weight: 200; text-align: left; width: 73%; } label.text-area textarea { border-top: none; border-left: none; border-right: none; margin: 5px 0; } .join-us-btn input#submit { border: 1px solid #ffffff; border-style: solid; color: #FFF; font-size: 13px; height: 2.5rem; margin: 0 !important; outline: none; padding: 5px 5%; } .join-us-form ::placeholder { color: #FFF !important; } .join-us-form :-ms-input-placeholder { color: #FFF !important; } .join-us-form ::-ms-input-placeholder { color: #FFF !important; } .hsh1-img { left: 0; position: absolute; transition: 1s; opacity: 0; } .hsh2-img, .hsh3-img, .hsh4-img, .hsh5-img, .hsh6-img, .hsh7-img, .hsh8-img, .hsh9-img { opacity: 0; visibility: hidden; transition: 0.6s ease-out; } .hsh2-img.hello, .hsh3-img.hello, .hsh4-img.hello, .hsh5-img.hello, .hsh6-img.hello, .hsh7-img.hello, .hsh8-img.hello, .hsh9-img.hello { opacity: 1; visibility: visible; } .feature-width, .joinus-width, .footer-joinus-width, .ourevent-width, .all-members-width, .project-width, .contact-width { margin: auto; width: 100%; } /****** Member Page CSS ******/ .members-bg { background-image: url('../images/our-team.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } .members { background: #ffffffd4; padding: 15% 0 7%; text-align: center; } .members-title h1 { color: rgb(70, 70, 70); font-size: 4rem; margin-bottom: 2rem; text-align: center; } .members-title p { color: #464646; font-size: 14px; text-align: center; margin: auto; } .founder, .sales-manager { padding: 0 1px; } .founder h1 { background: #132834; color: #FFF; font-family: hgs4; font-size: 3em; font-weight: 300; padding: 10px 5%; text-transform: uppercase; } .sales-manager h1 { background: #924e4f; color: #FFF; font-family: hgs4; font-size: 3em; font-weight: 300; padding: 10px 5%; text-align: right; text-transform: uppercase; } .members-search { border: 1px solid #CCC; margin: 2%; padding: 3%; } .members-search h1 { font-family: hgs4; font-size: 4em; margin-bottom: 1rem; text-align: center; text-transform: uppercase; } .members-search form { text-align: center; } .members-search form label { width: 25%; } .members-search form input { color: #000; } .members-search form input#submit { background: #840000; color: #FFF; font-family: hgs4; height: 3.5em; outline: none; text-transform: uppercase; } .member-result textarea { width: 63%; } .member-result { text-align: center; } hr.member-space { border: none; } .member-panel { height: 350px; margin-bottom: 2rem; } .panel-default>.panel-heading+.panel-collapse>.panel-body { /* margin-bottom: 2rem; */ height: 350px; overflow: auto; } .members-search h3 { font-family: hgs4; font-size: 14px; margin-bottom: 10px; text-align: center; } h4.member-title { font-family: hgs4; font-size: 14px; font-weight: 400; letter-spacing: normal; text-align: center; text-transform: uppercase; } h4.member-title a:hover, h4.member-title a:focus{ color: #924e4f; } .panel-body ul li { border: 1px solid #CCC; display: inline-block; height: 120px; margin: 10px 0; padding: 10px; width: 24%; vertical-align: top; } .panel-body ul li p { font-size: 13px; margin-bottom: 5px; } .search-result ul li { background-color: #FFFFFF; border: 1px solid #cccccc94; border-radius: 5px; display: inline-block; height: 120px; padding: 10px; text-align: left; width: 100%; } .search-result ul li p { font-size: 14px; margin-bottom: 0; } .search-result ul li p span { font-size: 13px; font-weight: bold; display: block; } hr.searching-result { border-top: 1px solid #cccc; } .searching-result-bg { background-color: #f3f3f3; padding: 15px 10px; } /****** About Page CSS ******/ .about-us { background-attachment: fixed; background-image: url('../images/about-us-bg.jpg'); background-position: 100% 75%; background-repeat: no-repeat; background-size: cover; } .about-us-info { background: #ffffffd9; padding: 5rem; } .about-us-info h4 { font-size: 2rem; font-weight: 300; margin-bottom: 10px; text-align: center; } .about-us-info h4:before { content: " "; border-bottom: 1px solid #000; height: 2%; left: 0; position: absolute; width: 42%; vertical-align: middle; } .about-us-info h1 { color: #464646; font-size: 8em; } .about-us-info h1 { color: #464646; font-size: 4em; margin-bottom: 4rem; padding: 0 3rem; } .about-us-desc { padding: 3rem; } .about-us-desc h3 { color: #464646; font-size: 4em; font-weight: 700; margin: 0; } .about-us-desc p { font-size: 14px; line-height: 1.9; } .about-us-desc p span { color: #464646; font-size: 30px; font-weight: 300; } .mission-title { padding: 3rem; } hr.about-space { border-top: 1px solid #464646; margin: 3rem 0; } hr.mission-space { border-top: 1px solid #000; margin: 3rem 0; } .mission-title h1 { color: #464646; font-weight: 700; margin: 0; padding: 0; } .mission-p p { font-size: 14px; line-height: 1.9; } .our-aims { padding: 1rem 0; } .our-aims h1 { color: #464646; margin: 2rem 0; text-align: center; } .aims { padding: 20px 1rem; text-align: center; } .aims img { width: 50%; } .aims p { color: #464646; font-size: 13px; text-align: left; } .about-us-btn a button { background: #dc352d; border: 1px solid transparent; color: #FFF; font-size: 18px; font-weight: 700; padding: 1rem 2rem; } /****** Event Page CSS ******/ .event-bg { background-image: url('../images/event-bg.png'); background-position: top; background-repeat: no-repeat; background-size: cover; } .events { background: #ffffffc9; } .events-title { padding: 13% 0 2%; } .events-title h1 { color: #464646; font-size: 4rem; margin-bottom: 2rem; text-align: center; } .events-title p { color: #464646; font-size: 14px; text-align: center; } .events-btn ul { margin-bottom: 1rem; text-align: center; } .events-btn ul li { display: inline-block; border: 1px solid #000; color: #000; font-family: hgs4; font-size: 13px; font-weight: 400; padding: 1rem 2.7rem; text-transform: uppercase; transition: 0.3s; width: 10%; } .events-btn ul li:hover { background: #132834; border: 1px solid #132834; color: #FFF; text-decoration: none; } .events-btn ul .active li { background: #840000; border: 1px solid #840000; color: #FFF; } .events-margin, .project-margin { margin: 1rem 0; } .events-list, .project-list { height: 30rem; padding: 10px; box-shadow: 2px 4px 5px 0px rgba(123, 123, 123, 0.75); -webkit-box-shadow: 2px 4px 5px 0px rgba(123, 123, 123, 0.75); -moz-box-shadow: 2px 4px 5px 0px rgba(123, 123, 123, 0.75); } .thumbnail-project img { width: 100%; } .event-thumbnail { /* background-image: url(../images/events/15651860575d4ad8095a648.jpg); */ background-position: center; background-repeat: no-repeat; background-size: cover; padding: 6rem 0; } .events-info { height: 40%; line-height: 1.4; margin: 1rem 0; text-align: left; } .events-gallery-list { height: 25rem; } .events-gallery-info { height: 25%; } .read-more-btn { font-weight: bold; margin-top: 3rem; text-align: right; text-transform: uppercase; } .read-more-btn a { cursor: pointer; } /* .events-info { text-overflow: ellipsis; width: 100%; overflow: hidden; white-space: nowrap; } */ .project-info { margin-bottom: 3rem; } .events-info p, .project-info p { font-size: 13px; line-height: 1.6; } p.date { font-weight: 300; margin-bottom: 5px; } p.events-list-title, p.project-list-title { font-size: 18px; font-weight: 700; line-height: 1.1; margin-bottom: 10px; } .event-dialog { margin-top: 4rem; max-width: 100%; width: 65%; } .project-dialog { width: 50%; } .modal-event-header, .modal-project-header { padding: 1rem; } .modal-event-header h4 { color: #464646; } .event-modal { text-align: center; } .event-gallery { margin-bottom: 20px; } .event-modal-content h2 { margin-bottom: 5px; } .mfp-title { padding: 0; } .mfp-figure small { font-size: 13px; text-align: center; } .mfp-counter { display: none; } .popup-gallery>div>div { padding: 5px; } .gallery-modal { z-index: 2; } .popup-gallery a { padding: 3px; } .popup-gallery a img { height: 300px; } .modal-backdrop { z-index: 1; } .project-modal { text-align: center; } .project-modal img { margin-bottom: 1rem; } hr.project-space { margin: 1rem auto; width: 80%; } .project-price h2 { font-size: 20px; font-weight: 500; margin: 0; text-transform: uppercase; } .project-price h3 { font-size: 18px; font-weight: 600; margin: 0%; } .project-name h2 { font-size: 30px; margin: 10px 0; } .project-name h4 { font-size: 20px; letter-spacing: 0; margin: 15px 0 0; } .project-name h5 { font-size: 13px; font-weight: 400; margin: 0; } hr.project-space { margin: 1rem auto; width: 60%; } .project-details { text-align: left; } .project-details h3 { font-size: 14px; margin: 10px 0; text-transform: uppercase; } .project-details ul li { display: inline-block; vertical-align: top; } .project-details ul { margin: auto; width: 100%; } .project-details ul li { display: block; text-align: left; vertical-align: top; } .house_desc a { margin-bottom: 15px; } .house_desc ul { margin-left: 1rem; } .house_desc ul li { display: list-item; list-style: disc; padding-bottom: 5px; } .project-details ul li a { color: #000; font-family: hgs4; font-size: 14px; font-weight: 500; } .project-details ul li p { color: #7d7d7d; font-family: hgs4; font-size: 12px; } hr.pro-detail-space { border: none; margin: 5px; } ul.project-details-list { margin-bottom: 10px; } ul.project-details-list li { color: #7d7d7d; display: block; font-family: hgs4; font-size: 12px; padding-left: 10px; } /****** Project Page CSS ******/ .project { background-image: url('../images/projects.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } .project-bg { background: #ffffffba; text-align: center; } .projects-title { padding: 13% 0 2%; } .projects-title h1 { color: rgb(70, 70, 70); font-size: 4rem; margin-bottom: 1rem; text-align: center; } .projects-title p { color: #464646; font-size: 14px; line-height: 1.9; text-align: center; margin: auto; width: 100%; } .entry { background: #FFF; border: 1px solid rgba(0, 0, 0, .15); box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, .35), -10px 10px 0 -3px rgba(0, 0, 0, .2); margin: 10px auto 20px; max-width: 800px; overflow: hidden; padding: 20px 40px; position: relative; text-align: center; } .entry>p { padding: 20px 0 10px; } .entry>.grid { margin: 20px auto 0px; } .entry>.grid>.item { width: 50%; } .grid { max-width: 100%; list-style: none; margin: auto; } .grid .item { display: block; float: left; padding: 2px; width: 33%; opacity: 1; } .grid .item a, .grid .item img { outline: none; border: none; display: block; /* max-width: 100%; */ width: 100%; } .grid.effect-2 .item.animate { -webkit-transform: translateY(200px); transform: translateY(200px); -webkit-animation: moveUp 0.65s ease forwards; animation: moveUp 0.65s ease forwards; } @-webkit-keyframes moveUp { 0% {} 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes moveUp { 0% {} 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @media screen and (max-width: 900px) { .grid .item { width: 50%; } .entry { box-shadow: none; } .entry>.grid>.item { width: 50%; } } @media screen and (max-width: 400px) { .grid .item { width: 100%; } .entry { padding: 20px 0; } .entry>p { padding: 10px; } .entry>.grid>.item { width: 100%; } } .project-btn ul { margin-bottom: 0; } .project-btn ul li { display: inline-block; border: 1px solid #000; color: #000; font-family: hgs4; font-size: 13px; font-weight: 400; padding: 1rem 2rem; text-transform: uppercase; transition: 0.3s; width: 10%; } .project-btn ul li:hover, .project-btn ul li:focus { background: #132834; border: 1px solid #132834; color: #FFF; text-decoration: none; } a:hover, a:focus { text-decoration: none; } .project-btn a.active li { background: #132834; border: 1px solid #132834; color: #FFF; } .float-facebook, .float-instagram { background: #ECECEC; border-radius: 50px; color: #FFF; position: fixed; padding: 8px 10px; right: 30px; text-align: center; top: 55%; z-index: 3; } .float-instagram { top: 61%; } .my-float { margin-top: 22px; } .fa-facebook-square:before { color: #000; content: "\f082"; font-size: 20px; } .fa-facebook-square:after { content: ' '; position: absolute; height: 100%; border-left: 1px solid #CCC; bottom: -35px; left: 50%; } /****** Contact Us Page CSS ******/ .contact-us { background-image: url('../images/Join_Us.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } .contact-us-bg { background: #ffffffe6; padding: 15% 0 7%; text-align: center; } .contact-form-title h1 { color: rgb(70, 70, 70); font-size: 4rem; margin-bottom: 2rem; text-align: center; } .contact-form-title p { color: #464646; font-size: 14px; text-align: center; margin: auto; } .contact-form { padding: 2rem 5%; } .contact-form input { color: #000; } .contact-form form { text-align: center; } .contact-form label { display: inline-block; margin: auto 5px 1rem; width: 45%; } label.message-area { width: 92%; } input#submit { background: transparent; font-size: 13px; height: 2.5rem; margin: 0 !important; padding: 5px 5%; } .contact-form-info { margin-bottom: .5rem; padding: 0 4%; } .contact-number, .contact-email, .contact-address { margin-bottom: 1rem; } .contact-number p, .contact-email p, .contact-address p { font-family: hgs4; font-size: 14px; font-weight: 500; margin-bottom: 5px; text-transform: uppercase; } p.KLBranch a, p.KKBranch a { text-decoration: underline; } .contact-number a, .contact-email a, .contact-address a { color: #132834; font-family: hgs4; font-size: 13px; } .sidenav { height: 100vh; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 40px; z-index: 999; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #FFF; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; left: 0; font-size: 36px; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } .thumbnail-project img { height: 160px; } /****** New About Us Page CSS ******/ .about-us-b { margin-top: -8rem; } @media screen and (max-width: 1400px) { .about-us-b { margin-top: -4rem; } } .about-us-b img { width: 100%; } .new-about-us-bg { background-attachment: fixed; background-image: linear-gradient(to top, #ffffffa8, #ffffffa8), url('../images/new_abous_us_bg.jpg'); background-position: 100% 75%; background-repeat: no-repeat; background-size: cover; margin-bottom: 15rem; } .new-about-us-content { padding: 9rem 5rem; position: relative; } .new-about-us-content h1 { color: #132834; font-size: 80px; font-weight: 200; text-transform: uppercase; width: 20%; } .new-about-us-content h1 span { font-weight: 400; } .new-about-us-content p { color: #132834; font-size: 14px; font-weight: 300; line-height: 1.6; } .new-about-content-p { padding: 0 10px 0 0; text-align: justify; } .new-missions { background: #132834; padding: 6rem 40px 6rem; text-align: center; } .new-missions h1, .new-missions p { color: #ffffff; } .new-missions h1 { font-size: 75px; font-weight: 400; line-height: 0.8; width: auto; } .new-missions p { text-align: justify; } .new-our-aims { padding: 3rem 5rem; position: relative; } .new-our-aims h1 { color: #132834; font-size: 80px; font-weight: 200; margin: 0 0 0 5rem; text-transform: uppercase; } .new-our-aims h1 span { font-weight: 400; } /****** Responsive ******/ @media screen and (max-width: 1600px) { .why-us-title h1 { font-size: 3rem; } .about-us-b { margin-top: -5rem; } } @media (max-width: 1440px) { .loader img { left: 47%; width: 5%; } .home-feat-title { padding: 3rem 5%; } .why-us-title { padding: 5rem 5% 20%; } .float-facebook { top: 53%; } .member-result textarea { width: 64%; } .about-us-info h1 { margin-bottom: 2rem; } .events-btn ul li { padding: 1rem 2rem; } .why-us-title h1 { font-size: 2rem; } .why-us-title h1 span { font-size: 4rem; } .popup-gallery a img { height: 200px; } .about-us-b { margin-top: -2rem; } .events-title { padding: 18% 0 0; } } @media screen and (max-width: 1199px) { .home-feat-title h1, .home-feat-title p, .learn-more-btn { text-align: center; } .event-dialog { width: 70%; } .join-us-title h2 { font-size: 25px; } .desc-width { width: 20%; } .new-missions { padding: 2rem 40px; position: relative; margin: 28px 0; } .new-about-us-bg { margin-bottom: 0; } .about-us-b { margin-top: 0; } } @media (max-width: 1024px) { .home-title h2 { font-size: 2.5em; } .home-feat-title { text-align: center; } .home-feat-project { padding: 3rem 4%; } .why-us-bg { background-image: none; } .why-us-title { padding: 3rem 5%; text-align: center; } .desc-width { width: 100%; } .float-facebook { top: 57%; } .project-btn ul li { padding: 1rem; width: 15%; } .projects-title, .contact-us-bg { padding: 25% 2% 7%; } .about-us-info { padding: 2rem; } .about-us-info h4:before { width: 35%; } hr.about-space { margin: 1rem 0 2rem; } .about-us-desc { padding: 1rem 3rem; } } @media screen and (max-width: 1023px) { .new-about-us-content h1 { text-align: center; width: 100%; } } @media screen and (min-width: 992px) { header.navbar { padding: 75px 0; } .logo-wrap { max-width: 91px; position: absolute; top: 50%; left: 50%; z-index: 1; text-align: center; transform: translate(-50%, -45%); } a.logo { display: inline-block; transition: 0.3s; } .navi-wrap { padding: 0 3em; } .navi-left, .navi-right { display: inline-block; float: left; width: 50%; vertical-align: middle; padding-left: 85px; padding-right: 85px; position: relative; } .navi-left { text-align: right; } .navi-right { text-align: left; } .navi-left:after, .navi-right:after { content: ""; position: absolute; bottom: -20px; width: calc(100% - 75px); height: 1px; background: #132834; } .navi-left:after { left: 0; } .navi-right:after { right: 0; } .navi { display: inline-block; margin: 0; } .navi>li { display: table-cell; vertical-align: middle; padding: 0px 30px; } .navi>li:first-child { padding-left: 0px; } .navi>li:last-child { padding-right: 0px; } .navi>li>a { display: inline-block; padding: 0; font-family: 'hgs4', sans-serif; font-size: 14px; font-weight: 300; color: #132834; text-transform: uppercase; text-decoration: none; text-align: center; vertical-align: middle; width: 100px; } .navi>li>a:hover, .navi li.active>a { color: #a61134; } header.navbar .logo-small { opacity: 0; visibility: hidden; height: 0; width: 0; } header.navbar.affix { padding: 35px 0; background: #132834; } header.navbar.affix a { color: #FFF; z-index: 2; } header.navbar.affix .hamburger__line-in::before, header.navbar.affix .hamburger__line-in::after { background-color: #FFF; } header.navbar.affix .logo-wrap { max-width: 36px; transform: translate(-50%, -60%); } header.navbar.affix .logo-small { opacity: 1; visibility: visible; height: auto; width: auto; } header.navbar.affix .logo-big { opacity: 0; visibility: hidden; height: 0; width: 0; } header.navbar.affix .hamburger { top: 2.7em; } header.navbar.affix .hamburger-menu p { color: #FFF; } header.navbar.affix .admin-login { top: 2.3em; } header.navbar.affix .admin-login a img { filter: invert(0); } header.navbar.affix .navi-left:after, header.navbar.affix .navi-right:after { bottom: -15px; display: none; } .global-menu .expd-menu { padding: 8em 10em; } .navbar .social-list { float: left; } } @media screen and (max-width: 991px) { header.navbar { background-color: #132834; } .hamburger__line-in::before, .hamburger__line-in::after { background-color: #FFF; } .hamburger-menu p { color: #FFF; } .admin-login a img { width: 70%; filter: invert(1); } .logobread-wrap { padding: 5px 20px; } .logo-wrap { max-width: 30px; } .logo-big { display: none; } .navi-wrap { display: none; } .hamburger { top: 2.8em; } .admin-login { top: 2.5em; } .expd-menu .navbar-inner li { margin: 2em 0; } .expd-menu .navbar-inner li a { font-size: 16px; } .float-facebook { top: 54%; } .thumbnail-project img { height: 200px; width: 100%; } .join-us-border { height: 100%; } .project-price h2, .project-name { text-align: center; } .project-list { height: 35rem; } .project-price h2 { font-size: 24px; margin-bottom: 0; margin-top: 20px; } .event-dialog { width: 65%; } .events-info { height: 35%; } .popup-gallery a img { height: 100%; padding: 5px; width: 90%; } .event-thumbnail { padding: 8rem 0; } .events-gallery-list { height: 30rem; } } @media screen and (max-width: 959px) { .event-dialog { width: 65%; } } @media screen and (max-width: 880px) { .admin-login { right: 7em; } .new-about-us- { background-position: center; } .home-feat-project { padding: 3rem 1%; } } @media (max-width: 769px) { .inner-nav-about { width: 100%; } .right-login { margin: 2em 0; } } @media (max-width: 768px) { .map-images { margin-top: 5%; } .home-title h2 { font-size: 2.2em; } .main-project ul { text-align: center; } .main-project ul li { width: 32%; } .join-us-title { margin-bottom: 1rem; } .join-title { padding: 3rem 8%; } .float-facebook { top: 56%; } .aims p { font-size: 10px; } .events-list, .project-list { height: 32rem; } .member-panel { width: 100%; } } @media screen and (max-width: 767px) { .project-info { padding: 0 5%; } .project-list { height: 55rem; } .thumbnail-project img { height: 350px; width: 100%; } .events-info { height: 30%; } .events-title h1 { margin-bottom: 0; } } @media screen and (max-width: 720px) { .events-info { padding: 0 5%; } } @media screen and (max-width:639px) { body { font-size: 12px; } .panel-body ul li p { font-size: 10px; margin-bottom: 5px; } } @media (max-width: 600px) { .expd-menu .navbar-inner { text-align: center; margin: 3em 0; } } @media (max-width: 500px) { /****** Home Page CSS ******/ .map-images { margin-top: 10%; } .home-title h2 { font-size: 1.5em; } .home-bg-btn a button, .learn-more-btn a button { font-size: 12px; padding: 10px; } .float-facebook { top: 54%; } .home-feat-title h1, .why-us-title h1, .join-title h1 { font-size: 3rem; } hr.feat-space, hr.join-space { margin: 2rem auto; width: 60%; } .project-title { padding: 10px; } .project-slide h3 { font-size: 16px; padding: 20% 4%; text-align: center; } .project-title h3 { font-size: 18px; } .project-slide { margin: 0 2px 0; max-width: 40%; width: 24% !important; } label.fullname { width: 75.5%; } /****** About Us Page CSS ******/ .about-us-b { margin-top: 3rem; } .about-us-info h4:before { display: none; } .about-us-info h1 { font-size: 3em; margin-bottom: 0; } .about-us-desc h3 { font-size: 2em; } .about-us-desc { padding: 0 3rem 1rem; } .about-us-desc p { margin-bottom: 20px; } hr.mission-space { margin: 1rem 0 2rem; } .our-aims h1 { font-size: 3em; } .aims { padding: 15px 1rem; margin-bottom: 3rem; } .aims p { font-size: 14px; margin-top: 20px; } .aims img { width: 26%; float: left; clear: both; height: 100%; margin: auto 10px; } /****** Project Page CSS ******/ .projects-title h1 { font-size: 3rem; } .projects-title p { padding: 10px; } .project-btn ul li { padding: 1rem; width: 20%; font-size: 10px; } .event-dialog { width: 85%; } .project-price { text-align: left; } /****** Members Page CSS ******/ .members { margin-top: 15%; } .members-title h1, .members-search h1 { font-size: 3rem; } .members-search form { margin-bottom: 1rem; } .members-search form label { margin-bottom: 10px; width: 100%; } .members-search form input#submit { width: 30%; } .member-result textarea { width: 100%; } .member-panel { margin-bottom: 6rem; } /****** Our Event Page CSS ******/ .events-title { padding: 25% 0 7%; } .events-title p { padding: 10px; } .events-title h1 { font-size: 3rem; } .events-btn ul li { width: 40%; } /****** Contact Us Page CSS ******/ .contact-form-title h1 { font-size: 3rem; } .contact-number, .contact-email, .contact-address { margin: 1.5rem 0; } .new-about-us-content h1, .new-missions h1, .new-our-aims h1 { font-size: 45px; } .new-about-us-content { padding: 5rem; } .read-more-btn a { font-size: 12px; margin-right: 2rem; } } @media (max-width: 414px) { .loader img { left: 40%; width: 20%; top: 41%; } .navbar { padding: 5px; } .logobread-wrap { padding: 0px 20px; } .admin-login { top: 1.4em; } .admin-login a img { width: 65%; } .member-login-content { padding: 1rem 2rem; } .hamburger { top: 1.8em; } .hamburger__line-in::before, .hamburger__line-in::after { width: 26%; } .hamburger-menu { text-align: left; } .hamburger-menu p { font-size: 8px; } .float-facebook { top: 53%; } .home-title h2 { font-size: 1.4em; } .home-bg-btn a button, .learn-more-btn a button { font-size: 10px; padding: 5px; } .project-title { padding: 5px; } .project-title h3 { font-size: 13px; } .project-slide { width: 23.9% !important; } .join-us-form label { margin: 5px; width: 40%; } label.fullname { width: 83%; } label.text-area { width: 82% !important; } .about-us-b { margin-top: 2rem; } .about-us-info h4:before { display: none; } .about-us-info h1 { font-size: 3em; margin-bottom: 1rem; } .about-us-desc h3 { font-size: 2em; } .about-us-desc p span { font-size: 23px; } .about-us-info { padding: 1rem; } .aims>div img { width: 25%; } .projects-title, .contact-us-bg, .members { padding: 25% 6% 7%; } .events-title { padding: 25% 6% 1%; } .project-btn ul li { font-size: 9px; width: 21%; } .events-btn ul li { font-size: 9px; width: 25%; } .project-info { padding: 0 7%; } .modal-body { padding: 0 15px 3em; } .event-dialog { width: 90%; } .modal-header .close { top: 0.4em; } .project-price h2, .project-name, .project-price h3 { text-align: center; } .project-details ul li { width: 100%; } .panel-body ul li { height: 90px; width: 100%; } .members-search form label { width: 100%; } .members-search form input#submit { height: 2.7em; width: 40%; } .member-result { margin: 15px 0; width: 100%; } .member-result textarea { width: 100%; } .join-title { padding: 3rem 8% 1rem; } .read-more-btn { margin-top: 2rem; } .events-info { height: 37%; } .event-dialog { margin-top: 6rem; } .event-modal-content h2 { font-size: 26px; } .thumbnail-project img { height: 250px; width: 100%; } .project-list { height: 45rem; } } @media screen and (max-width: 375px) { /****** Home Page CSS ******/ .home-bg-btn a button, .learn-more-btn a button { font-size: 6px; } .home-feat-title p, .why-us-title p { font-size: 12px; } .project-slide { width: 23.6% !important; } /****** Project Page CSS ******/ .events-info { padding: 0 3%; } .project-price h2 { font-size: 1.5rem; } .project-name h4 { font-size: 14px; } .project-name h5 { font-size: 10px; } /****** Member Page CSS ******/ .members-search { border: none; } /****** Event Page CSS ******/ .events-btn ul li { width: 35%; } /****** Contact Us Page CSS ******/ input[type='text'], input[type='contact'], input[type='url'], input[type='password'], input[type='email'], input[type="search"], input[type="tel"], input[type='number'], textarea, select[type='age'], select[type='state'], select[type="race"], select[type="position"] { font-size: 10px; } /****** Footer ******/ .copyrights { font-size: 8px; } } @media (max-width: 320px) { .home-bg-img { margin-top: 1rem; } .home-feat-title h1, .why-us-title h1, .join-title h1, .events-title h1 { font-size: 3.5rem; } .join-us-form label { width: 90%; } .about-us-desc, .mission-title { padding: 1rem 20px; } .events-title h1, .members-title h1, .contact-form-title h1 { font-size: 3.5rem; } .events-btn ul li { width: 35%; } .project-info, .events-info { padding: 0 8%; } } .white-popup { position: relative; /* padding: 30px; */ width: 60%; margin: 20px auto; text-align: center; } .mfp-ready.mfp-bg { height: 100%; } @media screen and (max-width: 1600px) { .white-popup { width: 70%; } } @media screen and (max-width: 1024px) { .white-popup { width: 90%; } } /* The Great Haus */ /****** JayJay Code - 17092019 ******/ /****** Home Page CSS ******/ hr.feat-space { margin: 4rem 0; } /****** Project Page CSS ******/ p.short_desc { height: 40px; overflow: auto; } .read-more-btn { margin-top: 1.5rem; } .project-list{ height: 25rem; } @media screen and (max-width: 1700px) { hr.feat-space { margin: 2.9rem 0; } } @media screen and (max-width: 1600px) { hr.feat-space { margin: 2rem auto; } } @media screen and (max-width: 1440px) { .fa-facebook-square:after { height: 150%; bottom: -55px; } } @media screen and (max-width: 1400px) { .main-project ul li { width: 32%; } .project-slide { width: 24% !important; } .home-feat-title { padding: 3rem 5% 2rem; } } @media screen and (max-width: 1199px) { .why-us-bg { background-image: none; } .why-us-title h1 { font-size: 2rem; text-align: center; } .desc-width { margin: auto; text-align: center; width: 40%; } .why-us-title { padding: 5rem 5%; } } @media screen and (max-width: 1024px) { .float-facebook { top: 54%; } } @media screen and (max-width: 880px) { .desc-width { width: 50%; } } @media screen and (max-width: 991px) { .project-list { height: 30rem; } } @media screen and (max-width: 767px) { .project-list { height: 45rem; } .read-more-btn { margin-top: -1.5rem; } } @media screen and (max-width: 500px) { .desc-width { width: 100%; } .fa-facebook-square:after { visibility: hidden; } } @media screen and (max-width: 414px) { .project-list { height: 37rem; } .project-slide { width: 23.9% !important; } } @media screen and (max-width: 400px) { .project-slide { width: 23.7% !important; } } /* The Great Haus */ /****** JayJay Code - 23092019 ******/ @media screen and (max-width: 639px) { .project-price h2 { font-size: 20px; } .project-name h2 { font-size: 24px; } } /* The Great Haus */ /****** JayJay Code - 26092019 ******/ /* .margin-top-about-us p { margin-top: -2rem; } */ @media screen and (max-width: 1199px) { .margin-top-about-us p { margin-top: auto; } } /****** JayJay Code - 13112019 ******/ .about-us-p { position: relative; } .new-missions { background: #132834; padding: 3rem 1.5rem; position: absolute; right: 0; text-align: center; width: 40%; } .new-missions h1 { margin-bottom: 2rem; } @media screen and (max-width: 1199px) { .new-missions { position: relative; width: 100%; } .new-missions h1 { margin-bottom: 1rem; } } /****** JayJay Code - 03012020 ******/ .latest-event-video { background: #d7d6db; padding: 3rem 30rem; } .event-video { animation-delay: 0.2s; text-align: center; } .event-video h1 { color: #0e2835; font-weight: 200; } .event-video h1 span { font-weight: 600; } hr.event-video-hr { border-top: 1px solid #0e2835; width: 45%; } .event-video iframe { margin: 2rem 0 0; } @media screen and (max-width: 1600px) { .latest-event-video { padding: 3rem 23rem; } } @media screen and (max-width: 1360px) { .latest-event-video { padding: 3rem 10rem; } } @media screen and (max-width: 991px) { .latest-event-video { padding: 3rem 6rem; } } @media screen and (max-width: 800px) { .event-video iframe { height: 350px; } } @media screen and (max-width: 639px) { .latest-event-video { padding: 3rem 1rem; } } @media screen and (max-width: 500px) { .event-video h1 { font-size: 3rem; } .event-video iframe { height: 250px; } } /****** JAYJAY Code - 15012020 ******/ .new-about-content-p > p { font-size: 14px !important; margin-bottom: 20px !important; } /****** JAYJAY Code - 22052020 ******/ .join-us-sec {background-color: #132834; padding: 5rem 3%;} .join-us-sec h1 {color: #ffffff; font-size: 70px; font-weight: 200; text-transform: uppercase; width: 50%;} .join-us-sec h1 span {font-weight: 700;} hr.join-us-line {margin: 10px 0 30px;} .join-us-sec p {color: #ffffff; font-size: 14px; margin-bottom: 15px;} ul.join-us-social {display: flex; justify-content: space-evenly; margin-top: 3rem;} ul.join-us-social li {background-color: #ffffff; border-radius: 50px; padding: 10px;} ul.join-us-social li img {width: 32px;} .join-us-form-part {padding: 5rem 3%;} .join-us-form-part h3 {font-size: 32px;margin-bottom: 1rem; text-transform: uppercase;} div.area {padding: 0 0 1rem;} div.area div {display: inline-block; vertical-align: middle;} div.area div input[type=radio] {display: inline-block; font-size: 20px; margin: 0 10px 0 0; vertical-align: middle;} div.area div label {display: inline-block; font-size: 18px; font-weight: 400; margin: 0; padding: 0 20px 0 0; text-transform: uppercase; vertical-align: middle;} div.tgh-label {margin: 1.5rem 0;} div.tgh-label label {float: left; font-size: 16px; font-weight: 400; margin: 0; padding: 0 10px 0 0;} div.tgh-label div.tgh-label-radio {display: inline-block; vertical-align: middle;} .tgh-form-input {align-items: center; display: flex;} .tgh-form-input input {border: 0; border-bottom: 1px solid #132834; color: #132834; font-size: 14px; height: 32px; margin-top: -5px; padding: 5px;} div.tgh-label input.tgh-radio {margin: 0 0 0 10px;} div.tgh-label .tgh-radio-label {float: none !important; padding: 0 0 0 10px;} div.emergency-contact > div {margin: 0 0 10px 20px;} div.tgh-label div.emergency-title {margin-left: 0;} div.tgh-label div.emergency-title p {font-size: 16px; margin-bottom: 10px;} div.introducer {width: 100%;} div.introducer label {float: none; width: 100%;} div.introducer label p {margin-bottom: 10px;} div.introducer label input {border: 0; border-bottom: 1px solid #132834; color: #132733; width: 100%;} div.ic-upload div.tgh-form-input input, div.payslip-upload div.tgh-form-input input { visibility: hidden;} div.ic-upload div.tgh-form-input, div.payslip-upload div.tgh-form-input {border: 1px solid #132834; height: 32px; margin-right: 10px; padding: 5px; position: relative;} div.ic-upload div.tgh-form-input button, div.payslip-upload div.tgh-form-input button {background: transparent; border: 1px solid #132733; color: #132733; position: absolute; right: 5px;} div.ic-upload div.tgh-form-input #upload-text2, div.payslip-upload div.tgh-form-input #upload-text {color: #132834;} div.joinus-btn {border-style: none; text-align: center;} div.joinus-btn input {background: #132733 !important; border-style: none; color: #ffffff; font-size: 16px;} p.refund {color: red; text-align: right;} div.join-us-copyright {margin: -25px 0 0; text-align: center;} @media screen and (max-width: 1300px) { ul.join-us-social li img {width: 26px;} } @media screen and (max-width: 991px) { div.join-us-copyright {margin: 0; padding: 10px 0;} } @media screen and (max-width: 767px) { .join-us-sec {height: 100% !important; padding: 2rem 3%; text-align: center;} .join-us-sec h1 {font-size: 65px; margin: auto; width: 100%;} .join-us-form-part {padding: 2rem 3% 0;} .join-us-form-part h3 {font-size: 30px;} } @media screen and (max-width: 500px) { .join-us-sec h1 {font-size: 40px;} div.area div {margin-bottom: 10px;} .tgh-form-input {display: inline-block; width: 100%;} div.tgh-label label {margin-bottom: 10px;} div.tgh-label div.tgh-label-radio {width: 100%;} div.emergency-contact > div {margin: 0 0 10px;} p.refund {padding: 10px 0; text-align: center;} } .business-card-color > label {width: 100%;} .business-card-color > label p {margin-bottom: 1rem;} /* .name-card-color label img {filter: grayscale(100%);} */ .name-card-color {height: 100%; margin: 0 10px; position: relative; text-align: center; width: 20%;} .name-card-color input {margin: 0 0 5px !important;} .name-card-color label {padding: 0 !important;} .selected-color label img {filter: grayscale(0%);} .name-card-color > label p {color: #000000; /*font-weight: 800;*/ left: 0; margin-bottom: 5px; /*position: absolute;*/ right: 0; text-transform: uppercase; top: 10%; z-index: 2;} @media screen and (max-width: 1200px) { .name-card-color {margin: 0 5px; width: 22%;} .name-card-color > label p {font-size: 14px;} } @media screen and (max-width: 991px) { .name-card-color > label p {font-size: 12px; top: 14%;} } @media screen and (max-width: 500px) { div.emergency-title {font-weight: bold;} div.emergency-contact > div {margin-left: 20px;} .name-card-color > label p {font-size: 10px; top: 16%;} .name-card-color {margin: 0 3px; width: 22% !important;} } @media screen and (max-width: 450px) { .name-card-color {margin: 0 1px; width: 23% !important;} .name-card-color > label p {top: 18%;} } /* New Bonus Images */ .bonus-images ul {align-items: center; display: flex; justify-content: center; margin: auto auto 2rem; padding: 0; width: 100%;} .bonus-images ul li {display: inline-block; margin: auto 10px; padding: 5px 0; vertical-align: middle;} .bonus-images ul li img {background-color: #ffffff6b; cursor: pointer; margin: auto; padding: 10px; transition: transform .2s; width: 250px;} .bonus-images ul li img:hover, .bonus-images ul li img:focus {transform: scale(1.1);} @media screen and (max-width: 1199px) { .why-us-title {padding: 5rem 5% 1rem;} .bonus-images ul li {margin: auto 5px;} } @media screen and (max-width: 650px) { .new-about-us-content { padding: 5rem 15px; } } /* WhatsApp Float Icon */ .whatsapp { bottom: 14%; height: 60px; position: fixed; right: 25px; width: 60px; } .whatsapp img { height: 60px; width: 60px; } /* Floating Social Medai Icon 22-Oct-2021 */ .social-media-float { position: fixed; right: 30px; top: 42%; z-index: 1; } .social-media-float:after { border-right: 1px solid #cccccc; bottom: 20px; content: ''; height: 80%; position: absolute; right: 21px; z-index: -1; } .social-media-float a img { display: block; } .social-media-float a.facebook img, .social-media-float a.whatsapp2 img, .social-media-float a.messenger img { height: 20px; margin: auto; width: 20px; } .social-media-float a.instagram div img { margin: 5px 0 5px; width: 42px; } .social-media-float a.facebook { border-radius: 50px; } .social-media-float a.whatsapp2 { border-radius: 50px; } .social-media-float a.messenger { border-radius: 50px; } .social-media-float a.facebook div { background-color: #3b5998; border-radius: 50px; margin: 15px 0 10px; padding: 10px; } .social-media-float a.whatsapp2 div { background-color: #25d366; border-radius: 50px; margin: 10px 0 10px; padding: 10px; } .social-media-float a.messenger div { background-color: #006AFF; border-radius: 50px; margin: 10px 0 10px; padding: 10px; } @media screen and ( max-width: 500px ) { .social-media-float { right: 23px; } } /* Join Us - 22-Oct-2021 */ .join-us-sec .back-home-logo { margin: 0 0 2rem; } .join-us-sec a img.back-home { width: 26%; } @media screen and ( max-width: 767px ) { .join-us-sec .back-home-logo { text-align: center; } .join-us-sec a img.back-home { width: 80px; } }