* { box-sizing:border-box; }
html { display:block;font-family:sans-serif;margin:0;overflow-y:scroll; }
body { background:url("../design/backgrounds/grey_carbonfiber.png");margin:0; }
.full-container {margin:0 auto;width:100%;max-width:1350px;border-right:1px solid #777;border-left:1px solid #777;}
h1,h2,h3,h4,h5,h6 {font-weight:0!important;color:#333;}
hr {border: 0;border-bottom: 1px dashed #ccc;background: #bbb;}
header {position:relative;height:100px;width:100%;background:#4B4651;margin-bottom:0;}
header #logo { height:70px;width:auto;float:left; }
div.rainbow-grad {width: 100%;height: 3px;background: url('../design/template/rainbow-bar.png');}
section {padding:30px;padding-top:0;min-height:800px;background:#EDEAEE;margin:0;}
#logo {margin-top:15px;margin-left:15px;background:#fff;width:150px;height:auto;padding:1px;padding-right:2px;border-radius:50px;}
footer {position:relative;height:135px;background:url("../design/brand/purple-pinwheel.png") no-repeat 96% 50%,#4B4651;background-size:230px 230px;overflow:hidden;}
#copyright {margin-top:0;margin-bottom:0;color:#D9D1FF;font-size:17px;text-shadow:1px 1px 0 #111;position:absolute;right:10px;bottom:10px;}
/* ICONS */
#icon-info {position:absolute;top:7px;right:20px;width:35px;height:35px;background:url("../design/icons/icon-info.png") no-repeat 50% 50%;background-size:35px;}
#icon-user {position:absolute;left:0;top:2px;width:32px;height:32px;background:url("../design/icons/icon-profile.png") no-repeat 50% 50%;background-size:32px;}
#icon-location {position:absolute;right:0;top:-8px;width:45px;height:45px;background:url("../design/icons/icon-mountains.png") no-repeat 50% 50%;background-size:45px;}
#icon-video {position:absolute;left:0;top:-4px;width:34px;height:34px;background:url("../design/icons/icon-video.png") no-repeat 50% 50%;background-size:34px;}
#icon-strengths {position:absolute;left:0;top:-5px;width:33px;height:33px;background:url("../design/icons/icon-strong.png") no-repeat 50% 50%;background-size:33px;}
#icon-abilities {position:absolute;left:0;top:-2px;width:36px;height:36px;background:url("../design/icons/icon-abilities.png") no-repeat 50% 50%;background-size:36px;}
#icon-employment {position:absolute;left:0;top:0;width:30px;height:30px;background:url("../design/icons/icon-resume.png") no-repeat 50% 50%;background-size:30px;}
#icon-education {position:absolute;left:0;top:-5px;width:39px;height:39px;background:url("../design/icons/icon-institution.png") no-repeat 50% 50%;background-size:39px;}
#icon-reference {position:absolute;left:0;top:-3px;width:37px;height:37px;background:url("../design/icons/icon-references.png") no-repeat 50% 50%;background-size:37px;}
#icon-stories {position:absolute;left:0;top:-4px;width:32px;height:32px;background:url("../design/icons/icon-stories.png") no-repeat 50% 50%;background-size:32px;}
#icon-volunteering {position:absolute;left:0;top:-4px;width:35px;height:35px;background:url("../design/icons/icon-volunteer.png") no-repeat 50% 50%;background-size:35px;}
#icon-location2 {position:absolute;left:0;top:-4px;width:35px;height:35px;background:url("../design/icons/icon-mountains.png") no-repeat 50% 50%;background-size:45px;}

/* ICONGS */
#profile-picture {width:27%;margin-top:27px;height:auto;display:inline-block;overflow:hidden;border-top:1px solid #ccc;border-left:1px solid #ccc;box-shadow:1px 1px 1px 1px #ccc;background:#fff;}
#profile-area-2 {position:relative;width:71.5%;display:inline-block;float:right;vertical-align:top;min-height:270px;}
#profile-area-2 h1 {position:absolute;top:0px;left:15px;padding-left:45px;font-size:32px;}
#profile-area-2 h2 {position:absolute;top:11px;right:10px;padding-right:50px;font-size:25px;}
#profile-quote {position:relative;background: #fff;padding:10px;quotes: "\201C""\201D""\2018""\2019";vertical-align:middle;color:#777;margin-top:81px;}
#profile-quote:before {color: #aaa;content: "\201C";font-size: 5em;line-height: 0.1em;vertical-align: top;}
#profile-quote:after {color: #aaa;content: "\201D";font-size: 5em;position:absolute;margin-left: 0.25em;}
#profile-quote p {display:inline;font-size:20px;font-weight:0;}
#profile-area-3 {width:100%;display:inline-block;float:right;vertical-align:top;}
#profile-area-3 h2 {position:relative;padding-left:45px;}
#profile-area-3 video {margin-top:-50px;}
#cover-letter {width:47%;height:350px;display:inline-block;position:relative;float:left;vertical-align:top;}
#cover-letter h2 {margin-top:50px;font-size:32px;color:#74D199;}
#profile-video {width:50%;height:350px;display:inline-block;position:relative;float:right;vertical-align:top;}
#profile-area-4 {display:inline-block;width:49%;float:left;}
#profile-area-4 h2 {position:relative;padding-left:50px;}
#profile-area-5 {display:inline-block;width:49%;float:right;}
#profile-area-5 h2 {position:relative;padding-left:45px;}

.custom-box-left{width:49%;padding:20px;display:inline-block;float:left;}
.custom-box-left h2 {padding-left:50px;position:relative;}
.custom-box-right {width:49%;padding:20px;display:inline-block;float:right;}
.custom-box-right h2 {padding-left:50px;position:relative;}

.employment-box {width:31.77777%;display:inline-block;float:left;padding:20px;margin-left:25px;}
.employment-box h2 {padding-left:50px;position:relative;}
.education-box {width:49%;padding:20px;display:inline-block;float:left;}
.education-box h2 {padding-left:50px;position:relative;}
.reference-box {width:49%;padding:20px;display:inline-block;float:right;}
.reference-box h2 {padding-left:50px;position:relative;}
.reference-box h3,.reference-box h4,.reference-box h5 {font-weight:0;}
.volunteering-box {width:100%;padding:20px;}
.volunteering-box h2 {padding-left:50px;position:relative;}
.stories-box {width:100%;padding:20px;}
.stories-box h2 {padding-left:50px;position:relative;}
.stories-box-story {width:32%;display:inline-block;vertical-align:top;padding-top:25px;}
.stories-box-image {height:220px;width:100%;}
.stories-box-image img {display:block;height:100%;width:auto;margin:0 auto;}
.clear {clear:both;}
.box-look {border-top:1px solid #ccc;border-left:1px solid #ccc;box-shadow:1px 1px 1px 1px #ccc;background:#fff;margin-top:27px;padding:20px;position:relative;}

.full-width-invisblock {display:block;height:1px;width:100%;}

@media all and (max-width:1200px) {
.employment-box {width:31.5%;}
}

@media all and (max-width:1100px) {
.employment-box {width:30.5%;}
.stories-box-image img {display:block;width:90%;height:auto;margin:0 auto;}
}

@media all and (max-width:1035px) {
.stories-box-image {height:200px;width:100%;}
.employment-box {width:100%;padding:20px;margin-left:0;}
#profile-area-2 h2 {display:none;}
}


@media all and (max-width:900px) {
section {padding-top:25px;}
#profile-picture {display:block;width:60%;height:auto;margin:0 auto;}
#profile-area-2 {width:100%;}
}

@media all and (max-width:800px) {
#profile-area-3 h2 {position:relative;padding-left:45px;}
#profile-area-3 video {width:90%;margin:0 auto;}
#cover-letter {width:100%;height:auto;display:block;float:none;}
#cover-letter h2 {margin-top:50px;font-size:32px;color:#74D199;}
#profile-video {width:100%;height:auto;display:block;float:none;vertical-align:top;}
}

@media all and (max-width:600px) {
#profile-area-2 h1 {font-size:1.5em;}
#profile-picture {display:block;width:80%;height:auto;margin:0 auto;}
#profile-area-4 {width:100%;}
#profile-area-5 {width:100%;}
.education-box {width:100%;}
.custom-box{width:100%;}
.reference-box {width:100%;}
}

/* See link for where figcaption and figure comes from
https://css-tricks.com/a-really-nice-way-to-handle-popup-information/*/

figcaption {
   display: none;
   width: 300px;
  height: 100px;
  border: 1px solid blue;
  background: #FFFFFF;
  position: absolute;
  z-index:1000;
  right:0px;
}
figure:hover figcaption {
   display: block;
}