/*
    Responsive style overrides.
    Following breakpoints override styles defined in the base style sheet.
    Additional styles can also be added based on teh defined breakpoint.   
*/


/* Smaller desktop resolutions */
@media only screen and (min-width:1101px) and (max-width:1170px) {
   .relatedArticles .sliderContainer .center .slider .item .data {width:185px;}
   .relatedProducts .sliderContainer .center .slider .item .data {width:130px;margin:0 25px 0 0;}
   .homepage .hpMarketplace .item {margin:10px 20px;}
   .videos .dataItem .container {margin:0 15px 40px;}
}




/* Various phones and tablets */
@media only screen and (min-width:961px) and (max-width:1100px) {
    .header .logo img {width:150px;}
    .header .headerCallout {left:190px;}
    .header .headerCallout img {max-height:initial;width:350px;height:auto;}
    .header .login {right:225px;}
    .header .welcomeBack {right:230px;}
    .header .socials {right:250px;}
    .headerContainer {height:120px;}
    .header {height:120px;}
    .header .currentIssue img {width:80px;}
    .sidebarGallery .sidebarGallerySlider .sliderContainer .center .slider .item .data {width:210px;}
    .sidebarGallery .sidebarGallerySlider .sliderContainer .center .slider .item .data .thumbnail {height:150px;}
    .footer a {font-size:17px;}
    .footer .navitems {width:65%;}
    .footer .logo img {width:150px;}
    .footer .offers {width:35%;}
    .adZone {padding:0;}
    .navhover.howtoSwatch .inner .item .thumb {margin-right:20px;width:150px;}
    .navhover.subscriberExtrasSwatch .inner .item.last {display:none;}
    .navhover.subscriberExtrasSwatch .inner .item.topics {border-right:none;}
    .navhover.shopSwatch .ddProducts .product {width:100px;margin-right:20px;}
    .navhover.shopSwatch .ddIssue img {width:100px;}
    .navhover.shopSwatch .ddOffers .first {font-size:15px;}
    .navhover.shopSwatch .ddOffers {font-size:13px;}
    .article .articleGallery .photo .container {height:500px;}
    .homepage .hpMarketplace .item {margin:10px 7px;}
    .homepage .hpSlider .data .title {font-size:20px;line-height:22px;}
    .homepage .hpSlider .data .caption {margin:5px 5% 0 0;font-size:15px;line-height:19px;font-weight:400;}
    .videos .dataItem .container {width:175px;margin:0 12px 40px;}
    .videos .dataItem .container .thumbnail {width:173px;height:120px;}
}




/* iPhone landscape */
@media only screen and (min-width:820px) and (max-width:960px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .logo img {width:150px;}
    .header .headerCallout {left:170px;}
    .header .headerCallout img {max-height:initial;width:350px;height:auto;}
    .header .login {right:225px;}
    .header .welcomeBack {right:230px;}
    .header .socials {right:250px;}
    .headerContainer {height:120px;}
    .header {height:120px;}
    .header .currentIssue img {width:80px;}
    .navbar .primary ul li a:link, .navbar ul li a:visited {font-size:16px;line-height:20px;}
    .footer a {font-size:17px;}
    .footer .navitems {width:65%;}
    .footer .logo img {width:150px;}
    .footer .offers {width:35%;}
    .relatedArticles .sliderContainer .center .slider .item .data {width:180px;}
    .relatedProducts .sliderContainer .center .slider .item .data {width:135px;}
    .videos .dataItem .container {margin:0 30px 40px;}

    .newsletterBox,
    .sidebarSubscriberContent,
    .adZone,
    .sidebarMagazine,
    .sidebarGallery
    {width:60%;display:inline-block;}
    .adZone.leader {width:100%;display:block;}
}




/* median phone resolutions */
@media only screen and (min-width:651px) and (max-width:819px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .headerCallout {display:none;}
    .headerContainer {height:120px;}
    .header {height:120px;}
    .header .currentIssue img {width:80px;}
    .navbar .primary ul li a:link, .navbar ul li a:visited {font-size:14px;line-height:20px;padding:15px 10px 0 10px;}
    .footer a {font-size:14px;}
    .footer .navitems {width:60%;}
    .footer .logo img {width:100px;}
    .footer .offers {width:40%;}
    .footer .floater {margin:0 20px 0 0;}
    .trustedSites .logo {display:none;}
    .trustedSites .links {width:100%;}

    .newsletterBox,
    .sidebarSubscriberContent,
    .adZone,
    .sidebarMagazine,
    .sidebarGallery
    {width:70%;display:inline-block;}
    .adZone.leader {width:100%;display:block;}
}




/* iPhone portrait */
@media only screen and (min-width:601px) and (max-width:650px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .headerCallout {display:none;}
    .header .login {display:none;}
    .header .welcomeBack {display:none;}
    .header .currentIssue img {width:80px;}
    .navbar .primary {display:none;}
    .navbar .mobile {display:inline;}
    .sidebarGallery .sidebarGallerySlider .sliderContainer .center .slider .item .data {width:350px;}
    .sidebarGallery .sidebarGallerySlider .sliderContainer .center .slider .item .data .thumbnail {height:225px;}
    .trustedSites .logo {display:none;}
    .trustedSites .links {width:100%;}
    .footer a {font-size:15px;}
    .footer .navitems {float:left;width:100%;}
    .footer .logo img {width:190px;height:auto;}
    .footer .offers {float:left;width:30%;display:none;}
    .footer .offers ul {margin:0 0 0 20px;}
    .footer .floater {margin:0 30px 0 0;}
    .footer .floater ul {padding:0 0 0 20px;}
    .article .articleGallery .photo .container {height:450px;}
    .section .dataItem .shareIcons {display:none;}
    .homepage .hpSlider .data .title {font-size:20px;line-height:22px;}
    .homepage .hpSlider .data .caption {margin:5px 5% 0 0;font-size:15px;line-height:19px;font-weight:400;}
    .homepage .splitColumns {display:none;}
}




/* small phone resolutions */
@media only screen and (min-width:451px) and (max-width:600px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .headerCallout {display:none;}
    .header .login {display:none;}
    .header .welcomeBack {display:none;}
    .header .socials {position:absolute;right:auto;left:230px;bottom:10px;}
    .header .currentIssue img {width:80px;}
    .navbar .primary {display:none;}
    .navbar .mobile {display:inline;}
    .sidebarGallery .sidebarGallerySlider .sliderContainer .center .slider .item .data {width:350px;}
    .sidebarGallery .sidebarGallerySlider .sliderContainer .center .slider .item .data .thumbnail {height:225px;}
    .trustedSites .logo {display:none;}
    .trustedSites .links {width:100%;}
    .footer a {font-size:15px;}
    .footer .navitems {float:left;width:100%;}
    .footer .logo img {width:190px;height:auto;}
    .footer .offers {float:left;width:30%;display:none;}
    .footer .offers ul {margin:0 0 0 20px;}
    .footer .floater {margin:0 30px 0 0;}
    .footer .floater ul {padding:0 0 0 20px;}
    .article .articleGallery .photo .container {height:450px;}
    .relatedProducts .sliderContainer .center .slider .item .data {width:130px;margin:0 25px 0 0;}
    .section .dataItem .shareIcons {display:none;}
    .homepage .hpSlider .data .title {font-size:20px;line-height:19px;}
    .homepage .hpSlider .data .caption {margin:5px 5% 0 0;font-size:15px;line-height:19px;font-weight:400;}
    .homepage .splitColumns {display:none;}
}




/* all mobile devices below 450 */
@media handheld, only screen and (max-width:450px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .socials {display:none;}
    .header .currentIssue {display:none;}
    .header .headerCallout {display:none;}
    .header .login {display:none;}
    .header .welcomeBack {display:none;}
    .header .socials {position:absolute;right:auto;left:230px;bottom:10px;}
    .navbar .primary {display:none;}
    .navbar .mobile {display:inline;}
    .sidebarGallery .sidebarGallerySlider .sliderContainer .center .slider .item .data {width:250px;}
    .sidebarGallery .sidebarGallerySlider .sliderContainer .center .slider .item .data .thumbnail {height:180px;}
    .trustedSites .logo {display:none;}
    .trustedSites .links {width:100%;}
    .adZone {padding:0;background:none;}
    .footer a {font-size:15px;}
    .footer .navitems {float:none;width:100%;}
    .footer .navitems .logo {margin:0 0 10px 0;}
    .footer .logo img {width:190px;height:auto;}
    .footer .offers {display:none;}
    .footer .floater {float:none;margin:0;}
    .footer .floater ul {padding:0;border-left:none;}
    .footer .floater ul li {line-height:20px;}
    .footer .newsletter .form {margin:5px 0 0 0;}
    .footer .newsletter .form input {width:200px;}
    .footer .newsletter .form .social {display:none;}
    .searchModal h3 {font-size:19px;}
    .shareIcons {display:none;}
    .breadcrumbs {display:none;}
    h1 {font-size:26px;line-height:30px;}
    .article .segment .mediaContainer {padding:0;}
    .article .segment .mediaRight {float:none;margin:0;width:100%;}
    .article .segment .mediaLeft {float:none;margin:0;width:100%;}
    .article .articleGallery .photo .container {height:300px;}
    .payWall .subscribe .currentIssue {display:none;}
    .payWall .subscribe .content {float:none;width:100%;}
    .searchFilter .filter .section {width:100%;float:none;margin:0 0 20px 0;}
    .searchFilter .filter .section.half {width:100%;float:none;}
    .searchFilter .filter .section.half.left {margin-right:0;}
    .searchFilter .filter .section.half.right {margin-left:0;}
    .searchFilter .filter .actions {padding:0 0 40px 0;}
    .section .dataItem .content.withImage {width:100%;float:none;}
    .section .dataItem .thumbnail {width:99%;margin:0 0 5px 0;float:none;}
    .section .dataItem .snippet {display:none;}
    .section .dataItem .byline {display:none;}
    .searchFilter .elements .keywords {float:left;width:50%;}
    .searchFilter .elements .keywords input {width:70%;}
    .searchFilter .elements .tagging {float:right;width:46%;text-align:right;}
    .homepage .hpSlider .data .title {font-size:15px;line-height:10px;}
    .homepage .hpSlider .data .caption {font-size:11px;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .homepage .splitColumns {display:none;}
    .homepage .hpMarketplace {margin:20px 0 0 0;text-align:center;}
    .homepage .hpMarketplace .item {float:none;}
    .videos .dataItem .container {width:140px;margin:0 10px 40px;}
    .videos .dataItem .container .thumbnail {width:138px;height:100px;border:1px solid #ccc;background:#000;background-position:center;background-repeat:no-repeat;margin:0 0 7px 0;position:relative;}
    .article .commentcounts .data span {font-size:12px;}
}