/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

/* HTML5 display-role reset f
or older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

body {line-height: 1;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {content: '';
	               content: none;}

table {border-collapse: collapse;
	   border-spacing: 0;}


/* Reset */


@media screen and (max-width: 960px) {
	
body {background-color: rgb(59,79,85);}

p {font-family: 'Darker Grotesque';
font-size: large;
color: rgb(239,227,193);
text-align: center;
margin-left: 25px;
margin-right: 25px;
margin-top: 10px;}

h1 {font-family: 'Darker Grotesque';
font-size: xxx-large;
color: rgb(239,227,193);
padding-top: 25px;
padding-bottom: 10px;
margin-bottom: 25px;
text-align: center;
margin-left: 25px;
margin-right: 25px;}

h2 {font-family: 'Darker Grotesque';
font-weight: bold;
font-size: xx-large;
color: rgb(217,121,65);
padding-top: 0px;
padding-bottom: 5px;
text-align: center;
margin-left: 25px;
margin-right: 25px;}

a {font-family: 'Darker Grotesque';
font-size: xx-large;
color: rgb(59,79,85);
text-decoration: none;}

a:hover {color: rgb(217,121,65);}

hr {display: none;}

#mobile-header {width: 100%;
padding-top: 10px;
padding-bottom: 10px;
background: rgb(239,227,193);
position: fixed;
top: 0;
text-align: center;}

#mobile-icons {display: inline;
margin: auto;}


#headshot1 {text-align: center;}
#headshot2 {text-align: center;}
#kaiser {margin-bottom: 50px;}
#leone {margin-bottom: 100px;}

#rightie {width: 50%;
border-radius: 25px;
border: .5px solid #00a7e5;
padding: 25px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;}

#rightie h2 {font-size: xx-large;}
#rightie p {font-size: medium;}

#icons {text-align: center;
margin-top: 30px;
padding: 5px;}

#mobile-landing {margin-top: 100px;}
#mobile-projects {width: 100%}

#projects {display: none;}
#landing {display: none;}
#header {display: none;}

#connect {background-color: rgb(239,227,193);
margin-top: 25px;
margin-bottom: -25px;}

#connect h1 {color: rgb(59,79,85);
padding-bottom: 0px;
padding-top: 5px;}

#connect p {color: rgb(59,79,85);
padding-bottom: 25px;}

#contact-right {display: none;}
#contact-left p {margin-bottom: 25px}


.project-set {margin-top: 100px;}

.project-set hr {margin: 0px;}

.project-set h1 {padding-top: 0px;
text-align: center;}
.project-set h3 {font-family: 'Darker Grotesque';
color: rgb(217,121,65);
padding-top: 10px;
text-align: center;}

.project-set a {font-size: large;
color: rgb(239,227,193);
text-align: center;}

.project-set ul {padding-bottom: 50px;
text-align: center;}

.project-set a hover {color: rgb(217,121,65);}

.project-set p {padding-bottom: 50px;
text-align: center;}


#footer {width: 100%;
height: 25px;
opacity: 0.9;
background: rgb(217,121,65);
text-align: center;}

#footer p {color: black;
margin: 0;}

} /* end mobile */






@media screen and (min-width: 960px) {

body {background-color: rgb(59,79,85);}

p {font-family: 'Darker Grotesque';
font-size: large;
color: rgb(239,227,193);}

h1 {font-family: 'Darker Grotesque';
font-size: xxx-large;
color: rgb(239,227,193);
padding-top: 25px;
padding-bottom: 10px;
margin-bottom: 25px;}

h2 {font-family: 'Darker Grotesque';
font-weight: bold;
font-size: xx-large;
color: rgb(217,121,65);
padding-top: 0px;
padding-bottom: 5px;}

a {font-family: 'Darker Grotesque';
font-size: x-large;
color: rgb(59,79,85);
text-decoration: none;}

a:hover {color: rgb(217,121,65);}

hr {border-top: 1px solid #eee2c0;
border-bottom: none;
border-right: none;
border-left: none;
margin-bottom: -20px;
margin-top: 25px;}

#header {width: 100%;
opacity: 0.9;
background: rgb(239,227,193);
position: fixed;
top: 0;}

#logotype {margin-left: 50px;
margin-top: 5px;}

#links {display: inline;
float: right;
padding-right: 50px;}

#links a {padding-left: 10px;}

#landing {padding-top: 10px;}

#projects {display: inline-block;
padding-top: 25px;
padding-left: 50px;
padding-right: 50px;}

#team {padding-left: 50px;
padding-right: 50px;}

#leftie {width: 63%;
float: left;}

#headshot1 {float: left;
margin-right: 10px;}

#headshot2 {float: right;
margin-left: 10px;
margin-top: 50px;}

#leone {margin-top: 50px;}

#rightie {float: right;
width: 25%;
border-radius: 25px;
border: .5px solid #00a7e5;
padding: 25px;
margin-top: 20px;}

#icons {align-content: center;
margin-top: 30px;
padding: 5px;}

#connect {background-color: rgb(239,227,193);
padding-left: 50px;
padding-right: 50px;
margin-top: 25px;}

#connect h1 {color: rgb(59,79,85);
padding-bottom: 0px;
padding-top: 5px;}

#connect p {color: rgb(59,79,85);
padding-bottom: 25px;}

#contact-left {float: left;
width: 75%;
padding-right: 50px;}

#contact-right {display: flex;
padding-top: 25px;
padding-bottom: 25px;}


#mobile-projects {display: none;}
#mobile-header {display: none;}


#footer {width: 100%;
height: 25px;
opacity: 0.9;
background: rgb(217,121,65);
bottom: 0;
padding-top: 5px;
text-align: center;
display: inline-block;}

#footer p {color: black;}

.project-set {margin-left: 25px;
margin-right: 25px;
margin-top: 75px;}

.project-set hr {margin: 0px;}

.project-set h1 {padding-top: 0px;}
.project-set h3 {font-family: 'Darker Grotesque';
color: rgb(217,121,65);
padding-top: 10px;}

.project-set a {font-size: large;
color: rgb(239,227,193);}

.project-set a hover {color: rgb(217,121,65);}

.project-set p {padding-bottom: 50px;}

.client-image {width: 60%;
float: left;}
.client {float: right;
width: 36%;
margin-top: 25px;}

#mobile-landing {display: none;}

} /* end desktop view */