﻿ul.tabs, ul.second-level-container {
    list-style: none;
    float: none;
}

    ul.tabs > li {
        display: inline;
    }

.dropdown-menu {
    background-color: #162a5a !important;
    font-size: .78rem;
}
ul.dropdown-menu {
    min-width: 170px;
}
#tabs-container .nav-link {
    background-color: #045594;
}

#Second-Level ul > li {
    display: inline-block;
    padding: 0.35rem 0.65rem;
}

#Second-Level ul,
#Third-Level nav {
    display: none;
}

#tabs-container {
    background-color: #535c6d;
    z-index: 3;
   /* max-width: 1520px;  gap */
}

#Second-Level {
    background-color: #0060aa;
    height: 150px;
   /* max-width: 1520px;  gap */
	/*overflow:hidden;  this answer is the worst, it hides login since not overflowing  */
}

    #Second-Level a, #tabs-container a, #Third-Level a {
        color: white;
        font-weight: bold;
    }

        #Second-Level a:link, #tabs-container a:link, #Third-Level a:link, #Second-Level a:visited, #tabs-container a:visited, #Third-Level a:visited {
            text-decoration: none;
        }

        #Second-Level a:hover, #tabs-container a:hover, #Third-Level a:hover, #Second-Level a:active, #tabs-container a:active, #Third-Level a:active {
            text-decoration: underline;
        }

#Third-Level a {
    color: white;
    font-weight: bold;
    background-color: #162a5a;
}

#Second-Level div.container div.row {
    height: 100%;
}

#tabs-container a {
    border-top: #c1c5c9 5px solid;
}

#tabs-container li.active a {
    border-top: #fad767 5px solid;
    background-color: #0060aa;
}

#logoContainer img {
    position: absolute;
    bottom: 15%;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

#slLinksContainer ul {
    position: absolute;
    bottom: 30%;
}

#loginContainer p {
    position: absolute;
    bottom: 30%;
}

#Third-Level nav {
    padding: 0px !important;
}

#Third-Level {
    background-color: #162a5a;
    margin-left: -15px;
    margin-right: -15px;
}

    #Third-Level .navbarContent {
        position: relative;
        height: 40px;
    }

        #Third-Level .navbarContent .navbar-nav {
            position: absolute;
            right: 0;
            font-size: 0.79rem;
        }

    #Third-Level .navbar-nav li {
        font-size: .75rem;
        padding: 2px 0;
    }

    #Third-Level a {
        padding: 0 0.44rem;
    }

#\31 24460 {
    margin-right: .5rem;
}

.tabs.nav.nav-tabs {
    border-bottom: 1px solid transparent;
    margin-top: .25rem;
    width: 300px;
}

.dropdown-item {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
}

li.dropdown-submenu .nav-link[aria-haspopup="true"] {
    background: transparent url(/Portals/CommunityTrustBank/Skins/CommunityTrustBank/ThreeLevel/images/rightCaret.svg) center right no-repeat;
    margin-right: 9px;
}

/*.dropdown-submenu > a:after {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 300;
    content: "\f054" !important;
    border: none;
    position: absolute;
    right: 10px;
    top: 5px;
}*/

.dropdown-menu > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .dropdown-menu > li:last-child {
        border-bottom: none;
    }

.dropdown-item.active,
.dropdown-item:active {
    background-color: #f70000 !important;
    color: #fff !important;
}

.dropdown-item.dropdown-toggle:hover {
    color: #f70000;
}

.dropdown-item:hover {
    color: #f70000;
}

/*mobile*/
div#mobileLogo {
    /*max-width: 70vw;*/
    position: relative;
    bottom: 2vh;
	z-index:3;
}
.navbar.navbar-expand-lg.navbar-dark.bg-primary {
    background-color: #0060aa !important;
}
.navbar-dark .navbar-toggler {
    color: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.45);
	z-index:5;
}
.navbar-dark .navbar-nav .nav-link  {
    color: rgba(255,255,255,.95) !important;
}
#mobileNav a, #mobileNav a:link, #mobileNav a:visited {
    text-decoration: none;
}
#mobileNav a:hover, #mobileNav a:active {
    text-decoration: underline;
}

#mobileNav ul.dropdown-menu {
    background-color: #06a !important;
    border: 1px solid rgba(255,255,255,.5);
    padding: .5rem;
}

#mobileNav ul.dropdown-menu ul.dropdown-menu {
    background-color: #162a5a !important;
}

#mobileNav ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu {
    background-color: #081c4a !important;
}
.topBarContent ul, #loginMobileLinks ul {
	list-style:none; 
}
 
ul.topBarContent.navbar-nav a, ul.topBarContent.navbar-nav a:link, ul.topBarContent.navbar-nav a:visited
ul.loginContainer.navbar-nav a, ul.loginContainer.navbar-nav a:link, ul.loginContainer.navbar-nav a:visited {
    color: rgba(255,255,255,.95) !important;
    line-height:2;
}
li.nav-item.dropdown > a.loginLink, a.loginLink:link, a.loginLink:visited {
    color: gold !important;
	 background: transparent url(/Portals/CommunityTrustBank/Skins/CommunityTrustBank/ThreeLevel/images/rightCaret.svg) center right no-repeat;
}
a#goldLink {
    color: gold !important;
}
li.dropdown-submenu.accountLink .nav-link[data-value="arrow"]  {
	background: transparent url(/Portals/CommunityTrustBank/Skins/CommunityTrustBank/ThreeLevel/images/newTab.svg) center right no-repeat;
}


/*********************                    media queries                        **********************/
/*********                               Standard Media Queries headers to use                  *****/

/*all landscape phones*/
@media only screen and (min-device-width: 568px) and (max-device-width: 812px)and (orientation: landscape) {#targetOverflow {max-width: 771px !important;}#Third-Level {width: 786px;}
}

/*****              Phones               ****************/
/* ----------- Galaxy S9 ----------- */
/* Portrait and Landscape */
@media screen and (device-width: 1440px) and (device-height: 2960px) and (-webkit-device-pixel-ratio: 2.05) {}

/* Portrait */
@media screen and (device-width: 1440px) and (device-height: 2960px) and (-webkit-device-pixel-ratio: 2.05) and (orientation: portrait) {}
/* Landscape */
@media screen and (device-width: 2960px) and (device-height: 1440px) and (-webkit-device-pixel-ratio: 2.05) and (orientation: landscape) {#logoContainer img {max-width: 250px;}
#Second-Level ul > li {font-size: .85rem;}#Third-Level .navbarContent {height: 54px;}#slLinksContainer ul {bottom: 11%;}#targetOverflow {max-width: 771px !important;}#Third-Level {width: 786px;}
}

/* ----------- Galaxy S8 ----------- */
/* Portrait and Landscape */
@media screen and (device-width: 2960px) and (device-height: 1440px) and (-webkit-device-pixel-ratio: 0.55) {}

/* Portrait */
@media screen and (device-width: 2960px) and (device-height: 1440px) and (-webkit-device-pixel-ratio: 0.55) and (orientation: portrait) {}
/* Landscape */
@media screen and (device-width: 2960px) and (device-height: 1440px) and (-webkit-device-pixel-ratio: 0.55) and (orientation: landscape) {#logoContainer img {max-width: 250px;}#Second-Level ul > li {font-size: .85rem;}#Third-Level .navbarContent {height: 54px;}#slLinksContainer ul {bottom: 11%;}#targetOverflow {max-width: 771px !important;}#Third-Level {width: 786px;}
}

/* ----------- Galaxy A8 ----------- */
/* Portrait and Landscape */
@media screen and (device-width:1080px) and (device-height: 2220px) and (-webkit-device-pixel-ratio: 2.05) {}

/* Portrait */
@media screen and (device-width: 1080px) and (device-height: 2220px) and (-webkit-device-pixel-ratio: 2.05) and (orientation: portrait) {}

/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { }

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: portrait) { }

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: landscape) { #logoContainer img {max-width: 200px;}#Second-Level ul > li {font-size: .85rem;}#Third-Level .navbarContent {height: 54px;}#slLinksContainer ul {bottom: 11%;}#login-form {right: 69px;}#targetOverflow {max-width: 771px !important;}#Third-Level {width: 786px;}
}


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { .slide-item .slide-text-container{padding: 1em .5em 2em .5em !important; }
/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {}
}
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) { #logoContainer img {max-width: 200px !important;bottom: 50px;left: 0;}#slLinksContainer ul {position: absolute;bottom: 12%;}#Third-Level .navbarContent {height: 54px;} #Third-Level {height: 85px;}#Third-Level .navbarContent .navbar-nav {top: 0;}
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { }

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: portrait) { }

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: landscape) { div#logoContainer img {max-width: 175px;bottom: 30%;}#Third-Level .navbarContent {height: 71px;}#login-form {right: 69px;}
}

/* ----------- iPhone SE 2020 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 393px) and (max-device-width: 786px) and (-webkit-min-device-pixel-ratio: 2) { }
/* Portrait */
@media only screen and (min-device-width: 393px) and (max-device-width: 786px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {

}
/* Landscape */@media only screen and (min-device-width: 393px) and (max-device-width: 786px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) { #tabs-container, #Second-Level, #Third-Level{width: 807px;}
}
/* ----------- iPhone XR ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 2) { }

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) { #Items-350658 .slide-item .slide-text-container {padding: 12em 4em 3em 4em;}}

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) { #Second-Level ul > li {font-size: .85rem;}#Third-Level .navbarContent {height: 71px;}#slLinksContainer ul {bottom: 11%;}#logoContainer img {max-width: 250px;bottom: 19%;}#login-form {right: 69px;}#targetOverflow {width: 793px; !important}#tabs-container, #Second-Level, #Third-Level{width: 896px;}
}

/* ----------- Google Pixel ----------- */
/* Portrait and Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}

/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}

/* Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}

/*****                                             Tablets               ****************/
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {#logoContainer img {max-width: 230px;}#Second-Level ul > li {font-size: .85rem;}#Third-Level .navbarContent {height: 54px;}#slLinksContainer ul {bottom: 15%;}
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {#logoContainer img {max-width: 250px;}
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {#logoContainer img {max-width: 230px;}#Second-Level ul > li {font-size: .85rem;}#Third-Level .navbarContent {height: 54px;}#slLinksContainer ul {bottom: 15%;}
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {#logoContainer img {max-width: 250px;}#tabs-container, #Second-Level, #Third-Level{width: 1024px;}
}

/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {#logoContainer img {max-width: 230px;}#Second-Level ul > li {font-size: .85rem;}#Third-Level .navbarContent {height: 54px;}#slLinksContainer ul {bottom: 15%;}
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {#logoContainer img {max-width: 250px;}
}

/* ----------- Galaxy Tab S ----------- */
/* Portrait and Landscape */
@media (min-device-width: 800px) and (max-device-width: 1280px)and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
@media (max-device-width: 800px) and (orientation: portrait)and (-webkit-min-device-pixel-ratio: 2) { #logoContainer img {max-width: 230px;}#Second-Level ul > li {font-size: .85rem;}#Third-Level .navbarContent {height: 54px;}#slLinksContainer ul {bottom: 15%;}
}

/* Landscape */
@media (max-device-width: 1280px) and (orientation: landscape)and (-webkit-min-device-pixel-ratio: 2) { #logoContainer img {max-width: 250px;}
}

/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {}

/* Portrait */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {}

/* Landscape */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {}

/*****                      *****************/