﻿@import url(effect.css);

/* Fonts */
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Bold.woff2') format('woff2'),
        url('fonts/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Medium.woff2') format('woff2'),
        url('fonts/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Book.woff2') format('woff2'),
        url('fonts/Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Light.woff2') format('woff2'),
        url('fonts/Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Fonts */

html { margin: 0; padding:0; overflow-x:hidden;}
body{
font-family: 'Gotham', sans-serif; font-weight:normal; padding:0; color:#333; font-weight:normal; padding-right:0!important;
font-size:15px;
line-height:1.5;
}

/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */

:root{--orange:#f15a26; --black:#000; --gray:#eee;}

img{border:0;}

*{ box-sizing:border-box;
}
*:hover{
}

a{color:var(--orange); text-decoration:none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
a:hover{text-decoration:none; color:var(--orange);}

h1, h2, h3, h4, h5{margin:0 0 15px; padding:0; color:var(--orange);}


.container{width:1400px; max-width:99%;}

.header{background:#fff; padding:12px 0; display:block;}
.header .logo img{height:50px; display:inline-block;}
.header .container > ul{display:block; clear:both; text-align:right; margin:0 0 10px; padding:0; list-style-type:none; font-size:17px; font-weight:700;}
.header .container > ul li{margin:0; padding:0; display:inline-block; vertical-align:middle; margin-left:30px;}
.header .container > ul li a{color:var(--orange);}


.searchForm{margin:0 auto; width:300px; max-width:100%; position:relative;}
.searchForm input[type="text"]{border:none; background:var(--gray); width:100%; padding:7px 10px; border-radius:5px; font-size:14px;}
.searchForm button{position:absolute; right:0; background:none; border:none; padding:5px 5px; cursor:pointer;}

.sliderArea{position:relative; text-align:right;}
.sliderArea .carousel img{max-width:100%;}
.sliderArea:after{ z-index:5; display:block; overflow:hidden; height:90px; background:url('../images/png/rectangleshdw.png') repeat-x center top; content:''; position:absolute; top:0; left:0; right:0;}
.sliderArea .carousel-control-prev, .sliderArea .carousel-control-next{width:45px; height:45px; top:45%; right:auto; left:0; opacity:1; background:var(--orange); color:#fff; z-index:100;}
.sliderArea .carousel-control-prev:hover, .sliderArea .carousel-control-next:hover{color:#fff;}
.sliderArea .carousel-control-prev{top:calc(45% - 48px);}
.sliderArea .carousel-control-prev i, .sliderArea .carousel-control-next i{font-size:24px;}

.sliderContent{position:absolute; left:7%; top:50%; transform:translate(0,-60%); z-index:8; width:30%; text-align:left;}
.sliderContent h2{  font-size: 62px; margin-bottom:30px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}
.sliderContent p{font-size:17px; margin:15px 0 30px; line-height:1.4;}
.sliderContent a{ display:inline-block;
  padding: 16px 23px;
  object-fit: contain;
  border-radius: 4px;
  background-color:var(--orange); color:#fff;
  font-size: 20px;
  font-weight: 500;
}


.alertArea [class^="col-"]:last-child{padding:60px 0; display:block;}
.alertArea [class^="col-"]:last-child:before{position:absolute; left:-5%; right:35%; top:0; bottom:0; display:block; content:''; background:var(--orange); border-radius:25px; z-index:-1; opacity:0.2;}
.alertArea [class^="col-"]:last-child img{padding-left:25px;}
.alertArea [class^="col-"] > div{padding:60px 15px 0; display:block; overflow:hidden;}
.alertArea h3 {font-size: 18px;  font-weight: 500;  letter-spacing: 1px;  color: #002ee6; margin:0 0 20px;}
.alertArea h2 {font-size: 40px;  font-weight: 500;  color: #000; margin-bottom:20px;}
.alertArea p{font-size: 17px; text-align: justify; line-height:1.2;}



.portfolioArea{margin-bottom:50px;}
.portfolioArea [class^="col-"]:last-child:before{left:35%; right:-4%; top:60%; background-position:left bottom;}
.portfolioArea [class^="col-"]:last-child{padding:50px 0; display:block;}
.portfolioArea [class^="col-"]:last-child img{padding-right:25px; padding-left:0;}
.portfolioArea [class^="col-"] > div{padding:60px 20px 0; display:block; overflow:hidden;}


.parallaxArea{background:var(--orange) url('../images/group-copy@3x.png') bottom left no-repeat fixed; padding:80px 0 50px; color:#fff;}
.parallaxArea h2{color:#fff; font-size:42px; line-height:1.2;}
.parallaxArea p{font-size:20px;}
.parallaxArea .row .row [class^="col-"]{margin-bottom:30px; position:relative;}
.parallaxArea .row .row [class^="col-"]:before{position:absolute; left:15px; right:15px; top:0; bottom:0; background:#fff;border-radius:12.5px; content:''; display:block;}
.parallaxArea .row .row [class^="col-"] > div{padding: 20px 40px 20px 20px; position:relative; z-index:2;}
.parallaxArea h3 {
  margin: 14px 0;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000;
}
.parallaxArea .row .row [class^="col-"] > div p {
  margin: 12.7px 0 0;
  opacity: 0.5;
  font-family: Gotham;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000;
  min-height:50px;
}



.howItWorks{ display:block; overflow:hidden; background:#fff;}
.howItWorks h2{color:#000; font-size:24px; margin-bottom:0;}
.howItWorks [class^="col-"] a{padding: 20px 30px; border-radius: 5px; background-color: var(--orange); display:inline-block;
font-size: 16px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 1.5px;
color: #fff;
}
.howItWorks [class^="col-"] a:hover{background:#000;}



footer{background:var(--dark); color:#fff; padding:30px 0;}
footer .logo img{height:40px; display:inline-block; filter: brightness(0) invert(1);}

footer [class^="col-"] ul{ float:right; margin:0; padding:0; list-style-type:none;}
footer [class^="col-"] ul li{display:inline-block;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
}
footer [class^="col-"] ul li a{color:#fff; padding:3px 15px; opacity: 0.5; border-left:1px #fff solid;}
footer [class^="col-"] ul li:first-child a{border:none;}
footer [class^="col-"] ul li:hover a{opacity:1;}

.innerPage{display: block; overflow: hidden; margin-bottom: 30px;}
.innerPage h1{display: block; overflow: hidden; text-align: center; color: #fff; background: var(--orange); padding: 30px 0;}
.innerPage button{padding: 12px 30px!important; width:100%!important; display: block!important; overflow: hidden; border: none!important; background-color: var(--dark)!important; font-size: 16px; font-weight: 500; color: #fff!important;}
.innerPage button:hover{background: var(--orange)!important;}

/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media (max-width: 1024px){
}

@media (max-width: 991px){
}

@media (max-width: 767px){
.header{ position:fixed; z-index:999; width:100%; top:0;
-webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
}

.sliderArea{margin:75px 0 0; display:block; clear:both;}
.sliderArea .carousel img{max-width:100%;}
.sliderContent{position:static; width:100%; text-align:center; clear:both; transform:translate(0,0); padding:15px;}

.alertArea{text-align:center;}
.alertArea h2{font-size: 30px;}
.alertArea p{font-size: 15px; text-align: center;}
.alertArea [class^="col-"]:last-child{padding:40px 0;}
.alertArea [class^="col-"]:last-child img{padding-left:0;}

.portfolioArea{margin:50px 0;}
.portfolioArea [class^="col-"]:last-child{padding:10px 0 40px;}
.portfolioArea [class^="col-"]:last-child img{padding-right:0;}

.portfolioArea [class^="col-"] > div, .alertArea [class^="col-"] > div{padding:20px 20px 0;}


.blueParallaxArea{text-align:center;}
.blueParallaxArea h2{font-size:30px;}
.blueParallaxArea .row .row [class^="col-"] > div{padding:20px;}
.blueParallaxArea h3{font-size:15px;}
.blueParallaxArea br{display:none;}
.blueParallaxArea .row .row [class^="col-"] > div p{min-height:auto;}

.howItWorks{ background-position:center bottom -250px;}
.howItWorks h2{font-size:24px;}
.threeArrowBox [class^="col-"]{margin-bottom:30px;}
.threeArrowBox [class^="col-"] > div{margin:0;}
.threeArrowBox [class^="col-"]:first-child > div{margin-right:0;}
.threeArrowBox [class^="col-"]:last-child > div{margin-left:0;}
.threeArrowBox [class^="col-"]:before{display:none!important;}
.threeArrowBox [class^="col-"] > div h4 {font-size: 24px;}

footer{text-align:center;}
footer [class^="col-"] ul{width:100%; margin-top:20px;}
footer [class^="col-"] ul li{display:block; clear:both; overflow:hidden; margin-top:10px;}
footer [class^="col-"] ul li a{border:none;}

.innerArea{padding-top:50px;}
.innerLinks li{margin-right:20px; font-size:14px; letter-spacing:.5px;}
.coinGraphArea .innerLinks li{margin-right:5px; font-size:12px;}
.timebtn li a{padding:5px;}

.portfolioSummary .row:last-child > div{margin:15px auto;}

.graphListing .table-responsive{margin-bottom:30px;}

}

@media (max-width: 500px){
.alertListing > div{ padding:25px;}
.alertListing > div [class^="col-"] > img{ height:60px;}
.alertListing > div [class^="col-"]{ margin-bottom:15px;}
.alertListing > div [class^="col-"]:last-child{ text-align:center; margin-bottom:0; border-top:1px #ddd solid;}
.alertListing > div [class^="col-"] > a{float:none; display:inline-block; clear:none; padding:5px 15px 0;}
}

@media (max-width: 360px){
}


@media screen and (max-width: 1920px) and (min-width: 1240px){
}