@charset "utf-8";
/* CSS Document */
:root {
	--lightblue: rgb(230,235,239);
    --blue: rgb(26,108,171);
	--darkblue: rgb(19,50,74);
	--orange: rgb(227,136,0);
	--charcoal: rgb(25,25,25);
}
body::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}
/* Hide scrollbar for IE, Edge and Firefox */
html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}
.bright-pink-background {
    background-color: brightpink;
}
body {
    font-family: 'Karla', sans-serif;
    background-color: var(--charcoal);
    font-size: 20px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
body .background {
    background-color: var(--charcoal);
    background-image: url("/images/still4.jpg");
    background-position: center;
    background-size: cover;
    position: fixed;
    z-index: -1;
    top: 0; bottom: 0; left: 0; right: 0;
}

.preloader {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
} 
 .spinner-border {
    width: 6rem;
    height: 6rem;
    border-width: 0.75em;
} 

h1, h2, h3, .documentDescription {
    font-family: 'Noto Serif', serif;
    font-weight: 400;
}
h1.documentFirstHeading, h4, h5 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
}
h1.documentFirstHeading {
    font-size: 52px;
}
.documentDescription {
    font-size: 24px;
    font-weight: 300;
}
h2.title {
    font-size: 58px;
}

.mt-10 {
    margin-top: 60px;
}
.mb-10 {
    margin-bottom: 60px;
}

#hero {
    min-height: 100vh;
    background-color: var(--charcoal);
    color: #fff;
    position: relative;
}
.background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}
.tradingview-widget-container .tradingview-widget-copyright span {
    color: var(--blue) !important;
    font-size: 10px;
    display: none;
}
.tradingview-widget-container {
    height: auto !important;
}

#navbar_top {
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 0;
}
.navbar-brand {

}
.nav-link {
    text-transform: uppercase;
}
.navbar-expand .navbar-nav .nav-link.login {
    border-radius: 100px;
    padding-left: 20px;
    padding-right: 20px;
    background: #fff;
    color: var(--charcoal);
    margin-left: 10px;
}

.image-block img {
    margin: 10px 30px; 
    max-height: 50px;
    filter: grayscale(100%);
    opacity: 0.8;
}

.block {
    overflow: auto;
    min-height: 100vh;
    background-color: var(--charcoal);
    position: relative;
}
.combo-block, #technology-driven-commodity-trade-platforms {
    background-color: transparent;
    position: relative;
    padding: 210px 0;
}
#hero::after, .block::after {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 2;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); 
    content:"";
}

#hero .container, .block .container {
    position: relative;
    z-index: 3;
}
.white-text {
    color: #fff;
}
.white-text a, .white-text a:focus {
    color: #fff;
}
.subtitle {
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
}
.block#about-us, .block#talk-to-us {
    min-height: auto;
    padding: 110px 0;
}
.block#talk-to-us, .block#one-platform-to-manage-your-fuel-trade-and-finances {
    background-image: url('/images/anim2.jpg');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: cover;
}
.block#one-platform-to-manage-your-fuel-trade-and-finances {
    background-position: right bottom;
}
.block#one-platform-to-manage-your-fuel-trade-and-finances .row {
    padding-top: 140px;
    padding-bottom: 140px;
}
.content li {
    margin-bottom: 10px;
    line-height: 24px;
}

#accordion h4 {
    background: #fff;
    padding: 25px 25px 10px 25px;
    margin-bottom: 0;
    color: var(--blue);
}
#accordion h4.ui-accordion-header-collapsed {
    padding-bottom: 25px;
    margin-bottom: 10px;
    color: var(--darkblue);
}
#accordion div {
    background: #fff;
    padding: 0 25px 15px 25px;
    margin-bottom: 10px;
}
#accordion h4.ui-accordion-header-collapsed span {
    transform: rotate(0);
}
#accordion h4 span {
    transform: rotate(270deg);
}

.image-block .content, .tradingview-widget-container--wrapper {
    position: relative;
    z-index: 4;
    margin-top: -45px;
    margin-bottom: -45px;
    background: #ffffff;
    border-radius: 10px;
}
.tradingview-widget-container--wrapper {
    margin: -32px auto;
    width: 100%;
}

.bg-image {
    background-size: cover;
    background-position: top;
    height: calc(100% - 10px);
    min-height: 200px;
}

.btn--contact {
    color: #fff;
    background: var(--orange);
    text-transform: uppercase;
    display: inline-block;
    padding: 15px 25px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 18px;
}
.btn--contact:hover {
    color: #fff;
}
#contact .content a, #contact .content a:hover {
    color: var(--orange);
    text-decoration: none;
}

#belowFooter {
    background: var(--charcoal);
    font-size: 12px;
    color: #fff;
}
#belowFooter a {
    color: #fff;
    text-decoration: none;
}

/*Menu*/
.btn--menu.btn--red {
    padding: 10px 14px;
    font-size: 18px;
}
.openmenu .menu--overlay--light {
	background: #000;
	opacity: 0.8;
	position: fixed;
	z-index: 100;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	mix-blend-mode: multiply;
}
.menu--overlay--dark {
	background: #000;
	position: fixed;
	padding: 20px;
	z-index: 101;
	top: 0;
	left: 0;
	right: 0;
}
.menu--overlay--dark--top .logo {
	width: 400px;
}
.menu--overlay--close {
	font-size: 22px;
	color: #fff;
}
.menu--overlay--close .svg g > * {
    stroke: #fff;
}
.openmenu {
	overflow-y: hidden;
}

.scroll--progress { position: fixed; top: 0; left: 0; height: 0; background-color: #fff; transition: all linear 0.1s; min-width: 10px; z-index: 100; }

@media (max-width: 991.98px) {
	
    .block {
        min-height: auto;
        padding: 60px 0 !important;
    }
    .image-block img {
        max-height: 30px;
        margin: 10px 15px;
    }
    .tradingview-widget-container--wrapper {
        margin: -46px auto;
        width: 90%;
    }
    .image-block .content {
        width: 90%;
    }
    h1.documentFirstHeading {
        font-size: 42px;
    }
    h2.title {
        font-size: 48px;
    }
    .block#one-platform-to-manage-your-fuel-trade-and-finances .row {
        padding-top: 0;
        padding-bottom: 0;
    }
    
}