@font-face {
    font-family: RadikalRegular;
    src: url(/css/radikal-regular.woff2);
}

body{
    font-family: 'RadikalRegular', sans-serif;
    margin:0;
    padding:0;
}


@media only all and (min-width:750px) {

header{
    position: absolute;
    top:35px;
    left:7.5%;
    width:85%;
    display:flex;
    justify-content: space-between;
    align-items:center;
}



a.name{
    font-size:1.3em;
    text-decoration:none;
    color:#000;
}

a.name span:first-child{
    padding: 3px 5px 3px 5px;
    background:#000;
    color:#FFF;
}

a.link{
    color:#000;
    font-size:1.1em;
    text-decoration:none;
    padding:3px 5px 3px 5px;
    transition: 0.2s ease;
}

a.link:hover{
    opacity:0.6;
}

body.dark{
    background:#000;
    color:#FFF;
}

body.dark header a.name{
    opacity:0;
}

body.dark header a.link{
    color:#FFF;
}

.footer{
    text-align:center;
    margin:60px 0 30px 0;
}

.content{
    width:85%;
    margin: 120px auto 0 auto;
}

    /* Animation Logo */


    .logo_anim{
        position: fixed;
        z-index: -1;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
        width: max-content;
        height: 50%;
        text-align: center;
        text-decoration: none;
    }
    .i,.n,.niclass,.point{
        display: inline-block;
        vertical-align: middle;
    }
    .i{
        font-size: 6em;
        padding-left: 40px;
        padding-right: 40px;
        background: #FFF;
        color:#000;
    }
    .n{
        padding-left:20px;
        font-size: 6em;
        background: #000;
        color:#FFF;
    }
    .niclass{
        font-size: 6em;
        margin-left: 0px;
        animation-name: slide;
        animation-duration: 1s;
        animation-delay: .7s;
        animation-fill-mode: forwards;
    }

    @keyframes slide {
        0%     { opacity: 1; margin-left: -20px;}
        100%   { opacity: 0; margin-left: -1.9em;}
    }

    .point{
        font-size: 6em;
        opacity: 0;
        margin-left: -60px;
        animation-name: fadein;
        animation-duration: 1s;
        animation-delay: 1.3s;
        animation-fill-mode: forwards;
    }


    @keyframes fadein {
        0%     { opacity: 0; }
        100%   { opacity: 1; }
    }

    p.description{
        font-size: 2em;
    }

    p.slide{
        opacity: 0;
        margin-top: 10vh;
        animation-name: fadein;
        animation-duration: 1s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
    }



    /* Animation cover */

    .movies{
        position:absolute;
        top: 77vh;
        background: #000;
        width:100%;
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items:flex-start;
        animation-name: slideup;
        animation-duration: 1s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
        opacity:0;
    }

    .m_i_div{
        width: 12%;
    }

    img.m_i{
        width:100%;
        opacity: 1;
    }

    @keyframes slideup {
        0%     { opacity: 0; transform:translateY(70px);}
        100%   { opacity: 1; transform:translateY(0px);}
    }

    .above{
        text-align: left;
        position: absolute;
        z-index: 1;
        left:0;
        right: 0;
        margin:auto;
        width:80%;
        padding:100px 10% 90px 10%;
        margin-top: 120vh;
        background: #fafafa;
        color:#000;
    }

    .above_about{
        display:flex;
        justify-content: space-between;
        align-items:flex-start;
    }

    .above_about div:first-child{
        width:36%;
    }

    .above_about div:last-child{
        width:59%;
    }

    .above_about img{
        width:100%;
    }


    /* Above Gallery */

    .above_gallery{
        margin-top:40px;
    }

    .above_type{
        margin-top:40px;
    }

    a.type{
        color:#000;
        text-decoration:none;
        font-weight:bold;
        font-size:1.2em;
    }

    .gallery{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        overflow-x: scroll;
        padding:2em 0 10px 0;
    }

    .gallery a{
        flex: 0 0 auto;
    }

    a.movie{
        width:18%;
        vertical-align:top;
        padding:0;
        margin-bottom:10px;
        text-decoration:none;
        color:#000;
        display:flex;
        flex-flow: column;
    }

    .movie_img{
        height:17vw;
    }

    a.movie img{ 
        height:100%;
    }

    .movie_desc{
         flex: 0 1 60px;
    }

    h2.title_g{
        margin:0;
        font-size:1em;
        padding-top:10px;
        padding-bottom:10px;
    }
    p.reali_g{
        color:#757575;
        margin:0;
        font-size:0.9em;
    }
    p.date_g{
        color:#9E9E9E;
        margin:0;
        font-size:0.9em;
    }



    /* Portfolio */

    #port{

    }

    h2.movie_d{
        margin:0;
        padding-bottom:5px;
        font-size:2em;
        font-weight:bold;
    }
    img.movie_d{
        width:20%;
        display:inline-block;
        vertical-align:top;
    }
    div.movie_d{
        width:40%;
        margin-left:3%;
        text-align:left;
        display:inline-block;
    }

    .youtube{
        margin-top:40px;
    }

    iframe.youtube{
        width:50vw;
        height:30vw;
    }
    span.director,span.date,span.country{
        color:#9E9E9E;
    }
    span.director,span.date,span.country,span.decor{
        display:block;
    }
    span.decor{
        padding-top:10px;
        font-weight:bold;
    }



    #home{
        display:flex;
        justify-content: space-between;
        align-items:flex-start;
    }

    .filter{
        width:16%;
        text-align:left;
        padding-bottom:20px;
        position: -webkit-sticky;
        position: sticky;
        top: 40px;
    }
    a.filterl{
        display:block;
        font-size:1em;
        color:#000;
        margin: 0 0 13px 0;
        text-decoration: none;
        transition: ease .2s;
    }
    a.filterl:hover{color:#BDBDBD;}
    a.sel{text-decoration:underline;}

    .grid{
        width: 82%;
        margin: -35px 0 0 0;
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .grid::after {
      content: "";
      width:33%;
    }

    a.element{
        position: relative;
        width:22%;
        text-decoration: none;
        color:#000;
        padding:35px 0 10px 0;
    }

    a.element img{
        width:100%;
    }

    .texta{
        margin: 10px 0 0 0;
        font-size: 1.1em;
        padding: 10px 0 10px 0;
        font-weight:bold;
    }

    .reala{
        color: #757575;
        margin: 0 0 5px 0;
        font-size: 0.9em;
    }

    .datea{
        color: #9E9E9E;
        margin: 0;
        font-size: 0.9em;
    }


 #contact{
        display: flex;
        justify-content: center;
    }
    .contact_img{width:20%;}
    .contact_img img{width:100%;}
    .contact_text{width:50%;text-align:left;margin-left:5%}
    h1{margin-top: 0;}


     input.form-field{
      outline:none;
      border-radius: 0;
      background: #FFF;
      color: #000;
      -webkit-appearance: none;
      -webkit-rtl-ordering: logical;
      -webkit-user-select: text;
      cursor: auto;
      width:100%;
      box-sizing: border-box;
      height: 40px;
      margin: 10px 0px 10px 0px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid #000;
      font-family:liberationr, sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 14px;
      font-size: .875rem;
      }

    ::placeholder {
      color: rgba(0,0,0,0.8);
      opacity: 1;
    }

    .submit-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        - appearance: none;
        border: 1px solid #000;
        background: #000;
        color: #FFF;
        font-family: helvetica, serif;
        padding: 8px 18px;
        margin-top: 6px;
        font-size: 14px;
        transition: 0.1s ease;
    }

    .submit-button:hover {
        background: #FFF;
        color: #000;
    }

    textarea.form-field{
      outline:none;
      background: #FFF;
      color: #000;
      -webkit-appearance: none;
      -webkit-rtl-ordering: logical;
      -webkit-user-select: text;
      cursor: auto;
      width:100%;
      height:100px;
      max-height: 200px;
      margin: 10px 0px 10px 0px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid #000;
      font-weight: 300;
      font-style: normal;
      font-size: 14px;
      font-size: .875rem;
      }


    .g-recaptcha{
       margin: 15px auto !important;
        transform:scale(0.85);
          -webkit-transform:scale(0.85);
          transform-origin:0 0;
          -webkit-transform-origin:0 0;
    }

}


@media only all and (max-width:750px) {

header{
    position: absolute;
    top:20px;
    left:5%;
    width:90%;
    display:flex;
    justify-content: space-between;
    align-items:flex-start;
    text-align:left;
}



a.name{
    font-size:1.3em;
    text-decoration:none;
    color:#000;
}

a.name span:first-child{
    padding: 3px 5px 3px 5px;
    background:#000;
    color:#FFF;
}

a.link{
    color:#000;
    display:block;
    font-size:1.1em;
    text-decoration:none;
    padding:3px 5px 3px 5px;
    transition: 0.2s ease;
}

a.link:hover{
    opacity:0.6;
}

body.dark{
    background:#000;
    color:#FFF;
}

body.dark header a.name{
    opacity:0;
}

body.dark header a.link{
    color:#FFF;
}

.footer{
    text-align:center;
    margin:30px 0 20px 0;
}

.content{
    width:90%;
    margin: 160px auto 0 auto;
}

    /* Animation Logo */


    .logo_anim{
        position: fixed;
        z-index: -1;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
        width: max-content;
        height: 50%;
        text-align: center;
        text-decoration: none;
    }
    .i,.n,.niclass,.point{
        display: inline-block;
        vertical-align: middle;
    }
    .i{
        font-size: 3em;
        padding-left: 20px;
        padding-right: 20px;
        background: #FFF;
        color:#000;
    }
    .n{
        padding-left:20px;
        font-size: 3em;
        background: #000;
        color:#FFF;
    }
    .niclass{
        font-size: 3em;
        margin-left: 0px;
        animation-name: slide;
        animation-duration: 1s;
        animation-delay: .7s;
        animation-fill-mode: forwards;
    }

    @keyframes slide {
        0%     { opacity: 1; margin-left: -20px;}
        100%   { opacity: 0; margin-left: -1.9em;}
    }

    .point{
        font-size: 3em;
        opacity: 0;
        margin-left: -30px;
        animation-name: fadein;
        animation-duration: 1s;
        animation-delay: 1.3s;
        animation-fill-mode: forwards;
    }


    @keyframes fadein {
        0%     { opacity: 0; }
        100%   { opacity: 1; }
    }

    p.description{
        font-size: 2em;
    }

    p.slide{
        opacity: 0;
        margin-top: 10vh;
        animation-name: fadein;
        animation-duration: 1s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
    }



    /* Animation cover */

    .hh{
        width:100%;
        overflow:hidden;
        position:absolute;
        top: 40vh;
    }

    .movies{
        padding-top:20vh;
        background: #000;
        width:200%;
        margin-left:-50%;
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items:flex-start;
        animation-name: slideup;
        animation-duration: 1s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
        opacity:0;
    }

    .m_i_div{
        width: 12%;
    }

    img.m_i{
        width:100%;
        opacity: 1;
    }

    @keyframes slideup {
        0%     { opacity: 0; transform:translateY(70px);}
        100%   { opacity: 1; transform:translateY(0px);}
    }

    .above{
        text-align: left;
        position: absolute;
        z-index: 1;
        left:0;
        right: 0;
        margin:auto;
        width:80%;
        padding:50px 10% 90px 10%;
        margin-top: 90vh;
        background: #fafafa;
        color:#000;
    }

    .above_about{
        display:flex;
        flex-direction:column;
    }

    .above_about div:first-child{
        width:100%;
    }

    .above_about div:last-child{
        width:100%;
    }

    .above_about img{
        width:100%;
    }


    /* Above Gallery */

    .above_gallery{
        margin-top:40px;
    }

    .above_type{
        margin-top:40px;
    }

    a.type{
        color:#000;
        text-decoration:none;
        font-weight:bold;
        font-size:1.2em;
    }

    .gallery{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        overflow-x: scroll;
        padding:2em 0 10px 0;
    }

    .gallery a{
        flex: 0 0 auto;
    }

    a.movie{
        width:40%;
        vertical-align:top;
        padding:0;
        margin-bottom:10px;
        text-decoration:none;
        color:#000;
    }
    h2.title_g{
        margin:0;
        font-size:1em;
        padding-top:10px;
        padding-bottom:10px;
    }
    p.reali_g{
        color:#757575;
        margin:0;
        font-size:0.9em;
    }
    p.date_g{
        color:#9E9E9E;
        margin:0;
        font-size:0.9em;
    }



    /* Portfolio */

    #port{

    }

    h2.movie_d{
        margin:0;
        padding: 30px 0 5px 0;
        font-size:2em;
        font-weight:bold;
    }
    img.movie_d{
        width:100%;
        vertical-align:top;
    }
    div.movie_d{
        width:100%;
        margin-left:3%;
        text-align:left;
        display:inline-block;
    }

    .youtube{
        margin-top:20px;
    }

    iframe.youtube{
        width:90vw;
        height:50vw;
    }
    span.director,span.date,span.country{
        color:#9E9E9E;
    }
    span.director,span.date,span.country,span.decor{
        display:block;
    }
    span.decor{
        padding-top:10px;
        font-weight:bold;
    }



    #home{
        display:flex;
        flex-direction:column;
    }

    .filter{
        width:100%;
        text-align:left;
        padding-bottom:20px;
    }
    a.filterl{
        display:inline-block;
        font-size:1em;
        color:#000;
        margin: 0 10px 10px 0;
        text-decoration: none;
        transition: ease .2s;
    }
    a.filterl:hover{color:#BDBDBD;}
    a.sel{text-decoration:underline;}

    .grid{
        width: 100%;
        margin: -35px 0 0 0;
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .grid::after {
      content: "";
      width:33%;
    }

    a.element{
        position: relative;
        width:47%;
        text-decoration: none;
        color:#000;
        padding:25px 0 10px 0;
    }

    a.element img{
        width:100%;
    }

    .texta{
        margin: 10px 0 0 0;
        font-size: 1.1em;
        padding: 10px 0 10px 0;
        font-weight:bold;
    }

    .reala{
        color: #757575;
        margin: 0 0 5px 0;
        font-size: 0.9em;
    }

    .datea{
        color: #9E9E9E;
        margin: 0;
        font-size: 0.9em;
    }


 #contact{
        display: flex;
        flex-direction:column;
    }
    .contact_img{width:100%;}
    .contact_img img{width:100%;}
    .contact_text{width:100%;text-align:left;margin-top:5%}
    h1{margin-top: 0;}


     input.form-field{
      outline:none;
      border-radius: 0;
      background: #FFF;
      color: #000;
      -webkit-appearance: none;
      -webkit-rtl-ordering: logical;
      -webkit-user-select: text;
      cursor: auto;
      width:100%;
      box-sizing: border-box;
      height: 40px;
      margin: 10px 0px 10px 0px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid #000;
      font-family:liberationr, sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 14px;
      font-size: .875rem;
      }

    ::placeholder {
      color: rgba(0,0,0,0.8);
      opacity: 1;
    }

    .submit-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        - appearance: none;
        border: 1px solid #000;
        background: #000;
        color: #FFF;
        font-family: helvetica, serif;
        padding: 8px 18px;
        margin-top: 6px;
        font-size: 14px;
        transition: 0.1s ease;
    }

    .submit-button:hover {
        background: #FFF;
        color: #000;
    }

    textarea.form-field{
      outline:none;
      background: #FFF;
      color: #000;
      -webkit-appearance: none;
      -webkit-rtl-ordering: logical;
      -webkit-user-select: text;
      cursor: auto;
      width:100%;
      height:100px;
      max-height: 200px;
      margin: 10px 0px 10px 0px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid #000;
      font-weight: 300;
      font-style: normal;
      font-size: 14px;
      font-size: .875rem;
      }


    .g-recaptcha{
       margin: 15px auto !important;
        transform:scale(0.85);
          -webkit-transform:scale(0.85);
          transform-origin:0 0;
          -webkit-transform-origin:0 0;
    }

}