/* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .sticky, .gallery-caption, .bypostauthor { display: block; } /* ================================================= GENERAL =================================================*/ @import url('https://fonts.googleapis.com/css?family=Open+Sans'); body{ font-family: 'Open Sans', sans-serif; } body p{ color: #595b59; } .site-name{ font-size: 2.3em; } h1, h2, h3, h4, h5, h6, .site-name{ font-weight: 700; } .moretag, a{ color: #f9b701; } .moretag:hover, a:hover{ color: #3a4050; text-decoration: none; } #featured-news h2, #testimonial h2, #featured-works h2, #our-services h2, #the-team h2, #about-us h2{ font-weight: 900; color: #3a4050; } #featured-news h2 span, #testimonial h2 span, #featured-works h2 span, #our-services h2 span, #the-team h2 span, #about-us h2 span{ color: #f9b701; } #featured-news h3, #our-services h3{ font-size: 20px; font-weight: 700; margin: 20px 0; } #post-feed .post-info img{ margin-bottom: 10px; } #post-header, .page-title, #single-post article, #page{ margin-bottom: 40px; } #testimonial { margin-bottom: 60px; } .post-featured-image, .featured-works, #page article{ margin-right: 0 !important; /* Overide .row margin-right : -15px*/ margin-left: 0 !important; /* Overide .row margin-left : -15px*/ padding: 0 !important; /* Overide .row padding-right : -15px and padding-left : -15px*/ } .featured-works{ margin-right: 15px !important; /* Overide .row margin-right : -15px*/ } #our-services, .service-item, #featured-works, .featured-works, #featured-news, .featured-news, #the-team, .team-item, #testimonial{ margin-top: 60px; } .single-post-meta{ margin-top: 30px; } #post-feed .post-info img, .service-item img, .news-item img, .post-featured-image img{ width: 100%; height: auto; } #contact .btn, .parallax a{ border-radius: 0; padding: 10px 20px; } .no-padding, #post-feed .post-item-gallery .post-info img{ margin: 0; padding: 0; } .wp-block-quote, blockquote{ padding: 20px; border-left: 5px solid #f9b701; } .wp-block-quote cite:before, blockquote cite:before{ content: "\2014 \00A0"; } .home-read-more{ display: table; margin-top: 10px; padding-bottom: 1px; color: #7c81a0; } .home-read-more:hover{ border-bottom: 1px solid #f9b701; color: #f9b701; } .wp-block-image figcaption{ margin-top: 0; } .archive span{ vertical-align: middle; } footer .widget-wrapper ul li a:hover, #sidebar a:hover{ color: #f9b701; } table { border-collapse: collapse; width: 90%; } table td, table th { border: 1px solid #ddd; padding: 8px; } table tr:nth-child(even){background-color: #f2f2f2;} table tr:hover {background-color: #ddd;} table thead th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #f9b701; color: white; } #single-post .post-title{ width: 100%; } #post-feed .post-title{ max-width: 100%; } #single-post .post-title,#post-feed .post-title{ -ms-word-wrap: break-word; word-wrap: break-word; } /* ================================================= TOP BAR =================================================*/ .top-bar a{ text-decoration: none; } .top-bar i{ vertical-align: middle; height: auto; } .search-form, .contact-value a{ color: #6a6a6a; font-size: 12px; } .bg-light{ background-color: #f5f5f5 !important; /* Overide .bg-light bootstrap background color */ } .contact-value a:nth-child(1){ margin-right: 50px; } /* ================================================= NAVBAR =================================================*/ .main-menu .navbar{ margin: 0; padding: 0; } .navbar ul{ margin-left: auto !important; } .main-menu ul li{ display: inline; vertical-align: middle; } .main-menu ul li a{ color: #000; text-decoration: none; } .main-menu ul li a:hover, .main-menu ul li.current-menu-item a, .active{ color: #f9b701; } .logo{ margin: 20px 0; } /* ================================================= HEADER IMAGE =================================================*/ .box-paralax{ height: 500px; color: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .parallax .container, .parallax .row{ height: 100%; } .parallax h1{ font-size: 3.25em; font-weight: 800; } .parallax a, .parallax p{ color: #fff; } .parallax a{ background-color: #f9b701; border: none; } .parallax a:hover{ color: #f9b701; } /* ================================================= GET A QOUTE =================================================*/ #contact { background-color: #f9b701; vertical-align: middle; color: #fff; } #contact .contact-title{ font-size: 1.3em; font-weight: 600; margin: 15px 0; } .contact-button{ text-align: right; margin: 10px 0; } #contact .contact-title em,#contact .contact-title i{ color: #000; text-decoration: underline; } #contact .btn{ color: #f9b701; } /* ================================================= OUR SERVICES =================================================*/ /* ================================================= ABOUT US =================================================*/ #about-us{ background: #f8f8f8; } .about-us-info{ padding: 60px 0; } #about-us .ui-widget{ margin-left: -10px; } .about-us-description, .about-us-image, .accordions{ margin-top: 40px; } .about-us-image{ text-align: center; } /* ================================================= FEATURED WORKS =================================================*/ .featured-work-item{ position: relative; } .featured-work-item{ padding: 1px !important; /* Overide .col margin padding */ max-height: 334px; } .featured-work-item h3{ display: none; } .featured-work-item:hover h3{ display: inline; position: absolute; width: 100%; padding: 30px; margin: 0; bottom: 0; font-size: 1.5em; font-weight: 600; background-color: rgba(255,255,255,0.7); } .featured-work-item a:hover { color: #f9b701; } .featured-work-item a{ color: #000; text-decoration: none; font-weight: 700; } .featured-work-item img{ width: 100%; height: 100%; } /* ================================================= TESTIMONIAL =================================================*/ #testimonial h3{ font-size: 1.125em; } .wpmslider-next, .wpmslider-prev{ background: #f9b701 !important; } .modern .testimonial-content::before, .modern .testimonial-content::after{ font-size: 1.5em !important; /* overide size of blockquote from plugin named strong testimonials */ } .testimonial-heading, .testimonial-name, .testimonial-content p{ color: #ddd; } .testimonial-content p{ font-size: .7em; } .client{ padding-bottom: 60px; } .client{ padding-top: 60px; } .testimonial-company a{ color: #f9b701; } .strong-view.modern .testimonial-image{ float: left; margin-right: 10px; } .strong-view.modern .testimonial-name{ float: left; width: 75%; margin-top: 10px; font-size: 1.125em !important; text-align: left; } .strong-view.modern .testimonial-company{ float: left; width: 75%; font-size: 0.875em !important; text-align: left; } /* ================================================= FEATURED NEWS =================================================*/ #featured-news .news-item span{ vertical-align: bottom; } /* ================================================= BLOG =================================================*/ #post-feed{ float: left; margin-top: 20px; margin-bottom: 40px; } .post-tags, .post-meta{ color: #7c81a0; } #post-feed .post-item .post-info{ display: flex; flex-direction: column; justify-content: center; align-items: center; } #post-feed .post-item h2{ font-size: 1.625em; font-weight: 700; text-transform: uppercase; } #post-feed .post-item .post-title{ position: absolute; } #post-feed .post-item .post-title{ background-color: rgba(255,255,255,0.9); padding: 15% 5%; text-align: center; -ms-word-wrap: break-word; word-wrap: break-word; } .post-item .post-author{ letter-spacing: 5px; text-transform: uppercase; } .post-item .post-author a{ color: #212529; } .post-item .post-author a:hover{ color: #f9b701; } .post-meta{ margin-bottom: 10px; } .search span{ vertical-align: text-top; } .post-meta i, .search i{ margin: 0 10px; } .dots{ font-size: 1.875em; vertical-align: middle !important; /* overite vertical-align of .post-meta span */ } .post-line{ background: #EEE; position: relative; overflow: visible; z-index: 100; margin-top: 60px; margin-bottom: 60px; } .post-line:before{ z-index: 10000; content: "\f015"; font-family: FontAwesome; color: #f9b701; position: absolute; top: -23px; left: 50%; right: 50%; width: 40px; height: 30px; margin-left: -20px; font-size: 1.875em; } .post-tags{ display: block; margin-top: 30px; } .moretag{ float: right; display: block; padding: 5px; font-size: 0.875em; letter-spacing: 1px; border: 1px #f9b701 solid; margin-top: -5px; } .moretag:hover{ background: #f9b701; } .moretag:hover{ border-color: #f9b701; } #post-feed .post-info hr{ width: 150px; border: 1px solid #d1d1d1; } /* ================================================= Posts =================================================*/ #single-post .post-title { height: auto; display: flex; flex-direction: column; justify-content: center; padding-left: 80px; } #single-post #post-header{ margin-right: -10px; margin-left: -30px; } #single-post .post-title h1{ font-size: 32px; line-height: 45px !important; /*overide bootstrap heading line-height*/ font-weight: 700; padding: 40px 0 20px 0; } #single-post .post-title .post-category a{ font-size: 14px; font-weight: 400; letter-spacing: 2px; line-height: 21px; text-align: center !important; text-transform: uppercase; color: #26272d; } #single-post .post-title h1, #single-post .post-title .post-category, #single-post .post-title .post-meta{ text-align: left !important; } /* ================================================= PAGES =================================================*/ #page .featured-image-page{ padding: 140px 30px; } /* ================================================= SEARCH =================================================*/ .search-form .input-group { position: relative; } .search-form .input-group-append{ position: absolute; right: 0; z-index: 99; opacity: 0.5; } .search-form .form-control:focus .input-group-append{ opacity: 1; } .search-form .form-control{ border-radius: 10px !important; /*overide bootstrap .input-group > .form-control:not(:last-child){ border-top-right-radius: 0; border-bottom-right-radius: 0;}*/ } .search-form .form-control, .search-form .btn{ font-size: inherit; } .search-form .form-control:focus{ color: #495057; background-color: #fff; border-color: #f9b701; outline: 0; box-shadow: none; } /* ================================================= PAGINATION =================================================*/ .search .pagination{ display: block; text-align: center; } .page-numbers { padding: 5px 10px; border: 1px solid; } .page-numbers.current{ vertical-align: unset; } /* ================================================= SIDEBAR =================================================*/ #sidebar, #sidebar a { color: #303842; font-weight: 500; } #sidebar .widget-wrapper { margin-bottom: 40px; } #sidebar .widget-title { font-weight: 600; color: #f9b701; margin-bottom: 20px; font-size: 24px; } #sidebar ul { padding: 0; } #sidebar ul li { list-style: none; padding: 10px 0; border-bottom: 1px solid #e9e9e9; } #sidebar ul li .post-date { display: block; font-size: 12px; margin-left: 10px; } /* ================================================= FOOTER =================================================*/ footer, footer p, .footer-menu ul li a{ color: #fff; font-size: 12px; } .footer-menu ul li a:hover{ color: #f9b701; } footer .copyright{ padding: 8px; } #footer-widgets{ background: #252d3a; padding: 40px; } #footer-copyright{ background-color: #4c5b6e; padding: 10px; } footer .widget-wrapper .widget-title{ font-size: 16px; font-weight: 600; } footer .widget-wrapper ul{ padding: 0; } footer .widget-wrapper ul li{ list-style-type: none; border-bottom: 1px #2f3847 solid; padding: 10px 0; } footer .widget-wrapper ul li:before{ content: "ยป "; font-size: 14px; } footer .widget-wrapper ul li a{ display: inline-block; color: #fff; } footer .widget-wrapper ul li span{ display: block; } .footer-menu ul{ margin: 0; } .footer-menu ul li{ display: inline-block; list-style: none; } /*************** GUTENBERG ***************/ .alignfull { width: 100vw; margin-left: calc( 50% - 50vw ); max-width: none; } .wp-block-image.alignfull img, .wp-block-image.alignwide img { width: 100%; } @media only screen and (min-width: 320px) { .contact-value span{ display: none; } .contact-value i { font-size: 20px; } .contact-value a:nth-child(1) { margin-right: 20px; } .about-us-image img { width: 100%; } .menu-area .navbar .container{ justify-content: flex-start; } .box-paralax { height: 400px; } .parallax h1 { font-size: 2.125em; } .contact-button{ text-align: center; margin: 0 0 15px 0; } .about-us-info{ padding: 60px 0 0 0; } .about-us-image { margin-top: 0; } #post-feed .post-item h2{ font-size: 18px; } #post-feed .post-item .post-title{ padding: 3%; } .post-item .post-author { letter-spacing: 2px; } #single-post .post-title h1 { padding: 0; } #single-post .post-title{ padding-left: unset; } #single-post #post-header { margin-right: inherit; margin-left: inherit; } body p{ font-size: 0.8em; } #single-post .post-title .post-meta{ font-size: 0.8em; } #page .featured-image-page { padding: 50px 30px; } } @media only screen and (min-width: 768px) { body p{ font-size: 1em; } .contact-value span{ display: inline; } .contact-value i { font-size: 12px; } .contact-value a:nth-child(1) { margin-right: 50px; } .about-us-image img { width: unset; } .menu-area .navbar .container{ justify-content: space-between; } .box-paralax { height: 500px; } .parallax h1 { font-size: 3.25em; } .contact-button{ text-align: right; margin: 10px 0; } .about-us-info{ padding: 60px 0; } .about-us-image { margin-top: 40px; } #post-feed .post-item h2{ font-size: 26px; } #post-feed .post-item .post-title{ padding: 15% 5%; } .post-item .post-author { letter-spacing: 5px; } #single-post .post-title .post-meta{ font-size: 1em; } #page .featured-image-page{ padding: 140px 30px; } } @media only screen and (min-width: 992px) { #single-post .post-title h1 { padding: 40px 0 20px 0; } #single-post .post-title{ padding-left: 80px; } #single-post #post-header { margin-right: -10px; margin-left: -30px; } } @media only screen and (min-width: 1140px) { .alignwide { width: 85vw; margin-left: calc( 40% - 70vw / 2 ); max-width: none; } }