/* Master Responsive Style Sheet */ 

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, q, small, strike, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
/*table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; margin-bottom: 20px; }*/

/* basic */
body { font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #333; font-family: 'Oswald', 'helvetica-neue', helvetica, sans-serif; color: #CCC; font-weight: 200; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: #FFF; }
h1 { font-size: 25px; line-height: 35px; margin: 0 0 10px 0; padding: 0; font-weight: 400; color: #FFF; text-transform: uppercase; }
h2 { font-size: 20px; line-height: 25px; margin: 10px 0px; font-weight: 200; color: #FFF; font-family: 'Slabo 27px', 'helvetica-neue', helvetica, sans-serif; border-left: 5px solid #666; padding-left: 20px; }
h2.light { color: #FFF; }
h3 { font-size: 18px; line-height: 20px; margin-bottom: 12px; font-weight: 200; color: #FFF; font-family: 'Slabo 27px', 'helvetica-neue', helvetica, sans-serif;}
h3.bold { font-weight: 600; }
h4 { font-size: 16px; line-height: 21px; font-family: 'Slabo 27px', 'helvetica-neue', helvetica, sans-serif; margin-bottom: 20px; color: #FFF; }
h5 { font-size: 15px; line-height: 21px; font-weight: normal; font-family: 'Slabo 27px', 'helvetica-neue', helvetica, sans-serif; }
h6 { font-size: 14px; line-height: 21px; font-family: 'Slabo 27px', 'helvetica-neue', helvetica, sans-serif; }
p { font-size: 14px; line-height: 20px; margin: 0 0 20px; color: #CCC; font-family: 'Open Sans', arial, sans-serif; font-weight: 200; }
p.small, ul.small { font-size: 13px; }
p.smaller, ul.smaller { font-size: 12px; }
p img { margin: 0; }
em { font-style: italic }
strong { font-weight: bold }
small { font-size: 80% }
blockquote, blockquote p { line-height: 24px; color: #777; font-style: italic; }
blockquote { font-size: 12px; border-left: 1px solid #ddd; margin: 0 0 20px; padding: 10px 20px 10px 19px; }
blockquote cite { display: block; text-indent: 42px; color: #555; position: relative; }
blockquote cite:before { content: "\201c"; font-weight: bold; font-style: normal; font: 94px/74px Arial; position: absolute; top: -2px; left: -36px; }
blockquote cite a, blockquote cite a:visited,blockquote cite a:visited { color: #555; }
hr { border: 1px solid #999; clear: both; height: 0; border-width: 1px 0 0; margin: 15px 0; }
a, a:visited { color: #FFF; text-decoration: underline; outline: 0; }
a.preview { color: #00CCFF; }
a:hover,a:focus { color: #00CCFF; }
p a, p a:visited { line-height: inherit; }
img.scale { width: 100%; height: auto; }
p img.left { float: left; margin: 10px 20px 10px 0; }
p img.right { float: right; margin: 10px 0 10px 20px; }
form, fieldset { margin-bottom: 20px; }
a.null:hover { cursor: pointer !important; }
table { font-family: 'Open Sans', arial, sans-serif; }

ul { list-style: circle outside; padding-left: 20px; font-family: 'Open Sans', arial, sans-serif; font-weight: 200; }
ul li { padding-left: 10px; margin: 0 0 15px 0; color: #CCC; line-height: 20px; }

.float-left { float: left; }
.float-right { float: right; }
.hide-mobile { display: none !important; }
.click-box { cursor: pointer; }
.sep { display: block; clear: both; height: 20px; margin: 0; padding: 0; }
.null { opacity: 0.3; -webkit-opacity: 0.3; }

/* Main Structure */

html, body { width: 100%; min-height: 100%; background-color: #000; }
body { background: #000; }

.container div.sep { clear: both; float: none; display: block; width: auto; margin: 15px 0; height: 3px; }
div.sep-small { height: 1px; border-bottom: 3px dotted #CCC; }
div.sep-big { height: 4px; border-bottom: 3px dotted #CCC; }

/* 960 grid system */
.container { position: relative; display: block; margin: 0 auto; padding: 0 15px; }
.ie7 .container { position: static; }
.container .col { width: 100%; }
body .container .col.alpha { margin-left: 0; }
body .container .col.omega { margin-right: 0; }
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1 }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* Isotope */

.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }


/* Full width layout */

.full-width { margin: 0; padding: 20px 0 20px 0; background: #444;} 
.full-width.center { text-align: center !important; }
.full-width.center-mobile { text-align: center; }
.full-width.grey { background: url(../img/bkg/rust-grey-mid.jpg); background-color: #333; background-size: cover; }
.full-width.cover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.full-width.gallery { padding: 0 !important; margin: 0; overflow:hidden; display: block; background: #FFF; }
.full-width.banner { position: relative; height: 150px; display: block; margin: 50px 0 0 0; padding: 0; overflow: hidden; background-size: cover; overflow: hidden; }
.full-width.banner.short { height: 100px; }
.full-width.banner img { width: 100%; }
.full-width.push-down { margin-top: 50px; }
.full-width.push-down-mobile { margin-top: 50px; }
.full-width.slideshow { position: relative; padding: 0 !important; overflow: hidden; z-index:1; margin-top: 50px; height: 200px; }
.full-width.timeline { position: relative; padding: 0 !important; overflow: hidden; margin-top: 50px; height: 200px; }
.full-width.slideshow.map { margin: 0 !important; }


/* Wreck Tours*/
.full-width.wreck-tour { background: url(../img/bkg/clouds.jpg) no-repeat center bottom; background-size: cover; background-color: #222; padding: 0; }
.full-width.wreck-tour section.container { padding: 0; }
.full-width.wreck-tour .embed-container { margin-top: 50px; }

/* ///////////////////////////////////// MOBILE NAVIGATION ///////////////////////////////////// */

/* Wrap the whole page for mobile purposes */

#page-wrap { float: right; width: 100%; overflow: hidden; background: #000; position: relative; }
#page-wrap.thin { width: 13%; /*pointer-events: none;*/ overflow: hidden;
  -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
}

/* Fix Nav Bar to top for mobiles */

.fix-nav { z-index: 9999; position: fixed; left: 0; top: 0; }

/* Mobile Side Bar and Navigation styling */

#mobile-nav { position: fixed; z-index: 9999; top: 0; width: 87%; height: 100%; background: #333; overflow-y: auto; display: none;
  -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow:    3px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow:         3px 0px 5px 0px rgba(0, 0, 0, 0.75);
  font-family: 'Open Sans', helvetica, arial, sans-serif;
}
#mobile-nav a.close-mobile-nav { position: absolute; right: 0px; top: 0px; padding: 18px; background: url(../img/icons/icon-close.svg) no-repeat center; background-size: 100%; margin: 8px; text-decoration: none; font-weight: normal; }

#mobile-nav ul { clear: both; margin: 0; padding: 0;}
#mobile-nav ul li { margin: 0; padding: 0; }
#mobile-nav ul li a { font-size: 14px; display: block; border-top: 1px solid #484848; border-bottom: 1px solid #2E2E2E; color: #FFF; padding: 15px; text-decoration: none; text-transform: uppercase; font-weight: 100; letter-spacing: 0.2em; }
#mobile-nav ul li:last-child a { border-top: 1px solid #484848; border-bottom: 1px solid #484848; }
#mobile-nav ul ul { display: none; background: #212121; }

#mobile-nav a.book { position: relative; margin: 10px; bottom: 0; display: block; padding: 10px 0; border-radius: 0; }
#mobile-nav a.hide { display: none; }

#site-switch-mobile { display: table; table-layout: fixed; width: 100%; position: absolute; bottom: 0; }
#site-switch-mobile a { display: table-cell; padding: 15px; background: #212121; color: #FFF; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: 200; font-size: 14px; letter-spacing: 0.02em; }
#site-switch-mobile a.site-active { background: #0083A0; }

.search-mobile { float: right; margin-right: 20px; margin-top: 15px; display: block; width: 20px; height: 20px; background: url(../img/icons/icon-search.png) no-repeat center; background-size: 100%; opacity: 0.7; -webkit-opacity: 0.7; }
.search-mobile:hover, .search-mobile:focus { opacity: 1; -webkit-opacity: 1;}

/* Search Box */

.search-box.full-width { display: none; position: fixed; z-index: 100; top: 50px; width: 100%; padding: 10px 0px; background: #333 url(../img/ui/pattern.png); }

.search-box form { display: table; margin: 0; padding: 0; width: 100%; float: right; margin-right: 0px; position: relative; }
.search-box form:after { content: ''; display: table; clear: both; }
.search-box input, .search-box button { float: left; margin: 0; padding: 0; display: table-cell; }
.search-box .search-input { display: block; padding: 10px; border: 1px solid #666; height: 38px; border-radius: 100px; -webkit-border-radius: 100px; padding: 0 50px 0 20px; background: #333; }
.search-box input { width: 100%; font-size: 16px; font-family: 'Open Sans', 'helvetica-neue', helvetica, arial, sans-serif; color: #CCC; border: 0; padding: 7px 0 5px 0; background: transparent; }
.search-box button {
    position: absolute;
    z-index: 100;
    right: 0;
    top: 0;
    margin-left: -1px;
    border: 1px solid #666;
    border-radius: 0 100px 100px 0;
    padding: 10px 20px;
    height: 40px;
    background-color: #666;
    color: #FFF;
    font-weight: normal;
    font-size: 14px;
    background: #666 url(../img/icons/icon-search.png) no-repeat center; background-size: 15px;
    cursor: pointer;
}

.search-box button:hover, .search-box button:focus { cursor: pointer; background-color: #999; }




/* ///////////////////////////////////// HEADER ///////////////////////////////////// */

#top-bar { display: none; }

#head { position: fixed; margin-top: 20px; background-color: #000; padding: 0; margin: 0; height: 51px; z-index: 500; width: 100%; }

#header { height: 100%; }

#menu { display: none; list-style-type: none; }
.subMenu { display: none; }

#head .container { margin: 0; padding: 0;}

a.logo { display: none; margin: 0 auto; padding: 0 20px; display: block; width: 140px; height: 50px; background: url(../img/main/scapa-flow-logo-mobile.png) no-repeat center; background-size: 80%; }

/* Mobile Menu Switch */
#switch { float: left; margin: 0; top: 0; width: 20px; color: #CCC; text-align: center; font-size: 35px; cursor: pointer; padding: 8px 15px; }
#switch:hover, #switch:focus { color: #0083A0; }

/* Search Field */
#search-icon-mobile { float: right; top: 0; margin: 0; width: 30px; height: 30px; padding: 10px 12px; background: url(../img/icons/icon-search2.svg) no-repeat center; background-size: 30px; cursor: pointer; }

#lang-switch { display: none; }


/* ///////////////////////////////////// BANNERS / SLIDESHOWS AND BIG VIDEOS ///////////////////////////////////// */

.slideshow { clear: both; position: relative; top: 0; margin-top: 0; overflow: hidden; }

.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 100%; height: 100%; margin: auto; padding: 0; overflow: hidden; position: relative; }
.cycle-prev:hover, .cycle-next:hover { cursor: pointer; }

.cycle-slideshow > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; background-size: cover !important; /*background-position: -50% !important;*/ }
.cycle-slideshow > div { overflow: hidden; }
.cycle-slideshow > div > img { display: block; width: 100%; height: 100%; z-index: 1; bottom: 0;}

.cycle-btn {
  position: absolute; z-index: 3000; display: block; top: auto; bottom: 10px;
  border-radius: 50%; -webkit-border-radius: 50%;
  width: 30px; height: 30px; padding: 5px;
  -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
  display: none;
}

.cycle-btn.cycle-prev { right: 10px; background: url(../img/ui/arrow-next.svg) no-repeat center center; background-size: 50%; background-color: rgba(0,0,0,0.3); }
.cycle-btn.cycle-next { left: 10px; background: url(../img/ui/arrow-prev.svg) no-repeat center center;  background-size: 50%; background-color: rgba(0,0,0,0.3); }

.cycle-btn.cycle-prev:hover, .cycle-btn.cycle-next:hover { background-color: rgba(0,0,0,0.7); cursor: pointer;}

.shadow {
  position: absolute; z-index: 100; width: 100%; height: 150px; bottom: 0;
  -webkit-box-shadow: inset 0px -60px 70px -19px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0px -60px 70px -19px rgba(0,0,0,0.5);
  box-shadow: inset 0px -60px 70px -19px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Google Map Filters */

.full-width.gmap-filter-controls { display: none; padding: 10px 0; margin-top: -56px; position: relative; z-index: 6000; background: none; }

.full-width.gmap-filter-controls p.label { float: right; font-size: 14px; color: #EEE; margin-right: 10px; padding: 7px 0; }

.gmap-filter-control {
    float: right;
    display: block;
    width: 170px;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("../img/icons/arrow-down2.svg") no-repeat 90% 50%;
    background-size: 20px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
}

.gmap-filter-control select {
    padding: 5px 12px;
    width: 130%;
    font-size: 14px;
    color: #666;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.gmap-filter-control select option { padding: 3px; font-size: 14px; }

.gmap-filter-control select:focus {
    outline: none;
}

.gmap-controls { position: absolute; z-index: 5000; top: 20px; left: 20px; }
.gmap-controls div { 
  background: #666; color: #FFF; 
  padding: 5px 10px; font-size: 20px; line-height: 20px; text-align: center; 
  margin-bottom: 5px; 
  border-radius: 100px; -webkit-border-radius: 100px; 
  cursor: pointer;
}




/* Title Area Over Banner */
.title-area { width: 100%; position: absolute; margin: 0 auto; z-index: 200; display: block; bottom: 0; background: none; text-align: center; background: url(../img/ui/pattern.png); background-color: rgba(0,0,0,0.2); padding: 0 !important; }
.title-area .title { background: none; padding: 0; padding: 0; }
.title-area .title h2 { margin: 0; padding: 0; margin-top: 10px; }
.title-area .title .col { border-bottom: 1px solid #666; padding: 20px 0;}

.title-area .title-bar { display: none; padding: 10px 0; background-color: rgba(0,0,0,0.3);}
#adv-custom-caption { display: block; color: #CCC; margin: 0; float: right; padding: 10px 0; font-weight: 200; background: url(../img/icons/icon-photo.png) no-repeat right center; background-size: 25px; padding-right: 35px; text-align: right; }

/* Breadcrumbs */

ul.breadcrumbs * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }
ul.breadcrumbs  { display: none; list-style: none; padding: 0; margin: 0; padding: 0; overflow: hidden; }
ul.breadcrumbs li { display: block; float: left; padding: 0; margin: 0 5px 0px 0; overflow: hidden; }
ul.breadcrumbs li a:after { content: '>'; padding-left: 10px; }
ul.breadcrumbs li:last-child a:after { content: ''; padding-left: 0px; }
ul.breadcrumbs li a { display: block; padding: 0px 5px 0px 0; color: #EEE; font-size: 12px; text-transform: uppercase; text-decoration: none; }
ul.breadcrumbs li a:hover { color: #00CCFF; }
ul.breadcrumbs li.active a { color: #FFF; }

/*  jQuery Simple Tabs */

.full-width.filter-tabs { overflow: hidden; padding: 10px 0; }
.filter-tabs * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }
.filter-tabs ul { display: inline-block; list-style: none; padding: 0; margin: 0; float: left; }
.filter-tabs.right ul { width: auto; float: right; }
.filter-tabs ul li { display: block; float: left; padding: 0; margin: 0 0 5px 5px; overflow: hidden; }

a.location { background: url(../img/icons/icon-location.png) no-repeat; }
a.wrecks { background: url(../img/icons/icon-wreck.png) no-repeat; }
a.history { background: url(../img/icons/icon-history.png) no-repeat; }
a.trips { background: url(../img/icons/icon-trip.png) no-repeat; }
a.wildlife { background: url(../img/icons/icon-fish.png) no-repeat; }
a.grid { background: url(../img/icons/icon-grid.png) no-repeat; }
a.map { background: url(../img/icons/icon-map.png) no-repeat; }
a.action { background: url(../img/icons/icon-arrow-curve.png) no-repeat; }
a.hsf { background: url(../img/icons/icon-hsf.png) no-repeat; }
a.graves { background: url(../img/icons/icon-cross.png) no-repeat; }
a.blockships { background: url(../img/icons/icon-sheild.png) no-repeat; }
a.search { background: url(../img/icons/icon-search.png) no-repeat; }
a.dive { background: url(../img/icons/icon-dive.png) no-repeat; }
a.tour { background: url(../img/icons/icon-3d.png) no-repeat; }
a.time { background: url(../img/icons/icon-time.png) no-repeat; }

.filter-tabs ul li a {
  display: block; padding: 10px 15px; color: #EEE; font-size: 12px; text-transform: uppercase; text-decoration: none; background-color: #666; position: relative;}
.filter-tabs ul li a.icon { background-size: 20px; background-position: left 10px center; padding-left: 45px; }
.filter-tabs ul li a:hover { background-color: #999; }
.filter-tabs ul li.active a { background-color: #353535 !important; color: #FFF; }
.filter-tabs ul li.active a:before { content: ''; position: absolute; top: 0; right: 0; border-top: 10px solid #444444; border-left: 10px solid #FFF; width: 0; }

.tab-content { display: none; }
#tab-1 { display: block; }

/* Other Wrecks - Inline Tabs */

.tabs-menu-inline { float: left; clear: both; list-style: none; margin: 0; padding: 0; clear: both; }
.tabs-menu-inline li { float: left; margin: 0 5px 0 0; padding: 6px; border: 1px solid #666; border-bottom: 0; }

.tabs-menu-inline li.current { position: relative; background-color: #666; border-bottom: 1px solid #666; z-index: 5; }
.tabs-menu-inline li a { padding: 0px; text-transform: uppercase; color: #fff; text-decoration: none; font-size: 10px; }
.tabs-menu-inline .current a { color: #00CCFF; }

.tabs-container-inline .tab { border: 1px solid #666; background-color: #666; float: left; margin-bottom: 20px; width: auto; }
.tabs-container-inline .tab-content { padding: 20px; display: none; clear: both; min-width: 360px }
.tabs-container-inline #tab-1 { display: block; }

/* Sub Navigation Sidebar */

ul.sub-nav { display: block; list-style: none; margin: 20px 0 0 0; text-align: right; padding: 0; display: block;  }
ul.sub-nav * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }
ul.sub-nav li { padding: 10px; background: #444; margin: 0 0 5px 0; clear: both; display: block; border-right: 2px solid #444; }
ul.sub-nav li a { display: block; text-decoration: none; text-align: right; color: #FFF; text-transform: uppercase; }
ul.sub-nav li:hover { background: #555; margin-left: 0; border-right: 2px solid #CCC; }

ul.sub-nav li.active { background: #666; margin-left: 0; border-right: 2px solid #FFF; }


/* ///////////////////////////////////// MAIN PAGE CONTENT ///////////////////////////////////// */

/* Call to Action Buttons */

.button, button { padding: 12px 25px; display: block; text-align: center; text-decoration: none !important; margin: 10px 0; background: #666; color: #FFF !important; font-size: 1em; text-transform: uppercase; font-weight: 400; border: none; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; font-family: 'Oswald', 'Helvetica Neue', helvetica, arial, sans-serif; line-height: 14px; }
.button:hover, button:hover { background-color: #000; color: #FFF; text-decoration: none; }

.button.grey { background: none; border: 1px solid #666; color: #666 !important; width: 250px; margin: 20px auto; }
.button.grey:hover { background: #666; border: 1px solid #666; color: #FFF !important; }

.button.thin { width: 50%; margin: 0 auto; }

/* Tick List */
ul.tick-list { overflow: hidden; display: block; margin: 0; padding: 0; list-style-type: none; text-align: left; }
ul.tick-list li { float: left; display: inline-block; padding: 0px 20px 0 30px; background: url(../img/icons/icon-tick.svg) no-repeat left center; background-size: 25px; line-height: 25px; }

/* Gallery */
.gallery { overflow: hidden; display: block; margin: 0; }
.gallery span { float: left; overflow: hidden; width: 75px; height: 75px; margin: 0 6px 6px 0; border-radius: 5px; -webkit-border-radius: 5px; }
.gallery span a { display: block; }
.gallery span a img { width: 100px; }



/* ///////////////////////////////////// BOX STYLES ///////////////////////////////////// */


/* Homepage Category Boxes */

.box-cat {
  display: block; overflow: hidden; margin-bottom: 15px; background: #444; position: relative; text-decoration: none;
  -moz-box-sizing: border-box; box-sizing: border-box;
  -webkit-transition: all .3s ease-in; transition: all .3s ease-in;
}
.box-cat * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }
.box-cat .thumb { float: left; width: 100%; height: 200px; margin: 0 0 10px 0; overflow: hidden; position: relative; background-color: #333; }
.box-cat .thumb img { width: 100%; height: auto; display: block; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
.box-cat .desc { display: block; padding: 10px; }
.box-cat .desc h3 { color: #EEE; font-size: 20px; }
.box-cat .desc p { display: block; margin: 0; font-size: 12px; }
.box-cat:before {
  content: ''; position: absolute; top: 0; right: 0;
  border-top: 1px solid #454545; border-left: 1px solid #454545; width: 0;
  -webkit-transition: all .3s ease-in; transition: all .3s ease-in;
}

.box-cat:hover, .box-cat:focus { background: #555; cursor: pointer; }
.box-cat:hover:before { border-top: 15px solid #454545; border-left: 15px solid #FFF; }
.box-cat:hover .desc h3 { color: #00CCFF; }
.box-cat:hover .thumb img { -webkit-transform: scale3d(1.1, 1.1, 0.5); transform: scale3d(1.1, 1.1, 0.5); }

.box-cat.basic .thumb img { width: 100%; }
.box-cat.basic:hover, .box-cat:focus { background: #444; cursor: default; }
.box-cat.basic:hover:before { content: ''; position: absolute; top: 0; right: 0;
  border-top: 1px solid #454545; border-left: 1px solid #454545; width: 0;
  -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }
.box-cat.basic:hover .desc h3 { color: #EEE; }
.box-cat.basic:hover .thumb img { -webkit-transform: none; transform: none; }

/* ///////////////////////////////////// TABLE STYLES ///////////////////////////////////// */

/* Tables Light */
table { width: 100%; border: none; border-collapse:collapse; border-spacing: 0px; margin-bottom: 20px; }
table th { padding: 5px; border: none; font-weight: bold; text-align: left; font-size: 12px; margin: 1px; color: #CCC; }
table td { padding: 5px; border: 1px solid #666; vertical-align: middle; font-size: 12px; line-height: 18px; color: #FFF; background: none; }

/* Tables Dark */
table.dark { width: 100%; border: none; border-collapse:collapse; color: #666; border-spacing: 2px; border-collapse: separate; margin-bottom: 20px; }
table.dark th { padding: 5px; border: none; font-weight: bold; text-align: left; font-size: 12px; margin: 1px; color: #CCC; }
table.dark td { padding: 5px; border: none; vertical-align: middle; font-size: 12px; line-height: 18px; color: #FFF; background-color: #444; }
table.dark td.book {  }
table.dark td a { color: #00CCFF; text-decoration: none; text-transform: uppercase; text-align: center; vertical-align: center; display: block; }
table.dark td a:hover { color: #FFF; }

table.dark td.book a { background: #666; color: #FFF; padding: 5px; }
table.dark td.book a:hover { background: #999; }

/* Downloads Box */

.downloads { display: block; padding: 0px 10px 10px 10px; border: 1px solid #666; margin-top: 40px; }
.downloads h4 { margin: -32px 0 10px 0; padding: 0 10px; background-color: #444; display: inline; position: absolute; }
.full-width.grey .downloads h4 { background-color: #333; }
.downloads a { display: block; color: #CCC; text-decoration: none; padding: 10px 0; margin: 0; font-size: 12px; }
.downloads a:last-child { margin-bottom: 0; }
.downloads a:hover { color: #FFF; }
.downloads.pdf a { padding-left: 40px; background: url(../img/icons/icon-pdf.ico) no-repeat left center; background-size: 30px; }
.downloads.zip a { padding-left: 40px; background: url(../img/icons/icon-zip.png) no-repeat left center; background-size: 30px; }


/* Sidebar Info Box */
.info-box { display: block; padding: 0px 10px 10px 10px; border: 1px solid #666; margin-top: 40px; }
.info-box h4 { margin: -32px 0 10px 0; padding: 0 10px; background-color: #444; display: inline; position: absolute; }
.full-width.grey .info-box h4 { background-color: #333; }
.info-box p { margin-bottom: 0; }


/* Embedded responsive video */

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.iframe-holder { border: 1px solid #CCC; border-radius: 5px; -webkit-border-radius: 5px; overflow: hidden; }
#location-iframe { width: 100%; height: 450px; border-radius: 5px; -webkit-border-radius: 5px; }

/* List Style Tables */

.list-tables {  }
.list-tables ul { padding: 0; margin: 10px 0 20px 0; list-style: none; border: 1px solid #666; }
.list-tables ul li { margin: 0; padding: 5px; line-height: 14px; border-bottom: 1px solid #666; }
.list-tables ul li:last-child { border-bottom: 0; }
.list-tables ul li a { text-decoration: none; }

/* Tool tip */
a.preview { padding: 4px 0px;}
#preview { position:absolute; padding-top: 20px; margin: 0px; display:none; width: 200px; background: url(../img/icons/arrow-up.png) no-repeat left 10px top; background-size: 20px; }
#preview span { background-color: #CCC; padding: 5px 5px 0px 5px; display: block; overflow: hidden; }
#preview img {width: 100%; height: auto; padding: 0px; margin: 0px; }


/* Other Wrecks - Profile Image */

.profile-img { display: block; overflow: hidden; }
.profile-img img { width: 100%; height: auto; display: block; }

/* News page */

#news { text-align: center; display: block; width: 150px; margin: 0 auto; }

#news a.social { margin: 0px 10px 0px 0px !important; float: left; width: 40px; height: 40px; padding: 0; display: block; text-decoration: none; background-color: #999; border-radius: 50%; -webkit-border-radius: 50%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; display: block; }
#news a.social:hover { background-color: #999; }
#news a.social.fb { background-color: #336699; }
#news a.social.twitter { background-color: #0099CC; }
#news a.social.vimeo { background-color: #0099CC; }
#news a.social.instagram { background-color: #a28a6d; }
#news a.social img { width: 100%; }

/* Logos */
.logos { display: block; text-align: center; }
.logos ul { list-style: none; margin: 0; padding: 0; }
.logos li { display: inline-block; width: 200px; }
.logos li a { display: block; }
/*.logos li a img { width: 100%; height: auto; }*/

/* ///////////////////////////////////// FOOTER ///////////////////////////////////// */

#footer .col { margin-bottom: 20px; }

#footer { background: url(../img/bkg/clouds.jpg) center; background-size: cover; background-color: #333; color: #FFF; position: relative; padding-bottom: 100px; }
#footer h4 { color: #FFF; font-weight: 400; margin: 0 0 20px 0; display: block; text-transform: uppercase; padding: 5px 0;}
#footer p { line-height: 18px; font-size: 14px; color: #CCC; }
#footer p span { color: #FFF; font-weight: bold; margin-right: 15px; }
#footer ul { overflow: hidden; margin: 20px 0; padding: 0; }
#footer ul li { overflow: hidden; margin: 3px 10px 3px 0; float: left; display: block; padding: 10px 0; }
#footer ul li a {text-decoration: none; color: #CCC; font-size: 12px; padding: 10px; text-transform: uppercase; }

#footer ul li a { border-bottom: 1px dotted #CCC; width: 80%;}
#footer ul li a:hover { color: #00CCFF; text-decoration: none; }
#footer ul li ul.sub-menu { display: none; }

#footer a { color: #00CCFF; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

#footer form { }
#footer form span { color: #CCC; }
#footer input, #footer select { width: 90%; padding: 10px; background: transparent; font-size: 14px; color: #FFF; -webkit-border-radius: 100px; margin: 0px 0 10px 0; border: 1px solid #CCC; }
#footer label { font-size: 14px; display: block; color: #CCC !important; margin: 0; }
#footer button.submit { padding: 10px; text-align: center; background: #666; border: none; color: #FFF; font-size: 14px; text-transform: uppercase; cursor: pointer; }
#footer .button { display: inline-block; padding: 12px; margin-top: 10px; cursor: pointer; }

#footer h4.trip { background: url(../img/icons/icon-trip.png) no-repeat; }
#footer h4.nav { background: url(../img/icons/icon-compass.png) no-repeat; }
#footer h4.shout { background: url(../img/icons/icon-shout.png) no-repeat; }
#footer h4.email { background: url(../img/icons/icon-email.png) no-repeat; }
#footer h4.wreck { background: url(../img/icons/icon-wreck.png) no-repeat; }
#footer h4.info { background: url(../img/icons/icon-info.png) no-repeat; }
#footer h4.trip { background: url(../img/icons/icon-trip.png) no-repeat; }
#footer h4.tick { background: url(../img/icons/icon-tick2.png) no-repeat; }

#footer h4.icon { padding-left: 40px; background-size: 30px !important; background-position: left center; }

#silhouette { width: 100%; height: 150px; position: absolute; z-index: 100; display: block; bottom: 0; background: url(../img/bkg/footer-wrecks.png) no-repeat bottom center; background-size: 80%; }

/* Bottom BAR */

#bottom { clear: both; margin: 0; background: #000; bottom: 0;  }
#bottom a, #bottom p { color: #999; font-size: 12px; padding-top: 10px; }
#bottom .credit { float: left; text-align: left; }

#bottom .sponsors { display: block; overflow: hidden; float: right; }
#bottom .sponsors a { width: 90px; margin: 10px 10px 0 0; float: left; }
#bottom .sponsors a.thin { width: 50px; margin: 0px 10px 0 0; float: left; }
#bottom .sponsors a img { width: 100%; height: auto; }

#bottom a.social { margin: 0px 0px 0px 10px !important; float: right; width: 40px; height: 40px; padding: 0; display: block; text-decoration: none; background-color: #999; border-radius: 50%; -webkit-border-radius: 50%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; display: block; }
#bottom a.social:hover { background-color: #999; }
#bottom a.social.fb { background-color: #336699; }
#bottom a.social.twitter { background-color: #0099CC; }
#bottom a.social.vimeo { background-color: #0099CC; }
#bottom a.social.instagram { background-color: #a28a6d; }
#bottom a.social img { width: 100%; }

/* Back to Top Link */
#top-link { display: block; position: fixed; z-index: 500; width: 40px; height: 40px; right: 0px; bottom: 20px; background-color: rgba(0,0,0,0.5); cursor: pointer; }
#top-link:hover { background-color: #999; background-color: rgba(0,0,0,0.8); }
#top-link span { display: block; width: 40px; height: 40px; background: url(../img/icons/icon-arrow2.svg) no-repeat center; background-size: 20px; }


/*  Addthis Social Sharing Buttons */
.addthis_sharing_toolbox { margin-top: -8px; float: right; display: inline; }

.zmap_filter { height: 100%; }


/* //////////////////////////////// START OF RESPONSIVE STYLES //////////////////////////////// */

@media screen and (orientation: landscape) and (max-width: 768px) {
	#mobile-nav { width: 50%; }
	#page-wrap.thin { width: 50%; }
}

@media screen and (orientation: portrait) {

}



/* ////////////////////////////////  bigger than mobile version //////////////////////////////// */

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

	.full-width { padding: 15px 0; }

	h1 { font-size: 30px; line-height: 40px; margin-bottom: 15px; }
	h2 { font-size: 16px; line-height: 20px; margin-bottom: 10px; }

	.svg.intro { width: 35px; height: 35px; float: left; margin: 0 10px 0 0; }

	#gmap-iframe { height: 200px; margin: 0px; padding: 0; }

 .container div.sep { margin: 15px 0; height: 3px; }
	div.sep-big { border-bottom: 3px dotted #CCC; height: 5px; overflow: hidden; }

  /* Other wrecks Tabs */
  .tabs-menu-inline li { margin: 0 5px 0 0; padding: 12px; }
  .tabs-menu-inline li a { font-size: 12px; }

}

/* //////////////////////////////// ipad mini or galaxy note version //////////////////////////////// */

@media screen and (min-width: 480px) and (max-width: 768px) {

	.full-width { padding: 15px 0; }
	.full-width.banner { height: 150px; }
	.full-width.banner.short { height: 150px; }
  .full-width.push-down { margin-top: 50px; }
  .full-width.slideshow { height: 300px; }
  .full-width.timeline { height: 300px; }

  .title-area { padding: 0; }
  .title-area .title { padding: 0; }
  .title-area .title .col { padding: 20px 0;}

  div.trip-logo {width: 300px; height: 120px; margin: -60px 0 0 -150px; }

	h1 { font-size: 30px; line-height: 40px; margin: 0 0 15px; padding: 0; }
	h2 { font-size: 18px; line-height: 25px; margin-bottom: 10px; }
  h3.bold { font-size: 18px; line-height: 25px; }

  .article img { float: left; width: 50%; margin: 0 10px 10px 0; }

  .cycle-btn { background-size: 20px; width: 30px; height: 30px; padding: 5px; }
  .cycle-btn.cycle-prev { right: 10px; }
  .cycle-btn.cycle-next { left: 10px; }

  .tabs li { clear: none; }
  .tabs li a { font-size: 12px; padding: 5px 15px; margin: 0px 0 8px 0; }

  .box { max-height: 250px; }

}

/* //////////////////////////////// iPad landscape //////////////////////////////// */

@media screen and (min-width: 768px) {
	.container { width: 720px; }
	.container .col { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
	.container .grid1.col { width: 40px; }
	.container .grid2.col { width: 100px; }
	.container .grid3.col { width: 160px; }
	.container .grid4.col { width: 220px; }
	.container .grid5.col { width: 280px; }
	.container .grid6.col { width: 340px; }
	.container .grid7.col { width: 400px; }
	.container .grid8.col { width: 460px; }
	.container .grid9.col { width: 520px; }
	.container .grid10.col { width: 580px; }
	.container .grid11.col { width: 640px; }
	.container .grid12.col { width: 700px; }

  .container div.sep { margin: 20px 0; height: 3px; }

  /* Full Width Sections */

	.full-width { padding: 30px 0 30px 0; }
  .full-width.center-mobile { text-align: left; }
	.full-width.banner img { width: 100%; }
	.full-width.banner.short { height: 200px; margin-top: 45px; }
	.full-width.banner.short img { margin: 0; }
	.full-width.push-down { margin-top: 80px; }
  .full-width.push-down-mobile { margin-top: 0px; }
  .full-width.slideshow { margin-top: 0; }
  .full-width.timeline { height: 500px; margin-top: 0px; }
  .full-width.banner { height: 300px; margin-top: 0; }

  .full-width.gmap-filter-controls { padding: 5px 0; margin-top: -47px; }
  .full-width.gmap-filter-controls { display: block; } 

  /* 3D Wreck Tours*/
  .full-width.wreck-tour section.container { padding: 0 10px; }
  .full-width.wreck-tour .embed-container { margin-top: 0px; }

  /* Typography */

	body { font-size: 14px; }
	h1 { font-size: 35px; line-height: 40px; }
	h2 { font-size: 20px; line-height: 30px; margin-bottom: 15px; }
	h3 { font-size: 20px; line-height: 30px; }
  h3.bold { font-size: 25px; line-height: 35px; }
	h4 { font-size: 19px; line-height: 24px; }
	h5 { font-size: 17px; line-height: 21px; }
	h6 { font-size: 15px; line-height: 21px; }
	.hide-mobile { display: block !important; }
	a.hide-mobile { display: inline-block; }
	.hide-web { display: none !important;}
	.back { display: block; }
  .sep { height: 1px; display: block; clear: both; }
  .sep .container .col {  }
  p, ul li { font-size: 14px; line-height: 18px; }
  table td, table th { font-size: 12px; }

  /* Header */

	#head { margin-top: 0px; position: relative; padding: 0; margin: 0; height: 50px; z-index: 6000; width: 100%; background: url(../img/bkg/rust-grey-dark.jpg); background-color: #000; }
	#head.fix-nav { position: fixed;  }
	#head .container { margin: auto; padding: auto;}

	a.logo  { display: block; position: relative; z-index: 3000; top: 0px; margin: 0; padding: 0; width: 180px; height: 50px; background: url(../img/main/scapa-flow-logo.png) no-repeat left center; background-size: 100%; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }

	#switch { display: none; }
  .search-mobile { display: none; }
  .search-box.full-width { top: 0; padding: 20px 0; position: relative; }
  .search-box form { margin-right: 20px; width: 350px; }


  /* Main Navigation */

  #menu { display: block; pointer-events: auto; position: static; margin: 0; float: right; list-style-type: none;  }
  #menu ul { float: right; display: block; text-align: right; margin: 0; padding: 0; }
  #menu ul li { float: left; margin: 0; height: 100%; line-height: 0px; list-style-type: none;  }
  #menu ul li a { display: block; position: relative; margin: 0; height: 50px; line-height: 50px; padding: 0px 5px; text-decoration: none; text-transform: uppercase; font-size: 12px; color: #CCC; font-family: 'Titillium Web', helvetica, arial, serif; font-weight: 100; font-family: 'Open Sans', 'helvetica-neue', helvetica, arial, sans-serif; }
  #menu ul li a:hover { color: #FFF; }

  #menu li.active a { color: #00ccff; border-bottom: 3px solid #00ccff; margin-bottom: -3px; }

  /*  Main Navigation - Dropdown Menu */

  #menu a:hover, #menu li:hover a, #menu li.hover a { color: #FFF; }
  #menu li:hover, #menu li.hover { position: relative; z-index: 15; cursor: default; }

  #menu ul li a.dropdown-link { font-weight: 400; }
  #menu ul li a.dropdown-link:after { content: "+"; padding-left: 5px; }

  #menu ul ul {
    background: #222; height: 0; visibility: hidden; position: absolute; z-index: 5000;
    padding: 0; top: 100%; left: 0; margin-top: 0px; text-align: left; height: auto; overflow: hidden; margin-left: 0px;
   }
  #menu ul ul li { float: none; display: block; width: 100%; border: none; padding: 0; min-width: 170px; }
  #menu ul ul li:last-child { border-bottom: none; }

  #menu ul ul li a {
    border-bottom: 1px solid #333 !important;
    line-height: 20px; padding: 8px; margin: 0; color: #CCC !important;
    position: static; display: block; height: auto;
    box-sizing: border-box; -webkit-box-sizing: border-box;
  }

  #menu ul ul li a:hover { color: #00CCFF !important;}
  #menu li:hover > ul, #menu li.hover > ul { visibility: visible }

  /* Search Button in Header */

  #menu ul li.search { background: none; }
  #menu ul li.search a { margin: 0; width: 20px; display: block; background: url(../img/icons/icon-search.png) no-repeat center; background-size: 20px; opacity: 0.5; -webkit-opacity: 0.5; }
  #menu ul li.search a:hover { opacity: 1; -webkit-opacity: 1; }


    /* slideshow */
  .full-width.slideshow { height: 450px; }
  .full-width.cycle-overlay { display: block; padding: 15px 0 !important; }
  .cycle-btn { width: 30px; height: 30px; padding: 5px; }
  .cycle-btn.cycle-prev { right: 10px; }
  .cycle-btn.cycle-next { left: 10px; }

  /* Title Area */
  .title-area { text-align: left; }
  .title-area .title { padding: 0; }
  .title-area .title h2 { margin-top: 20px; }
  .title-area .title .col { padding: 20px 0;}
  .title-area .title-bar { display: block; padding: 10px 0; }
  #adv-custom-caption { margin-top: 0px; font-size: 12px; }

  /* Breadcrumbs */
  ul.breadcrumbs { display: inline-block; }
  ul.breadcrumbs li a { padding: 5px 5px 5px 0; font-size: 12px; }

  /* Page Section Tabs */
  .full-width.filter-tabs { padding: 20px 0 0 0; }
  .filter-tabs ul li { margin: 0 5px 0px 0; }
  .filter-tabs ul li:last-child { margin: 0; }
  .filter-tabs ul li a { padding: 10px 15px; font-size: 12px; }
  .filter-tabs ul li:last-child { margin: 0; }
  .filter-tabs ul li a.icon { background-size: 18px; background-position: left 10px center; padding-left: 40px; }
  .filter-tabs ul li.book { float: right; margin: 0; }

  /* Other wrecks Tabs */
  .tabs-menu-inline li { margin: 0 3px 0 0; padding: 10px; }
  .tabs-menu-inline li a { font-size: 11px; }

  /* Box Categories */
  .box-cat { }
  .box-cat .thumb { margin: 0 10px 0 0; float: left; height: auto; width: 20%; }
  .box-cat .desc { padding: 10px; }
  .box-cat .desc p { display: none; }
  .box-cat .desc h3 { font-size: 22px; margin: 0 0 10px 0; }

  .two-col { display: block; overflow: hidden; margin-top: 20px; }
  .two-col .box-cat { width: 49.5%; margin: 0 1% 10px 0; float: left; }
  .two-col .box-cat:nth-child(even) { margin-right: 0; }

  /* Downloads Box */
  .downloads { padding: 30px 20px 20px 20px; }
  .downloads h4 { margin-top: -40px; margin-left: -10px; }
  .downloads a { font-size: 14px; margin-bottom: 10px; }

  /* Info Box */
  .info-box { padding: 30px 20px 20px 20px; }
  .info-box h4 { margin-top: -40px; margin-left: -10px; }

  /* Sub Navigation Sidebar */
  ul.sub-nav { padding: 0; }
  ul.sub-nav li { margin: 0 0 5px 0; }

  /* Main Content Styles */
  .article img { float: left; width: 40%; margin: 0 15px 15px 0; }

  /* google map */
  .full-width.gmap { height: 400px; }
  .full-width.gmap #gmap-iframe { height: 400px; }
  .full-width.gmap #gmap-iframe #map-canvas { height: 400px; }  

  /* Tick List */
  ul.tick-list { }
  ul.tick-list li { float: none; display: block; padding: 0px 0px 0 40px; }

  /* Testimonials */
  .full-width.testimonials .quote { padding: 20px 0; text-align: left; }
  .full-width.testimonials .quote .crop-circle { width: 120px; height: 120px; float: left; margin: 0 20px 10px 0; }
	
	/* forms */
  .form-box { padding: 15px; }
	form input.thin { width: 300px; }
	form input.medium { width: 400px; }
	form input.wide, form textarea.wide { width: 90%; }	 

  /* footer */
  #footer ul li { display: block; float: none; margin-right: 0; padding: 3px 0px; margin: 0 0 3px 0; }
  #footer ul li a {text-decoration: none; display: block; background-size: 30px; }  

	#footer a.social { width: 40px; height: 40px; }
}

/* //////////////////////////////// wide version //////////////////////////////// */ 

@media screen and (min-width: 960px) {
	.container { width: 960px; }
	.container .grid1.col { width: 60px; }
	.container .grid2.col { width: 140px; }
	.container .grid3.col { width: 220px; }
	.container .grid4.col { width: 300px; }   
	.container .grid5.col { width: 380px; }
	.container .grid6.col { width: 460px; }
	.container .grid7.col { width: 540px; }
	.container .grid8.col { width: 620px; }
	.container .grid9.col { width: 700px; }
	.container .grid10.col { width: 780px; }
	.container .grid11.col { width: 860px; }
	.container .grid12.col { width: 940px; }

  .container div.sep { margin: 25px 0; height: 3px; }

  /* Banner Area */
  .full-width.slideshow { height: 600px; } 
  .full-width.banner { height: 400px; }
  .full-width.timeline { height: 600px; } 
  .full-width.bkg-video { height: 600px; } 
  .full-width.cycle-overlay { padding: 20px 0 !important; }

  .full-width.gmap-filter-controls { padding: 10px 0; margin-top: -56px; }



  .cycle-btn { width: 30px; height: 30px; padding: 5px; }
  .cycle-btn.cycle-prev { right: 20px; }
  .cycle-btn.cycle-next { left: 20px; }

  /* 3D Wreck Tours*/
  .full-width.wreck-tour .embed-container { }

  /* Typography */
  h1 { font-size: 50px; line-height: 65px; margin-bottom: 20px; }
  h2 { font-size: 25px; margin-bottom: 25px; }
  h3 { font-size: 20px; }
  h3.bold { font-size: 25px; line-height: 35px; }
  p, ul li { font-size: 14px; line-height: 18px; }
  table td, table th { font-size: 14px; padding: 10px; }
  table.dark td, table.dark th { font-size: 14px; padding: 10px; }

  /* Header */

  #head a.logo { width: 200px; height: 50px; margin-top: 5px; }

  #head { height: 60px; padding: 0;}

  #menu ul li a { height: 60px; line-height: 60px; padding: 0px 10px; font-size: 14px; } 
  #menu li.active a { border-bottom: 3px solid #00ccff; margin-bottom: -3px; }

  #menu ul ul { width: 250px; }
  #menu ul ul li a { 
    line-height: 20px; padding: 15px; margin: 0; color: #CCC !important; 
  }

  /* Title Area */
  .title-area {  }
  .title-area .title { padding: 0; }
  .title-area .title h2 { margin-top: 20px; }
  .title-area .title .col { padding: 30px 0;}
  .title-area .title-bar { padding: 10px 0; }
  ul.breadcrumbs li a { font-size: 14px; }
  #adv-custom-caption { font-size: 14px; }

  /* Box Categories */
  .box-cat { margin-bottom: 10px; }
  .box-cat .thumb { float: left; width: 25%; height: 120px; margin: 0 20px 0 0; }
  .box-cat .thumb img { width: 120%; }
  .box-cat .desc { padding: 10px; }
  .box-cat .desc p { display: block; }
  .box-cat .desc h3 { font-size: 20px; }

  /* Filter Tabs */
  .full-width.filter-tabs { padding: 30px 0 0 0; }
  .filter-tabs ul li { margin: 0 10px 0px 0;  }
  .filter-tabs ul li a { padding: 15px 20px; font-size: 14px; }
  .filter-tabs ul li a.icon { background-size: 20px; background-position: left 15px center; padding-left: 50px; }

  /* Other wrecks Tabs */
  .tabs-menu-inline li { margin: 0 5px 0 0; padding: 15px; }
  .tabs-menu-inline li a { font-size: 14px; }

  /* Breadcrumbs */
  ul.breadcrumbs { }
  ul.breadcrumbs li a { padding: 10px 5px 10px 0; font-size: 14px; }

  /* Sub Navigation Sidebar */
  ul.sub-nav { padding: 0 0 0 40px; margin: 0; }
  ul.sub-nav li { margin: 0 0 5px 10px; }

  /* Footer */
	#footer ul { }
	#footer ul li { display: block; float: none; margin: 0;} 
  #footer p { font-size: 14px; line-height: 18px; font-size: 400; }

  #bottom .sponsors a { width: 120px; margin: 10px 20px 0 0; float: left; }
  #bottom .sponsors a.thin { width: 90px; margin: 0px 20px 0 0; float: left; }
	
  .form-box { padding: 20px; }
  form label { font-size: 14px; line-height: 18px; font-weight: 200; }

}

/* //////////////////////////////// full wide version //////////////////////////////// */ 

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

  .container { width: 1200px; }
  .container .grid1.col { width: 80px; }
  .container .grid2.col { width: 180px; }
  .container .grid3.col { width: 280px; }
  .container .grid4.col { width: 380px; }
  .container .grid5.col { width: 480px; }
  .container .grid6.col { width: 580px; }
  .container .grid7.col { width: 680px; }
  .container .grid8.col { width: 780px; }
  .container .grid9.col { width: 880px; }
  .container .grid10.col { width: 980px; }
  .container .grid11.col { width: 1080px; }
  .container .grid12.col { width: 1180px; }

  .container div.sep { margin: 30px 0; height: 3px; }

  .full-width { padding: 60px 0; }
  .full-width.slideshow { height: 700px; }
  .full-width.timeline { height: 700px; }
  .full-width.banner { height: 400px; }
  .full-width.banner img { margin-top: -20%; }
  .full-width.banner.short { height: 300px; }

  /* Typography */

  h1 { font-size: 50px; line-height: 60px; margin: 0 0 20px 0; }
  h2 { font-size: 25px; line-height: 35px; margin-bottom: 25px; }
  h3 { font-size: 25px; }
  p, ul li { font-size: 14px; line-height: 18px; }

  /* Main Navigation */
  #head { height: 80px; }
  #head a.logo { width: 250px; height: 60px; margin-top: 10px; }

  #menu ul li a { height: 80px; line-height: 80px; padding: 0px 20px; font-size: 14px; } 
  #menu li.active a { border-bottom: 3px solid #00ccff; margin-bottom: -3px; }

  /* Slideshow */

  .cycle-btn { width: 30px; height: 30px; padding: 5px; }
  .cycle-btn.cycle-prev { right: 40px; }
  .cycle-btn.cycle-next { left: 40px; }

  /* Title Area Over Slideshow */

  .title-area {  }
  .title-area .title { padding: 0; }
  .title-area .title h2 { margin-top: 20px; }
  .title-area .title .col { padding: 40px 0;}
  .title-area .title-bar { padding: 10px 0; }
  ul.breadcrumbs li a { font-size: 14px; }

  /* Box Categories */
  .box-cat { margin-bottom: 15px; }
  .box-cat .thumb { float: left; width: 25%; }

  /* Simple jQuery Tabs */
  .filter-tabs ul li a { font-size: 14px; }
  .filter-tabs ul li a.icon { background-size: 25px; background-position: left 15px center; padding-left: 50px; }

	/* google map */
  .full-width.gmap { height: 700px; }
  .full-width.gmap #gmap-iframe { height: 700px; }
  .full-width.gmap #gmap-iframe #map-canvas { height: 700px; }

}