@charset "utf-8";
body {
  font-size: 1; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: black;
  
}


h1{text-align: left;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 70px;
	font-weight: 100;
	color: #467190;

}

h2{text-align: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 100px;
	font-weight: 300;
	color: black;
}

h3{text-align: left;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 300;
	color: black;
	font-size: 50px;
}

h4{text-align: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 500;
	color: black;
	font-size: 20px;
}

h5{text-align: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 200;
	color: white;
	font-size: 10px;
}

p{
    color: black;
    text-align: left;

}

.logo{ 
	
	width: 20%;
	float: left;
	margin-left: 10px;
	
	
}





.topcontact{text-align: right;
	color: antiquewhite;
	
}


.topnav {
	overflow: hidden;
  	background-color: black;
	text-decoration-color: black;
	text-align: center;
	
	
	
	


}

.topnav a {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 10px 16px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: white;
  font-size: 14px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-style: normal;
  
}

.topnav a:hover {
  color: grey;
	padding: 10px 16px;
}

.topnav .icon {
  display: none;
}

.fixed{
			
			position:fixed;
			top:0px;
			left: 0px;
			background-color: black;
			width: 100%;
			height: 70px;
}


.square a:hover{
	color: black;
	opacity: 50%;
}
		

@media screen and (max-width: 820px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 820px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

.logoline{
	width: 100%;
	background-color: lightgray;
	align-content: center;
	text-align: center;
	padding-bottom: 2px;
	padding-top: 2px;
	
	
}


.blockcolor {
	
		background-color: #071D27;
}

.container{
	width: 100%;
	margin: 50px auto;
	
}


/*----staff-----*/
.staff{
	align-content: left;
	text-align: center;
}

/*----work-----*/
.work{
	align-content: left;
	text-align: center;
}

/*----clients-----*/
.clients{
	align-content: left;
	text-align: center;
}


/*--column--*/

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; 
}


/*--form--*/
.form2{
	text-align: center;
	font-weight: 700;
}





/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: lightgrey;
  color: black;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: black;
}

/* Add a background color and some padding around the form */
.contactform {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}





/*-----FOOTER-----*/

.footer{	
	width: 100%;
	height: 100px;
	background-color: black;
	color: white;
	padding-left:20px;
	padding-top: 10px;
	padding-bottom: 10px;

}

.footertext{
	text-decoration-color: white;
	align-content: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}