/* portfolio-styles.css */

/* Body */
body { background-color: #fff; margin: auto; font-family: "Adobe Garamond Pro", "Adobe Garamond", Times; color: #86888a; }
h1 { font-size: 34px; font-weight: 400; line-height: 44px; color: #5c5d60; margin: 0 0 3px 0; }
h1.profile-title { text-align: center; padding-bottom: 10px; }
h2 { font-size: 18.5px; font-weight: 100; color: #e40473; }
.profile-subtitle { font-weight: 600; padding-right: 10px; display: inline; }
h3 { font-size: 20px; font-weight: 100; color: #86888a; margin: 0 0 20px 0; }
p { font-size: 17px; font-weight: 100; line-height: 22px; color: #86888a; }
p.profile { font-size: 21px; line-height: 26px; }
p a { color: #e40473; text-decoration: none; }
p a:visited { color: #e40473; text-decoration: none; }
p a:visited:hover { color: #e40473; text-decoration: none; border-bottom: 1px solid #e40473; } 
p a:hover { color: #e40473; text-decoration: none; border-bottom: 1px solid #e40473; }
p.linkedin a { color: #e40473; text-decoration: none; }
p.linkedin a:visited { color: #e40473; text-decoration: none; border-bottom: none; }
p.linkedin a:visited:hover { color: #e40473; text-decoration: none; border-bottom: none; } 
p.linkedin a:hover { color: #e40473; text-decoration: none; border-bottom: none; }
img { max-width: 100%; height: auto; border: 1px solid #d8d8d8; }
img.no-border { border: 0; }
* { box-sizing: border-box; }

/* Header */
.white-background-header-container { width: 100%; margin: auto; background-color: #fff; border-bottom: 1px solid #d8d8d8; position: fixed; z-index: 1; } /* extends from left to right browser edge to create a background colour behind content */
.header-container { max-width: 1320px; margin: auto; padding-top: 20px; content: ""; clear: both; } /* holding container where the max-width can be adjusted in conjunction with the other containers' width percentages below to center content that can still be scaled */
.elena-container { width: 25%; margin: 0; padding: 0 25px 10px 25px; float: left; }
.menu-container { width: 75%; margin: 0; padding: 6px 25px 0 40px; float: right; }
img.ep { max-width: 270px; height: auto; border: 0; transition: 0.3s; } 
.menu ul { margin: 0; list-style-type: none; border: 0; overflow: hidden; }
.menu li { display: inline; border: 0; padding-left: 45px; transition: 0.3s; }
.menu li a { font-size: 21px; font-weight: 400; color: #86888a; text-decoration: none; padding-bottom: 3px; }
.menu li a:hover { color: #86888a; }
.menu li a.current-page { color: #e40473; }
.icon { display: none; }

/* Content */
.white-background-container { width: 100%; margin: auto; background-color: #fff; } /* extends from left to right browser edge to create a background colour behind content */
.grey-background-container { width: 100%; margin: auto; background-color: #f8f8f8; } /* extends from left to right browser edge to create a background colour behind content */
.profile-background-container { width: 100%; margin: auto; background-color: #fff; text-align: center; } /* extends from left to right browser edge to create a background colour behind content */
.first-content-container { max-width: 1320px; margin: auto; padding-top: 165px; padding-bottom: 20px; content: ""; clear: both; display: table; transition: 0.3s; }
.content-container { max-width: 1320px; margin: auto; padding-top: 45px; padding-bottom: 20px; content: ""; clear: both; display: table; transition: 0.3s; } /* holding container where the max-width can be adjusted in conjunction with the other containers' width percentages below to center content that can still be scaled */
.profile-container { width: 75%; margin: auto; padding: 160px 10px 20px 10px; transition: 0.3s; }
.text-container  { width: 35%; margin: 0; padding: 0 25px 15px 25px; float: left; }
.image-container { width: 65%; margin: 0; padding: 0 25px 0 25px; float: left; }
#more { display: none; }
#readMoreBtn { font-family: "Adobe Garamond Pro", "Adobe Garamond", Times; font-size: 17.5px; color: #43a5f0; background-color: #fff; border: 0; padding: 0; text-align: center; cursor: pointer;  }
#readMoreBtn:hover { border-bottom: 1px solid #43a5f0; }

/* Footer */
.footer-container { max-width: 1320px; margin-top: 80px; padding: 40px 30px 35px 30px; }
.copyright { font-size: 15px; color: #86888a; }
p.copyright-text { font-size: 14px; color: #86888a; line-height: 18px; margin-top: 5px; }

/* Image Slideshow */
.pagination-container { text-align: center; padding-top: 25px; }
.slide-selector { width: 14px; height: 14px; margin-left: 5px; margin-right: 5px; text-align: center; cursor: pointer; display: inline-block; border-radius: 50%; transition: 0.3s; }
.slide-selector:hover { background-color: #d8d8d8; }
.slide-selector-border { border: 1px solid #b1b3b6; } 
.current-slide, .current-slide:hover { background-color: #e40473; border: 1px solid #e40473; }
.image-slides { display: none; }

/* Fading Animation Slideshow */
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1s; animation-name: fade; animation-duration: 1s; }
@-webkit-keyframes fade { from {opacity: 0.2} to {opacity: 1} }
@keyframes fade { from {opacity: 0.2} to {opacity: 1} }

/* Fading Animation Menu and Profile Overlay */
.fade-overlay { -webkit-animation-name: fade-overlay; -webkit-animation-duration: 0.5s; animation-name: fade-overlay; animation-duration: 0.5s; }
@-webkit-keyframes fade-overlay { from {opacity: 0.2} to {opacity: 0.9} }
@keyframes fade-overlay { from {opacity: 0.2} to {opacity: 0.9} }

/* Menu overlay */
.overlay { width: 100%; height: 100%; display: none; position: fixed; z-index: 1; top: 92px; left: 0; background-color: #5c5d60; opacity: 0.9; overflow-y: auto; }
.overlay-content { width: 100%; position: relative; top: 40px; text-align: left; }
.overlay-content ul { margin: 0; list-style-type: none; border: 0; padding-left: 25px; padding-right: 25px; }
.overlay-content li { padding: 10px; }
.overlay-content li a { font-size: 22px; color: #fff; text-decoration: none; transition: 0.3s; }
.overlay-content li a:hover { color: #b1b3b6; }
.overlay a.close-button { font-size: 32px; color: #fff; text-decoration: none; position: absolute; top: 15px; right: 33px; }
.overlay a:hover.close-button { color: #b1b3b6; transition: 0.3s; }

/* Profile */
.profile-content { width: 100%; text-align: left; padding: 0 20px 0 20px; }
.profile-content ul { margin: 0; list-style-type: none; border: 0; padding-left: 10%; padding-right: 10%; }
.profile-content li.profile-qualifications { font-size: 19.5px; line-height: 28px; font-weight: 100; color: #86888a; }
.profile-content li.profile-qualifications-last { font-size: 19.5px; line-height: 28px; color: #86888a; padding-bottom: 30px; }
.profile-content li.profile-experience-long { font-size: 19.5px; line-height: 28px; font-weight: 100; color: #86888a; padding-bottom: 15px; }
.profile-content li { padding: 10px; }
img.linkedin-logo { max-width: 30px; height: auto; border: 0; margin-right: 10px; }

/* Media queries for different screen widths */
@media only screen and (max-width: 1120px) {
.elena-container { width: 75%; }
.menu-container { width: 25%; padding-left: 0; }
.menu li { display: none; }
.menu-container { text-align: right; padding-top: 10px; }
.icon { display: inline; text-align: right; }
.icon a { color: #b1b3b6; font-size: 32px; font-weight: 400; text-decoration: none; }
.icon a:hover { color: #86888a; text-decoration: none; }
.profile-container { width: 100%; }
}

@media only screen and (max-width: 900px) {
.text-container  { width: 100%; }
.image-container { width: 100%; }	
.first-content-container { padding-top: 140px; }
}

@media only screen and (max-width: 600px) {
.text-container  { width: 100%; }
.image-container { width: 100%; }
}