@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700');
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeueRegular');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
a:link {
    color: #2b7da7;
    text-decoration: none;
}
a:hover {
    color: #294756;
    text-decoration: none;
}
a:visited {
    color: #2b7da7;
    text-decoration: none;
}
p {
    color: #000;
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 700;
}
div {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align: left;
}
.col-text {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
}
#header_hr {
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    border: none;
    height: 1px;
    background-color: #2b7da7;
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #ffffff;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-align: center;
	transition: 0.5s;
}
.topnav a.current {
    float: left;
    display: block;
    color: #174B5F;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-align: center;
}
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #819caa;
    color: #174B5F;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 760 pixels wide, hide all links, except for the first one ("Home"). Show the link that should open and close the topnav (.icon) */
@media screen and (max-width: 760px) {
.show-on-desktop, .hide-on-tablet, .hide-on-mobile {
    display: none;
}
.topnav {
    padding-left: 0;
}
.topnav a:not(:first-child) {
    display: none;
}
.topnav a.icon {
    float: right;
    display: block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 760px) {
.topnav.responsive {
    position: relative;
}
.topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
}
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}
}
/* Slider Style */
.sl-container {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}
.clr {
    clear: both;
}
.sl-container > header {
    padding: 20px 30px 10px 30px;
    margin: 0px 20px 10px 20px;
    position: relative;
    display: block;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.sl-container > header h1 {
    font-family: 'BebasNeueRegular', "Arial Narrow", Arial, sans-serif;
    font-size: 35px;
    line-height: 35px;
    position: relative;
    font-weight: 400;
    color: rgba(26,89,120,0.9);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    padding: 0px 0px 5px 0px;
}
.sl-container > header h1 span {
    color: #2b7da7;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.sl-container > header h3 {
    font-size: 16px;
    font-style: italic;
    color: #2d6277;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
/* Thumbnail Styles */

.background-primary {
    background-color: #2b7da7 !important;
}
.image-hover-overlay-content *, .background-primary, .background-primary p, a.background-primary, a.background-primary:visited, a.background-primary:link, .background-primary a, .background-primary a:link, .background-primary a:visited, .background-primary a:hover, .background-primary a:active, .primary-color-primary .background-primary, .primary-color-primary .background-primary p, .primary-color-primary a.background-primary, .primary-color-primary a.background-primary:visited, .primary-color-primary a.background-primary:link, .primary-color-primary .background-primary a, .primary-color-primary .background-primary a:link, .primary-color-primary .background-primary a:visited, .primary-color-primary .background-primary a:hover, .primary-color-primary .background-primary a:active {
    color: rgba(255,255,255, 0.75);
}
.image-hover-overlay {
    bottom: 0;
    color: rgba(255,255,255, 0.75)!important;
    left: 0;
    opacity: 0;
    padding: 1.25rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    transition: all 0.20s linear 0s;
    -o-transition: all 0.20s linear 0s;
    -ms-transition: all 0.20s linear 0s;
    -moz-transition: all 0.20s linear 0s;
    -webkit-transition: all 0.20s linear 0s;
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.image-hover-overlay:hover {
    opacity: 1;
}
.image-hover-overlay-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    transition: all 0.20s linear 0s;
    -o-transition: all 0.20s linear 0s;
    -ms-transition: all 0.20s linear 0s;
    -moz-transition: all 0.20s linear 0s;
    -webkit-transition: all 0.20s linear 0s;
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.image-hover-overlay:hover > .image-hover-overlay-content {
    top: 50%;
}
.image-with-hover-overlay {
    display: block;
    position: relative;
}
.image-hover-zoom {
    display: block;
    overflow: hidden;
}
.image-hover-zoom img {
    transition: all 0.20s linear 0s;
    -o-transition: all 0.20s linear 0s;
    -ms-transition: all 0.20s linear 0s;
    -moz-transition: all 0.20s linear 0s;
    -webkit-transition: all 0.20s linear 0s;
}
.image-with-hover-overlay img {
    width: 100%;
}
.image-hover-zoom:hover img {
    transform: scale(1.1);
}
.section {
    padding: 2rem 1.25rem;
}
.padding-2x {
    padding: 2.5rem!important;
}
/* Tooltip Customisation */
#prj-imagemap {
    position: relative;
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-shadow-customised .tooltipster-box {
    background: #4992b2;
    border-radius: 6px;
    box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-shadow-customised .tooltipster-content {
    color: #fff;
    padding: 4px;
    font-size: 12px;
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/* Panel Customisation */
.indent {
	padding-left: 1.3em;
}
.panel-default > .panel-heading {
	background-color: #4992b2;
}
.panel-default > .panel-heading a {
	color: #fff;
}
.panel-body {
	border: 1px solid rgba(73,146,178,0.2);
}
.panel-body img {
	float: left;
	padding: 0 15px 15px 0;
}
.prj-list {
	display: inline-block;
}
/* Footer Style */
.footer-text {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #000000;
}
ul.nobullet {
    margin: 0;
    padding: 0;
    list-style: none
}
ul.nobullet li {
    margin: 0;
    padding: 0
}
ul.footer_gallery li {
    display: block;
    float: left;
    margin: 0 5px 5px 0
}
ul.footer_gallery li img {
}
.clear {
    clear: both;
}
.height10 {
    height: 10px;
}
.height20 {
    height: 20px;
}
.footer_top {
    background-color: #ece3d3;
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
}
.footer_top {
    padding: 20px 0px;
}
.footer_top ul {
    float: left;
    margin: 0px;
    padding: 0px;
}
.footer_top ul li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.footer_top ul li:before {
    content: "\002022 ";
    color: #2b7da7;
    font-size: 1.5em;
    vertical-align: middle;
    line-height: 30px;
    margin-right: 10px;
}
.footer_top span.left {
    float: left;
    color: #2b7da7;
    font-size: 1.5em;
    text-align: left;
    line-height: 30px;
}
.footer_top span.right {
    float: left;
}
.footer_top .col-xs-1 {
    padding: 0px;
}
.footer_top .col-xs-11 {
    padding: 0px 0px 0px 10px;
}
.footer_top span.left.fa-envelope {
    font-size: 1.2em;
}
.footer_bottom {
    padding: 20px;
    width: 100%;
    background-color: #c3a88c;
}
.footer_bottom .centre {
    text-align: center;
    font-size: 12px;
}
.footer_bottom .centre fa {
    padding: 15px;
}
.footer_bottom .centre div.soc {
    width: 28px;
    height: 28px;
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    background: #2b7da7;
    color: #333536;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
}
.footer_bottom .centre a:hover div.soc {
    background: #294756;
    color: #819caa;
}

/* Retina display */
@media screen and (min-width: 1024px) {
html, body {
    margin: 16% 0 0 0;
}
#nav {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background-color: #ffffff;
}
#nav-grad {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background: #2b7da7; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #a5dbf5, #649fbc, #2b7da7); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #a5dbf5, #649fbc, #2b7da7); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #a5dbf5, #649fbc, #2b7da7); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #a5dbf5, #649fbc, #2b7da7); /* Standard syntax */
}
.responsive-header {
    height: 200px;
    background-image: url(../images/logos/AQASS.jpg), url("../images/logos/AQASS-company-name.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 19%, 25%;
    background-position: 3%, 29%;
}
.newspaper {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align: left;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
.topnav {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 500;
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 35%;
    margin-left: 55%;
}
}

/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px) {
html, body {
    margin: 16% 0 0 0;
}
#nav {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background-color: #ffffff;
}
#nav-grad {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background: #2b7da7; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #a5dbf5, #649fbc, #2b7da7); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #a5dbf5, #649fbc, #2b7da7); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #a5dbf5, #649fbc, #2b7da7); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #a5dbf5, #649fbc, #2b7da7); /* Standard syntax */
}
.responsive-header {
    height: 200px;
    background-image: url(../images/logos/AQASS.jpg), url("../images/logos/AQASS-company-name.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 19%, 25%;
    background-position: 3%, 29%;
}
.newspaper {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
.topnav {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 500;
    background-color: #2b7da7;
    overflow: hidden;
    position: absolute;
    top: 35%;
    width: 100%;
    margin-left: 55%;
}
}

/* Tablet */
@media screen and (min-width: 761px) and (max-width: 980px) {
html, body {
    margin: 16% 0 0 0;
}
#nav {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background-color: #ffffff;
}
#nav-grad {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background: #2b7da7;
}
.responsive-header {
    height: 180px;
    background-image: url(../images/logos/AQASS.jpg), url("../images/logos/AQASS-company-name.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 19%, 25%;
    background-position: 3%, 29%;
}
.newspaper {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
}
.topnav {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 500;
    background-color: #2b7da7;
    overflow: hidden;
    position: absolute;
    top: 35%;
    width: 100%;
    margin-left: 55%;
}
}

/* Mobile HD */
@media screen and (min-width: 285px) and (max-width: 760px) {
html, body {
    margin: 0;
}
#nav {
    width: 100%;
    position: relative;
    top: 0;
    background-color: #ffffff;
}
#nav-grad {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background: #2b7da7;
}
.responsive-header {
    height: 100px;
    background-image: url(../images/logos/AQASS.jpg), url("../images/logos/AQASS-company-name.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 25%, 25%;
    background-position: 2%, 36%;
}
.newspaper {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
.topnav {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 500;
    background-color: #2b7da7;
    overflow: hidden;
    top: 0;
    width: 33%;
    margin-left: 67%;
}
.topnav a {
    padding: 3px 5px;
}
.height100 {
    height: 100px;
}
}

/* Mobile LD */
@media screen and (min-width : 285px) and (max-width: 350px) {
html, body {
    margin: 0;
}
#nav {
    width: 100%;
    position: relative;
    top: 0;
    background-color: #ffffff;
}
#nav-grad {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
    background: #2b7da7;
}
.responsive-header {
    height: 100px;
    background-image: url(../images/logos/AQASS.jpg), url("../images/logos/AQASS-company-name.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 25%, 25%;
    background-position: 2%, 36%;
}
.newspaper {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 400;
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
.topnav {
    font-family: 'Quicksand', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: #ffffff;
    background-color: #2b7da7;
    overflow: hidden;
    top: 0;
    width: 33%;
    margin-left: 67%;
}
}
