/*========================= / Global => Defaults /=========================*/ @import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700,900'); html, body { background: white !important; font-family: 'Rubik', sans-serif !important; } a {text-decoration: none !important;} a:hover {text-decoration: none !important;} .searchResultList { list-style: none; } .searchResultList li a { font-size: 17px } .default_sectionTitle { width: 100%; margin: 2% 0; position: relative; } .default_sectionTitle:before { position: absolute; content: ""; width: 100%; height: 2px; top: 50%; z-index: 1; } .default_sectionTitle span, .default_sectionTitle a { height: 35px; background: white !important; padding-right: 2%; display: inline-block; position: relative; line-height: 35px; text-align: center; font-size: 22px; font-weight: bold; z-index: 99; } .default_sectionTitle a { float: right !important; padding-right: 0; padding-left: 2%; } .default_category_header { text-align: center; } .post-item .card .card-body { height: 200px !important; } .card-img-top-wrapper { height: 200px !important; } .card-img-top-wrapper .card-img-top { width: 100%; height: 100%; object-fit: cover; } .pagination {justify-content: center;} .tooltip.right {margin-left: 10px !important;} .post-image { height: 500px; position: relative; } .post-image img { width: 100%; height: 100%; object-fit: cover; } .post-image:before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, .2); top: 0; left: 0; } .post-info { position: absolute; bottom: 15%; left: 5%; } .post-title { color: white; font-size: 35px; font-weight: bold; text-shadow: 0 0 5px black; } .author-avatar { width: 50px !important; height: 50px !important; object-fit: cover; display: inline-block; border-radius: 100%; border: 2px #252525 solid; } .name-avatar { width: 50px; height: 50px; line-height: 50px; border-radius: 100%; display: inline-block; text-align: center; background: #ced4da; color: #868e96; font-weight: 600; font-size: 20px; position: relative; top: 5px; border: 2px #252525 solid; } .author-name { display: inline-block; position: relative; top: 15px; left: 10px; color: white; text-shadow: 0 0 5px black; } .post-content { width: 60%; margin: 0 auto; text-align: justify; font-size: 19px; padding-top: 50px; } .post-tags { width: 60%; margin: 25px auto; } .post-tags span { font-size: 0.75rem; font-weight: 400; background-color: #e9ecef; border-radius: 3px; padding: 0 .5rem; line-height: 2em; display: -ms-inline-flexbox; display: inline-flex; } .post-tags span a {color: #6e7687;} .post-tags span:hover a {color: black;} .post-reaction i { font-size: 20px; cursor: pointer; } .post-comments, .post-add-comment { width: 60%; margin: 0 auto; } .comment-box { width: 100%; background: #efefef; position: relative; word-wrap: break-word; box-shadow: 0 0 1px rgba(0, 0, 0, .5); border-left: 2px #83f1c5 solid; } .comment-box:not(:first-of-type) { margin-top: 15px; } .comment-box div:first-child span { position: relative; top: 50%; transform: translate(0, -50%); } .comment-box .comment-owner { font-size: 12px; margin-top: 20px; } .comment-box div:last-child { } .card-profile .card-header { height: 9rem; background-size: cover; } .card-profile-img { width: 100px; height: 100px; object-fit: cover; max-width: 6rem; margin-top: -5rem; margin-bottom: 1rem; border: 3px solid #fff; border-radius: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } .card-profile-avatar { margin-top: -5rem; margin-bottom: 1rem; border: 1px solid #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } .avatar { width: 2rem; height: 2rem; line-height: 2rem; border-radius: 50%; display: inline-block; background: #ced4da no-repeat center/cover; position: relative; text-align: center; color: #868e96; font-weight: 600; vertical-align: bottom; font-size: .875rem; } .avatar-xxl { width: 5rem; height: 5rem; line-height: 5rem; font-size: 2rem; } .card-aside { -ms-flex-direction: row; flex-direction: row; } .card-aside-column { min-width: 5rem; width: 30%; border-top-left-radius: 3px; border-bottom-left-radius: 3px; background: no-repeat center/cover; } .profile-card:not(:first-of-type) { margin-top: 10px; } .card-profile .list-inline-item a { width: 32px; height: 32px; background: #efefef; line-height: 32px; border-radius: 100%; display: inline-block; } .card-profile .list-inline-item a:hover i.fa { color: #4f5157; } .card-profile i.fa { color: #9aa0ac; } /*========================= / Home => Logo /=========================*/ .logo {} .logo img {width: 100px;} /*========================= / Global => Main Content Wrapper /=========================*/ .mainContent { width: 70%; margin: 0 auto; } /*========================= / Home => Welcome Slider /=========================*/ .welcomeSlider { width: 100%; height: 500px !important; } .slide-img { width: 100%; height: 100%; object-fit: cover; } .slide-title { width: 100%; background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(40,43,51,1) 50%, rgba(40,43,51,1) 50%); position: absolute; bottom: 5%; left: 0; text-align: left; } .slide-title p { font-size: 25px; font-weight: bold; color: white; margin-bottom: 8%; margin-left: 5%; } .slider-post-wrapper { width: 100%; height: 100%; } .postCategory { position: absolute; top: 5%; left: 5%; color: white; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: bold; padding: 10px 15px; border-radius: 4px; } .slider-post-wrapper:hover .postOverlay {padding: 70px 0;} .slider-post-wrapper:hover .postOverlay span { padding-top: 25px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } .slider-post-wrapper img { width: 100%; height: 100%; object-fit: cover; } .postOverlay { width: 100%; padding: 40px 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, .7) 90%); position: absolute; bottom: 0; transition: .2s; font-family: 'Open Sans', sans-serif; } .postOverlay p { /* background: blue; */ color: white; font-size: 25px; font-weight: bold; position: relative; padding-right: 25px; left: 5%; } .postOverlay p a {color: white;} .postOverlay span { display: block; visibility: hidden; opacity: 0; filter: alpha(opacity=0); color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: bold; transition: .2s; position: relative; left: 5% } .postOverlay span i { font-weight: bold; margin-bottom: 15px; } .welcomeSlider .swiper-pagination { margin: 0 !important; padding: 0 !important; bottom: 0 !important; } .welcomeSlider .swiper-pagination span { /* width: 10% !important; */ width: 20% !important; height: 27px !important; text-align: center; line-height: 25px !important; font-size: 14px; font-weight: bold; color: rgba(255, 255, 255, .8); opacity: 1; background: rgba(0, 0, 0, .2); border-radius: 0px !important; margin: 0 !important; } .welcomeSlider .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { background: rgba(0, 0, 0, .4) !important; } .welcomeSlider .swiper-pagination-bullet-active { color: #fff !important; background: #007aff !important; } /*========================= / About Us /=========================*/ .aboutUsHeader {position: relative;} .aboutUsHeader:before, .aboutUsHeader:after { position: absolute; content: ""; width: 15px; height: 1px; background: white; } .aboutUsHeader:before { bottom: -10px; left: 49%; transform: translate(-49%, 0); } .aboutUsHeader:after { bottom: -14px; left: 50%; transform: translate(-50%, 0); } .aboutWelcome { height: 100vh; position: relative; overflow: hidden; } .fullscreenBg { width: 100%; height: 100%; background: blue; position: relative; } .fullscreenBg:after { position: absolute; content: ""; width: 100%; height: 100%; background-image: linear-gradient(-225deg, rgba(44, 216, 213, .2) 0%, rgba(107, 141, 214, .8) 48%, rgba(142, 55, 215, 1) 100%); top: 0; left: 0; } .fullscreenBg video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; } .aboutWelcomeContent { position: absolute; top: 35%; left: 10%; transform: translate(-10%, -35%); z-index: 100; } .scrollArrow { display: inline; position: absolute; background: white; padding: 15px 20px; font-size: 20px; color: #aaa; border-radius: 100%; box-shadow: 0 0 5px #ddd; cursor: pointer; } .scrollArrow:hover {color: #aaa !important;} .scrollDownArrow { left: 50%; bottom: 15%; transform: translate(-50%, 0); animation: aboutUsScrollDownBtnAnim .7s linear infinite; } .scrollUpArrow { position: fixed; right: 5%; bottom: 5%; z-index: 1000; } .scrollUpArrow i {transform: rotate(180deg);} .aboutInfo { position: relative; background: #232344; } .aboutInfo:after { /* position: absolute; content: ""; width: 332px; height: 250px; background: url(../images/rr.png); background-size: cover; top: 50%; left: -5%; transform: translate(0, -50%) rotate(60deg); z-index: 1; */ } .bottomBefore:before { position: absolute; content: ""; width: 100%; height: 55px; background: #232344; bottom: -35px; left: 0; transform: skewY(1.5deg); } .aboutInfo:before { position: absolute; content: ""; width: 100%; height: 55px; background: #232344; top: -35px; left: 0; transform: skewY(-1.5deg); } .aboutInfo p { font-size: 17.5px; } .teamMemberRounded { width: 250px; height: 250px; background: white; border: 10px #232344 solid; border-radius: 100%; overflow: hidden; position: relative; left: 50%; transform: translate(-50%, 0); } .teamMemberRounded:hover .teamMemberOverlay { opacity: 1; filter: alpha(opacity=100); visibility: visible; } .teamMemberRounded img { width: 190px; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); } .teamMemberOverlay { width: 100%; height: 100%; background: rgba(0, 116, 225, .8); position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); visibility: hidden; transition: .2s; } .teamMemberOverlay p { font-size: 16.5px; position: relative; top: 50%; transform: translate(0, -50%); } .aboutContact { background: #2d283e; overflow: hidden; } .aboutContact form .col-md-4 * {font-size: 15px;} /*========================= / Global => Footer /=========================*/ .footerContainer { margin-top: 65px; overflow: hidden !important; padding-bottom: 25px; } .verticalCentering { /* background: lightblue; */ position: relative; top: 50%; transform: translate(0, -50%); } .footerLogo {display: block;} .footerNav { width: 151px; margin: 0 auto; } .footerNav a { font-size: 16px; font-weight: 700; color: white; padding: 5px 0; } .recentPostsList li {list-style: none;} .footerSocial a { font-size: 19px; color: white; margin-top: 10px; } .footerSocial a:not(:first-of-type) { margin-left: 20px; } .subscribe { padding-top: 55px; } .copyrights {padding-top: 35px;} .copyrights p { font-size: 15px; color: white; padding-top: 25px; border-top: 1px rgba(255, 255, 255, .2) solid; } /*========================= / Keyframes /=========================*/ @keyframes aboutUsScrollDownBtnAnim { 0% {box-shadow: 0 0 5px 0 #ddd;} 40% {box-shadow: 0 0 5px 5px #ddd;} 50% {box-shadow: 0 0 5px 10px #ddd;} 60% {box-shadow: 0 0 5px 5px #ddd;} 100% {box-shadow: 0 0 5px 0 #ddd;} } /*========================= / Media Queries /=========================*/ @media only screen and (max-width: 992px) { .mainContent {width: 90% !important;} .aboutWelcomeContent { top: 35%; left: 50%; transform: translate(-50%, -35%); text-align: center !important; } .aboutWelcomeContent img {width: 150px !important;} .aboutWelcomeContent span {font-size: 35px !important;} .scrollArrow { padding: 10px 15px; font-size: 16.5px; } .aboutInfoContent { width: 100% !important; text-align: left !important; } .teamMemberRounded { width: 200px; height: 200px; } .teamMemberRounded img {width: 140px;} .aboutContactContent {width: 90% !important;} }