* {
	margin: 0;
}

html {
	margin: 0;
}

body {
	margin: 0;
	/*background-color: #FFFFFF;*/
    background-color: #FAFAFB;
}



.header {
	/*height: 250px;*/
	width: 100%;
	/*background-color: #FAFAFB;*/
    /*background-color: #FFFFFF;*/
    background-color: #00BCD4;
	padding-top: 2%;
	padding-bottom: 2%;
	/*border: 1px solid #E7E9EB;*/
    box-shadow: 0px 2px 5px #999999;
}

.innerHeader {
	/*height: 250px;*/
	width: 75%;
	min-width: 250px;
	margin: 0 auto;
}

.headerImage {
	border-radius: 50%;
	width: 25%;
	min-width: 250px;
    max-width: 500px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.innerHeader > H1 {
	text-align: center;
	font-family: 'Roboto', sans-serif;
	/*font-weight: 100;*/
    font-weight: 300;
	font-size: 4em;
	/*color: #333333;*/
    color: #FFFFFF;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}

.innerHeader > H2 {
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1.2em;
	line-height: 150%;
	padding-top: 1%;
	padding-bottom: 1%;
	/*color: #666666;*/
    color: #FFFFFF
}

.linkedIn {
    height: auto;
    width: 36px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.8em;
}

.mainContainer {
	width: 75%;
	margin: 0 auto;
	padding-top: 1%;
	/*background-color: #FFFFFF;*/
    /*background-color: #FAFAFB;*/
}

.sectionTitle {
    /*text-align: center;*/
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 3em;
	line-height: 150%;
	padding-top: 1%;
	padding-bottom: 1%;
	/*color: #666666;*/
    color: #00BCD4;
}

.grid-item img {
	display: block;
	max-width: 100%;
}

.grid-item h2 {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 2em;
	line-height: 150%;
	margin-left: 3%;
	margin-right: 3%;
	color: #333333;
}

.grid-item h3 {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	/*font-size: 2em;*/
	line-height: 150%;
	margin-left: 3%;
	margin-right: 3%;
	color: #666666;
}

/*.grid-item img:hover {
    background-color:#000;
    opacity:0.5;
}*/

/* ---- grid ---- */

.grid {
  margin: 0 auto;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
	float: left;
	margin-bottom: 10px;
	cursor:pointer;

	/*background-color: #FAFAFB;*/
    background-color: #FFFFFF;
	border: 1px solid #E7E9EB;
    /*border-radius: 2px;*/
    box-shadow: 2px 2px 3px #999999;
}

/* iPhone 5 and smaller */
@media screen and (min-width: 320px) {
	.grid-item {
		width: 200px;
	}
	.grid-item--width2 {
		width: 200px;
	}

	.grid-item h2 {
		font-size: 1.5em;
	}

	.innerHeader {
		width: 85%;
	}

	.innerHeader > H1 {
		padding-top: 1em;
		font-size: 1.8em;
		padding-bottom: 1em;
	}

	.innerHeader > H2 {
		font-size: 1.2em;
		line-height: 150%;
	}

    .mainContainer {
        width: 90%;
    }
}

/* iPhone 6 and above */
@media screen and (min-width: 375px) {
	.grid-item {
		width: 250px;
	}
	.grid-item--width2 {
		width: 250px;
	}

	.grid-item h2 {
		font-size: 1.5em;
	}

	.innerHeader {
		width: 85%;
	}

	.innerHeader > H1 {
		padding-top: 0.5em;
		font-size: 2.1em;
		padding-bottom: 0.5em;
	}

	.innerHeader > H2 {
		font-size: 1.2em;
		line-height: 150%;
	}

    .mainContainer {
        width: 90%;
    }
}

/* Larger screens */
@media screen and (min-width: 768px) {
	.grid-item {
		width: 320px;
	}
	.grid-item--width2 {
		width: 652px;
	}

	.grid-item h2 {
		font-size: 2em;
	}

	.innerHeader > H1 {
		font-size: 4em;
		padding-bottom: 0.1em;
	}

	.innerHeader > H2 {
		font-size: 1.2em;
		line-height: 150%;
	}

	.headerImage {
		border-radius: 50%;
		width: 25%;
		min-width: 250px;
	}

    .mainContainer {
        width: 85%;
    }
}

/* Largest screens */
@media screen and (min-width: 1024px) {
    .mainContainer {
        width: 75%;
    }
}