body {
	margin: 0;
	padding: 0;
	font-family: 'Rubik', sans-serif;
	font-size: 16px;
	background-color: #aabbd7;
}

* {    
	box-sizing: border-box;	
}

.navLink {color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold;}
a:link {color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold; display: inline-block; position: relative;}
a:visited {color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold;}
a:hover {color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold; text-decoration: underline;}
a:hover::after {content: ''; position: absolute; left: 0; display: inline-block; height: 1em; width: 100%; margin-top: 5px;}
a:active { color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold;}

a.navLink:link {color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold; display: inline-block; position: relative;}
a.navLink:visited {color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold;}
a.navLink:hover {color: #ff9900; text-decoration: none; font-size: 18px; font-weight: bold;}
a.navLink:hover::after {content: ''; position: absolute; left: 0; display: inline-block; height: 1em; width: 100%; margin-top: 5px;}
a.navLink:active { color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold;}

.topBar {width: 100%; height: 20px; position: fixed;	margin-top: -80px; background-color: #3473be; z-index: 100;}

.headerRow {
	width: 100%;
	height: 60px;	
	position: fixed;
	margin-top: -60px;
	background-color: #80aadd;	
	z-index: 100;
}

.headerLogo {
	width: 25%;
	height: 100%;
	float: left;
	padding: 5px;
}

.frontLogoZone{
	float: left;
	width: 100%;
	text-align: center;
	padding-bottom: 100px;
}

@keyframes growingLogo {
	0% {width: 0%;}
	25% {width: 0%;}
	100% {width: 20%;}
}

.frontLogo {
	width: 20%;
	animation-name: growingLogo;
	animation-duration: 4s;		
}

.logo {
	width: 203px;
	height: 43px;
	margin-left: 25px;	
	margin-top: 1px;
	display: block;		
}

.fbLogoZone {
	width: 24%;
	float: left;
	padding-top: 15px;
	padding-right: 25px;
	text-align: right;
}

.fblogo {		
	height: 30px;
}

.fblogo-m {	
	height: 20px;	
	vertical-align: bottom;
	padding-bottom: 4px;
}

.navLinkCell {
	width: 50%;
	height: 100%;
	float: left;
	padding-left: 5px;
	padding-top: 22px;
	text-align: justify;
	background-color: #80aadd;	
}

.navLinkCell:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.mainPicZone{
	width: 100%;
	overflow: hidden;
	display: flex; justify-content: center; align-items: center;
}

.empty80px{
	width: 100%;
	height: 70px;
}

.contentZone1 {
	width: 100%;
    min-height: 600px;
    background-image: url('../images/skyscrwfig.png');
    background-repeat: no-repeat;
	background-size: cover;	
	margin-top: -60px;
}

.content1Text1 { padding-top: 20px; padding-left: 20px; padding-right: 50px; font-size: 18px;}
.content1Text2 { width: 100%; padding-top: 20px; padding-left: 50px; padding-right: 20px; text-align: right; font-size: 22px;}
.content1Text3 { padding-top: 20px; padding-left: 20px; padding-right: 50px; font-size: 16px;}
.content1Text4 { width: 100%; padding-top: 20px; padding-left: 50px; padding-right: 20px; text-align: right; font-size: 20px;}
.content1Text5 { padding-top: 20px; padding-left: 20px; padding-right: 50px; font-size: 18px;}
.content1Text6 { width: 100%; padding-top: 20px; padding-left: 50px; padding-right: 20px; text-align: right; font-size: 24px;}
.emph { text-decoration: none;}

.transparentHeader{
	width: 100%;
	height: 60px;
	margin: 0px;
	background: rgba(52,115,190,0.8);			
	float: left;
	padding-top: 20px;
	padding-left: 25px;
	font-size: 18px;
	color: #ffffff;
	font-weight: bold;
}

.tpHeaderWithLogo{
	padding-top: 14px;
	padding-left: 20px;
}

.contentLogo {	
	height: 30px;		
	display: block;			
}

.transparentContent {
	width: 100%;
	min-height: 510px;	
	background: rgba(50,50,50,0.7);		
	font-size: 16px;
	padding: 20px;
	color: #ffffff;	
	float: left;
}

.transparentFooter{
	width: 100%;
	height: 30px;	
	background: rgba(30,30,30,0.8);				
	padding-top: 0px;
	padding-left: 0px;	
	float: left;
}

.contentZone2 {
	width: 100%;
    min-height: 600px;
    background-image: url('../images/skyscr.png');
    background-repeat: no-repeat;
    background-size: cover;    	
	margin-top: 10px;
	padding-top: 0px;	
	float: left;
}

.pad0 { padding: 0px;}

.contentZone5 {
	width: 100%;
    min-height: 730px;
    background-image: url('../images/skyscr.png');
    background-repeat: no-repeat;
	background-size: cover;
	margin-top: 10px;
	margin-bottom: 10px;	
}

.contactInfoZone{width: 100%; height: 220px; display: flex; justify-content: center; align-items: center;}
.contactBox{width: 90%; height: 180px;}
.mapZone{width: 100%; height: 420px; margin-top: 10px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center;}
.mapBox{width: 90%; height: 400px;}

[class*="col-"] {
    float: left;    
    border: 0;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.nav { background-color: #80aadd;}
.showOnTablet {background-color: #80aadd;}
.hideOnDesktop {background-color: #80aadd;}
.pad { padding: 5px;}

.footerrow {	
	width: 100%;
	height: 60px;		
	color: #ffffff;
	background-color: #3473be;	
	padding: 5px;
}

.footerrow2 {
	width: 100%;
	height: 35px;
	color: #ffffff;
	background-color: #224d80;
}

.footer {
	width: 100%;
	text-align: center;
	padding-top: 15px;
}

a[name] {
  padding-top: 80px;
  margin-top: -80px;
  display: inline-block; /* required for webkit browsers */
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;	
}
.empty {display: none;}
.empty-m {display: none;}
.showOnTablet {display: none;}
.hideOnDesktop {display: inline;}
.nav {display: inline;}
.navLink {padding-left: 32px;}
.headerRow {	display: none;}
.topbar {position: static; margin-top: 0px;}	
.content {margin-top: 0px;}
.content2Zone1 {width: 100%; background-image: url('../images/crm.png'); font-size: 32px; font-weight: bold;}
.content2Zone2 {width: 100%; background-image: url('../images/collab.png'); font-size: 32px; font-weight: bold;}
.content2Zone3 {width: 100%; background-image: url('../images/project.png'); font-size: 32px; font-weight: bold;}
.content2Zone4 {width: 100%; background-image: url('../images/custom.png'); font-size: 32px; font-weight: bold;}
.content4Zone1 {width: 100%; opacity: 1.0;}
.content4Zone2 {width: 100%; opacity: 1.0;}
.content4Zone3 {width: 100%; opacity: 1.0;}
.content4Zone4 {width: 100%; opacity: 1.0;}
.content4Zone5 {width: 100%; opacity: 1.0;}
.content4Zone6 {width: 100%; opacity: 1.0;}
.content4Zone7 {width: 100%; opacity: 1.0;}
.content4Zone8 {width: 100%; opacity: 1.0;}
.content4Zone9 {width: 100%; opacity: 1.0;}
.content4Zone10 {width: 100%; opacity: 1.0;}
.mainPicZone { height: 500px;}
.mainPicZone_old {height: 500px;}

@media only screen and (min-width: 768px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}			
	.nav {display: none;}
	.navLink {padding-left: 0px;}
	.tabletLinkCell {padding-left: 35px; padding-bottom: 15px; width: 100%; background-color: #80aadd;}
	.firstNavLink {padding-left: 35px;}
	.empty {display: none;}	
	.empty-m {display: inline;}	
	.showOnTablet {display: inline;}
	.hideOnDesktop {display: inline;}
	.topbar {position: static; margin-top: 0px;}	
	.content {margin-top: 0px;}	
	.content2Zone1 {width: 50%; background-image: url('../images/crm_lights.png');}
	.content2Zone2 {width: 50%; background-image: url('../images/collab_lights.png');}
	.content2Zone3 {width: 50%; background-image: url('../images/project_lights.png');}
	.content2Zone4 {width: 50%; background-image: url('../images/custom_lights.png');}
	.content4Zone1 {width: 50%; opacity: 0.5;}
	.content4Zone2 {width: 50%; opacity: 0.5;}
	.content4Zone3 {width: 50%; opacity: 0.5;}
	.content4Zone4 {width: 50%; opacity: 0.5;}
	.content4Zone5 {width: 50%; opacity: 0.5;}
	.content4Zone6 {width: 50%; opacity: 0.5;}
	.content4Zone7 {width: 50%; opacity: 0.5;}
	.content4Zone8 {width: 50%; opacity: 0.5;}
	.content4Zone9 {width: 50%; opacity: 0.5;}
	.content4Zone10 {width: 50%; opacity: 0.5;}
	.mainPicZone {height: 1000px;}
	.mainPicZone_old {height: 1000px;}	
}
@media only screen and (min-width: 1280px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}	
	.nav {display: none;}
	.navLink {padding-left: 0px;}
	.empty {display: inline;}
	.empty-m {display: inline;}
	.showOnTablet {display: none;}
	.hideOnDesktop {display: none;}
	.headerRow {display:inline;}
	.topbar {position: fixed; margin-top: -80px;}	
	.content {margin-top: 80px;}		
}

video#bgvid {     
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url('../images/desert_bw.png') no-repeat;
    background-size: cover;
}

a.canchor1 {
    display: block;
    position: relative;
    top: 110px;
    visibility: hidden;
}

a.canchor2 {
    display: block;
    position: relative;
    top: 90px;
    visibility: hidden;
}