@charset "UTF-8";
/* CSS Document */
section#page-title{display:none;}
h2 {font-size: 2.25rem;}
.forms-disclosures table {border-top:none;border-bottom:none;}
.forms-disclosures table > tbody tr td{border-top:none;padding: 12px 8px 9px 8px;}
.forms-disclosures h3{color:#000;margin-bottom: 1rem;}
h4 {font-weight: var(--fw-600);}
/* Side Nav Overrides for height */
.ibkr-sidebar ul {min-height: initial;}
.ibkr-sidebar {height: 100%;}
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content .navbar {
    padding: 15px 10px;
    background: #f7f7f7;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
#content .navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}
#content .hide {display:none;}
#content {
    width: 100%;
    padding: 20px;
    /* min-height: 100vh; */
    transition: all 0.3s;
    padding-bottom: 80px;
}
/* ---------------------------------------------------
    PRODUCT PAGE SET
----------------------------------------------------- */
#product-body .wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
section#page-title, .section-title{display:none;}
#intro h1, #intro h2 {
    color:var(--white);
    font-weight: 600;
    font-size:2.5rem;
    line-height: 3rem; 
    margin:0.5rem 0 2rem; 
}
/* START FORMS AND DISCLOSURES CSS  ------------------------------------------------------------------------------------------------------------------ */
#intro {padding:0;}
#intro .hero-color{
    background: #c5c9ca; 
    background-image: url('/images/web/IBKR-Traders-Calendars-hero3.jpg');
    background-size:cover;
    background-position: left 100%;
    padding-bottom:30px;
    min-height: 270px;
    border-bottom: 2px solid #ffffff;
}
#intro .eyebrow{text-transform: uppercase;font-weight: 600; letter-spacing: 2px;color:var(--white);font-size:0.9375rem;}
#intro h4 {color:var(--dark);font-weight: 600;padding-bottom:2rem;padding-right:5rem;}     
#intro .wrapper{padding:4rem 25% 1rem 3rem;}
/* Hero Tabs -------------------------------------------- */
.hero-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
	grid-auto-rows: 1fr;
	gap: 8px;
	margin-bottom: 3rem;
}
.hero-tabs .btn {
	align-items:center;
	align-self:stretch;
	display:flex;
	justify-content: center;
	margin: 0;
}
a.btn + a.btn{margin:0;}
#intro .btn-hero-tab, 
#intro .btn-hero-tab:focus, 
#intro .btn-hero-tab:visited {
	color: #666666;
	background-color: var(--white);
}
#intro .btn-hero-tab:hover {
	color: var(--white);
	background-color: var(--primary);
}
#intro .btn-hero-tab-active, #intro .btn-hero-tab-active:hover, #intro .btn-hero-tab-active:focus, #intro .btn-hero-tab-active:visited {
	color: var(--white);
	background-color: var(--primary);
}
.hero {
	width: 100%;
	align-items: flex-start;
}
.hero .hero-content {
	padding: 40px 40px;
}
/* MEDIA QUERY | EXTRA SMALL < 576px ---------------------------------------------------------------------------------------------------- */
@media (max-width:575.98px) {
    #intro .hero-color{min-height: 220px; background-position-x: 50%}
    #intro h2 {font-size:2rem;line-height: 2.5rem;}
    #intro .wrapper{padding:3rem 20% 0 2rem;}
}
/* MEDIA QUERY | SMALL > 576px ---------------------------------------------------------------------------------------------------- */
@media (min-width:576px) and (max-width:767.98px) { 
    #intro .hero-color{min-height: 220px;}
    #intro h2 {font-size:2rem;line-height: 2.5rem;}
    #intro .wrapper{padding:3rem 30% 1rem 2rem;}
}
/* MEDIA QUERY | MEDIUM > 768px ---------------------------------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:991.98px) {
    #intro .hero-color{min-height: 280px;}
    #intro h2 {font-size:2.5rem;line-height: 2.75rem; }
}
/* MEDIA QUERY | LARGE > 992px ---------------------------------------------------------------------------------------------------- */
@media (min-width:992px) and (max-width:1199.98px) {
.hero {
	padding-top: 80px;
}
.hero .hero-content {
	padding: 0px 40px 40px;
}
}
/* MEDIA QUERY | EXTRA LARGE > 1200px ---------------------------------------------------------------------------------------------------- */
@media (min-width:1200px) {
.hero {
	width: 74%;
	padding-top: 80px;
}
.hero .hero-content {
	padding: 0px 40px 40px;
}
}