@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: 50px;
	font-weight: 300;
	color: white;
	background: #1B252E;
	
}

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;

}

a:link {
	color: black;
  	text-decoration: none;
	
	
}






.logo{ 
	
	width: auto;
	float: left;
	margin-left: 5%;
	padding: 0px;
		
}





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


.navmenu{
	
	overflow: hidden;
  	background-color: yellow;
	text-decoration-color: black;
	text-align: center;
	
}

.topnav {
	overflow: hidden;
  	background-color: #1b252e;
	text-decoration-color: black;
	text-align: center;	
	
	}

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

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

.topnav .icon {
  display: none;
}

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

.about {
  background-color: #E7E7E7;
  color: white;
  /* border: 2px solid black;*/
  /*margin: 20px;*/
  padding: 20px;
}


.container{
	margin-left: auto;
	margin-right: auto;
	
	
	
	
}

/* Style the list for Digital */
.price {
  list-style-type: none;
  border: 0px solid #EBEBEB;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Pricing header */
.price .header {
  background-color: #3E54D3;
  color: white;
  font-size: 25px;
}

.price .header2 {
  background-color: #5180e2;
  color: white;
  font-size: 25px;
}

.price .header3 {
  background-color: #15cdcb;
  color: white;
  font-size: 25px;
}

.price .header4 {
  background-color: #4fe0b5;
  color: white;
  font-size: 25px;
}

.price .header5 {
  background-color: #FF954D;
  color: white;
  font-size: 25px;
}

.price .header6 {
  background-color: #FFC943;
  color: white;
  font-size: 25px;
}

.price .header7 {
  background-color: #F94C4F;
  color: white;
  font-size: 25px;
}

.price .header8 {
  background-color: #1d2c39;
  color: white;
  font-size: 25px;
}

.price .header9 {
  background-color: #E60000;
  color: white;
  font-size: 25px;
}

.price .header10 {
  background-color: #bf1e2e;
  color: white;
  font-size: 25px;
}

.price .header11 {
  background-color: #6d8888;
  color: white;
  font-size: 25px;
}

/* List items */
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

/* Grey list item */
.price .grey {
    background-color: #eee;
    font-size: 20px;
}




.square a:hover{
	color: black;
	opacity: 50%;
	margin-left: auto;
	margin-right: auto;
}
		

@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;
  }

}




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




.ux{
	width: 50%;
	align-content: center;
	
}


/*----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: #1b252e;
	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: 720px) {
  .container {
    width: 85%;
    padding: 0; }
}




/* For devices larger than 550px */
@media (min-width: 720px) {
  .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%; }

}


/*Responsive menu*/

.topnav .icon {
  display: none;
}

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

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



/* Change the width of the four columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 640px) {
  .columns {
    width: 100%;
  }
}