/*  ========================================================================== */
/*  Designed & Developed by Ecce Media
/*  Call Us     : +44 (0)1959 525 717
/*  or, email   : info@eccemedia.com
/*  Tweet us    : @eccemedia
/*  Spy on us   : www.eccemedia.com
/*  ========================================================================== */

/*  ========================================================================== */
/*  Colours
/*  Primary		(red) 		: #782922
/*  Secondary	(dark red)	: #380a05
/*	Background 	(cream) 	: #fffde0
/*	Text 		(grey)		: #555
/*	Text Bold	(dark grey)	: #222
/*  ========================================================================== */

/*  ========================================================================== */
/*  normalize
/*  ========================================================================== */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline;zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html,html a{-webkit-font-smoothing:antialiased;text-shadow:1px 1px 1px rgba(0,0,0,0.004)}button,input,select,textarea{font-family:inherit;font-size:100%;vertical-align:middle;margin:0}abbr[title]{border-bottom:1px dotted;color:#21759b}dfn{font-style:italic;color:#21759b}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0;background:#21759b;border-color:#21759b}mark{background:#21759b;color:#FFF;padding:.15em .5em}code,kbd,pre,samp{font-family:Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;font-weight:300;font-size:.875em;line-height:2.14286em}pre{white-space:pre-wrap}q{quotes:201C 201D 2018 2019;font-style:italic}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,ol,ul{margin:1.875em 0}dd,ol,ul{padding:0 0 0 4em}nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0}ul li,ol li{margin:.46875em 0}img{border:0;height:auto;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{border:1px solid #bbb;background:#fff;text-align:center;margin:0;padding:10px}figure img{max-width:100%}figcaption{font-size:.9em}fieldset{border-color:silver;border-style:solid;border-width:.0625em;margin:0 2px;padding:.59375em 1.10938em 1.15625em}legend{border:0;margin-left:-7px;padding:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:13px;width:13px;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}ol ol,ol ul,ul ol,ul ul,form{margin:0}@media only screen and min-width 768px{html{font-size:110%}}@media only screen and min-width 1400px{html{font-size:130%}}


/*  ========================================================================== */
/*  Typeography
/*  ========================================================================== */

html {

    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    color: #555;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    line-height: 1.875em;

    height: 100%;
    padding:0;
    margin:0;

    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

body {
    position: relative;
    height: 100%;
    padding:0;
    margin:0;
}

button, input, select, textarea {
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
}

.weight-normal {
    font-weight: 300;
}

.weight-bold, h2, h3, h4, h5, h6, b, strong, a {
    font-weight: 400;
}
strong {
    color: #222;
}

.weight-bolder, h1 {
    font-weight: 900;
}

h1 {
    font-size: 3em;
    line-height: 1.875em;
    margin-top: 0.9375em;
    margin-bottom: 0.9375em;
}

h2 {
    font-size: 2.5em;
    line-height: 1.25em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

h3 {
    font-size: 2em;
    line-height: 1.60256em;
    margin-top: 1.60256em;
    margin-bottom: 1.60256em;
}

h4 {
    font-size: 1.5em;
    line-height: 1.875em;
    margin-top: 1.875em;
    margin-bottom: 1.875em;
}

h5 {
    font-size: 1em;
    line-height: 2.25904em;
    margin-top: 2.25904em;
    margin-bottom: 2.25904em;
}

h6 {
    font-size: 0.67em;
    line-height: 2.79851em;
    margin-top: 2.79851em;
    margin-bottom: 2.79851em;
}


/*  ========================================================================== */
/*  Helpers
/*  ========================================================================== */

.hidden {
    display: none;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.clear {
    clear:both;
}

/*  ========================================================================== */
/*  ui
/*  ========================================================================== */
.btn-dark, .btn-dark:visited {
    padding: 1em;
    text-align: center;
    background: #782922;
    color: white;
    text-decoration: none;
}

.btn-dark:hover, .btn-dark:active {
    background: #380a05;
    color: white;
}

.btn-close {
    position: absolute;
    display: inline-block;
    text-indent: -99999px;
    overflow: hidden;
    top: 32px;
    right: 32px;
    height: 32px;
    width: 32px;
    background:url('../gfx/close.png') no-repeat;
}

.btn-close:hover {
    background:url('../gfx/close-hover.png') no-repeat;
}

.btn-nav {
    background:#782922;
    text-align: center;
    text-indent: -99999px;
    overflow: hidden;
    padding: 15px 0;
}

.btn-nav:hover {
    cursor:pointer;
}

.no-touch .btn-nav:hover {
    background: #380a05;
}

.btn-nav-top, .btn-nav-mid, .btn-nav-mid2, .btn-nav-bot {
    background:#fff;
    height: 5px;
    width:30px;
    margin:0 auto;

    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;

    -webkit-transition-duration: 200ms;
    -moz-transition-duration:	 200ms;
    -o-transition-duration: 	 200ms;
    transition-duration: 		 200ms;
}

.btn-nav-mid {
    margin: 5px auto;
}

.btn-nav-mid2 {
    margin:-10px auto 5px;
}

.csstransforms.nav-open .btn-nav-top, .csstransforms.nav-open .btn-nav-bot {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}

.csstransforms.nav-open .btn-nav-mid {
    -webkit-transform: 	rotate(-45deg);
    -moz-transform: 		rotate(-45deg);
    -ms-transform: 		rotate(-45deg);
    -o-transform: 		rotate(-45deg);
    transform: 			rotate(-45deg);
}

.csstransforms.nav-open .btn-nav-mid2 {
    -webkit-transform:	rotate(45deg);
    -moz-transform:		rotate(45deg);
    -ms-transform:		rotate(45deg);
    -o-transform: 		rotate(45deg);
    transform: 			rotate(45deg);
}


/*  ========================================================================== */
/*  Links
/*  ========================================================================== */
a {
    color: #782922;
}

a:visited {
    color: #782922;
}

a:focus {
    color: #782922;
    outline: thin dotted;
}

a:hover, a:active  {
    color: #380a05;
    outline: 0;
}

/*  ==========================================================================
/*  Tables
/*  ========================================================================== */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
}


th {
    border-bottom:1px solid #380a05;
    color: #380a05;
    vertical-align: top;
    font-weight: normal;
    text-align: left;
    padding: 1em 1em 1em 0;
}
tr {
    border-bottom:1px solid #eee;
    vertical-align: top;
}
td {
    font-weight: normal;
    text-align: left;
    padding: 1em 1em 1em 0;
}

/*  ========================================================================== */
/*  layout
/*  ========================================================================== */

header, section, footer {
    padding: 0 5%;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/*  ========================================================================== */
/*  logos
/*  ========================================================================== */

.logo {
    display: block;
    margin: 0 auto;
    line-height: 0.01em;
    text-indent: -99999px;
    overflow: hidden;
    width: 360px;
    height:35px;
    background:url('../gfx/logo.png') no-repeat;
}

.homelink {
    font-size: 10px;
    text-transform: uppercase;
    position: absolute;
    text-decoration: none;
    left: 50%;
    margin-left: -15px;
    color: #222;
}

.homelink:hover, .homelink:visited {
    color: #222;
}

/*  ========================================================================== */
/*  browser check
/*  ========================================================================== */

.js .browser-check {
    width: 90%;
    position: fixed;
    top:0;
    bottom:0;
    z-index: 999;
    background-color: #fff;
    text-align: center;
}

.js .browser-check .container {
    margin:100px auto 0;
}

.js .browser-check .logo-large {
    margin:0 0 1em;
}

.js .browser-check .btn-dark {
    display: inline-block;
    margin:1.25em 0 0;
}

.no-js .browser-check {
    background:#782922;
    color: #fff;
    padding: 1em;
    text-align: center;
}

.no-js .browser-check .logo-large, .no-js .browser-check .btn-close {
    display: none;
}

.no-js .browser-check strong {
    color: #fff;
}

.no-js .browser-check .btn-dark {
    background: #fff;
    color: #782922;
    display: inline-block;
    margin:0.2em 0 0;
}

.no-js .browser-check .btn-dark:hover {
    background: #380a05;
    color: #fff;
}

/*  ========================================================================== */
/*  swiper styles
/*  ========================================================================== */

.swiper-container {
    margin:0 auto;
    position:relative;
    overflow:hidden;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    z-index:1;
    width: 100%;
    height: 100%;
    color: #fff;
    min-height: 660px;
}

.swiper-wrapper {
    position:relative;
    width:100%;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease;
    -moz-transition-property:-moz-transform, left, top;
    -moz-transition-duration:0s;
    -moz-transform:translate3d(0px,0,0);
    -moz-transition-timing-function:ease;
    -o-transition-property:-o-transform, left, top;
    -o-transition-duration:0s;
    -o-transform:translate3d(0px,0,0);
    -o-transition-timing-function:ease;
    -o-transform:translate(0px,0px);
    -ms-transition-property:-ms-transform, left, top;
    -ms-transition-duration:0s;
    -ms-transform:translate3d(0px,0,0);
    -ms-transition-timing-function:ease;
    transition-property:transform, left, top;
    transition-duration:0s;
    transform:translate3d(0px,0,0);
    transition-timing-function:ease;
}

.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
}

.swiper-slide {
    float: left;
    padding:0;

}

.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
}

.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
}

.pagination {
    position: absolute;
    width: 100%;
    z-index: 20;
    left: 0;
    right:0;
    bottom: 0;
    padding:0;
    margin:0;
    height: 30px;
    border-bottom: 2px solid #782922;
}

.swiper-pagination-switch {
    position: relative;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    float: left;
    width: 20%;
    height: 30px;
    background: #000;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
    border-right:1px solid rgba(0,0,0,.6);
}

.swiper-pagination-switch:hover {
    background: rgba(56, 10, 5, 1);
}

.swiper-pagination-switch:last-child {
    border-right: 0;
}

.swiper-active-switch, .swiper-active-switch:hover {
    background: #782922;
    opacity: 1;
}

.spacer {
    display: none;
}

/*  ========================================================================== */
/*  swiper content
/*  ========================================================================== */
.swiper-slide h1, h2 {
    line-height: 1em;
    margin:0;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
    font-weight: 900;
    font-size: 3em;
}

.swiper-slide p {
    margin:1em 0 25px 0;
    font-size: 1.5em;
    font-weight: 400;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

.slide {
    background-size:cover;
    text-align: center;
}

.slide-one {
    background: url('../gfx/banner-slide1.jpg') center bottom no-repeat;
    background-size:cover;
    text-align: center;
}

.slide-two {
    background: url('../gfx/banner-slide2.jpg') center bottom no-repeat;
    background-size:cover;
    text-align: center;
}

.slide-three {
    background: url('../gfx/banner-slide3.jpg') center bottom no-repeat;
    background-size:cover;
    text-align: center;
}

.slide-four {
    background: url('../gfx/banner-slide4.jpg') center bottom no-repeat;
    background-size:cover;
    text-align: center;
}

.slide-five {
    background: url('../gfx/banner-slide5.jpg') center bottom no-repeat;
    background-size:cover;
    text-align: center;
}

/*  ========================================================================== */
/*  swiper animations
/*  ========================================================================== */

.csstransforms3d.csstransforms.csstransitions .swiper-slide p, .csstransforms3d.csstransforms.csstransitions .swiper-slide h1, .csstransforms3d.csstransforms.csstransitions .swiper-slide h2 {
    -webkit-transition-property: translate3d, opacity;
    -moz-transition-property: translate3d, opacity;
    -o-transition-property: translate3d, opacity;
    transition-property: translate3d, opacity;
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
    -webkit-transition-duration: 400ms;
    -moz-transition-duration: 400ms;
    -o-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.csstransforms3d.csstransforms.csstransitions .swiper-slide h1, .csstransforms3d.csstransforms.csstransitions .swiper-slide h2 {
    -webkit-transform: 	perspective(0) translate3d(0, -25px, 0);
    -moz-transform: 	perspective(0) translate3d(0, -25px, 0);
    -ms-transform: 		perspective(0) translate3d(0, -25px, 0);
    -o-transform: 		perspective(0) translate3d(0, -25px, 0);
    transform: 			perspective(0) translate3d(0, -25px, 0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}

.csstransforms3d.csstransforms.csstransitions .swiper-slide p {
    -webkit-transform: 	perspective(0) translate3d(0, 25px, 0);
    -moz-transform: 	perspective(0) translate3d(0, 25px, 0);
    -ms-transform: 		perspective(0) translate3d(0, 25px, 0);
    -o-transform: 		perspective(0) translate3d(0, 25px, 0);
    transform: 			perspective(0) translate3d(0, 25px, 0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}

.csstransforms3d.csstransforms.csstransitions .swiper-slide.swiper-slide-active p, .csstransforms3d.csstransforms.csstransitions .swiper-slide.swiper-slide-active h1, .csstransforms3d.csstransforms.csstransitions .swiper-slide.swiper-slide-active h2 {
    -webkit-transform: perspective(0) translate3d(0, 0, 0);
    -moz-transform: perspective(0) translate3d(0, 0, 0);
    -ms-transform: perspective(0) translate3d(0, 0, 0);
    -o-transform: perspective(0) translate3d(0, 0, 0);
    transform: perspective(0) translate3d(0, 0, 0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}



/*  ========================================================================== */
/*  swiper postcode
/*  ========================================================================== */
.se21 {
    position: absolute;
    text-align:center;

    height: 57px;
    width: 	90px;

    bottom:90px;
    left: 50%;

    margin:0 0 0 -45px;
    padding: 33px 0 0;

    background: #fff;
    color: 		#782922;


    font-size: 1.25em;
    font-weight: 900;
    line-height: 0.75em;

    -webkit-border-radius: 100px;
    border-radius: 100px;

    text-decoration: none;

}
.se21 span {
    display: block;
    font-weight: 400;
    color: #555;
    font-size: 0.5em;
}

.se21:hover {
    background: #782922;
    color: #fff;
}

.se21:hover span {
    color: #fff;
}

/*  ========================================================================== */
/*  swiper arrows
/*  ========================================================================== */

.arrow-right, .arrow-left {
    display: none;
}

/*  ========================================================================== */
/*  header styles
/*  ========================================================================== */
header {
    background: #fffde0;
    border-bottom: 2px solid #782922;
    text-align: center;
    padding: 40px 0;
}

header .logo {
    width: 280px;
    height:27px;
    background-size:280px;
}

.internal-page header {
    border-bottom: 0;
}

/*  ========================================================================== */
/*  navigation
/*  ========================================================================== */

nav ul {
    padding:0;
    margin:0;
}

nav li {
    list-style-type: none;
}

nav ul li {
    margin: 0;
}

nav a, nav a:visited {
    border-bottom: 1px solid #dddbbe;
    display: block;
    text-align: center;
    padding: 0.75em 0;
    background:#fffde0;
    color: #555;
    font-weight: 400;
    text-decoration: none;
}

.no-touch nav a:hover, .no-touch nav a:active {
    background:#380a05;
    color: #fff;
}

nav li.active a, .no-touch nav li.active a:hover, .no-touch nav li.active a:active  {
    background:#380a05;
    color: #fff;
}

/*  ========================================================================== */
/*  navigation Internal
/*  ========================================================================== */

.nav-wrap {

    overflow: hidden;
    max-height: 0;

    -webkit-transition-property: max-height, height, background-color;
    -moz-transition-property: max-height, height, background-color;
    -o-transition-property: max-height, height, background-color;
    transition-property: max-height, height, background-color;

    -webkit-transition-duration: 400ms;
    -moz-transition-duration: 	 400ms;
    -o-transition-duration: 	 400ms;
    transition-duration: 		 400ms;
}

.nav-open .nav-wrap {
    max-height: 600px;
}

/*  ========================================================================== */
/*  full width images
/*  ========================================================================== */
.full-width-image {
    padding:0;
}

.full-width-image img {
    display: block;
    max-width: 100%;
    margin:0 auto;
}

/*  ========================================================================== */
/*  content
/*  ========================================================================== */

.content .container {
    padding: 1em 0;
}

.content h1 {
    color: #782922;
    font-size: 2em;
    margin:0 0 1em;
}

.content h2 {
    font-size: 1.5em;
    text-shadow:none;
    margin:0 0 1em;
}

.content.contact-details {
    text-align: center;
}

#location-map {
    min-height: 400px;
}

/*  ========================================================================== */
/*  sub nav
/*  ========================================================================== */

.sub-nav {
    padding:0;
    width: 100%;
}

.sub-nav ul, .sub-nav li {
    padding:0;
    margin:0;
    list-style-type: none;
}

.sub-nav li {
    float: left;
    width:100%;
}

.sub-nav a {
    position: relative;
    display: block;
    background:#380a05;
}

.sub-nav a img {
    display: block;
    width:100%;
}

.no-touch .sub-nav a:hover img {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: .5;
}

.sub-nav a span {
    position: absolute;
    display: block;
    text-align: center;
    top: 50%;
    left:0;
    right:0;
    font-size: 1.5em;
    font-weight: 900;
    color: #fff;
    margin: -.5em 0 0;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}


/*  ========================================================================== */
/*  sub nav wide
/*  ========================================================================== */

.sub-nav-wide {
    width: 100%;
    padding:0;
    text-align: center;
}

.sub-nav-wide ul, .sub-nav-wide li {
    padding:0;
    margin:0;
}

.sub-nav-wide li {
    display: block;
    list-style-type: none;
    background-color: #782922;
    background-size: cover;
    background-position: center center;
}


.sub-nav-wide li a {
    display: block;
    min-height: 400px;
    position: relative;


}
.sub-nav-wide li a span {
    position: absolute;

    text-align: center;
    top: 50%;
    left:0;
    right:0;
    font-size: 2em;
    font-weight: 900;
    color: #fff;
    margin: -.5em 0 0;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

.no-touch .sub-nav-wide li a:hover  {
    background: rgba(56,10,5,.5)
}

.our-brands {
    background: url('../gfx/eyewear-nav-our-brands.jpg') no-repeat;

}

.sport {
    background: url('../gfx/eyewear-nav-sports.jpg') no-repeat;
}

.handmade {
    background: url('../gfx/eyewear-nav-handmade.jpg') no-repeat;
}


.our-history {
    background: url('../gfx/history.jpg') no-repeat;
}

.our-philosophy {
    background: url('../gfx/philosophy.jpg') no-repeat;
}

.meet-the-team {
    background: url('../gfx/team.jpg') no-repeat;
}

.in-the-press {
    background: url('../gfx/press.jpg') no-repeat;
}

/*  ========================================================================== */
/*  products
/*  ========================================================================== */
.product-list {
    padding:2em 5%;
}

.product {
    box-sizing:border-box;
    display: block;
    border: 1px solid #ece3cf;
    position: relative;
    margin: 0 0 1%;
}

.product:hover {
    border-color: #380a05;
}
.product-image {
    display: block;
    max-width: 100%;
}

.product-logo {
    display: block;
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 112px;
}


/*  ========================================================================== */
/*  team
/*  ========================================================================== */
.team-list {
    padding:2em 5%;
}

.team {
    box-sizing:border-box;
    display: block;
    border: 1px solid #ece3cf;
    position: relative;
    margin: 0 0 2%;
}

.team p, .team span {
    padding: 0 2em;
}

.team span {
    text-align: center;
    display: block;
}

/*  ========================================================================== */
/*  exams
/*  ========================================================================== */

.exam-image {

}

.exam-image img {
    display: block;
    margin: 0 auto;
    max-width:100%;
}

/*  ==========================================================================
/*  footer
/*  ========================================================================== */
footer {
    background: #fffde0;
    font-weight: 400;
    font-size: 0.9em;
    text-align: center;
    padding: 2em 5%;
}

footer span {
    display: block;
}

footer a, footer a:visited, footer a:hover {
    display: block;
    padding: 1em;
    background:#782922;
    color: #fff;
    margin:0 0 1px;
    text-decoration: none;
}

.no-touch footer a:hover, .no-touch footer a:active {
    background:#380a05;
    color: #fff;
}

.footer-txt {
    margin: 0 0 2em;
}

.footer-txt span {
    background: none;
}

/*  ========================================================================== */
/*  404
/*  ========================================================================== */
.error-404 {
    text-align: center;
    position: absolute;
    padding: 0 5%;
}

/*  ========================================================================== */
/*  Media Queries
/*  ========================================================================== */

@media only screen and (min-width: 600px) {

    .team {
        min-height: 530px;
    }

    .product, .team {
        float: left;
        width: 49%;
        margin: 0 1% 1% 0;
    }
    .product:nth-child(2n), .team:nth-child(2n) {
        margin:0 0 1%;

    }

}

@media only screen and (min-width: 768px) {
    /*  Typeography  */
    html {
        font-size: 110%;
    }

    /* Browser Check */
    .js .browser-check .container {
        max-width: 60%;
    }

    /* ui */

    .btn-nav {
        display: none;
    }

    /*  header  */
    header {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 777;
        border-bottom: 0;

    }

    header .logo {
        width: 220px;
        height:21px;
        background-size:220px;
    }

    .internal-page header {
        position: relative;
        border-bottom: 2px solid #782922;
    }

    /*  swiper */

    .swiper-container {
        min-height: 0;
    }


    .spacer {
        display: block;
        height: 101px;
        width: 100%;
    }

    /* swiper postcode */
    .se21 {
        top: 30px;
        right : 30px;
        left:auto;
        bottom: auto;
    }

    /* swiper arrows */

    .arrow-right, .arrow-left {

        display: block;
        position: absolute;
        background: red;
        z-index: 100;
        height: 40px;
        width: 40px;
        top:50%;
        margin:-20px 0 0;
        text-indent: -99999px;
        overflow: hidden;
    }

    .arrow-right {
        right: 1em;
        background: transparent url('../gfx/arrow-right.png') no-repeat center center;
    }

    .arrow-left {
        left: 1em;
        background: transparent url('../gfx/arrow-left.png') no-repeat center center;
    }

    /* nav */
    .nav-left, .nav-right {
        font-size:0.7em;
        letter-spacing: -1px;
        width: 35%;
        height: 101px;
    }

    .nav-left {
        position: fixed;
        z-index: 888;
        bottom:0;
        left:0;
    }

    .nav-right {
        position: fixed;
        z-index: 888;
        bottom:0;
        right:0;
    }

    .internal-page .nav-left, .internal-page .nav-right {
        position: absolute;
        top:0;
        bottom:auto;
    }

    .nav-left li, .nav-right li {
        float: left;
        height: 100%;
        line-height: 101px;
        width: 25%;
    }

    .nav-left li a, .nav-right li a {
        background: transparent url('../gfx/menu.png') center 75% no-repeat;
        height: 100%;
        border-bottom:0;
        padding:0;

    }
    .no-touch .nav-left li a:hover, .no-touch  .nav-right li a:hover {
        background: transparent url('../gfx/menu-hover.png') center 75% no-repeat;
        color: #782922;
    }

    nav li.active a, .no-touch nav li.active a:hover, .no-touch nav li.active a:active  {
        background: transparent url('../gfx/menu-hover.png') center 75% no-repeat;
        color: #782922;
    }

    .internal-page .nav-left li.active, .internal-page .nav-right li.active {
        background: transparent url('../gfx/menu-arrow.png') center bottom no-repeat;
        color: #782922;
    }

    .nav-wrap {
        border:0;
    }

    /*  content  */
    .content .container {
        padding: 2em 0;
    }

    /*  sub nav  */

    .sub-nav li {
        float: left;
        width:50%;
    }

    .three-tiles li {
        width:33.33%;
    }

    /*  exams  */

    .exam-image {

    }

    .exam-image img {
        float: left;
        width: 25%;
    }

    .exam-image h2, .exam-image p {
        float: right;
        width: 70%;
    }


    /*  footer  */
    footer {
        padding: 1.5em 5%;
    }

    footer span, footer span.footer-txt {
        display: inline-block;
        margin:0 0 0 1em;

    }

    footer span {
        background:transparent url('../gfx/bul.png') center left no-repeat;
        padding-left:20px;
    }

    footer a, footer a:visited, footer a:hover {
        display: inline;
        padding: 0;
        background:transparent;
        color: #555;
        margin:0;
    }

    .no-touch footer a:hover, .no-touch footer a:active {
        background:transparent;
        color: #380a05;
    }

    .team {
        min-height: 550px;
    }

    .product, .team {
        width: 32%;
        margin: 0 0 1% 0;
    }


    .product:nth-child(3n-1), .team:nth-child(3n-1) {
        margin: 0 1% 1%;
    }

    .footer-txt {
        margin: 0;
    }

}

@media only screen and (min-width: 1100px) {
    /*  sub nav  */

    .sub-nav li {
        float: left;
        width:25%;
    }

    .three-tiles li {
        width:33.33%;
    }

}

@media only screen and (min-width: 1400px) {
    /*  Typeography  */
    html {
        font-size: 120%;
    }

    /*  header  */
    header .logo {
        width: 360px;
        height:35px;
        background-size:360px;
    }


    /*  nav  */
    .nav-left, .nav-right {
        width: 37%;
        height: 115px;
        font-size:1em;
    }

    .nav-left li, .nav-right li {
        line-height: 115px;
    }


    .product, .team {
        width: 23.5%;
        margin: 0 0 1% 0;
    }

    .product:nth-child(3n-1), .team:nth-child(3n-1) {
        margin: auto;
    }

    .product:nth-child(2n), .team:nth-child(2n) {
        margin: 0 1% 1%;
    }

    .product:nth-child(4n), .team:nth-child(4n) {
        margin: 0 0 1% 1%;
    }

    .footer-txt {
        margin: 0;
    }

}

@media only screen and (min-width: 1900px) {
    .team {
        min-height: 650px;
    }

}

@media only screen and (min-width: 2000px) {
    /* nav */
    .nav-left, .nav-right {
        width: 40%;
    }

}

@media only screen and (min-width: 2300px) {
    .team {
        min-height: 680px;
    }

}



@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2 / 1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

    /*  browser check  */
    .gt-ie8 .btn-close {
        background-image:url('../gfx/close@2x.png');
        background-size: 32px;
    }

    .gt-ie8 .btn-close:hover {
        background-image:url('../gfx/close-hover@2x.png');
        background-size: 32px;
    }

    /*  logos  */
    .gt-ie8 .logo {
        background-image:url('../gfx/logo@2x.png');
        background-size: 360px;
    }

    .gt-ie8 header .logo {
        background-size:280px;
    }

}

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px), (min--moz-device-pixel-ratio: 2) and (min-width: 768px), (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 768px), (min-device-pixel-ratio: 2) and (min-width: 768px), (min-resolution: 192dpi) and (min-width: 768px), (min-resolution: 2dppx) and (min-width: 768px) {
    .gt-ie8 header .logo {
        background-size:220px;
    }

    .gt-ie8 .nav-left li a, .gt-ie8 .nav-right li a {
        background-image: url('../gfx/menu@2x.png');
        background-size: 13px;

    }

    .gt-ie8.no-touch .nav-left li a:hover, .gt-ie8.no-touch .nav-right li a:hover {
        background-image: url('../gfx/menu-hover@2x.png');
        background-size: 13px;
    }

    .internal-page .nav-left li.active, .internal-page .nav-right li.active {
        background-image: url('../gfx/menu-arrow@2x.png');
        background-size: 35px;
    }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1400px), (min--moz-device-pixel-ratio: 2) and (min-width: 1400px), (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 1400px), (min-device-pixel-ratio: 2) and (min-width: 1400px), (min-resolution: 1400px) and (min-width: 1400px), (min-resolution: 2dppx) and (min-width: 1400px) {
    .gt-ie8 header .logo {
        background-size:360px;
    }
}


.lt-ie9 .logo {
    background:none;
    text-indent: 0;
    line-height: 1em;
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
}

.product-list ul, product-list li {

    padding:0;
    margin:0;

}