/*
color for:
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'
background color
--> %23 <--(#)hex--> 202020 <--'%2F%3E%3C%2Fsvg%3E");

Orginal Svg prev:
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");

Orginal Svg next:
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
*/


/* STYLES */



.prev.x5,.next.x5{
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;
  }
  .prev.x4,.next.x4{
    -moz-background-size: 13.5px 13.5px;
    -webkit-background-size: 13.5px 13.5px;
    background-size: 13.5px 13.5px;
    width: 13.5px;  
    height: 13.5px;
    padding:5px;
    border:2px solid #007aff;
    margin:0 5px;
  }
  
  .prev.x3,.next.x3{
    -moz-background-size: 13.5px 13.5px;
    -webkit-background-size: 13.5px 13.5px;
    background-size: 13.5px 13.5px;
    width: 13.5px;  
    height: 13.5px;
    padding:5px;
    border:2px solid #007aff;
    margin:0 5px;
   border-radius:50%;
  }
  #allpresidents img{
      border-radius: 50%;
    border:4px solid #007aff;
    width: 15vw;
    padding: -5px;
    margin-bottom: 15px;

  }
  #allpresidentsmobile h4{
    font-size: large;

}
#allpresidentsmobile p{
    font-size: medium;
    font-style: italic;
}

#allpresidentsmobile img{
    border-radius: 50%;
  border:4px solid #007aff;
  width: 40vw;
  padding: -5px;
  margin-bottom: 15px;

}
#allpresidents h4{
  font-size: large;

}
#allpresidents p{
  font-size: medium;
  font-style: italic;
}
  .card{
      height: 100%;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
     background-color: rgb(253, 253, 253);
  }
  .prev.x2,.next.x2{
    -moz-background-size: 13.5px 13.5px;
    -webkit-background-size: 13.5px 13.5px;
    background-size: 13.5px 13.5px;
    width: 13.5px;  
    height: 13.5px;
    padding:5px;
    border:2px solid #202020;
    margin:0 5px;
   border-radius:50%;
  }
  .prev.x2{
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
  }
  .next.x2 {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
  }
  .prev.x1,.next.x1{
    -moz-background-size: 13.5px 13.5px;
    -webkit-background-size: 13.5px 13.5px;
    background-size: 13.5px 13.5px;
    width: 13.5px;  
    height: 13.5px;
    padding:5px;
    border:2px solid #202020;
    margin:0 5px;
  }
  .prev.x1{
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
  }
  .next.x1 {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
  }
  .prev.x0{
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23202020'%33%33%33%2Fsvg%3E");
  }
  .next.x0 {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
  }
  
  /* #STYLES */
  /* YOU NEED */
  .prev{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  }
  .next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  }
  .prev,.next {
    float:left;
    width: 27px;
    height: 44px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* #YOU NEED */
  /* DEMO */
  .DemoSlide{
     width: 40%;
     position: relative;
     left:30%;
     height: 80%;
     background: #fff;
     padding-top:1px;
     top:10%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     Justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
  }


  #allpresidents{
      display: block;
  }
  #allpresidentsmobile{
      display: none;
  }


  @media screen and (max-width: 1000px) {
    #allpresidents{
        display: none;
    }
    #allpresidentsmobile{
        display: block;
    }
    }
  /* #DEMO */