/*/////////////////////////////////////////////////////////
Author: J. Amelia Caceres | Last Updated: 07/24
/////////////////////////////////////////////////////////*/

/*/////////////////////////////////////////////////////////
GLOBAL STYLING & TYPOGRAPHY
/////////////////////////////////////////////////////////*/	

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 abbr, acronym, address, big, cite, code,
del, dfn, font, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 16px;
}

h1, h2 {
	font-family: "Gugi", sans-serif;
	font-optical-sizing: auto;
	margin-bottom: 0.5em;
	font-weight: 500;
}

h3, h4, h5, h6{
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	margin-bottom: 0.5em;
	font-weight: 500;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.2em;
}

p {
	line-height: 1.7em;
}

a {
	font-weight: 500;
	text-decoration: none;
}

ul, ol {
	font-size: 14px;
	margin-bottom: 2.5em;
	font-weight: 400;
	margin-left: 1.5em;
	line-height: 1.7em;
}

li {
	font-size: 14px;
}

.text-content p {
	font-size: 1.1em;
	margin-bottom: 2em;
}

.text-content ol, ul {
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 1.5em;
	margin-left: 1.5em;
}

.text-content li {
	font-size: 1em;
	margin-bottom: 1em;
}

.projects-layout h1 {
	font-size: 1.9em;
}

.projects-layout h2 {
	font-size: 1.6em;
}

p.project-subheader {
	font-weight: 400;
	margin-bottom: 2.5em;
}

.thoughts-layout h1 {
	font-size: 1.9em;
}

.thoughts-layout h2 {
	font-size: 1.6em;
}

h2.thoughts-subheader {
	font-size: 1.4em;
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	margin-bottom: 1em;
	font-weight: 300;
}


/*/////////////////////////////////////////////////////////
GLOBAL LAYOUT / STYLING
/////////////////////////////////////////////////////////*/

body {
	background: #F7F6F2;
	scroll-behavior: smooth;
	color: #161A25;
}

a {
	color: #CC3D63;
}

.content-wrapper {
	padding: 25px 3% 0 3%;
	max-width: 1100px;
	margin: auto;
}

.content-wrapper.home {
	padding: 5% 5% 0 5%;
}

.section {
	margin-bottom: 5em;
}

/*/////////////////////////////////////////////////////////
NAVIGATION
/////////////////////////////////////////////////////////*/

/*/////HOME//////*/
.navigation {
	margin-top: 1.5em;
}

.navigation ul {
	list-style-type: none;
	margin: 0;
}

.navigation li {
	display: inline-block;
	margin-bottom: 1.8em;
}

.navigation .links a {
	margin-right: .5rem;
	border: 1px solid #C1FF6F;
	color: #C1FF6F;
	padding: .6rem .8rem .5rem .8rem;
	border-radius: 5px;
	letter-spacing: 1px;
}

.navigation .links a:hover {
	color: #211627;
	background-color: #C1FF6F;
}

.navigation .links .active {
	color: #211627;
}

/*/NOT HOME/*/

.navigation-top {
	margin-bottom: 1em;
}

.navigation-top .links a {
	color: #CC3D63;
	border-color: #CC3D63;
}

.navigation-top .links a:hover {
	background-color: #CC3D63;
	color: #F7F6F2;
}

.navigation-top .links a:active {
	background-color: #CC3D63;
	border-color: #CC3D63;
	color: #F7F6F2;
}

.navigation-top .links .active {
	background-color: #CC3D63;
	border-color: #CC3D63;
	color: #F7F6F2;
}

/*/////SUBNAVIGATION/////*/

.sticky {
	position: sticky;
	top: 0;
	height: 6em;
	width: auto;
}

/* Dropdown Button */
.dropbtn {
	border: none;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	width: 100%;
	text-align: left;
	color: #151A26;
	background: #F7F6F2;
}

/* Dropdown button on hover & focus */
.dropbtn:hover{
	background: #F7F6F2;
}

.dropbtn:focus {
	background: #F7F6F2;
}

.btn-plus {
	float: right;
}

button > i {
	pointer-events: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: block;
	margin-bottom: 2em;
}

/* Dropdown Content (Hidden by Default) */

.dropdown {
	min-width: 150px;
	background: #F7F6F2;
	border: 1px solid #161A25;
	z-index: 1;
	padding: 1.5em 1em .5em 1em;
	border-radius: 10px;
}

.dropdown-content {
	display: none;
	overflow: scroll;
	max-height: 300px;
	min-width: 160px;
	background: #F7F6F2;
	z-index: 1;
	border-radius: 0 0 10px 10px;
}

.dropdown-content:hover {
	overflow-y: scroll;
}

/* Links inside the dropdown */
.dropdown-content button {
	color: #151A26;
	text-decoration: none;
	padding: .75em .5em;
	margin-bottom: 1em;
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	background-color: #F7F6F2;
	letter-spacing: 0.5px;
	border-radius: 4px;
	transition: transform 300ms;
}

.dropdown-content button:hover {
	background: #211627;
	color: #F7F6F2;
	padding-left: .7em;

}

.dropdown-content button.active {
	background: #211627;
	color: #F7F6F2;
	padding-left: .7em;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display:block;
}

/*/////////////////////////////////////////////////////////
PROJECT PREVIEW BUTTON
/////////////////////////////////////////////////////////*/

.button a {
	background-color: #C1FF6F;
	color: #211627;
	padding: 15px 20px;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 2em;
	margin-top: 1em;
	transition: transform 300ms;
	letter-spacing: .7px;
}

.button a:hover {
	background-color: #211627;
	color: #C1FF6F;
	transform: scale(1.05);
}

.button i {
	font-size: 1em;
	margin-left: 2px;
}

.project-description i {
	font-size: 1em;
	margin-left: 2px;
}

/*///////////////////////////////////////////////////////// 
HOME STYLING
/////////////////////////////////////////////////////////*/


.home .section {
	position: relative;
	z-index: 1; /* Make sure content stays above background */
}


/*/ABOUT/*/

.about {
	max-width: 600px;
	margin: 5em 0 4em 0;
}

.profile-picture {
	width: 100%;
	max-width: 350px;
	margin-bottom: 2em;
	/*-webkit-box-shadow: 0 0 170px 3px #CC3E63,0 0 40px 20px #CC3E63;
	box-shadow: 0 0 170px 30px #CC3E63,0 0 40px 20px #CC3E63;*/
}

h1.logotype-name a {
	color: #CC3D63;
}

h1.logotype-name {
	font-weight: 100;
	font-style: normal;
	font-size: 1.8em;
	margin-bottom: 0;
}

p.professional-title {
	font-weight: 400;
	font-size: 1.2em;
	margin-bottom: 3em;
}

p.design-philosophy {
	font-size: 2.6em;
	line-height: 1.1em;
	margin-bottom: .5em;
}

span.emphasis-word {
	color: #CC3D63;
	font-size: 1.1em;
	font-weight: 600;
}

p.professional-description {
	margin-bottom: 4em;
}

.new-post-link p {
	font-weight: 300;
}

/*/NEW POST/*/

.new-post {
	padding: 2.5em 2em 1em 2em;
	border-radius: 2em;
	background: #151A26;
	box-shadow:  5px 5px 8px #080a0f,
	-5px -5px 8px #222a3d;
	margin-bottom: 5em;
}

.new-post-link {
	display: block;
	color: #E0DACD;
}

.new-post-link p{
	line-height: 1.4em;
}

.new-post-link h3 {
	font-size: 1.5em;
	line-height: 1.2em;
}

.new-post-tag {
	color: #F7F6F2;
	letter-spacing: 2px;
	font-weight: 600;
	margin-bottom: 1.2em;
	background-color: #CC3D63;
	display: inline-block;
	border-radius: 50px;
	padding: .25em 1em;
	font-size: .9em;
}

.new-post-link:hover {
	color: #E0DACD;
}

.new-post-button a {
	margin-top: 2.5em;
}

.new-post-button a:hover {
	color: #C1FF6F;
	background-color: #151A26;
	border: 1px solid #C1FF6F;
}

/*/PROJECTS LINKS/*/

.project {
	box-shadow: 25px 25px #151A26;
	border: 1px solid #151A26;
	border-radius: 12px;
	margin-bottom: 5em;
	margin-right: 1em;
}

.project-image-container {
	margin: auto;
}

.project-description {
	padding: 1em 1em 1em 1.5em;
	color: #211627;
	background-color: #fff;
	border-radius: 12px;
}

.project-description h2 {
	font-size: 1.8em;
	font-weight: 700;
}

.project-description p {
	margin-bottom: 1.5em;
}

.project .year {
	font-weight: 900;
	margin-bottom: .8em;
	margin-top: 2em;
}

.project-preview img {
	width: 100%;
}

.project-preview img {
	transition: 0.5s ease-in-out;
	vertical-align: middle;
}

.project-preview img:hover {
	transform:  translateY(-10px);
}

.preview-learning-content-builder{
	border-radius: 10px;
	padding: 1.5em;
}

.preview-resource-library{
	border-radius: 10px;
	padding: 1.5em 0 1.5em .25em;
}

.preview-data-viz {
	padding: 1.5em 0 1.5em 1.5em;
	border-radius: 10px;
}

.preview-irafi-app {
	padding: 1.5em 0 1.5em 1.5em;
	border-radius: 10px;
}

.preview-irafi-sites {
	padding: 1.5em;
	border-radius: 10px;
}

.preview-pension-sites {
	padding: 1.5em 0 1.5em 1.5em;
	border-radius: 10px;
}

/*/////////////////////////////////////////////////////////
PROJECTS STYLING
/////////////////////////////////////////////////////////*/

.tabcontent {
	display: none;
}

.active-thought {
	display: block;
}

.text-content {
	margin: auto auto 3em auto;
}

.text-content p:last-child {
	margin-bottom:  0;
}

.image-content {
	max-width: 1000px;
	margin: auto auto 3.5em auto;
}

.image-content img {
	width: 100%;
	margin-bottom: 1em;
	border-radius: 10px;
}

.projects .image-content p {
	text-align: center;
	color: #6E7494;
	font-size: .9em;
	max-width: 95%;
	margin: auto;
}

#project1 #image3 img {
	background-color: #fff;
}

video {
	box-shadow: 0 4px 8px 0 rgba(27, 2, 113, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.20) ;
	border-radius: 10px;
}

/*/////////////////////////////////////////////////////////
THOUGHTS STYLING
/////////////////////////////////////////////////////////*/

blockquote {
	margin-bottom: 2em;
	padding-left: 2em;
	font-size: 1.2em;
	line-height: 1.7em;
	max-width: 85%;
	border-left: .5em solid #CC3D63;
	border-radius: .5em;
}

.works-cited {
	border-top: 1px solid #CC3D63;
	padding-top: 2em;
	margin-bottom: 2em;
}

/*/////////////////////////////////////////////////////////
RESUME STYLING
/////////////////////////////////////////////////////////*/

.resume p {
	font-size: 1em;
}

.resume ul, ol {
	font-size: 1em;
}

.resume li {
	padding-left: .75em;
	font-size: 1em;
}

/*/////////////////////////////////////////////////////////
CONTACT / FOOTER / COPYRIGHT STYLING
/////////////////////////////////////////////////////////*/

.copyright {
	color: #151A26;
	margin-top: 6em;
	padding: 1em 0;
	text-align: center;
	font-size: .9em;
	letter-spacing: .05em;
	border-top: 1px solid #151A26;
}

.copyright a {
	color: #CC3D63;
}

.home.copyright {
	color: #E0DACD;
}

.home.copyright a {
	color: #C1FF6F;
}