/*Style Settings*/

:root {
	--base: #666666;
	--dark: #5f4b3d;
	--action: #0D8389;
	--actionhover: #29ADB4;
	--actiontint: #99cccc;
	--actiondark: #00747d;
	--tint: #fff4f3;
	--tintneutral: #dedede;
	--accentprimary: #C28879;
	--accentsecondary: #B05A5A;
	--background: #FEFCFC;

	--buttonradius: 0px;
	--borderthickness: 2px;
	--contentarea: 1200px;
}

a {color: var(--action);}
a:hover {color: var(--actionhover); text-decoration: underline;}
a.btn, a.nav-link {text-decoration: none;}

/*======================================*/
/*Container Fixes*/

/*compensate for missing rows by adding row attributes to parent columns*/
main.site-content > .container-fluid > .col-xs-12 {display:flex; margin-left: -15px; margin-right: -15px;}


/*overrides & fixes for system css*/
.bg-light { background-color: var(--tint); }

.navbar-light .navbar-nav .nav-link { color: var(--action); }

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--actionhover);
}

/*retroactive img-responsive class*/
.img-responsive {max-width: 100%;}

/*login screen*/
form[action="./login"] .loginmodal-container { max-width: 600px; }

.clearfix::before {
	display: block;
    content: "";
    clear: both;
}
/* Limit content width */
.master-div {
    /*max-width: 1200px; allowing fullwidth */
    margin: 0 auto;
}

.col-xs-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

@media screen and (min-width: 768px) {
.col-xs-12.col-sm-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}

.col-xs-12.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}

@media screen and (max-width: 768px) and (min-width: 576px){
	.PhoneNumber .form-group .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
}


/*======================================*/
/*Typography*/

body {font-family: brandon-grotesque, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--base);}

h1 {font-size: 3.052em;}
h2 {font-size: 2.441em;}
h3 {font-size: 1.953em;}
h4 {font-size: 1.563em;}
h5 {font-size: 1.25em;}
h6 {font-size: 1.1em;}
h1, h2, h3, h4, h5, h6 {line-height: 1.15;}

h1.display, h3.display {font-weight: 200;}
h1.display {font-size: 5.653em;}
h2.display {font-size: 3.998em;}
h3.display {font-size: 2.827em;}
h4.display {font-size: 1.999em;}

.lead {font-size: 1.25em; color: var(--dark);line-height: 1.25;}
.Head {color: var(--dark);}

/*Mobile Typography Adjustments*/
@media screen and (max-width: 575px) {
	body {font-size: 14px; line-height: 1.65;}

	h1 {font-size: 2.488em;}
	h2 {font-size: 2.074em;}
	h3 {font-size: 1.728em;}
	h4 {font-size: 1.44em;}
	h5 {font-size: 1.2em;}

	h1.display {font-size: 4.81em;}
	h2.display {font-size: 3.157em;}
	h3.display {font-size: 2.369em;}
	h4.display {font-size: 1.777em;}
}


/*======================================*/
/*Bootstrap Element Styling*/

.container, .module.container {max-width: var(--contentarea);}
.module.container {margin:auto;}

.border {border-color: var(--tintneutral) !important;}

.fancybox-skin {border-radius: var(--buttonradius);}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {background-color: var(--action);}
.nav-pills .nav-link {border-radius: 0;}


/*======================================*/
/*Gobal Supports*/

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--action);
    outline: 0;
    box-shadow: 0 0 0 .15rem var(--actiontint);
}

.fancybox-skin {background: var(--background);}
.fancybox-close {top: 4px; right: 4px; width: 40px; height: 35px;}


#fancybox-loading, .fancybox-close, .fancybox-next span, .fancybox-prev span {
    background-image: url(//ttgcommon-160001c.s3.amazonaws.com/mjc/images/general/mjcfancybox_sprite.png?1e35e0ee-9bdc-4d41-94a8-3fc7453998b6);
}

/*======================================*/
/*Buttons*/

.btn { border-radius: var(--buttonradius); border-style:solid;}
a.btn {display:inline-block; text-align: center; vertical-align: middle; padding: .375rem .75rem; font-weight: 400;}
a.btn.block {display: block;}

input.btn {white-space: normal;}

.btn.btn-primary,
.btn.btn-info,
a.btn{
	background-color: var(--action);
	border-color: var(--action);
	border-width: var(--borderthickness);
	color: #fff;
}

.btn.btn-primary:hover,
.btn.btn-info:hover,
 a.btn:hover{
	background-color: var(--actionhover);
	border-color: var(--actionhover);
	color: #fff;
}

.btn.btn-success {
	background-color: var(--accentprimary);
	border-color: var(--accentprimary);
	color: #fff;
}

.btn.btn-link, .title a.btn {
	color: var(--action);
	padding: 0;
	background: transparent;
	border: none;
}

.btn.btn-outline-secondary, .btn.btn-secondary, .btn-secondary, a.nav-link.btn.btn-secondary {color: var(--action); border-color: var(--action); border-width: var(--borderthickness); background-color: transparent; }
.btn.btn-outline-secondary:hover, .btn-secondary:hover {background: var(--actiontint); color: var(--actionhover); border: 2px solid var(--actionhover);}

.btn.btn-link:hover, title a.btn:hover {color: var(--actionhover);}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { background-color: var(--actiondark); border-color:var(--actiondark);}


a.btn, a[role="button"] { box-shadow:none !important;}

input[data-messagekey="GENERAL_REMOVE_X_LABEL"],
a[data-messagekey="GENERAL_REMOVE_X_LABEL"] {
    background: var(--action);
	border: none;
	font-size: 1em;
	right: 3px !important;
	border-radius: 50%;
	font-weight: 400;
	line-height: 1.25em;}

/*made look secondary*/
.OkCancelButtons input[data-messagekey="GENERAL_CANCEL"], #ctl00_MainContent_btnCancel {
	color: var(--action); border-color: var(--action); border-width: var(--borderthickness); background-color: transparent; padding: .375rem .75rem;
}

.OkCancelButtons input[data-messagekey="GENERAL_CANCEL"]:hover, #ctl00_MainContent_btnCancel:hover {
	background: var(--actionlight); color: var(--actionhover); border-color: var(--actionhover); border-width: var(--borderthickness);
}


/*======================================*/
/*Layout Template Utilities*/

.hero {text-align:center; padding-bottom: 30px;}
.hero .col-12 > .img-fluid {width: 100%;}
.hero .row.imgbg {min-height: 50vw; align-items: center; background-position: center; background-size: cover;}
.hero .row.imgbg .col.container {padding: 40px 20px;}

.herooverlay, .coloverlay {
	background: var(--tintneutral);
	max-width: 605px;
	margin: auto;
	text-align:center;
	padding: 8vw 6vw 4vw;
}

div[class^="col"].withoverlay > .img-fluid {width: 100%;}

.herooverlay h1, .herooverlay h2,
.coloverlay h3, .coloverlay h4 {
	display: inline-block;
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: var(--borderthickness) dotted var(--base);
}

 div[class^="col"].imgbg {align-items: center; background-position: center; background-size: cover; display:flex;}
 div[class^="col"].imgbg > * {width: 100%;}
.col-md-6.imgbg {min-height: 50vw;}
.col-md-4.imgbg {min-height: 33vw;}
.col-md-3.imgbg {min-height: 25vw;}

.mb-6 {margin-bottom: 20px;}

div[class^="col"].imgbg {padding: 5vw;}

.boxedcols > .col {border: 1px solid var(--tintneutral); border-width: 1px 1px 1px 0; padding: 5vw;}
.boxedcols > .col:last-child {border-right-width: 0;}
.boxedcols {text-align:center;}
.boxedcols .img-fluid {margin-bottom: 20px;}

@media screen and (min-width:768px) {
	.hero {padding-bottom: 40px;}
	.mb-6 {margin-bottom: 40px;}
	.row.imgbg.textright {justify-content: flex-end;}
	.row.imgbg.textleft {justify-content: flex-start;}
	.row.imgbg.textright .col.container,
	.row.imgbg.textleft .col.container {max-width: 50%; margin:0; padding: 0 5vw;}
	.gutteredcolumns > .row > .col-md-6 {max-width: calc(50% - 30px); margin:0 15px;}
	.boxedcols .img-fluid {margin-bottom: 30px;}
	.herooverlay, .coloverlay { position: relative; top: -85px; margin-bottom: -85px;}
	.coloverlay {max-width: 86%;}
}

@media screen and (min-width:990px) {
	.hero {padding-bottom: 60px;}
	.mb-6 {margin-bottom: 60px;}

	.AccountSecurity .AccountSecurityPassword .col-lg-1 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.AccountSecurity .AccountSecurityPassword .col-lg-2 {
		flex: 0 0 40%;
		max-width: 40%;
	}

}


@media screen and (max-width:767px) {
	.twothird .col-md-4 > .img-fluid { max-width: calc(46vw - 30px); padding-right: 4vw; float: left;}
	.twothird .col-md-4, .twothird .col-md-8 {margin-bottom: 20px;}
	.gutteredcolumns div[class^="col"]:not(:last-child) {margin-bottom: 15px;}
}