/*  -------Responsive Structure ---- */
#Catalysts_Common {
background-repeat: no-repeat;
background-position: left top;
background-image: url('../../../../wp-content/uploads/2017/03/nomore-404A-solstice-n40-banner-1.jpg');
}
#product_hero_info_windows {
background-image: url("../../../../wp-content/uploads/2017/03/slider_bg_windows.png");
color: #FFF;
float: left;
}

.btn-grey{
 font-size: 11px;
    line-height: 30px;
    font-weight: 700;
    color: #335c85;
    height: 30px;
    padding: 0 7px;
    text-transform: uppercase;
    background-color: #f3f3f3;
	border-bottom: 1px solid #c6c6c6;
	border-right: 1px solid #c6c6c6;
	border-radius: 3px;
	display: inline-block;
	text-align:center;
text-decoration:none;
}
a.btn-grey:visited,a.btn-grey:hover{text-decoration:none;}

@mixin aspect-ratio($width, $height) {
    position: relative;
    &:before{
        display: block;
        content: " ";
        width: 100%;
        margin-top: ($height / $width) * 100%;
    }

    > .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.sixteen-nine {
  @include aspect-ratio(16,9);  
}


    
	
	
@media (max-width: 767px) {
	#product_hero_info_windows{
		width:100%;
		margin-top: 33%;
		background-size: 100%;
		clear:both;
	}
	
}
@media (min-width: 768px) and (max-width: 800px) {
	#product_hero_info_windows{
		width: 290px;
		float: right;
		margin-top: 3px;
		height: 237px;
	}
}
@media (max-width: 768px) {
	
	#Catalysts_Common {
		width:100%;
		background-size: 100%;
		display: inline-block;		
		@include aspect-ratio(235,723);
		margin-bottom: 0px;
	}
	/*#product_hero_info_windows{
		width:100%;
		margin-top: 33%;
		background-size: 100%;
		clear:both;
	}*/
	#product_hero_info_windows p,#product_hero_info_windows h3{padding:5px 10px;}
	.down-info{
		float: right; 
		width: 100%;
		margin-top:10px;
	}
	.btn-grey{width:170px;}
	.switch-diag{
		width:100%;
	}
	#Catalysts_Common1{
		margin-top:10px;
	}
	.tim-for-auto-content{float: right;width: 100%;margin-top:5px;clear: both;text-align:center;}
	.tim-for-auto-infographic-image{float: left; width: 100%;}
	.tim-for-auto-content-left,.tim-for-auto-content-right{float: left;width:50%;}
	.tim-for-auto-content-left{text-align:right;}
	.tim-for-auto-content-right{text-align:left;}
	.tim-for-auto-content-left a{margin-right:20px;display:inline-block;}
	.tim-for-auto-content-right a{margin-left:20px;display:inline-block;}
}
@media (min-width: 960px) {
	#Catalysts_Common {
		height: 235px;
		width: 960px;		
		margin-bottom: 30px;
		
	}
	#product_hero_info_windows{
		margin-left:403px;
		width: 290px;
		height: 198px;
		padding: 0px 20px 0 10px;
		margin-top:9px;
	}
	.down-info{
		float: right; width: 20%;margin-top:83px;
	}
	.btn-grey{width:90%;}
	.switch-diag{
		width:725px;height:344px;
	}	
	#Catalysts_Common1{
		height: 350px;
		margin-top:10px;
	}
	.tim-for-auto-content{float: right;width: 23%;margin-top:25px;}
	.tim-for-auto-infographic-image{float: left; width: 77%;}
	.tim-for-auto-content-left{float: left;width:40%;}
	.tim-for-auto-content-right{float: left;width:60%;}
}
