/*

  Site Name: Kafka Responsive
  Site URL: http://www.kafka.co.uk
  Author: Peter F
  Version: 1.0 [01/2015]

*/

/* Defaults */

.siteOuterWrapper,
.siteInnerWrapper {
    max-width: 100%;
    margin: 0px auto;
    min-height: 100%;
    position: relative;
    min-width: 310px;
}



.nav li.mobile,
.mobile {
    display: none;
}

/* #Breakpoint Set 1 - 990px
================================================== */

    @media only screen and (min-width: 801px) and (max-width: 995px) {
        
        .nav .ulSubSubNavHolder .topNavItemsWrap a {
             margin-right: 0%;
        }
        
        #member-hello {
            width: 100%;
            padding: 0 1%;
        }
        
        /* Checkout */
        #orderSummary {
            width: 54%;
            margin-right:2%;
        }
        
        #userDetails {
            width: 44%;
        }
        
    }
    
    @media only screen and (max-width: 990px) {
        
        .nav li a#saleMens,
        .nav li a#saleWomens,
        .nav li a#saleArticles {
            padding: 0;             
        }
        
        /* Checkout */
        #checkout .terms label,         
        #checkout .row .sbHolder {
            width: 100%;
        }
        
        #totals tr.vat td {
            width: 30%;
            display: block;
            float: left;
            min-height: 61px;
        }
        
        #totals tr.vat td:first-child {
            width: 70%;
        }
        
        #totals tr.sub-total td {
            width: 50%;
            display: block;
            float: left;
        }
               
        #totals tr.discount td {
            width: 100%;
            display: block;
        }
        
        #totals tr.delivery-costs td {
            display: block;
            width: 100%;
        }
        
        #totals tr.delivery-costs td .row {
            float: none;
        }
        
        #totals tr.delivery-costs td .row:after {
            display: block;
            width: 100%;
            clear: both;
            content: ' ';
        }
        
        #totals tr.delivery-costs td:first-child {
            width: 100%;
            display: block;
        }
        
        #totals tr.total td {
            width: 50%;
            float: left;
            display: block;
        }
        
        #totals tr.discount .inlineWithButton {
            width: 100%;
            margin: 0;
        }
        
    }
    @media only screen and (min-width: 801px) and (max-width: 990px) {
     
     
        /* Make site fluid up to 800px */
        .wrapper {
            width: 100%;
            padding: 0 1%;
        }
        
        #header {
            height: 216px;
        }
        
        #search_site {
            top: 105px;
        }
        
        .nav {
            padding: 5px 0 0 0;
        }
        
        .nav .ulSubSubNavHolder {
            width: 100%;
            margin-bottom: 0;
        }
        
        .navLeftWrap, .navRightWrap {
            float: right;
            clear: right;
        }
        
        .navLeftWrap {
            margin: 0;
            padding: 0;
            width: auto;
        }
        
        /* Product filter */
       
        .browsePage .filterWrap {
            padding: 0;
        }
        
        .browsePage #productfilter {
            margin: 0;
            width: 25%;         
        }
        
        .browsePage #productfilter .tabWrap {
            margin: 0;
        }
        
        .browsePage #productfilterItems {
            width: 74%;
            float: right;
        }
        
        .items-list li {
            width: 50%;
            padding: 1%;
            margin: 0;
            clear: none;
            overflow: hidden;
        }
        
        /* Breadcrumbs */
       
        .breadcrumbWrap {
            margin: -86px 0 0;            
        }
        
        .breadcrumbs {
            margin: 0 0;
            padding: 0;
            float: right;
            padding: 10px 0;
        }
        
        /* Item */
        .item .itemImages {
            width: 40%;         
        }
        
        .item .itemDescription {
            width: 55%;         
        }
        
        /* Lookbook */       
        .lookbook .items-list .grid_4 {
            width: 32.5%;
            float: left;
            margin: 0 1% 0 0;
        }   
         

        /* Footer */
        #footer .grid_6 {
            margin: 0 auto;
            float: none;
            display: block;
            text-align: center;
        }
        
        #footer .nav li {
            display: inline-block;
            float: none;
        }
        
        #footer .grid_6.last,
        #footer #credits,
        #footer #copyright {
            float: none;
            width: 100%;
            text-align: center;
            margin: 0 auto;
        }
        
    }  
    
    
/* #Breakpoint Set 2 - 800px
================================================== */
      
    
    @media only screen and (min-width: 0px) and (max-width: 800px) {
        
        /* Remove body margin and set min height */
        body {
            margin: 0;
            min-height: 100%;
        } 
        
        #member-hello {
            width: 100%;
        }
        
        #member-hello.logged-out {
            display: none;
        }
        
        .flyout.logged-in {
            top: 40px;
        }
        
        #content,
        #checkout {
            min-height: initial;
            padding: 1% 20px;
        }
        
        #content.homepage {
            padding: 0;
        }
        
        /* Logos */      
        .logo {
            display: none;
        }           
        
        .logo.mobile {
            display: block;
            width: 60px;
            height: 60px;
            padding: 10px 0 0 0;
        }     
        
        /* Fix wrapper width */
        .wrapper {
            width: 100%;
        }
        
        /* Setup flyout button and features */
        .flyout {
            position: absolute;
            right: 20px;
            top: 10px;
        }
        
        .flyoutWrap {
            overflow: auto;
        }  
        
        .flyoutBackground {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 80px;
            background: #666;
            /*height: 135px;
            background: url(/images/flyoutBg.jpg) no-repeat center;
            background-size: cover;  */  
            display: block;    
        }
        
        /* Update site search to always be visible */
        #search_site {
            background: rgba(255,255,255,0.7);
        }
        
        #search_site .row .text {
            background: #fff;
            padding: 10px 15px;
            line-height: 16px;
        }
        
        .navRightWrap,
        .navLeftWrap {
            float: none;
            width: 100%;
            padding: 0;
        }
        
        .navRightWrap {
            position: relative;
            z-index: 10;
            height: 135px;
        }
        
        #responsive .nav li .ulHolder > div {
            height: auto !important;
        }
        
        #responsive  .navRightWrap .nav {
            padding: 10px 0 0 0;
        }
        
        #responsive  .navRightWrap .nav li {
            /*float: left;
            width: auto;
            background: url(/images/diamond.png) center no-repeat;
            background-size: cover;
            width: 60px;
            height: 60px;
            margin: 0 0 0 10px;*/
           display: none;
        }
        
        #responsive  .navRightWrap .nav li.textLogo {
            display: block;
            width: 36%;
            height: 24px;
            margin: 18px 25px 27px 25px;
            background: url(/images/KafkaText.png) no-repeat left;
            background-size: contain;
            float: left;
        }
        
        #responsive  .navRightWrap .nav li a {
            padding: 17px 9px;
            text-align: center;
        }
        #responsive  .navRightWrap .nav li a i {
            font-size: 25px;
        }        
        
        #responsive  .navRightWrap .nav li.icon {
            /*display: none;*/
        }
        
        #responsive  .navRightWrap .nav li.icon.searchNav {
            display: block;
            clear: both;
            width: 100%;
            height: auto;
            margin: 0;
            background: #EEE;
            padding: 15px 20px 15px 20px;
        }
        
        #responsive  .navRightWrap .nav li.miniSmallBasket {
            display: block;
            overflow: hidden;
            text-indent: -999px;
            display: block;
            cursor: pointer;
            z-index: 5001;
            color: #333;
            background: url(/images/diamond.png) center no-repeat;
            background-size: cover;
            width: 60px;
            height: 60px;
            text-align: center;
            margin-right: 85px;
            position: relative;
            float: right;
        }
        
        #responsive  .navRightWrap .nav li.miniSmallBasket a:after {
            display: block;
            content: "\f07a";
            font-family: "FontAwesome";
            position: absolute;
            width: 58px;
            height: 60px;
            top: 0;
            left: 0;
            color: #FFF;
            text-indent: 0;
            font-size: 1.5em;
            padding: 20px 0;
        }
        
        #responsive  .navRightWrap .nav li.icon.searchNav a {
            display: none;
        }
        
                
        #responsive .navRightWrap .nav li.icon.searchNav #search_site {
            display: block !important;
            top: 0;
            right: auto;
            position: static;
            width: 100%;
            height: 40px;
        }
        
        
        #responsive  .navRightWrap .nav li:first-child a {
            display: block;
            /*width: 48px;
            height: 38px;*/
            overflow: hidden;
            text-indent: -999px;
        }
        #responsive  .navRightWrap .nav li:first-child a:before {
            display: block;
            float: left;
            content: "\f007";
            font-family: 'FontAwesome';
            text-indent: 0;
            font-size: 25px;
            padding: 3px 11px;
        }
        
        #responsive  .navLeftWrap .nav {
            padding: 10px 0 0 0;
        } 
        
        #responsive  .navLeftWrap .nav > li {
            clear: both;
        }
        
        #responsive  .navLeftWrap .nav li a {
            padding: 10px 20px;
        }
        
        #responsive  .navLeftWrap .nav li ul li a {
            padding: 10px 0;
        }
       
        
        #responsive  .navLeftWrap .nav > li a {
            
        }
        
        #responsive .nav .ulSubSubNavHolder .topNavItemsWrap {
            margin: 0;
        }
        
        .nav li .ulHolder {
            position: relative;
            padding: 0;
            top: 0;
        }
        
        .nav .ulSubSubNavHolder {
            width: 100%;
            overflow: visible;
            margin-bottom: 0;
        }
        
        #responsive .nav .subSubNav .subSubNavCol .subNavAlphabet > li {
            float: left;
            width: 50%;
        }
        
        #responsive .nav .subSubNav .subSubNavCol .subNavAlphabet > li:nth-child(even) {
            clear: left;
        }
        
        #responsive .nav .subSubNav .subSubNavCol .subNavAlphabet > li a {
            padding-right: 10px;
        }
        
        #responsive .nav .subSubNav .subSubNavCol .subNavAlphabet > li:first-child {
            width: 100%;
        }
        
        .overlayBox {
            width: 90%;
        }
        
        .overlayBox iframe {
            width: 100%;
        }
        
        .overlayBox h1 {
            max-width: 70%;
            font-size: 18px;
        }
        /* Slider */
        
        .sliderWrap {
            height: auto;
            margin-bottom: 1%;
        }
        
        .sliderWrap .slider {            
            height: auto;
        }
        
        .sliderWrap .slide {        
            height: auto;
            position: relative;
            overflow: hidden;
        }
                
        .sliderWrap .controls {
            top: auto;
            bottom: 0;
        }
        
        /* Front page grid */
        .storeFeatures {
            padding: 1.5%;      
        }        
        
        .breadcrumbWrap {
            padding: 0 20px;
            margin: 30px 0 0 0;         
        }
        
        .breadcrumbs li:first-child a {
            padding-left: 0;
        }
        
        /* Item */
        .item .itemImages {
            width: 100%;        
            display: block;
            margin: 0 auto; 
            float: none;
        }
        
        .item .itemImages .controls {
            top: 45%;   
            z-index: 999;       
        }
        
        .item #largeImage,
        .item .itemImages .bx-viewport,
        .item .itemImages .largeImageWrap,
        .itemImageSlide,
        .item #largeImage a,
        #wrap {
            line-height: initial;
            min-height: 400px;
            height: auto !important;
        }
        
        .itemImageSlide {
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: auto !important;
        }
        
        .itemImageSlide img {
            width: auto;
            max-height: 400px !important;
        }
        
        .item .itemImages .beforeIcon {
            position: absolute;
            top: 370px;
            right: 7px;
            left: initial;
        }
        
        .item form fieldset {
             margin: 0;
        }
        
        .item form .itemSizesRow,
        .item form .quantityRow {
            width: 49%;
            margin: 0 1% 10px 0;            
        }
        
        .item form .quantityRow {
            margin: 0 0 10px 1%;
        }
        
        .item .itemDescription {
            width: 100%;            
            margin-top: 20px;
        }
        
        .item .itemDescription .sizeGuide {
            margin-top: 15px;
        }
        
        #addbag {
            width: 100%;
            clear: both;
            margin: 10px 0 0 0;      
            padding: 15px 0;    
        }
        
        .addedToBasket a {
            padding: 10px 5px;
        }
        
        .items-list .itemImageWrap {
            margin: 0;        
        }
        
        .items-list li h3 {
            margin-top: 10px;
            border-top: 1px solid #EEE;
        }
        
        /* Product filter items */
        #productfilterItems {
            width: 100%;
        }
        
        #productfilterItems img {
            height: auto;
        }
        
        /* Sub nav */
        .aside,
        .members .grid_9 {
            width: 100%;
            margin: 10px 0;
        }
        
        .aside ul li.heading h2 {
            margin: 0;
            color: #FFF;
            font-size: 1.2em;
        }
        
        .aside ul li.heading h2:after {
            float: right;
            display: block;
            font-family: "FontAwesome";
            content: "\f107";
            color: #FFF;
            font-size: 1.6em;
            margin-right: 20px;
        }
        
        .aside ul li.heading.open h2:after {
            content: "\f106";
        }    
                    
        .aside ul li {
            border: 1px solid #DDD;
            border-top: 0;
            padding: 5px;
            display: none;
        }
        
        .aside ul li.heading {
            display: block;
            background: #a19e9f;
            color: #FFF;
            padding: 10px 0;
            text-align: center;
            cursor: pointer;
        }
        
        /* Sub pages */
        .subPages h1:first-child {
            margin: 10px 0 10px 0;
        }
        
        .subPages .grid_7,
        .subPages .grid_9 ,
        .subPages .grid_5 {
            width: 100%;
        }
        
        /* Sitemap */
       
        .nav li.grid_4 {
            width: 50%;
            margin: 0;
        }
        
        /* Contact form */
        #contact-form .button {
            width: 100%;
        }
        
        /* Newsletter */
       
        #newsletter {
            width: 100%;
        }
        
        #newsletter label {
            display: block;
            clear: both;
        }
        #newsletter .text,
        #newsletter .button {
            display: block;
            clear: both;
            width: 100%;
        }
        
        /* Lookbook */       
       
        .lookbook .items-list .last,
        .lookbook .items-list .first {
            clear: none;
        }
       
        .lookbook .items-list .grid_4 {
            width: 49%;
            float: left;
            margin: 0 1% 0 0 !important;
        }        
        
        .lookbook .items-list  .grid_4:nth-child(even) {
            margin: 0 0 0 1% !important;
        }
        
        .lookbookBrowse .paginationTop {
            padding: 10px 0;
            width: 100%;
            float: none;    
            clear: both;    
        }
        
        .pagination {
            padding: 0;
            width: 100%;
            float: none;
        }
        
        /* Browse page */
       
        .browsePage .filterWrap,
        .browsePage #productfilter,
        .browsePage #productfilter .tabWrap {
            margin: 0;
            padding: 0;
            width: 100%;
        }
        
        
        .browsePage #productfilter {
            background: #FCFCFC;
            padding: 10px;
            margin-bottom: 20px;
        }
        
        .browsePage #productfilter .tabContainer {
            height: auto !important;
        }
        
        #productfilter .tabWrap .tabs li {
            width: 50%;
            height: auto;
            display: block;
            float: left;
        }
        
        #productfilter .tabWrap .tabs li h3 {
            margin: 0;
        }
        
        #productfilter .tabWrap .tabs li h3 a {
            display: block;
            text-align: center;
            padding: 10px;
            background: #F2F2F2;
        }
        
        #productfilter .tabWrap .tabs li.active h3 a {
            background: #FFF;
        }
        
        .tabContent .jspVerticalBar {
            right: 0;
        }
        
        .browsePage #productfilter .tabWrap .tabContent {
            padding-top: 0;
            display: none;
        }
        
        .browsePage #productfilter .tabWrap .tabContent.visible {
            display: block;
        }
        
        #productfilter .filter-option {
            width: 50%;
            padding-right: 10px;
        }
        
        #productfilter .tabContent {
            text-align: left;
        }
        
        #productfilter fieldset {
            margin:0;
        }
        
        #productfilter .filter-option:nth-child(even) {
            width: 50%;
            clear: none;
        }
        
        #productfilter .brandLetter,        
        #productfilter .brandLetter h1 {
            clear: both;
            display: block;
            width: 100%;
        }
        
        .browsePage #productfilterItems {
            width: 100%;
        }
        
        div#productfilter_items  ul.items-list li {
            width: 48%;
            margin: 0 1% 0 0 !important;
            float: left;
            clear: left;
        }
        
        div#productfilter_items  ul.items-list li:nth-child(even) {
            width: 48%;
            margin: 0 0 0 1% !important;
            clear: none;
        }
        
        div#productfilter_items  ul.itemSizes li {
            width: auto;
            float: left;
            clear: both;
            margin: 0 !important;
        }
        
        div#productfilter_items  ul.itemSizes li:nth-child(even) {
            width: auto;
            float: left;
            clear: both;
            margin: 0 !important;
        }
        
        .paginumberorder {
            margin 0;
            padding: 5px 0;
            width: 100%;
        }
        
        .hideFilter {
            display: none;
            margin-top: 10px;
            height: auto !important;
        }
        
        .hide.mobile {
            display: block;
            text-align: right;
            cursor: pointer;
        }
        
        /* Members Area */
        .members .grid_6,
        .members .grid_5 {
            width: 100% !important;
            margin: 0;
        }
        
        .members .login {
            border: 0;
            border-top: 1px solid #DDD;
            margin: 20px 0 0 0;
            padding: 20px 0 20px 0;
            height: auto !important;
        }
        
        
        /* Register & Edit details */
                 
        .register {
            padding-bottom: 20px;
        }
        
        .register .formInline .row .inlineWithButton,        
        .changeDetails .formInline .row .inlineWithButton {
            width: 100%;
        }
        
        .register .formInline .row label,        
        .changeDetails .formInline .row label {
            float: none;
            width: 100%;
            display: block;
        }
        
        .register .formInline .row .text,
        .register .formInline .row .sbHolder,
        .register .formInline .row .sbOptions,
        .changeDetails .formInline .row .text,
        .changeDetails .formInline .row .sbHolder,
        .changeDetails .formInline .row .sbOptions {
            width: 100%;
        }
        
        .register .formInline .row .sbSelector,
        .changeDetails .formInline .row .sbSelector {
            white-space:normal;
        }
        
        .register .formInline .button, 
        .changeDetails .formInline .button {
            width: 100%;
            margin: 10px 0 0 0;
        }
        
        .register .formInline .row .inlineWithButton .text,
        .register .formInline .row .inlineWithButton .button,
        .changeDetails .formInline .row .inlineWithButton .text,
        .changeDetails .formInline .row .inlineWithButton .button {
            width: 49%;
            margin: 0 1% 0 0;
            padding: 12px 12px 11px;
        }
        
        .register .formInline .row .inlineWithButton .button, 
        .changeDetails .formInline .row .inlineWithButton .button {
            margin: 0 0 0 1%;
        }
        
        /* Footer */
        #footer {
            margin: 1% 2%;
            width: auto;
            float: none;
            display: block;
        }
        
        #footer .grid_6,
        #footer #credits,
        #footer #copyright {
            width: 100%;
            margin: 0;
            float: none;
            text-align: center;
            display: block;
        }
        
        #footer .nav {
            float: none;
        }
        
        #responsive #footer .edgenav li {
            float: none;
            text-align: center;
        }
        
        #responsive #footer .edgenav li a {
            margin: 0;
            padding: 0;
        }
        #responsive #footer .socialNav .nav li {
            display: inline-block;
            float: none;
        }
        
        #responsive #footer .socialNav .nav li a{           
            padding: 0;
            margin: 0;
        }
        
        #footer .socialNav {
            margin-bottom: 0;
        }
        
        #footer .socialNav a {
            margin: 0;
        }
        
        /* Checkout */
        
        #orderSummary,
        #userDetails {            
            width: 100%;
        }
       
        #bagItems div.header span{
            width: 24%;
            text-align: left;
        }
        
        #bagItems div.header span.item {
            width: 20%;
            overflow: hidden;
            text-indent: -999px;
        }
        
        #bagItems div.header span.delete {
            width: 6%;
        }
        
        #bagItems div.item span{
            width: 29%;
            line-height: 50px;
            clear: right;
            padding: 0 5px;
            text-align: left;
        }
        
        #bagItems div.item div.details {
            width: 38%;
            float: left;
        }  
        
        #bagItems div.item .itemWrap {
            width: 80%;
            float: left;
        }
        
        #bagItems div.item span.thumb {
            width: 20%;
            padding: 0 15px 0 0;
        } 
        
            #bagItems div.item span.thumb {
                vertical-align: middle;
            }     
        
        #bagItems div.item span.description {
            width: 100%;
            float: right;
            padding-top: 10px;
        }
        
        #bagItems div.item span.basket-icons {
            width: 6%;
        }
        
        #checkout table#totals .delivery-costs .sbHolder,
        #checkout .sbHolder {
            width: 100%;
        }
        
        #checkout #order-history table th,
        #checkout #order-history table td {
            text-align: left;
        }
        
        #checkout .order-overview th,
        #checkout .order-overview td,
        #checkout .order-overview td:last-child,
        #checkout .overview-billing td,
        #checkout .overview-billing th,
        #checkout .overview-billing td:last-child {
            width: 100%;
            float: left;
            clear: left;
            
        }
        
        #checkout .order-overview td:first-child,
        #checkout .overview-billing td:first-child {
            font-weight: bold;
        }
        
        #checkout .row .sbHolder {
            width: 100%; 
            margin: 0;
        }
        
        #checkout .go-back {
            width: 100%;
            margin-bottom: 20px;
        }
        
        #checkout #orderSummary > .imageWrap{
            width: 100%;
            clear: both;
            float: none;
            text-align: center;
            padding: 0;
        }
        
        #checkout #userDetails h2 {
            margin: 20px 0;
            font-size: 2em;
        }        
        
        #checkout #userDetails .member_already {
           padding: 10px 20px;
           background: #FCFCFC;
           margin-bottom: 20px;
        }
        
        #checkout .row input[type=checkbox] {
            float: left;
            width: auto;
            margin: 2px 10px 0 0;            
        }
        
        #checkout #ship-payment {
            width: 100%;
            font-size: 1.3em;
            padding: 20px;
        }
        
        
                   
    }      
    
    
    @media only screen and (min-width: 0px) and (max-width: 630px) {
        
        
        /* Front page grid blocks */
        .storeFeatures .grid_4,
        .storeFeatures .grid_4.first,
        .storeFeatures .grid_4.last {
            width: 50%;
            margin: 0;
            padding: 0 1% 2% 1%;
            clear: none;
        }
        
        .storeFeatures .grid_4:nth-child(even) {
            padding: 0 1% 2% 1%;
        }
    
    }
    
    @media only screen and (min-width: 0px) and (max-width: 550px) {
        
        #responsive #footer .navToggle {
            font-size: 16px;
            display: block;
            background: #a19e9f;
            color: #FFF;
            padding: 10px 0;
            text-align: center;
            cursor: pointer;
            margin: 0;
        }
        
        #responsive #footer .navToggle.open {
            font-size: 16px;
            display: block;
        }
        
        #responsive #footer .navToggle i {
            float: right;
            margin-right: 20px;
            -webkit-transition: all 300ms ease-in-out;
            -moz-transition: all 300ms ease-in-out;
            -ms-transition: all 300ms ease-in-out;
            -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;     
        }
        
        #responsive #footer .navToggle.open i {
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);        
        }
        
        #responsive #footer .toggle {
            display: none;
            background: #F2F2F2;
            padding: 10px 0 10px 0;
        }
        
        #responsive #footer .edgenav {
            display: block;
            margin-bottom: 10px;
        } 
        
        #responsive #footer .edgenav li {
            float: none;
            width: 100%;
            display: block;
        } 
        
        #responsive #footer .edgenav li a {
            padding: 3px 0;
            display: block;
            text-align: center;
        }     
        
        #responsive #footer .socialNav {
            margin: 10px 0;
        } 
        
        #responsive #copyright span {
            display: block;
        }   
    
    }
    
    
    @media only screen and (min-width: 0px) and (max-width: 440px) {
        
        .members table td:first-child {
            width: 40%;
        }
        
         /* Sitemap */
       
        .nav li.grid_4 {
            width: 100%;
            margin: 0;
        }
        
        
    }
    
    
    @media only screen and (min-width: 0px) and (max-width: 400px) {
        
        .lookbook .items-list .grid_4 {
            width: 100%;
            margin: 10px 0 !important;
        }        
        
        .lookbook .items-list  .grid_4:nth-child(even) {
            margin: 10px 0 !important;
        }
        
        
    }

.siteOuterWrapper {
  max-width: 100%;
  min-height: 100%;
  position: relative;
}
/* Got a full screen background? You might need this to stop the flashers
    *:not(html) {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;     
    }
    */
.flyout,
.mobileBar {
  display: none;
}

/* Breakpoint for mobile menu to appear, can be set to whatever site needs */
@media only screen and (min-width : 0px) and (max-width : 800px) {

    #responsive .subNav .title {
        cursor: pointer;
    }
    
    #responsive .subNav ul {
        display: none;
    }
    
    #responsive .flyoutWrap {
        background: #fff;
    }
    
    #responsive .flyoutWrap li {
        display: block;
        width: 100%;
        float: none;
    }
    
    #responsive .flyoutWrap li.parent > a:after {
        font-family: "FontAwesome";
        content: "\f0da";
        position: absolute;
        right: 10px;
        top: 10px;
        -webkit-transition: all 300ms ease-in-out 0s;
        -moz-transition: all 300ms ease-in-out 0s;
        -ms-transition: all 300ms ease-in-out 0s;
        -o-transition: all 300ms ease-in-out 0s;
        transition: all 300ms ease-in-out 0s;
    }
    
    #responsive .flyoutWrap li.parent.open > a:after {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    
    #responsive .flyoutWrap li a {
        width: 100%;
        display: block;
        color: #333 !important;
    }
    
    #responsive .flyoutWrap li ul {
        position: relative;
        display: block;
        width: 100%;
        background: #FFF;
    } 
    
    #responsive .flyoutWrap li ul li {
        float: none;
    }
    
    #responsive .flyoutWrap li ul ul {
        display: block;
        position: relative;
    }
    
    #responsive .flyout {
        display: block;
        cursor: pointer;
        z-index: 5001;
        color: #333;
        background: url(/images/diamond.png) center no-repeat;
        background-size: cover;
        width: 60px;
        height: 60px;
        padding: 20px 0;
        text-align: center;
    }
    
    #responsive .flyout.dark {
        background: url(/images/diamondDark.png) center no-repeat;
        background-size: cover;
        color: #a19e9f;
    }
    
    #responsive .flyout.dark.alive {
        background: url(/images/diamond.png) center no-repeat;
        background-size: cover;
    }
    
    #responsive .flyout.dark a .line {
        background: #a19e9f;
    }
    
    #responsive .flyout.dark a .line:after {
        background: #a19e9f;
    }
    
    #responsive .flyout.dark:hover a .line {
        background: #a19e9f;
    }
    
    #responsive .flyout.dark:hover a .line:after {
        background: #a19e9f;
    }
    
    #responsive .flyout a {
        display: block;
        width: 25px;
        height: 14px;
        font-size: 2em;
        line-height: 1;
        color: #333;
        text-align: center;
        position: relative;
        margin: 0 auto;
    }
    
    #responsive .flyout a .line {
        background: #ffffff;
        width: 25px;
        height: 3px;
    }
    
    #responsive .flyout a .line:after {
        height: 3px;
        background: #ffffff;
    }
    
    #responsive .flyout:hover a .line:after {
        background: #ffffff;
    }
    
    #responsive .flyout.alive a .line {
        background: #ffffff !important;
    }
    
    #responsive .siteOuterWrapper {
        overflow: hidden;
        position: relative;
        z-index: 10;
        min-height: 100%;
        /*padding-bottom: 40px;*/
    }
    
    #responsive .siteOuterWrapper > div.transform {
        -webkit-transition: -webkit-transform 300ms ease-in-out 0s;
        -moz-transition: -moz-transform 300ms ease-in-out 0s;
        -ms-transition: -ms-transform 300ms ease-in-out 0s;
        -o-transition: -o-transform 300ms ease-in-out 0s;
        transition: transform 300ms ease-in-out 0s;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    
    #responsive .siteOuterWrapper > div.transform.alive {
        -webkit-transform: translate(-100%, 0);
        -moz-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
        -o-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
    }
    
    #responsive .flyoutWrap {
        position: absolute;
        top: 0;
        right: -100%;
        width: 100%;
        min-height: 100%;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-transition: -webkit-transform 300ms ease-in-out 0s;
        -moz-transition: -moz-transform 300ms ease-in-out 0s;
        -ms-transition: -ms-transform 300ms ease-in-out 0s;
        -o-transition: -o-transform 300ms ease-in-out 0s;
        transition: transform 300ms ease-in-out 0s;
    }
    
    #responsive .flyoutWrap.alive {
        -webkit-transform: translate(-100%, 0);
        -moz-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
        -o-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
    }
    
    #responsive.menuleft .siteOuterWrapper > div.transform.alive {
        -webkit-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        -o-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }
    
    #responsive.menuleft .flyoutWrap {
        right: auto;
        left: -100%;
    }
    
    #responsive.menuleft .flyoutWrap.alive {
        -webkit-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        -o-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }
    
    #responsive .flyout {
        margin: 0 auto;
    }
    
    #responsive .flyout.right {
        float: right;
    }
    
    #responsive .flyout.left {
        float: left;
    }
    
    #responsive .flyout a .line {
        -webkit-transition: -webkit-transform 0.8s cubic-bezier(1, 0, 0, 1) 0.2s;
        -moz-transition: -moz-transform 0.8s cubic-bezier(1, 0, 0, 1) 0.2s;
        -ms-transition: -ms-transform 0.8s cubic-bezier(1, 0, 0, 1) 0.2s;
        -o-transition: -o-transform 0.8s cubic-bezier(1, 0, 0, 1) 0.2s;
        transition: transform 0.8s cubic-bezier(1, 0, 0, 1) 0.2s;
        left: 0px;
        display: block;
        position: absolute;
        overflow: hidden;
    }
    
    #responsive .flyout a .line:after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        -webkit-transform: scaleX(0);
        -moz-transform: scaleX(0);
        -ms-transform: scaleX(0);
        -o-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 100% 0%;
        -moz-transform-origin: 100% 0%;
        -ms-transform-origin: 100% 0%;
        -o-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
    
    #responsive .flyout a .line:nth-child(1) {
        -webkit-transform-origin: 0px 5px;
        -moz-transform-origin: 0px 5px;
        -ms-transform-origin: 0px 5px;
        -o-transform-origin: 0px 5px;
        transform-origin: 0px 5px;
        top: 0px;
        z-index: 2;
    }
    
    #responsive .flyout a .line:nth-child(1):after {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1) 0s;
        -moz-transition: -moz-transform 0.4s cubic-bezier(1, 0, 0, 1) 0s;
        -ms-transition: -ms-transform 0.4s cubic-bezier(1, 0, 0, 1) 0s;
        -o-transition: -o-transform 0.4s cubic-bezier(1, 0, 0, 1) 0s;
        transition: transform 0.4s cubic-bezier(1, 0, 0, 1) 0s;
    }
    
    #responsive .flyout a .line:nth-child(2) {
        top: 7px;
        z-index: 1;
        -webkit-transition: opacity 0.4s linear 0.5s;
        -moz-transition: opacity 0.4s linear 0.5s;
        -ms-transition: opacity 0.4s linear 0.5s;
        -o-transition: opacity 0.4s linear 0.5s;
        transition: opacity 0.4s linear 0.5s;
    }
    
    #responsive .flyout a .line:nth-child(2):after {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1) 0.1s;
        -moz-transition: -moz-transform 0.4s cubic-bezier(1, 0, 0, 1) 0.1s;
        -ms-transition: -ms-transform 0.4s cubic-bezier(1, 0, 0, 1) 0.1s;
        -o-transition: -o-transform 0.4s cubic-bezier(1, 0, 0, 1) 0.1s;
        transition: transform 0.4s cubic-bezier(1, 0, 0, 1) 0.1s;
    }
    
    #responsive .flyout a .line:nth-child(3) {
        -webkit-transform-origin: 0px 1.5px;
        -moz-transform-origin: 0px 1.5px;
        -ms-transform-origin: 0px 1.5px;
        -o-transform-origin: 0px 1.5px;
        transform-origin: 0px 1.5px;
        top: 14px;
        z-index: 3;
    }
    
    #responsive .flyout a .line:nth-child(3):after {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1) 0.2s;
        -moz-transition: -moz-transform 0.4s cubic-bezier(1, 0, 0, 1) 0.2s;
        -ms-transition: -ms-transform 0.4s cubic-bezier(1, 0, 0, 1) 0.2s;
        -o-transition: -o-transform 0.4s cubic-bezier(1, 0, 0, 1) 0.2s;
        transition: transform 0.4s cubic-bezier(1, 0, 0, 1) 0.2s;
    }
    
    #responsive .flyout:hover a .line:after {
        width: 100%;
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }
    
    #responsive .flyout.alive {
        -webkit-transition: all 0.4s linear 0s;
        -moz-transition: all 0.4s linear 0s;
        -ms-transition: all 0.4s linear 0s;
        -o-transition: all 0.4s linear 0s;
        transition: all 0.4s linear 0s;
    }
    
    #responsive .flyout.alive a .line {
        background: #ffffff;
    }
    
    #responsive .flyout.alive a .line:nth-child(1) {
        -webkit-transform: translateY(-2px) translateX(1px) rotate(45deg);
        -moz-transform: translateY(-2px) translateX(1px) rotate(45deg);
        -ms-transform: translateY(-2px) translateX(1px) rotate(45deg);
        -o-transform: translateY(-2px) translateX(1px) rotate(45deg);
        transform: translateY(-2px) translateX(1px) rotate(45deg);
    }
    
     #responsive .flyout.alive a .line:nth-child(2) {
        -webkit-transition: opacity 0.4s linear 0s;
        -moz-transition: opacity 0.4s linear 0s;
        -ms-transition: opacity 0.4s linear 0s;
        -o-transition: opacity 0.4s linear 0s;
        transition: opacity 0.4s linear 0s;
        opacity: 0;
    }
    
    #responsive .flyout.alive a .line:nth-child(3) {
        -webkit-transform: translateY(3px) translateX(3px) rotate(-45deg);
        -moz-transform: translateY(3px) translateX(3px) rotate(-45deg);
        -ms-transform: translateY(3px) translateX(3px) rotate(-45deg);
        -o-transform: translateY(3px) translateX(3px) rotate(-45deg);
        transform: translateY(3px) translateX(3px) rotate(-45deg);
    }

}




/* ----- T41319 ------ */

 @media only screen and (max-width: 640px) {
     .giftVoucher.grid_6,
     .giftForm {
        width: 100%;
        margin-top: 20px;
     }
     
     .voucherDetails {
         display: none;
     }

     #giftVoucherForm .button {
         float: left;
         width: 100%;
         margin-top: 10px;
     }
 }