.logo {
      margin: auto;
      width: 20%;
      height: 100%;
      opacity: 100%;
      -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 10s; /* Firefox < 16 */
      -ms-animation: fadein 10s; /* Internet Explorer */
       -o-animation: fadein 10s; /* Opera < 12.1 */
          animation: fadein 10s;
          background-attachment: fixed;
    }
    .logo:hover{
      opacity: 50%;
      
    }
    .logo:active {
      background-color:#2c2c2c;
      opacity: 100%;
      border-radius: 50%;
    }

    h1{
      color: #2c2c2c;
        margin: auto;
      width: 100%;
      font-family: sans-serif;
      text-align: center;
      line-height: 100px;
      font-size: 60px;
      background-clip: padding-box;
      background-image: linear-gradient(to right, rgba(51, 91, 126, .5),#fffbee);
        border-radius: 100px;
        opacity: initial;
        -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 5s; /* Firefox < 16 */
      -ms-animation: fadein 5s; /* Internet Explorer */
       -o-animation: fadein 5s; /* Opera < 12.1 */
          animation: fadein 5s;
    }
    .name {
        color: #335b7e;
    margin: auto;
    text-align: center;
    font-family: sans-serif;
    padding-bottom: 200px;
    margin-bottom: 1000px;
    }

    body {
        background-color: #fffbee;
        border: #335b7e;
        border-radius: 100px;
       padding: 20px;
        background-clip: padding-box;
        border-style: dotted;
        margin: 100px;
        

    }
    
 
    h2{
        font-weight: strong;
        color: #fffbee;
        background-image: linear-gradient(to right, #335b7e, #fffbee);
     
        
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
        padding-left: 10px;
    }

    h4{
        color:#2c2c2c;
        margin: auto;
        padding: 5px;
        text-align: center;
        padding-left: 10px;
        -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 10s; /* Firefox < 16 */
      -ms-animation: fadein 10s; /* Internet Explorer */
       -o-animation: fadein 10s; /* Opera < 12.1 */
          animation: fadein 10s;
    }

    .dates{
        font-weight: bold;
        color: #2c2c2c;
        font-size: 18px;
        padding-left: 10px;
    }

    .position {
        font-weight: bold;
        color: #335b7e;
        margin-bottom: 1px;
        padding-left: 10px;
    }
    p{
        margin-top: 5px;
        color: #2c2c2c;
        padding-left: 10px;
    }
    ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
      }
      ul {
        list-style: none;
      }
      
      ul li::before {
        content: "\2022";
        color: #335b7e; 
        font-weight: bold;
        display: inline-block;
        padding-right: 10px;
      }
    .header {
      overflow:hidden;
      background-color: #fffbee; 
      padding: 20px 10px;
    }

    .header a {
      float: left;
      color: #2c2c2c;
      text-align: center;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      line-height: 25px;
      border-radius: 4px;
      
    }

    footer{
      text-align: center;
      padding-bottom: 10px;
      color: #2c2c2c;
      
    }
    
.name{
  -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 3s; /* Firefox < 16 */
      -ms-animation: fadein 3s; /* Internet Explorer */
       -o-animation: fadein 3s; /* Opera < 12.1 */
          animation: fadein 3s;
}

h2{
  -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 5s; /* Firefox < 16 */
      -ms-animation: fadein 5s; /* Internet Explorer */
       -o-animation: fadein 5s; /* Opera < 12.1 */
          animation: fadein 5s;
}

.email_us{
  border-radius: 50px;
  align-items: center;
  width:100%;max-width:800px;
  -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 10s; /* Firefox < 16 */
      -ms-animation: fadein 10s; /* Internet Explorer */
       -o-animation: fadein 10s; /* Opera < 12.1 */
          animation: fadein 10s;
    
}

.email_us:hover{
  opacity: 50%;
}




@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}