/*   
Theme Name: Tulsa Federal Credit Union
Description: A custom layout by Cubic
Author: Marcum.Agency
*/

/* Do not add style here. Use "/sass/" or "/assets/css/" */
/* Original comment by cubic. Ignore this and proceed to editing :) */

/* Styles here override cubic styles. This is for clean up purposes. We'll refactor later */
a { color: #224181; text-decoration: underline;}
a.button, .menu-item a, a.button2, a.button3, .button2 a, .button3 a{ text-decoration: none; }
iframe { border: none; }
.alignright{float:right;}
.alignleft{float:left;}
.no-padding{
    padding-right:0;
    padding-left:0;
}
.anchor::before {
  content:"";
  display:block;
  height:90px; /* fixed header height*/
  margin:-90px 0 0; /* negative fixed header height */
}
.modal-close{z-index: 9999; box-shadow: 0px 0px 5px #333; cursor:pointer; text-align: right; background-color:#ffffff;font-size:20px; color:#000; border-radius:15px; display:block; height: 22px; width: 22px; padding:1px;position:absolute; top:-9px; right:-9px;}
.modal-close i{cursor:pointer; position:absolute; width: 20px; height: 20px;top:0px; left:0px;}
.icons{font-size:75px; color:#959595;}
.iconGrp:last-child {
  border-right: none;
}

.iconGrp:nth-child(4n+1) .icons:hover {
  color: #8981d4;
}

.iconGrp:nth-child(4n+2) .icons:hover {
  color: #6aceee;
}

.iconGrp:nth-child(4n+3) .icons:hover {
  color: #0884c4;
}

.iconGrp:nth-child(4n+4) .icons:hover {
  color: #224181;
}
.icons-wrap{min-height: 20px; padding-bottom:85px; position:relative;}
.icons-wrap .button-wrap{position: absolute; bottom:50px; width:100%;}
.jobs-text-header{font-size:2.25em;}
.jobs-text-subheader{font-size:2em;}
.bodyText{padding-top:15px;}
.bodyText{padding-bottom:50px;}
.bodyText{padding-left:15px;}
.bodyText{padding-right:15px;}
.title{font-size:2.5em;}
.title{line-height:1.5em;}
.subTitle{font-size:2em;}
.bodyCopy{font-size:1.25em;}
img {max-width: 100%; height:auto;}

/*
 * Header
 */
#header ul{margin:0px !important; padding:0px;}/*to reset ul styles*/
#header.sticky #admin-pad{height:32px;}
#header.sticky {box-shadow: 0px 0px 10px #333;}
.logo{float: left; padding:5px 30px 0px 15px;}
.logo img{width:auto; height:60px;}

/* Top Bar */
#top-bar{background-color: #224181; padding:0px;}
#top-bar .menu-item{display:inline-block; position:relative;}
#top-bar-menu .menu-item{text-transform: uppercase;}
#top-bar-menu .menu-item a::before{content:'|'; color:#ffffff; left:-3px; position:absolute;}
#top-bar-menu .menu-item:first-child a::before{content:none;}
#top-bar .menu-item a{display: block; color:#ffffff; padding:5px 5px;}

.search .input{
  width: 100%;
  height: 30px;
  border: 1px solid #0884c4;
  font-family: Tienne;
  padding-left: 5px;
  color: #224181;
  margin:0px; 
}
.search .button{
  margin: 0px !important;
  width: 100%;
  border: 0px;
  height: 30px;
  background-color: #0884c4;
  color: #ffffff;
  font-size:14px !important;;
  letter-spacing: 1px;
  font-family: Lato;
}
.search .button:hover{background-color:#16a5ee;}

/* Main Navigation */
#main-navigation #mobile-menu.collapse{display:block; padding:0px;}
#main-navigation{background-color:#ffffff;}
#main-navigation ul{padding:0px;}
#main-navigation ul.menu>.menu-item{
  color: #224181;
  font-weight: bold;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-family: Lato;
  letter-spacing: 2px;  
  background-color: #ffffff;
  display: inline-block;
  position: relative;
}

/* Dropdown Content (Hidden by Default) */
#main-navigation ul.sub-menu{
  display: none;
    position: absolute;
  top:55px;
  left:0px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  -webkit-transition: 2s; /* Safari */
    transition: 2s;
  z-index: 9999;
  font-size: 14px;
  line-height: 1.42857143;
  text-transform: none;
  font-weight: normal;
}

/* Links inside the dropdown */
#main-navigation ul.sub-menu>.menu-item{
    color: #224181;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
#main-navigation ul.sub-menu>.menu-item:hover {
  background-color: #f2f2f2;
}

/* Show the dropdown menu on hover */
#main-navigation ul.menu>.menu-item:hover ul.sub-menu{
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
#main-navigation ul.menu>.menu-item:hover{
    background-color: #6aceee;
  color: #ffffff;
}
#main-navigation ul.menu>.menu-item:hover>a{
  color: #ffffff;
}
#main-navigation  a {
  color: #224181;
}

/* Content */
.mediumBlue a{color:#8addf8;}
.mediumBlue a:hover{color:#6aceee;}
.darkBlue a{
	color: #eee;
	text-decoration:underline;
	font-weight: bold;
}
.darkBlue a:hover{
	color:#ccc;
	text-decoration: underline !important;
	}

/* Tables */
.table-responsive{position: relative;}
.table-responsive{position: relative;}
.table-responsive.scroll .scroll-right{
position: relative;
top:9px;
display: block;
text-align: center;
z-index: 100;
text-decoration: none;
text-shadow: 0;
width: 10px;
height: 10px;
border-top: 2px solid #333;
border-right: 2px solid #333;
z-index: 9;
-webkit-transform: translate(-50%, 0%) rotate(45deg);
-moz-transform: translate(-50%, 0%) rotate(45deg);
transform: translate(-50%, 0%) rotate(45deg);
-webkit-animation: fade_move_right 2s ease-in-out infinite;
-moz-animation: fade_move_right 2s ease-in-out infinite;
animation: fade_move_right 2s ease-in-out infinite;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_right {
  0%   { -webkit-transform:translate(-10px,0) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(15px,0) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_right {
  0%   { -moz-transform:translate(-10px,0) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(15px,0) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_right {
  0%   { transform:translate(-10px,0) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(15px,0) rotate(45deg); opacity: 0; }
}

/* Slider */
.carousel .item.sc{min-height:200px; background-size:cover;}
.carousel .item img{width:100%;}
.carousel-caption{
  font-family: Tienne;
  font-size:1.25em;
}
.carousel-caption a{color:#ffffff;}
.carousel-caption .wrap{padding:15px 25px; opacity: .8;}
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3{
  font-weight: bold;
  font-family: Lato;
  font-size:2.5em;
}
.carousel-caption .button{
  border:2px solid;
  padding:15px;
}
.carousel-caption .button:hover{
  background-color:#ffffff;
}
.carousel .content-left .carousel-caption{text-align: left; left:0px; right:auto; width:50%; }
.carousel .content-right .carousel-caption{text-align: right; right:0px; left:auto; width:50%;}

.slider-side-content{
  color: #224181;
  font-family: Tienne;
  padding:15px;
  font-size:1.25em;
}
.slider-side-content h1,
.slider-side-content h2,
.slider-side-content h3{
  font-weight: bold;
  font-family: Lato;
  color: #8981d4;
  font-size:2.5em;
}
.slider-side-content .button{
  border:2px solid #8981d4;
  color:#8981d4;
  padding:15px;
}
.slider-side-content .button:hover{
  background-color:#8981d4;
  color:#ffffff;
}

/* Splash */
.brand-window-fs{padding:0px; padding-top:100px;}
.splash-logo{width: 20%; min-width: 200px; display: block; margin:0px auto; height: auto;}
.bw-main-header{display: block; position: relative; margin-top: 50px;}
.bw-sub-header{ position: relative; margin-top:5px;}
.bw-buttons{margin-top:50px; padding:0px 15px;}
.bw-buttons .bw-cta{margin-bottom:.5em; margin-right: 8px; padding:10px 0px;}
.scroll-down{position: relative; margin-top:100px;}
#loginTextHPI{font-family: 'Lato';
color: white;
text-align: center;
border: solid 2px white;
font-size: 22px;
padding:10px 50px;
}
#loginBoxHPI{padding:10px 30px; border:2px solid #ffffff !important;}
#formHide{padding:0px; border:none; background-color:transparent !important;}
#UsernameField{border: solid 2px white;}
#SubmitNext{background:transparent !important; border:2px solid #ffffff !important;}
#rates-cta{background:transparent !important;}

/* Locations */
#markers{display:none;}
.location-controls-button-leg{width:50px; display:inline-block; float:left;}
.map-legend-text{display:block; float:left; width:80px; margin-left:0px; text-align:left;}
.location-controls-button.selected{background-color:#f2f2f2;}
.location-controls-button.selected:hover{color:#8addf8; border-color:#8addf8;}
.location-controls-header { margin-top: 25px; margin-bottom: .75em; }
.locations.container{padding-top:15px; padding-bottom:15px;}
.mb-location{padding-top:15px; padding-bottom:15px;}
.location-feature { min-width:50px; margin-right:8px; margin-left:0px; }
.map_icon{position:absolute; left:-35px; top:25px;}
.locations{padding-left:50px;}

/* Compare Rows */
.price {position:relative;}
.price li{border-bottom:none;}
.price .copy{padding-bottom:85px;}
.price .grey.bottom{position:absolute; bottom:0px !important; width:100%; border-top:1px solid #f2f2f2;}

/*
 * Footer 
 */
.footer ul{margin:0px; padding:0px;}
.footer .menu-footer-menu-container{display:inline-block;}
.footer .menu-item{display: inline-block; text-transform: uppercase;}
.copyright{text-align: center; color:#224181;}

/* Small devices (tablets, 992px and up) */
@media screen and (max-width: 991px){
  #header.sticky #admin-pad{height:0px;}
  #top-bar .menu-item a{ padding:15px 15px;}
  .search .input{height: 50px;}
  .search .button{height: 50px;}
  #main-navigation #mobile-menu,#main-navigation #mobile-menu.collapse{display: none;}
  #main-navigation #mobile-menu.collapsing{display: block; width:100%; padding:0px;}
  #main-navigation #mobile-menu.collapse.in{display: block; padding:0px;}
  #main-navigation .menu>.menu-item{border-bottom: 1px solid #ececec !important;}
  #main-navigation .menu>.menu-item.menu-item-has-children{border-bottom:none !important;}  
  #main-navigation .menu-item>a{display: block; padding:7px 0px !important;}
  #main-navigation .menu-item{display: block; text-align:center; line-height:40px; padding:0px !important;  width:100%; position:relative; border-bottom:1px solid #ececec;}
  #main-navigation ul.sub-menu{top:auto; display: block; position: relative; box-shadow: none;}
  .subscribe-button{width: 100%;}
  /* Home Login Form */
  .brand-window-fs{padding-top: 50px;}
  .scroll-down{position: relative; margin-top:50px;}
  .footer .menu-footer-menu-container{display:block; width: 100%;}
  .footer .menu-item{display: block; border-bottom:1px solid #efefef; width:100%;}
}
/* Small devices (tablets, 768px and up) */
@media screen and (max-width: 768px){
  .brand-window-fs{padding-top: 50px;}
  .bw-buttons .bw-cta{margin-right:0px;}
  #formHide .no-padding{padding:0px 15px;}
  #loginBoxHPI{padding:10px 0px; border:none !important;}
  #UsernameField{height:50px; padding:5px; margin-bottom:8px;}
  #SubmitNext{height:50px;}
  #rates-cta{padding:5px;}
  #locations-cta{padding:5px;}
  #loginTextHPI{padding:5px;}
  .alignright{float:none;}
  .alignleft{float:none;}
  .icons-wrap{padding-bottom:95px; position:relative;}
}

/* Small devices (tablets, 768px and up) */
@media screen and (max-height: 489px){
  .bw-main-header{font-size:2em;}
  .bw-sub-header{ font-size:1.75em;}
}

/* Medium devices (desktops, 992px and up) */
@media screen and (max-width: 992px){
  
}

/*********

    Interstitial Styles

*********/
.interstitial {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
}
.interstitial > a {
    position: absolute;
    top: .25em;
    right: .25em;
    color: #fff;
    border-radius: 50%;
    line-height: 1;
    border: 1px solid #fff;
    font-weight: 700;
    width: 1.5em;
    height: 1.5em;
}
body.interstitial--on {
    overflow: hidden;
}
body.interstitial--on:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    background-color: rgba(0, 0, 0, .65);
}
body.interstitial--on .interstitial.interstitial--new-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.interstitial.interstitial--new-login {
    display: none;
    width: calc(100% - 20px);
    height: 75%;
    text-align: center;
    background: #6ccdec;
    background: -moz-radial-gradient(center, ellipse cover, #6ccdec 0%, #0380c2 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #6ccdec 0%,#0380c2 100%);
    background: radial-gradient(ellipse at center, #6ccdec 0%,#0380c2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ccdec', endColorstr='#0380c2',GradientType=1 );
}
.interstitial.interstitial--new-login .inner {
    padding: 25px;
}
.interstitial.interstitial--new-login img {
    width: 75%;
    height: auto;
    vertical-align: middle;
}
.interstitial.interstitial--new-login img + p {
    font-weight: 300;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1.1;
    margin: -12px auto 10px;
    color: #fff;
}
.interstitial.interstitial--new-login p > strong {
    font-weight: 400;
}
.interstitial.interstitial--new-login p + p {
    font-weight: 300;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    color: #fff;
}
.interstitial.interstitial--new-login p + a {
    display: block;
    color: #fff;
    border: 1px solid #fff;
    font-weight: 300;
    font-size: 18px;
    padding: 6px 22px;
    margin: 14px 0 0 0;
}
.interstitial.interstitial--new-login p + a:hover {
    background-color: rgba(255, 255, 255, .65);
    color: #0380c2;
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: none;
}
.interstitial.interstitial--new-login p + a:focus {
    box-shadow: 0 0 25px rgba(255, 255, 255, .65);
    outline: none;
    outline-offset: 0;
}
@media (min-width:375px){
    .interstitial.interstitial--new-login {
        height: 65%;
    }
}
@media (min-width:568px){
    .interstitial.interstitial--new-login {
        width: 320px;
        height: calc(100% - 20px);
    }
}
@media (min-width:768px){
    .interstitial.interstitial--new-login {
        width: 600px;
        height: 450px;
    }
    .interstitial.interstitial--new-login img {
        width: 225px;
    }
    .interstitial > a {
        font-size: 21px;
    }
    .interstitial.interstitial--new-login img + p {
        margin-top: -20px;
        font-size: 36px;
        max-width: 85%;
    }
    .interstitial.interstitial--new-login p + p {
        font-size: 26px;
    }
    .interstitial.interstitial--new-login p + a {
        display: inline-block;
        padding: 8px 35px;
        margin-top: 15px;
        font-size: 26px;
    }
}
@media (min-width:960px){
    .interstitial > a {
        width: 1.25em;
        height: 1.25em;
    }
    .interstitial.interstitial--new-login {
        width: 800px;
        height: 600px;
    }
    .interstitial > a {
        font-size: 24px;
    }
    .interstitial.interstitial--new-login img {
        width: 330px;
    }
    .interstitial.interstitial--new-login img + p {
        margin-top: -25px;
        font-size: 42px;
        max-width: 75%;
    }
    .interstitial.interstitial--new-login p + p {
        font-size: 30px;
    }
}

/******************
	ADA Styles
*******************/

p a {
	color: #ab0000;
	text-decoration: underline;
}

p a:hover {
	color: #224181;
	text-decoration: underline;
}