/**************  HTML ELEMENTS ******************/

body{
	background-color:#FFF;
	font-family: Arial, Helvetica, sans-serif;
}
h1{
	font-size: 24px;
}
h2{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
}

/************** BORDER COLORS ******************/

.green {
	border: 3px solid #84bd00;
}
.aqua {
	border: 3px solid #00b0b9;
}
.lavender {
	border: 3px solid #a05eb5;
}
.plum {
	border: 3px solid #890c58;
}
.cyan {
	border: 3px solid #00bdf2;
}
.lime {
	border: 3px solid #c4d600;
}
.yellow {
	border: 3px solid #ffcd00;
}
.teal {
	border: 3px solid #007377;
}
.orange {
	border: 3px solid #ed8b00;
}
.fuschia {
	border: 3px solid #c6007e;
}


/********************** CUSTOM NAVIGATION **************************/

#customNav .navbar-default .navbar-brand,
#customNav .navbar-default .navbar-nav > li > a {
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	background-color: transparent;
	height: none;
}
#customNav .navbar-default .navbar-nav > li{
	padding: 5px;
	border-top: 1px solid #00ACE1;
}
#customNav .navbar-default .navbar-nav > li > a{
    font-size: 16px;
	padding: 6px 8px;
	border-top: none;
}
#customNav .navbar-default .navbar-nav > li > a:active,
#customNav .navbar-default .navbar-nav > li > a:hover,
#customNav .navbar-default .navbar-nav > li > a:focus{
    border: 1px solid #FFFFFF;
	padding: 5px 7px;
}
#customNav .navbar-default .navbar-nav > li > a.active {
	color:#ffffff;
	background-color:#008ce6;
}
#customNav .navbar-toggle{
	float:right;
	margin-right:15px;
	background-color: transparent;
	height:50px;
}
@media (min-width: 768px){
	#customNav .navbar {
		padding-left: 21px;
		padding-right: 21px;
	}
}
@media (min-width: 768px){
	.navbar-left {
		margin-left: -15px;
	}
}

/********************** ALL PAGES **************************/

#container{
	background-color: #ffffff;
}
#contentOuter {
	position: relative !important;
	min-height: 300px;
	overflow: hidden;
}
#contentOuter #title{
	max-height:250px;
	overflow: hidden;
}
#contentOuter #title .titleLine {
	position: absolute;
	top: 30px;
	margin: 0 30px;
	padding: 12px;
	background-color: #000000;
}
@media (max-width: 768px){
	#contentOuter #title .titleLine {
		width: 90%;
		left: 50%;
		margin-left: -45%;
	}
}
#contentOuter #title .titleLine h1 {
	font-size: 16px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	margin: 0;
}
#contentOuter #title{
	width:100%;
}
#contentOuter #title img{
	display: block;
	width: 100%;
}
#secondary-nav {
	overflow: hidden;
}
#secondary-nav .leftBtn,
#secondary-nav .rightBtn {
	height: 65px;
	line-height: 65px;
	text-align: center;
}
#secondary-nav .leftBtn {
	border-right: 1px dashed #FFFFFF;
}
@media (max-width: 768px){
	#secondary-nav .leftBtn {
		border-right: none;
		border-bottom: 1px dashed #FFFFFF;
	}
}
#secondary-nav a {
	color: #FFFFFF;
	font-size:16px;
	text-decoration: none;
	font-weight: bold;
	display:block;
}
#third-nav {
	width: 100%;
	padding: 15px 30px;
	background-color:#53565a;
}
#third-nav #centerNav {
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
}
#third-nav #centerNav .row a.square-btn{
	display: block;
	width: 120px;
	height: 120px;
	margin: 15px auto;
}
#third-nav #centerNav .row a.square-btn img{
	display: block;
}
#third-nav #centerNav .row a.rect-btn {
	width: 100%;
    display: block;
    max-width: 267px;
	margin: 15px auto;
}
#third-nav #centerNav .row a.rect-btn img{
	width: 100%;
    display: block;
}
img.arrow {
	position: relative;
	top: 7px;
	left: 16px;
	width: 29px;
	height: 29px;
}
.btn-blue {
	padding: 10px;
	background-color: #00bdf2;
	text-align: center;
	font-size: 14px;
	font-weight:bold;
	color:#FFFFFF;
}
.btn-bottom {
	margin-bottom: 50px;
	padding: 10px;
	background-color: #00bdf2;
	text-align: center;
	font-size: 14px;
	font-weight:bold;
	color:#FFFFFF;
}
.btn-blue:hover,
.btn-bottom:hover {
	background-color: #008ce6;
}

/********************** HOMEPAGE **************************/

body#home #customNav{
	display:none; /* Needed for animation on homepage only */
}
.door-l,
.door-r {
	position:absolute;
	top:0;
	height:500px;
	z-index:100;
}
.door-l {
	float:left;
	left:0;
	background-image:url("/tts/sa/conference/tfc/2016/digital_networking/site/img/door-l.jpg");
	background-repeat: no-repeat;
	background-position: top right;
}
.door-r {
	float:right;
	right:0;
	background-image:url("/tts/sa/conference/tfc/2016/digital_networking/site/img/door-r.jpg");
	background-repeat: no-repeat;
	background-position: top left;
}
.door-l .door-logo,
.door-r .door-logo{
	display: block;
	margin: 110px auto 0;
	max-width: 100%;
	cursor:pointer;
}
.door-l-btn .home_explore_more,
.door-r-btn .home_explore_more{
	color: #ffffff;
    font-size: 24px;
    margin-bottom: 15px;
}
.door-l-btn,
.door-r-btn{
	position:absolute;;
	bottom:20px;
	width:100%;
	display:block;
	margin: 0 -15px;
	padding: 0 15px;
}
.door-l-btn a,
.door-r-btn a{
	border: 3px solid #ffffff;
	color: #ffffff;
	display:block;
	padding: 10px;
	font-size:18px;
	text-decoration: none;
	line-height: 24px;
	overflow: hidden;
	cursor: pointer;
}
.door-r-btn a:hover,
.door-l-btn a:hover {
	background-color: #ffffff;
	color: #002d72;
}
.door-l-btn a span,
.door-r-btn a span{
	font-size: 28px;
	float:right;
}
body#home #powerNetwork,
body#home #latamTTS {
	position:relative;
	display: none;
}

/********************** POWER OF THE NETWORK **************************/

#powerNetwork #secondary-nav .leftBtn,
#powerNetwork #secondary-nav .rightBtn {
	background-color: #890c58;
}
#powerNetwork #secondary-nav .leftBtn:hover,
#powerNetwork #secondary-nav .rightBtn:hover {
	background-color: #ac558a;
}
#powerNetwork #third-nav #centerNav .row a.square-btn{
	border: 3px solid #890c58;
}
#powerNetwork #third-nav #centerNav .row a.square-btn:hover{
	background-color: #890c58;
}

/********************** LATIN AMERICA TTS **************************/

#latamTTS #third-nav #centerNav .row a.rect-btn {
	border: 3px solid #00bdf2;
}
#latamTTS #third-nav #centerNav .row a.rect-btn:hover {
	background-color: #97999b;
	border: 3px solid #97999b;
}

/********************** PAYMENTS **************************/

#payments #secondary-nav .leftBtn,
#payments #secondary-nav .rightBtn {
	background-color: #d5e24d;
}
#payments #secondary-nav .leftBtn:hover,
#payments #secondary-nav .rightBtn:hover {
	background-color: #c4d600;
}
#payments #secondary-nav .leftBtn.active {
	background-color: #a9d14d;
}
#payments #secondary-nav .rightBtn.active {
	background-color: #a9d14d;
}
#payments #third-nav #centerNav .row a.square-btn{
	border: 3px solid #c4d600;
}
#payments #third-nav #centerNav .row a.square-btn:hover {
	background-color: #c4d600;
}

/********************** RECEIVABLES **************************/

#receivables #third-nav #centerNav .row a.square-btn {
	border: 3px solid #00b0b9;
}
#receivables #third-nav #centerNav .row a.square-btn:hover {
	background-color: #00b0b9;
}

/********************** TWCF **************************/

#twcf #secondary-nav .leftBtn,
#twcf #secondary-nav .rightBtn {
	background-color: #ffcd00;
}
#twcf #secondary-nav .leftBtn:hover,
#twcf #secondary-nav .rightBtn:hover {
	background-color: #c99700;
}
#twcf #secondary-nav .leftBtn.active {
	background-color: #c99700;
}
#twcf #secondary-nav .rightBtn.active {
	background-color: #c99700;
}
#twcf #third-nav #centerNav .row a.square-btn {
	border: 3px solid #ffcd00;
}
#twcf #third-nav #centerNav .row a.square-btn:hover {
	background-color: #ffcd00;
}
#twcf #third-nav .video a,
#twcf #third-nav .case-study a {
	padding: 10px;
	font-size: 16px;
	background-color: #ffcd00;
	color: #FFF;
	font-weight: bold;
	display: block;
	text-decoration: none;
	margin: 15px auto;
}
#twcf #third-nav .video a:hover,
#twcf #third-nav .case-study a:hover {
	background-color: #c99700;
}

/********************** COMMERCIAL CARDS **************************/

#comm_cards #third-nav #centerNav .row a.square-btn {
	border: 3px solid #84bd00;
}
#comm_cards #third-nav #centerNav .row a.square-btn:hover {
	background-color: #84bd00;
}

/********************** LIQUIDITY **************************/

#liquidity #third-nav #centerNav .row a.square-btn {
	border: 3px solid #a05eb5;
}
#liquidity #third-nav #centerNav .row a.square-btn:hover {
	background-color: #a05eb5;
}

/********************** CHANNELS **************************/

#channnels #secondary-nav .leftBtn,
#channnels #secondary-nav .rightBtn {
	background-color: #ed8b00;
}
#channnels #secondary-nav .leftBtn:hover,
#channnels #secondary-nav .rightBtn:hover {
	background-color: #ed8b00;
}
#channnels #secondary-nav .leftBtn.active {
	background-color: #cb6015;
}
#channnels #secondary-nav .rightBtn.active {
	background-color: #cb6015;
}
#channnels #third-nav #centerNav .row a.square-btn {
	border: 3px solid #ed8b00;
}
#channnels #third-nav #centerNav .row a.square-btn:hover {
	background-color: #ed8b00;
}

/********************** TRADE SERVICES **************************/

#trade_svcs #third-nav #centerNav .row a.square-btn {
	border: 3px solid #007377;
}
#trade_svcs #third-nav #centerNav .row a.square-btn:hover {
	background-color: #007377;
}

/********************** TRADE FINANCE **************************/

#trade_finance #third-nav #centerNav .row a.square-btn {
	border: 3px solid #ccac00;
}
#trade_finance #third-nav #centerNav .row a.square-btn:hover {
	background-color: #ccac00;
}

/********************** TREASURY TRANSFORMATION **************************/

#treasury #third-nav #centerNav .row a.square-btn {
	border: 3px solid #c6007e;
}
#treasury #third-nav #centerNav .row a.square-btn:hover {
	background-color: #c6007e;
}
#contentOuter #sort_description h3 {
	color: #00bdf2;
	font-size: 16px;
}
#contentOuter #steps-light {
	background: #4d6c9c;
	overflow: hidden;
	color: #ffffff;
	text-align: center;
	padding: 15px 15px;
	border-top:1px solid #FFFFFF;
}
#contentOuter #steps-light a.ccg-icon {
	margin-top:10px;
	display:block;
	color:#FFFFFF;
}
#contentOuter #steps-light a.ccg-icon:hover{
	text-decoration: none;
	color:#002d72;
}
#contentOuter #steps-light .ccg-title {
	font-size:18px;
	color:#FFFFFF;
}
#contentOuter #steps-dark {
	background: #008ce6;
	overflow: hidden;
	text-align: center;
	color: #ffffff;
	padding: 5px;
	border-top: 1px solid #FFFFFF;
}
#contentOuter #steps-dark h1 {
	color:#FFFFFF;
	font-weight:bold;
	margin-top: 25px;
}

/********************** SORTING PAGES **************************/

h2.country_name{
	color: #00bdf2;
    text-transform: uppercase;
    font-size: 34px;
}
a.download_pdf{
	padding: 10px;
    color: #ffffff;
	background: #00bdf2;
    display: block;
    width: 150px;
    text-align: center;
    margin: 0 auto;
	text-decoration: none;
}
a.download_pdf:hover{
    background: #008ce6;
}
.sorting_page #contentOuter {
    min-height: inherit;
}
.sorting_page #sorting_section{
	background: #002d72;
	overflow:hidden;
	color: #ffffff;
	padding: 30px 15px;
}
.sorting_page #sorting_section .titleLine {
	padding: 12px;
	background-color: #000000;
}
@media (max-width: 768px){
	.sorting_page #sorting_section .titleLine {
		float: none;
	}
}
.sorting_page #sorting_section .titleLine h1 {
	font-size: 16px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	margin: 0;
	line-height:22px;
}
.sorting_page #sorting_section .titleLine h1 span {
	font-size:14px;
	font-weight:normal;
}
.sorting_page #sorting_section #sort_description {
	margin: 15px 0;
}
.sorting_page #sorting_section #country_select{
	clear: both;
	overflow: hidden;
	padding-bottom: 1px;
	margin-bottom: 30px
}
.sorting_page #sorting_section #country_select select{
	color:#333333;
	min-width: 225px;
}
.sorting_page #sorting_section #country_choices .country_choice{
	display: none;
}
.sorting_page #sorting_section #country_choices .country_choice.no-country_choice{
	display:block;
}
.sorting_page #sorting_section #country_choices .country_choice img{
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 250px;
}
.sorting_page #sorting_section #country_info{
	clear: both;
	padding-bottom: 15px;
	padding-top: 15px;
}
.sorting_page #sorting_section #country_info .country_choice{
	width: 100%;
	display: none;
}
.sorting_page #sorting_section #country_info .country_choice img{
	width: 100%;
	display: block;
}

/* Styles for checkboxs & radio buttons */
.sorting_page #sorting_section #country_select .option{
	border-top: 1px dashed #ffffff;
	border-bottom: 1px dashed #ffffff;
	overflow: hidden;
	margin-bottom: -1px;
}
.sorting_page #sorting_section #country_select .option:hover{
	color: #00bdf2;
}
.sorting_page #sorting_section #country_select input[type=checkbox]{
	margin-top: 0;
    float: left;
    height: 36px;
    width: 16px;
	position: absolute;
	cursor: pointer;
}
.sorting_page #sorting_section #country_select input[type=radio]{
	margin-top: 0;
    float: left;
    height: 36px;
    width: 16px;
	position: absolute;
	cursor: pointer;
}
.sorting_page #sorting_section #country_select label{
	margin-bottom: 0;
	padding-left: 30px;
    height: 36px;
    float: left;
    line-height: 36px;
    font-weight: normal;
    text-transform: uppercase;
	display:block;
	width: 100%;
	cursor: pointer;
}
/* END styles for checkboxs & radio buttons */

table#comparison_table{
	background: #00bdf2;
    color: #FFF;
}
table#comparison_table td,
table#comparison_table th {
    vertical-align: middle;
	border: 1px dashed #FFF;
}

table#comparison_table td a {
	color:#FFF;
	text-decoration:underline;
}

table#comparison_table .rowHeader{
	color: #002d72;
}
table#comparison_table tr th{
	background-color: #00bdf2;
}
table#comparison_table tr.country td {
    font-weight: bold;
    color: #002d72;
}
table#comparison_table img.icon-align {
    position:relative;
	margin-right:10px;
	top:3px;
}
.terms {
	display:none;
	margin-top: 20px;
}
.terms ol,
.terms ul{
	padding-left: 0;
}
.terms ol li,
.terms ul li{
	list-style:none;
}
.terms .terms-conditions{
	font-size: 10px;
}

/********************** CHANNELS OVERVIEW PAGE **************************/

#contentOuter #sorting_section #icon-gallery {
	margin: 50px 0;
}
#icon-gallery{
	text-align: center;
}
#icon-gallery img {
	margin-bottom: 20px;
}
#icon-gallery h1.ccg-orange {
	color:#ed8b00;
	font-weight:bold;
	margin: 0 0 10px 0;
}
#icon-gallery h1.ccg-aqua {
	color:#00b0b9;
	font-weight:bold;
	margin: 0 0 10px 0;
}
#icon-gallery h1.ccg-yellow {
	color:#ffcd00;
	font-weight:bold;
	margin: 0 0 10px 0;
}
#icon-gallery h1.ccg-cyan {
	color:#00bdf2;
	font-weight:bold;
	margin: 0 0 10px 0;
}
#icon-gallery h1.ccg-green {
	color:#84bd00;
	font-weight:bold;
	margin: 0 0 10px 0;
}
#icon-gallery .top-pad {
	padding-top: 30px;
}
@media (max-width: 992px){
	#icon-gallery .top-pad {
		padding-top: 0;
	}
}
#icon-gallery #second-container {
	margin-top:50px;
}
#icon-gallery #second-container .ccg-info {
	background-color: #4d6c9c;
	text-align: left;
	padding: 10px;
	margin-right:10px;
	margin-bottom: 36px;
	vertical-align:middle;
	min-height:175px;
}
#icon-gallery #second-container .ccg-info ul {
	margin-left: -15px;
}

/********************** TRADE CITIDIRECT PAGE **************************/
.trade-container {
	margin-top:20px;
}
.trade-container h1 {
	color:#FFF;
}
.trade-container ul li {
	text-align:left;
	margin-left:20px;
}
.trade-container p {
	text-align:left;
}
@media (max-width: 768px){
	.trade-container {
		border-top:1px solid #FFF;
		padding-top:20px;
	}
}

/********************** PRESENTATIONS PAGE **************************/

#contentOuter #presentation_section {
	background: #FFFFFF;
	color: #717073;
	padding: 25px 50px;
}
#contentOuter #presentation_section .section-pad a img {
	margin-bottom:10px;
}
#contentOuter #presentation_section .section-pad a h4 {
	font-weight:bold;
	color:#008ce6;
}
#presentation_section h2.title {
	margin-left:-16px;
}
#presentation_section p.time {
	margin-bottom: 0px;
    font-weight: bold;
	color:#002d72;
}