@charset "utf-8";
/* vfm */

/* 
base blue #3f4975 rgba(63,73,117,1) 
base purple #662d91 rgba(102,45,145,1)
*/

/*     -----[ FOUNDATION OVERRIDES ]-----     */

.row.wide { max-width:120rem;}
.row.wide-med { max-width: 105rem;}

[class*="block-grid-"] {margin: 0; padding: 0;}
[class*="block-grid-"] > li {padding: 0;}


/*     -----[ SLICK ]-----     */

.slick-dots {position: relative; bottom: 0px;}
.slick-dots li button:before { font-size:1.1rem; color: #1c3034; opacity:.5}
.slick-dots li.slick-active button:before { opacity:1; color: #1c3034;}
.slick-dots li { margin: 5px 10px;}

/*     -----[ BACKGROUND IMAGES ]-----     */

#bg-image-layer { top:0px; left:0px; position: fixed; z-index:-10; min-width:1920px;  width:100%; height:100%;}
#bg-image-layer div { opacity:0; min-width:1920px;  width:100%;  top:0px; left:0px; position:absolute; transition:2s;}
#bg-image-layer div.visable-image { opacity:1;}
#bg-image-layer img { min-width:1920px;  width:100%;  top:0px; left:0px; opacity:1; position: relative;}

/*     -----[TYPOGRAPHY]-----     */

@font-face {font-family: 'Aller_Lt'; src: url('../fonts/Aller_Lt.ttf');}
@font-face {font-family: 'BebasNeue'; src: url('../fonts/BebasNeue.otf');}
@font-face {font-family: 'Gotham-Thin'; src: url('../fonts/gotham-thin-1-opentype.otf');}

html, body {height: 100%;}
body {font-family: 'Aller_Lt'; margin: 0px; padding: 0px; background-color:#3E1B66; background-image:url(../i/backgrounds/vfm-back.jpg);}
h1, h2, h3, h4, h5 {font-family: 'BebasNeue'; color: #fff;}
h1 {font-size: 4.1rem; }
h2 { font-size:2.9rem;}
h3 { font-size: 1.6rem;}
h4 { font-size: 1.4rem;}

#main-content h2 {float: right; margin-top: 45%;}
#sidebar h1, h2, h3, h4, h5 {}
#sidebar {color: #fff;}
#sidebar h3 {background: #fff; width: 95%; max-width: 95%; color: #000; margin: 3% 2%; padding-left: 5%;}
#sidebar h4 {width: 95%; max-width: 95%; color: #fff; /*margin: 3% 2%; padding-left: 5%;*/}
#sidebar span {padding-left: 5%;}

a {color: #fff;}
.left-menu-text p {color: #fff;}
a:hover {color: #fff;}
p {line-height: 1.3rem; color: #fff;}
strong {}
span {display: block;}

#number span {font-size: 1.3rem; letter-spacing: 0.1rem;}
#number span img {float: left; padding-top: 10px; margin-left: 8px;}

blockquote {
/*  background: #f9f9f9;
  border-left: 10px solid #ccc;*/
	border: none;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""";
}
blockquote:before {
  color: #fff;
  content: open-quote;
  font-size: 8em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {color: #000; margin: 0px 1rem;
  display: inline;
}
cite {text-align: right; color: #fff; width: 100%;}
.external-link {text-align: right; width: 100%;}

.tabs dd > a, .tabs .tab-title > a  {font-family: 'AbrilFatface-Regular';}


form label {color: #fff; font-weight: 600; font-size: 1rem;}
form input:focus {background: #fff!important;}
form textarea:focus {background: #fff!important;}
input[type="text"], input[type="email"], input[type="tel"], textarea {background: rgba(255,255,255,0.8); border: solid 1px #fff!important;}
textarea {}
input[type="submit"] {/*width: 25%;*/ float: right; letter-spacing: 0.05rem; padding: 0.5rem 0.9375rem;
	-webkit-transition: background-color 75ms ease-in;
	transition: background-color 75ms ease-in;
	}
input[type="option"] {color: #484848!important; font-weight: 400; font-size: 0.875rem;}
input[type="submit"]:hover {}
input[type="email"] {}
input[type="email"]:focus {}
textarea {}
button, .button {/*border-radius: 0px; background-color: #83C537;
transition: background-color 0.25s ease-out 0s, color 0.25s ease-out 0s;*/}
button:hover, .button:hover {/*background-color: #030F85;*/}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #484848!important; font-weight: 400; font-size: 0.875rem;
}

/*     -----[NAVIGATION]-----     */

nav {float: right; width: 100%; font-size: 1.2rem; background-color: rgba(102,45,145,1); padding-right: 0.935rem;}
nav ul {list-style-type: none;}
nav li {float: right; margin: 0.3rem 0.7rem;}
nav a { padding: 0.3rem 0.7rem; border-top: solid 3px #662d91;}
nav a:hover {border-top: solid 3px #00AAEA;}

#toggle-nav {display: none; float: right; width: 40px; height: 40px; cursor: pointer;}
#mobile-nav {display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);}
#mobile-nav ul {list-style-type: none; width: 100%; margin: 0px; padding: 0px;}
#mobile-nav li {width: 100%; text-align: center;  margin: 0.5rem 0px;}
#mobile-nav li:last-child {margin-bottom: 1rem;}
#mobile-nav a {display: block; width: 100%; padding: 0.3rem 0.7rem;}
#mobile-nav a:hover {background-color: rgba(0,0,0,0.7);}

/*     -----[BACKGROUND COLOURS]-----     */

header {background-color: rgba(0,0,0,0.5);}
#logo {background-color: rgba(102,45,145,1);}
#number {background-color: rgba(102,45,145,1);}
#inital-bar {background-color: rgba(0,0,0,0.3);}
#sidebar {background-color: rgba(0,0,0,0.5);}
#controls {}
#inner-controls {background-color: rgba(0,0,0,0.7);}
#inner-left {/*background-color: rgba(0,0,0,0.7);*/}
#gallery-container {background-color: rgba(255,255,255,0.6);}
.box {/*background-color: rgba(0,0,0,0.2);*/}
.icon {background-color: rgba(0,0,0,0.2);}

#linkone:hover {background: #662d91;}
#linktwo:hover {background: #662d91;}
#linkthree:hover {background: #662d91;}
#linkfour:hover {background: #662d91;}


/*     -----[SIDEBAR]-----     */

#sidebar {position: fixed; width: 0; /*height: 100%;*/  z-index: 9998;}
#sidebar-inner { width: 100%; /*height: 100%;*/ overflow-y: hidden;}
#sidebar-inner-scroll {position: relative;  width: 100%; min-height: 100%; height: auto; overflow:auto; }
#inner-right {float: left; width: 100%; min-height: 100%; height: auto; overflow: auto;}
#inner-left {float: left; overflow: hidden; width: 0; min-height: 100%; height: auto;}
#inital-bar {position:absolute; left:0px; top:0px; width:100px; height:100%; opacity: 1;}

/* sidebar links */
.box {float: left; overflow: hidden; height: 100%; width:50%; padding: 1.5%; box-sizing: border-box;}
.box img {height:100%; width: auto; border: solid 2px #fff;}
.box a {color: #fff; display:block; height:100%; }
.box a:hover {color: #000;}

/* controls */
#controls {position: relative;  float: right; width:100%; min-height:100px; color:#ffffff; z-index: 100;}
#inner-controls {display: table; width: 100%; height: 45px; border-bottom: solid 1px #fff;}

/* button navigation */
#button-nav {float: right; width: auto; height: auto;}
#prev-service {display: inline; text-align:center; cursor:pointer;}
#next-service {display: inline; text-align:center; cursor:pointer;}
/* toggles */
#open-inner-left {position: relative; float: left; cursor: pointer;}
.open-side {position:absolute; bottom:0px; left:0px; width: 100%; cursor:pointer;}
#close-side {float: right; width: auto; height: 45px;}

/* social links */
#social-links {float: left;}
.icon-social {float: left; width: 45px; height: 45px; margin: 5px; color: #000; text-align: center;}

/*     -----[LAYOUT]-----     */

header {position: fixed; top: 0; float: left; width: 100%; max-width: 100%; min-height: 30px; z-index: 9999;}
footer {position: fixed; bottom: 0; width: 100%; max-width: 100%; color: #fff;}
section {}
article {}
aside {padding: 0px 0.9375rem 0px 1.8rem;}

#logo {float: left; width: 170px; height: 60px; margin: 10px; padding: 10px; box-sizing: content-box; text-align: center;}
#number {float: right; width: 170px; height: 60px; margin: 10px; padding: 10px; box-sizing: content-box; text-align: right; color: #fff;}
#content-container {float: left; width: 100%; max-width: 100%; min-height: 100%; height: auto;}
#main-content {float: right; width: 100%;}
#company-details {float: right; height: 1.1rem; font-size: 0.55rem; margin: 0px 0.7rem;}
#weblink {float: right; height: 1.1rem; font-size: 0.75rem; margin: 0px 0.7rem;}


/* Map */
#location-map {width: 100%; height: auto;}
#map { position:fixed !important; top:0px; left:0px; width:100%; height:100%; z-index: -1;}
.v-m a { color:#ffffff; padding-left:16px;}

/* Facebook */
#fb_posts { transition: 2s; max-height:1000px; overflow:hidden;}
#fb_posts.fb-hidden { max-height:0px; }
#fb_icon { text-align:right; opacity:0.9; cursor:pointer;}
#fb_icon:hover { opacity:1;}

/*     -----[GALLERY]-----     */

#gallery-container {float:right; position: relative; width: 95%; height: 100%; padding: 0px 2.5% 10% 2.5%; overflow: hidden;}
/* main image */
.gallery-main-image {float:left; display: block; width:50%; padding: 2.5% 0px 2.5% 2.5%; box-sizing: border-box;}
.gallery-main-image ul {margin: 0px;}
.gallery-main-image img {border: solid 1px #1C3034;}
.gallery-main-image .slick-slide img { display:block; width:100%;}
/* thumbnails */
.gallery-thumb-image {position: relative; float:left; width:48%; margin: 2.5% 0px 0px 2%; overflow:hidden; box-sizing: border-box;}
.gallery-thumb-image img {float:left; width:31%; margin: 0px 1% 2% 1%; opacity: 0.7;-webkit-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in;}
.gallery-thumb-image img:hover {opacity: 1;}

.gallery-scroll-container {position: absolute; top: 0; left: 0; width: 103%; overflow-y:auto; padding-right: 3%; }

/*     -----[TABS]-----     */

.tabs {float: left;}
.tabs dd > a, .tabs .tab-title > a {width: 96%; height: 13%; padding: 6% 2%; background-color: transparent!important;}
.tabs dd.active > a, .tabs .tab-title.active > a {color: #fff!important;}
.tabs li {text-align: center;}
.tabs-content {float: right; max-width: 80%; max-height: 97%; margin: 0px; padding: 0px;}
.tabs-content > .content {}

/* titles */
#tt-one {background-color: #6e6e69;}
#tt-two {background-color: #786a70;}
#tt-three {background-color: #727152;}
#tt-four {background-color: #52717b;}
/* contents */
#tc-one {width: 100%; height: 100%; background-color: #6e6e69;}
#tc-two {width: 100%; height: 100%; background-color: #786a70}
#tc-three {width: 100%; height: 100%; background-color: #727152}
#tc-four {width: 100%; height: 100%; background-color: #52717b}


/*     -----[CLASSES]-----     */

.noPad {padding: 0px;}
.rotate {
	-webkit-transform-origin: left 50%;
	transform-origin: left 50%;
	-webkit-transform: rotateY(90deg) 1.2s ease-out; /* Safari */
    transform: rotateY(90deg) 1.2s ease-out;
}
.icon {float: right; margin: 5px; color: #fff; box-sizing: content-box; text-align: center; border: solid 2px #fff; border-radius: 200px; cursor: pointer;
	max-width: 43px; 
	max-height: 43px;
}
.icon span {color: #fff;}

.left-menu-text {display: table;}
.cta {border: solid 2px green; font-size: 1.3rem;}


/*     -----[MEDIA QUERY]-----     */

@media only screen and (max-width: 1440px) {
	#logo {width: 150px;}
	nav {font-size: 1rem;}
	nav li {margin: 0.3rem 0.5rem;}
	nav a {padding: 0.3rem 0.5rem;}	
	#sidebar h3 {padding-left: 3%;}
}

@media only screen and (max-width: 1280px) {
	#logo {width: 120px;}
	nav {font-size: 1.2rem;}
	nav li {margin: 0.3rem;}
	nav a {padding: 0.3rem;}
	#sidebar-inner {height: 100%; overflow-y: scroll; padding-bottom: 2rem;}
}

@media only screen and (max-width: 1024px) {
	#logo {width: 120px;}
	nav {width: 15%; background-color: rgba(102,45,145,0);}
	nav ul {display:none;}
	#toggle-nav {display: block;}	
	#gallery-container {width: 90%; padding: 0px;}
	.tabs-content {max-width: 100%;}
	.tabs {min-width: 100%;}
	.tabs li {min-width: 25%;}
	.box {width: 100%;}
	#main-content {float: right; width: 85%;}
	#bg-image-layer div {width: 135%; height: auto;}
}

@media only screen and (max-width: 800px) {
    #logo {width: 25%; height: 54px!important;}
    #social-links {width: 50%;}	
	
}
@media only screen and (max-width: 640px) {
	#number span {font-size: 1.1rem; letter-spacing: 0.1rem;}
}

@media only screen and (max-width: 400px) {
	#logo {width: 25%; height: auto;}
	#number {width: 150px; height: auto;}
}