@import "menu.css";

body  {
    text-align: center;
    -webkit-font-feature-settings: "liga" 0, "clig" 0;
    font-feature-settings: "liga" 0, "clig" 0;
}

article  {
    text-align: center;
    width: 60em;
    margin: auto;
}

img  {
    width: 100%;
}

.header  {
    text-align: left;
}

h3  {
    display: inline-block;
    font-family: 'Unna', serif;
    font-size: 3.4em;
    letter-spacing: 0.09em;
    color: #7F3E40;
    text-align: left;
    padding: 15px 0 15px 10px;
    width: 80%;
}
h3#basuki  {
    font-size: 3.2em;
    letter-spacing: 0.05em;
}

h4  {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-align: left;
    padding: 0 0 20px 13px;
    font-size: 18px;
    letter-spacing: 0.1em;
    width: 80%;
    color: #666;
}

h5  {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-align: left;
    margin-top: -3px;
    padding: 0 26px 0 24px;
    font-size: 16px;
    letter-spacing: 0.1em;
    float: right;
    color: #666;
}

p  {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-align: left;
    padding: 2em 17px 2em 10px;
    font-size: 17px;
    letter-spacing: 0.1em;
    line-height: 1.5em;
}

#indoLink  {
    font-family: inherit;
    font-weight: 700;
    text-align: left;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: #666;
}
#indoLink:hover  {
    color: #7F3E40;
}

.someBox img {
    width: 65%;
}

hr  {
    border: 0;
    height: 1.5em;
}

.shareP  {
    text-align: center;
    padding: 0px 0 10px 0.1em;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  visibility: hidden;
  background-color: #aaaaaa;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px 5px 5px 8px;
  position: absolute;
  z-index: 1;
  top: 120%;
  right: -32px;
  margin-left: -75px;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.tooltip span  {
    width: 260px;
}
/*––––––––––––––––––––––––––––––––– M O B I L E  S T A R T S ––––– – – – – – – – – – – – – – – – – – – – –––––––––––––*/
@media screen and (max-width: 960px) {
 
hr  {
    display: none;
}
    
article  {
    text-align: center;
    width: 100vw;
    margin: auto;
}    
    
    
img  {
    width: 100vw;
    display: inline-block;
}
    

h3  {
    font-size: 2.5em;
    width: 90%;
}
h3#basuki  {
    font-size: 1.8em;
}
    
#indoLink  {
    font-family: inherit;
    font-weight: 700;
    text-align: left;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: #666;
}

h4  {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-align: left;
    padding: 0 0 20px 13px;
    font-size: 15px;
    letter-spacing: 0.1em;
    width: 60%;
    color: #666;
}

h5  {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-align: left;
    margin-top: 1px;
    padding: 0 26px 0 24px;
    font-size: 14px;
}

p  {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-align: left;
    padding: 2em 17px 2em 10px;
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.5em;
}
    
}