@font-face {
  font-family: BankGothicLtBTLight;
  src: url('../fonts/BankGothicLightBTPl.ttf');}

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

h1{
  font-size: 2.5rem;
  font-family: BankGothicLtBTLight !important;
  font-weight: normal;
  color: #444;
  text-align: center;
  margin: 2rem 0;
}

.wrapper{
  width: 90%;
  margin: 0 auto;
  max-width: 80rem;
}

.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
  width: 30rem;
  margin: 2rem 0rem 2rem 0rem;
  cursor: pointer;
}
.colKG{
  width: 60rem;
  margin: 1rem;
  cursor: pointer;
  position: relative;
}
.colText{
  width: 60rem;
  margin: 1rem;
  cursor: pointer;
}
.colBusiness{
  width: 20rem;
  margin: 2rem 0rem 2rem 0rem;
  cursor: pointer;
  position: relative;
}

.container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
}

.btnSFTP{
  font-family: BankGothicLtBTLight !important;
  font-weight: bold;
  color: white; 
  background: #014495; 
  width:100px; 
  height:50px;
  cursor: pointer;
}

.front,
.back{
  font-family: BankGothicLtBTLight !important;
  background-size: cover;
  border-radius: 10px;
	background-position: center;
	-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	text-align: center;
	min-height: 100px;
	border-radius: 10px;
	color: #014495;
	font-size: 1.4rem;
  background-color: #fff;
  text-transform: uppercase !important;
}

.colBusiness .container .back .inner a:link{
  font-size: small;
  text-decoration:underline;
}
.KG{
  height: 200px !important;
}

.Text{
  min-height: 50px !important;
  margin-bottom: 5%;
  margin-top: -2%;

}
.Text .inner span{
  vertical-align: top !important;
}

a,a:link,a:visited,a:active,a:hover{
  text-decoration: none;
  color:  #014495;
  background-color: #fff;
}
.imgfluid{
  width:auto;
  height:auto;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.back{
  background: #fff;
  background: -webkit-linear-gradient(45deg,  #fff 0%,#fff 100%);
  background: -o-linear-gradient(45deg,  #fff 0%,#fff 100%);
  background: linear-gradient(45deg,  #fff 0%,#fff 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.front:after{
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .3;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.inner{
    /*
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    */
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.container .back{
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container:hover .back{
-webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
}

.container:hover .front{
-webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
}

.container:hover .KG{
  -webkit-transform: none;
        transform: none;
-webkit-transform-style: none;
        transform-style: none;
}

.container:hover .Text{
  -webkit-transform: none;
        transform: none;
-webkit-transform-style: none;
        transform-style: none;
}

.front .inner p{
  font-size: 3rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #fff;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: #014495;
  font-family: BankGothicLtBTLight !important;
  font-weight: bold;
  font-size: 2rem;
  margin: 0;
  padding: 0;
  text-transform: uppercase !important;
}

.KG p{
  position: absolute;
  top: 130px;
  left: 580px;
  font-size: 1rem !important;
  font-style: italic !important;
}

.Automotive p{
  position: absolute;
  top: 10px;
  left: 78px;
  font-weight: bold;
}

.Marketplace p{
  position: absolute;
  top: 10px;
  left: 128px;
  font-weight: bold;
}

.Overall p{
  position: absolute;
  top: 10px;
  left: 100px;
  font-weight: bold;
}
/* Cookie */
.text-center{
  text-align: center !important;
}
.alert{
  padding: .75rem 1.25rem;
  font-family: BankGothicLtBTLight;
}
.btn:not(:disabled):not(.disabled){
  cursor: pointer;
}
.btn-group-sm>.btn, .btn-sm{
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}
.btn-primary{
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.btn{
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select:none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
button, select{
  text-transform: none;
}
button, input, optgroup, select, textarea{
  margin: 0;
  font-family: inherit;
}

@media screen and (max-width: 1200px){
  .col{
    width: calc(33.333333% - 32px);
  }
  .colKG{
    width: calc(33.333333% - 32px);
  }
  .KG{
    min-height: 100px !important;
  }
  .front{
    min-height: 220px !important;
  }
}

@media screen and (max-width: 1024px){
  .colBusiness{
    width: calc(33.333333% - 32px);
  }
  .col{
    width: calc(45% - 32px);
  }
  .colKG{
    width: 100%;
  }
  .colText{
    margin-top: 3rem;
  }
  .KG p{
    position: absolute;
    top: 115px;
    left: 515px;
    font-size: 1rem !important;
  }
  .KG{
    height: 50px !important;
  }
  .front{
    min-height: 100px !important;
  }
  .KB,
  .KP{
    min-height: 200px !important;
  }
  .Automotive p{
    left: 50px;
  }
  .Marketplace p{
    left: 80px;
  }
  .Overall p{
    left: 75px;
  }
}