/*
Theme Name: FSEMOGS
Author: SJ
Author URI: 
Theme URI: http://rair-dev.co.za/fsemogs/
Description: MOGS is a leading black-owned and Pan African oil and gas infrastructural developer, owner and operator, and a diversified mining services group.
Tags: fsemogs
Text Domain: fsemogs
Requires at least: 6.2
Requires PHP: 8.1
Tested up to: 8.1
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/
@import url('assets/css/animate.css');
@import url('assets/css/font-awesome.css');

/*--Sansation --*/
 @font-face {
    font-family: 'Sansation-Light';
    src: url('/assets/fonts/sansation/Sansation-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
    font-family: 'Sansation-Regular';
    src: url('/assets/fonts/sansation/Sansation-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
    font-family: 'Sansation-Bold';
    src: url('/assets/fonts/sansation/Sansation-Bold.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

.wp-site-blocks {padding-top:0 !important; padding-bottom:0 !important;}


h1 {color:#ff8c00; }

h2 {color:#004783; line-height:1.2em; margin-bottom:0.5em; }

h3 {color:#ff8c00; }
h3 {color:#ff8c00; }

h4 {color:#000; }

h5 {fcolor:#555; }

h6 {line-height:1.3em;  }

p, p.standard, p.std {margin: 0 0 1.3em 0;   }

p.mrgn03 {margin-bottom:0.3em;}
p.mrgn05 {margin-bottom:0.5em;}
.pblock {display:block; line-height:1.6em;}

p.lead {display:block; padding:0 0 0; font-size:1.3em; line-height:1.5em; margin:0 0 1.1em 0; font-weight:normal; color:#000; fontFamily: var(--wp--preset--font-family--sansation); }
@media (min-width: 480px) { p.lead {font-size:1.2em;} }
@media (min-width: 768px) { p.lead {font-size:1.25em;} }
@media (min-width: 992px) { p.lead {font-size:1.3em;} }
@media (min-width: 1200px) { p.lead {font-size:1.3em;} }
@media (min-width: 1200px) { p.lead {font-size:1.3em;} }

/*--
ul, ol {margin:0 0 2em 20px; padding:0; }

li {list-style:none; margin:0 0 0.5em 0; font-size:1.0em; color:#444; } 
ol li {list-style:decimal !important;} --*/

li:before,
ol li ul li:before {background:none; font-family:var(--font-awesome); font-size:0.6em; position: absolute; left:0; top:0; content:"";  color:#9bc42b; }
li ul li {margin:0 0 0.3em 20px; font-size:0.9em;}

/*--DL list--*/
dl {}
dt {color:var(--color-body);
    font-weight: bold;
    line-height: 1.3em;
    margin: 0 0 0 0;
    padding: 10px 0 0.3em 0;
    font-style: italic;
	border-top: 1px dotted #CCC;}
dd {margin: 0 0 0.0em 0;
padding:0px 0 5px 8%;
border-top: 0px dotted #CCC;}

a {color:var(--color-rust); text-decoration:none; }
p a, h5 a, h6 a {border-bottom:1px dotted var(--color-rust);}
a:hover {color:#000;}
a:hover, a:active, a:focus {outline: none}
strong {color: #555555}
hr, hr.hr-dots {clear:both; width:100% !important; height:2px; padding:5px 0; margin:18px 0 18px 0; border:none; border-bottom:2px dotted #ccc;}
.blog-blog-subpage hr{height:1px; padding:0px 0; margin:0 0 10px 0; border:none; border-bottom:1px dotted #ccc;}

.dir-col-wrapper {margin-top:0 !important;}
.dir-col {margin-top:30px !important; margin-bottom:0px !important; padding-bottom:30px; border-bottom:2px dotted #ccc;}

img.img-r {margin:0 0 15px 15px;}
img.img-l {margin:0 15px 15px 0;}
img.img-100 {width:100%;}
img.img-brdr {border:1px solid #999;}


/*--Buttons--*/
.wp-block-button.btn-default .wp-block-button__link,
.btn-default a {
  color:#0a2647;
  background:#f79520;
  font-size:0.8em;
  font-weight:600;
  padding:7px 15px;
  text-decoration:none;
  -webkit-transition: transform 0.2s ease;
  transition:transform 0.2s ease;
}
.wp-block-button.btn-default .wp-block-button__link:hover,
.btn-default a:hover {color: #fff; background:#0a2647; transform: scale(1.03);}

.wp-block-button.btn-primary .wp-block-button__link,
.btn-primary a {
  color:#fff;
  background:#0a2647;
  font-size:0.8em;
  font-weight:600;
  padding:7px 15px;
  text-decoration:none;
  -webkit-transition: transform 0.2s ease;
  transition:transform 0.2s ease;
}

.wp-block-button.btn-primary .wp-block-button__link:hover,
.btn-primary a:hover {color:#fff; background:#0a2647; transform: scale(1.03);}


/*--Header --*/
header {width:100%; height:auto; display:block; position:fixed; top:0; left:0; z-index:10000; padding:0; -webkit-animation:fadeIn 1s; animation:fadeIn 1s; background:url(assets/images/topbar-tile.png) left -150px repeat-x; background-position:0 -150px;}
@media (min-width: 480px) { header {background-position:0 -130px;} }
@media (min-width: 768px) { header {background-position:0 -120px;} }
@media (min-width: 992px) { header {background-position:0 -120px;} }
@media (min-width: 1200px) { header {background-position:0 -120px;} }
@media (min-width: 1600px) { header {background-position:0 -120px;} }
@media (min-width: 1800px) { header {background-position:0 -110px;} }

body.scrolled header { background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.0)); }

.header-wrapper {align-items:flex-start; width:100% !important; max-width:100% !important; margin:0 !important;}


/*--Brand--*/
.wp-block-site-logo {flex:0 1 auto; vertical-align:top; width:25%; height:auto; margin:0; padding:0 0 10px 0; -webkit-animation:fadeIn 1s; animation:fadeIn 1s; webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
@media (min-width: 480px) { .wp-block-site-logo {width:25%; padding:0 0 12px 0; } }
@media (min-width: 768px) { .wp-block-site-logo {width:20%; padding:0 0 15px 0; } }
@media (min-width: 992px) { .wp-block-site-logo {width:15%; padding:0 15px 15px 0; } }

body.scrolled .wp-block-site-logo {flex:0 1 auto; width:20%; min-width:100px; padding:0 0 10px 0; -webkit-animation:fadeIn 1s; animation:fadeIn 1s;}
@media (min-width: 768px) { body.scrolled .wp-block-site-logo {width:8%; min-width:100px; padding:0 0 15px 0; } }

@media (min-width: 992px) { body.home .wp-block-site-logo {width:18%; } }
@media (min-width: 1200px) { body.home .wp-block-site-logo {width:16%;} }
@media (min-width: 1600px) { body.home .wp-block-site-logo {width:18%;} }

body.home.scrolled .wp-block-site-logo {flex:0 1 auto; width:20%; min-width:100px; padding:0 0 10px 0; -webkit-animation:fadeIn 1s; animation:fadeIn 1s;}
@media (min-width: 768px) { body.home.scrolled .wp-block-site-logo {width:8%; min-width:100px; padding:0 0 15px 0; } }

.wp-block-site-logo img {width:100%; max-width:255px; padding:0; }

body.home .wp-block-site-logo img,
.wp-block-site-logo.is-default-size img {width:100%; max-width:225px; padding:0; box-shadow:2px 2px 10px rgba(0,0,0,0.3); }

main {margin-top:90px;}
@media (min-width: 480px) { main {margin-top:70px;} }
@media (min-width: 768px) { main {margin-top:80px;} }
@media (min-width: 992px) { main {margin-top:80px;} }
@media (min-width: 1200px) { main {margin-top:80px;} }
@media (min-width: 1600px) { main {margin-top:80px;} }
@media (min-width: 1900px) { main {margin-top:90px;} }

article {min-height:700px; margin-bottom:60px !important; -webkit-animation:fadeIn 1s; animation:fadeIn 1s; }

/*--Home Banner Carousel--*/
.ql-banner-carousel {margin-top:0px; background:#d1d3d4; z-index:0; border-bottom:40px solid #d1d3d4;}

.ql-banner-carousel ul {margin:0 !important; padding:0 !important;}
.ql-banner-carousel ul li {margin:0 !important; padding:0 !important;}

.carousel-home {height:auto; min-height:700px; -webkit-animation:fadeIn 1s; animation:fadeIn 1s; font-size:1em; }
@media (min-width: 480px) { .carousel-home {height:auto; min-height:700px; } }
@media (min-width: 768px) { .carousel-home {height:auto; min-height:700px;} }
@media (min-width: 992px) { .carousel-home {height:86vh; min-height:727px;} }
@media (min-width: 1200px) { .carousel-home {height:86vh; min-height:800px; } }
@media (min-width: 1600px) { .carousel-home {height:86vh; min-height:800px; } }

.carousel-home .btn-default {color:#004783; background:#d1d3d4 !important;}

.carousel-home .carousel-caption {max-width:1140px; gap:0 !important; -webkit-animation:fadeIn 1.5s; animation:fadeIn 1.5s;}
.carousel-home .carousel-caption h2 {}
.carousel-home .carousel-caption p {}

.carousel-home .carousel-caption .col-left {}
.carousel-home .carousel-caption .col-right p {color:#fff !important; font-weight:normal !important;}
.carousel-home .carousel-caption .col-right p strong {color:#fff !important; font-weight:normal !important;}

.home-banner .slick-dots {
    width:100%; height:30px !important; 
    margin:0; 
    position:absolute; 
    bottom:60px !important; 
    right:auto !important; 
    top:auto !important; 
    left:25% !important; 
    z-index: 15; 
    text-align:left; 
    display:-ms-flexbox; 
    display:flex; -ms-flex-pack:left; 
    justify-content:left; 
    list-style: none;}
@media (min-width: 480px) { .home-banner .slick-dots {bottom:80px !important; width:30% !important; left:25% !important;} }

.home-banner .slick-dots li {width:auto; margin: 0 4% 0 0 !important; }

.home-banner .slick-dots li button {color:transparent; 
    border:2px solid #fff !important; 
    background:transparent !important; 
    list-style:none !important; 
    position:relative; 
    width:15px !important; height:15px !important; 
    margin:0 4% 0 0 !important; 
    padding:0 !important; 
    font-size:0.0em !important; 
    line-height:1.5em !important; 
    text-align:left !important; 
    box-sizing:content-box !important; -ms-flex: 0 1 auto; 
    flex: 0 1 auto !important; 
    opacity:1 !important; 
    text-shadow:2px 2px 5px rgba(0,0,0,1);text-indent:0; cursor: pointer;}
@media (min-width: 480px) { .home-banner .slick-dots li button {width:20px !important; height:20px !important;  } }
@media (min-width: 768px) { .home-banner .slick-dots li button {width:25px !important; height:25px !important;  } }
@media (min-width: 992px) { .home-banner .slick-dots li button {width:25px !important; height:25px !important;  } }
@media (min-width: 1200px) { .home-banner .slick-dots li button {width:30px !important; height:30px !important;  } }
@media (min-width: 1600px) { .home-banner .slick-dots li button {width:30px !important; height:30px !important; } }

.home-banner .slick-dots li.slick-active button {background:#fff !important;}

.home-banner .slick-dots li button:before {display:none !important;}

.slick-dots li.slick-active {background:#fff;}



footer {margin-top:0 !important;}
.footer-group {}
.footer-columns {}
.col-ftr {}
.col-ftr p {color:#b2b2b2; font-size:0.9em;}

ul.ftr-quick-links {color:#b2b2b2; margin:0 0 2em 0; padding:0; column-count:2; column-gap:40px;}
ul.ftr-quick-links li {color:#b2b2b2; font-size:0.9em; list-style:none;}
ul.ftr-quick-links a {color:#b2b2b2; padding-left:20px; position:relative;}
ul.ftr-quick-links a:hover {color:#fff;}
ul.ftr-quick-links li a:before {font-family: 'FontAwesome'; content:"\f054"; color:#b2b2b2; position:absolute; left:2px; top:0; font-size:0.7em;}

/*--Home services--*/
.hm-services {margin:0; padding:0 0 200px 0 !important; background:url(assets/images/hm-services-background.png) left bottom repeat-y; background-size:cover; min-height: 600px; } 

.hs-grid {gap:0 !important;}

.col-oil-gas {height:596px; position:relative; }

.col-mining {height:596px; position:relative; }

/*
.col-oil-gas {padding-top:400px; padding-bottom:0; padding-right: calc(6% - 15px); padding-left: calc(6% - 15px); margin-bottom:-150px !important; }
.col-mining {padding-top:400px; padding-bottom:0; padding-right: calc(6% - 15px); padding-left: calc(6% - 15px); margin-bottom:-150px !important; } */

.hms-content {width:auto; margin:0 auto -100px auto !important; position:absolute; left:10%; top:auto; right:10%; bottom:0; min-height:320px;}

.hms-content .wp-block-button.btn-default {position:absolute; left:auto; top:auto; right:40px; bottom:0;}
.hms-content .wp-block-button.btn-default .wp-block-button__link {}
.hms-content .wp-block-button.btn-default .wp-block-button__link:hover {color:#0a2647; background:#fff;}

/*--Investors slider--*/
.hm-investors-logos {}

#investors-slider {}
#investors-slider .slide,
#investors-slider .slick-slide,
#investors-slider .slide a,
#investors-slider .slide img {background:transparent !important; }

.slick-slider button.slick-prev {display:block; width:30px; height:50px; position:absolute; left:2%; top:47%; background:transparent; border-radius:0; margin:25px 0 0; color:transparent; font-size:1em; border:none !important; outline:none !important; text-decoration:none !important; z-index:100;}
@media (min-width: 992px) { .slick-slider button.slick-prev {left:2%;} }

.slick-slider button.slick-next {display:block; width:30px; height:50px; position:absolute; right:2%; top:47%;  background:transparent; border-radius:0; margin:25px 0 0;; color:transparent; font-size:1em; border:none !important; outline:none !important; text-decoration:none !important; z-index:100;}
@media (min-width: 992px) { .slick-slider button.slick-next {right:2%;} }

.slick-slider button.slick-prev:hover,
.slick-slider button.slick-next:hover {background:transparent !important; color:transparent;}

.slick-slider button.slick-prev:before {display:block; width:30px; height:50px; font-family:'FontAwesome';
		font-size:2.4em; border:none !important; outline:none !important;
		position:relative; margin:5px 0 0 -5px; padding:0;
		content:"\f053";
        opacity:0.5 !important;   }

.slick-slider button.slick-next:before {display:block; width:30px; height:50px; font-family:'FontAwesome';
		font-size:2.4em; border:none !important; outline:none !important;
		position:relative; margin:5px 0 0; padding:0;
		content:"\f054";  
		color:#fff !important;
        opacity:0.5 !important; }

.slick-slider button.slick-prev:hover:before,
.slick-slider button.slick-next:hover:before {color:#fff !important; opacity:1 !important;}

/*--Footer Search form--*/
footer form.searchform input {display:inline-block; vertical-align:top; width:60%; min-width:60%;}

footer form.searchform input[type="search"] {width:calc(100% - 45px); height:38px !important; color:#000; background:#d1d3d4; margin:0 0 5px 0; padding:5px 5px 5px 10px; border:none; border-radius:0; font-size:1.1em; font-weight:500; }
@media (min-width: 768px) { footer form.searchform input[type="search"] { } }

footer form.searchform button[type="submit"] {display:inline-block !important; vertical-align:top; width:40px !important; min-width:40px !important; height:38px !important; margin:0 0 0 -10px !important; padding:0px !important; font-size:0 !important; border:none; cursor:pointer; border-radius:0; position:relative !important; z-index:0; background:#d1d3d4 url(assets/images/search-icon.svg) center center no-repeat !important; background-size:60% !important; }

footer form.searchform button[type="submit"]:hover {background-size:70% !important;}

footer a {color:#b2b2b2; }
footer a:hover {color:#fff; }

/*--Banners--*/
.wp-block-lazyblock-banner {
  display: block;
  width: 100%;
  height: auto;
  margin-block-start: 0;
}

.page-banner {
  display:block; box-sizing:border-box;
  width:100%; margin:0; padding:140px 0 0 0;
  height:240px;
  -webkit-animation: fadeIn 1s; animation: fadeIn 1s;
}
@media (min-width: 768px) { .page-banner {height:320px; padding:260px 0 0 0}}
@media (min-width: 480px) { .page-banner {height:360px; } }
@media (min-width: 768px) { .page-banner {height:360px; } }
@media (min-width: 992px) { .page-banner {height:360px;}}
@media (min-width: 1200px) { .page-banner {height:360px;}}
@media (min-width: 1600px) { .page-banner {height:365px;}}

.bannerheader {max-width:1320px; margin: 0; margin-left: auto !important; margin-right: auto !important;}

.pg-title {display: block; padding: 0;}

.page-banner h1 {flex:0 1 auto; width:100%; font-size:2.5em; line-height:0.8em; text-transform:uppercase; color:#fff; margin:0 0 10px 25px; position:relative; text-shadow:2px 2px 15px rgba(0,0,0,1); font-family:'Sansation-Bold', arial, helvetica, sans-serif; }
@media (min-width: 480px) { .page-banner h1, .post-template.single-post .page-banner h1 {font-size:2.5em;} }
@media (min-width: 768px) { .page-banner h1, .post-template.single-post .page-banner h1 {font-size:2.8em;} }
@media (min-width: 992px) { .page-banner h1, .post-template.single-post .page-banner h1 {font-size:3em;} }
@media (min-width: 1200px) { .page-banner h1, .post-template.single-post .page-banner h1 {font-size:3.1em;} } 
@media (min-width: 1600px) { .page-banner h1, .post-template.single-post .page-banner h1 {font-size:3.3em;} }

/*--About us--*/
.parent-pageid-13 .page-banner {background:url(assets/images/banner-about-us.jpg) center top no-repeat; background-size:cover;}

/*--Investments--*/
.parent-pageid-106 .page-banner {background:url(assets/images/banner-investments.jpg) center top no-repeat; background-size:cover;}

/*--Contacts--*/
.page-id-81 .page-banner {background:url(assets/images/banner-contacts.jpg) center top no-repeat; background-size:cover;}

/*--About us--*/
.page-id-3 .page-banner, 
.page-id-151 .page-banner, 
.page-id-149 .page-banner, 
.page-id-158 .page-banner,
.search .page-banner {background:url(assets/images/banner-footer.jpg) center top no-repeat; background-size:cover;}


/*--Breadcrumbs--*/
.wp-block-group.breadcrumbs {display:block; background:#e5e5e5; margin:0; padding:15px 0 15px 0; height:60px; -webkit-animation:fadeIn 1s; animation:fadeIn 1s;}
.wp-block-group.breadcrumbs .container {display:block; 
    max-width: var(--wp--style--global--content-size);
    margin:0 auto !important; padding:0;
}
.wp-block-group.breadcrumbs p.breadcrumb {margin:0 !important;}
.wp-block-group.breadcrumbs p#breadcrumbs span {font-size:0.9em; color:#777;}
.wp-block-group.breadcrumbs p#breadcrumbs span span {font-size:1em;}
.wp-block-group.breadcrumbs p#breadcrumbs a {color:#777; }
.wp-block-group.breadcrumbs p#breadcrumbs a:hover {color:#000; }