/* ==================================== [ CSS TABLE CONTENT ] ------------------------------------ 1.0 - General 2.0 - Typography 3.0 - Global Style 4.0 - Header section 5.0 - Slider area 6.0 - Block area 7.0 - Intro section 8.0 - Services area 9.0 - Client logo 10.0 - Accordian section 11.0 - Portfolio section 12.0 - Contact us 13.0 - Testimonial section 14.0 - Blog Section 15.0 - footer section ------------------------------------- [ END CSS TABLE CONTENT ] ===================================== */ /* Google Web Fonts */ @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,300i,400,400i,600,600i,700,700i,900'); @import url('https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i'); /* ================= General ==================== */ html, body { height: 100% } body { font-family: 'PT Serif', serif; color: #61727f; background: #fff; font-size: 15px; line-height: 24px; overflow-x: hidden; -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased !important; } /* Link style ------------------------------ */ a{ cursor: pointer; } a:focus { outline: 0 solid } a:hover { text-decoration: none } /* Transition elements ------------------------------ */ a, .navbar a, .form-control { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* ================ Typography ================== */ h1, h2, h3, h4, h5, h6 { font-family: 'Titillium Web', sans-serif; color: #212121; margin: 0 0 15px; } h1{ font-size: 40px; line-height: 50px; } h2{ font-size: 34px; line-height: 44px; } h3{ font-size: 22px; line-height: 30px; } h4{ font-size: 20px; line-height: 26px; } h5{ font-size: 18px; line-height: 22px; } h6{ font-size: 16px; line-height: 20px; } .btn { color: #fff; padding: 14px 30px; text-transform: uppercase; letter-spacing: 4px; font-family: "Titillium Web",sans-serif; border-radius: 3px; box-shadow: 0 4px 5px rgba(34, 34, 34, 0.2); } .btn:hover { box-shadow: 0 8px 10px rgba(34, 34, 34, 0.2); } .btn-primary { background-color: #3452ff; } .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .btn-primary:active:hover { background-color: #3452ff; border-color: #3452ff; } .btn-sm { padding: 8px 20px; font-size: 12px; font-weight: 400; } /* ================ Global setting ================== */ input:focus, textarea:focus { outline: none; } .alert { padding: 12px 15px; } img { max-width: 100%; height: auto; } .form-group { margin-bottom: 30px; } .form-control { height: 50px; padding: 6px 20px; border: 1px solid #ebebeb; box-shadow: none; } .form-control:focus { border-color: transparent; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.075), 0 0 20px rgba(0,0,0,.3); box-shadow: 0 1px 1px rgba(0,0,0,.075), 0 0 20px rgba(0,0,0,.3); } .contact-form .form-group textarea { min-height: 210px; padding: 15px 20px; position: relative; z-index: 20; } @media (max-width: 991px) { .contact-form { margin-bottom: 30px; } } /* Remove Chrome Input Field's Unwanted Yellow Background Color */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } /* helper classes */ .section-padding { padding-top: 120px; padding-bottom: 90px; } .darker-bg { background: #f4f7f7; } /* ================ Header section ================== */ /* header top bar ------------------------*/ .header-top-area{ height: 50px; background: #3452FF; font-size: 14px; color: #FFFFFF; font-family: "Titillium Web",sans-serif; } .contact p{ float: left; margin-right: 50px; line-height: 50px; margin-bottom: 0px; } @media (max-width: 768px) { .contact p{ line-height: 35px; } } .contact p i{ margin-right: 10px; } .contact a{ color: #fff; } .social-icon{ margin-top: 10px; } .social-icon ul{ float: right; list-style: none; padding: 0px; margin: 0px; } .social-icon ul li{ float: left; } .social-icon ul li a{ color: #fff; font-size: 14px; width: 28px; height: 28px; text-align: center; margin-left: 12px; display: block; line-height: 28px; transition: all .3s; } .social-icon ul li a:hover, .social-icon ul li.active a{ background: #fff; color: #3452FF; border-radius: 3px; } @media (max-width: 768px) { .social-icon ul{ float: none; text-align: center; } .social-icon ul li{ float: none; display: inline-block; } .social-icon ul li a{ text-align: center; } .header-top-area{ height: 35px; } .social-icon { margin-top: 3px; } } /* ================ Navigation ================== */ nav.navbar.bootsnav ul.nav > li > a { color: #3f4b5a; font-family: 'Titillium Web', sans-serif; } nav.navbar.bootsnav ul.nav > li > a:hover, nav.navbar.bootsnav ul.nav > li.active > a, nav.navbar.bootsnav ul.nav > li>.dropdown-menu li > a:hover, nav.navbar.bootsnav ul.nav > li>.dropdown-menu li.active > a, nav.navbar.bootsnav ul.nav > li>.dropdown-menu.megamenu-content li > a:hover, nav.navbar.bootsnav ul.nav > li>.dropdown-menu.megamenu-content .menu-col li.active > a { color: #3452ff; } .dropdown-menu.cart-list h2 { font-size: 16px; line-height: 20px; margin-bottom: 0; } .dropdown-menu.cart-list h2 a { color: #3f4b5a; } .dropdown-menu.cart-list h2 a:hover { color: #3452ff; } @media (min-width: 993px) { nav.navbar.bootsnav ul.nav > li > a { padding: 30px 15px; font-weight: 400; font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; } } @media (min-width: 768px) { .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-top: 15px; } } .attr-nav>ul>li>a span.badge{ background-color: #3452ff; } ul.cart-list>li.total>a.btn { color: #fff !important; } ul.cart-list>li.total>a.btn:hover { background-color: #3452ff !important; } /* ================ Slider area ================== */ .slider-bg1{ background: url("assets/img/slider-bg/1.jpg") no-repeat; } .slider-bg2{ background: url("assets/img/slider-bg/2.jpg") no-repeat; } .slider-bg3{ background: url("assets/img/slider-bg/3.jpg") no-repeat; } .slider-bg4{ background: url("assets/img/slider-bg/4.jpg") no-repeat; } .slider-bg5{ background: url("assets/img/slider-bg/5.jpg") no-repeat; } .slider-bg6{ background: url("assets/img/slider-bg/6.jpg") no-repeat; } .homepage-slider{ width: 100%; height: 600px; position: relative; background-size: cover; background-position: center; z-index: 1; } .homepage-slider:after{ content: ""; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(46, 46, 46, .4); z-index: -1; } .display-table{ display: table; width: 100%; height: 100%; } .display-table-cell{ display: table-cell; vertical-align: middle; } .slider-content h1{ color: #fff; font-size: 67px; font-weight: 700; line-height: 77px; margin-bottom: 55px; } .slider-content p{ color: #fff; font-size: 20px; line-height: 30px; margin-bottom: 75px; } .slider-content a{ border-radius: 5px; background: #3452FF; padding: 15px 25px; border: none; color: #fff; font-family: "Titillium Web",sans-serif; -webkit-transition: all .3s; transition: all .3s; display: inline-block; } .slider-content a:hover { background: #0f32fd; } .slider-content a i{ padding-left: 8px; } @media (max-width: 768px) { .homepage-slider{ height: 400px; } .slider-content h1{ font-size: 30px; line-height: 33px; margin-bottom: 20px; } .slider-content p{ margin-bottom: 20px; font-size: 15px; line-height: 24px; } .slider-content a{ padding: 8px 15px; } } /* owl-carousel -----------------------------*/ .owl-nav div { display: inline-block; margin-top: -25px; position: absolute; top: 50%; transition: all .3s; } .owl-nav i { background: #3452ff none repeat scroll 0 0; color: #fff; font-size: 40px; height: 50px; line-height: 50px; text-align: center; width: 50px; transition: all .3s; opacity: .5; border-radius: 3px; } .owl-nav i:hover{ opacity: .9; } .owl-nav .owl-prev { left: -15px; opacity: 0; } .owl-nav .owl-next { right: -15px; opacity: 0; } .slider-area.owl-carousel { overflow: hidden; } .slider-area.owl-carousel:hover .owl-nav .owl-prev{ left: 15px; opacity: 1; } .slider-area.owl-carousel:hover .owl-nav .owl-next{ right: 15px; opacity: 1; } /* ================ Block area ================== */ .block.block2{ padding: 40px 0px 0px; background: #F4F7F7; } .block2 .block-text { margin-top: 128px; } .block-text h2{ margin-bottom: 50px; } .block-text p{ margin-bottom: 60px; } .block.about-us-block .block-img { margin-top: 0px; } .block.about-us-block h2 { margin-top: 30px; } .block-img { margin-top: 50px; } @media (max-width: 768px) { .block2 .block-text { margin-top: 40px; } } @media (min-width: 768px) { .block2 .block-text { margin-top: 50px; } } @media (min-width: 992px) { .block2 .block-text { margin-top: 38px; } .block-text h2{ font-size: 28px; } } @media (min-width: 1200px) { .block2 .block-text { margin-top: 128px; } .block-text h2{ font-size: 32px; } } /* ================ Intro section ================== */ .intro-bg1{ background: url("assets/img/intro/1.jpg") no-repeat; } .intro-bg2{ background: url("assets/img/intro/2.jpg") no-repeat; } .intro-bg3{ background: url("assets/img/intro/3.jpg") no-repeat; } .intro-title p{ margin-bottom: 50px; } .single-intro{ overflow: hidden; } .intro-img{ width: 100%; height: 222px; background-size: cover; background-position: center; position: relative; -webkit-transition: all .3s; transition: all .3s; } .intro-img:after{ content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(52, 82, 255, .8); -webkit-transition: .3s; transition: .3s; opacity: 0; } .single-intro:hover .intro-img:after{ opacity: 1; } .single-intro:hover .intro-details{ border-bottom: 4px solid #3452FF; } .intro-details{ background: #fff none repeat scroll 0 0; border-radius: 4px; box-shadow: 0 2px 29px 0 rgba(15, 46, 64, 0.12); max-height: 210px; margin: -70px auto 30px; padding: 30px 25px; position: relative; width: 88%; overflow: hidden; border-bottom: 4px solid #fff; -webkit-transition: all .3s; transition: all .3s; } .intro-details h3{ margin-top: 0; } /* ================ Services area ================== */ .template-title p{ margin-bottom: 55px; } .services-tiem{ margin-bottom: 50px; overflow: hidden; } .services-tiem img{ float: left; margin-right: 25px; padding-left: 5px; } .services-tiem h3,.services-tiem p{ margin-left: 92px; margin-top: 0px; transition: all .3s; } .services-tiem h3:hover{ color: #000; } .services-tiem a{ color: #212121; transition: all .3s; } .services-tiem a:hover{ color: #3452FF; } /* ================= Client logo area ======================*/ .client-logo{ padding: 80px 0px; } .client-logo img{ height: auto; margin: 0 20px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 16%; } .client-logo img:hover{ -webkit-filter: grayscale(100%); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: grayscale(100%); } /* services animation effect ----------------------------------*/ @-webkit-keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .services-tiem img { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .services-tiem:hover img { -webkit-animation-name: hvr-buzz-out; animation-name: hvr-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ Breadcrumb style ================== */ .page-title{ background: url("assets/img/breadcrumb.jpg") no-repeat; background-size: cover; background-position: center; padding: 95px 0px; color: #fff; z-index: 1; position: relative; } .page-title:after{ position: absolute; content: ""; top: 0px; left: 0px; right: 0px; height: 100%; background: rgba(0, 0, 0, .5); z-index: -1; } .page-breadcrumbd h2, .page-breadcrumbd a{ margin: 0px; color: #fff; } /* ================ Accordian section ================== */ .panel-default > .panel-heading { background-color: #F4F7F7; border: none; } .panel-default { border: none; background: #F4F7F7; } .panel-heading { border-bottom: none; border-top-left-radius: 0px; border-top-right-radius: 0px; padding: 0px } .panel-title > a { background: #F4F7F7; display: block; padding: 10px 15px; color: #212121; font-size: 18px; position: relative; } .panel-title > a[aria-expanded=true]{ background: #3452FF; color: #fff; } .panel-title > a[aria-expanded=true]:after{ content: "-"; background: #fff; color: #3452FF; } .panel-title > a:focus{ text-decoration: none; } .panel-title > a:after{ background: #3452ff none repeat scroll 0 0; border-radius: 2px; color: #fff; content: "+"; height: 20px; line-height: 16px; position: absolute; right: 15px; text-align: center; top: 9px; width: 20px; font-weight: bold; } .panel-group .panel + .panel { margin-top: 6px; } .accordian-right-content h2{ margin-bottom: 13px; } /* ================ Portfolio section ================== */ .portfolio-item{ position: relative; margin-bottom: 30px; overflow: hidden; } .portfolio-item::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(77, 103, 254, .9); } .portfolio-details { position: absolute; left: 0; bottom: -30%; width: 100%; padding: 20px; } .portfolio-item:hover .portfolio-details { bottom: 0; } .portfolio-details, .portfolio-item::before { opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .portfolio-item:hover::before, .portfolio-item:hover .portfolio-details { opacity: 1; visibility: visible; } .portfolio-details h3 { margin: 0; } .portfolio-details span { display: block; } .portfolio-details h3 a, .portfolio-details a { color: #fff; } /* portfolio-single-page ------------------------------------*/ .single-portfolio-wrapper, .single-portfolio-wrapper a{ font-family: "Titillium Web",sans-serif; } .single-portfolio-title a { color: #3452ff; font-size: 17px; font-weight: 500; text-transform: uppercase; } .single-portfolio-title h2 { font-size: 26px; margin-bottom: 20px; margin-top: 5px; } .portfolio-details-panel p { line-height: 27px; margin-bottom: 25px; } .portfolio-details-panel ul span { display: inline-block; width: 140px; } .portfolio-details-panel ul { color: #aaa; list-style: none; padding: 0px; margin-bottom: 30px; } .portfolio-details-panel ul span { color: #000; text-transform: uppercase; } .portfolio-details-panel ul li { padding-bottom: 15px; } .portfolio-details-panel ul a { color: #aaa; margin-right: 6px; } .portfolio-details-panel ul a:hover { color: #3452ff; } .single-portfolio-images img { margin-bottom: 30px; } .divider{ background: #EEEEEE; display: block; width: 100%; height: 1px; margin: 10px 0px; } .company-address{ margin: 0 15px; } .company-address ul{ margin: 0px; padding: 0px; list-style: none; } .company-address ul li{ padding-left: 50px; position: relative; margin-bottom: 40px; } .company-address ul li i{ left: 0; position: absolute; top: 4px; color: #4860F0; font-size: 22px; } .company-address ul li a{ color: #61727f; } /* ================ testimonial section ================== */ .testimonial{ padding: 120px 0px; background: #F4F7F7; color: #212121; } .testimonial h3{ font-size: 30px; margin-bottom: 30px; line-height: 45px; } .testimonial a{ color: #212121; font-size: 25px; color: #212121; font-weight: bold; } a:focus{ text-decoration: none; } .testimonial span{ font-size: 15px; } /* preloader -------------------------------*/ #loading{ background-color: #3452FF; height: 100%; width: 100%; position: fixed; z-index: 9999; margin-top: 0px; top: 0px; } #loading-center{ width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 200px; width: 200px; margin-top: -100px; margin-left: -100px; } .object{ -moz-border-radius: 50% 50% 50% 50%; -webkit-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; position: absolute; border-left: 5px solid #FFF; border-right: 5px solid #FFF; border-top: 5px solid transparent; border-bottom: 5px solid transparent; -webkit-animation: animate 2s infinite; animation: animate 2s infinite; } #object_one{ left: 75px; top: 75px; width: 50px; height: 50px; } #object_two{ left: 65px; top: 65px; width: 70px; height: 70px; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #object_three{ left: 55px; top: 55px; width: 90px; height: 90px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #object_four{ left: 45px; top: 45px; width: 110px; height: 110px; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } @-webkit-keyframes animate { 50% { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes animate { 50% { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* ================ Blog Section ================== */ .blog-item{ margin-bottom: 30px; box-shadow: 0 49px 72px 0 rgba(25, 25, 25, 0.12); } .blog-item a{ font-family: "Titillium Web",sans-serif; } .blog-item .blog-thumb{ overflow: hidden; } .blog-item .blog-thumb img{ transition: all .3s; width: 100%; height: auto; } .blog-content{ padding: 0px 10px 20px 30px; } .blog-header .tag{ margin-top: 20px; overflow: hidden; } .entry-title{ color: #212121; font-size: 20px; font-weight: 700; margin-bottom: 18px; line-height: 25px; } .entry-title a{ color: #212121; transition: all .3s; } .entry-title a:hover{ color: #3452FF; } .blog-header ul{ margin: 0px; padding: 0px; list-style: none; } .blog-header ul li{ float: left; position: relative; padding-right: 2px; margin-right: 3px; } .blog-header ul li:last-child:before{ content:""; } .blog-header ul li:before{ bottom: 4px; content: ","; position: absolute; right: 0; font-size: 14px; } .blog-header ul li a{ display: block; margin-right: 5px; margin-bottom: 3px; color: #61727f; transition: all .3s; } .blog-header ul li a:hover{ color: #000; } .entry-content a { color: #000; font-weight: 700; transition: all .3s; } .entry-content a:hover{ color: #3452FF; } /* single blog ---------------------------------------*/ .post-wrapper{ box-shadow: 0 49px 72px 0 rgba(25, 25, 25, 0.12); padding-bottom: 30px; } .post-wrapper .blog-content{ padding: 15px 20px 15px 40px; } .single-post-title h2 { font-size: 29px; font-weight: bold; padding-top: 20px; margin-bottom: 10px } .single-post-title h2 a { color: #212121; } .post-meta ul { list-style: outside none none; margin: 0; padding: 0; } .post-meta li { float: left; } .post-meta { overflow: hidden; margin-bottom: 30px; } .post-meta > ul > li > a { color: #888; margin-right: 19px; transition: all .3s; font-size: 13px; } .post-meta > ul > li > a:hover{ color: #000; } .post-meta li a i { margin-right: 7px; } .post-meta li.rating ul { display: inline; float: right; } .post-meta a { font-family: "Titillium Web",sans-serif; } li.rating > a { margin-right: 8px !important; } li.rating > ul a { font-size: 13px; margin: 0; } li.rating ul i { margin: 1px; color: #FE6000; } .entry-content p { margin-bottom: 30px; } .full-width-img { margin-bottom: 30px; margin-left: -40px; margin-right: -20px; } /* single page social icon -------------------------------*/ .social-link{ overflow: hidden; } .social-link ul{ margin: 0px; padding: 0px; list-style: none; } .social-link ul li{ float: left; } .social-link ul li a{ color: #fff; display: block; font-size: 15px; text-align: center; width: 45px; background: #ddd; white-space: nowrap; margin-right: 6px; padding: 7px 0px; width: 45px; overflow: hidden; font-size: 15px; transition: all 400ms ease 0s; border-radius: 3px; position: relative; margin-bottom: 10px; } .social-link ul li a.facebook{ background: #286196; } .social-link ul li a.twitter{ background: #1AA2F6; } .social-link ul li a.google{ background: #E7462A; } .social-link ul li a.linkedin{ background: #0078B4; } .social-link ul li a.pinterest{ background: #BD081B; } .social-link ul li a.reddit{ background: #FF4400; } .social-link ul li a.message{ background: #9FA3A4; } .social-link ul li a:hover{ width: 90px; } .social-link ul li i{ width: 45px; } .social-link ul li span{ width: 45px; text-align: center; padding-right: 15px; } /* comments form ------------------------------*/ .comments-wrapper{ padding: 15px 40px; border-top: 1px solid #ddd; margin-top: 20px; } .comment-title h2{ margin-bottom: 40px; } /* comments media --------------------------*/ .comments-responsed-wrapper { border-top: 1px solid #ddd; margin-top: 50px; padding: 20px 40px; } .comments-media ol { border: 1px solid #eaeaea; list-style: outside none none; padding: 15px; margin-bottom: 15px; } .comments-media ol ul{ list-style: none; padding: 0px; margin: 0px; } .comments-media img { border-radius: 50%; height: 80px; width: 80px; } .comment-avatar { float: left; margin-right: 15px; padding-top: 15px; } .comment-section { margin-left: 95px; overflow: hidden; } .comment-section h2 { display: inline-block; font-size: 20px; font-weight: 700; margin-bottom: 10px; } .comment-section span { color: #aaa; font-size: 13px; margin-left: 20px; } .comment-content a.btn-comment-replay { border: 1px solid #aaa; border-radius: 3px; color: #aaa; padding: 0px 10px; margin-top: 10px; font-size: 12px; display: inline-block; text-transform: uppercase; line-height: 1.42857143; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .comment-content a.btn-comment-replay:hover { background: #011a48 none repeat scroll 0 0; border-color: #011a48; color: #fff; } .comments-media li .comment-inner { border-bottom: 1px solid #ddd; margin-bottom: 15px; padding-bottom: 22px; overflow: hidden; } .comments-media ol ul { margin-left: 60px; } .comments-media ul li:last-child .comment-inner{ border-bottom: none; padding-bottom: 0px; } @media (max-width: 768px) { .comments-media ol ul { margin-left:0px; } } @media (min-width: 992px) { .comments-media ol ul { margin-left: 60px; } } @media (max-width: 480px) { .comment-avatar { float: none; margin-right: 0; } .comment-section { margin-left: 0; } } /* ================ footer section ================== */ .primary-footer ul{ margin: 0px; padding: 0px; list-style:none; } .primary-footer { background: #00043B; padding: 90px 0px 50px; } .footer-widget{ margin-bottom: 50px; } .footer-widget span{ font-size: 13px; color: #fff; } .footer-widget p, .footer-widget a{ color: #7592a8; } .footer-widget h3{ color: #fff; margin-top: 0px; margin-bottom: 30px; } .about-us p{ margin-bottom: 30px; } .about-us img{ margin-bottom: 28px; } .online-card img{ margin-right: 5px; } /*Useful Link Widget*/ .usefull-link ul li a{ display: block; padding: 7px 0; -webkit-transition: .3s; transition: .3s; } .usefull-link ul li a:hover{ padding-left: 15px; color: #fff; } .usefull-link ul li a i{ color: #fff; margin-right: 10px; } .usefull-link ul li:first-child { padding-top: 0; } /*Latest Post Widget*/ .latest-post ul li{ margin-bottom: 20px; display: block; overflow: hidden; } .latest-post ul li img{ float: left; margin-right: 15px; border-radius: 3px; } .latest-post ul li p a{ font-size: 17px; margin-bottom: 0; font-family: 'Titillium Web', sans-serif; transition: all .3s; } .latest-post ul li p a:hover{ color: #fff; } .latest-post ul li p{ margin-bottom: 2px; } /*NewsLetter Subscription*/ .news-letter p{ margin-bottom: 23px; } .subscribe-form { position: relative; } .subscribe-form button{ display: block; height: 50px; width: 50px; position: absolute; right: 0; top: 0; border: 0; color: #3452ff; font-size: 20px; background: transparent; } .subscription-success { margin-top: 20px; margin-bottom: 0; color: #3c763d !important; } /* footer bottom --------------------------------*/ .copyright-wrapper{ background: #00021C; padding: 40px 0px; } .copyright-wrapper p{ color: #a0a2b1; } .copyright-wrapper a{ color: #fff; }