@charset "UTF-8";

@font-face {
    font-family: "interstate-regular";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/interstate-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate-regular.woff") format("woff"), url("../fonts/interstate-regular.ttf") format("truetype"), url("../fonts/interstate-regular.svg#interstateBold") format("svg");
}

@font-face {
    font-family: "Interstate-BoldCondensed";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Interstate-BoldCondensed.eot?#iefix") format("embedded-opentype"), url("../fonts/Interstate-BoldCondensed.woff") format("woff"), url("../fonts/Interstate-BoldCondensed.ttf") format("truetype"), url("../fonts/Interstate-BoldCondensed.svg#interstateBold") format("svg");
}

@font-face {
    font-family: "interstate-bold";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Interstate-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Interstate-Bold.woff") format("woff"), url("../fonts/Interstate-Bold.ttf") format("truetype"), url("../fonts/Interstate-Bold.svg#interstateBold") format("svg");
}

@font-face {
    font-family: "interstate-light";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/interstate-light.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate-light.woff") format("woff"), url("../fonts/interstate-light.ttf") format("truetype"), url("../fonts/interstate-light.svg#interstate-light") format("svg");
}

.cf::before,
.cf::after {
	content: " ";
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}

.cf::after {
	clear: both;
}

.cf::before,
.cf::after {
	content: " ";
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}

body {
    overflow: auto;
}

body.active {
    overflow: hidden;
}

.hideDesk {
	display: none;
}

.hideDeskT {
	display: none;
}

.hideMob {
    display: inline-block;
}

.hideMobVi {
    display: none !important;
}

/* Header */


.citi-logo a img {
	width: 48px;
}

header {
    font-family: "interstate-light";
}

.main-container {
	width: 1440px;
	padding: 0px 20px;
	margin: auto;
}

.top-tiles {
	background: #333;
}

.top-col {
	width: 50%;
	float: left;
}

.top-left-list ul li {
	font-family: "interstate-light";
    font-size: 16px;
    padding: 4px 8px 9.5px;
    color: #fff;
    display: block;
	padding-left: 0;
    padding-bottom: 4px;
}
.top-left-list ul li a{
    color: #fff;
    font-size: 14px;
}

.top-right-list {
	float: right;
}

.top-right-list ul li {
	float: left;
    padding: 5px 14px 10px 0px;
    position: relative;
	padding-right: 0;
    padding-bottom: 4px;
}

.top-right-list ul li a {
	font-size: .95rem;
    padding: 0px 0px 0px 15px;
    color: #fff;
    display: block;
    background: url(../images/mainLinks.png) no-repeat 0px 10px;
    position: relative;
}

.top-right-list .quicklink-dropdown-wrapper ul li {
	width: 100%;
}

.top-right-list .quicklink-dropdown-wrapper ul li a {
	color: #333333;
}

.top-right-list .quicklink-dropdown-wrapper ul li a:hover {
	color: #aaaaaa;
}

.top-right-list ul li a:last-child{
    background: none;
}

.top-right-list ul li a:hover {
    color: #999;
}

.quicklink-dropdown-wrapper {
    width: 220px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 34px;
    z-index: 1;
    visibility:hidden;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s;
    padding: 10px 0 20px;
    border: 1px solid #ccc;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 14px -7px #3d3d3d;
}

.quicklink-dropdown-wrapper li{
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
}


.dropHover:hover .quicklink-dropdown-wrapper{
    visibility:visible;
    max-height:9999px
}

.quicklink-sub-menus li {
    float: none !important;
}

.quicklink-sub-menus li a {
    color: #000 !important;
    font-size: 14px !important;
}

.quicklink-sub-menus li a:hover {
    color: #999 !important;
}



.header-blue-wave-col {
	width: 50%;
	float: left;
}

.header-blue-wave {
	background-color: #00bdf2;
	background-image: url(../images/gradient-blue-wave.png);
	background-image: -webkit-linear-gradient(270deg, #00bdf2 0, #00b3f0 18%, #0066b3 77%, #004985 100%);
	background-image: linear-gradient(180deg, #00bdf2 0, #00b3f0 18%, #0066b3 77%, #004985 100%);
	border-bottom: 1px solid #004985;
	padding: 14.5px 0px 14px;
}

.citi-signOn {
	text-align: right;
}

.citi-signOn a {
	font-size: 1rem;
	padding: 10px 0;
	color: #fff;
	display: inline-block;
}

/* .menu-section {
	position: relative;
} */

.web-menu {
	float: left;
}

.web-menu ul li {
	float: left;
	padding: 0px 15px;
}

.web-menu ul li:nth-child(1) {
	padding-left: 0px;
}

.web-menu ul li a {
	font-size: 16px;
	font-family: "interstate-light";
	color: #333;
	line-height: 24px;
	padding: 12px 0 14px;
	display: block;
	position: relative;
}

.web-menu ul li:hover .sub-menu {
	display: block;
}

.web-menu ul li a:hover {
	color: #056dae;
}

.web-menu ul li a::after {
	transition: all 0.5s ease;
}

.web-menu ul li:hover a::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	background: #056dae;
	height: 2px;
	bottom: 0px;
}

.sub-menu {
	position: absolute;
	border-top: 1px solid #f1f1f1;
	width: 100%;
	background: #ffffff;
	padding: 20px 15px 30px;
	box-shadow: 1px 2px 5px #333333;
    display: none;
    left: 0px;
	z-index: 99;
}

.sub-menu ul li {
	float: none;
	margin: 0px 0px;
    border-bottom: 1px solid #f1f1f1;
    padding-left: 0px !important;
}

.sub-menu ul li a::after {
	content: "";
	display: block;
	position: absolute;
	height: 0px !important;
	bottom: 0px;
}

.sub-menu ul li a:hover {
	color: #333333;
}

.menu-highlight a {
    font-weight: bold !important;
}

.three-colm-menu-section {
    width: 33.33%;
    float: left;
}

.sign-off-right {
    float: right;
    display: block;
}

.sign-off-right a {
    color: #056dae;
    font-family: "interstate-light";
    font-size: 16px;
    position: relative;
    top: 12px;
}

.breadcrumb-section {
    border-top: 1px solid #eee;
    padding: 11px 0px 10px;
}

.breadcrumb-list a img {
    position: relative;
	top: -2px;
	margin: 0px 4px;
	width: 6px;
}

.breadcrumb-list a {
    font-family: "interstate-light";
    font-size: 16px;
    color: #056dae;
    padding: 0px 2px;
}

.breadcrumb-list a:last-child{
    color: #333333 !important;
}


footer {
    padding: 0px 0 50px;
}

.footer-menu {
    float: right;
}

.footer-menu ul li {
    float: left;
}

.footer-links a {
    font-family: "interstate-light";
    font-size: 14px;
    color: #666666;
}

.footer-links a:hover {
    color: #002a54;
}

.footer-menu ul li a {
    font-family: "interstate-light";
    font-size: 14px;
    color: #666666;
    padding: 0px 20px 0px 0px;
}

.footer-menu ul li a:hover {
    color: #002a54;
}

.footer-left {
    width: 15%;
    float: left;
}

.footer-right {
    width: 85%;
    float: left;
}

.footer-sec-1 {
    padding: 20px 15px !important;
}

.footer-sec-2 {
    border-top: 1px solid #999;
    padding: 20px 15px !important;
}

.footer-logo img {
    width: 60px;
}

.footer-copyright p {
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: "interstate-light";
    color: #666;
    text-align: right;
}

.footer-click-menu {
    display: none;
}

/* Header */




@media (max-width: 1450px) {

	.main-container {
		width: 100%;
	}
	.card-col-right {
		padding-left: 15px;
	}
}

@media (max-width: 1025px) {

    main {
        padding-top: 50px;
    }

    .footer-copyright p, .footer-links a, .footer-click-menu span, .footer-menu ul li a {
        font-size: 12px;
        line-height: 18px;
    }

    .hideMob {
        display: none;
    }

    .breadcrumb-list {
        float: left;
    }

    .hideMobVi {
        display: block !important;
        position: relative;
        top: -15px;
    }

    .footer-click-menu {
        float: right;
        position: absolute;
        top: -18px;
        font-family: "interstate-light";
        font-size: 15px;
        color: #666666;
        right: 0px;
        display: block;
    }

    .footerLess {
        display: none;
    }

    .footer-menu {
        display: none;
        margin: 10px 0px 0px;
    }

    .footer-click-menu.active .footerMore{
        display: none;
    }

    .footer-click-menu.active .footerLess {
        display: inline-block;
    }

    .icon-web img{
        width: 15px;
        position: relative;
        top: -4px;
    }

    .footer-click-menu.active .icon-web img {
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Safari 3-8 */
        transform: rotate(180deg);
    }

    .footer-mobile-hide {
        width: 100% !important;
        position: relative;
    }

    .web-menu ul li{
        padding: 0px 0px;
    }

    .topmenu-mobile ul li {
        border-bottom: 1px solid #ddd;
        padding: 1.2rem 0;
        margin: 0px 15px;
        position: relative;
        float: none;
    }
    .topmenu-mobile ul li a {
        font-size: 1rem;
        font-family: "interstate-light";
        color: #ffffff;
     }

     .topmenu-mobile .sub-menu {
        background: none !important;
        padding: 0px;
        margin: 15px 0px 0px !important;
     }

     .topmenu-mobile .sub-menu ul li{
        margin: 0px 0px !important;
     }

     .topmenu-mobile .sub-menu ul li a:hover {
        color: #ffffff !important;
     }

     .topmenu-mobile .sub-menu ul li:last-child{
         border-bottom: 0px !important;
     }

    .breadcrumb-section{
        position: relative;
        top: 51px;
        background: #FFF;
    }
    .sign-off-right {
        display: none;
    }

	/* Header text */
	.header-blue-wave {
		position: fixed;
		width: 100%;
		z-index: 999999;
	}
	.bread-crum {
		padding: 50px 0px 0px;
	}
	.banner-text p br {
		display: none;
	}
	.banner-text h1 {
		margin-bottom: 1.1rem;
	}
	/* Header text */
	.main-container {
		padding: 0px 15px;
	}
	.showDesk {
		display: none;
	}
	.hideDesk {
		display: block;
	}
	/* Header */
	.header-blue-wave {
		padding: 8px 0px;
	}
	.header-blue-wave-col:nth-child(1) {
		width: 100%;
		text-align:center;
	}
	.header-blue-wave-col:nth-child(2) {
		width: 49%;
	}
	.citi-logo {
		float: none;
	}

	.mobile-menu {
		float: left;
		position: absolute;
	    cursor: pointer;
	    top: 10px;
	}
	.mobile-menu span {
		display: block;
		width: 30px;
		height: 2px;
		background: #ffffff;
		margin: 6px 0px;
	}
	.menu-section {
		position: fixed;
		top: 0px;
		left: -400px;
		bottom: 0px;
		width: 400px;
		height: 100%;
		transition: all .5s ease-in;
		z-index: 9999999;
		background: #FFF;
    }
    .menu-section.active{
        background: #FFF;
    }
	.menu-scroll {
		position: relative;
		height: 100%;
		width: 100%;
		margin: auto;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
        overflow: auto;
        padding-bottom: 20rem;
	}
	.menu-scroll::-webkit-scrollbar {
		width: 3px;
	}
	.menu-scroll::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	.menu-scroll::-webkit-scrollbar-thumb {
		background: #888;
	}
	.menu-section.active {
		left: 0px;
	}
	.menu-section .main-container {
		padding: 0px 0px;
	}
	.web-menu {
		float: none;
		background: #ffffff;
		border-right: 1px solid #cccccc;
	}
	.web-menu ul li {
		float: none;
		margin: 0px 15px !important;
        border-bottom: 1px solid #dddddd;
        position: relative;
    }

    .three-colm-menu-section {
        width: 100%;
    }

	.toggle-click {
		float: right;
		position: absolute;
		top: 0px;
		padding: 20px 10px;
		right: 0px;
	}
	.sub-menu {
		position: relative;
		width: 100%;
		box-shadow: none;
	}
	.toggle-click span {
		display: block;
		width: 15px;
		height: 2px;
		background: #555555;
		transition: all 100ms ease-in;
	}
	.web-menu ul li:hover .sub-menu {
		display: none;
	}
	.toggle-click span:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		position: relative;
	}
	.web-menu ul li:last-child {
		border-bottom: 0px !important;
	}
	.toggle-click.active span:nth-child(1) {
		transform: rotate(0deg);
	}
	.mobmenu-header {
		background-color: #00bdf2;
		background-image: url(../images/gradient-blue-wave.png);
		background-image: -webkit-linear-gradient(270deg, #00bdf2 0, #00b3f0 18%, #0066b3 77%, #004985 100%);
		background-image: linear-gradient(180deg, #00bdf2 0, #00b3f0 18%, #0066b3 77%, #004985 100%);
		border-bottom: 1px solid #004985;
		padding: 8px 0px;
	}
	.mobmenu-header-col {
		width: 50%;
		float: left;
		padding: 0px 15px;
	}
	svg.logoWidth {
		height: 30px;
		width: 40px;
	}
	.citi-signOn a {
		padding: 6px 0;
	}
	.close-menu-click {
		float: right;
		padding: 10px;
		position: relative;
		top: 3px;
	}
	.close-menu-click span {
		display: block;
		width: 30px;
		height: 2px;
		background: #ffffff;
	}
	.close-menu-click span:nth-child(1) {
		transform: rotate(45deg);
		position: relative;
		top: 2px;
	}
	.close-menu-click span:nth-child(2) {
		transform: rotate(-45deg);
	}
	.mobile-links {
		margin: 0px 15px 50px;
	}
	.mobile-links a {
		font-size: 1rem;
		font-family: Interstate-Light;
		color: #ffffff;
		line-height: 24px;
		padding: 13px 0 10px;
		display: block;
		position: relative;
		border-bottom: 1px solid #555555;
	}
    /* Header */
    

}

@media (max-width : 568px){
    .menu-section.active {
        width: 100%;
    }
}



/* THE END */