/* --------- Tablet --------- */

@media not all, not all {
	.footerSprite {
		background-image: url("img/sprites/footer@2x.png");
		background-size: 132px 434px;
	}
}
/* --------- Tablet --------- */
@media all and (max-width:1024px) {
	html, body {
	    z-index: 0 !important;
	    overflow: scroll !important;
	}

	header{ width: 100%; }
	header { padding: 0.5em 20px; }
	header ul.login { right: 20px; }
	.desktop-hide { display: block;}
	.tablet-hide{ display: none; !important}

	.page-header{ min-width: 0; }
	
	footer .site-logo, ul.footer-links { display: none; }
	footer .legal-links { max-width: 100%; position: relative;  top: 0px; text-align: center; }
	footer .legal-links p, footer .legal-links dl { text-align: center; }
	footer .download-app {
		float: none;
		text-align: center;
		margin-top: 1em;
		width: 100%;
		position: static;
	}

	footer dl dd.no-border  { display: inline; border-right: 1px solid #CDCFCF; /* other grey */ padding: 0 5px 0em; }
	footer dl dd:last-child { border-right: none; padding: 0 0 0 5px; }

	.app-store {
		background-image: url("../images/app-store.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.google-play {
		background-image: url("../images/google-play.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
	}	
	
	section.landingGrid { text-align: center; }
    
    .divGrid { text-align: left; }
	
    .adviceContent {
		width:40%;
	    margin-left:7%;
    }
	
    .adviceContentSpacing { margin-right: 0; }

	.centralContent, .centralContentSM { width: 90% }

	.blog { background-position: 0 6px !important; }

    .diy { background-position: 0 -60px !important; } .adviceLink:hover .diy { background-position: 0 -60px !important; }

	.costGuide  {background-position: 0 -347px !important; }

	.reg { background-position: 0 -207px !important; }

    .trade-insight {background-position: 0 -279px !important; }

    .expert {  background-position: 0 -125px !important; } .adviceLink:hover .expert { background-position: 0 -125px !important; }

    .newsletter {  background-position: 0 -1209px !important; }

    .social-media { background-position: 0 -1402px !important; }

    .videos { background-position: 0 -1301px !important; }
	
	#breadcrumb { text-align: left; }
	
	.tradeIconGrid { 
		margin-right: 5px; 
		width: 66%; 
		float: left; }
	
	section.askExportSection { text-align: center; }
	
	.askAnExpertQuestion {
		width: 100%;
		margin: 20px 0;
	}
	.askExpertDescription {
		width: 100%;
		margin: 20px 0;
		padding: 0 15% 0 15%;
		text-align: left;
	}
	
	.carouselControl { display: none;}
	
	#pageFooter div.right {
		width:auto;
		float:right;
	}
	
	.tradeIconGrid, .sideContent {text-align: left;}
	.sideContent h2 {font-size: 14px; }
	.searchIcon { background-position: 0 30px;	}
	.searchIcon:hover { background-position: 0 30px;} 
	.searchButton { 
		text-align: center; 
		padding: 0.4em 0; 
	}
	.pageFooter { text-align: left; }
	.appIcons .right {
		float: right;
		width: auto;
	}
	
	#pageFooter,  #pageFooter small, #pageFooter .right a{ 
		font-size: 10px;
		font-size: 1rem;
	}
		
	#pageFooter dt {
		font-size: 18px;
		font-size: 1.8rem;
	}
	
	#pageFooter dl { width: 21%; }
	
	.socialIcons p, .appIcons p { 
		font-size: 16px;
		font-size: 1.6rem;
		margin-top: 15px !important;
	}
	

	#pageFooter .socialIcons a {
		display:block;
		width:28px !important;
		height:28px !important;
		background-image: url("img/footer-tablet@2x.png");
		background-size: 86px 282px;
		background-repeat: no-repeat;	
	}	

	#pageFooter .socialIcons a.twitter { background-position: 0 -114px; margin-top:3px; height: 23px !important;}
	#pageFooter .socialIcons a.twitter:hover { background-position: 0 -114px; margin-top:3px; height: 23px !important;}
	#pageFooter .socialIcons a.facebook { background-position: 0 0; }
	#pageFooter .socialIcons a.facebook:hover  { background-position: 0 0; }
	#pageFooter .socialIcons a.linkedin { background-position: -0 -57px; }
	#pageFooter .socialIcons a.linkedin:hover  { background-position: 0 -57px; }
	#pageFooter .socialIcons a.googleplus { background-position: -0 -28px; }
	#pageFooter .socialIcons a.googleplus:hover  { background-position: 0 -28px; }
	#pageFooter .socialIcons a.youtube { background-position: -0 -138px; }
	#pageFooter .socialIcons a.youtube:hover  { background-position: 0 -138px; }
	#pageFooter .socialIcons a.pinterest { background-position: -0 -86px; }
	#pageFooter .socialIcons a.pinterest:hover  { background-position: 0 -86px; }

	#pageFooter .appIcons a {
		display:inline-block;
		width:86px;
		height:29px; 
		margin-right:6px;
		background-image: url("img/footer-tablet@2x.png");
		background-repeat: no-repeat;
		background-size: 86px 282px
	}
	
	#pageFooter .appIcons a.itunes { background-position: 0 -225px; }
	#pageFooter .appIcons a.itunes:hover { background-position: 0 -225px; }
	#pageFooter .appIcons a.googleplay { background-position: 0 -167px; }
	#pageFooter .appIcons a.googleplay:hover { background-position: 0 -167px; }
	
	.costGuidesCat {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.costGuidesCatImg  {
		opacity: 1;
		height: 55px;
	}
	
	.sideContent, .tradeIconGrid  {	width: 48%; }
	.costGuidesCatText { display: none;	}
	.tradePictureItem  .diyTitle { background-color: rgba(0, 0, 0, 0.8); }
	.tradePictureItem:hover .diyTitle { text-decoration: none; }
	.tradePictureItem:before { opacity: 1; }
	.postTitle, .more{ padding: 0 !important; }
	.tradePictureItem { opacity: 1; }
	
	#counters_hupso_counters_0 {
		width: 283px;
		height: 52px;
	}
	
	.hupso_email {
		height: 50%;
		margin-left: 79px !important;
	}
	
	.hupso_email, .hupso_print { float: none !important; }
	
	.hupso_print {
		float: none;
		margin-left: 0 !important;
		margin-right: 0;
	}
	.hupso_twitter { height: 60%; }
	
	.videoItemSection { 
		width: 80%;
		text-align: center;
	}
	
	.videoTitleWrapper { margin-top: 30px; }
	
	.youtubePlayer {
		float: left;
		width: 100%;
	}
	
	#player {
		width: 100%;
		height: 250px;
	}
	
	.content66 { width: 50%; }
	.welcomeMessage { display: none; }
	
	.askExportSection .error { float: none; }

	.standardPage { 
		width: 50%;
		text-align: left;
	}
	.standardSidebar h2 { 
		font-size: 26px;
		font-size: 2.6rem;
	}
	footer .centralContent { width: 90%; }
	footer .socialIcons a.twitter { background-position: 0 -175px; }
	footer .socialIcons a.facebook { background-position: 0 0; }
	footer .socialIcons a.linkedin { background-position: 0 -88px; }
	footer .socialIcons a.googleplus { background-position: 0 -44px; }
	footer .socialIcons a.youtube { background-position: 0 -213px; }
	footer .socialIcons a.pinterest { background-position: 0 -132px; }
	footer .appIcons a.itunes { background-position: 0 -346px; }
	footer .appIcons a.googleplay { background-position: 0 -257px; }
	footer dt { font-size: 1.8rem; }


}

/* Header - Custom Breakpoint
   Web view switches to mobile when width constrained */
@media all and (max-width:900px) {
	.pageFooter { text-align: left; }

    .toggle-content,
    .row-certification span
	.form-aside .row-arrow,
    header ul.login li.mobile-hide,
    header nav { display: none; }


    header ul.login.login-main-site, .show .toggle-content { display: block; }

    header { padding-bottom: 0; min-height: 4.98em; }
    header nav { float: none; background: #f0f2f0; margin: 1.2em 0 0; padding: 1em 10px .1em; height: auto; }
    header nav ul { padding-bottom: 0em; margin: 0; height: auto; }
    header nav ul li {float: none; text-align: left; padding-left: 22px;}

    .navigation-bar-mobile header nav ul li { padding-left: 0; }

    header nav ul li a,
    header.homeowner-header nav ul li a,
    header.homeowner-header nav ul li a:hover,
    header.homeowner-header nav ul li.active a,
    header.homeowner-header nav ul li.active a:hover {
        border: 0;
		text-decoration: underline;
		color: #8fa633;
		margin-bottom: 1em;
		font-size: 1.2em;
    }

    header nav ul li a:hover { border: 0; }

    .page-header { padding: 0.3em 0 0; }
    header ul.login { right: 20px; top: 20px }

    header a.mobile-menu {
		position: absolute;
		left: 20px;
		top: 15px;
		background: url('/assets/reskin/images/menu-closed.png') 4px 4px no-repeat;
		width: 18px;
		height: 18px;
		background-size: 18px;
		padding: 13px;
    }

    header a.mobile-menu-open {
		background: url('img/menu-open.png') 8px 8px no-repeat #f0f2f0;
		background-size: 18px;
		width: 18px;
		height: 53px;
		padding: 8px;
    }

	header a.site-logo {
		background: url('/assets/reskin/images/logo-full-mobile@2x.png') no-repeat;
		background-size: 100% 100%;
		display: block;
		max-width: 168px;
		height: 47px;
		width: 100%;
		margin: 3px auto 0;
    }
		
	.headerBanner {
		position: absolute;
		top: 0;
		left: 0;
	}
		
	section.bannerSection { width: 100%; }
	section.mainVideoContent { margin-top: 125px; }  
	.desktop-hide  { display: none; }
	
	.social img { display: none; }
	.socialMedia h2 { margin-left: 15px;  margin-top: 25px;}
	.socialMedia .centralContent p { display: none;  }
	.textSM, .twitter-timeline { width: 81% !important;  margin-right: 0px; }
	.twitter-timeline { margin-top: 36px; }
	.textSM { color: #54585A}
	
	.howItWorks ul li { float: none; padding: 0 0 0 35px; width: 100%;  border-bottom: 1px solid #CDCFCF; margin-bottom: 15px;}
	.howItWorks ul li:last-child { border-bottom: none; }
	.howItWorks , .tmFormMap { width: 470px; }
	.tmFormMap { background: none; }

	.memberBenefitDescription { width: 100% !important; }
}

@media screen and (max-width: 760px) {
	#pageFooter  { text-align: center; }
	
	#pageFooter .mobile-hide { display: none; }
	.mobileIcons a {	margin-top: 15px; }
	.mobileIcons p {
		font-size:10px;
		font-size: 1rem;
		color : #000;
	}
	.mobileIcons { display: block; }
	
	#pageFooter a { font-size: 12px;	}
	#pageFooter .centralContent { width: 100% !important; }
	#pageFooter div.right { width: 100%; }
}

@media all and (max-width: 730px) {
	footer {
		font-size: 1.2rem;
		position: absolute;
	}
	footer .centralContent {
		padding-bottom: 60px;
		width: 90%;
	}
	footer dl { display: none; }
	footer .responsiveFooter, footer .socialIcons {
		border-bottom: 1px solid #cfcdcd;
		margin-bottom: 20px;
		padding-bottom: 20px;
		width: 100%;
	}
	footer .responsiveFooter { display: block; }
	footer .responsiveFooter li { line-height: 25px; }
	footer .appIcons { float: left; }
	footer .appIcons a { margin-left: 0; }
}

 
/* ----- Mobile View ----- */ 
@media screen and (max-width:600px) {

	.tmFormsSidebar { display: none; }
	.socialMedia .centralContent{ padding: 0px 0px 25px 0px; }
	.mobile-hide { display: none; }
	.tablet-hide { display: block; }
	.landingPage .tablet-hide { display: none; }
	.landingPage h2 { margin-top: 10px;}
	.adviceContent {
		width: 100%;
		border-top: 1px solid #CDCFCF;
		box-shadow: 0 5px 50px 1px #F7F7F7;
		margin: 0 !important;
		height: auto;	
	}
	
	.adviceLink {
		height: 64px;
		display: block;
		line-height: 64px;
		position: relative;
	}
	
	.adviceLink article h4 {
		margin: 0;
		
	}
	
	.centralContent { width: 100%; }
	
	.adviceImg {
		width: 38%;
		display: inline-block;
		zoom: 0.6;
		margin-left: 20px;
		background-repeat: no-repeat;
		position: absolute;
		margin-top: -32px;
		top: 50%;
	}
	
	.adviceContent article p { display: none; }
	
	.adviceContent article h4 {
		margin-top: 0;
		float: left;
		line-height: 64px;
		height: 100%;
	}
	
	.adviceContent article {
		height: 100%;
		width: 50%;
		margin-left: 20px;
		display: inline-block;
		border-top: none;
		margin-top: 0;
		position: absolute;
		right:20px
	}
	
	.adviceContent article:after {
		content: '>';
		height: 64px;
		width: 20px;
		margin-top: -32px;
		font-weight: 700;
		font-size: 3.0rem;
		color: #CDCFCF;
		display: inline-block;
		right: 0px;
		top: 50%;
		position: absolute;	
	}
	
	.social-media {
		left: -60px;
		zoom: 0.45;
	}
	
	.social-media + article > h4 { left: 0; }
	
	.textSM, .twitter-timeline { width: 79% !important;  margin-right: 0px; }
	.textSM p { word-break: break-word; }
	
	.getInspired {
		width: 90%;
		height: 100% !important;
		margin-left: 50px;
		margin-right: auto;		
	}
	
	.getInspired img {
		width: 100%;
		height: 50%;
	}
	
	.getInspiredContainer section {height: 450px; }
	.carouselControl { display: none; }
	section.askExportSection { display: none;}
	.mobileBlogContent {display: block; }
	.caroselWrapper { display: none; }
	.getInspiredContainer { text-align: center; }
	body, html { width: 100%; overflow: hidden; }
	#sidebar { display: none; }
	.sideContent { width: 100%;  float: left; }
	.tradeIconGrid { width: 95%; margin-left: auto; margin-right: auto; margin-top: 10px; } 
	.landingGridText { display : none; }
	.grid { margin-top: 10px;}
	.responsiveSearch { display: block; width: 100%; }
	.sideContent form { display: none; }
	.tradeIconItem, .tradePictureItem { margin-right: 5px; }
	.tradeIconGrid { float: none; }
	.mobileYoutube { text-align: left; }
	.getInspired .overlay{ background-size: 100% 100%; width: 100%; }
	article { border-top: none !important; }	
	
	.landingGrid { padding:0; }
		
	.youtubeCarrousel {
		margin-left: 15px;
		margin-top: -10px;
	}

	#breadcrumb {
		width: 100%; 
		display: block;
		text-align: center;
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 40px;
	}
	
	#breadcrumb a {
		text-decoration: none;
		display: block;
		position: relative;	
		height: 100%;
		height: 40px;
		box-shadow: 0 5px 50px 1px #F7F7F7;
		border-bottom: #CDCFCF solid 1px;
	}
	#breadcrumb a:before {
		content: '<';
		height: 40px;
		width: 20px;
		font-weight: 700;
		font-size: 3.0rem;
		color: #CDCFCF;
		display: inline-block;
		left: 15px;		
		top: 50%;
		margin-top: -20px;
		position: absolute;	
	}
	ul#breadcrumb li {
		float: none;
		display: none;
	}
	ul#breadcrumb li:nth-last-child(2) { display: block; }
	ul#breadcrumb li:after { display: none !important; }
	
	.videoTitleWrapper { margin-top: 0;}
	.videoItemSection { width: 100%; }
	
	#player { 
		height: 180px; 
		border-top: 1px solid #CDCFCF; 
		border-bottom: 1px solid #CDCFCF;
	}
	
	.content66  {
		width: 100%;
		text-align: center;
	}
	
	.playlists { text-align: center; }
	.videoDesc , .bannerSection, .sideContentm, .playlistControl { display: none; }
	
	section.mainVideoContent { 
		margin-top: 0; 
		padding: 0; 
		display: inline-block; 
	}
	
	.caroselWrapper { display: block; }
	
	.videoTitle {
		font-size: 20px;
		font-size: 2.0rem;
		color: #54585A;
	}
	
	h2.greenHeader { color: #54585A; }
	
	.playlistItem, .feedItem { 
		width: 100%;
		margin: 0;
		border-top: 1px solid #CDCFCF;
		border-bottom: 1px solid #CDCFCF;
		margin-bottom: 5px;
		text-align: left;
	}
	
	.playlistItem img, .feedItem img {
		display: inline-block;
		float: left;
		width: 50%;
		height: 110px;
		max-width: 180px;
	}
	
	.playlistItem p, .playlistItem span, .feedItem p, .feedItem span {
		color: #54585A;
		font-size: 12px;
		font-size: 1.2rem;
		padding: 10px;
		display: inline-block;
		width: 50%;
		height: 72px;
	}
	
	.playlistCarousel {
		padding: 0;
		display:inline;
	}
	
	.playlistCarousel h3 {
		padding: 10px;
		margin: 5px 0 5px;
	}
	
	.breadcrumbSection { padding: 0; }	
	.mainVideoContent h2 { padding: 10px; }
	.playlists { text-align: left; }
	#breadcrumb { margin-bottom: 0; }
	.contentWide { border-bottom: none; }
	.tmpage .contentWide{ border-bottom: 1px solid #CDCFCF; }
	.howItWorks { margin: 0 10px;}
	.tmFormMap{ margin: 0 12px;}
	.howItWorks  ul li { width: 95% !important; }
	.youtubePlayer { border:none; }
	.subscribeButton { margin-top: 14px; }
	.videoTabs a { width: 49%; }
	.playlistTab { margin-left: 0; }
	section.breadcrumbSection { padding: 0; }
	.carousel .playlistItem:last-of-type { margin-bottom: 0; }

	.standardPage { 
		width: 100%;
		padding: 10px;
	}

	.standardSidebar h2 { font-size: initial; }

	.webGains {
		background-size: 60%;
		height: 85px;
	}
	
	.affiliateLogos {
		background-size: auto;
	}


	.standardFullPage { 
		width: 100%;
		padding: 10px;
	}
	.memberBenefitBox {
		width:  auto !important;
		float: none;
	}
	.memberBenefitDescription img { display: none; }
} 

@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {

    header a.site-logo {
        background-image: url('/assets/reskin/images/logo-full-mobile@2x.png');
        background-size: 168px 47px !important;
    }
	.spriteImgHQ {
		background-image: url('img/AT-sprite@2x.png');
		background-size: 300px 1510px !important;	
	}
	
	.costGuidesIconSprite {
		background-image: url('img/plusminusround@2x.png');
		background-size: 23px 39px !important;
	}
	
	.tradePictureSprite {
		background-image: url('img/DIY-sprite@2x.png');
		background-size: 480px 675px !important;
	}
	
	.tradeIconItem:before {
		background-image: url('img/Icons-MEDIUM@2x.png');
		background-size: 1483px 858px !important;
	}
}