/*---------The below styles apply to screen sizes above 770px. Media queries for smaller screens are at the end of this style sheet.---*/


/*---------COMMON STYLES---------*/
body {
margin: 0px;
background: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 95%;
color: #464646;
line-height: 150%;
}

img {
border-style: none;
}

.nav {
padding: .5% 5% 0% 0%;
float: right;
list-style-type: none;
}

.nav_item {
display: inline-block;
}

.header {
width: 100%;
background: white;
}

.logo {
padding: 1% 3%;
float: left;
width: 250px;
}


.footer {
width: 100%;
background-color: #000000;
}

.footer_container {
text-align: center;
margin: auto;
padding: 3% 0% 20% 0%;
}

.footer_icon {
padding: 2%;
}

.footer_text {
color: #b7b7b7;
font-size: 75%;
}


/*-------TEXT STYLES----*/
.white_text {
color: #fff;
font-size: 100%;
}

.white_text_big {
color: #fff;
font-size: 150%;
line-height: 150%;
}

.white_text_title {
color: #fff;
font-size: 180%;
}

.white_text_biggest {
color: #fff;
font-size: 250%;
line-height: 100%;
}

.black_text {
color: black;
font-size: 100%;
}

.black_text_title {
color: black;
font-size: 200%;
}

.gray_text {
color: #d7d7d7;
font-size: 100%;
}

/*----------TEXT LINK STYLES---------*/
/*---blue / gray---*/
a:link {color: gray; text-decoration: none;}
a:visited {color: gray; text-decoration: none;}
a:hover {color: #2c2a2d; text-decoration: none;}
a:active {color: #2c2a2d; text-decoration: none;}

/*---blue / white---*/
a.rollover_bw:link {color: gray; text-decoration: none; }
a.rollover_bw:visited {color: gray; text-decoration: none; }
a.rollover_bw:hover {color: #fff; text-decoration: none; }
a.rollover_bw:active {color: #fff; text-decoration: none;}


/*---gray / blue---*/
a.rollover:link {color: #b7b7b7; text-decoration: none; }
a.rollover:visited {color: #b7b7b7; text-decoration: none; }
a.rollover:hover {color: gray; text-decoration: none; }
a.rollover:active {color: gray; text-decoration: none;}

/*---gray / white---*/
a.footer_rollover:link {color: #b7b7b7; text-decoration: none; }
a.footer_rollover:visited {color: #b7b7b7; text-decoration: none; }
a.footer_rollover:hover {color: white; text-decoration: none; }
a.footer_rollover:active {color: white; text-decoration: none;}


/*----------PROJECTS CONTRIBUTE BUTTON STYLES---------*/
.projects_contribute_button {
font-family: "Century Gothic", Verdana, Arial, sans-serif;
font-size: 120%;
padding: 10px 40px;
margin: 0%;
text-decoration: none;
background-color: #00659e;
}

a.projects_contribute_button {
color: white;
}

.projects_contribute_button:hover {
background-color: #015280;

}


/*----------CONTRIBUTE BUTTON STYLES---------*/
.contribute_button {
font-family: "Century Gothic", Verdana, Arial, sans-serif;
font-size: 120%;
padding: 10px 40px;
margin: 0%;
text-decoration: none;
background-color: white;
border: 3px solid gray;
}

a.contribute_button {
color: white;
}

.contribute_button:hover {
background-color: #015280;

}

/*----------CONNECT BUTTON STYLES---------*/
.connect_container {
padding: 3% 0%;
}

.connect_button {
font-family: "Open Sans", Arial, sans-serif;
font-size: 130%;
padding: 2% 1%;
text-decoration: none;
letter-spacing: 2px;
background-color: white;
color: gray;
text-align: center;
width: 30%;
margin: auto;
min-width: 200px;
border: 3px solid gray;
}

.connect_button:hover {
background-color: gray;
color: white;
border: 3px solid gray;
}

.connect_social_icons {
text-align: center;
margin: auto;
padding: 0% 0% 7% 0%;
}

/*-------HOME PAGE-----------*/

#home_image_block {
width: 100%;
margin: 0% 0% -1% 0%;
}

#home_image {
width: 100%;
}

#home_blue_block {
background: white;
width: 100%;
}

#home_blue_text_container {
text-align: center;
margin: auto;
width: 60%;
padding: 2% 0% 10% 0%;
}

#home_white_block {
background: white;
width: 100%;
}

.home_white_tri {
width: 25.3%;
text-align: center;
float: left;
padding: 4% 4% 4% 4%;
}

.home_white_tri_b {
width: 42%;
text-align: center;
float: left;
padding: 4% 4% 4% 4%;
}

#home_white_block_2 {
background: white;
width: 100%;
}

.home_white_tri_2 {
width: 25.3%;
text-align: center;
float: left;
padding: 2% 4% 12% 4%;
}

#home_contribute_block {
height: auto;
background-color: #fff;
}

#home_contribute_button_container {
text-align: center;
padding: 15% 0% 15% 0%;
}

#home_gray_block {
background-color: #b7b7b7;
}

#home_meet_team_block {
background-image: url('images/home-kitchen.jpg');
background-repeat: no-repeat;
background-position: center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
}

#home_meet_team_image {
width: 100%;
}

#home_meet_team_text_container {

width: 30%;
text-align: center;
padding: 15% 2% 15%;
margin: auto;
}


/*-------ABOUT PAGE----------*/
#about_blue_block {
background: #00659e;
width: 100%;
}


#about_blue_text_container {
text-align: center;
margin: auto;
width: 60%;
padding: 6% 0% 10% 0%;
}


.job_title {
color: #00659e;
font-size: 90%;
}

.about_tri_columns {
width: 25.3%;
text-align: center;
float: left;
padding: 2% 4%;
}

#about_gray_block {
background: #b7b7b7;
}

#about_gray_text_container {
position: relative;
left: 40%;
width: 40%;
text-align: right;
padding: 5%;
}

#about_image_block {
width: 100%;
position: relative;
margin: 0% 0% -10px 0%;
}

#about_image {
width: 100%;
}

#about_image_text {
position: absolute;
bottom: 30%;
left: 10%;
width: 40%;
text-align: left;
}

/*-------PROJECTS PAGE----------*/

#project_image_block {
background-image: url('images/background_projects.jpg') ;
background-repeat: no-repeat; 
background-position:center center;
background-size: cover; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
width: 100%;
height: 100%;
}

  
#projects_text_container {
width: 50%;
text-align: left;
padding: 3% 0% 17% 10%;
}

#projects_contribute_button_container {
text-align: right;
padding: 6% 0%;
min-width: 250px;
}

#project_blue_block {
background: #00659e;
width: 100%;
}

#project_blue_text_container {
text-align: center;
margin: auto;
width: 100%;
padding: 4% 0% 7% 0%;
}


/*-------CONTRIBUTE PAGE----------*/
#contribute_blue_block {
background: #00659e;
width: 100%;
}


#contribute_blue_text_container {
text-align: center;
margin: auto;
width: 60%;
padding: 5% 0% 5% 0%;
}

#contribute_contribute_button_container {
text-align: center;
padding: 2% 0% 10% 0%;
}

#contribute_white_block {
background-color: #fff;
width: 100%;
}

#contribute_white_text_container {
position: relative;
left: 40%;
width: 40%;
text-align: right;
padding: 5%;
}

/*-------CONTACT PAGE----------*/

#contact_image_block {
background: url(images/background_contact.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: auto;
}

#contact_text_container {
width: 30%;
padding: 8% 10% 19% 0%;
float: right;
text-align: right;
}

#contact_block {
background: #00659e;
width: 100%;
}

#contact_block_container {
width: 60%;
padding: 2% 0% 5% 4%; 
}


/*-------Added from Multi----------*/

.contact_container {
  text-align: left;
  color: black;
  padding-top: 120px;
  width: 60%;
  margin: auto;
}

.contact_info {
text-align: center;
padding-top: 5%;
padding-bottom: 5%;

}


/* 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: #04AA6D;
  color: white;
  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: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  text-align: left;
}

/*-------PRIVACY POLICY PAGE----------*/

#privacy_policy_block {
height: auto;
background: #d7d7d7;
}

#privacy_text_container {
width: 70%;
margin: auto;
padding: 2% 0% 2% 0%;
}

.privacy_text_title {
font-size: 150%;
color: #464646;
}


/*------------ BEGIN - MEDIA QUERY 770PX - iPAD PORTRAIT----*/
@media (max-width: 770px) {

.nav.js {
display: none;
}

#menu {		
display: block;
background:white;
font-size:250%;
color: #00659e;
text-align: center;
float: right;
margin: 2% auto;
padding: 0% 2%;
}

.nav_item {
display: block;
font-size: 150%;
line-height: 120%;
text-align: right;
}

#home_blue_text_container {
width: 75%;
}

.home_white_tri {
width: 70%;
padding: 9% 15%;
}

.home_white_tri_b {
width: 70%;
padding: 9% 15%;
}

.connect_button {
padding: 2% 1%;
width: 40%;
min-width: 200px;
}

#about_blue_text_container {
width: 85%;
padding: 6% 0% 10% 0%;
}

.about_tri_columns {
width: 88%;
padding: 5% 6%;
}

#contribute_blue_text_container {
width: 75%;
padding: 6% 0% 10% 0%;
}

}
/*------------END - MEDIA QUERY 770PX---------*/

@media screen and (min-width: 770px) {
		#menu {
			display: none;
		}
	}



/*------------BEGIN - MEDIA QUERY 700PX - SMALL TABLET / iPHONE LANDSCAPE----*/
@media (max-width: 700px) {

.nav {
padding: 0% 2% 0% 0%;
}

#home_image_block {
margin: 0% 0% -5% 0%;
}

#home_meet_team_text_container {
position: relative;
top: 60%;
left: 10%;
width: 70%;
text-align: right;
padding: 35% 3% 8%;
margin: 0% 10%;
}

.connect_button {
width: 60%;
min-width: 200px;
}

#about_image_text {
bottom: 30%;
left: 10%;
width: 70%;
}

#projects_text_container {
width: 90%;
padding: 3% 0% 17% 2%;
}

#project_blue_text_container {
width: 85%;
}

#contribute_white_text_container {
position: relative;
left: 10%;
width: 70%;
text-align: right;
padding: 5%;
}

#contact_text_container {
width: 45%;
padding: 8% 2% 19% 0%;
float: right;
text-align: right;
}


#contact_block_container {
width: 90%;
padding: 2% 0% 5% 1%; 
}

#privacy_text_container {
width: 90%;
}


}
/*-------------END - MEDIA QUERY 700PX----------*/



/*------------MEDIA QUERY 320PX - iPHONE PORTRAIT----*/
@media (max-width: 320px) {

#home_blue_text_container {
width: 90%;
}

.white_text_big {
font-size: 100%;
line-height: 110%;
}

.home_white_tri {
width: 90%;
padding: 9% 5%;
}

.home_white_tri_b {
width: 90%;
padding: 9% 5%;
}

#home_gray_block {
display: none;
}

#home_meet_team_block {
display: none;
}

#about_gray_block {
display: none;
}

#about_image_block {
display: none;
}

.white_text_biggest {
font-size: 150%;
}

.white_text_title {
color: #fff;
font-size: 180%;
line-height: 120%;
}

}
/*------------END - MEDIA QUERY 320PX---------*/