@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/barlow-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/barlow-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/barlow-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/barlow-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/barlow-v5-latin-regular.svg#Barlow') format('svg'); /* Legacy iOS */
}

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

body        
{
  font-family: barlow,sans-serif;
  color: #ffffff;
  font-size: 16px
}

        .text       {color: #000000; font-family: Barlow; font-size: 14px;}
        A:link      {font-family: Barlow;text-decoration: none; color: #555555;}
        A:visited   {font-family: Barlow;text-decoration: none; color: #555555;}
        A:active    {font-family: Barlow;text-decoration: none; color: #555555;}
        A:hover     {font-family: Barlow;text-decoration: none; color: #333333;}
        #box        {
                     height: 250px;
                     width: 300px;
                     margin-top: -250px;
                     margin-left: -165px;
                     position: absolute;
                     top: 50%;
                     padding: 10px;
                     left: 50%;
                     background-color: #aaa;
                     border: 5px solid #ddd;
                     box-shadow: 10px 10px 10px #555555;
        }
        

#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000;}

/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:16px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}

.container {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 1000px;
      }
  
      .book {
        /*width: 400px;
        height: 200px;*/
        position: relative;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        transition: transform 1s;
      }
  
      .page {
        width: 100%;
        height: 100%;
        position: absolute;
        /*background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);*/
        backface-visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
        box-sizing: border-box;
        /*font-size: 20px;*/
        line-height: 1.5;
      }
  
      .page:nth-child(2n) {
        transform: rotateY(-180deg);
      }
  
      .book:hover {
        transform: rotateY(-180deg);
      }