*{
    box-sizing: border-box;
    padding:0;
    margin:0;
}

h1{
  text-align: center;
}


.flip-card {
    background-color: transparent;
    width: 500px;
    height: 600px;
    perspective: 1000px;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  .flip-card-back {
    background-color:#fefefe;
    color: #333;
    transform: rotateY(180deg);
  }


.column{
    width:50%;
    float:left;
    padding:20px 20px;
}

.row:after{
    display: table;
    content: "";
    clear: both;
}

@media screen and (max-width:600px)
{
    .column{
        width:100%;
    }
}

  /* width */
  ::-webkit-scrollbar {
    width: 7px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: teal; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

  /* Style the tab */
.tab {
    overflow: hidden;
    border: none;
    background-color:white;
    
    width:100%;
    z-index: 1;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color:#333;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: teal;
    color:white;
    letter-spacing: 3px;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: teal;
    color:white;
    letter-spacing: none;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: none;
    border-top: none;
  }

  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 100%;
    margin: auto;
    text-align: center;
    font-family: arial;
    border-top:5px solid black;
    border-left:5px solid black;
    border-right:5px solid black;
    border-bottom: 5px solid black;
    border-radius: 15px;
  }
  
  .title {
    color: grey;
    font-size: 18px;
  }

  .button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
  }
  
  a {
    text-decoration: none;
    font-size: 22px;
    color: black;
  }
  
  .button:hover, a:hover {
    opacity: 0.7;
  }

  .iframe{
    width:100%;
    height:650px;
    
  }

  .pdf{
    width:500px;
    height:600px;
  }

  @media screen and (max-width:600px)
  {
    .pdf 
    {
      width:350px;
    }

    .flip-card
    {
      width:350px;
    } 
  }