.visual-tour-container
{
   width: 100%;
   height: 100%;
   overflow-y: scroll;
   padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
   box-sizing: content-box; 
}

.tour-description
{
   font-family: sans-serif;
   font-size: 12pt;
   font-variant: proportional-nums;
   padding: 2rem;
   text-align: right;
}

.left>.tour-description
{
   text-align: left;
   font-size: 12pt;
}

.left>h2
{
   padding-left: 1.5rem;
   font-size: 25pt;
   letter-spacing: 1px;
}

.left>p
{
   font-family: sans-serif;
}

.right>h2
{
   text-align: right;
   padding-right: 1.5rem;
   font-size: 25pt;
   letter-spacing: 1px;
}

.visual-tour img
{
   max-height: 300px;
}

.visual-tour .left>span
{ 
   padding-right:1.5rem;
   color:white;
}

.visual-tour span.right
{ 
   padding-left:1.5rem;  
   color:white;
}

.visual-tour .left>span>a>img:hover
{
   opacity: .9;
}

.visual-tour .right>span>a>img:hover
{
   opacity: .9;
}

.image-title
{
   position: absolute;
}

.left>span>div
{
   cursor:pointer;
   color: white;
   font-size: 24pt;
   position: absolute;
   z-index: 10;
   bottom: 1%;
   left: 4%;
}

.left>span>div>a
{
   color: white;
   font-size: 24pt;
}

.left>span>div>a:hover
{
   color: white;
   text-decoration: none;
}

.right>span>div
{
   cursor:pointer;
   color: white;
   font-size: 24pt;
   position: absolute;
   z-index: 10;
   bottom: 1%;
   right: 4%;
}

.right>span>div>a
{
   color: white;
   font-size: 24pt;
}

.right>span>div>a:hover
{
   color: white;
   text-decoration: none;
}

@media screen and (min-width:768px)
{
   .visual-tour .right>span>a>img
   {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
   }
   .visual-tour .right>span>img
   {  
      clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
   }

   .visual-tour .left>span>img
   {
      clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
   }


   .visual-tour .left>span>a>img
   {
      clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
   }

}

@media screen and (max-width:767px)
{
   .mobile-reverse
   {
      flex-direction: column-reverse !important;
   }

   .right, .left, .right>h2, .left>.tour-description, .right>.tour-description
   {
      text-align: center;
   }

   .left>span>div 
   {
      cursor: pointer;
      color: white;
      font-size: 24pt;
      position: absolute;
      z-index: 10;
      bottom: 1%;
      left:88%;
   }
}

.index-page-cards .float-left
{
   shape-outside: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
.index-page-cards .float-right
{
   shape-outside: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}