body {
    background: black;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1em;
}

#loading-page {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: pink;
    z-index: 2;
    display: none;
    
}

.container-about {
    display:inline-block;
    align-self: center;
    margin-top: 1vh;
    padding-left: 150px;
    padding-top: 150px;
    font-size: 1.5em;

    margin-bottom: 40px;
}

.container-about span{
   font-style: italic;
    color:blue;
   
}

.about-articles
{
    
    padding-left: 150px;
    padding-top: 60px;
    font-size: 1em;
    text-indent: 30px;
    width: 100vw;
    border-top: 1px dotted white;
    border-bottom: 1px dotted white;
}


.print-text {
    padding-left: 150px;
    font-size: 1.5em;
    text-indent: 30px;


 }


.about-print {
    border-top: 1px dotted white;

    
 }

 .container-print {
    border-top: 1px dotted white;
    max-width: 100%;
    
 }

 .container-print span{
    font-style: italic;
    color:blue;
    
 }

 .container-print a {
    text-decoration: none;
    color: blue;
 }


 .container-print img {
    width: 51%;
    display: block;
    padding-left: 30px;
 }


.container-print a:hover
 {
    color: white;
 }



.about-text
{
    size: 1.5em;
    text-indent: 30px;
    width: 80vw;
    
}

.about-articles a
{
font-size: 1em;
    text-decoration: none;
    line-height: 1.7;
    padding-left: 30px;
    width: 80vw;
    color: white;
}

.about-articles a:hover {
   color: blue; 
}


.subtitle h6{
   padding-top: 31px;


}

header {
    height: 8vh;

   
}

.header-container {
    margin-left: 5px;
}


@media only screen and (min-width: 850px) {
    .header-container {
        display: flex;
        margin-left: 0;
    }

    .subtitle h6{
        margin-left: 0;
        padding-left: 10px;
    }

     h1 {
        padding-left: 30px;
     }
}




.about-header {
    top: 0;
    position: fixed;
    background: black;
   
}

.about-header h1 {
    background: black;
    width: 100vw;
    padding-bottom: 15px;
    border-bottom: 1px dotted white;
    
}



header a{
    text-decoration: none;
    font-weight: 200;
    color: thistle;

    
}

h1 {

    padding-top: 15px;
    font-size: 2em;
    line-height: 1.3;
    z-index: 100;
    font-family:"neuemachina";
    font-weight: 450;
    text-decoration: none;
    color: white;
    letter-spacing: 0,5px;
    font-weight: 500;
}




h1 :hover {
   color: white;
}


h1 span {
    margin-left: 150px;
    text-decoration: none;
}

h1 span:hover {
    color: white;
}

h1 span:after {
    color: white;
}

h4 {
    padding-top: 15px;
    margin-bottom: -10px;
    padding-left: 30px;
    font-size: 0.6em;
    font-weight: 450;
    text-decoration: none;
    line-height: 2em;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}


h4:hover {
    color: blue;

}


.container { 
    display: flex;
    width: 100vw;
    cursor: ew-resize, auto;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    margin-bottom: -20px;
}




.global-wrapper, .information {
    transition: width .5s ease;
    cursor: ew-resize, auto;
    width: 100%;
    height: 70vh;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
/*     //overflow: hidden; */
    align-items: stretch;
}


.global-wrapper {
    width: 100%; 
}

.information {
    width: 0%;   
    line-height: 1.5em;
    
}



#globe, .information-inner {
    cursor: ew-resize, auto;
    cursor: grab;
}

#globe {
    width: 70vh;
}

.information-inner {
    width: 70vh;
    transition: opacity 2s ease .5s;
    opacity: 0;
    cursor: ew-resize, auto;
    height: 100%;
    border-radius: 70vh;
    overflow: hidden;
    border: 2px dotted rgb(255, 91, 168);
}

.slider-item {
    height: 70vh;
    width: 70vh;
    
}

.slider-item-text {
    text-indent: 30px;
    padding: 10%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    line-height: 1.5em;
}

.slider-item-title {
    padding: 10%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    line-height: 1.5em;
}



.slider-item-image img {
    height: 100%;
    object-fit: cover;
    position: relative;

}

/* for now i don't need it*/
.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: .2;
    display: none;
    filter: saturate(2);
}
footer {
    height: 13vh;
    display: flex;
    font-family: 'Space Grotesk', sans-serif;
    text-indent: 30px;

}

footer > div {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    margin: 20px;
}

.marker {
    cursor: pointer;
   transition: r 2s;
}




footer {
    position: sticky;
    line-height: 2em;
    font-size: 0.8em;
}



.glove-container {
    width: 100%;
    margin-left: 0%;
}

.subtitle {
   
}



@media only screen and (min-width: 1200px) {
    .glove-container {
        width: 50%;
    }
  }


.glove {
    width: auto;
    border: 1px dotted white;
    border-radius: 50px;
    padding: 10px 30px;
    display: inline-flex;
    opacity: 0;
    transition: opacity 2s ease .5s;
    margin-bottom: -2em;
   
 
    
}



.group-buttons { 
    box-sizing: border-box;
    width: 20px; 
    height: 20px; 
    border-radius: 25px;
    border: 1px dotted white;
    cursor: pointer;
}

#environmental {
    background: lime;
}

#political {
    background: blue;
}

#economical {
    background: fuchsia;
}



.color-buttons { 
    display:grid;
    margin-right: 15px;
    }

.geographies { 
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    }

#political {
    padding-bottom: 3px;
;
}

.geographies span { 
    line-height: 1.4em;
    text-transform: uppercase;
    }

    p {
        line-height: 1.6;
        font-size: 1em;
    }


    .column {
        float: left;
        width: 40%;
        padding: 30px;

      }
      
      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }



@media only screen and (min-width: 1200px) {
    .container {
        flex-direction: row;
        height: 74vh;
    
    }
      
    .information-inner {
        margin-bottom: 20px;
     
            }



}


    @media only screen and (max-width: 850px) {
 
    h1 {
        font-size: 1em;
      }


  }


  @media only screen and (max-width: 1200px) {


    .glove {
        margin-top: 20px;
        margin-bottom: 20px;
    }




}



  /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }



.information
{
    margin-top: 5px;
    margin-bottom: 30px;
 
  }
      


  .information-inner{
    min-width: 20px;
  padding-left: 5px;
}
  
   
        

      .slider-item-title {
        
        font-size: 1em;
      
      }

      


      .slider-item-text {
        min-width: 20px;
        font-size: 1em;
        padding-left: 0px;
        min-width: 50px;
        
       
      }


      .container-about {
        font-size: 1em;
        
      }

      .container-about {
        font-size: 1em;
        
      }

      .about-articles {
        font-size: 1em;
        
      }


      .print-text {
        font-size: 1em;
        
      }
    
      

      .globe{
        margin-top: 20px;
    
      }


      .glove {
          margin-top: 30px;
     margin-bottom: 20px;
     font-size: 1.5em;
      }


    }




  

  @font-face {
    font-family: "NeueMachina";
    src: url("font/NeueMachina-Regular.otf");
    }

    sup {
        font-size:small; 
        vertical-align:top;
        font-weight: 550;
    }