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

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

*{
	margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
}

.img-icon{
	width:25px;
	height:25px;
	fill:#b2b2b2;
}

.img-icon:hover{
	fill:#2b99ff;
}

.vertical-line{
	margin-top:30px;
	margin-bottom:30px;
	width:35px;
	border-bottom:#F7F7F7 2px solid;
}

body {
  -webkit-font-smoothing: antialiased;
  font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #232525;
}
#nav-btn{
	fill:white;
	height:40px;
	position:absolute;
	right:10px;
	top:7px;
	display:none;
}
aside{
	position:fixed;
	float:left;
	width:15%;
	
	padding-top:30px;
	padding-left:2%;
	
	top:0;
	bottom:0;
	background-color:#474958;
	z-index:400;
}

header{
	float:left;
	width:80%;
	padding-left:20%;
	padding-top:30px;
	background-color:rgba(247, 247, 247, .9);
/*	border-bottom: 5px solid #F2F2F2;   */
	position:fixed;
	z-index:300;
	height:90px;	
	-moz-transition: height .3s ease;
    -webkit-transition: height .3s ease;
    -o-transition: height .3s ease;
    transition: height .3s ease;
}

	header.minimized{
		padding-top:10px;
		height:60px;
		background-color:rgba(247, 247, 247, .9);
	}
	
	header.minimized h2{
		font-size:2em;
	}

article{
	float: left;
	margin-left: 25%;
	margin-right: 10%;
	padding-top: 50px;
	width: 65%;
	padding-bottom: 150px;
	text-align:justify;
}

.container {
	float:left;
	margin-top:200px;
	margin-left:20%;
	margin-right: 3%;
	width:77%;
}

#individual-map-canvas {
	height: 450px;
	position: relative;
	text-align: center;
	float:left;
	margin-top:120px;
	margin-left:17%;
	margin-right: 0;
	width:83%;
}

nav{
	display:block;
}

nav ul{
}

nav ul li{
	line-height:30px;
}

nav ul li a{
	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#e3e2e2;
}

nav ul li a:hover{
	color:#2b99ff;
}

#products{
	padding-top:30px;
	font-weight:bold;
	color: white;
}
/* Fonts ------------------------------------*/
h1{
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	color:white;
	margin-bottom:50px;
	font-size: 1.5em;
}

h2{
	font-family: Montserrat, "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size:2.4em;
	font-weight:bold;
	color:#474958;	
	-webkit-transition: font-size 0.3s;
	-moz-transition: font-size 0.3s;
	-o-transition: font-size 0.3s;
	transition: font-size 0.3s;
}

h3{
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:black;	
    font-size: 2em;
}

p{
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: 400;
}

#ronald{
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	color:white;
	font-weight: 400;
}

#and{
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#2790ff; /* Blue */
	margin-bottom:50px;
	font-size: .8em;
/*	font-weight: 400; */
}

a{
	color:#2b99ff;
}

a:hover{
	color:#232525;
}

/* Slider ------------------------------------*/
#slides {
  display: none
}

#slides .slidesjs-navigation {
  margin-top:3px;
}

#slides .slidesjs-previous {
  margin-right: 5px;
  float: left;
}

#slides .slidesjs-next {
  margin-right: 5px;
  float: left;
}

.slidesjs-pagination {
  margin: 6px 0 0;
  float: right;
  list-style: none;
}

.slidesjs-pagination li {
  float: left;
  margin: 0 1px;
}

.slidesjs-pagination li a {
  display: block;
  width: 13px;
  height: 0;
  padding-top: 13px;
  background-image: url(../img/pagination.png);
  background-position: 0 0;
  float: left;
  overflow: hidden;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
  background-position: 0 -13px;
}

.slidesjs-pagination li a:hover {
  background-position: 0 -26px;
}

#slides a:link,
#slides a:visited {
  color: #333;
}

#slides a:hover,
#slides a:active {
  color: #9e2020;
}

.navbar {
  overflow: hidden;
}

#slides {
  display: none;
}

/* Media Query ------------------------------------*/


@media (max-width: 1500px) {

	.container {
		float:left;
		margin-top:120px;
		margin-left:17%;
		margin-right: 3%;
		width:83%;
	}

}

@media (max-width: 1300px) {
	header {
		width: 78%;
		padding-left: 22%;
	}
	#individual-map-canvas, .container {
		float:left;
		margin-top:120px;
		margin-left:20%;
		margin-right: 0;
		width:80%;
	}
	article{
		float:left;
		width:76%;
		margin-left:22%;
		margin-right: 2%;
		padding-top:50px;
	}
	aside {
		position: fixed;
		float: left;
		width: 18%;
		padding-left: 2%;
	}
}

@media (max-width: 1054px) {
	header {
		width: 74%;
		padding-left: 26%;
	}
	#individual-map-canvas, .container {
		float:left;
		margin-top:120px;
		margin-left:24%;
		margin-right: 0;
		width:76%;
	}
	article{
		float:left;
		width:71%;
		margin-left:26%;
		margin-right: 7%;
		padding-top:50px;
	}
	aside {
		position: fixed;
		float: left;
		width: 22%;
		padding-left: 2%;
	}
}

@media (max-width: 880px) {
	header {
		width: 70%;
		padding-left: 30%;
	}
	#individual-map-canvas, .container {
		float:left;
		margin-top:120px;
		margin-left:28%;
		margin-right: 0;
		width:72%;
	}
	article{
		float:left;
		width:68%;
		margin-left:30%;
		margin-right: 2%;
		padding-top:50px;
	}
	aside {
		position: fixed;
		float: left;
		width: 26%;
		padding-left: 2%;
	}
}


@media (max-width: 700px) {
	aside{
		float:left;
		width:95%;
		padding-left: 5%;
		position:relative;
		float:left;
		padding-top: 10px;
		padding-bottom:10px;
	}
	header{
		float:left;
		position:relative;
		width:95%;
		padding-left:5%;
		height:60px;
		padding-top:10px;

	}
	nav{
		display:none;
	}
	h1{
		margin-bottom: 0px;
	}
	h2{
		font-size:1.8em;
	}
	header.minimized h2{
		font-size:1.8em;
	}
	.vertical-line {
		margin-top: 10px;
		margin-bottom: 10px;
		width:140px;
	}
	#products {
		padding-top: 0;
	}
	
	#individual-map-canvas, .container {
		float:left;
		margin-top:0;
		margin-left:0;
		margin-right: 0;
		width:100% ;
	}
	article{
		float:left;
		width:90%;
		margin-left: 5%;
		margin-right: 5%;
		padding-top:50px;
	}
	#nav-btn{
		fill:white;
		height:40px;
		width:40px;
		position:absolute;
		right:7px;
		top:7px;
		display:block;
		cursor: pointer;
	}
}