@charset "UTF-8";
/* CSS Document */
body {max-width: 1400px; margin: 0px auto; font-size: 1.8em; font-weight: 200}
@media only screen and (max-width: 720px) {
    body {font-size: 1.4em;}
}

h1, h2, h3, h4, h5, #main-nav > a, #cta-home a, .project-cta > p > a, .credits a {font-family: azo-sans-web, sans-serif; font-style: normal; font-weight: 500;}

h1, h2, h3, h4, h5 {padding: 20px 0px;}
h1 {color: #22353A;}
h2 {color: #CC4025;}
h3, h4, h5 {color: #22353A;}

h2 {margin: 20px 0px 20px 0px;}

@media only screen and (max-width: 420px) {
    
	h2 {font-size: 26px;}
	h3 {font-size: 24px;}
	h4 {font-size: 22px;}
	h5 {font-size: 20px;}
    
    /*adjust list margin*/
	ul {padding-left: 20px;}
}

p {line-height: 1.5;}

a:link {color: #096789; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: from-font;}
a:visited {color: #096789; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: from-font;}
a:hover, a:focus, a:active {color: #CC4025; transition: 0.4s;}


/*****************************/
/**      HEADER             **/
/*****************************/
#main-header {padding: 10px 0%; margin: 0px auto; }
#shareMe {text-align: right;}
#logo-svg {width: 85px; height: 86px;}

.navbar {border: 1px solid red; text-align: top;}
@media only screen and (max-width: 480px) {
	.navbar-brand > img {width: 75px;}
}
#share-button {border: 1px solid black; }

/*************  MAIN NAVIGATION  **************/
#main-nav {margin-bottom: 20px;}
#main-nav > a {font-weight: 500; font-size: 18px; text-decoration: none;}
#main-nav > a:link {color: #22353A; text-decoration: none;}
#main-nav > a:visited {color: #22353A; text-decoration: none;}
#main-nav > a:hover, #main-nav > a:focus, #main-nav > a:active {color: #096789; text-decoration: underline;}
#main-nav > a.active {font-weight: 600; color: #096789; text-decoration: underline;}
@media only screen and (max-width: 375px) {
	#main-nav > a {font-weight: 500; font-size: 16px;}
}


/***** HOMEPAGE ******/
@media only screen and (max-width: 375px) {
	#main-home > main {width: 100% !important; padding: 0px 0px 10px 0px;}
}
@media only screen and (max-width: 320px) {
	#main-home > main {width: 100% !important; padding: 0px 0px 10px 0px;}
}

#elevator {background-image: url("../images/home-bckgrnd@2x.png"); background-repeat: no-repeat; background-position: 0 0; margin: 30px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%; /*border: 1px solid black;*/}
#elevator > h1 {color: #CC4025; font-size: 42px; margin: 0px 0px; width: 100%; max-width: 450px; padding: 100px 0px 160px 160px; display: inline-block;}
@media only screen and (max-width: 1024px) {
	#elevator { background-image: url("../images/home-bckgrnd-md.png");}
	#elevator > h1 {padding: 80px 0px 100px 130px;}
}
@media only screen and (max-width: 720px) {
	#elevator { background-image: url("../images/home-bckgrnd.png");}
	#elevator > h1 {font-size: 32px; padding: 60px 0px 80px 80px; max-width: 350px;}
}
@media only screen and (max-width: 420px) {
	#elevator > h1 {padding: 60px 60px 10px 85px;}
}
@media only screen and (max-width: 375px) {
	#elevator {margin-top: 0px;}
	#elevator > h1 {padding: 60px 60px 10px 85px;}
}
/*smallest screen to support 320 x 568 */
@media only screen and (max-width: 320px) {
	#elevator {margin-top: 0px;}
	#elevator > h1 {padding: 70px 30px 10px 50px;}
}

#cta-home {text-align: right; margin: 30px 0px 0px 0px; padding: 0px 10%; margin: 0px auto; }
#cta-home a {font-size: 36px; font-weight: 500; margin: 0px; display: inline-block; background-image: url("../images/cta-bckgrnd.png"); background-repeat: no-repeat; background-position: 0 0; padding: 10px 0px 0px 30px; }
#cta-home a::after {content: url("../images/CTA-Arrow-30.png"); margin: 0px 0px 0px 10px;} /*arrow*/
#cta-home a:link {color: #CC4025; text-decoration: none;}
#cta-home a:visited {color: #CC4025; text-decoration: none;}
#cta-home a:hover, #cta-home a:focus, #cta-home a:active {color: #096789; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: from-font;}

@media only screen and (max-width: 720px) {
	#cta-home {margin: 40px 0px 0px 0px; }
	#cta-home a {font-size: 32px; background-image: url("../images/cta-bckgrnd-30.png"); padding: 5px 0px 0px 20px;}
	#cta-home a::after {content: url("../images/CTA-Arrow-20.png");}
}

@media only screen and (max-width: 320px) {
	/*smallest screen to support 320 x 568 */
	#cta-home a {background-image: url("../images/cta-bckgrnd-30.png"); padding: 5px 0px 0px 20px;}
}


/***************************/
/***** INTERIOR PAGE *******/
/***************************/

/* Page Title */

#page-title {background-image: url("../images/title-header-30.png"); background-repeat: no-repeat; background-position: 0 0; padding: 30px 0px 0px 50px; /*border: 1px solid black;*/ }
#page-title > h1 {text-transform: uppercase; margin: 0px; padding-top: 0px; /*border: 1px solid red;*/}

@media only screen and (max-width: 420px) {
	#page-title {background-size: 20px 42px; padding: 20px 0px 0px 30px;}
	#page-title > h1 {font-size: 30px;}
}
/*smallest screen to support 320 x 568 */
@media only screen and (max-width: 320px) {
	#page-title > h1 {font-size: 28px;}
}

/***************************/
/**   PROJECTS            **/
/***************************/

/* Project Details */

#project-details > #page-title {background: none; padding: 0px 0px 0px 0px;}
#project-details > #page-title > h1 {color: #CC4025; text-transform: none; margin: 10px 0px 10px 0px; /*padding-top: 0px;*/}
#project-details h2 {color: #096789;}

@media only screen and (max-width: 420px) {
	#project-details > #page-title > h1 {font-size: 28px;}
}

.project-thumb {overflow-x: auto; white-space: nowrap; margin: 20px 0px 20px 0px; }
.project-thumb > img {display: inline-block; float: none;}

/* Project CTA */

.project-cta {text-align: right; /*border: 1px solid black; */}
.project-cta > p {background-image: url("../images/cta-bckgrnd-20.png"); background-repeat: no-repeat; background-position: 0 0; margin-bottom: 0px; display: inline-block; /*border: 1px solid red; */}
.project-cta > p > a {font-size: 20px; font-weight: 500; padding: 5px 0px 0px 12px; display: inline-block; text-decoration: none;}
.project-cta > p > a::after {content: url("../images/CTA-Arrow-15.png"); margin: 0px 0px 0px 10px;} /*arrow*/
.project-cta > p > a:link {color: #CC4025; text-decoration: none;}
.project-cta > p > a:visited {color: #CC4025; text-decoration: none;}
.project-cta > p > a:hover, .project-cta > p > a:focus, .project-cta > p > a:active {color: #096789; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: from-font;}
.short-description {margin-bottom: 30px;}

/* CAROUSEL */
.carousel-center-pic img {margin: auto;}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23CC4025' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23CC4025' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* BACKGROUNDS AND BORDERS */

figure {border: 1px solid #C3CFD5; padding: 10px; text-align: center; width: 100%;}
figure > img {border: 1px solid #C3CFD5;}
figcaption {}

.persona {border: 1px solid #C3CFD5; margin: 0px 10px; padding: 10px;}
.persona > div {padding: 10px;}
.persona .persona-img {border: 1px solid #C3CFD5; width: 100%; max-width: 300px;}


/**************************/
/****** ADDITIONALS *******/
/**************************/
.backtoList {padding: 20px 0px 0px 0px; margin: 0px;}
@media only screen and (max-width: 720px) {
    .backtoList{text-align: right;}
}

.center-element {margin: 0px auto;}
.no-border {border: none;}

/*coming soon*/
#coming-soon {padding: 150px 10% 20px 10%; text-align: center;}
#coming-soon h1 {color: #CC4025;}

/*Shapes*/
.triangle-right {display: inline-block; height: 0; border-top: 15px solid transparent; border-left: 30px solid #CC4025; border-bottom: 15px solid transparent;}
/*#cta-home a:hover > .triangle-right, #cta-home a:focus > .triangle-right, #cta-home a:hover > .triangle-right {border-left: 30px solid #096789; transition: 0.4s;}*/

/* Scroll Transitions */
.come-in {
  transform: translateX(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateX(0);
  animation: none;
}
@keyframes come-in {
  to { transform: translateX(0); }
}

.slide-in-right {
  transform: translateX(-150px);
  animation: come-in 0.8s ease forwards;
}

@keyframes slide-in-right  {
  to { transform: translateX(0); }
}


.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

/************************/
/** FOOTER             **/
/************************/
footer {padding: 40px 10%; text-align: left; font-size: 0.8em;}
footer p {padding: 0px 0px 5px 0px; margin: 0px 0px;}
footer a:link {font-weight: 500; text-decoration: none;}
footer a:visited {text-decoration: none;}
footer a:hover, footer a:active, footer a:focus {text-decoration: underline;}

footer > .credits {color: #096789; font-size: 0.8em;}