/* CSS Document */

body {margin:0; padding:0; color:#6d7a87}
body#marissamade {height:auto !important}
h1,h2,h3,h4,h5,h6 {font-family:"brandon-grotesque","Brandon Grotesque",Helvetica,sans-serif; margin-bottom:0px}
h2 {text-transform:uppercase; letter-spacing:.075em; color:#122e42; font-weight:900; font-size:32px; margin-top:50px}
h3 {text-transform:uppercase; color:#2c5972; font-size:18px; letter-spacing:.09em;}
a {text-decoration:none; color:#14b0bf;transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;}
a:hover {color:#fc611f;transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;}

body, p {font-family:omnes-pro,"Omnes",Helvetica,sans-serif}
#skrollr-body { height:100%   }
.container {text-align:center;}
header #logo {text-align:left}
header nav {text-align:right; padding-top:40px}
header nav ul {list-style-type:none; margin:0; padding:0; float:right}
header nav ul li {float:left; padding-left:25px}
header nav ul li a {text-transform:uppercase; color:#2c5871}
header nav ul li a:hover {color:#14b0bf}

#animation {padding-top:100px}
#animation h1 {width:65%; text-align:center; color:#2c5871; margin:0 auto; font-family:omnes-pro,"Omnes",helvetica,sans-serif; font-weight:300; font-size:42px}
#animation .flow-wrapper {width:auto !important}
#animation .center-wrapper {margin:0 auto}
#animation .whole-brain {margin-left:10px}

#portfolio {background-color:#d1edfb; margin-top:50px; padding-bottom:75px}
#portfolio .container {text-align:center;}
#portfolio .container #caret {}
#portfolio .container .row {margin-top:35px}
#portfolio .container .row img {width:100%}
#portfolio .wrapper {margin-top:25px}
#portfolio .container .cbp-caption-overlayBottomPush .cbp-caption-activeWrap {background-color:#2bb8c5; font-family:"omnes-pro",Omnes,Helvetica,sans-serif}
#portfolio .container .cbp-l-caption-title {color:#fff;font-family:"omnes-pro",Omnes,Helvetica,sans-serif; font-size:18px; font-weight:300}
#portfolio .container .cbp-l-caption-desc {color:#d1edfb;font-family:"omnes-pro",Omnes,Helvetica,sans-serif; font-size:14px}
.portfolio-expanded .project-info {padding:25px 0}
.portfolio-expanded .project {padding-right:50px; padding-bottom:25px}
.portfolio-expanded .project p {font-size:18px; color:#2e5971}
.portfolio-expanded .project-info h4 {text-transform:uppercase; color:#2c5871; font-size:14px; font-weight:900; letter-spacing:.09em; border-bottom:solid 2px #d1edfb; margin-bottom:15px; padding-bottom:10px}
.portfolio-expanded li {padding-bottom:8px; color:#2e5971}
.portfolio-expanded {background-color:#a6dae8; padding:40px}

#about .headshot {display:none; margin:35px auto 0 auto; }
#about .container {background:url(../images/marissa.png) left bottom no-repeat}
#about .bio .dek {font-size:26px; line-height:32px; margin-bottom:25px}
#about .bio {font-size:18px; line-height:24px; width:60%; margin:25px auto 50px auto; padding-left:75px; text-align:left}

#skills {background-color:#f8f5eb; padding-bottom:50px}
#skills .row {margin:35px 0 50px 0;}
#skills .row div {text-align:left; }
#skills .row div img {}
#skills .row h3 {padding:0 0 2% 8%}
#skills .row ul {list-style-type:none;margin:0;padding:0 0 0 8%; font-size:16px}

#contact {padding:0 0 100px 0}
#contact h2 {color:#14b0bf}
#contact p {color:#f8f2db; font-size:21px; margin:25px 0}
#contact p a {display:inline-block; margin-top:10px; color:#122e42; background-color:#fdc00f; border-radius:5px; padding:15px 50px; text-decoration:none}
#contact p a:hover {background-color:#fc611f;}




/*html, body {
    width: 100%;
    min-height: 100%;
}*/

*, *:before, *:after {    -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;             box-sizing: border-box; }
*:focus { outline: 0;}
::-moz-focus-inner { padding:0; border:0 }  /* ! removes focus line */
.wrapper {    width: 96%;    max-width: 980px;    margin: 0 auto;}


@media only screen and (min-width: 1200px) {
	.container {width: 1170px; margin: 0 auto;}
	#animation .whole-brain {}

}

@media only screen and (min-width:1050px) and (max-width:1200px) {
	#animation {padding-top:50px}
	.container {width: 950px; margin: 0 auto;}
	#about .container {background-size:230px 300px}
	
}

@media only screen and (min-width:769px) and (max-width:1050px) {
	#animation {padding-top:50px}
	#about .container {background-size:230px 300px}

}

@media only screen and (min-width:640px) and (max-width:768px) {
	#animation {padding-top:50px}	
	#about .container {background-image:none}
	#about .container .headshot {display:block;}
	#about .bio {padding-left:0; width:80%}
	#skills .row div {padding-bottom:35px; width:60%; margin:0 auto;}
	#skills .row div img {float:left; padding-right:15px}
	#skills .row div h3 {padding-left:0}	
	#skills .row ul {padding-left:0;}
	
}


@media only screen and (max-width:640px) {
	#animation {padding-top:50px}
	#about .container {background-image:none}
	#about .container .headshot {display:block;}
	#about .bio {padding-left:0; width:90%}
	#skills .row div {padding-bottom:35px; text-align:center}
	#skills .row ul {padding-left:0}
	#animation h1 {font-size:32px}	
}





@media only screen and (min-device-width:640px) and (max-device-width:780px) {
	#about .container {background-image:none}
	#about .container .headshot {display:block;}
	#about .bio {padding-left:0; width:80%}
	#skills .row div {padding-bottom:35px; width:60%; margin:0 auto;}
	#skills .row div img {float:left; padding-right:15px}
	#skills .row div h3 {padding-left:0}	
	#skills .row ul {padding-left:0;}
}


@media only screen and (max-device-width:640px) {
	
	#logo.col-sm-2 {width:100%; text-align:center}
	#animation {padding-top:15px}
	#animation .whole-brain {margin-left:-10px}
	#portfolio .portfolio-expanded {padding:10px; margin-bottom:25px; margin-top:0;}
	#portfolio .portfolio-expanded img {display:none}
	#about .container {background-image:none}
	#about .container .headshot {display:block;}
	#about .bio {padding-left:0; width:90%}
	#skills .row div {padding-bottom:35px; text-align:center}
	#skills .row ul {padding-left:0}
	#animation h1 {font-size:24px}
	nav {display:none}
	
}