@charset "utf-8";
/* CSS Document */

html {overflow-x: hidden; margin: 0;}


body {font-family: 'PT Sans', sans-serif; font-weight: 500; margin: 0; overflow-x: hidden; overflow-anchor: none;}

a, a:active, a:hover, a:visited {text-decoration: none; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -ms-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;}

p {margin-top: 0; font-size: 18px;}
  
h2 {text-transform:uppercase; font-weight: 900; font-size: 60pt; font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;}
  
h2.dem1 {color:#FFF; text-shadow: 4px 4px #069; margin-bottom:0.5em; margin-top:0; padding-top:0;}
h2.abo1 {color:#2A1E17; text-shadow: 4px 4px #A97C50; margin-bottom:0.5em;}
h2.con1 {color:#FFF; text-shadow: 4px 4px #808080; margin:0; margin-bottom:0.5em;}

h3.dem2 {color:#3CC; text-transform:uppercase; font-family: 'Josefin Sans', Helvetica, Arial, sans-serif; padding-bottom:0; margin-bottom:0.5em;  margin-top:2em;}
h3.cmessage {color:#808080; text-transform:uppercase; font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;}

nav{background-color: #FFF; text-align: right; padding: 10px; position:relative; left: 0; right: 0; display: block; width: 100%; z-index: 100;}

#navi{overflow: hidden;}
#logo{position:absolute; top:5px;  left:40px; overflow:hidden;}
nav ul {padding-right:40px;}
nav li {display: inline-block; margin: 0 8px; padding-top: 1px;}
nav li a{color: #666; text-decoration: none; text-transform:uppercase; font-family: 'Josefin Sans', Helvetica, Arial, sans-serif; font-size: 16px;}
nav li a.active{text-decoration:none;}
nav li a:hover{color: #0AF; text-decoration:none;}
.fixed {position: fixed; top: 0;} 

#area1 {background: #036;}
.demopanel {margin:0; padding:0; position: relative; z-index: 1; overflow: hidden; background: url(../images/demo_panel.svg) no-repeat center -0.5%; background-size: cover; width: 100%; height: 400px;}
section#demos, section#about, section#contact {margin: 0; margin-left: 6em; margin-right: 6em; padding-top:0em; padding-bottom: 0;  position: relative; z-index: 2;}	

#area2 {background: #D7BC8F url(../images/asfalt.png);}
.aboutpanel {background: url(../images/about_panel.svg); background-size: cover; width: 100%; height: 375px}
section#about p {color:#2A1E17;}

#area3 {background: #414141; margin:0; padding:0; padding-bottom:2em;}
.contactpanel {margin:0; padding:0;  position: relative; z-index: 1; overflow: hidden; background: url(../images/contact_panel.svg) no-repeat center -0.5%; background-size: cover; width: 100%; height: 175px;}


div.a1, div.a2 {display:table-cell; position:relative; top:-5em;}
.a1{float: left; padding:0; padding-right: 2em; padding-top:6em;}
.a2{padding-left: 1em; width:80%;}

div.b1, div.b2 {display:table-cell; vertical-align: middle;}
.b1{width:80%}
.b2{padding-left:4em; padding-bottom:4em;}

footer {background:white; border-top: 12px solid #808080;}
footer p {color:#666; font-family: Helvetica, Arial, sans-serif;  text-align:center; padding:1em; margin-bottom:0;}

form {color:white; font-family: 'PT Sans', Helvetica, Arial, sans-serif; font-size: 18px;}
#n, #e, select, textarea {width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px;  box-sizing: border-box; margin-top: 6px; margin-bottom: 16px;  resize: vertical;}
input#mybtn {background-color: #4F4F4F; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top:1em; margin-bottom:1em;}
input#mybtn:hover {background-color: #303030;}


@media screen and (max-width: 1000px) {
.demopanel {background: #003366 url(../images/demo_panel.svg) no-repeat center -5%; background-size: 100%; height:260px;}
section#demos {min-height:400px; padding-bottom:1em;}	
.aboutpanel {background: url(../images/about_panel.svg) no-repeat center -5%; background-size: contain; height:280px; position:relative; top:-5px;}
div.a1, div.a2 {display:table-cell; position:relative; top:-5em;}
.a1{float: left; padding:0; padding-right: 2em; padding-top: 4em;}
.a2{padding-left:1;width:80%;}

div.b1, div.b2 {display:block;}
.b1{width:100%}
.b2{padding-left:0;}
.b2 img {  display:none;}
}

@media screen and (max-width: 700px) {
#logo{position:relative; top:0;  left:-0.5em; display:block; margin-top:0.5em; margin-left:auto; margin-right:auto;}
.list {display:none;}
.fixed {position:relative;} 	
}

@media screen and (max-width: 600px) {
.demopanel {background: #003366 url(../images/demo_panel.svg) no-repeat center -5%; background-size: 100%;height:150px;}
.aboutpanel {background: url(../images/about_panel.svg) no-repeat center -5%; background-size: 120%; height:150px;position:relative; top:-8px;}
.contactpanel {margin-top:3em;}
h2 {font-weight: 900;font-size: 60pt; font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;}
h2.dem1 {color:#FFF; text-shadow: 3px 3px #069;}
h2.abo1 {color:#2A1E17; text-shadow: 3px 3px #A97C50;}
h2.con1 {color:#FFF; text-shadow: 3px 3px #808080;}
section#demos, section#about, section#contact {margin-left: 2em; margin-right: 2em; padding:0}
div.a1, div.a2 {display:block; position:relative; top:0;}
.a1{float:none; padding:0; padding-right: 0; padding-top: 0;}
.a1 img {position:relative; left:-1em;}
.a2{padding-left: 0; width:90%;}
}

@media screen and (max-width: 450px) {
#area1 {min-height:500px;}
#area3 {padding-bottom:0;}
.demopanel {background: #003366 url(../images/demo_panel.svg) no-repeat center -5%; background-size: 100%;height:120px;}
section#demos {min-height:300px; padding-bottom:1em;}
section#contact {padding-top:1em;}
h2 {font-weight: 900;font-size: 50pt; font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;}
h2.dem1 {text-shadow: 2.5px 2.5px #069; text-align:center;}
h2.abo1 {text-shadow: 2.5px 2.5px #A97C50; text-align:center;}
h2.con1 {text-shadow: 2.5px 2.5px #808080; text-align:center;}
section#demos, section#about, section#contact {margin-left: 1em; margin-right: 1em; padding:0}
div.a1, div.a2 {display:block; position:relative; top:0;}
.a1{float:none; padding:0; padding-right: 0; padding-top: 0;}
.a1 img {width:80%; position:relative; left:0; display:block; margin-left:auto; margin-right:auto;}
.a2{padding-left: 0; width:100%;}
}

@media screen and (max-width: 350px) {
h2.con1 {font-size: 42pt; text-shadow: 2.5px 2.5px #808080; text-align:center;}
}