/*--- UNIVERSAL STYLE ---*/
#intro{
    display:grid;
    grid-area:intro}
#instructions{
    display:grid;
    grid-area:instructions;}
.cards{
    display:grid;
    grid-area:cards;}
#mBackground{
    display:grid;
    grid-area:mBackground;}
/*--- MOBILE STYLE ---*/
@media only screen and (max-width: 550px){
    body{width:100%;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, auto);
        grid-auto-rows: minmax(auto);
        grid-gap:.1vh;
        margin:0;
        grid-template-areas:
        'intro intro intro intro intro'
    'instructions instructions instructions instructions instructions'
    'mBackground mBackground mBackground mBackground mBackground'}
    #intro{
        display:grid;
        height:20vh;
        grid-gap:1%;
        width:100%;
        background-image: url(../img/blossomSnowCrop.jpg); /*-- I had to add a note here to commit it's the file path change */
        background-size: 100%;
        opacity:100%}
    #blackBox{
        display:grid;
        height:20vh;
        grid-gap:1%;
        width:100%;
        height:0%;
        background-color: black;
        color:white;
        font-family: 'Assistant';
        font-size:3.5vh;
        opacity: 70%;
        text-align: center;}
    #blackBoxText{
        padding-top: 7vh;
        opacity: 0%;}
    #instructions{
        font-family:'Assistant';
        margin-left:3%;
        margin-right:3%;
        font-size:4vw;
        text-align: center;
        color:rgb(83, 80, 80);}
    .Mcard img{width:100%;}
    #backgroundSVG{
        display:none;}
    .cards{    
        display:none;}
    .infoBox{
        display:none;}
    #footer{display:none;}
    #waterNeedsPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MwaterNeedsText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #waterInfPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MwaterInfText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #edPathwayPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MedPathwayText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #behavHealthPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MbehavHealthText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #housingAffPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MhousingAffText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #transitPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MtransitText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #energyPolPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MenergyPolText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #workShortPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MworkShortText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #cyberSecPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #McyberSecText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #diversePop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MdiverseText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    #watchlistPop{
        border-radius: 30px;
        border-color:#00315e;
        border-width:.25vw;
        height:0;
        display:none;
        visibility:hidden;
    }
    #MwatchlistText{
        display:block;
        padding-left:2%;
        padding-right:2%;
        opacity:0;
        font-family: Tahoma;
        font-size:2vh;
    }
    .Mtitle{
        font-family: Tahoma;
        font-size:2.5vh;
        color:#00315e;
        display:inline;
        position:absolute;
        width:100%;
        display:flex;
        align-items: center;
        opacity:0;
        justify-content: center;}
    .Mbeehive{width:25vw;
        margin-left:5vw}
    .MbeehiveText{width:25vw;
    margin-left:5vw}
/*rows with two*/
#beehive_twoOne, #beehive_fourOne, #beehive_tenOne, #beehive_nineOne{margin-left:21vw;}
#beehiveText_twoOne, #beehiveText_fourOne, #beehiveText_tenOne, #beehiveText_nineOne{margin-left:21vw;}
/*rows with one*/
#beehive_eightOne, #beehive_sixOne, #beehive_sevenOne, #beehive_fiveOne{margin-left:38vw;}
#beehiveText_eightOne, #beehiveText_sixOne, #beehiveText_sevenOne, #beehiveText_fiveOne{margin-left:38vw;}
    /*tooltip 2*/
    .toolTip2 {
        color:#07aa66;
        font-weight:bold;}
    [toolTipText]{
        display: inline-block;
        position: relative;
        cursor: help;}
    [toolTipText]:before {
        content: attr(toolTipText);
        display: none;
        position: absolute;
        background: #00315e;
        opacity:.9;
        color: #fff;
        font-weight:normal;
        padding: 4px 8px;
        font-size: 1.5vh;
        line-height: 1.4;
        min-width: 200px;
        max-width:15vw;
        text-align: center;
        border-radius: 4px;
        bottom: 100%;
        margin-bottom: 6px;}
    [toolTipText]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #00315e;}
        [toolTipText]:hover:before,
        [toolTipText]:hover:after {
        display: block;
        z-index: 50;}
    a {font-style: italic;
    color: rgb(0, 99, 228)#00315e;
    text-decoration: none;}
}

/*--- PC STYLE ---*/
@media only screen and (min-width:550px){
    body{width:100%;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, auto);
        grid-auto-rows: minmax(auto);
        grid-gap:.1vh;
        margin:0;
        grid-template-areas:
        'intro intro intro intro intro'
        '. instructions instructions instructions .'}
#mBackground{
    display:none;}

#intro{
    display:grid;
    height:25vh;
    grid-gap:0%;
    width:100%;
    background-image: url(../img/blossomSnowCrop.jpg);
    background-size: 100%;
    opacity:100%;
    align-items: last baseline;}
#blackBox{
    display:grid;
    grid-gap:1%;
    width:60%;
    height:0%;
    background-color: black;
    color:white;
    font-family: 'Georgia';
    font-size:3.5vh;
    opacity: 70%;
    text-align: center}
#blackBoxText{
    padding-top: 5vh;
    opacity: 0%;}
#instructions{
    padding-left: 12.5vw;
    padding-right: 12.5vw;
    font-family:'Assistant';
    font-size:2.5vh;
    text-align: center;
    color:rgb(83, 80, 80);
    padding-bottom: 5vh;}
.cards{ display:grid;}
a {font-style: italic;
    color: rgb(0, 99, 228)#00315e;
    text-decoration: none;}
#edPathway{
    position:absolute;
    margin-top:0%;
    z-index: 1;
    left:14.7%;}
#energyPol{
    position:absolute;
    margin-top:10.8%;
    z-index: 1;
    left:21.8%;}
#waterInf{
    position:absolute;
    margin-top:10.8%;
    z-index: 1;
    left:35.9%;}
#behavHealth{
    position:absolute;
    margin-top:0%;
    z-index: 1;
    left:42.8%;}
#cyberSec{
    position:absolute;
    margin-top:0%;
    z-index: 1;
    left:70.7%;}
#housingAff{
    position:absolute;
    margin-top:10.8%;
    z-index: 1;
    left:63.8%;}
#waterNeeds{
    position:absolute;
    margin-top:10.8%;
    z-index: 1;
    left:49.8%;}
#diverse{
    position:absolute;
    margin-top:21.3%;
    z-index: 1;
    left:42.8%;}
#workShort{
    position:absolute;
    margin-top:21.3%;
    z-index: 1;
    left:14.7%;}
#watchlist{
    position:absolute;
    margin-top:31.8%;
    z-index: 1;
    left:21.8%;}
#beeGif{position:absolute;
    margin-top:13.5%;
    width:8.5vw;
    z-index: 1;
    left:10.9%;}
#transit{
    position:absolute;
    margin-top:21.3%;
    z-index: 1;
    left:70.7%;}
#edPathwayInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:0%;
    z-index:2;
    height:90vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#edPathwayText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#edPathwayEX{
    top:2vh;
    position:sticky;
    margin-left:105%;
}
#edPathwayEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#energyPolInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:80%;
    z-index:2;
    height:0vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#energyPolText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#energyPolEX{
    top:2vh;
    position:sticky;
    margin-left:105%;
}
#energyPolEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#workShortInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:0%;
    z-index:2;
    height:90vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#workShortText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#workShortEX{
    top:2vh;
    position:sticky;
    margin-left:105%;}
#workShortEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#waterInfInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:0%;
    z-index:2;
    height:90vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#waterInfText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#waterInfEX{
    top:2vh;
    position:sticky;
    margin-left:105%;
}
#waterInfEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#behavHealthInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:80%;
    z-index:2;
    height:0vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#behavHealthText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#behavHealthEX{
    top:2vh;
    position:sticky;
    margin-left:105%;
}
#behavHealthEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#diverseInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:80%;
    z-index:2;
    height:0vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#diverseText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#diverseEX{
    top:2vh;
    position:sticky;
    margin-left:105%;
}
#diverseEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#waterNeedsInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:0%;
    z-index:2;
    height:90vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#waterNeedsText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#waterNeedsEX{
    top:2vh;
    position:sticky;
    margin-left:105%;}
#waterNeedsEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#housingAffInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:80%;
    z-index:2;
    height:0vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#housingAffText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#housingAffEX{
    top:2vh;
    position:sticky;
    margin-left:105%;
}
#housingAffEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#waterInfInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:0%;
    z-index:2;
    height:90vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#cyberSecInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:0%;
    z-index:2;
    height:90vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#cyberSecText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#cyberSecEX{
    top:2vh;
    position:sticky;
    margin-left:105%;}
#cyberSecEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#transitInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:80%;
    z-index:2;
    height:0vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#transitText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#transitEX{
    top:2vh;
    position:sticky;
    margin-left:105%;
}
#transitEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
#watchlistInfo{
    position:absolute;
    top:48vh;
    left:10%;
    width:80%;
    z-index:2;
    height:0vh;
    background-color: rgba(255, 255, 255, .97);
    border-style: solid;
    border-radius: 30px;
    border-color:#00315e;
    border-width:.25vw;
    visibility: hidden;
    display:none;}
#watchlistText{
    font-family: Tahoma;
    font-size:1.25vw;
    width:90%;
    opacity:0;
    padding-left:.7%;}
#watchlistEX{
    top:2vh;
    position:sticky;
    margin-left:105%;
}
#watchlistEX img{
    z-index: 3;
    width:3vw;
    opacity:0;}
strong:first-child {
    margin-left:-.4em;
}

/*Animaiton for 'card flip' */    
.flip-card {
    background-color: transparent;
    width: 13vw;
    height: 13vw;
    perspective: 1000px;
    perspective-origin: center;}
.flip-card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1.5s;
    transform-style: preserve-3d;}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    cursor: pointer;}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;}
.flip-card-back{
    transform: rotateY(180deg);}
.beehive{width:14vw;
    margin-left:8vw}
.beehiveText{width:14vw;
margin-left:8vw}
/*rows with two*/
#beehive_twoOne, #beehive_fourOne, #beehive_tenOne, #beehive_nineOne{margin-left:18vw;}
#beehiveText_twoOne, #beehiveText_fourOne, #beehiveText_tenOne, #beehiveText_nineOne{margin-left:18vw;}
/*rows with one*/
#beehive_eightOne, #beehive_sixOne, #beehive_sevenOne, #beehive_fiveOne{margin-left:30vw;}
#beehiveText_eightOne, #beehiveText_sixOne, #beehiveText_sevenOne, #beehiveText_fiveOne{margin-left:30vw;}
.infoBox{
    position:relative;
    height:83vh;
    top: -3vh;
    border-radius: 7px;
    /*opacity:.65;*/
    overflow: auto;
    background-color: white;}
.littleComb{width:1vw;}
.tooltip {
    position: absolute;
    text-align: center;
    max-width:150px;
    width: auto;
    height: auto;
    color:white;
    z-index:4;
    padding: 8px;
    font: 13px Tahoma;
    background: #00315e;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;} /* Prevents the tooltip from interfering with mouse events on underlying elements */
/*tooltip 2*/
.toolTip2 {
    color:#07aa66;
    font-weight:bold;}
[toolTipText]{
    display: inline-block;
    position: relative;
    cursor: help;}
[toolTipText]:before {
    content: attr(toolTipText);
    display: none;
    position: absolute;
    background: #00315e;
    opacity:.9;
    color: #fff;
    font-weight:normal;
    padding: 4px 8px;
    font-size: 1.5vh;
    line-height: 1.4;
    min-width: 200px;
    max-width:15vw;
    text-align: center;
    border-radius: 4px;
    bottom: 100%;
    margin-bottom: 6px;}
[toolTipText]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #00315e;}
    [toolTipText]:hover:before,
    [toolTipText]:hover:after {
        display: block;
        z-index: 50;}
    .tooltip {
    position: absolute;
    text-align: center;
    max-width:150px;
    width: auto;
    height: auto;
    color:white;
    padding: 8px;
    font: 13px Tahoma;
    background: #00315e;
    border: 0px;
    border-radius: 8px;
    pointer-events: none; /* Prevents the tooltip from interfering with mouse events on underlying elements */
}

}