/* ********************************************************************************************
    Responsive styles
*********************************************************************************************** */

/* 1280px <= width */

@media only screen and (min-width: 1280px)  {
    #dispcon:before {content: '< 1280 | ';}
    
}

/* width < 1024px */

@media only screen and (max-width: 1023px) {
	#dispcon:before {content: '< 1023 | ';}
}

/* 768px <= width < 960px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #dispcon:before {content: '768 to 959 | ';}
}

/* width < 768px */
@media only screen and (max-width: 767px) {
	#dispcon:before {content: '< 767 | ';}
}

/* 480px <= width < 768px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #dispcon:before {content: '480 to 767 | ';}
}

/* 640px <= width < 768px */
@media only screen and (min-width: 640px) and (max-width: 767px) {
    #dispcon:before {content: '640 to 767 | ';}
}

/* width < 480px */
@media only screen and (max-width: 479px) {
    #dispcon:before {content: '< 479 | ';}
}

/* 320px <= width < 480px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    #dispcon:before {content: '320 to 479 | ';}
}

/* width < 320px */
@media only screen and (max-width: 319px) {
    #dispcon:before {content: '< 319 | ';}
}


/* ********************************************************************************************
    Design for a width of 960-1280 px
*********************************************************************************************** */

/* 960px <= width < 1280px */
@media only screen and (min-width: 960px) and (max-width: 1279px) {
    #dispcon:before {content: '960 to 1279 | ';}
    

}


/* ********************************************************************************************
    Design for a width of 1024 px
*********************************************************************************************** */

/* width <= 1024px */
@media only screen and (max-width: 1041px) {
    #dispcon:before {content: '< 1041 | ';}
    .toggleMenu.active, .toggleMenu:hover {color: #ec1f27;}
    .shop {display: none;}
    .header-primary.header.added {padding-top: 4%;}
    #nav a:hover, #nav li.active a.level-top:hover {background: transparent !important; color: #ec1f27 !important;}
    .cms-home #nav > li > a {font-size: 1em;}
    .nav-container #nav {clear: both; position: static;}
    .nav-container #nav.color > li > a {padding: 12px 16px;}
    .cms-home #nav > li {background: none; padding: 0;}
    .nav-container #nav > li ul, .nav-container #nav > li ul.shown-sub, .nav-container #nav ul {display: block; position: static; height: auto;}
    .nav-container #nav li, .nav-container #nav li:hover {position: relative;}
    .nav-container #nav li ul li {width: auto;}
    #nav li li a {padding: 12px;}
    #nav li .more, #nav li:hover > .more, #nav li .more:hover, #nav li.hover > .more {color: #000}
    .nav-container #nav li ul li a.over, .nav-container #nav li ul li a:hover, .nav-container #nav li ul li.hover > a {text-indent: 0;}
    .nav-container #nav li.level-top.parent .level0 {display: none;}
    .nav-container #nav li.level-top.parent.hover .level0 {display: block;}
    #nav > li > a:after {display: none;}
   
    
    
}


/* ********************************************************************************************
    Mobile, small old desktop - design for a width of less than 960px
*********************************************************************************************** */

/* width < 960px */
@media only screen and (max-width: 959px) {
    #dispcon:before {content: '< 959 | ';}
    
    
}


/* ********************************************************************************************
    Tablet (Portrait) - design for a width of 768px
*********************************************************************************************** */

/* 768px <= width < 960px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #dispcon:before {content: '768 to 959 | ';}
    
    
    
}


/* ********************************************************************************************
    All desktop - design for a width of 768px and wider
*********************************************************************************************** */

/* 768px <= width */
@media only screen and (min-width: 768px) {
    #dispcon:before {content: '768 > | ';}
    
    

}


/* ********************************************************************************************
    All mobile - design for a width of less than 768px
*********************************************************************************************** */

/* width < 768px */
@media only screen and (max-width: 767px) {
    #dispcon:before {content: '< 767 | ';}
    .no-left-margin.mobile-grid-half {width: 100% !important;}
    .cms-home #nav > li > a {font-size: 1em;}
    .cms-home #nav > li > a
    

}
/* end: width < 768px */


/* ********************************************************************************************
    Mobile (Landscape) - design for a width of 480px
*********************************************************************************************** */

/* 480 <= width < 768px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #dispcon:before {content: '480 to 767 | ';}


}
/* end: 480 <= width < 768px */


/* ********************************************************************************************
    Design for a width of 640px
*********************************************************************************************** */

/* 640 <= width < 768px */
@media only screen and (min-width: 640px) and (max-width: 767px) {
    #dispcon:before {content: '640 to 767 | ';}

    
    
    
}
/* end: 640 <= width < 768px */


/* ********************************************************************************************
    Design for a width of less than 640px
*********************************************************************************************** */

/* width < 640px */
@media only screen and (max-width: 639px) {
    #dispcon:before {content: '< 639 | ';}
   
    
    
}
/* end: width < 640px */


/* ********************************************************************************************
    Design for a width of 480px
*********************************************************************************************** */

/* 480 <= width < 640px */
@media only screen and (min-width: 480px) and (max-width: 639px) {
    #dispcon:before {content: '480 to 639 | ';}
   
    

}
/* end: 480 <= width < 640px */


/* ********************************************************************************************
    Design for a width of less than 480px (small mobile)
*********************************************************************************************** */

/* width < 480px */
@media only screen and (max-width: 479px) {
    #dispcon:before {content: '< 479 | ';}
    
    

}
/* end: width < 480px */


/* ********************************************************************************************
    Design for a width of 320px (mobile - portrait)
*********************************************************************************************** */

/* 320px <= width < 480px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    #dispcon:before {content: '320 to 479 | ';}
    
    
    
    
}
/* end: 320px <= width < 480px */


/* ********************************************************************************************
    Design for a width of less than 380px
*********************************************************************************************** */

/* width < 380px */
@media only screen and (max-width: 396px) {
    #dispcon:before {content: '< 396 | ';}
    
    
    
}
/* end: width < 320px */


/* ********************************************************************************************
    Design for a width of less than 320px
*********************************************************************************************** */

/* width < 320px */
@media only screen and (max-width: 319px) {
    #dispcon:before {content: '< 319 | ';}
    
    

}
/* end: width < 320px */


/* ********************************************************************************************
    Design for a width of 240px (small mobile)
*********************************************************************************************** */

/* 240px <= width < 320px */
@media only screen and (min-width: 240px) and (max-width: 319px) {
    #dispcon:before {content: '240 to 319 | ';}
    
    
    
}
/* end: 240px <= width < 320px */


/* ********************************************************************************************
    Design for a width of lass than 240px
*********************************************************************************************** */

/* width < 240px */
@media only screen and (max-width: 239px) {
    #dispcon:before {content: '< 239 | ';}
    
    
}
/* end: width < 240px */


/* ********************************************************************************************
    Design for Large Desktops
*********************************************************************************************** */

/* width < 1920px */
@media only screen and (min-width: 1920px) {
    #dispcon:before {content: '< 1920 | ';}
    .nav-container #nav {max-width: 1200px; margin: 0 auto;}
    
}
/* end: width < 1920px */


/* ==================================== MAX WIDTH ==================================== */
/* Till Small displays (landscape) 1440px ----------- */
@media only screen and (max-width : 1439px) {
    /* Styles */
    #dispcon:after {content:" +++";}
    /* all */
    
}
/* Till Small displays (landscape) 1380px ----------- */
@media only screen and (max-width : 1379px) {
    /* Styles */
    #dispcon:after {content:" ^^^";}
    /* all */
    
}
/* Till Small displays (landscape) 1366px ----------- */
@media only screen and (max-width : 1365px) {
    /* Styles */
    #dispcon:after {content:" %%%";}
    /* all */
    
}
/* Till Small displays (landscape) 1280px ----------- */
@media only screen and (max-width : 1279px) {
    /* Styles */
    #dispcon:after {content:" ***";}
    /* all */
    .cms-home .bannercontainer {padding: 0;}
    .cms-home .logo, .grid_full.added .logo {width: 240px;}
    .cms-home #nav > li > a {font-size: 1.2em;}
    .shop > p {font-size: 0.85em;}
    .nav-container #nav {max-width: 960px;}
    
    
}
/* Till iPads (landscape) 1024px ----------- */
@media only screen and (max-width : 1023px) {
    /* Styles */
    #dispcon:after {content:" @@@";}
    /* all */
    
}
/* Till iPads (portrait) 768px ----------- */
@media only screen and (max-width : 767px) {
    /* Styles */
    #dispcon:after {content:" ###";}
	/* all */
    .cms-home .logo, .grid_full.added .logo {width: 160px;}
    .bannercontainer a.skip {bottom: -32px;}
    
    
}
/* Don't display landscape below iPad 767px ----------- */
@media only screen and (max-width : 767px) and (orientation:landscape) {
    #dispcon:after {content:" ~~~";}
    
}
/* Till Large phones 600px ----------- */
@media only screen and (max-width: 600px) {
	/* Styles */
	#dispcon:after {content:" ...";}
	/* all */
    
}
/* Till iPhone plus size 414px ----------- */
@media only screen and (max-width: 415px) {
	/* Styles */
	#dispcon:after {content:" |||";}
	/* all */
    
}
/* Till iPhone size 375px ----------- */
@media only screen and (max-width: 376px) {
	/* Styles */
    #dispcon:after {content:" |0|";}
	/* all */
    
}