/** Mogul Xero Plugin Styles **/

  /* ============================================================================
  "The Modal" Plugin CSS - modal.js by Tia Aoake
  ========================================================================== */
  
  /* Modal Custom Styling */
  .m-modal-is-open { overflow:hidden !important; }
  #modal { position:fixed; width:100%; height:100%; top:0px; left:0px; overflow: hidden; z-index: 9999999999999999999; }
  #modal .pageContent #modal { position:relative; height:auto; z-index:1; left:auto; top:auto; overflow:auto; }
  #modal .m-close { position: fixed; top: 0; right: 0; background: rgba(0, 0, 0, 0.4); display:block; width: 46px; height: 48px; text-align:center; line-height:34px;  color: #FFF; z-index: 999; text-decoration: none; opacity: 1;}
  #modal .m-close:hover, #modal .m-close:focus { text-decoration:none; outline:none; background: rgb(235, 48, 64);}
  #modal .m-close:before, #modal .m-close:after { content:""; display: inline-block; width: 2px; height: 50%; background: rgba(255, 255, 255, 1); position:absolute; top: 25%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
  #modal .m-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
  #modal .m-close-overlay { position:fixed; background:none; width:100%; height:100%; left:0px; top:0px; z-index:-1; display: none;}
  #modal .m-modal-item .m-close { display:block; right: -46px;}
  #modal.keyboard-open { height:300%; }
  #modal .m-modal-bkgd { background: rgba(31, 29, 29, 0.81); width:100%; height:100%; position: absolute; top: 0; left: 0; z-index: 1;}
  #modal .m-modal-content { margin: 0; width: 100%; height: 100%; position: relative; z-index: 2;overflow-y: auto;overflow-x: hidden;}
  #modal .m-modal-block{ position: relative;height: inherit;width: inherit;} 
  
  #modal .m-modal-item { width: 100%; max-width: 800px; margin: 0 auto; position: relative; top: 50%;-webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%);}
  #modal .m-modal-item .ninja-forms-success-msg { display:none; }

  #modal .m-modal-item iframe[src*="youtube"] {}
  #modal .m-modal-item iframe[src*="wistia"] {}
  #modal .m-modal-item iframe[src*="vimeo"] {}
  
  @media screen and (max-width: 1024px){ 
    
    #modal .m-modal-item { max-width:600px;top: 20px;-webkit-transform: translate(0%, 0%);-moz-transform: translate(0%, 0%);-o-transform: translate(0%, 0%);-ms-transform: translate(0%, 0%);transform: translate(0%, 0%);}
    #modal .m-modal-item iframe { width:600px; height:337px; }
  
  }
  @media screen and (max-width:800px){
    
    #modal .m-modal-item { max-width:500px; }
    #modal .m-modal-item iframe { width:500px; height:281px; }

  }
  @media screen and (max-width:600px){
  
    #modal .m-modal-item { max-width:350px;}
    #modal .m-modal-item iframe { width:350px; height:197px; }
    
    #modal .m-close { display:block; }
    #modal .m-modal-item .m-close { display:none; }

  }

  /* Landing Page Styles */
  .landing-page-popup {background: rgb(255, 255, 255);text-align: center;}
  .landing-page-popup .landing-header {padding: 30px 30px;}
  .landing-page-popup .landing-content {padding: 30px 30px 40px;background: rgba(238, 238, 238, 0.38);border-top: 1px solid #D1D1D1;}
  .landing-header img {max-width: 60%;max-height: 60px;width: auto;height: auto;}
  .landing-header:after { display:inline-block; height:60px;width: 118px;background: url(../img/xero-partner-status.png) 0px 0px no-repeat;background-size: 100% auto; margin-left:40px;vertical-align: middle;}
  
  .partner-status-silver .landing-header:after { background-position: 0 -61px; }
  .partner-status-gold .landing-header:after { background-position: 0 -122px; }
  .partner-status-platinum .landing-header:after { background-position: 0 -183px; }

  @media screen and (max-width:600px){
    .landing-header img { max-width:90%; max-height:50px; }
    .landing-header:after { margin:20px 0 0 }
  }


  /* XPM Form Styling */
  .mogul-form-wrapper { max-width:500px; clear:both;  }
  .mogul-form-wrapper .error {background: #E83D3D;padding: 10px 15px;color: #FFF;font-size: 14px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
  
  .mogul-form { margin:30px -10px;}
  .mogul-form .fieldset { padding:10px; }
  .mogul-form label {font-size: 14px;display: inline-block;margin-bottom: 5px;opacity: 0.8;}
  .mogul-form label span { color:red; }
  .mogul-form input[type="text"], .mogul-form input[type="email"], .mogul-form textarea { color:inherit; font-family:inherit; width:100%; max-width:100%;padding: 0.5em;font-size: inherit;background: #f9f9f9;     border: 1px solid #d3d3d3;     color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
  .mogul-form input[type="text"]:focus, .mogul-form input[type="email"]:focus, .mogul-form textarea:focus {box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);     -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);     -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);outline: none;background: #FFF;} 
  .mogul-form input[type="submit"] {background: #009E55; border:none; font-family:inherit;border-radius: 3px;padding: 10px 20px;color: #FFF;text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);outline: none !important;}
  .mogul-form textarea { height:200px; max-height:250px; }

  @media screen and (max-width:600px){
    
    .mogul-form-wrapper .error { font-size:12px; }
    .mogul-form label {font-size: 12px;}
    .mogul-form input[type="text"], .mogul-form input[type="email"], .mogul-form textarea { font-size:14px; }
    .mogul-form input[type="submit"] { font-size:14px; padding:8px 20px; }

  }