html {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading h4,
.wf-loading a
{
visibility: hidden;
}
.wf-active h1 .wf-inactive h1,
.wf-active h2 .wf-inactive h2,
.wf-active h3, .wf-inactive h3
.wf-active h4, .wf-inactive h4
.wf-active a, .wf-inactive a {
visibility: visible;
}
@media only screen and (max-width: 1275px) {
body { }
div#logo {}
}
@media only screen and (max-width: 1205px) {
body { }
}
@media only screen and (max-width: 1199px) {
body { }
}
@media only screen and (max-width: 1100px) {
body { }
div#logo {}
div#workbox1 h2, div#workbox2 h2, div#workbox3 h2, div#workbox4 h2, div#workbox5 h2, div#workbox6 h2 { left: 10%; width: 300px;}
}
@media only screen and (max-width: 991px) {
body { }
div#logo {}
}
@media only screen and (max-width: 900px) {
}
@media only screen and (max-width: 850px) {
body { }
div.navsymbol {}
}
@media only screen and (max-width: 750px) {
body { }
div#logo img {margin-left: 10px; height: 40px; top: 25px;}
div.navigation {display: none;}
div.navsymbol { display: block; margin-right: 15px; }
section.jumbotron1 h2 {margin-left: 30px;top: 15px;}
section.jumbotron1 { height: 100px; }
div.footer ul a {display: block; line-height: 12px; top: -40px;}
div.footer p {top: 150px; padding-bottom: 50px;margin-bottom: 100px;}
span#accreditation img { top:120px;; width: 110px; }
}
@media only screen and (max-width: 670px) {
body { }
div#logo {}
div.navsymbol { }
div#workbox1 {display: inline; width: 100%; opacity: 1;}
div#workbox2 {display: inline; width: 100%; opacity: 1;}
div#workbox3 {display: inline; width: 100%; opacity: 1;}
div#workbox4 {display: inline; width: 100%; opacity: 1;}
div#workbox5 {display: inline; width: 100%; opacity: 1;}
div#workbox6 {display: inline; width: 100%; opacity: 1;}
div#workbox1 h2, div#workbox2 h2, div#workbox3 h2, div#workbox4 h2, div#workbox5 h2, div#workbox6 h2 { left: 10%; width: 300px; font-size: 4.1em; top: 2.4em;}
div.workboxall { height: 1800px;}
}
@media only screen and (max-width: 600px) {
body { }
div#logo {}
div.navsymbol {}
}
@media only screen and (max-width: 500px) {
body { }
div#logo {}
div.navsymbol { }
}
@media only screen and (max-width: 450px) {
body { }
div#logo {}
div.navsymbol {}
}
@media only screen and (max-width: 400px) {
body { }
div#logo {}
}
@media only screen and (max-width: 350px) {
body { }
div#workbox1 h2, div#workbox2 h2, div#workbox3 h2, div#workbox4 h2, div#workbox5 h2, div#workbox6 h2 { top: 2.75em; left: 10%; width: 300px; font-size: 3.5em;}
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
width: 100%;
margin-right: 0px;
}
button:focus {outline:0;}
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
min-width: 100%;
position: fixed; /* Stay in place */
z-index: 9999999999; /* Sit on top */
left: 0;
top: 0;
background-color: #ffffff;
display: none;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 2s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
transition-timing-function: ease-in;
transition: all 0.4s ease 0s;
}
/* Position the content inside the overlay */
.overlay-content {
font-family: avenir, sans-serif;
font-weight: 200;
position: relative;
top: 20%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 0px;
text-decoration: none;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
font-size: 50px;
color: #000000;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 50px;
font-family: trumpgothicpro, sans-serif;
font-style: normal;
font-weight: 700;
text-align: left;
margin-left: 40px;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #999999;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
font-family: avenir, sans-serif;
font-weight: 200;
position: absolute;
top: 3%;
right: 10%;
font-size: 70px;
color: #4a2cef;
}
.closebutton {
position: relative;
margin-right: 16px;
float: right;
top: 22px;
padding: 20px;
}
#closebar1 {
width: 40px;
height: 2px;
background-color: #000;
top: 2px;
position: relative;
transform: rotate(-45deg);
}
#closebar2 {
width: 40px;
height: 2px;
background-color: #000;
top: 0px;
position: relative;
transform: rotate(45deg);
}
header.container {
height: 90px;
width: 100%;
font-family: avenir next, sans-serif;
}
#logo img {
position: absolute;
height: 50px;
float: left;
margin-left: 100px;
display: block;
top: 20px;
}
.navsymbol {
position: relative;
margin-right: 20px;
float: right;
top: 28px;
cursor: pointer;
display: none;
}
.bar {
width: 40px;
height: 2px;
background-color: #000;
margin-top: 7px;
}
.navigation {
float: right;
height: 90px;
margin-right: 100px;
}
.navigation a {
position: relative;
top: 35px;
margin-left: 30px;
color: #77776f;
font-family: helvetica, sans-serif;
letter-spacing: 2px;
font-size: 13px;
text-transform: uppercase;
font-weight: 600;
transition-timing-function: ease-in;
transition: all 0.4s ease 0s;
}
.navigation a:hover {
text-decoration: none;
color: #9c883d;
}
@keyframes opencircle {
from { transform: scale(0);}
to {transform: scale(1);}
}
/* Firefox < 16 */
@-moz-keyframes opencircle {
from { transform: scale(0);}
to { transform: scale(1);}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes opencircle {
from { transform: scale(0);}
to { transform: scale(1);}
}
/* Internet Explorer */
@-ms-keyframes opencircle {
from { transform: scale(0);}
to { transform: scale(1);}
}
/* Opera < 12.1 */
@-o-keyframes opencircle {
from { transform: scale(0);}
to { transform: scale(1);}
}
.jumbotron1 {
background-color: #383838;
height: 120px;
position: relative;
width: 100%;
top: 0;
margin-top: 0 !important;
padding-top: 0 !important;
}
.jumbotron1 h2 {
position: relative;
top: 30px;
margin-left: 100px;
color: #fff;
font-family: helvetica, sans-serif;
letter-spacing: 2px;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
transition-timing-function: ease-in;
transition: all 0.4s ease 0s;
float: left;
}
.jumbotron2 {
width: 100%;
height: 700px;
}
.jumbotron2 p {
margin-left: auto;
margin-right: auto;
letter-spacing: 0.3px;
color: black;
position: relative;
top: 100px;
text-align: center;
}
hr {
width: 100%;
border-width: 3px;
}
.footer {
height: 0px;
padding: 0px;
}
.footer ul {
font-family: avenir next, sans-serif;
font-weight: 400;
list-style: none;
display: inline;
width: 100%;
padding: 80px;
text-align: center;
float: right;
height: 0px;
top: -20px;
position: relative;
transition-timing-function: ease-in;
transition: all 0.4s ease 0s;
}
.footer ul a {
font-family: helvetica, sans-serif;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
color: #a2a2a2;
font-size: 13px;
letter-spacing: 2px;
display: inline;
padding: 15px;
text-align: center;
top: -0.5em;
position: relative;
transition-timing-function: ease-in;
transition: all 0.4s ease 0s;
}
.footer ul a:hover {
color: #151515;
text-decoration: none;
transition-timing-function: ease-in;
transition: all 0.4s ease 0s;
}
.footer li {
display: inline;
text-align: center;
}
.footer p {
display: inline;
text-align: center;
position: relative;
padding-top: 30px;
padding-bottom: 50px;
font-size: 0.9em;
width: 100%;
top: 0em;
float: left;
color: #999999;
transition-timing-function: ease-in;
transition: all 0.4s ease 0s;
}
#accreditation img {
position: relative;
display: block;
margin: auto;
width: 140px;
top: -2em;
}
#smalltext p {
font-size: 11px;
text-align: center;
font-family: helvetica, sans-serif;
font-weight: 200;
color: grey;
position: relative;
top: 0px;
}
#smalltext a {
text-align: center;
font-family: helvetica, sans-serif;
font-weight: 600;
color: grey;
text-decoration: underline;
}
/* CSS Document */