/* Wolfram Homepage styles: #Topics / 

   developer:   estevaot
   requires:    /common/framework/css/framework.en.css, style.en.css
   ========================================================================== */

/* ============================
* Topics section
* ============================*/
#topics {
  font-family: var(--font-main);
  display: grid;
  padding: 0;
  padding-bottom: 50px;
  grid-template-columns: 1fr;
  background-image: url(https://files.wolframcdn.com/pub/www.wolfram.com/homepage/img/backgrounds/network-bg-bottom-v3.jpg);
  background-position: right top;
  background-size: 100% 100%;
  background-color: #000;
  background-repeat: no-repeat;
  min-height: 100vh;
  & div#outercontainer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    max-width: 100vw;
    padding-left: 0;
    width: 100%;
    position: relative;
    font-family: var(--font-main);
    & #topics__description {
      text-align: left;
      color: #fff;
      padding-left: 2rem;
      padding-block: 3.125rem;
      max-width:500px;
      & h2, p { 
        opacity: 0;
      }
      & h2 {
        font-family: var(--font-main);
        font-weight: 600;
        font-size: 2.4rem;
        line-height: 1.125;
      }
      & p {
        font-family: var(--font-main);
        font-size: 1.61rem;
        margin-bottom: 1.25rem;
        & span.highlight {
          line-height: 1.35;
          margin-top: 0;
          max-width: 270px;
          color: #fdaf3e;
          display: block;
        }
        & span.highlight.font-size-1 {
            max-width:100%;
        }
      }
      & p:nth-of-type(3) {
        margin-bottom:0;
      }
    }
    & #topic-container {
      grid-column: 1;
      max-width: 100vw;
      width: 100%;
      height:100%;
      position: relative;
      justify-self: flex-end;
      & #topicsvg-overlay {
        display: none;
        position: absolute;
        mix-blend-mode: color;
        background: url(../../images/topics/topics-bgcloud.gif);
        background-size: 100% 400%;
        animation: gradient 15s ease infinite;
        height: 100%;
        width: 100%;
        background-position: 0% 0%;
        opacity: .8;
      }
      & .topicLabel {
        text-shadow: #000000 0px 0px 8px, #000000 0px 0px 8px;
        font-weight: 600;
        & div { 
          opacity:1; 
          text-shadow: #322980 0px 0px 8px, #322980 0px 0px 8px;
          font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
          color: #f7efff;
          font-weight: 600;
          font-size: min(1.5cqw, 1.0rem);
          line-height: 1.15;
          transform: translate(-50%, 0%);
          position: absolute;
          text-align: center;
          opacity: 0;
          transition: opacity .5s ease-in-out;
          z-index: 5;
          &:hover {
            color: #fff;
            z-index: 7;
            & picture {
              opacity: 1;
              transition: opacity .25s ease-out;
            }
            & img {
              color: #fff;
              outline: 2px solid #ab59cccf;
              box-shadow:0 0 5px 2px black
            }
          }
          & picture:before {
            content: '';
            display: block;
            position: absolute;
            transform: translate(-50%, -150%) rotate(45deg);
            z-index: 6;
            top: 3px;
            left: 50%;
            pointer-events: none;
            transition: opacity .5sease-out;
            background: none;
            border: 10px solid;
            transition-delay: 100ms;
            border-color:#ab59cccf;
            box-shadow:0 0 5px 2px black
          }
          & picture {
            opacity: 0;
            transition: opacity .75s ease-out;
          }
          & img {
            transform: translate(-50%, -108%);
            display: block;
            position: absolute;
            border-radius: 5px;
            z-index: 7;
            top: 0;
            left: 50%;
            pointer-events: none;
            outline: 2px solid;
            background: white;
            opacity: 1;
          }
          &.label-left picture {
            &:before {
              transform: translate(0,0) rotate(45deg);
              right: 130%;
              left: unset;
            }
            & img {
              transform: translate(0,-50%);
              top: 0;
              right: 140%;
              left: unset;
            }
          }
          &.label-right picture {
            &:before {
              transform: translate(0,0) rotate(45deg);
              left: 130%;
              right: unset;
            }
            & img {
              transform: translate(0,-40%);
              top: 0;
              left: 140%;
              right: unset;
            }
          }
        }
      }
      & .topicsvg {
        opacity:1;
        height: 100%;
        width:100%;
        & .topicLine1 {
          stroke-width: 2.5px;
          transition: stroke 1s ease-out;
          stroke: #7968c7;
        }
        & .topicLine2 {
          transition: stroke 1.5s ease-out;
          stroke-width: 2.5px;
          stroke: #6f5cc678;
        }
        & text:hover {
          fill: #ffd049;
          /*cursor: pointer;*/
        }
      }
      & svg.topicsvg:first-of-type {
        position: absolute;
        top: -53vh;
      }
    }
  }
  &.active {
    & div#outercontainer {
      & #topic-container .topicLabel div { 
        opacity:1; 
      }
    }
  }
}

/* ============================
* Position of pop up images
* ============================*/
.pos-PoliticalScience{left:10.00%;top:70.90%;}.pos-ContentGeneration{left:55.80%;top:90.40%;}.pos-PlantScience{left:86%;top:67%;}.pos-CAD{left:40.7%;top:83.80%;}.pos-LabAutomation{left:8.40%;top:37.60%;}.pos-Biostatistics{left:7.07%;top:49.30%;}.pos-FoodScience{left:77.1%;top:64%;}.pos-Archaeology{left:25.40%;top:72.80%;}.pos-ComputationalBiology{left:6.87%;top:24.2%;}.pos-ComputationalHumanities{left:8.90%;top:58.30%;}.pos-Linguistics{left:9.70%;top:88.40%;}.pos-PublicHealth{left:22.10%;top:31.90%;}.pos-Logistics{left:65%;top:58.2%;}.pos-Energy{left:93%;top:43.80%;}.pos-Edtech {left: 5.8%;top:0;}.pos-PlanetaryScience {left: 92.1%;top: 9.3%;}.pos-IoT{left:80.4%;top:4.69%;}.pos-SystemsAnalysis {left: 42.9%;top: 0.44%;}.pos-ComputerScience {left: 62.70%;top: 1.32%;}.pos-Astronomy {left: 87.3%;top: 15.5%;}.pos-GameTech {left: 29.6%;top: 8.6%;}.pos-ElectricalEngineering {left: 68.5%;top: 9.5%;}.pos-Acoustics {left: 85.3%;top: 26.3%;}.pos-Bioengineering {left: 7.1%;top: 10.7%;}.pos-Cryptography {left: 24.7%;top: 1.3%;}.pos-NetworkScience {left: 36.6%;top: 12%;}.pos-ComputerEngineering {left: 45.7%;top: 8.8%;}.pos-RemoteSensing {left: 59%;top: 12.7%;}.pos-Optics {left: 75.1%;top: 14.3%;}.pos-SoftwareEngineering {left: 43.6%;top: 16.3%;}.pos-NuclearEngineering {left: 71%;top: 18.6%;}.pos-SystemDesign {left: 56%;top: 18.4%;}.pos-Blockchain {left: 18.3%;top: 12.6%;}.pos-Pharmacology {left: 15.4%;top: 20.2%;}.pos-Economics {left: 47.3%;top: 25.5%;}.pos-IndustrialEngineering {left: 70.1%;top: 25%;}.pos-Aerospace {left: 89.2%;top: 33.5%;}.pos-SportsAnalytics {left: 23%;top: 23.4%;}.pos-DataScience {left: 33.9%;top: 28.3%;}.pos-Neuroscience {left: 12.40%;top: 29.8%;}.pos-Mining {left: 66.1%;top: 37.2%;}.pos-Insurance {left: 61.6%;top: 29.3%;}.pos-MaterialScience {left: 78.4%;top: 31.3%;}.pos-Fintech {left: 44.4%;top: 31.6%;}.pos-ManagementScience {left: 54.20%;top: 33.4%;}.pos-AutomotiveEngineering {left: 78.6%;top: 41.8%;}.pos-Robotics {left: 56.5%;top: 41.7%;}.pos-Transportation {left: 73.6%;top: 48.5%;}.pos-RiskAnalysis {left: 47.7%;top: 37.9%;}.pos-InformationScience {left: 35.4%;top: 34.9%;}.pos-ComputerSecurity {left: 36.8%;top: 21%;}.pos-Statistics {left: 25.1%;top: 16.6%;}.pos-Mathematics {left: 42.6%;top: 45.7%;}.pos-Utilities {left: 67.2%;top: 44.4%;}.pos-NaturalResources {left: 33.6%;top: 40.4%;}.pos-ProductionEngineering {left: 57.6%;top: 47.3%;}.pos-BusinessAnalysis {left: 49.8%;top: 51.4%;}.pos-LifeSciences {left: 24.5%;top: 43.8%;}.pos-EnvironmentalScience {left: 16.30%;top: 47.4%;}.pos-AppliedMath {left: 37.5%;top: 49.2%;}.pos-Manufacturing {left: 49.8%;top: 62.4%;}.pos-Adtech {left: 41.8%;top: 58.5%;}.pos-UrbanStudies {left: 85.8%;top: 58.1%;}.pos-CivilEngineering {left: 89.2%;top: 50.5%;}.pos-ChemicalEngineering {left: 73%;top: 55.3%;}.pos-Psychology {left: 21.1%;top: 65.4%;}.pos-CognitiveScience {left: 10.6%;top: 80.4%;}.pos-AI {left: 90.4%;top: 89.3%;}.pos-Ecology {left: 94.9%;top: 69.7%;}.pos-OperationsResearch {left: 57.5%;top: 55.1%;}.pos-RealEstate {left: 56.2%;top: 64.7%;}.pos-ExperimentalAnalysis {left: 64.2%;top: 69.1%;}.pos-ComplexityScience {left: 73.9%;top: 73.8%;}.pos-Agtech {left: 86.7%;top: 73.70%;}.pos-MachineLearning {left: 89.7%;top: 81.4%;}.pos-Retail {left: 81.8%;top: 85.1%;}.pos-MarketingScience {left: 64.3%;top: 78.6%;}.pos-Quantum {left: 62.5%;top: 86.70%;}.pos-Ruliology {left: 74.3%;top: 89.3%;}.pos-StrategicAnalysis {left: 39.9%;top: 89.7%;}.pos-ArtHistory {left: 17.7%;top: 75%;}.pos-Architecture {left: 24.4%;top: 81.00%;}.pos-CreativeArts {left: 16.9%;top: 85.4%;}.pos-ComputationalPhilosophy {left: 24.7%;top: 90.9%;}.pos-Publishing {left: 33.2%;top: 87.1%;}.pos-MediaAnalysis {left: 48.7%;top: 69%;}.pos-ComputerVision {left: 40.4%;top: 64.8%;}.pos-ComputationalMusic {left: 35%;top: 70.3%;}.pos-ComputationalJournalism {left: 35.1%;top: 77.3%;}.pos-EarthScience {left: 55.6%;top: 75.5%;}.pos-ForensicScience {left: 25.4%;top: 58.2%;}.pos-EnvironmentalEngineering {left: 30.6%;top: 53.2%;}
.pos-Stem { left: 11.1%; top: 6.1%;}.pos-Healthcare { left: 17.1%; top: 38.9%;}.pos-SustainableEnergy { left: 86%; top: 39.8%;}
/*============================
* Media Queries 
============================*/
@media (max-width: 1500px) {
  #topics {
    & div#outercontainer #topics__description {
      & h2 { font-size:2rem; }
      & p { font-size:1.3rem }
    }
  }
}

@media (max-width:1200px) {
  #topics {
    & div#outercontainer {
      & #topics__description {
        & h2 { font-size:3rem }
        & p { 
          font-size:1.3rem;
          & span:first-of-type {
            margin-top: 1.25rem;
          }
          & span.highlight { 
            font-size:2.2rem 
          }
        }
      }
      & #topic-container {
        & .topicLabel {
          & div { font-size:.7rem; }
        }
      }
    }
  }
}

/* < 900px */
@media (max-width: 900px) {
  #topics {
    grid-template-columns: 1fr;
    grid-row-gap: 2rem;
    min-height: 90vh;
    & div#outercontainer {
      grid-column: 1;
      grid-template-columns: 1fr;
      & > div { grid-column:1;}
      & #topics__description { 
        max-width: 100vw;
        padding-right: 2rem;
        & h2 {
          font-size: 2.2rem;
          line-height: 1;
        }
        & p, p span.highlight {
          font-size: 1.5rem;
        }
        & p span.highlight { 
          margin-top: 0;
          color: #e8ccff
        }
      }
      & #topic-container {
        width: 100vw;
        grid-column: 1 / -1;
        & .topicLabel {
          & div { font-size:.7rem; }
        }
      }
    }
  }
}

@media (max-width: 600px) {
  #topics { min-height: 80vh; }
  #topics .topicLabel picture img { width:100px; }
}