@charset "UTF-8";


@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=4.7.0');
  src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
  url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
  url('fontawesome-webfont.woff?v=4.7.0') format('woff'), 
  url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
  url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

BODY {
	padding: 0;
	margin: 0;
	overflow: hidden;
	font-family: Arial;
	background-image: url(../images/warning-tile.jpg);
}
BODY #footer {
	position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    height: 50px;
    text-align: center;
    color: #FFF;
    font: 16px/50px Arial;
}
BODY #footer A {
	font: 16px/50px Arial;
	text-decoration: none;
	color: #FFF;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
#pageLoader {
	position: absolute;
	z-index: 10000;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	color: #FFF;
	text-align: center;

	background-image: url("../images/logo-white.png");
	background-repeat: no-repeat, no-repeat;
	background-position: center 90%, center;
	background-size: 640px, cover;
	
	font-size: 24px;
	font-family: tahoma;
    font-style: italic;
    font-weight: bolder;
    text-shadow: 0 0 5px #000;


	transition: transform 1s;
    -webkit-transition: -webkit-transform 1s;

    transform: translate3d(0%,0,0);
    -webkit-transform: translate3d(0%,0,0);
}
#pageLoader.hide {
	transform: translate3d(-101%,0,0);
    -webkit-transform: translate3d(-101%,0,0);
}
#pageLoader>DIV {
	margin-top: 200px;
}
#pageLoader .loadbar {
	width: 80%;
	max-width: 400px;
	height: 24px;
	border: 2px solid #FFF;
	border-radius: 12px;
	margin: -12px auto;
	overflow: hidden;
	box-shadow: 4px 4px 12px #000;
}
#pageLoader .loadbar>DIV {
	width: 0%;
	height: 100%;
	background-color: #007eff;
	border-radius: 6px;

	transition: width .5s;
    -webkit-transition: width .5s;
}
#pageLoader #loginMenu {
	float: none;
	margin: 100px auto;
	color: #000;
	text-shadow: none;
	box-shadow: 0 0 10px #000;
}
#pageCover {
	display: none;
	position: absolute;
	z-index: 10000;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
	color: #FFF;
	font: 24px/300px Arial;
	font-style: italic;
	text-align: center;
}
#mainBox {
	position: absolute;
	z-index: 1;
	top: 68px;
    left: 20px;
    width: 775px;
    height: 555px;
    background-color: rgba(255,255,255,0.8);
}
.loginLink {
	position: absolute;
    z-index: 1000;
    top: -6px;
    right: -1px;
    background-color: #FFF;
    padding: 8px 10px;
    border: 1px solid #000; 
}
.loginLink A{
	font-size: 14px;
	text-decoration: none;
}
.loginSlide {
	position: absolute;
	z-index: 1000;
	width: 130px;
	top: 28px;
	right: 0;
	font-size: 13px;	
	background: #e2e2e2;
	padding: 5px;
	text-align: center;
	box-shadow: 0 0 4px #000;
	border-radius: 6px;


	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	-ms-transition: -ms-transform .5s;
	-o-transition: -o-transform .5s;
	transition: transform .5s;

	transform: translate3d(103%,0,0);
	-webkit-transform: translate3d(103%,0,0);	
	-ms-transform: translate3d(103%,0,0);
}

.loginSlide.open {
	transform: translate3d(-1%,0,0);
	-webkit-transform: translate3d(-1%,0,0);
	-ms-transform: translate3d(-1%,0,0);
}
.loginSlide FORM {
	padding: 0;
	margin: 0;
}
.loginSlide INPUT {
	width: 120px;
	font-size: 14px;
	outline: none;
}
.loginSlide P {
	font-weight: bold;
	color: #000;
	margin: 3px 0 1px;
	font-style: italic;
}
.loginError {
	text-align: center;
    font: bold 24px/40px Arial;
    color: #ffffff;
    background-color: rgba(218, 6, 7, 0.8);
}
.loginSlide .loginError.show {
	visibility: visible;
}
.loginSlide #contractorSubmit {
	display: inline-block;
    background-color: #7cb8f3;
    box-shadow: 2px 2px 2px #000;
    border-radius: 6px;
    color: #FFF;
    width: 92px;
    height: 26px;
    margin-bottom: 6px;
    font: 16px/26px Arial;
    border: 0;
    cursor: pointer;
}
.loginSlide #contractorSubmit:hover {
	background-color: #dec14b;
	color: #000;
}
.icon {
    line-height: 20px;
    margin-right: 0px;
    pointer-events: none;
}
.icon:before {
	display: inline-block;
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    speak: none;    
    width: 24px;
    font-size: 20px;
}
.icon:after {
  display: inline-block;
  font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    speak: none;    
    width: 24px;
    font-size: 22px;
    margin-left: -25px;
}
.icon-sync:before {
  content: "\f021";
}
.icon-fileemail:before {
  content: "\f0e0";
}
.icon-fileemail:after {
  content: "\f016";
}
.icon-chain:before {
  content: "\f0c1";
}
.icon-id:before {
  content: "\f05a";
}
.icon-fileupload:before {
  content: "\f093";
  font-size: 18px;
  margin-left: 1px;
}
.icon-fileupload:after {
  content: "\f016";
}
.icon-filedate:after {
  content: "\f016";
}
.icon-filedate:before {
  content: "\f073";
}
.icon-filemap:before {
  content: "\f0ac";
  font-size: 20px;
  margin-left: 1px;
}
.icon-filemap:after {
  content: "\f016";
}
.icon-filewrite:before {
  content: "\f1c2";
}
.icon-filetext:before {
  content: "\f0f6";
}
.icon-fileimage:before {
  content: "\f1c5";
}
.icon-exit:before {
  content: "\f08b";
}
.icon-tables:before {
  content: "\f0ce";
}
.icon-text:before {
  content: "\f035";
}
.icon-menu:before {
	content: "\f0c9";
}
.icon-rightarrow:before {
	content: "\f061";
}
.icon-work:before {
	content: "\f0ad";
}
.icon-safety:before {
	content: "\f19c";
}
.icon-admin:before {
	content: "\f013";
}
.icon-man:before {
	content: '\f007';	
	font-size: 26px;
    margin: -2px 0;
}
.icon-search:before {
	content: "\f00e";
}
.icon-project:before {
	content: "\f0b1";
}
.icon-forms:before {
	content: "\f15c";
}
.icon-signature:before {
	content: "\f044";
}
.icon-close:before {
	content: "\f05c";
	font-size: 36px;
    padding: 10px;
}
.icon-label:before {
  content: "\f02b";
}
.icon-trash:before {
	content: "\f1f8";
}
.icon-chart:before {
	content: "\f201";
}
.icon-download:before {
	content: "\f019";
}
.icon-upload:before {
	content: "\f093";
}
.icon-reports:before {
	content: "\f03a";
}
.icon-links:before {
	content: "\f0ec";
}
.icon-table:before {
	content: "\f0ce";
}
.icon-map:before {
	content: "\f0ac";
}
.icon-pluscircle:before {
	content: "\f055";
}
.icon-pointright:before {
	content: "\f061";
}
.icon-xml:before {
	content: "\f1c3";
}
.icon-checkedbox:before {
	content: "\f046";
}
.icon-radio:before {
	content: "\f192";
}
.icon-video:before {
	content: "\f03d";
}
.icon-forward:before {
	content: "\f04e";
}
.icon-shared:before {
	content: "\f1e1";
}
.icon-shared2:before {
	content: "\f045";
}
.icon-image:before {
	content: "\f03e";
	margin-left: -2px;
    margin-right: 2px;
}
.icon-alert:before {
	content: "\f12a";
}
.icon-doc:before {
	content: "\f0f6";
}
.icon-info:before {
	content: "\f05a";
}
.icon-edit:before {
	content: "\f040";
}
.icon-delete:before {
	content: "\f056";
}
.icon-email:before {
	content: "\f0e0";
	margin-left: -1px;
    margin-right: 1px;
}
.icon-save:before {
	content: "\f0c7";
}
.icon-camera:before {
	content: "\f083";
}
.icon-adduser:before {
	content: "\f234";
}
.icon-calendar:before {
	content: "\f073";
}
.icon-enter:before {
	content: "\f090";
}
.icon-database:before {
  content: "\f1c0";
}
.icon-list:before {
	content: "\f0ca";
	margin-left: -2px;
    margin-right: 2px;
}
.icon-location:before {
	margin-left: 3px;
    margin-right: -3px;
	content: "\f041";
}
.icon-eye:before {
	content: "\f06e";
	margin-right: 2px;
}
.icon-noeye:before {
	content: "\f070";
	margin-right: 2px;
}

a {
	display: inline-block;
	font: 13px/13px Arial;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;;
}

.pageTitle {
	margin: 10px 0;
	font: 18px/18px Arial;
	font-weight: bold;
	color: #006bff;
}
#TorbridgeLogo {	
	width: 70%;
    height: 40%;
	background: url(../images/logo-white.png) no-repeat center;
	background-size: contain;
	margin: 50px auto;
	opacity: 1;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);

	animation-name: fadein;
    animation-duration: 2s;
    animation-timing-function: ease-out;

    -webkit-animation-name: fadein;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-out;
}
@keyframes fadein {
    0%   {opacity: 0;transform: translate3d(0,-100%,0); }
    100% {opacity: 1; transform: translate3d(0,0,0); }
}
@-webkit-keyframes fadein {
    0%   {opacity: 0;  -webkit-transform: translate3d(0,-100%,0);}
    100% {opacity: 1;  -webkit-transform: translate3d(0,0,0);}
}

#SafetyFirst {
	max-width: 759px;
	max-height: 300px;
	width: 90%;
    height: 30%;
	background: url(../images/safetyfirst.png) no-repeat center;
	background-size: contain;
	margin: 50px auto;
	opacity: 1;
	transform: scale(1);
	-webkit-transform: scale(1);
	pointer-events: none;
	
	animation-name: stamp;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(0.98, 0.21, 1, 1);

    -webkit-animation-name: stamp;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: cubic-bezier(0.98, 0.21, 1, 1);
}

@keyframes stamp {
    0%   {opacity: 0; transform: scale(4);}
    50%  {opacity: 0; transform: scale(4);}
    60%  {opacity: 1; transform: scale(4);}
    100% {opacity: 1; transform: scale(1);}
}
@-webkit-keyframes stamp {
    0%   {opacity: 0; -webkit-transform: scale(4);}
    50%  {opacity: 0; -webkit-transform: scale(4);}
    60%  {opacity: 1; -webkit-transform: scale(4);}
    100% {opacity: 1; -webkit-transform: scale(1);}
}

#appAndroid {
	margin: 10px auto;
	text-align: center;
    font: 18px/30px Arial;
    color: #FFF;
    width: 500px;
    padding-top: 5px;
    background-color: rgba(0,0,0,0.7);
    border-radius: 20px;
}
#appAndroid A {
    display: block;
    width: 500px;
    height: 100px;
    background-image: url(../images/googleplaylogo.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-decoration: none;
    margin: 0 auto;
    padding-left: 20px;
    margin: -12px auto;
}
#appAndroid A:before {
	content:" ";
	display: inline-block;
	width: 80px;
    height: 80px;
    float: left;
    background-image: url(../images/icon.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin-top: 10px;
}

@media only screen and (max-width: 720px) {
	
	BODY {
		background-size: cover;
	}
	#TorbridgeLogo {	
			width: 100%;
	    height: 35%;
	  }

	#SafetyFirst {
			width: 100%;
	    height: 30%;
	}

}