* {
	box-sizing: border-box;
}
::selection {
	background: #ee4a5d;
	color: #fff;
}
::-moz-selection {
	background: #ee4a5d;
	color: #fff;
}

body {
	font-size: 10px;
	font-family: Open Sans, Helvetica, Arial, sans-serif;
}

footer {
	background: #eee;
	color: #8e939d;
	font-size: 1.7em;
	text-align: center;
	font-weight: 100;
	padding: 4em 0 4em 0;
	margin-top: 3em;
}

.devin {
	background: url('devin.jpg') no-repeat;
}

.daniel {
	background: url('daniel.jpg') no-repeat;
}

.ed {
	background: url('ed.jpg') no-repeat;
}

.lucas {
	background: url('lucas.jpg') no-repeat;
}

.darin {
	background: url('darin.jpg') no-repeat;
}

.bijan {
	background: url('bijan.jpg') no-repeat;
}

.james {
	background: url('james_circle.png') no-repeat;
}

.random {
	background: url('random.jpg') no-repeat;
}

.pic {
	border: 5px solid #ddd;
	border-radius: 100%;
	height: 200px;
	width: 200px;
	background-size:contain;
	margin: 0 auto;
	margin-bottom: 6em;
	transition: all .3s ease;
}

.pic:hover {
	border-color: #ee4a5d;
}

.dev {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 6em;
}

h1 {
	font-weight: 100;
	font-size: 4em;
	text-align: center;
	margin-bottom: 1.6em;
	color: #666;
}

h1.team {
	color: #ccc;
	margin-top: -.8em;
}

h1.title {
	margin-top: 2.2em;
}

h2 {
	font-weight: 100;
	font-size: 2em;
	text-align: center;
	margin-bottom: 2em;
	color: #999;
	margin-top: .3em;
}

h3 {
	text-align: center;
	margin-bottom: 0;
}

.dev-link h3 .name {
	color: #555;
	border-bottom: 2px solid transparent;
	font-size: 3em;
	font-weight: 100;
	transition: all .3s ease;
}

.dev-link h3 .name:hover {
	border-bottom-color: #ee4a5d;
	color: #ee4a5d;
}

p {
	font-size: 1.8em;
	line-height: 1.8em;
	color: #888;
	font-weight: 400;
}

a {
	color: #ee4a5d;
	text-decoration: none;
	transition: all .3s ease;
	border-bottom: 1px solid transparent;
}

a:hover {
	border-bottom-color: #ee4a5d;
}


.main-content {
	margin-top: 8em;
}

.divisor{
	background: #eee;
	height: 1px;
	margin:0 0 8em 0;
}


.container {
	margin: 0 auto;
}


.button {
	border: 2px solid #ee4a5d;
	color: #ee4a5d;
	background: none;
	border-radius: 8px;
	padding: .8em;
	font-size: 2em;
	width: 230px;
	transition: all .3s ease;
	display: inline-block;
	text-align: center;
}

.button:hover {
	background: #ee4a5d;
	color: #fff;
}

.contact-button {
	margin-top: 6em;
	text-align: center;
}

.logo {
	background: url(./agencyenterprise.svg) center center no-repeat;
	background-size: contain;
	width: 50em;
	height: 10em;
	margin: 0 auto;
	margin-top: 5em;
}



.app {
	display: inline-block;
	margin: 3em;
	width: 20em;
	text-align: center;
}

.app.small {
	width: 20em;
}

.app h3 {
	font-size: 3em;
	font-weight: 100;
	margin-bottom: 0;
}

.app p {
	text-align: center;
	font-size: 1.6em;
	font-weight: 200;
}

.app-icon {
	height: 19em;
	width: 19em;
	border-radius: 20%;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
}

.app-icon:hover {
	transform: translateY(-20px);
}

.crunchbutton {
	background-image: url(./crunchbutton.png);
}

.cockpit {
	background-image: url(./cockpit.png);
}

.mailprincess {
	background-image: url(./mailprincess.png);
	border: 1px solid #ada2d6;
}

.discharge {
	background-image: url(./discharge.png);
}

.small {
	font-size: .6em;
}





@media (min-width: 701px) {
	.dev {
		width: 70.5%;
		display: inline-block;
		text-align: left;
	}
	.container {
		max-width: 95vw;
		text-align: center;
	}
}

@media (max-width: 1150px) {
	.dev {
		padding-bottom: 3em;
		margin-bottom: 3em;
		border-bottom: 1px solid #eee;
	}
}

@media (min-width: 1151px) {
	.dev {
		width: 32.9%;
	}
	.dev:not(:last-child) {
		padding-right: 2em;
	}
	.container {
		max-width: 90vw;
	}
}

@media (max-width: 700px) {
	.container-mobile {
		margin: 0 1.3em 0 1.3em;
	}
	body {
		font-size: 8px;
	}
	.dev {
		width: 100%;
	}
	h1 {
		margin-top: 1em;
	}
	.app {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.hide-mobile {
		display: none;
	}
}