/*=============== VARIABLES CSS COLORS ===============*/
@font-face {
  font-family: 'SF Pro Display';
  src: url('../sf-pro-display/SFProDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
 /*========== VARIABLES CSS COLORS  ==========*/
  --bs-body-bg: #FAFAF7;
  --bs-body-color: #000;
  --bs-heading-color: #003366;
  --bs-container-bg: #A4C8E1;
  --bs-hover-color: #0d6efd;
  --bs-dropdown-item-border-radius: 8px;
  --bs-container-dark-bg: #003366;
 
  /*========== Font: and typography ==========*/
	
  /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: 'SF Pro Display', sans-serif;
  --h2-font-size: 2.25rem;
  --normal-font-size: .938rem;
	
  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-fixed: 100;
  --z-modal: 1000;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1023px) {
  :root {
    --h2-font-size: 2.5rem;
    --normal-font-size: 1.1rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  letter-spacing: 0.05rem;
}

body,
input,
button {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

.custom__bg{
	background: var(--bs-container-bg);
}

.custom__dark__bg{
	background: var(--bs-container-dark-bg);
}

input,
button {
  border: none;
  outline: none;
}

a {
  text-decoration: none;
}

/*=============== REUSABLE CSS CLASSES ===============*/


@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }
}

.main {
  position: relative;
  height: 100vh;
}

.main__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

@media (min-width: 992px) {
  .rounded-lg-3 { border-radius: .3rem; }
}

.b-divider {
  height: 3rem;
  
}



.img-thumbnail {
			background-color: transparent;
			border: none;
		}

.list-group-item {

  background-color: transparent;
  border: none;
}

	.accordion {
   
    --bs-accordion-bg: none; 
     --bs-accordion-border-color: none; 
	 --bs-accordion-btn-padding-y: .6rem;
	 --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);
	 --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);
}
	
	.accordion-button{
		font-size: 0.9rem;
	}

#accordionSpecs {
		height: 600px;
	}


/* Responsive Styles */
@media (max-width: 768px) {
	.border-end{
		border-right: none !important;
	}
}


/***** Buttons **********/

.btn {
    border-radius: 50px;  
	--bs-btn-font-family: var(--body-font) ;
	letter-spacing: 0.04rem;
 }
.btn-primary {
 
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #003366;
    --bs-btn-hover-border-color: #003366;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #003366;
    --bs-btn-active-border-color: #003366;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-container-bg);
    --bs-btn-disabled-border-color: var(--bs-container-bg);
}

/***Grid**/

.themed-grid-col {
  padding-top: .75rem;
  padding-bottom: .75rem;
 
}

.gap-custom{
	gap: 15rem !important;
}

/**** Features Columns ********/

	.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #fff;
  border-radius: .75rem;
}

	
.icon-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}

.arrow {
  display: inline-block;
  margin-left: 3px;
  font-size: 14px;
  transition: transform .25s ease-in-out;
  fill: currentColor;
}

.icon-link:hover .arrow {
  transform: translateX(.25rem);
}


/**************** Main Header ********************/
.header-container{
		background: url('../../images/header/header_main.png'); 
		background-position: right;
		background-repeat: no-repeat; 
		background-size:contain;
		
	}
	
	.hide-header{
		display: none
	}
	 @media (max-width: 1020px) {
	  .header-container{	 
		background: none;
		 }
		 
	  .header-container .col-12 {
			flex: 0 0 auto;
			width: 100%;
		}
		 
	 .header-container .hide-header {
			display: block;
		    
		}
	}

/* Custom Bullets*/

     ul.custom-bullet {
            list-style: none;
            padding-left: 0;
        }

        ul.custom-bullet li {
            position: relative;
            margin-left: 25px;
            margin-bottom: 10px;
        }

        ul.custom-bullet li::before {
            content: "";
            position: absolute;
            left: -25px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background-color:   #0d6efd; /* Inner circle color */
            border-radius: 50%;
            box-shadow: 0 0 0 8px rgba(0, 188, 212, 0.2); /* Outer glow */
        }
		  
/* Style the dropdown menu */
#learnMoreLink + .dropdown-menu {
    width: 1000px; /* Adjust to your desired width */
    max-width: 100%; /* Ensure it doesn't overflow */
    white-space: normal; /* Allow text to wrap */
    padding: 0;
    border-radius: 0.25rem;
}

/* Style for the dropdown items */
#learnMoreLink + .dropdown-menu .dropdown-item {
    display: inline-block; /* Use to align items */
    justify-content: space-between; /* Space between text and arrow */
    align-items: center; /* Center items vertically */
    white-space: normal; /* Allow text to wrap */
    overflow-wrap: break-word; /* Handle long text */
    word-wrap: break-word; /* Support for older browsers */
    padding: 10px 15px;
	margin: 5px; /* Add vertical margin for consistent spacing */
    font-size: 16px; /* Adjust text size */
    color: #343a40; /* Darker text for better visibility */
    background-color: transparent;
    border: none;
}

/* Hover state for dropdown items */
#learnMoreLink + .dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa; /* Subtle background change on hover */
    color: #007bff; /* Text color change on hover */
}

/* Style the small description text */
#learnMoreLink + .dropdown-menu .small {
    color: #6c757d; /* Muted color for description text */
    font-size: 14px; /* Smaller font size for description */
    display: block;
    margin-top: 5px;
}

/* Optionally adjust width for smaller screens */
@media (max-width: 576px) {
    #learnMoreLink + .dropdown-menu {
        width: 100%; /* Full width on small screens */
    }
}


.custom-card-bg {
    background-color: var(--bs-container-dark-bg);
}
/**** Business Type Gallery***/

.portfolio-content {
	margin:  0 auto;
	display:-webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
		
.portfolio-content img { 
	width: 150px; 
	height: 150px;  
}
.portfolio-group {
	display: inline-block;
	width: 150px;
	height: 150px;
	position: relative;
	margin: .7rem 0.5rem;
	 &:hover {
    z-index: 2;
    transform: scale(1.2);
  }
}
.portfolio-group img {
	width:100%;
	height:100%;
	position:absolute;
	display:block;
	box-shadow: 5px 10px 10px -5px rgba(0,0,0,0.5);
	border-radius: 25% 1%;
}
				
.portfolio-group .portfolio-overlay{
  background: transparent;
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
   border-radius: 25% 1%;
	}

 .portfolio-group:hover .portfolio-overlay{
  opacity: 1;
	 	 
}			
.portfolio-group .details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-42%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
	
}

.portfolio-group:hover .details{
  background: rgba(120,120,120,0.7);	
  top: 50%;
  left: 50%;
  opacity: 1;
}
		
.portfolio-group .details h3{
  	
  color: #fff;
  font-size: 1.0em;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  
}

.portfolio-group .details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 20%;
}

/**************Diagonal Background************/

.diagonalBg{
  
  background-color:#000046!important;  
  height:auto;
	width:100vw;
  position:relative;
  color: #fafdff;
  &:after{
    position:absolute;
    top:100%;
    left:0;
    content:'';
    height:0;
    width:0;
    border-right:100vw solid #000046;
    border-bottom:10vw solid transparent;
    border-top:0px solid transparent;
    overflow:hidden;
	
  }
}

.diagonalBg p{
	 padding: 1em 0;
	 color: #fafdff;
	 font-size: 1em;
}
	
/************ Products/Devices ************/
.subpage_row{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.subpage-content-box{
		  flex-basis: 100%;
		  text-align: center;
		  align-items: center;	
		  display: flex;
		  flex-direction: column;
		
		
		img{
			padding: 2rem;
			max-width: 320px;
			height: auto	
		}
	}
	  @media (max-width: 800px) {
              .subpage_row{
				  flex-direction: column;
            }
		  
		 .subpage-content-box img{
			padding: 2rem;
			max-width:  50vw;
			height: auto	
		}
		  
}


/************* Flip Card ************/



.subpage-panel-cta {
    padding-top: 20px
}

.flip-card-section {
    background-color: #000046!important;
    color: #fafdff!important
}

.flip-card-section  {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    flex-wrap: wrap
}

.flip-card {
    background-color: transparent;
    width: 23.5%;
    height: 360px;
    margin-right: 1.5%;
    margin-bottom: 50px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
	-webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    cursor: pointer;
}

.flip-card .flip-title {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .3px;
    color: #bde9ff;
    text-align: left;
    margin-top: 0.5rem
}

.flip-card:nth-child(4n) {
    margin-right: 0
}

@media (max-width: 1220px) {
    .flip-card {
        width:31.5%;
        margin-right: 1.5%;
        margin-bottom: 40px
    }

    .flip-card:nth-child(4n) {
        margin-right: 1.5%
    }

    .flip-card:nth-child(3n) {
        margin-right: 0
    }
}

@media (max-width: 749px) {
    .flip-card {
        width:48%;
        margin-right: 2%;
        margin-bottom: 40px
    }

    .flip-card:nth-child(3n),.flip-card:nth-child(4n) {
        margin-right: 1.5%
    }

    .flip-card:nth-child(2n) {
        margin-right: 0
    }
}

@media (max-width: 480px) {
    .flip-card {
        width:90%;
        margin-right: 0;
        margin-bottom: 40px
    }

    .flip-card:nth-child(2n),.flip-card:nth-child(3n),.flip-card:nth-child(4n) {
        margin-right: 0
    }
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform .8s;
    transition: -webkit-transform .8s;
    transition: transform .8s;
    transition: transform .8s,-webkit-transform .8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.flip-card-cta{
	display: none
}
.flip-card-inner img {
    width: 100%;
    height: 162px;
    -o-object-fit: contain;
    object-fit: contain
}
/**
.flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}**/

:checked + .flip-card-inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

label:hover :checked + .flip-card-inner {
  -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-shadow: 0 20px 20px rgba(255,255,255,.2);
}

.flip-card-back,.flip-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 25px
}

.flip-card-front {
    background-color: transparent;
	border-color: #fafdff;
	border: thin solid;
    color: #fafdff
}

.flip-card-front .subpage-panel-cta {
    color: #bacee4;
    position: absolute;
    right: 25px;
    bottom: 26px
}


	.flip-card-item {
  background-color: transparent;
  color: white;
  text-align: justify;
  height: auto;
  font-size: .8rem;
}
	
	.flip-card-item img{
		object-fit: cover;
        width: 100%;
		height: auto;
 	
	}

.flip-card-grid-debit {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  /***grid-template-columns: repeat(4, 1fr);***/
  justify-content: center;
	align-items: center;
}
	
.flip-card-grid-wallet {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: .5rem;
  /***grid-template-columns: repeat(auto-fit, minmax(min(100%, 5em), 1fr));***/
  grid-template-columns: 3rem 1fr;
  justify-content: center;
	align-items: center;
}

.flip-card-back {
    background-color: #000046;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
	color: #fafdff;
	border-color: #fafdff;
	border: thin solid;
}

.flip-card-back p {
    color: #fafdff ;
	font-size: 0.85rem !important;
	line-height: 150%;
	text-align:left;
}


/************New flip Card **************/

 .card-flip {
			background-color: var(--bs-container-dark-bg);
			-webkit-perspective: 1000px;
    		perspective: 1000px;
			cursor: pointer;
			width: 100%;
			min-height: 40vh;
		}
		  
		  
		  .card-inner { 
           position: relative;
			width: 100%;
			height: 100%;
			text-align: center;
			-webkit-transition: -webkit-transform .8s;
			transition: -webkit-transform .8s;
			transition: transform .8s;
			transition: transform .8s,-webkit-transform .8s;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d
        }
         
		:checked + .card-inner {
		   -webkit-transform: rotateY(180deg) ;
			transform: rotateY(180deg)
		}

		label:hover :checked + .card-inner {
		  -webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
			box-shadow: 0 20px 20px rgba(255,255,255,.2);
		}
			.card-back,.card-front {

			 position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-webkit-transform:rotateY(0deg); 
		}	


		.card-back {
			
			-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
		}
		

/*********** Currency ************/
.currency-box{
		position: absolute;
		top: 12%;
		left: 10%;
		transform: translate(-50%, -50%);
		width: calc(216px /4);
		height: 68px;
		background: url("../../images/global_payments/currency--rotation.png");
		animation: animate 8s steps(4) infinite;
		
	}
	
	 @media (min-width: 750px) {
			.currency-box{
				top: 16%;
				
			}
       }

	@media (min-width: 970px) {
		.currency-box {
			top: 20%;
		   
		}
	}

	
@keyframes animate
	{
		from{
			background-position: 0;
		}
		
		to{
			background-position: 216px;
		}
	}


/***************** Debit Card Box ***********/
.debit-card-box{
		position: absolute;
		top: 24%;
		left: 84%;
		transform: translate(-50%, -50%);
		width: calc(216px /3);
		height: 68px;
		background: url("../../images/global_payments/debit-card-rotation.png");
		animation: animateDebitCard 8s steps(3) infinite;
		
	}
	
	 @media (min-width: 750px) {
			.debit-card-box{
				top: 16%;
				
			}
       }

	@media (min-width: 970px) {
		.debit-card-box {
			top: 60%;
		   
		}
	}

	
@keyframes animateDebitCard
	{
		from{
			background-position: 0;
		}
		
		to{
			background-position: 216px;
		}
	}	


	/************* Globe ***********/
	.parent{
		width: 550px;
		height: 550px;
		
		position: relative;
		top: 0;
		bottom: 0;
		margin: auto 0;
		z-index: 2;
		border-radius: 50%
	}
	
	.child{
			width: inherit;
		height: inherit;
		background-color: #fff;
		position: absolute;
		left: 0;
		  right: 0;
		  top: 0;
		  bottom: 0;
		  margin: auto;
		  border-radius: 50%
	}
	

.Globe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
	}
		
	 @media (min-width:200px) {
                .Globe {
				position: relative;

				}
            }

            @media (min-width: 970px) {
                .Globe {
				position: relative;

				}
            }

	


/**************** For Countries ********/

		#slideset4{
			display: block;
			object-fit: contain;
			align-content: center;
			
		}

		.fi {
		width: 3.333333em;
		line-height: 3em;
}
			#slideset4 > * {animation: 12s autoplay4 infinite;
		  overflow: hidden}

			@keyframes autoplay4 {
		  0% {height: auto; padding: 0.5em 1em; border: none}
		  33.32% {height: auto; padding: 0.5em 1em; border: none}
		  33.33% {height: 0; padding: 0; border: none}
		  100% {height: 0; padding: 0; border: none}
		}
		#slideset4 > *:nth-child(1) {animation-delay: 0s}
		#slideset4 > *:nth-child(2) {animation-delay: -8s}
		#slideset4 > *:nth-child(3) {animation-delay: -4s}


/*********** Product Display **********/
.product{
				display: flex;
				flex-direction: column-reverse;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
			}
	
	.product-small-img img{
				
				height: 150px;
				padding: 20px;
				cursor: pointer;
				display: block;
				opacity: .6;
			}
			
	.product-small-img img:hover{
		opacity: 1;
	}
			
	.product-small-img {
				float: left;
				display: flex;
			}

	.img-container img{
				height: 300px;
				width: auto;
			}

	.img-container{
		float:  right;
		padding: 30px;
	}




/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}


		/* Back to Top Button Styles */
        #backToTop {
            display: none;
			 position: fixed;
			bottom: 200px;
			right: 20px;
			z-index: 99;
			font-size: 2rem;
			border: none;
			outline: none;
			background-color: #0d6efd;
			color: white;
			cursor: pointer;
			padding: 5px 15px;
			border-radius: 50%;
}
       

        #backToTop:hover {
            background-color: #0a58ca ;
        }

	

/******************** Specs Table **************/
/* ========================================================================
   Component: Section
 ========================================================================== */
/*
 * 1. Make it work with `100vh` and height in general
 */
.tbl-section {
  box-sizing: border-box;
  /* 1 */
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: .75rem;
}
/* Desktop and bigger */
@media (min-width: 960px) {
  .tbl-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
	
	.tbl-section h4{
		font-size: .85rem;
	}
/*
 * Micro clearfix
 */
.tbl-section::before,
.tbl-section::after {
  content: "";
  display: table;
}
.tbl-section::after {
  clear: both;
}
/*
 * Remove margin from the last-child
 */
.tbl-section > :last-child {
  margin-bottom: 0;
}


/* ========================================================================
   Component: Container
 ========================================================================== */
/*
 * 1. Box sizing has to be `content-box` so the max-width is always the same and
 *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
 */
.tbl-container {
  /* 1 */
  box-sizing: content-box;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .tbl-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .tbl-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
/*
 * Micro clearfix
 */
.tbl-container::before,
.tbl-container::after {
  content: "";
  display: table;
}
.tbl-container::after {
  clear: both;
}
/*
 * Remove margin from the last-child
 */
.tbl-container > :last-child {
  margin-bottom: 0;
}

/* ========================================================================
   Component: Grid
 ========================================================================== */
/*
 * 1. Allow cells to wrap into the next line
 * 2. Reset list
 */
.tbl-grid {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
 * Grid cell
 * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
 * Reset margin for e.g. paragraphs
 */
.tbl-grid > * {
  margin: 0;
}
/*
 * Remove margin from the last-child
 */
.tbl-grid > * > :last-child {
  margin-bottom: 0;
}
/* Gutter
 ========================================================================== */
/*
 * Default
 */
/* Horizontal */
.tbl-grid {
  margin-left: -30px;
}
.tbl-grid > * {
  padding-left: 30px;
}
/* Vertical */
.tbl-grid + .tbl-grid {
  margin-top: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .tbl-grid {
    margin-left: -40px;
  }
  .tbl-grid > * {
    padding-left: 40px;
  }
  /* Vertical */
  .tbl-grid + .tbl-grid {
    margin-top: 40px;
  }
}

[class*='tbl-width'] {
  box-sizing: border-box;
  width: 100%;
  /* 1 */
  max-width: 100%;
}
.tbl-width-2-5 {
  width: 40%;
}
.tbl-width-3-5 {
  width: 60%;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .tbl-width-1-5\@l {
    width: 20%;
  }
  .tbl-width-4-5\@l {
    width: 100%;
  }

}

/* ========================================================================
   Component: Height
 ========================================================================== */
[class*='tbl-height'] {
  box-sizing: border-box;
}
/*
 * Only works if parent element has a height set
 */
.tbl-height-1-1 {
  height: 100%;
}

/* ========================================================================
   Component: Column
 ========================================================================== */
[class*='tbl-column-'] {
  column-gap: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  [class*='tbl-column-'] {
    column-gap: 40px;
  }
}

@media (min-width: 960px) {
  .tbl-column-1-2\@m {
    column-count: 2;
  }
}
/* ========================================================================
   Component: Footer
 ========================================================================== */


.footer .btn.btn-link::before {
  position: relative;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
}

.footer .btn.btn-link {
  text-align: left;
  color: rgba(255,255,255,.5);
  font-weight: normal;
}