/* FROM EIF PARENT THEME */

.alignright {
    float:right;
    margin:4px 0 5px 25px;
}

.alignleft {
    float:left;
    margin:4px 25px 5px 0;
}

figure.wp-caption{
    background-color: #eee;
}

figure.wp-caption figcaption{
    padding: 0 12px 8px;
}

div.quiz .quiz-answers,  div.quiz .answer, div.quiz .response, div.quiz .score, div.quiz #quiz-average { display:none; }

div.quiz { margin-bottom:25px; }

div.quiz .question:not(:first-child){ border-top:1px solid #ccc; padding-top:20px; }

div.quiz input{ margin:8px 1px 8px 0; }

div.quiz button{ padding:5px 10px; margin-top:5px; }

div.quiz .answer{ margin:20px 0; overflow:auto; }

div.quiz .correct{ color:green; }

div.quiz .incorrect{ color:red; }

div.quiz div.answer_response{ margin-bottom:19px; }

div.quiz .score{ background-color:#E7E7E7; padding:15px 20px; border-radius: 12px; margin-bottom:40px; font-size:115%; }

div.quiz .score strong{ color:DarkGreen; }

p.quiz-intro { font-size: 120%; color: #666; margin-bottom: 30px; }

div.quiz .choices input[type="radio"]{ float:left; margin: 1px 6px 1rem 5px; }

input[type="radio"] + label{ display:block; margin-left:1.6rem; }

/* small only */
@media only screen and (max-width:440px) {

    div.quiz input{ position:relative; top:2px; }

    div.quiz label{ word-wrap: break-word; max-width: 88%; }

    div.quiz .answer div.wp-caption.alignright{ float:none; margin:15px 0 15px; }

    p.quiz-intro { font-size: 115%; }

    img.quiz-intro.alignright{ width:100%; float:none; margin:0; }

}

@media only screen and (min-width: 40.063em) {

    div.quiz .choices input[type="radio"]{ margin-top:4px; }

}

/* FROM SOTP CHILD THEME */

/* Geocharts */

.postid-34700 #visualization { margin-bottom:15px; }

.postid-34700 .info { width:100%; display:none; }

.postid-34700 a.linkOff { text-decoration:none; color:#666; cursor:text }

.postid-34700 .info h2 { line-height:1.2em; }

.postid-34700 #mapNav { float:right;width:45%;padding:10px; border:1px solid #ccc; margin:15px 0 0 20px; }

.postid-34700 #mapNav li { margin:2px 0 0 1em; }

#bangladesh-flood-map #map-nav button { padding:2px 5px; font-size:.7rem; }
#bangladesh-flood-map #map-nav button.off { color:#333 !important; }

.bangladesh-flood-map-title{ margin-bottom:15px; }

.bangladesh-flood-map-title span{ color:steelblue; }

#map-attribution{ background-color:transparent !important; }

.bangladesh-flood-map-caption { margin-top:4px; padding:6px 10px; background-color: #f5f5f5; font-size:.9rem; }

.map-title span{ color:#f81d1d; }
.map-caption { margin-top:-6px; padding:6px 10px; background-color: #333; font-size:.9rem; color:#fff; }
#map-nav button{ padding:0 8px 1px; }
#map-nav button.settlements{ color:#333 !important; }
#map-nav button.off{ color:#333 !important; }

#rainwater-map svg{ border:0 !important; }
#rainwater-map svg > g:nth-child(2){ transform:translate(520px,415px); }

#urban-heat-map #map-layers button:not(.on){
    background-color: #e7e7e7;
    color:#333 !important;
}

#urban-heat-map #map-layers button.b0.on{
    color:#5f230b !important;
}

/* COLUMBIA GLACIER */

.postid-67428 .columbia-glacier-video-caption{
    padding: 10px;
    background-color:#eee;
    font-size:90%;
    margin-top:-6px;
}

.postid-67428 #gslideshow_captions{
    font-size:90%;
}

.postid-67428 #gslideshow_captions strong{
    font-weight:bold;
    color:#00ABCF;
}

.postid-67428 .exxon-valdez{
    background-color:#eee;padding:10px;overflow:auto;margin:16px 0;
}

.postid-67428 .exxon-valdez strong{
    font-size:110%;
}

.data-dives .intro{
    font-size: 135%;
    font-weight: normal;
    line-height: 1.4em;
    color: #838383;
    font-style: italic;
}

.data-dives .intro .title{
    color: #225ea8;
    background-image: linear-gradient(45deg, #005e96, #00be89);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.data-dives .content h3:not(.feature-header){
    font-size: 125%;
    color: #666;
    font-style: italic;
    font-weight:normal;
    line-height: 1.2em;
    border-top:0;
    border-left:0;
    border-right:0;
    border-bottom:3px solid;
    margin:25px 0 20px;
    padding-bottom:7px;
    border-image: linear-gradient(to right, #005e96, #00be89, #fff);
    border-image-slice: 1;
}

.data-dives .content h3.chartTitle{
    font-style:normal;
    border-bottom:0;
    margin-bottom:6px;
    border-image: none;
}

.data-dives .content h3.chartTitle strong {
    font-weight:normal;
}

.chart .caption {
    font-size: 88% !important;
    margin-bottom:26px;
}

.data-dives .content .question{
    color: #505050;
    font-weight:bold;
}

.data-dives .content .outro{
    font-size: 115%;
    color: #666;
    font-style: italic;
    font-weight:bodt;
    line-height: 1.2em;
    border-bottom:0;
    border-left:0;
    border-right:0;
    border-top:3px solid;
    margin:25px 0 20px;
    padding-top:15px;
    border-image: linear-gradient(to right, #005e96, #00be89, #fff);
    border-image-slice: 1;
}

.data-dives .related-posts h3{
    border-bottom:none;
    font-style: normal;
    border-image:initial;
}

#houston-electricity-outage{
    position:relative;
}
#houston_Feb_16_2021{
    opacity:0;
    position:absolute;
    top:0;
    right:0;
    animation: houstonPower 4s infinite;
}

@keyframes houstonPower {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 415px) {
    .postid-85158 div#map div#info{
        font-size:.8em;
    }
}

@media screen and (max-width: 639px) {
    #map-zoom button { padding:0; width:20px; }
    #map-layers button { margin-bottom:0; }
}

/* JH ADDITIONS 2023-09 - SOTP REDESIGN */

p > iframe{
    aspect-ratio: 16 / 9;
    height: 100%;
    width: 100%;
}

.entry-content figure,
.entry-content figure img{
    max-width:100% !important;
}

figcaption{
    font-size: clamp(.95rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.115rem);;
    line-height:1.25;
}

figure.alignright,
figure.alignleft,
p > img.alignright,
p > img.alignleft{
    max-width:50% !important;
}

div.box{
    background-color: #ececec;
    padding:1px 15px;
}

.postid-68492 img,
.postid-69929 iframe{
    max-width:100%;
}

.postid-89212 .map-caption a{
    color:#ffffe0;
}