/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body{
  overflow-x: hidden;
}

.hide-of {
    overflow-x: hidden;
}

a:hover, a:active, a:focus{
  text-decoration: none;
}
.container-fluid{
  margin-left: 55px;
  margin-right: 55px;
}
.top-bg{
  background: url(../img/top-background-image.jpg);
  background-position-y: -150px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin-bottom: 40px;
}
.head-quote{
  color: white;
  text-align: center;
  word-spacing: 2px;
  letter-spacing: .5px;
  margin: 50px;
  margin-bottom: 80px;
}
.head-quote h1, .head-quote h2{
  font-size: 40px;
}

.smaller{
  font-weight: 200;
}
.orange-nav{
  background: #f35d00;
  color: white;
  padding-top: 40px;
  padding-left: 0;
  padding-bottom: 20px;
}
.orange-nav a{
  color: white; 
}
.orange-nav a:hover{
  color: #ebebeb;
}
.orange-nav .row{
  margin-left: 0;
}
h4{
  margin-bottom: 5px;
  margin-top: 5px;
}
.top{
/*
  padding-right: 0;
  padding-left: 0;
*/
}
.vision{
  background: #ebebeb;
  margin-top: 80px;
}
.fx{
  display: flex;
}
.tedros{
  width: 60%;
  margin: 0 auto;
  margin-top: -80px;
}
.vision-h1{
  margin-left: 10px;
  color: #f35d00;
}
.orange {
  color: #f35d00;
}
.orange:hover{
  color: #0077c0;
}
.tweets{
  background: #0077c0;
  margin-top: 160px;
  text-align: center;
}
.tweets-h1{
  color: white;
}

.biography{
  position: relative;
  background: url(../img/Biography.jpg);
  background-size: 100% auto;
  max-height: 200px;
}
.news-and-speeches{
  position: relative;
  background: url(../img/News-and-speeches.jpg);
  background-size: 100% auto;
  max-height: 200px;
}
.bandn-h1{
  margin-left: 40px;
  padding-top: 65px;
  padding-bottom: 74px;
  padding-left: 40px;
  color: white;
}
.bandn{
  margin-bottom: 40px;
}
.layer{
  background-color: rgba(255, 255, 255, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.biography:hover .layer, .news-and-speeches:hover .layer{
  background-color: rgba(255, 255, 255, 0.3);
}


.priorities{
  background: url(../img/Health-for-all.jpg);
  transition: background .5s linear;
  background-size: 100% auto !important;
  padding: 0;
}
.prior-menu{
  padding: 0;
  margin-bottom: 60px;
}
.prior-h1{
  margin-left: 25px;
  margin-top: 40px;
  margin-bottom: 40px;
  color: white;
}
.prior-button{
  background: #f35d00;
  color: white;
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer;
}
.prior-button:hover{
  background: #0077c0;
}
.prior-button.active{
  background: #0077c0;
}
.button-clear{
  background: rgba(255,255,255,0);
  color: white;
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid white;
  
}
.button-clear:hover{
  background: rgba(255,255,255,0.2);
}
.prior-content{
  margin-top: 96px;
  color: white;
  text-align: center;
}
.prior-content h1{
  font-size: 40px;
  font-weight: bold;
}
.prior-text{
  margin-top: 40px;
  margin-bottom: 40px;
}
.disabled{
  display: none;
}





@media all and (max-width: 1200px) { /* screen size until 1200px */
  h1{
    font-size: 33px; /* 1.5x default size */
  }
  h2 {
    font-size: 27px;
  }
  h4{
    font-size: 15px;
  }
}
@media all and (max-width: 1100px) {
  h1{
    font-size: 31px; /* 1.5x default size */
  }
  h2 {
    font-size: 25px;
  }
  h4{
    font-size: 13px;
  }
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
  h1{
    font-size: 29px; /* 1.5x default size */
  }
  h2 {
    font-size: 23px;
  }
  .head-quote h1{
    font-size: 29px;
  }
  
  .head-quote h2{
    font-size: 23px;
  }
  h4{
    font-size: 11px;
  }
  .prior-button{
    font-size: 11px; 
  }
  .bandn-h1{
    padding-top: 49px;
    padding-bottom: 58px;
    padding-left: 40px;
    color: white;
  }
  .top-bg{
    background-position-y: 0;
}
@media all and (max-width: 767px) { 
  .container-fluid{
    margin-left: 0;
    margin-right: 0;
  }
  .head-quote h1, .head-quote h2{
    width: 100%;
  }
  .orange-nav{
    text-align: center;
    padding: 0;
  }
    
    .orange-nav .row, .orange-nav .col-xs-12 {
        margin-left: 0;
        padding-left: 0;
    }
    
  .top-bg{
    background-position-y: 0;
  }
  .tedros{
    width: 100%;
    margin: 0 auto;
    margin-top: 0;
  }
  .vision{
    margin-top: 0;
  }
  .fx{
    display: inherit;
  }
  .tweets{
    margin-top: 0px;
    padding-top: 1px;
  }
  .top-bg, .bandn{
    margin-bottom: 0;
  }
  .prior-menu{
    margin-bottom: 20px;
  }
  .priorities{
    background-size: auto 100% !important;
  }
  .vision-h1, .prior-h1, .bandn-h1{
    margin-left: 0;
    text-align: center;
  }
  .bandn-h1{
    padding-top: 65px;
    padding-bottom: 74px;
    padding-left: 0;
    text-align: center;
  }
  h4{
    font-size: 14px;
  }
  .prior-button{
    font-size: 14px; 
  }
}
@media all and (max-width: 445px) {
  .biography{
    background-size: auto 100%;
  }
  .news-and-speeches{
    background-size: auto 100%;
  }
    
    .top-bg {
        background-size: 200% auto;
    }
}