/* -----------------------------------------------------------------------------
Engine:     Gametize
Author:     Gametize Pte Ltd
Description:  Responsive elements
----------------------------------------------------------------------------- */

/* Smaller + mobile screen specific styles */
@media screen and (max-width: 1000px) {
  .smallerscreen-block {    /* Force content to become a block on smaller screen */
    display: block !important;
    float: none !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  /* Overrides */
  .container.container-paddedvertical { padding-top : 15px; padding-bottom : 15px }
  .container { padding-left: 12px; padding-right: 12px }
  .paddedall { padding : 12px }
  .paddedvertical { padding : 12px 0px }
  .topmargin { margin-top : 12px }
  .bottommargin { margin-bottom : 12px }
  .bottommarginextended { margin-bottom : 20px }

  /* Mobile Classes */
  .mobilescreen-center { float : none; text-align : center }          /* Force content to center-align on mobile screen */
  .mobilescreen-left { float : none; text-align : left; margin : 0 }      /* Force content to left-align on mobile screen */
  .mobilescreen-topmargin { margin-top : 12px }   /* Force additional margin between elements on mobile screen */
  .mobilescreen-bottommargin { margin-bottom : 12px } /* Force additional margin between elements on mobile screen */
  .mobilescreen-nomargin { margin-bottom : 0 }    /* Force no margin between elements on mobile screen */
  .mobilescreen-paddedsides { padding : 0px 12px }  /* Force additional padding between elements on mobile screen */
  .mobilescreen-nopadding { padding : 0px }     /* Remove side padding to maximize screen estate */
  .mobilescreen-hide { display : none }       /* Hide content on mobile screens */
  .mobilescreen-paddedall { padding : 12px }     /* Add padding on mobile screens */
  .mobilescreen-show { display : block }        /* Show content on mobile screens */
  .mobilescreen-show-inline { display : inline }    /* Show inline content on mobile screens */
  .mobilescreen-popup { width : 300px !important }  /* Popups for mobile screens */
  .mobilescreen-block {               /* Force content to become a block on mobile screen */
    display: block !important;
    float: none !important;
    width: 100% !important;
  }
}
@media screen and (min-width: 767px) {
  .mobilescreen-show, .mobilescreen-show-inline { display : none }
}