/* Diane Ferrera Portfolio Site 2026 */

/* colors: ground: #fbfbfb; black: #2f292b; light gray: #dfe0e2; coral: #f45844; yellow #E4BD0B */

/* font-Roboto: Light 300; Regular 400; Bold 700; Black 900 */
/* install google font: roboto */

/* content: JLL / Data Viz / FM Mag / etc: French Bull - Burlen - Bam - PG Mag - Threads */


.roboto-light {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-weight: 300; /* light */
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

.roboto-regular {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* normal */
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

.roboto-bold {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700; /* bold */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.roboto-black {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-weight: 900; /* black */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

body {
  padding-top: 3%;
  padding-bottom: 5%;
  background-color: #fbfbfb;
}

/* Diane Ferrera */
h1 {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-weight: 900; /* black */
  font-style: normal;
  font-variation-settings: "wdth" 100;
  color: #2f292b;
  padding-top: 3%;
}

/* top menu text: about/contact */
.top-menu {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400; /* normal */
  font-variation-settings: "wdth" 100;
  color: #f45844;
}
.top-menu:hover {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400; /* normal */
  font-variation-settings: "wdth" 100;
  color: #558a86;
}

/* portfolio */
h5 {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 300; /* light */
  color: #2f292b;
  padding-top: 5%;
}

/* company name */
h3 {
  padding-top: 5%;
}

/* project name */
h4 {
  padding-top: 5%;
}

/* portfolio */
.h2 {
  font-family: 'Roboto', sans-serif;
  font-weight:500;
  letter-spacing: 1px;
  font-size:medium;
  color: #2f292b;
  margin-top: 5%;
}
.port {
  font-family: 'Roboto', sans-serif;
  font-weight:500;
  letter-spacing: 1px;
  font-size:medium;
  color: #2f292b;
  margin-top: 5%;
  margin-bottom: -5%;
}


/* job title */
.job {
  font-family: 'Roboto', sans-serif;
  font-size: large;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .25px;
  color: #2f292b;
  margin-top: 5%;
  margin-bottom: -5%;
}

.black-text {
  color: #2f292b;
}

/* job description */
.blurb {
  font-family: 'Roboto', sans-serif;
  font-size: medium;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: .25px;
  color: #2f292b;
  line-height: 1.5em;
  margin-bottom: 2%;
}

/* project intro - JLL */
.project-head2 {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-size: large;
  font-style: normal;
  color: #2f292b;
  font-weight: 300;
  letter-spacing: .5px;
}

/* project intro - Filmmaker Magazine */
.project-head {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-size: small;
  font-style: normal;
  color: #2f292b;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 1%;
}

/* project description */
.project-description {
  font-family: 'Roboto', sans-serif;
  font-size: medium;
  font-weight: 300;
  line-height: 175%;
  letter-spacing: .25px;
  color: #2f292b;
  line-height: 1.5em;
  margin-bottom: 2%;
}

/* prompt */
.direction {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: medium;
  font-style: italic;
  color:#f45844;
}

/* prompt */
.direction2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: medium;
  font-style: italic;
  color:#f45844;
}

/* fm magazine cover caption */
.sp-caption {
  font-family: 'Roboto', sans-serif;
  font-size: x-small;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: .25px;
  color: #2f292b;
  line-height: 1.5em;
  padding-bottom: 3%;
}

/* fm magazine spread caption */
.mag-caption {
  font-family: 'Roboto', sans-serif;
  font-size: x-small;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: .25px;
  color: #2f292b;
  line-height: 1.5em;
  margin-bottom: 3%;
}

/*FM covers */
.fmwork {
  width: 100%;      /* Make image fill its column */
  max-width: 100%;  /* Prevent overflow */
  height: auto;     /* Maintain aspect ratio */
  display: block;   /* Removes inline spacing issues */
  box-shadow: 3px 3px 2px #A8ACB0;
  margin-bottom: -3%; 
}

/*FM spreads */
.full-width {
  width: 100%;
  margin-top: 0.5rem; /* space between image and caption */
  padding: 0;
}
.full-width img {
  width: 100%;
  height: auto;
  display: block;
}

.row {
  margin-bottom: 2em;
}

/* data viz text */
.intro {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: small;
  line-height: 175%;
  letter-spacing: .25px;
  color: #2f292b;
}

.pink {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: small;
  line-height: 175%;
  letter-spacing: .25px;
  color:#f45844;
}

.blue {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: small;
  line-height: 175%;
  letter-spacing: .25px;
  color:#558a86;
}

.grey {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: small;
  line-height: 175%;
  letter-spacing: .25px;
  color:#46454b;
}

/*footer */
footer {
  padding-top: 5%;
  margin: auto;
  display: block;
}

#foot {
  font-family: 'Roboto', sans-serif;
  font-size: x-small;
  font-weight: 400;
  letter-spacing: 1px;
  color: #2f292b;
  text-align: left;
  margin: auto;
}

/*for paragraph spacing */
.intro-text p {
  margin-bottom: 0.75em;   /* adjust this */
}
.intro-text p:last-child {
  margin-bottom: 0;
}
.blue {
  font-weight: bold;
  letter-spacing: 1px;
}
.direction {
  margin-top: 1.5em;
  font-style: italic;
}

/* BUTTONS */
/* active on page */
.button1 {
  background-color: #e4bd0b;
  color: white;
  border-radius: 0px;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 50px;
  border: none;
  border-width: 0;
  text-align: center;
  letter-spacing: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition-duration: 0.3s;
  font-family: 'Roboto', sans-serif;
  font-size: small;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: .25px;
}
.button1:hover {
  background-color: #f45844;
  border: none;
  color: white;
  margin-bottom: 15px;
}
.button1:active {
  background-color: #e4bd0b;
  border: none;
  color: white;
  margin-bottom: 15px;
}
.button2 {
  background-color: #dfe0e2;
  color: #2f292b;
  border-radius: 0px;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 50px;
  border: none;
  border-width: 0;
  text-align: center;
  letter-spacing: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition-duration: 0.3s;
  font-family: 'Roboto', sans-serif;
  font-size: small;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: .25px;
}
.button2:hover {
  background-color: #f45844;
  border: none;
  color: white;
  margin-bottom: 15px;
}
.button2:active {
  background-color: #f45844;
  border: none;
  color: white;
  margin-bottom: 15px;
}
/* back next bottom buttons */
.button3 {
  background-color: #dfe0e2;
  color: #2f292b;
  border-radius: 0px;
  margin-right: 15px;
  width: 50px;
  border: none;
  border-width: 0;
  text-align: center;
  letter-spacing: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  transition-duration: 0.3s;
  font-family: 'Roboto', sans-serif;
  font-size: x-small;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: .25px;
}
.button3:hover {
  background-color: #f45844;
  border: none;
  color: white;
}
.button3:active {
  background-color: #f45844;
  border: none;
  color: white;
}
.button-wrapper {
  margin-top: 50px;
  margin-bottom: 20px;
}

/* FIX BUTTON OVERLAP FOR MOBILE */
@media (max-width: 600px) {
  .button1,
  .button2,
  .button3 {
    display: block;
    width: 50%;
    margin-bottom: 12px;
  }
}

h6 {
  font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  color: #7e7e7e;
  text-decoration: none;
}


/* LINKS */
a {
  text-decoration: none;
}
a:link {
  text-decoration: none;
}  
a:visited {
  color: #2f292b;
  text-decoration: none;
}  
a:hover {
  text-decoration: none;
  color: #f45844;
}  
a:active {
  text-decoration: none;
  color: #f45844;
} 


/* SLIDE SHOW */
* {box-sizing: border-box}
body {font-family: 'Roboto', sans-serif; margin:0}
.mySlides1, .myslides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8,
.mySlides9, .mySlides10, .mySlides11, .mySlides12, .mySlides13 {display: none}
img {vertical-align: middle;}

/* SLIDESHOW CONTAINER */
.slideshow-container {
  position: relative;
  margin: auto;
  margin-bottom: 15%;
  box-shadow: 3px 3px 2px #A8ACB0;
}

/* SLIDESHOW CONTAINER - SMALLER */
.slideshow-container2 {
  position: relative;
  margin: auto;
  max-width: 75%;
  margin-bottom: 7%;
  box-shadow: 3px 3px 2px #A8ACB0;
}

/* SLIDESHOW CONTAINER - LESS SPACE BELOW */
.slideshow-container3 {
  position: relative;
  margin: auto;
  margin-bottom: 2%;
  box-shadow: 3px 3px 2px #A8ACB0;
}

/* LEFT AND RIGHT ARROW BUTTONS */
.prev, .next {
  opacity: 1;
  visibility: visible;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #a5a6a9;
  font-weight: bold;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  /*transition: 0.6s ease;*/
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* ARROW HOVER BACKGROUND */
.prev:hover, .next:hover {
  color: #f45844;
  background-color: #F8F8F8;
}

/* SLIDESHOW BOTTOM DOTS */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-top: 2%;
  margin-left: 1%;
  margin-right: 1%;
  background-color: #dbd7d2;
  display: inline-block;
  /*transition: background-color 0.6s ease;*/
}
.active, .dot:hover {
  background-color: #f45844;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container_if {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-bottom: 5%;
}

.container_if_test {
  position: relative;
  overflow: hidden;
  padding-top: 20%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  padding-bottom: 0;
  margin: 0;
}

.responsive-iframe-test {
  position: absolute;
  top: 0%;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 300px;
  margin: 0;
}

.container_if_predict {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-bottom: -15%;
}

.container_if_predict2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-bottom: -5%;
}

.container_if_predict3 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-top: -15%;
}

.container_if_predict4 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-bottom: 7%;
}

.responsive-iframe-predict {
  position: absolute;
  top: 0%;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.container_if2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-top: -20%;
}

.container_if3 {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.container_if4 {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  /* padding-top: 56.25%;  16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  height: 100%;
}

.responsive-iframe {
  position: absolute;
  top: 0%;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


.responsive-iframe2 {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  margin-top: -5%;
}

.responsive-iframe3 {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  margin-bottom: -50%;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}