/**********************************/
/*  CT Custom Font                */
/*  VTF Redzone classic oblique   */
/*  Familiar Pro Bold             */

@font-face {
    font-family: 'VTFRedzone';
    src:
      url('https://www.sefiles.net/merchant/6399/files/VTRedzoneClassic-ClassicOblique.woff') format('woff');
    src: url('https://www.sefiles.net/merchant/6399/files/VTRedzoneClassic-ClassicOblique.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'FamiliarPro';
    src:
      url('https://www.sefiles.net/merchant/6399/files/FamiliarPro-Bold.woff') format('woff');
    src: url('https://www.sefiles.net/merchant/6399/files/FamiliarPro-Bold.woff2') format('woff2');
  }
  
  .grid-container-element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    border: 0px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .grid-child-element {
    margin: 10px;
    border: 0px;
    ;
  }
  
  .rcorners {
    border-radius: 25px;
    border: 2px solid #a70d0d;
    background-color: #d68484;
    padding: 20px;
  }
  
  /* Two by two advertiser */
  .ct_grid {
    display: grid;
    grid-template-columns: 50% 50%;
    /* % Determines image size */
    grid-template-rows: 1fr;
    grid-gap: 10px;
    justify-content: center;
  }
  
  .ct_grid_item {
    position: relative;
  }

  
  /* 3 equal columns on wider screens */
  .column {
    float: left;
    width: 33.33%;
    position: relative;
  }
  
  
  
  
  /* Lighten the column (image) on hover */
  .column hover {
    opacity: 0.5;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  div.innerText_ads {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    font-size: 5rem;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    overflow: hidden;
    text-shadow:
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
  }
  
  div.innerText {
    position: absolute;
    top: 70%;
    left: 5%;
    text-shadow:
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
  }
  
  #mainPageImage:hover {
    opacity: 0.8;
  }
  
  #mainPageImage {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    display: block;
    margin: 0px auto;
    text-align: center;
  }
  
  .mainPageImageLargeText {
    font-size: 2.875rem;
    color: rgb(255, 255, 255);
  }
  
  .mainPageImageSmallText {
    font-size: 2rem;
    color: rgb(255, 255, 255);
  }
  
  #AdsImage:hover {
    /* opacity: 0.8; */
    transform: scale(1.05);
    z-index: 10;
  }
  
  #AdsImage {
    position: relative;
    display: block;
    margin: 0px auto;
    text-align: center;
    /* opacity: 1; */
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
  }
  
  .mainPageHeadingBGBlue {
    background-color: rgb(0, 184, 220);
    padding: 7rem;
  }
  
  .mainPageHeadingBGWhite {
    background-color: rgb(255, 255, 255);
    padding: 7rem;
  }
  
  /* The CT blue coloured page header with VTFRedzone custom font*/
  .ct_page_header_blue_text {
    color: rgb(0, 184, 220);
    font-family: 'VTFRedzone';
    font-size: 7rem;
  }
  
  /* The white coloured page header with VTFRedzone custom font*/
  .ct_page_header_white_text {
    color: rgb(255, 255, 255);
    font-family: 'VTFRedzone';
    font-size: 7rem;
  }
  
  .ct_para_header {
    color: #000;
    font-family: 'FamiliarPro';
    font-size: 3rem;
  }
  
  .ct_para_header_white {
    color: #ffffff;
    font-family: 'FamiliarPro';
    font-size: 3rem;
  }
  
  .ct_para_header_blue {
    color: rgb(0, 184, 220);
    font-family: 'FamiliarPro';
    font-size: 3rem;
  }
  
  .ct_page_header_VTRedzone_white {
    color: rgb(255, 255, 255); 
    font-family: 'VTFRedzone'; 
    font-size: 12rem; 
    -webkit-text-stroke: 2px black;
  }

  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other - for narrow (portrait) screens */
  @media screen and (max-width: 600px) {
    
    .column {
      width: 100%;
    }

    .ct_grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .ct_page_header_VTRedzone_white {
        color: rgb(255, 255, 255); 
        font-family: 'VTFRedzone'; 
        font-size: 6rem; 
        -webkit-text-stroke: 2px black;
      }
  }