/* =============================================
   GLOBAL
============================================= */

.clear {
	clear: both;
}




/* =============================================
   MAIN STYLES
============================================= */

#tools {
	position: relative;
	box-sizing: border-box;
	margin: 20px auto;
	width: 100%;
	max-width: 976px;
	padding: 0 10px;
}

#tools img {
	display: block;
	width: 100%;
	height: auto;
}

#tools h4 {
	font-size: 16px;
	line-height: normal;
	color: #0b2949;
	margin: 0 0 5px 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

#t_header {
	position: relative;
	box-sizing: border-box;
	padding: 50px 40px;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

#t_header img {
	display: block;
	width: 100%;
	height: auto;
}

#t_cta {
	position: relative;
	display: table;
}

.toolsTitle {
        font-size: 32px;
    line-height: normal;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-align: center;
}

#t_cta h1 {
	font-size: 22px;
	line-height: normal;
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

.cta_content {
	position: relative;
	display: table-cell;
	box-sizing: border-box;
	padding: 20px 40px;
	vertical-align: middle;
}

.cta_content p {
	padding: 0;
	margin: 0;
}

.cta_button {
	position: relative;
	display: table-cell;
	box-sizing: border-box;
	vertical-align: middle;
	padding: 20px 40px 20px 0;
}

.cta_button a {
	font-family: 'Montserrat', sans-serif;
	display: block;
	text-align: center;
	color: #d02b27;
	height: 40px;
	line-height: 40px;
	width: 140px;
	text-transform: uppercase;
	font-weight: 700;
    font-size: 13px;
	background: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

.cta_button a:hover {
	text-decoration: none;
	color: #ffffff;
	background: #d02b27;
}

.cta_button a span {
	padding: 0 5px 0 0;
}

#t_main {
	position: relative;
	box-sizing: border-box;
	padding: 0 15px;
	margin: 30px 0 0 0;
}

#t_main p {
	margin: 0;
	padding: 0 0 20px 0;
}

#t_main h2 {
	font-size: 20px;
	color: #0b2949;
	padding: 0;
	margin: 0 0 10px 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height: normal;
}

#t_main p + h2 {
	margin-top: 10px;
}

#t_main h3 {
	font-size: 16px;
	color: #0b2949;
	margin: 10px 0 0 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	line-height: normal;
}

#t_opening {
	position: relative;
	box-sizing: border-box;
	font-size: 22px;
	line-height: 32px;
	font-weight: 300;
}

#t_opening strong {
	color: #000000;
}

#t_opening p {
	margin: 0;
	padding: 0 0 20px 0;
}

#t_opening::after {
	content: "";
    width: 70px;
    height: 1px;
    display: block;
    /*background: #c9c9c9;*/
    background: #f1b51c;
	margin: 15px 0 40px 0;
}

#t_blocks {
	position: relative;
	box-sizing: border-box;
	margin: 0 0 40px 0;
}

#t_blocks h2 {
	margin: 0 0 10px 0;
}

#t_blocks p {
	margin: 0;
	padding: 0;
}

#t_blocks::before {
	content: "";
    width: 70px;
    height: 1px;
    display: block;
    /* background: #c9c9c9; */
    background: #f1b51c;
    margin: 15px 0 40px 0;
}

.t_block {
	font-size: 17px;
	line-height: 1.5;
	position: relative;
	float: left;
	box-sizing: border-box;
	width: calc(50% - 15px);
	background: #f6f1e9;
	margin: 15px 15px 15px 0;
}

.t_block.alt {
	margin: 15px 0 15px 15px;
}

.t_block img {
	display: block;
	width: 100%;
	height: auto;
}

.tb_content {
	position: relative;
	box-sizing: border-box;
	padding: 25px 20px;
}

#t_features {
	position: relative;
	box-sizing: border-box;
}

#t_features p {
	margin: 0;
	padding: 0 0 20px 0;
}

.t_feature {
	position: relative;
	box-sizing: border-box;
}

h2 + .t_feature {
	margin-top: 20px;
}

.f_left {
	position: relative;
	box-sizing: border-box;
	float: left;
	text-align: center;
	width: 170px;
}

.f_left img {
	display: block;
	width: 100%;
	max-width: 170px;
	height: auto;
}

.f_right {
	position: relative;
	box-sizing: border-box;
	float: right;
	width: calc(100% - 200px);
}

.f_right::after {
	content: "";
	width: 35px;
	height: 1px;
	display: block;
	background: #f1b51c;
	
    margin: 20px 0 40px 0;
}

.t_more {
	position: relative;
	box-sizing: border-box;
	padding: 0 0 0 200px;
}

#tools .t_more h4 {
	color: #0b2949;
}




/* =============================================
   RAPTER
============================================= */

#t_header.rapter {
	background-image: url("https://www.mathematica.org/Includes/Site/tools/bg-rapter.png");
}

#t_cta.rapter {
	background: #344050;
}

#t_cta.rapter h1 {
	color: #ffffff;
}

/* =============================================
   GRADIENT
============================================= */

.gradient {
	background-color: #ffffff;
	background-image: url("https://www.mathematica.org/Includes/Site/tools/bg_gradient.png");
	background-repeat: repeat-x;
}

#t_header.gradient {
	background-image: url("https://www.mathematica.org/Includes/Site/tools/bg_gradient.png");
}

#t_cta.gradient {
	background: #0b2949;
}

#t_cta.gradient h1 {
	color: #ffffff;
}

#t_header_split.gradient .split_side {
	background: #344050;
	color: #ffffff;
}


/* =============================================
   TEXTURE
============================================= */

.texture {
	background-color: #fcfcfc;
	background-image: url("https://www.mathematica.org/Includes/Site/tools/bg_texture.png");
}

#t_header.texture {
	background-image: url("https://www.mathematica.org/Includes/Site/tools/bg_texture.png");
}

#t_cta.texture {
	background: #344050;
}

#t_cta.texture h1 {
	color: #ffffff;
}

#t_header_split.texture .split_side {
	background: #344050;
	color: #ffffff;
}


/* =============================================
   RESPONSIVE
============================================= */

@media only screen and (max-width: 860px) {

	#t_header {
		padding: 30px 20px;
	}
	
	#t_cta h1 {
		font-size: 18px;
	}
	
	#t_opening {
		font-size: 20px;
		line-height: 30px;
	}
	
	.cta_button a {
		font-size: 13px;
		width: 130px;
		height: 35px;
		line-height: 35px;
	}
	
	
	.cta_button a span {
		padding: 0 3px 0 0;
	}
	
	#t_main {
		margin: 20px 0 0 0;
	}
	
	#t_main h2 {
		font-size: 18px;
		margin: 0 0 5px 0;
	}
	
	#t_main h3 {
		font-size: 15px;
	}
	
	#t_opening::after {
		width: 80px;
		margin: 10px 0 30px 0;
	}
	
	#t_blocks::before {
		width: 80px;
		margin: 10px 0 30px 0;
	}
	
	.t_block {
		width: calc(50% - 10px);
		background: #f7f7f7;
		margin: 10px 10px 10px 0;
	}
	
	.t_block.alt {
		margin: 10px 0 10px 10px;
	}
	
	.tb_content {
		padding: 20px 15px;
	}
	
	.f_left {
		width: 140px;
	}
	
	.f_right {
		width: calc(100% - 170px);
	}
	
	.f_right::after {
		width: 45px;
		margin: 5px 0 32px 0;
	}
	
	.t_more {
		padding: 0 0 0 170px;
	}
	
}


@media only screen and (max-width: 767px) {

	#tools {
		margin: 0 auto 20px auto;
		padding: 0;
	}
	
	#t_cta {
		text-align: center;
		display: block;
		padding: 20px;
	}
	
	.cta_content {
		display: block;
		padding: 0;
	}
	
	.cta_button {
		display: inline-block;
		padding: 0;
		margin: 15px auto 0 auto;
	}
	
	
	#t_opening {
		font-size: 20px;
		line-height: 30px;
	}
	
	#t_blocks {
		margin: 0 0 20px 0;
	}
	
	.t_block {
		float: none;
		width: 100%;
		margin: 15px 0;
	}
	
	.t_block.alt {
		margin: 15px 0;
	}
	
	.tb_content {
		padding: 25px 20px;
	}
	
	.f_left {
		width: 110px;
	}
	
	.f_right {
		width: calc(100% - 130px);
	}
	
	.t_more {
		padding: 0 0 0 130px;
	}
	
	#tool_cols .left {
		float: none;
		width: 100%;
	}
	
}

@media only screen and (max-width: 640px) {

	#tools {
		margin: 20px auto;
		padding: 0;
	}

	
}


/* =============================================
   50/50 SPLIT HEADER
============================================= */

#t_header_split {
	position: relative;
	text-align: center;
	display: table;
}

.split_main {
	position: relative;
	display: table-cell;
	width: 50%;
	box-sizing: border-box;
	padding: 40px;
	vertical-align: middle;
}

.split_side {
	position: relative;
	display: table-cell;
	width: 50%;
	box-sizing: border-box;
	padding: 40px;
	vertical-align: middle;
}

.split_side a {
	font-family: 'Montserrat', sans-serif;
	display: block;
	margin: 20px auto 0 auto;
	text-align: center;
	color: #eb262e;
	height: 40px;
	line-height: 40px;
	width: 140px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
	background: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

.split_side a:hover {
	text-decoration: none;
	color: #ffffff;
	background: #eb262e;
}

.split_side a span {
	padding: 0 5px 0 0;
}

#t_header_split h1 {
	font-size: 22px;
	line-height: normal;
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

#t_header_split.rapter .split_main {
	background-image: url("https://www.mathematica.org/Includes/Site/tools/bg-rapter.png");
}

#t_header_split.rapter .split_side {
	background: #344050;
	color: #ffffff;
}

/* Text only CSS*/
.t_name {
	text-align: center;
	color: #d02b27;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 55px;
}


@media only screen and (max-width: 860px) {

	.t_name {
		font-size: 40px;
		line-height: 45px;
	}

}


@media only screen and (max-width: 767px) {

	.t_name {
		font-size: 30px;
		line-height: 35px;
	}

}


/* =============================================
   50/50 SPLIT HEADER RESPONSIVE
============================================= */

@media only screen and (max-width: 860px) {
	
	#t_header_split h1 {
		font-size: 18px;
	}
	
	.split_side a {
		font-size: 13px;
		width: 130px;
		height: 35px;
		line-height: 35px;
	}
	
	.split_side a span {
		padding: 0 3px 0 0;
	}
	
	.split_main, .split_side {
		padding: 30px;
	}
	
}

@media only screen and (max-width: 767px) {
	
	#t_header_split {
		display: block;
	}
	
	.split_main, .split_side {
		width: 100%;
		display: block;
		padding: 20px;
		box-sizing: border-box;
	}
	
}

/* =============================================
   50/50 SPLIT GENERIC HEADER
============================================= */

#t_header_split_generic {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	margin: 0 0 0 0;
}

#t_header_split_generic div {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

#t_header_split_generic img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.split_main {
	position: relative;
	width: 50%;
	padding: 40px;
}

.split_side_generic {
	position: relative;
	width: 50%;
	padding: 40px;
}

.split_side_generic a {
	display: block;
	margin: 20px auto 0 auto;
	text-align: center;
	color: #eb262e;
	height: 40px;
	line-height: 40px;
	width: 140px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
	background: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

.split_side_generic a:hover {
	text-decoration: none;
	color: #ffffff;
	background: #eb262e;
}

.split_side_generic a span {
	padding: 0 5px 0 0;
}

#t_header_split_generic h1 {
	font-size: 22px;
	line-height: normal;
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

#t_header_split_generic.rapter .split_main {
	background-image: url("https://www.mathematica.org/Includes/Site/tools/bg-rapter.png");
}

#t_header_split_generic.rapter .split_side_generic {
	background-image: url("https://www.mathematica.org/Includes/Site/tools/bg-rapter.png");
}



/* =============================================
   50/50 SPLIT  GENERIC HEADER RESPONSIVE
============================================= */

@media only screen and (max-width: 860px) {
	
	#t_header_split_generic h1 {
		font-size: 18px;
	}
	
	.split_side_generic a {
		font-size: 13px;
		width: 130px;
		height: 35px;
		line-height: 35px;
	}
	
	.split_side_generic a span {
		padding: 0 3px 0 0;
	}
	
	.split_main, .split_side_generic {
		padding: 30px;
	}
	
}

@media only screen and (max-width: 767px) {
	
	#t_header_split_generic {
		display: block;
	}
	
	.split_main, .split_side_generic {
		width: 100%;
		display: block;
		padding: 20px;
		box-sizing: border-box;
	}
	
}



/* =============================================
   MEET THE EXPERT
============================================= */

    .infoBarRightRail {border-bottom:1px solid #e2dfda; border-top:1px solid #e70033; display:table; width:30%;min-width: 250px;
    float: right; margin:5px 5px;}
    .filter + .infoBarRightRail {border-top:none;}
    .title + .infoBarRightRail {border-top:none; margin-top:-26px;}
    .infoBarRightRailCell {display:block; border-bottom:1px solid #e2dfda; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .infoBarRightRailCell:last-child {border-bottom:none;}
    .infoBarRightRail .date      {background:#231f20; color:#fff; font-size:1em; width:100%;}
    .infoBarRightRail .dateWide      {background:#231f20; color:#fff; font-size:1em; width:100%;}
    .infoBarRightRail .authorLbl {background:#eeeeee; font-family: 'Montserrat', sans-serif; font-weight:800;  width:100%;padding:10px 15px; }
    .infoBarRightRail .author    {font-size:1em; overflow: hidden;padding:2px 2px;}
    .infoBarRightRail a {text-decoration:none; }
    .infoBarRightRail a:hover, .infoBarRightRail a:focus {color:#aaa8a8; text-decoration:none; }
    
    .commentaryAuthorBioImage {
    }
    
    .commentaryAuthorBioTitle {
        font-size: .8em;
        line-height: 18px;
    }
    
    .commentaryAuthorBioName {
        margin: 0 0 0 0;
    }
    
    .authorBioImage {
        float: left;
        width:33%;
        margin: 2px;
    }
    
    .authorBioImage img {
        max-height:100px;
    }
    
    .authorBioNameTitle {
        float: right;
        width: 64%;
    }
    
    .author_cta_button {
        clear:both;
        background: #344050;
        text-align:center;
        text-transform: uppercase;
        padding: 5px;
    }
    
    .author {
        margin-bottom: 0px !Important;
    }
    
    .author_cta_button a {
        display: block;
        margin: 0px auto 0 auto;
        text-align: center;
        color: #eb262e;
        height: 20px;
        line-height: 20px;
        width: 140px;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 700;
        background: #ffffff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
    }
    
    .author_cta_button a:hover {
        text-decoration: none;
        color: #ffffff;
        background: #eb262e;
    }
    
    .author_cta_button a span{
        padding: 0 5px 0 0;
    }
    
    @media only screen and (max-width: 640px) {
	    
        .infoBarRightRail {
        	width:100%;
        }
        
    }




/* =============================================
   NEW EXPERTS / 2 COLS
============================================= */

.tool_cols {
	position: relative;
	box-sizing: border-box;
}

.tool_cols .left {
	position: relative;
	box-sizing: border-box;
	width: calc(100% - 300px);
	padding: 0 30px 0 0;
}

.tool_cols .right {
	position: relative;
	box-sizing: border-box;
	width: 300px;
	padding: 0 0 20px 0;
}

.col_head {
	position: relative;
	box-sizing: border-box;
	padding: 15px 20px;
	color: #ffffff;
	background: #17a673;
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	line-height: normal;
	font-weight: 700;
	text-transform: uppercase;
}

.expert {
	position: relative;
	box-sizing: border-box;
	padding: 20px;
	background: #f6f1e9;
	margin: 5px 0;
	border: 1px solid #f6f1e9;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

.expert:hover {
	border-color: #e8e4dc;
	background: #fffaf2;
}

.expert_photo {
	position: relative;
	box-sizing: border-box;
	float: left;
	width: 90px;
}

.expert_photo img {
	display: block;
	width: 100% !important;
	height: auto  !important;
}

.expert_content {
	position: relative;
	box-sizing: border-box;
	float: right;
	width: calc(100% - 90px);
	padding: 0 0 0 20px;
	line-height: normal;
}

.expert_content a {
	display: inline-block;
	margin: 13px 0 0 0;
	background: #f1b51c;
	padding: 10px 18px;
	color: #0b2949;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.expert_content a span {
	margin: 0 7px 0 0;
}

.expert_content a:hover {
	color: #ffffff;
	text-decoration: none;
	background: #0b2949;
}

.expert_name {
	font-size: 18px;
	font-weight: 500;
}

.expert_title {
	font-size: 14px;
}



@media only screen and (max-width: 767px) {
	
	.tool_cols .left {
		float: none;
		width: 100%;
	}
	
	.tool_cols .right {
		float: none;
		width: 100%;
		margin: 0 0 5px 0;
	}
	
	.col_head {
		font-size: 16px;
	}
	
}