* { margin: 0px; padding: 0px; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
html, body, button, input, select, textarea { font-family: Arial; font-size: 12px; color: #8c806e; }
ul, ol { margin-top: 0; margin-bottom: 10px; }
ul ul { margin-bottom: 0; }
li { font-size: 13px; margin: 5px 0px 10px 0px; }



img { -ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%; vertical-align: middle; display: block;  }
figure { margin: 0; }
::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); }
:-moz-placeholder { color: rgba(51, 51, 51, 0.7); }
::-moz-placeholder { color: rgba(51, 51, 51, 0.7); opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ }
:-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); }
input:focus, textarea:focus { background-color: #fff; border: 1px solid #c1c1c1; border: 1px solid rgba(51, 51, 51, 0.3); color: #333; }
input:focus, select:focus { outline: 2px solid #c1c1c1; outline: 2px solid rgba(51, 51, 51, 0.3); }
.hide { display: none;}

.clear { clear: both; height: 0px; overflow: hidden; }

/* <<< Design Holder >>> */
.DesignHolder { position: relative; display: block; width: 100%; min-height: 100%; }

/* <<< Layout Frame >>> */
.LayoutFrame { margin: 0 auto; width: 100%; display: block; }

/* <<< Body >>> */
body { background: #fff; }

/* <<< Header >>> */
header { width: 100%; position: fixed; top: 0px; left: 0px; height: 105px; background: rgba(50,67, 96,0.75); z-index: 9; }
header .Center { max-width: 1100px; margin: auto; }
header .site-logo { padding: 30px 0px 0px 0px; width: 220px; float: left; transition: all 0.3s;  }
header .site-logo h1 { margin: 0px; }
header .site-logo h1 a { font-size: 36px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 800; text-decoration: none; text-transform: uppercase; text-shadow: rgb(3, 3, 3) 0px 2px 5px; transition: all 0.7s ease;  }
header .site-logo h1 a span { color: #ff9000; }
header.smaller { padding: 0px 0px 0px 0px; height: 60px; transition: all 0.3s; background: rgba(50, 67, 96,0.75); }
header.smaller .site-logo {padding: 13px 0px 0px 0px; }
header.smaller .site-logo h1 { line-height: 30px; }
header.smaller .site-logo h1 a { font-size: 30px;  }

/* <<< Navigation >>> */
.Navigation { float: right; width: 68.18%; margin-right: 11px; }
.Navigation ul { list-style: none; margin: 0px; float: right; }
.Navigation li { float: left; padding: 0px;  margin: 0px; height: 105px; position: relative; transition: all 0.3s ease; }
.Navigation li a { padding: 42px 29px 36px 41px; font-size: 16px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; text-decoration: none; display: block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.Navigation li span { 
	border-bottom: solid 5px #ff9000;
	background: rgba(56,87,122,1);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(56,87,122,1)), color-stop(0%, rgba(56,87,122,1)), color-stop(0%, rgba(56,87,122,1)), color-stop(100%, rgba(44,68,94,1)));
	background: linear-gradient(to bottom, rgba(56,87,122,1) 0%, rgba(56,87,122,1) 0%, rgba(56,87,122,1) 0%, rgba(44,68,94,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38577a', endColorstr='#2c445e', GradientType=0 );
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
	opacity: 0;
	transition: all 0.5s ease;
}
.Navigation li:hover span, .Navigation li.active span {
	opacity: 1;
}

header.smaller .Navigation li a { padding: 16px 29px; }
header.smaller .Navigation li { height: 60px; }

.mobile { display: none;  }
.mobile .fa { padding: 12px 14px; font-size: 31px; width: 55px; height: 55px; color: #fff; cursor: pointer; background: #ff9408; }
.mobile .fa:hover { background: #e3860e; }
.mobile.closed .fa-bars { display: none; }
.mobile .fa-times { padding: 11px 15px; width: 55px; height: 55px; display: none; font-size: 31px; }
.mobile.closed .fa-times { display: block; }

/* <<< Banner Section >>> */
.Banner_sec { width: 100%; background: url(../img/banner.jpg) top center no-repeat; height: 687px; position: relative; background-size: cover; }
.Banner_sec .bannerside { width: 100%; position: absolute; top: 256px; left: 0px; }
.Banner_sec .Center { max-width: 1100px; margin: auto; }
.Banner_sec .leftside { padding: 92px 0px 0px 0px; width: 28.90%; float: left; }
.Banner_sec .leftside h3 { font-size: 36px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 800; text-transform: uppercase; margin: 0px; line-height: 34px;}
.Banner_sec .leftside h3 span { color: #ff9000; font-family: 'Open Sans', sans-serif; font-weight: 600; display: block; }
.Banner_sec .leftside p { padding: 0px 0px 0px 0px; font-size: 16px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 600; font-style: italic; margin: 0px; word-spacing: 2px; line-height: 22px; }
.Banner_sec .leftside a { padding: 11px 16px; font-size: 14px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 600; text-transform: uppercase; text-decoration: none; display: inline-block; border: solid 1px #b0bdc8; background: rgba(64, 93, 118, 0.8); transition: all 0.3s ease; }
.Banner_sec .leftside a:hover { background: #ff9000; color: #fff; border: solid 1px #ff9000; }
.Banner_sec .rightside { width: 68.36%; float: right; position: relative; }
.Banner_sec .rightside { padding: 92px 0px 0px 0px; width: 28.90%; float: left; }
.Banner_sec .rightside .bx-wrapper { position: relative; z-index: 1; }
.Banner_sec .rightside ul { list-style: none; margin: 0px; }
.Banner_sec .rightside li { padding: 0px; margin: 0; float: none!important; }
.Banner_sec .rightside #slider { width: 100%; float: right;  position: relative; z-index: 1; }
.Banner_sec .rightside .Slider .text { padding: 25px 47px 21px 30px; position: absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0, 0, 0, 0.7); }
.Banner_sec .rightside .Slider .text .Icon { width: 38%; float: left; }
.Banner_sec .rightside .Slider .text ul { list-style: none; margin: 0px; }
.Banner_sec .rightside .Slider .text li { float: left!important; padding: 0px 30px 0px 10px; margin: 0px; }
.Banner_sec .rightside .Slider .text li a { display: block; font-size: 14px; color: #fff; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 400; transition: all 0.3s ease;}
.Banner_sec .rightside .Slider .text li:last-child { padding: 0px; }
.Banner_sec .rightside .Slider .text li:hover a { color: #ff9000!important;}
.Banner_sec .rightside .Slider .text li a .fa { padding: 13px; margin-right: 10px; color: #fff; border-radius: 50px; border: solid 2px #fff; transition: all 0.3s ease; }
.Banner_sec .rightside .Slider .text li:hover a .fa { background: #ff9000; color: #fff; border: solid 2px #ff9000; }
.Banner_sec .rightside .Slider .text li:last-child { padding-right: 0px; padding-left: 0px;}
.Banner_sec .rightside .Slider .text .Lorem { float: right; width: 31%; }
.Banner_sec .rightside .Slider .text .Lorem p { padding-top: 5px; font-size: 18px; color: #fff; margin: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; text-transform: uppercase; text-align: right; line-height: 19px; }
.Banner_sec .rightside .Slider .text .Lorem p span { font-size: 14px; text-align: right; color: #ff9000; display: block; text-transform: capitalize;}
.Banner_sec .rightside .prevBtn { width: 42px; height: 42px; display: block; text-indent: -9999px; background: url(../img/prev-arrow.png) no-repeat; position: absolute; top: 213px; left: 49px;  z-index: 1; opacity: 0.5; transition: opacity 0.3s ease; }
.Banner_sec .rightside .prevBtn:hover {  opacity: 1; }	
.Banner_sec .rightside .nextBtn { width: 42px; height: 42px; display: block; text-indent: -9999px; background: url(../img/next-arrow.png) no-repeat; position: absolute; top: 213px; right: 47px;  z-index: 1; opacity: 0.5; transition: opacity 0.3s ease; }
.Banner_sec .rightside .nextBtn:hover { opacity: 1; }	
.Banner_sec .rightside .Shadow { position: absolute; bottom: -3px; left: -25px; max-width: none; }

* {
    box-sizing: border-box;
  }

  .wrapper {
    margin: 5em auto;
    max-width: 1000px;
    background-color: #fff;    
  }
  .header {
    padding: 30px 30px 0;
    text-align: center;
  }
  .header__title {
    margin: 0;
    text-transform: uppercase;
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1.1;
  }
  .header__subtitle {
    margin: 0;
    font-size: 1.5em;
    color: #949fb0;
    font-family: 'Yesteryear', cursive;
    font-weight: 500;
    line-height: 1.1;
  }
  .cards {
    padding: 15px;
    display: flex;
    flex-flow: row wrap;
  }
  .card {
    margin: 15px;
    width: calc((100% / 3) - 30px);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
    padding:20px;
    cursor: pointer;
  }
  @media screen and (max-width: 991px) {
    .card {
      width: calc((100% / 2) - 30px);
    }
  }
  @media screen and (max-width: 767px) {
    .card {
      width: 100%;
    }
  }
  .card:hover {
    transform: scale(1.05);
  }

  #card1
  {
    background:url(img/cardbackground.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }

  #card2
  {
    background:url(img/bankcardsvg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    
  }

  #card3
  {
    background:url(img/visamaster.svg);
    background-repeat: no-repeat;
    background-size: contain;

  }

  #card4
  {
    background:url(img/iconbankcard.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }

  #card5
  {
    background:url(img/iconbankcard2.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }

  #card6
  {
    background:url(img/icon2.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }

  #card7
  {
    background:url(img/Get-bg.jpg);
    background-repeat: no-repeat;
  }

  #card8
  {
    background:url(img/Get-bg.jpg);
    background-repeat: no-repeat;
  }

  #card9
  {
    background:url(img/Get-bg.jpg);
    background-repeat: no-repeat;
  }

  .card__inner {
    background-size: cover;
    position: relative;
    max-height: 293px;
    width: 100%;
    padding: 30px;
    border-radius:10px 10px;
    position: relative;
    cursor: pointer;
    background-color: #1f5bc9;
    color: #1f5bc9;
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    transition: all 0.2s ease-in-out;
  }
  .card__inner:after {
    transition: all 0.3s ease-in-out;
  }
  .card__inner .fa {
    width: 100%;
    margin-top: 0.25em;
  }
  .card__expander {
    transition: all 0.2s ease-in-out;
    background-color: #4b5b75;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: #eceef1;
    font-size: 1.5em;
  }
  .card__expander .fa {
    font-size: 0.75em;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
  .card__expander .fa:hover {
    opacity: 0.9;
  }
  .card.is-collapsed .card__inner:after {
    content: "";
    opacity: 0;
  }
  .card.is-collapsed .card__expander {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
  }
  .card.is-expanded .card__inner {
    background-color: #1abc9c;
  }
  .card.is-expanded .card__inner:after {
    content: "";
    opacity: 1;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -30px;
    left: calc(50% - 15px);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #333a45;
  }
  .card.is-expanded .card__inner .fa:before {
    content: "\f115";
  }
  .card.is-expanded .card__expander {
    max-height: 1000px;
    min-height: 200px;
    overflow: visible;
    margin-top: 30px;
    opacity: 1;
  }
  .card.is-expanded:hover .card__inner {
    transform: scale(1);
  }
  .card.is-inactive .card__inner {
    pointer-events: none;
    opacity: 0.5;
  }
  .card.is-inactive:hover .card__inner {
    background-color: #949fb0;
    transform: scale(1);
  }
  @media screen and (min-width: 992px) {
    .card:nth-of-type(3n+2) .card__expander {
      margin-left: calc(-100% - 30px);
    }
    .card:nth-of-type(3n+3) .card__expander {
      margin-left: calc(-200% - 60px);
    }
    .card:nth-of-type(3n+4) {
      clear: left;
    }
    .card__expander {
      width: calc(300% + 60px);
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .card:nth-of-type(2n+2) .card__expander {
      margin-left: calc(-100% - 30px);
    }
    .card:nth-of-type(2n+3) {
      clear: left;
    }
    .card__expander {
      width: calc(200% + 30px);
    }
  }
    .expand{ padding: 0px 0px 0px 0px; width: 220px; float: left; transition: all 0.3s;     width: 100%; }
    .expand { margin: 0px; }
    .expand { font-size: 20px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 800; text-decoration: none; text-transform: uppercase;transition: all 0.7s ease;  }
    .expand{ color: #ff9000; }
  ;

/* <<< footer >>> */
footer { overflow: hidden; width: 100%; text-align: center; background: rgba(0, 0, 0, 0.6); }
footer .Cntr { padding:  28px 0px; }
footer .Cntr p { padding: 0px; font-size: 13px; color: #a9abad; font-family:'Open Sans'; margin: 0px; }
footer .Cntr a { color: #a9abad; text-decoration: none; }
footer .Cntr a:hover { color: #fff; }