/*big screen*/
@media only screen and (min-width: 2000px) {


    .logo {width: 9%;}

    
    }


@media only screen and (max-width: 1000px) {
    
    body {font-size: 17px; font-size: 2vw;}
    h2 {font-size: 2.1em;}
    .container { width: 94%; }

    .topnav {display: none;}
    .nav-cont li a:hover {text-decoration: none;}
    #ham { display: block; }
    .masked-video { width: 72%; margin-left: 25%;}
    .circle { top: 14.7em; bottom: auto; left: 81.9%; width: 14%;}
    .partners {height: 7.9em; margin-top: 2em;}
    .partners img { width: 80%; left: 10%;}
    
    .skills .skill-item { width: 50%; height: 29vw;}
    .skills p {font-size: 1em;} 
    .skill-item:nth-child(1) p, .skill-item:nth-child(4) p, .skill-item:nth-child(5) p, .skill-item:nth-child(8) p, .skill-item:nth-child(9) p, .skill-item:nth-child(12) p
    {font-style: italic; font-weight: normal;}
    .skill-item:nth-child(2) p, .skill-item:nth-child(3) p, .skill-item:nth-child(6) p, .skill-item:nth-child(7) p, .skill-item:nth-child(10) p, .skill-item:nth-child(11) p
    {font-weight: 700; font-style: normal;}

    .banner1 .container {padding: 9em 4%;}
    .banner1 p { width: 68%;}
    .banner1 .tags p {    font-size: 0.7em;}
    
    .t3 video {width: 37%; height: 24em;}
    
    .circle.circle2 {width: 25%; top: auto; bottom: -5.6em; right: 23%; left: auto;}
    .t4 h2 {width: 100%;}
    .showreel2 .masked-video { width: 90%; margin: 5%;}
    .t5 {padding: 6em 0 2em;}

    
}

@media only screen and (max-width: 500px) {
    .hide-on-mob {display: none;}
    body { font-size: 17px;  font-size: 4vw;}
    h1 {font-size: 3em;}
    h2 {font-size: 1.7em; margin-bottom: .8em;}
    h3 {font-size: 1.3em;}
    .container { width: 90%; margin: auto;}
    .col {width: 100%;}

    .menu .nav-cont li { margin: 0 auto .9em; font-size: 3.7em;}
    .intro { padding-top: 4em;}
    .masked-video { width: 93%; margin-left: 4%;}
    .circle1 {display: none;}

    .t1 {margin-top: 3em;}
    .t1 .container {display: block;}
    .t1 .title-section {width: 100%;}
    .t1 .description {width: 100%; margin-top: 0;}
    .partners {height: 3.9em;}
    .showreel .texts { font-size: 0.9em;}
    .t1 .title-section {padding-right: 0;}

    .skills {
    margin-top: 5em;}


   .banner1 { }
   .banner1 .container {width: 100%;         padding: 4em 4%;}
    .banner1 .tags {display: flex; flex-wrap: wrap;}
    .banner1 .tags p {font-size: 0.7em; margin-bottom: 0.7em;}
    .t3 video {width: 37%; height: 15em;}   
    .t3 .signature {top: 11em; right: 53%; width: 48%; }
    .circle.circle2 { bottom: auto; right: 16.9%; left: auto; top: 11em; width: 38%;}
    .work-tile img {width: 100%; height: 14em;}
    .work-tile__content {bottom: 0.7em; left: 0.8em; font-size: 0.8em;}
    .work-tile:nth-child(5n+3) img, .work-tile:nth-child(5n+4) img, .work-tile:nth-child(5n+5) img {height: 10em;}

    .btn-all-works1 {display: none;}
    .btn-all-works.btn-all-works2 { bottom: -2.8em; right: 22%; left: auto;}

    .glass2 {top: 38%;}
    @keyframes slideLR2 { 0%   { transform: translateX(0); } 50%  {transform: translateX(50vw);} 100% { transform: translateX(0); }}

        .t5 {padding: 6em 0 2em; }



.big-title, .big-title2 {font-size: 5em;}
    .news .container { display: block;}
    .news-item { width: 100%; margin-bottom: 3em;  border-top:none; padding: 0 5%;}
    .news-item:hover {border-top:none}
    .btn-all-works3 { bottom: -3.4em; top: auto; right: auto;  left: 5%;}


    .single .content {width: 100%;}

    .single iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }


}