@keyframes fade-0 {
    from { height:50px; }
    to { height:300px; }
}

@keyframes fade-1 {
    0% { opacity:0; }
    33% { opacity:0; }
    34% { opacity:1; }
    100% { opacity:1; }
}


/* SET COLOR VARIABLES */

:root {
  --wht: #ffffff;
  --blk: #000000;  
  --gry: #555555;
  --dkgry: #333;
  --blu: #017ebe;
}

:root {
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: subpixel-antialiased;
 font-feature-settings: 'kern' 1;
 color: var(--blk);
}

.fade-0 {
    -webkit-animation: fade-0 0.4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fade-0 0.4s; /* Firefox < 16 */
        -ms-animation: fade-0 0.4s; /* Internet Explorer */
         -o-animation: fade-0 0.4s; /* Opera < 12.1 */
            animation: fade-0 0.4s;
}

.fade-1 {
  -webkit-animation-name: fade-1;
  -webkit-animation-duration: 0.4s;
  animation-name: fade-1;
  animation-duration: 0.4s;
}

#particles-js {
  width: 100%;
  height: 800px; 
  display: block;
  position: absolute;
  top: 0px !important;
  left: 0px !important;
} 


/********************************************/

body {
    background-color: #ffffff;
    /*background-image: url("./assets/background_iotd_crevassedglacier_2017301_crop.jpg");*/
    background-image: url("./assets/background_iotd_southernpatagonia_2016122_crop.jpg");
    /*background-image: url("./assets/background_iotd_brunt_2019023_crop.jpg");*/
    /*background-image: url("./assets/background_iotd_PeninsulaCracks_2017301_crop.jpg");*/
    /*background-image: url("./assets/background_iotd_severnayazemlya_2018221_crop.jpg");*/
    /*background-image: url("./assets/background_iotd_labrador_2018049_crop.jpg");*/

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin: 11px;
}

.main-content {
    width: calc(100% - 44px);
    text-align: left;
    padding: 0px;
    margin: 44px 22px 44px 22px;
    float: left;
    position: top;
}

@media only screen and (min-width: 510px) {
.main-content {
    width: 400px;
    text-align: left;
    padding: 0px;
    margin: 44px 44px 44px 44px;
    float: left;
    position: top;
}
}

@media only screen and (min-width: 1015px) {
.main-content {
    min-height: calc(100vh - 176px);
}
}

.ref-container {
    width: calc(100% - 44px);
    height: 638px;
    text-align: left;
    padding: 0px;
    margin: 0px 22px 44px 22px;
    float: left;
    clear: both;
}

@media only screen and (min-width: 410px) {
.ref-container {
    width: calc(100% - 44px);
    height: 572px;
    text-align: left;
    padding: 0px;
    margin: 0px 22px 44px 22px;
    float: left;
}
}

@media only screen and (min-width: 510px) {
.ref-container {
    width: 400px;
    height: 506px;
    text-align: left;
    padding: 0px;
    margin: 0px 44px 44px 44px;
    float: left;
}
}

@media only screen and (min-width: 1015px) {
.ref-container {
    width: 400px;
    height: 506px;
    text-align: left;
    padding: 0px;
    margin: 165px 44px 44px 44px;
    clear: none;
}
}

.img-credit {
    width: calc(100% - 44px);
    text-align: left;
    padding: 0;
    margin: 44px 22px 44px 22px;
    clear: both;
}

@media only screen and (min-width: 510px) {
.img-credit {
    width: 400px;
    text-align: left;
    padding: 0;
    margin: 44px 44px 44px 44px;
    clear: both;
}
}

.img-latlon {
    display: none;
}

@media only screen and (min-width: 1060px) {
.img-latlon {
    display: block;
    position: fixed;
    top: 108px;
    right: 0px;
    text-align: left;
    padding: 0;
    margin: 0;
    transform: rotate(90deg);
    width: auto;
}
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
.img-latlon {
    display: block;
    position: fixed;
    top: 108px;
    right: 0px;
    text-align: left;
    padding: 0;
    margin: 0;
    transform: rotate(90deg);
    width: auto;
}
}


.ref-block {
    display: none;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 22px;
    margin: 0px 0px 22px 0em;
    text-transform: uppercase;
    padding-top: 0px;
    padding-bottom: 0px;
    letter-spacing: 1.2px;
}

h1:after {
    background-color: var(--blk);
    display: block;
    margin: 17px 0px 0px 0px;
    height: 5px;
    content: "";
    text-shadow: none;
    width: 33px;
}

p {
    font-family: 'Roboto mono', mono;
    font-size: 15.5px; 
/*    font-family: 'Roboto', san-serif;
    font-size: 17px;*/
    line-height: 22px;
    font-weight: 500;
    text-align: left; 
    opacity: 0.98;
    margin: 0px 0px 33px 0px;
    padding: 0px;
}


p.img-txt, p.ref-cat {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 11px 0px 33px 0px;
    padding: 0px;
}

p.ref-cat:after {
    background-color: var(--blk);
    display: inline-block;
    margin: 0 0 3px 8px;
    height: 3px;
    content: "";
    text-shadow: none;
    width: 33px;
}

strong {
    font-weight: 700;  
}

i {
  font-weight: 500;
}

a {
    text-decoration: none;
    color: var(--blk);
    font-weight: 700;
    /*background-image: linear-gradient(120deg, #0f6bb6 0%, #97dff4 100%);*/
    background-image: linear-gradient(120deg, #2878bf 0%,  #80bcdc 100%);
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 95%;
    transition: background-size 0.1s ease-in;
}

a.img-txt {
    font-weight: 900;    
}


a:hover {
    background-size: 100% 88%;
}


.left {
  float:left;
}

.right {
  float:right;
  padding-right: 50%;
}

a.prev, a.next {
  cursor: pointer;
  width: auto;
  margin-right: 15px; 
  padding-top: 0px;
  padding-bottom: 0px;
  font-weight: 900;
  font-size: 20px;
  line-height: 22px;
  user-select: none;
  border-bottom: none;
}

.prev {
    margin-left: calc(100% - 66px);
}

.prev:hover, .next:hover {
  border-bottom: none;
}