/* iPhone till 4s */
/* iPhone 5, 5s */
@media (max-width: 767px) and (min-width: 320px) and (orientation: landscape) {
    #footer h4 a, #footer h4 a:hover {
        line-height: 11px !important;
    }
 	.side-nav-items li a:after {
        right: 9.3% !important;
       }
}
/*Tablet Portrait specific styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	.swiper-slide.swiper-slide-prev,
    .swiper-slide.swiper-slide-next {
        opacity: 1 !important;
    }
    .swiper-slide img {
        width: 30%;
    }
    .swiper-slide {
        width: auto !important;
    }
	.emptydiv-height{
		display:none;
	}
	.navigation-item button{
		margin-right: 2.5% !important;		
	}    
	.side-nav-items li a:after{
		right: 5% !important;
	}
	
	.ui-dialog.searchdialog .search-overlay.ui-dialog-content {
	    top: -50px;
        padding: 0 25%;
	}
	
	.explore-image .imgcontainer:hover img {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        -webkit-transition: none;
        transition: none;
    }
    
    /*.explore-image .imgcontainer {
    -webkit-filter: brightness(45%);
    filter: brightness(45%);
    }*/
}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
    .navigation-item button {
        margin-right: 3%;
    }
    
    .explore-image img:hover {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        -webkit-transition: none;
        transition: none;
    }
    
    /*.explore-image .imgcontainer {
    -webkit-filter: brightness(45%);
    filter: brightness(45%);
    }*/
}

/* Tablet */
@media screen and (max-width: 1129px) and (min-width: 768px) {
    .main-navigation > .wrapper {
        width: 100%;
    }
    .product-dropdown .wrapper {
        width: 100%;
    }
    #homepage-slider {
        margin-top: -80px;
    }
    .addIndex {
        z-index: 10000;
    }

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1129px) {
    .explore-image .imageone {
        width: 100%;
    }
    .explore-image .imagetwo, .explore-image .imagethree {
        width: 50%;
    }
    .closeBar {
        right: 0;
    }
    .beats-logo {
        position: absolute;
        top: 14px;
        left: 0;
        z-index: 9999;
    }
    .search-menu {
        position: absolute;
        left: auto;
        right: 25px;
    }
    .headache-bar > .wrapper,
    .header-newsletter > .wrapper,
    .main-navigation > .wrapper {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
    }
    .main-navigation > .wrapper {
        position: relative;
    }
    .navigation-list {
        width: 70%;
    }
    .navigation-item {
        box-sizing: border-box;
    }
    .touch .product-dropdown {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 80px;
        z-index: 3;
        background-color: #fff;
    }
    .touch .is-expanded .product-dropdown {
        display: block;
    }
    .touch .nav-title a {
        color: #FFF;
    }
  
    .explore-image .imageone img {
        /*height: 100%;*/
        width: 100%;
        margin-left: 0%;
    }
    .explore-image img {
        width: auto;
        text-align: center;
        background-color: #000;
    }
    .touch .navigation-item.is-expanded .nav-title a::after {
        content: '';
        display: block;
        background: url(../images/sprite.png) -250px -51px no-repeat;
        position: absolute;
        top: 25px;
        left: 0;
        right: 0;
        height: 6px;
        width: 11px;
        margin: 0 auto;
    }
    .product-dropdown .wrapper {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
    }
    .closenavtab {
        width: 25px;
        height: 25px;
        float: right;
        position: relative;
        top: 6px;
    }
    .closenavtab:before {
        content: '';
        height: 15px;
        width: 15px;
        position: absolute;
        top: 5px;
        right: 5px;
        background: url("../images/sprite.png") no-repeat scroll -116px -1295.5px;
    }

}

/* Mobile only not Tab portrait */
@media (min-width: 320px) and (max-width: 767px) {
    #footer ul ul li a {
        padding-left: 40px;
    }
    .collapsible-menu li {
        border-bottom: none;
    }
    #footer h4 a, #footer h4 a:hover {
        padding-left: 20px;
        font-size: 17px;
        line-height: 32px;
        height: 54px;
        letter-spacing: 1.5px;
        font-weight: normal;
    }
    .collapsible-menu li a.trigger {
        background: #000 url(../images/mobile/menu-closed.png) 93% 53% no-repeat;
    }

}

/* Mobile all & Tablet Portrait */
@media (min-width: 320px) and (max-width: 768px) {
	.Beats-prod-img{
		background-size: 120px 136px !important;
		width: 120px;
		height: 125px; /* 240x272 */
	}
	.next-arrow, .prev-arrow {
        opacity: 0;
    }
    #wrapper #main {
        margin-top: 50px;
        z-index: 1;
    }
    .swiper-slide img {
        width: auto;
        margin-top: -6px;
        height: 132px;
     /* margin-right:22px; */
    }
    .search-icon {
  	    background: url(../images/mobile/menu.png) -285px -50px no-repeat scroll;
	    height: 50px;
    }
    .main-navigation {
        margin-bottom: 0px;
    }
    .main-navigation nav {
        margin-top: 0px;
        height: 50px;
    }
    .main-navigation nav.mainnav-open {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        height: auto;
        z-index: 4;
        float: left;
        width: 100%;
        display: block;
    }
    .main-navigation.togglemargin {
        margin-bottom: 0;
    }
    .closeBar {
        right: 2%;
    }
    .beats-logo {
        vertical-align: middle;
        left: 0;
        top: -2.5px;
        height: 32px;
        width: 32px;
        background-size: 32px;
    }
    .headache-bar {
        padding: 0 20px;
    }
    .navigation-toggle {
        display: block;
        position: absolute;
        float: left;
        height: 50px;
        line-height: 50px;
        background-color: transparent;
        background-image: none;
        border-right: 1px solid #252525;
        padding: 0 20px;
        z-index: 15;
    }
    .navigation-toggle.is-expanded {
        background-color: #333333;
        width: 63px;
        padding: 0 26px;
    }
    .navigation-toggle.is-expanded .icon-bar {
        background: url("../images/sprite.png") no-repeat scroll -117px -1310px;
        height: 14px;
        width: 14px;
    }
    .navigation-toggle.is-expanded .icon-bar + .icon-bar {
        display: none;
    }
    .touch #main.is-expanded {
        display: none;
    }
    .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: #fff;
    }
    .icon-bar + .icon-bar {
        margin-top: 4px;
    }
    .navigation-header {
        height: 50px;
        line-height: 50px;
        background-color: #000;
    }
    .navigation-list {
        display: none;
        margin-left: 0px;
        width: 100%;
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.6s ease;
        transition: height 0.6s ease;
    }
    .navigation-list.is-expanded {
        display: block;
        margin-top: 50px;
    }
    .navigation-list:after {
        display: block;
    }
    .navigation-item {
        width: 100%;
        box-sizing: border-box;
        line-height: 55px;
        height: 53px;
        display: block;
        text-align: left;
        padding: 0 0 0 20px;
        margin: 0;
        background-color: #fff;
        border-bottom: 1px solid #cbcccd;
        -webkit-transition: background-color 0.4s ease;
        transition: background-color 0.4s ease;
    }
    .navigation-item.current {
        color: #fff;
        background-color: red;
        height: auto;
        -webkit-transition: background-color 0.4s ease;
        transition: background-color 0.4s ease;
    }
    .navigation-item a {
        font-size: 17px;
        color: #000;
    }
    .navigation-item .nav-title a {
        font-size: 17px;
        color:#000;
    }
    .navigation-item.current a {
        color: #fff;
    }
    .navigation-item.current button {
        color: #fff;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .navigation-item button {
        outline: none;
        display: inline;
        font-size: 18px;
        line-height: 55px;
        float: right;
        margin-right: 7%;
        -webkit-transition: -webkit-transform 0.2s ease 0.1s;
        transition: transform 0.2s ease 0.1s;
    }
    .navigation-item:hover .nav-title a:after {
        background: none;
    }
    .navigation-header {
        z-index: 11;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        text-align: center;
        border-bottom: 1px solid #252525;
    }
    .touch .product-dropdown {
        display: none;
        height: 0;
        background-color: #fff;
        margin: 0 0 0 -20px;
        padding: 0;
        overflow: hidden;
        -webkit-transition: height 0.6s ease;
        transition: height 0.6s ease;
    }
    .product-dropdown {
        position: relative;
    }
    .touch .navigation-item.current .product-dropdown {
        display: block;
        -webkit-transition: height 0.6s ease;
        transition: height 0.6s ease;
    }
    .product-display-wrapper {
        width: 100%;
        border: none;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .column-1 .product-display,
    .column-2 .product-display,
    .column-3 .product-display,
    .column-4 .product-display,
    .column-5 .product-display {
        width: 100%;
    }
    .product-display {
        letter-spacing: 0px;
        width: 100%;
        border: none;
        border-bottom: 1px solid rgba(33, 33, 33, 0.1);
        padding: 20px 0 16px;
        height: 224px;
    }
    .product-title {
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 5px;
        margin-top: 0px;
        font-weight: bold;
        color: black;
    }
    .product-tags {
        display: block;
        font-size: 12px;
        line-height: 14px;
        font-weight: bolder;
    }
    .product-colors {
        font-size: 12px;
        line-height: 18px;
        font-weight: bolder;
    }
    .swiper-container {
        height: 125px;
    }
    .swiper-slide.swiper-slide-prev,
    .swiper-slide.swiper-slide-next {
        opacity: 0.4;
        -webkit-transition: .1s opacity ease-in;
        transition: .1s opacity ease-in;
    }
    .swiper-slide {
        width: 50%;
    }
    .tablet .swiper-slide {
        width: 41.2%;
    }
    .tablet .swiper-slide-active {
        /*opacity:1;*/
    }
    .product-display:hover .swiper-button-next,
    .product-display:hover .swiper-button-prev,
    .touch .swiper-button-next,
    .touch .swiper-button-prev {
        height: 125px;
    }
    .Explore .contentasset {
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }
    .explore-image .imageone img {
        width: auto;
       /* height: 100%;*/
    }
    .explore-image img {
        height: 246px;
        width: auto;
        position: absolute;
        right: 0;
    }
    .explore-image img:hover {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        -webkit-transition: none;
        transition: none;
        /*pointer-events: none;*/
    }
    
   /* .explore-image .imgcontainer {
    -webkit-filter: brightness(45%);
    filter: brightness(45%);
    pointer-events: none;
    }*/
    
    .explore-image .imgcontainer {
    /*pointer-events: none;*/
    }
    
    .explore-image .imageone,
    .explore-image .imagetwo,
    .explore-image .imagethree {
        width: 100%;
        height: 245px;
        background-color: #000;
    }
    .tablet .explore-image {
        background-color: #000;
    }
    .tablet .explore-image img {
        text-align: right;
    }
    .tablet .explore-image .imageone img,
    .tablet .explore-image .imagetwo img,
    .tablet .explore-image .imagethree img {
        /*height: 100%;*/
        width: 100%;
        position: absolute;
        right: 0;
    }
    .side-nav {
        width: 100%;
        padding: 0 30px;
        margin: 0;
        background-color: #eeeeee;
    }
    .side-nav-header {
        font-size: 13px;
        color: #666;
        line-height: 50px;
    }
    .side-nav-items li {
        height: 54px;
        line-height: 55px;
        border-top: 1px solid rgba(33, 33, 33, 0.1);
        padding: 0 10px;
        box-sizing: border-box;
        position: relative;
    }
    .side-nav-items {
        border-bottom: 1px solid rgba(33, 33, 33, 0.1);
    }
    .side-nav-items li a:after {
        content: '';
        display: inline-block;
        height: 8px;
        width: 8px;
        position: absolute;
        right: 11%;
        left: auto;
        top: 24px;
        vertical-align: middle;
        color: #000;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .touch .side-nav-items li a {
        width: 100%;
        font-size: 18px;
        line-height: 18px;
        color: #0f0f0f;
        vertical-align: middle;
        display: inline-block;
        letter-spacing: 1px;
    }
    .product-tags {
        opacity: 1;
    }
    .searchdialog .ui-dialog-titlebar {
        display: none;
    }
    #homepage-slider {
        margin-top: 52px;
    }
    .search-menu {
        z-index: 15;
        padding: 0 20px;
        position: absolute;
        right: 0;
        height: 50px;
        line-height: 50px;
        border-left: 1px solid #252525;
    }
    .searchdialog {
        margin: auto;
        left: 0% !important;
        width: 100% !important;
        opacity: 0.8;
        padding: 0px !important;
        margin: 0px !important;
    }
    .ui-dialog.searchdialog .search-overlay {
        padding: 0em 0em;
    }
    #crossbar {
        height: 50px;
        width: 40px;
        top: 0;
        right: 0;
        cursor: pointer;
        margin: 0;
        background: none;
    }
    #crossbar:before {
        content: '';
        position: absolute;
        right: 14px;
        top: 18px;
        height: 12px;
        width: 12px;
        background: url("../images/srch-black-x.png") no-repeat scroll;
        background-size: 100%;
    }
    #searchbar {
        top: 20px;
        height: 13px;
        width: 12px;
        margin-left: 18px;
        padding-right: 17px;
        background-size: 13px 12px;
    }
    #searchbar:after {
        position: absolute;
        right: 0;
        display: block;
        content: '';
        top: -2px;
        width: 2px;
        height: 14px;
        background-color: #fff;
    }
    .search-overlay fieldset {
        height: 50px;
        width: 100%;
        top: 0;
    }
    #searchinput {
        font-size: 20px !important;
        padding-left: 61px;
        padding-right: 42px;
    }

    .sticky {
        height: 55px;
    }

    .sticky {
        position: static;
        width: 100%;
        height: 55px;
        box-sizing: border-box;
        z-index: 9999;
    }

    .phantom-sticky {
        visibility: hidden;
        transform: translate3d(0,0,0);
        backface-visibility: hidden;
        -webkit-perspective: 1000;
    }

    .product-dropdown {
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        transform: translate3d(0,0,0);
        backface-visibility: hidden;
        -webkit-perspective: 1000;
    }

    .current .sticky.scroll {
        position: fixed;
        top: 85px;
        left: 0;
        background: red;
        padding: 0 0 0 20px;
        margin-top: 0;
    }

    .header-sticky .headache-bar {
        position: fixed;
        top: 0;
        left: 0;
    }

    .header-sticky .headache-bar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        box-sizing: border-box;
        width: 100%;
    }

    .header-sticky .navigation-toggle {
        z-index: 999999;
    }

    .header-sticky .navigation-header,
    .header-sticky .navigation-toggle,
    .header-sticky .search-menu {
        position: fixed;
        top: 34px;
/*        left: 0; */
    }

    .header-sticky.no-headache-bar .navigation-header,
    .header-sticky.no-headache-bar .navigation-toggle {
        position: fixed;
        top: 0px;
        left: 0;
    }
    
    
    .header-sticky.no-headache-bar .search-menu {
        top: 0px;
        left: auto;
    }

    .header-sticky.no-headache-bar .sticky.scroll {
        top: 50px;
    }

    .header-sticky.no-headache-bar .main-navigation {
        top: 0px;
    }

    .header-sticky .main-navigation {
        top: 35px;
    }

    #footer.is-expanded {
        top: 0px;
    }

    .show {
        height: 75px;
        opacity: 1;
        transition: all .2s ease;
    }

    .hide {
        transition: all .2s ease;
        height: 0;
        opacity: 0;
    }
    
    /*Override footer code for mobile*/
    .prod-grid-layout.pt-collection .beats-audio {
        padding: 0;
        border-top: 1px solid #2f2f2f;
    }
    


}