/* ----------- Tablet ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px)  {
      
      .wide-50.article {
          width: 66%;
      }
      .wide-50.art {
          width: 33%;
      }
      
      .point, .padi { display: none;}

}

/* ----------- Mobile ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
    
    /* ### Typography */
    html {
        font-size: 52% ;}
    h1 { font-size: 4.500em; line-height: 1; }
    h2 { font-size: 4rem; line-height: 1.2em; }
    h3 { font-size: 2.5rem; line-height: 1.6; }
    h4 { font-size: 2.2rem; line-height: 1; font-weight: 400; }
    p  { font-size: 1.9rem; line-height: 1.6; letter-spacing: 0.6;}
    #intro p {font-size: 2rem; margin-top: 9vh;}
    #intro h1 {font-size: 2.5rem;}
    #intro h1 b {font-size: 4rem;}
      
    /* Global */
    [class*='scroller-'] {display: none}
    .fp-section,
    .fp-tableCell {
        height: auto !important;
        min-height: 100%;
        overflow: hidden;
        width: 100vw;
    }
    .section {
/*        padding-top: 5.6vh !important;*/
    }
    .fifty {}
    [class*='wide-'] { float: right; box-sizing: border-box; }
    .wide-50 { width: 100%; display: block; }
    .fifty:after { content: ""; display: inherit; clear: both; }

    /* Header */
    header {display: none}
/*    #talk {float: right; height: 4rem; width: 4rem;}*/
      
    /* Intro */
    #intro {min-height: 100vh !important;}
    video#bgvid { min-height: 100vh;}
    .scroller-l {
        display: initial;
        width: 4rem;
        height: 4rem;
        position: absolute;
        bottom: 5.6vh;
        left: 9vw;
        -webkit-transform: translateY(50%);
          transform: translateY(50%);
    }
    #uid .art {
/*        display: block;*/
    }
      
    /* About */
    #uid .article {
/*        display: block;*/
        text-align: center;
        padding: 70px 11vw 0;
    }      
    #uid .story {
        max-width: 100vw;
        margin: 0 auto;
    }
    .story h2::after, #work .title::before {
    width: 9vw;
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    }
    .story .padi {
        display: none;
/*        padding: 5.6vh 0;*/
    }
    #uid .story .point {
        display: none;
/*
        display: block;
        float: none;
        padding: 2.6vh 0;
*/
    }
    #uid .art {
        border: 0;
    }
/*
        .point:first-of-type {
            margin-right: auto;
        }
        .point:last-of-type {
            margin-left: auto;
        }
*/

    /* Focus */
    #focus .title {
        width: 100%;
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    #focus .grid { 
        padding: 0 11vw;
        box-sizing: border-box;
    }
    #focus .box, .box:nth-of-type(2) {
        padding: 0;
        width: 100%;
        float: none;
        display: block;
        text-align: center;  
/*        margin: 0 auto;*/
    }
    #focus .box svg {
        width: auto;
        height: 14.59vh;
        margin: 60px 0 30px 0;
    }
    #focus .box h3 {
        margin: 0 0 30px 0;
        font-weight: 700;
    }
    /* Work */
    #work .title::before {
        top: 35px;
        content: "";
        display: block;
        min-height: 6px;
        background: url(../img/spacer.png) no-repeat bottom right;
        background-size: contain;
        position: absolute;
    }
    #work .title {
        margin-top: 70px;
        text-align: center;
        font-weight: 700;
    }
    #work .grid { 
        margin: 30px 3.4vw 3.4vw ;
    }

    /* Contact */
    #contact svg#bolt {
        margin: 70px 0 5.6vh;
        width: auto;
        height: 14.6vh;
    }
    #contact .story {
        padding: 0 11vw;
        width: 100%;
        box-sizing: border-box;
/*        margin: 0 auto;*/
    }
    #contact .story h2 .bold {
        display: block;
    }
    #mail {
        display: none;
/*
        text-decoration: none;
        font-size: 2.2rem;;
        padding: 30px 0;
*/
    }
    a#contact-btn {
        margin: 60px auto 30px auto;
        padding: 15px 42px 16px;
        display: block;
        font-size: 1.8rem;
        width: auto;
        font-weight: 700;
/*        color: #fff;*/
        text-decoration: none;
        border: 2px solid #3BBBB2;
        box-sizing: border-box;
    }
    /* footer */
    footer {
        width: 100vw; 
        position: static;
        text-align: center;
        padding: 30px 0;
    }
    footer p { padding: 30px 0; float:none; display: block; }
    .social { float:none; display: block; }
}