@font-face {
  font-family: FontAwesome;
  src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: FKGrotesk-Regular;
  src: url('../fonts/FKGrotesk-Regular.eot');
  src: url('../fonts/FKGrotesk-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/FKGrotesk-Regular.svg#FKGrotesk-Regular') format('svg'), url('../fonts/FKGrotesk-Regular.ttf') format('truetype'), url('../fonts/FKGrotesk-Regular.woff') format('woff'), url('../fonts/FKGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal
}

.m-t-80 {
  margin-top: 80px !important
}

.m-t-100 {
  margin-top: 100px !important
}

.m-t-120 {
  margin-top: 120px !important
}
.f-size-14, .f-size-20, .f-size-24, .f-size-30, .f-size-40, a, body, button, h1, h2, h3, h4, h5, h6, p, span {
  font-family: 'Source Sans Pro', sans-serif;
}

.section-gap {
  padding: 60px 0;
}

p, a{font-size: 15px;
-ms-flex-pack: center !important;
justify-content: center !important;
}

  .legal-box{
    margin-bottom: 20px;
  }
  .legal-box h2{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 2rem;
    color: #000000;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .legal-box p{
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.625rem;
    color: #000000;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
  }
  .legal-box ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .legal-box ul li{
    list-style-type: none;
    margin:0;
    padding: 0;
  }
  .legal-box ul li a{
    color: #000000;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.625rem;
    text-decoration: underline;
  }

  *, :after, :before {
    border: 0 solid #14111185;
    box-sizing: border-box;
}

.sidebar {
    width: 20%;
    position: fixed;
    top: 60px;
    padding: 10px;
    height: 90vh; /* Full viewport height */
    scrollbar-width: none;
    overflow-y: scroll; /* Enable scrolling */
}
.sidebar ul {
    list-style: none;
    padding: 0;
}
.sidebar h4{
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
}

.sidebar ul li {
  border-left-width: 3px;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 20px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 7px;
    /*background-color: #ddd;*/
    border-radius: 5px;
    font-size: 15px;
}

.sidebar ul li a.active {
    /*background-color: #333;*/
    color: #000;
}

.sidebar ul li a:hover{text-decoration-line: underline;}

.border-black{border-color: #000;}

.content {
  margin-left: 25px;
  padding: 10px 25px;
  flex: 1;
  /*padding-top: 60px; */
   background-color: #eee;
}


section {
    margin-bottom: 50px;
}

section h1{
  font-weight: 600;
  padding-bottom: 15px;
  font-size: 30px;
  text-align: center;
  padding-top: 15px;
}

section h3{
  font-weight: 600;
  padding-bottom:15px;
  font-size:20px;
}

section h5{
  font-weight: 600;
  padding-bottom: 7px;
  font-size: 16px;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {


  .sidebar {
    width: 100%;
    position:relative;
    top: 20px;
    padding: 10px;
    height: 80vh;
    scrollbar-width: none;
    overflow-y: scroll;
}

}

.inner-banner-broker{
/* background-image: url("../img/legal-background.png"); The image used */
/* background-color: #CCCCCC; Used if the image is unavailable */
/* height: 200px; You must set a specified height */
/* background-position: center; Center the image */
/* background-repeat: no-repeat; Do not repeat the image */
/* background-size: cover; Resize the background image to cover the entire container */
background-color: #CCCCCC; /* Used if the image is unavailable */
height: 200px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

.banner-text{padding-top: 50px;color: #fff;}
.inner-banner-wrap p{font-size: 1.125rem;}

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 25px;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center;
}

tr:nth-child(even) {
background-color: #dddddd;
}

 /**********************************************/
 .key-benifits-box {
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}
.img-box:before, .key-benifits-box:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-blend-mode: normal, overlay, overlay, normal, normal, normal, normal;
  opacity: .05;
}


.key-benifits-box:hover{
  background: rgba(227, 24, 54, 1);
  color: #fff;
}
.key-benifits-box:hover h4, .key-benifits-box:hover h5, .key-benifits-box:hover h2, .key-benifits-box:hover p{
  color: #fff !important;
}
.key-benifits-box-desp:hover h5{
  color: #fff;
}
.key-benifits-box:hover h4:before{
  background-image: linear-gradient(180deg, #fff, #fff);
}

.key-benifits-box.single-details:hover{
  background: rgba(255, 255, 255, 1);
  color: #555;
}
.key-benifits-box.single-details:hover h4, .key-benifits-box.single-details:hover p{
  color: #555 !important;
}
.key-benifits-box.single-details:hover h4:before{
  background-image: inherit !important;
}
.key-benifits-box-img:before{
content: '';
display: block;
position: absolute;
height: 0%;
width: 100%;
bottom: 0;
transition: height 0.5s ease-out;
background: linear-gradient(to bottom, transparent 0%, #d91f3d 100%);
}
.key-benifits-box-img:hover:before {
  height: 100%;
}
.key-benifits-box-img{
transform: rotateY(0deg) rotateX(0deg) scale(0.5);
transform-style: preserve-3d;
animation:30s flipme linear infinite;
transition:transform 300ms ease;
transform-origin:50% 50%;
}
.key-benifits-box-img:hover{
  transform: rotateY(30deg) rotateX(5deg);
}

.key-benifits-box a:hover{text-decoration:none;}

@keyframes flipme {
  0% {
    transform: rotateY(-30deg) rotateX(0deg);
  }
  50% {
    transform: rotateY(0deg) rotateX(10deg);
  }
  100% {
    transform: rotateY(-30deg) rotateX(0deg);
  }

}

.key-benifits-box:before {
  content: "";
  left: 0;
  background-image: linear-gradient(301deg, rgba(44, 34, 150, 0), #7b2297), linear-gradient(rgba(0, 82, 154, .95), rgba(0, 82, 154, .95)), linear-gradient(121deg, #3fcc6f, #3fcc6f), linear-gradient(238deg, rgba(173, 32, 142, 0), #ad208e), linear-gradient(42deg, rgba(0, 190, 213, 0), rgba(0, 190, 213, .85) 85%, rgba(0, 190, 213, .87) 87%, #00bed5), linear-gradient(126deg, rgba(0, 190, 213, 0), #00bed5), linear-gradient(#594099, #594099);
}

.key-benifits-section .col-md-4{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.section-gap {
  padding: 60px 0;
}

.key-benifits-box:hover img{
  filter: invert(100%) sepia(100%) saturate(12%) hue-rotate(178deg) brightness(103%) contrast(104%);
}

.key-benifits-box p{
  color: grey;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;}

 .key-benifits-box-desp {
  position: relative;
  padding: 20px;
}

.get-form-us .key-benifits-box {
  text-align: center;
  padding-top: 20px;
}