/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html,
   button,
   input,
   select,
   textarea {
       color: #222;
   }
   
   body {
       font-size: 1em;
       line-height: 1.4;
   }
   
   /*
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection declarations have to be separate.
    * Customize the background color to match your design.
    */
   
   ::-moz-selection {
       background: #b3d4fc;
       text-shadow: none;
   }
   
   ::selection {
       background: #b3d4fc;
       text-shadow: none;
   }
   
   /*
    * A better looking default horizontal rule
    */
   
   hr {
       display: block;
       height: 1px;
       border: 0;
       border-top: 1px solid #ccc;
       margin: 1em 0;
       padding: 0;
   }
   
   /*
    * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
    */
   
   img {
       vertical-align: middle;
   }
   
   /*
    * Remove default fieldset styles.
    */
   
   fieldset {
       border: 0;
       margin: 0;
       padding: 0;
   }
   
   /*
    * Allow only vertical resizing of textareas.
    */
   
   textarea {
       resize: vertical;
   }
   
   /* ==========================================================================
      Chrome Frame prompt
      ========================================================================== */
   
   .chromeframe {
       margin: 0.2em 0;
       background: #ccc;
       color: #000;
       padding: 0.2em 0;
   }
   
   /* ==========================================================================
      Author's custom styles
      ========================================================================== */
   
   
   
   
   
   
   
   /* Generic */
   
   body{
     width: 100vw;
     height: 100vh;
   
     background-image: url(../images/pexels-rostislav-uzunov-5011647.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center bottom;
   
     font-family: "fairplex-wide";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   
   
   
   
   /* Logo */
   
   
   header{
     width: 100vw;
     padding: 30px 0 100px;
   }
   
   header img{
     margin: 0 auto;
     display: block;
   }
   
   @media screen and (max-width: 600px) {
     header{
       padding: 30px 0 0;
     }
   
     header img{
       width: 35%;
     }
   }
   
   
   
   
   
   /* Forms */
   
   .form-wrap{
       width: 35%;
       margin: 0 auto;
   }
   
   .left-form{
     width: 47.5%;
   
     float: left;
   }
   
   .right-form{
     width: 47.5%;
   
     float: right;
   }
   
   
   @media screen and (max-width: 1200px) {
     .form-wrap{
       width: 90%;
     }
   }
   
   
   @media screen and (max-width: 600px) {
     .form-wrap{
       width: 90%;
     }
   
     .left-form{
       width: 100%;
     }
   
     .right-form{
       width: 100%;
     }
   }
   
   
   input[type=text], input[type=password], input[type=email] {
       width: 100%;
       padding: 12px 0;
       margin: 10px 0 30px;
       display: inline-block;
       border: none;
       border-bottom: 2px solid white;
       box-sizing: border-box;
       background: transparent;
       outline: none;
   
       font-family: "fairplex-wide";
       font-size: 24px;
       opacity: 1;
       color: white;
       font-weight: 400;
   
       -webkit-transition: border-bottom 0.4s ease-in-out;
       transition: border-bottom 0.4s ease-in-out;
   }
   
   input[type=text]:focus, input[type=password]:focus {
       border-bottom: 2px solid black;
   }
   
   
   input[type=text]:valid, input[type=password]:valid {
       border-bottom: 2px solid #f50856;
   } /* This is a quick fix to get an authorization / valid entry state without using JS */
   
   input[type=submit] {
       width: 200px;
       background-color: white;
       color: #f50856;
       padding: 14px 20px;
       margin: 8px auto 30px;
       border: none;
       border-radius: 40px;
       cursor: pointer;
       display: block;
   
       font-family: "fairplex-wide";
       font-size: 24px;
       opacity: 1;
       font-weight: 700;
       text-transform: uppercase;
   
       -webkit-transition: background-color 0.2s ease-in-out;
       transition: background-color 0.2s ease-in-out;
   }
   
   input[type=submit]:hover {
       background-color: #dddddd;
       color: #bb0642;
   }
   
   
   ::-webkit-input-placeholder { /* Chrome */
     color: white;
     font-style: italic;
     opacity: .4;
   
     font-family: "fairplex-wide";
     color: white;
     font-weight: 400;
   }
   :-ms-input-placeholder { /* IE 10+ */
     color: white;
     font-style: italic;
     opacity: .4;
   }
   ::-moz-placeholder { /* Firefox 19+ */
     color: white;
     opacity: .4;
     font-style: italic;
   }
   :-moz-placeholder { /* Firefox 4 - 18 */
     color: white;
     opacity: .4;
     font-style: italic;
   }
   
   
   
   
   
   /* Typography */
   
   h1{
     color: white;
     font-size: 48px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     text-align: center;
     margin: 10px 0;
   }
   
   
   @media screen and (max-width: 1200px) {
     h1{
       margin: 60px 0 0;
       font-size: 35px;
     }
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   /* ==========================================================================
      Helper classes
      ========================================================================== */
   
   /*
    * Image replacement
    */
   
   .ir {
       background-color: transparent;
       border: 0;
       overflow: hidden;
       /* IE 6/7 fallback */
       *text-indent: -9999px;
   }
   
   .ir:before {
       content: "";
       display: block;
       width: 0;
       height: 150%;
   }
   
   /*
    * Hide from both screenreaders and browsers: h5bp.com/u
    */
   
   .hidden {
       display: none !important;
       visibility: hidden;
   }
   
   /*
    * Hide only visually, but have it available for screenreaders: h5bp.com/v
    */
   
   .visuallyhidden {
       border: 0;
       clip: rect(0 0 0 0);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
   }
   
   /*
    * Extends the .visuallyhidden class to allow the element to be focusable
    * when navigated to via the keyboard: h5bp.com/p
    */
   
   .visuallyhidden.focusable:active,
   .visuallyhidden.focusable:focus {
       clip: auto;
       height: auto;
       margin: 0;
       overflow: visible;
       position: static;
       width: auto;
   }
   
   /*
    * Hide visually and from screenreaders, but maintain layout
    */
   
   .invisible {
       visibility: hidden;
   }
   
   /*
    * Clearfix: contain floats
    *
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    *    `contenteditable` attribute is included anywhere else in the document.
    *    Otherwise it causes space to appear at the top and bottom of elements
    *    that receive the `clearfix` class.
    * 2. The use of `table` rather than `block` is only necessary if using
    *    `:before` to contain the top-margins of child elements.
    */
   
   .clearfix:before,
   .clearfix:after {
       content: " "; /* 1 */
       display: table; /* 2 */
   }
   
   .clearfix:after {
       clear: both;
   }
   
   /*
    * For IE 6/7 only
    * Include this rule to trigger hasLayout and contain floats.
    */
   
   .clearfix {
       *zoom: 1;
   }
   
   /* ==========================================================================
      EXAMPLE Media Queries for Responsive Design.
      Theses examples override the primary ('mobile first') styles.
      Modify as content requires.
      ========================================================================== */
   
   @media only screen and (min-width: 35em) {
       /* Style adjustments for viewports that meet the condition */
   }
   
   @media print,
          (-o-min-device-pixel-ratio: 5/4),
          (-webkit-min-device-pixel-ratio: 1.25),
          (min-resolution: 120dpi) {
       /* Style adjustments for high resolution devices */
   }
   
   /* ==========================================================================
      Print styles.
      Inlined to avoid required HTTP connection: h5bp.com/r
      ========================================================================== */
   
   @media print {
       * {
           background: transparent !important;
           color: #000 !important; /* Black prints faster: h5bp.com/s */
           box-shadow: none !important;
           text-shadow: none !important;
       }
   
       a,
       a:visited {
           text-decoration: underline;
       }
   
       a[href]:after {
           content: " (" attr(href) ")";
       }
   
       abbr[title]:after {
           content: " (" attr(title) ")";
       }
   
       /*
        * Don't show links for images, or javascript/internal links
        */
   
       .ir a:after,
       a[href^="javascript:"]:after,
       a[href^="#"]:after {
           content: "";
       }
   
       pre,
       blockquote {
           border: 1px solid #999;
           page-break-inside: avoid;
       }
   
       thead {
           display: table-header-group; /* h5bp.com/t */
       }
   
       tr,
       img {
           page-break-inside: avoid;
       }
   
       img {
           max-width: 100% !important;
       }
   
       @page {
           margin: 0.5cm;
       }
   
       p,
       h2,
       h3 {
           orphans: 3;
           widows: 3;
       }
   
       h2,
       h3 {
           page-break-after: avoid;
       }
   }