@font-face {
  font-family: 'Sansation';
  src: url('font/Sansation_Regular.ttf');
}

@font-face {
  font-family: 'SansationLight';
  src: url('font/Sansation_Light.ttf');
}

@font-face {
    font-family: 'Bahnschrift';
    src: url('font/bahnschrift.ttf');
}

@font-face {
    font-family: 'steelfish';
    src: url('font/steelfish.ttf') format('truetype');
}


html {
     
}

body {
    font-family:Bahnschrift;
    font-size:16pt;
    background:#FFF;
}

div.sketch p {
font-family: "Buxton";
}

div#top {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    background:#263a49;
    z-index: 998;
    text-align: center;
}

div#footer {

    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    
    background:#333;
    z-index:997;
}

#renderArea{
        position:relative;
        top:0px;
        
        left:0px;
        width:100%;
        height:100%;
        
	}

div.page_content {
   position:absolute;
   left:0px;
   top:50px;
    width:100%;
    color:black;
    background:#FFF;
    text-align:center;
    z-index:10;
    min-height:100%;
    margin:0px auto;
    margin-bottom:200px;
}

img.logo {
    position:absolute;
    left:10px;
    top:0px;
    height:50px;
}

div.icon_container {
    position:absolute;
    left:50%;
    top:0px;
}

div.icon_box {

    display:inline-block;
    width:32px;
    height:32px;
    margin:4px;
}


.loading {
    position:absolute;
    bottom:50px;
    left:20px;
    z-index:999;
    color:#FF5555;
    font-weight:800;
}

#labelCoords {
    position:absolute;
    bottom:30px;
    left:20px;
    z-index:999;
    color:#FF5555;
    font-weight:800;
}

div#load {
    position:absolute;
    top:400px;
    left:50%;
    width: 500px;
    height: 400px;
    background-image: url('loading6.gif');
}



div#map {
    position: relative;
		height: 300px;
		width: 100%;
		right: 0px;
		bottom: 0px;
		z-index: 1000;
}


div#canvas {
    
		height: 400px;
		width: 100%;
		
		
        border:1px solid black;
}

/* menu styles*/

div#top menu {

    
    position:center;
    text-align:center;
    line-height:40px;
    top:0px;
    margin:0px auto;
}

div#top menu li {
    display:inline;
    margin-right:20px;
}

/* paragraph styles  */

div#top menu li a {
    font-family:Bahnschrift;
    font-size:12pt;
    font-weight:200;
    color:#EEE;
}

div#top menu li a:hover {
    
    color:#cc4646;
}

div.page_content p {
    font-family:Bahnschrift;
    text-align:justify;
    line-height:20pt;
    margin:50px 50px 50px 20px;
    font-size:16pt;
    color:#111;
    font-weight:300;
    /*background:rgba(255, 255, 255, 0.6);*/
}

div.page_content p.center {
    text-align:center;
    color:#EEE;
    letter-spacing:2px;
    font-size:22pt;
}

/*div.page_content p::first-letter { 
    font-size: 120%;
    font-weight:600;
}*/

table {
    
    text-align:left;
}

table tr {


}

table tr td {
    text-align:left;
    padding:10px;
    
    width:200px;
}

div.page_content p img {

    float:none;
    margin:50px;
}

div#footer p {
    color:#AAA;
    text-align:center;
    font-size:10pt;
}


@media (min-width: 1200px) and (orientation: landscape) {

    div.page_content h1.title {
        font-family: Bahnschrift;
        font-size: 36pt;
        font-weight: 200;
        line-height: 36pt;
        color: #FF5555;
        text-align: center;
    }

    div.page_content span.hashtag {
        color:#555;
        font-family:Bahnschrift;
        font-size:8pt;

    }

    /*div.page_content h1 {
        text-decoration: none;
        font-family: Bahnschrift;
        font-size: 28pt;
        font-weight: 100;
        margin-top: 20px;
        line-height: 50px;
        color: -webkit-linear-gradient(#FF5555, #EEE);
        -webkit-background-clip: unset;
        -webkit-text-fill-color: transparent;
        height: 50px;
        text-align: center;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-appearance: none;
    }*/

    div.page_content h2 {
        font-family: Bahnschrift;
        font-size: 26pt;
        font-weight: 200;
        line-height: 30pt;
        color: #FF5555;
        text-align: left;
        padding-top:80px;
        letter-spacing:-1px;
        clear:both;
    }

div .tile h1.title-top {
    text-decoration:underline;
    font-family:Bahnschrift;
    font-size:42pt; 
    font-weight:100;
    margin-top:20px;
    line-height:90px;
    color:#EEE;
    text-shadow:3px 3px 3px #263a49;
     
    height:90px;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
     -webkit-appearance: none;
     
}

   

div.article {
    
    width:60%;
    margin:0px auto;
    /*clear:both;*/
    margin-top:50px;
    margin-bottom:200px;
}



div.article p {
    margin-top:25px;
    margin-left:50px;
    margin-right:50px;
    font-family:Bahnschrift;
    font-size:12pt;
    line-height:20pt;
    font-weight:300;
    color:#263a49;
}

.panel_login {
        position: absolute;
        width: 70%;
        left: 15%;
        text-align: center;
        top: 20px;
        height: 70%;
        padding-top: 10px;
        border: 1px solid #FFF;
        border-radius: 0px 0px;
        background-color: #DDD; /*rgba(38, 58, 73, 1);*/
    }

}

.panel_login {
        position: absolute;
        width: 70%;
        left: 15%;
        text-align: center;
        top: 20px;
        height: 70%;
        padding-top: 10px;
        border: 1px solid #FFF;
        border-radius: 0px 0px;
        background-color: #DDD; /*rgba(38, 58, 73, 1);*/
    }

.panel_login_modal {
    background:rgba(20,20,20,0.8);
}


.button-close {
    position:absolute;
    right:0px;
    top:0px;
    width:60px;
    height:60px;
    background:none;    
    border:0px;
    vertical-align:middle;
    font-family:SansationLight;
    font-weight:100;
    font-size:60px;
    text-align:center;
    margin:0px;
    line-height: 60px; 
    color:#FFF;
    z-index:1000;
    transition:ease 0.25s all;
    cursor:pointer;
}

.bg-h1-title {
    
    background: url('img/obr03.PNG') center center no-repeat;
    
    background-color:rgba(255,255,255,0.6);
}

div.page_content a p.title_p {
    font-size:36pt; 
    color:#EEEEEE; 
    text-align:left;
    line-height:70px;
}

a, div#footer p a, div.page_content a {
    color: #FF5555;
    text-decoration: none;
}

a:hover, div#footer p a:hover, div.page_content a:hover  {
    color:#AAA;
    }

img.zoom_img {

    width:120px;
}

img.zoom_img:hover {
    width:500px;

}

.textbox {
    font-family:Sansation;
    height:30px;
    width:300px;
    font-size:20pt;
    font-weight:600;
    background:rgba(255, 255, 255, 0.5);
}

.label {
    font-family: Bahnschrift;
    display:block;
    text-align: left;
    line-height: 16pt;
    margin: 5px;
    font-size: 12pt;
    color: #111;
    font-weight: 200;
}

 .button {
    display: flex;
    justify-content: center;
    position: relative;
    width: 120px;
    line-height: 34px;
    height: 40px;
    font-family: Bahnschrift;
    text-align: center;
    font-weight: 200;
    font-size: 12pt;
    color: #EEE;
    border: 1px solid #EEE;
    margin:0px auto;
    bottom: 10px;
    background: #263a49; /*url(../graphics/icons/inbox.png) no-repeat 10px center;*/
    border-radius: 8px 8px;
    -webkit-appearance: none;
}



.button:hover {
background:#AAA;
color:#FFF;
  
  /*-webkit-transition: box-shadow .2s ease-in-out;
    -moz-transition: box-shadow .2s ease-in-out;
    -o-transition: box-shadow .2s ease-in-out;
    -ms-transition: box-shadow .2s ease-in-out;
transition: box-shadow .2s ease-in-out;*/
}





div.article h3 {
    font-family:Bahnschrift;
    color:#263a49;
    font-size:16pt;
    font-weight:300;
    line-height:50px;
    padding-left:50px;
    margin-left:0px;
    margin-right:10px;
    text-align:left;
}

div.container h3 {
    padding-left: 20px;
    line-height: 30px;
}

div.tile h3 {
    font-family: Bahnschrift;
    color: #FF5555;
    font-size: 16pt;
    font-weight: 300;
    line-height: 50px;
    padding-left: 10px;
    margin-left: 0px;
    margin-right: 10px;
    text-align: left;
}

div.article img.round {
    border-radius:50%;
    
}

.bg-bulk {
        background:url(icons/01_bulk.png) left center no-repeat #FFF;
    }
    
.bg-hand {
        background:url(icons/01_handpoint.png) left center no-repeat #FFF;
        padding-left:62px;
    }

.bg-map {
        background:url(icons/01_position.png) left center no-repeat #FFF;
    }

.bg-data {
        background:url(icons/01_data.png) left center no-repeat #FFF;
    }

.bg-city {
        background:url(icons/01_city.png) left center no-repeat #FFF;
    }

/*.page_content img {
    width:180px;
    border-radius:50%;
    float:left;
    clear:right;
    
}*/



table tr td .button {
    margin:0px;
}

/* wrap content  */

div .wrap {
display:block;
width:100%;
margin:0px auto;
margin-bottom:250px;
clear:both;
}
div .wrap:after {

clear:both;
display:block;
}


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
  
  margin-bottom:30px;
  text-align:left;
}

.container5grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* fraction*/
    margin-bottom: 30px;
    text-align: center;
}

.container5grid div {
    margin: 0px;
    border-top: 0px solid #CCC;
    clear: both;
    background: #FFF;
    text-align: center;
}

    .container div {
        margin: 10px;
        border-top: 0px solid #CCC;
        clear: both;
        background: #F0F8FF;
        text-align: center;
    }

/*.container div:hover{
    background:#EEE;
}*/

.container img.rect {
    margin:0px auto;
width:100%;

/*border-radius:50% 50%;*/
display:block;
/*box-shadow:#263a49 5px 5px 15px;*/
}

    .container div.label {
        margin: 0px auto;
        width: 100%;
        
        clear:both;
        /*border-radius:50% 50%;*/
        
        display: block;
        background:#263a49;
        /*box-shadow:#263a49 5px 5px 15px;*/
        line-height:200px;
        text-align: center;
        vertical-align: middle;
        font-size: 48pt;
        font-family: steelfish;
        color:#EEE;
    }

.hoverbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 100%;
	height: auto;
    margin:0px;
}

.hoverbox .hoverbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(200, 200, 200, 0.6);
	color: #263a49;
    margin:0px;
	padding: 0px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hoverbox:hover .hoverbox-layer_top,
.hoverbox.active .hoverbox-layer_top {
	opacity: .8;
}

.hoverbox .hoverbox-text p {
    font-size:12pt;
    font-weight:800;
}




.container h3 {
    text-align:left;

}

.container div p {
    margin:15px;
    font-family:Bahnschrift;
    font-weight:300;
    font-size:10pt;
    line-height:15pt;
    text-align:justify;
}

div .column {

margin:0px;
width:33.3%;
text-align:center;
float:left;
/*border-radius:10px 10px;*/
border:1px solid #CCC;
background-color: #263a49;
min-height:450px;
z-index:1;
}

i .icon-inbox {
    background: url('icons/05_inbox.png');
}

div .column:hover {
    z-index:999;
    /*box-shadow:#000 5px 5px 10px;
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out;
    -ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;*/
}

div .contact_form p.little_note {
    font-family:SansationLight;
    font-size:9pt;
    font-weight:200;
    color:#263a49;
    text-align:center;
    line-height:15pt;
    margin:10px;
}


div .column p {
font-family:Bahnschrift;
font-size:14pt;
color:#222;
text-align:left;
line-height:18pt;
text-align:center;
font-weight:100;
display:block;
}


div .column h2 {
    margin:12px;
    font-size:20pt;
    color:#FF5555;
    font-weight:200;
}

img.circle {
margin:20px auto;
width:200px;
border-radius:50% 50%;
display:block;
box-shadow:#263a49 5px 5px 15px;


}


div .contact_form {
    margin:0px auto;
    width:80%;
    text-align:center;
    margin-bottom:60px;
}

div .contact_form .textbox {
    font-family:SansationLight;
    font-size:12pt;
    display:block;
    width:80%;
    border:1px solid #CCC;
    border-radius:3px 3px;
    padding-left:5px;
    background:#EEE;
    margin:0px auto;
    margin-top:15px;
}

div .tile {
    width: 100%;
    min-height: 180px;
    clear: both;
    float: left;
    margin-bottom: 0px;
    
    color: #EEE;
    z-index: 999;
    text-align:left;
}

.bg-sctblue {
    background: #263a49;
}

.float-left {
    padding-right: 12px;
    float: left;
}

.float-right {
    float: right;
    padding-left: 12px;
}

/*div .tile {
    width: 100%;
    min-height: 180px;
    clear: both;
    float: left;
    margin-bottom: 20px;
    background: #263a49;
    color: #EEE;
    z-index: 999;
    text-align: left;
}*/

div.tile p {
    color:#EEE;
    margin:12px;
    
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

/*div.tile img .left {
    float:right;
    padding-left:12px;
}*/

.bg-top {
    background: no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image:url('bg/bg012.png');
}

/*div .tile:hover {
    -box-shadow:              #000 4px 6px 20px; 
-webkit-box-shadow: #000 4px 6px 20px;
-moz-box-shadow:     #000 4px 6px 20px;

  background-color: #BBB;
  -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out;
    -ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;

}*/