@media all and (min-width: 769px)
{
    /*#region Wrappers */

    .outer-nav
    {
        position: relative;
        z-index: 2;
    }

    .outer-page
    {
        position: relative;
        z-index: 1;
    }

    /*#endregion*/

    /*#region Tooltips */
    .tooltip:hover .tooltip-text, .tooltip:focus .tooltip-text
    {
        clip: auto;
        height: auto;
        margin-top: 10px;
        margin-left: 3px;
        overflow: visible;
        position: absolute;
        top: 64%;
        left: 50%;
        width: auto;
        white-space: nowrap;
        color: #fff;
        background-color: #33414f;
        font-size: 0.9em;
        padding: 5px 8px;
    }

    .tooltip:hover .tooltip-text:before, .tooltip:focus .tooltip-text:before
    {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 4px;
        border-style: solid;
        border-color: transparent transparent #33414f;
    }

    .tooltip-left:hover .tooltip-text
    {
        left: 0;
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .tooltip-left:hover .tooltip-text:before
    {
        left: 10px;
        margin-left: 0;
    }

    .tooltip-right:hover .tooltip-text
    {
        left: auto;
        right: 0;
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .tooltip-right:hover .tooltip-text:before
    {
        right: 5px;
        left: auto;
        margin-left: 0;
    }

    /*#endregion*/

    /*#region Header */

    .header-search .search-field:focus
    {
        width: calc(100% - 50px);
        height: 94px;
        top: 0;
        right: 10px;
        margin-top: 0;
        z-index: 3;
        color: #17a4ad;
        font-size: 3em;
        line-height: 94px;
        background-color: #fff;
    }

    /*#endregion*/

}

@media all and (max-width: 768px)
{

    .nopaddingmobile
    {
        padding: 0;
    }

    .nomarginmobile
    {
        margin: 0;
    }

    /*#region Push Menus */

    body
    {
        position: relative;
        left: 0;
        -webkit-transition: all 0.7s ease;
        -moz-transition: all 0.7s ease;
        transition: all 0.7s ease;
        -webkit-box-shadow: 0 3px 3px 3px rgba(0,0,0,0.05);
        box-shadow: 0 3px 3px 3px rgba(0,0,0,0.05);
    }

    .outer-page
    {
        position: relative;
        z-index: 2;
        min-height: 0;
    }

    .outer-wrapper-header
    {
        z-index: 2;
        position: relative;
        background-color: #5f6b73;
    }

    .outer-wrapper-usp
    {
        display: none;
    }

    .outer-wrapper-preheader, .outer-wrapper.row-menu-holder
    {
        width: 280px;
        height: 100%;
        display: block;
        overflow-y: auto;
        position: fixed;
        top: 0;
        z-index: 1;
        -webkit-transition: left 0.7s ease, right 0.7s ease;
        -moz-transition: left 0.7s ease, right 0.7s ease;
        transition: left 0.7s ease, right 0.7s ease;
    }

    .outer-wrapper.row-menu-holder
    {
        left: -150px;
        right: auto;
        background-color: #33414f;
        color: #fff;
    }

    .outer-wrapper-preheader
    {
        left: auto;
        right: -150px;
        background-color: #fff;
        background-image: none;
        color: #33414f;
    }

    .pushmenu-toright
    {
        left: 280px;
    }

    .pushmenu-toleft
    {
        left: -280px;
    }

    .pushmenu-toleft .outer-wrapper.row-menu-holder
    {
        right: auto;
        left: -280px;
    }

    .pushmenu-toright .outer-wrapper.row-menu-holder
    {
        right: auto;
        left: 0;
    }

    .pushmenu-toleft .outer-wrapper-preheader
    {
        left: auto;
        right: 0;
    }

    .pushmenu-toright .outer-wrapper-preheader
    {
        left: auto;
        right: -280px;
    }

    /*#endregion*/

    /*#region Wrappers */
    .outer-wrapper-header
    {
        background-color: #5f6b73;
    }

    .inner-wrapper, .row, .row-menu
    {
        width: 100%;
        margin: 0;
    }

    .outer-wrapper-content, .row-group, .row
    {
        padding: 0;
    }

    .outer-wrapper-content
    {
        padding-bottom: 40px;
        overflow:hidden;
    }

    .inner-wrapper .row header
    {
        padding: 0;
    }

    /*#endregion*/

    /*#region Header */

    .preheader
    {
        padding: 0;
    }

    .preheader-links-left {
        display: none;
    }

    .preheader-links {
        width: 100%;
    }
    
    .preheader-links > li {
        width: 100%;
        display: block;
        margin: 0;
    }
    .preheader-links > li:last-child:after
    {
        display: none;
    }

    .preheader-links > li:hover > a
    {
        background-color: #5f6b73;
        color: #fff;
    }

    .preheader-link-login, .preheader-link-register, .preheader-link-my-account
    {
        display: none;
    }

    .preheader-link-cart
    {
        height: 51px;
        padding: 12px 15px 0;
    }

    .preheader-link-title
    {
        float: left;
    }

    .preheader-link-qty
    {
        float: right;
    }

    .preheader-link-cart:before
    {
        display: none;
    }

    .preheader-dropdown
    {
        width: 100%;
        position: relative;
        visibility: visible;
        opacity: 1;
        display: block;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .preheader-dropdown-login
    {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        padding: 80px 40px;
        height: calc(100% - 140px);
        background-color: transparent;
    }

    .preheader-login-title
    {
        color: #fff;
        font-size: 2em;
        margin-bottom: 20px;
    }

    .preheader-login-title:before
    {
        border-color: #fff;
        background-image: url(/images/template/icon-login-w.svg);
    }

    .preheader-login-forgotten, .preheader-login-forgotten:visited, .preheader-login-forgotten:hover
    {
        color: #fff;
    }

    .preheader-login-forgotten:hover
    {
        text-decoration: none;
    }

    .preheader-login-field[type=text], .preheader-login-field[type=password]
    {
        color: #fff;
        padding-left: 40px;
        background-color: rgba(51,65,79,0.2);
        background-position: left 15px center;
        background-repeat: no-repeat;
    }

    .preheader-login-field[type=text]
    {
        background-image: url(/images/template/icon-user-w.svg);
    }

    .preheader-login-field[type=password]
    {
        background-image: url(/images/template/icon-lock-w.svg);
    }

    .preheader-login-field[type=text]:focus, .preheader-login-field[type=password]:focus
    {
        background-color: rgba(51,65,79,0.5);
    }

    .preheader-login-field::-webkit-input-placeholder
    {
        color: #fff;
    }

    .preheader-login-field:-moz-placeholder
    {
        color: #fff;
    }

    .preheader-login-field::-moz-placeholder
    {
        color: #fff;
    }

    .preheader-login-field:-ms-input-placeholder
    {
        color: #fff;
    }

    .show-login
    {
        overflow: hidden;
    }

    .show-login .outer-wrapper-preheader
    {
        width: 100%;
        overflow: auto;
        z-index: 3;
        top: 0;
        right: auto;
        left: 0;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url(/images/template/bg-login-mobile.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }

    .show-login .outer-wrapper-header
    {
        z-index: 4;
        position: relative;
    }

    .show-login .preheader-links li
    {
        overflow-x: hidden;
    }

    .show-login .preheader-dropdown-login
    {
        position: relative;
        opacity: 1;
        width: 100%;
        z-index: 9999;
    }

    .show-login .preheader-link-cart, .show-login .preheader-dropdown-cart
    {
        display: none;
    }

    .toggle-login.active .fa
    {
        display: none;
    }

    .quicknav-link .active
    {
        color: #516476;
    }

    .preheader-cart-qty
    {
        top: auto;
        margin-left: 0;
        font-size: 0.9em;
        padding: 4px 5px 3px;
    }

    .outer-wrapper-header
    {
        position: relative;
    }

    .header
    {
        margin-top: -50px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .header-showsearch
    {
        margin-top: 0;
    }

    .header-search
    {
        margin-top: -50px;
        width: 100%;
        float: none;
        margin: 0;
        height: 50px;
    }

    .header-search .search-field
    {
        position: relative;
        top: auto;
        right: auto;
        height: 50px;
        width: calc(100% - 78px);
        margin-top: 0;
        background-color: #fff;
        font-size: 2em;
        line-height: 2em;
    }

    .search-field:focus, .search-field[type=search]:focus
    {
        color: #17a4ad;
    }

    .search-field::-webkit-input-placeholder
    {
        color: #e0e2e3;
    }

    .search-field:-moz-placeholder
    {
        color: #e0e2e3;
    }

    .search-field::-moz-placeholder
    {
        color: #e0e2e3;
    }

    .search-field:-ms-input-placeholder
    {
        color: #e0e2e3;
    }

    /*.search-submit
    {
        background-color: #fff;
        width: 50px;
        line-height: 35px;
    }

    .search-submit:before
    {
        color: #e0e2e3;
    }

    .search-submit:hover:before, .search-submit:focus:before
    {
        color: #fff;
    }*/

    .quicknav
    {
        width: 100%;
        display: block;
        text-align: center;
        padding: 0 10px;
    }

    .header-logo img
    {
        max-height: 30px;
        width: auto;
    }

    .header-logo
    {
        padding: 10px 0;
    }

    .quicknav-link-menu, .quicknav-link-search, .quicknav-link-login, .quicknav-link-cart
    {
        display: block !important;
        font-size: 1.5em;
    }

    .quicknav-link a
    {
        color: #fff;
        text-align: center;
    }
    .quicknav-link-menu a, .quicknav-link-search a, .quicknav-link-login a, .quicknav-link-cart a
    {
        line-height: 50px;
        display: block;
        width: 30px;
        height: 50px;
    }

    .quicknav-link-menu, .quicknav-link-search
    {
        float: left;
    }

    .main-menu-items .main-menu-sub {
        top: 0%;
    }

    .quicknav-link-login, .quicknav-link-cart {
        float: right;
    }

    /*#endregion*/

    /*#region Footer */

    .footer-signup
    {
        width: 50%;
        padding-right: 5%;
    }

    .footer .signup-submit
    {
        width: 100%;
    }

    .footer-links-primary
    {
        width: 20%;
    }

    .footer-links-secondary
    {
        width: 30%;
    }

    .footer-address
    {
        width: 100%;
        text-align: left;
    }

    .footer-address address
    {
        margin: 0;
    }

    /*#endregion*/

    /*#region Carousels/Banners */


    .outer-wrapper-banner-large
    {
        height: 500px;
    }

    .outer-wrapper-banner .col
    {
        padding-left: 30px;
        padding-right: 30px;
    }

    .banner-copy
    {
        text-align: left;
    }

    .banner-title, .banner-availability
    {
        width: 100%;
    }

    .banner-media
    {
        top: auto;
        bottom: -45%;
        width: 80%;
        right: 0;
        pointer-events: none;
        -moz-transform: scale(0.7);
        -webkit-transform: scale(0.7);
        -o-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7);
    }

    .banner-medium-traditional
    {
        left: auto;
        right: 60%;
    }

    .banner-medium-digital
    {
        left: 30%;
    }

    .carousel-nav
    {
        display: none !important;
    }

    /*#endregion*/

    /*#region Content */

    /*#region Tables */

    .promotioncode
    {
        width: 100%;
        margin-bottom: 20px;
    }
    .basket-detail-end
    {
        float: right;
        width: 50%;
        margin-right: 0;
    }

    /*#endregion*/

    /*#region Breadcrumbs */

    .col-breadcrumbs
    {
        display: none;
    }

    /*#endregion*/




    /*#region Home */

	.productitem-image 
	{
		height: 0;
		padding-bottom: 130%;
		position: relative;
		overflow:hidden;
	}
	
	.productitem-image img
	{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:1;
		height:100%;
	}

    /*#endregion*/

    /*#region Product Detail */

    .col-productnav
    {
        width: 100%;
    }

    .productnav
    {
        float: none;
        width: 100%;
        text-align: center;
    }

    .productnav li
    {
        width: 33%;
        margin: 0;
        float: left;
    }

    .productnav li a
    {
        display: block;
    }

    
    
    .product-backissueslist li
    {
    	width:22.6666%;
    }
	.product-backissueslist li:nth-child(4n + 1)
    {
        margin-left: 0!important;
    }
    .product-related > li
    {
        margin: 0 0 5% 5%;
        width: 30%;
    }
	
    .product-related > li:nth-of-type(3n + 1)
    {
        margin-left: 0;
    }

    .subscription-detail, .subscription-cta
    {
        float: right;
        width: 60%;
    }

    .subscription-cta .button
    {
        float: none;
    }

    .subscription-price
    {
        float: left;
        width: 40%;
        font-size: 2em;
    }

    /*#endregion*/

    /*#region Product List/Category */

    .productlist li, .row-categorylist .productlist li
    {
        width: 47.5%;
        margin-left: 5%;
    }

    .productlist li:nth-of-type(3n + 1), .row-categorylist .productlist li:nth-of-type(3n + 1)
    {
        margin-left: 5%;
    }

    .productlist li:nth-of-type(2n + 1), .row-categorylist .productlist li:nth-of-type(2n + 1)
    {
        margin-left: 0;
    }

    .row-home .productlist li:nth-of-type(n + 3)
    {
        margin-top: 30px;
    }

    /*#endregion*/

    /*#region [page or template name] */



    /*#endregion*/

    /*#endregion*/

    /*#region Font Changes */


    /*#endregion*/

    .col-half
    {
        width: 100%;
    }
}