@import "pong.css";

* {
    box-sizing: border-box;
}
@font-face {
    font-family: 'Neuzeit_S_LT_Book';
    src: url('fonts/Neuzeit_S_LT_Book.eot');
    src: url('fonts/Neuzeit_S_LT_Book.eot?#iefix') format('embedded-opentype'),
        url('fonts/Neuzeit_S_LT_Book.woff2') format('woff2'),
        url('fonts/NeuzeitSLT-Book.woff') format('woff'),
        url('fonts/Neuzeit_S_LT_Book.ttf') format('truetype'),
        url('fonts/NeuzeitSLT-Book.svg#HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neuzeit_S_LT_BookHeavy';
    src: url('fonts/Neuzeit_S_LT_BookHeavy.eot');
    src: url('fonts/Neuzeit_S_LT_BookHeavy.eot?#iefix') format('embedded-opentype'),
        url('fonts/Neuzeit_S_LT_BookHeavy.woff2') format('woff2'),
        url('fonts/NeuzeitSLT-BookHeavy.woff') format('woff'),
        url('fonts/Neuzeit_S_LT_BookHeavy.ttf') format('truetype'),
        url('fonts/NeuzeitSLT-BookHeavy.svg#HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Neuzeit_S_LT_Book';
    font-size: 16px;
    position: relative;
    padding: 15px;
    margin: 0;
}

header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px 0;
    width: calc(100vw - 30px);
    margin: 0 auto;
    z-index: 100;
    max-width: 1280px;
}

h1, h2, h3, h4 {
    font-family: 'Neuzeit_S_LT_BookHeavy';
}
h1 {
    font-size: 150px;
    margin-top: .5em;
	margin-bottom: .2em;
}

h2 {
    /* font-size: 66px; */
    font-size: 150px;
    margin-bottom: .1em;
    margin-top: 0;
    
}
h3 {
    font-size: 35px;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.2;
}
h4 {
    font-size: 40px;
    margin-bottom: 3em;
    margin-top: 0;
    line-height: 1;
}

a, a:visited {
    text-decoration: none;
    color: black;
}



p {
    font-family: 'Neuzeit_S_LT_BookHeavy';
    font-size: 38px;
}
.portfolio h2 {
    font-size: 180px;
    line-height: .8;
}
.last-works h3 {
    font-size: 47px;
}


.portfolio a:hover{
	
	
	display: inline-block;
    background-color: black;
    color: black;
	
}





@media (max-width: 1279px) {
    .portfolio h2 {
        font-size: 140px;
        line-height: .8;
    }    
}

section.content {
    width: calc(100vw - 30px);
    margin: 0 auto;
    max-width: 1280px;
}

section.content p.fbi-text {
    font-family: 'Neuzeit_S_LT_BookHeavy';
    font-size: 36px;
    margin-top:0;
}
section.content p.fbi-text span {
    display: inline-block;
    background-color: black;
    color: black;
    line-height: 1;
}

#logo img {
    width: 128px;
    height: 140px;
}

#menu ul {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
}   
#menu ul li {
    padding: 0 8px;
}
#menu ul li:first-child {
    padding-left: 0;
}

#menu ul li:last-child {
    padding-right: 0;
}

#menu ul li a {
    font-family: 'Neuzeit_S_LT_Book';
    text-decoration: none;
    color: black;
    z-index: 200;
}

#menu ul li a:hover {
    color: #8d8d8d;
}

#menu ul li a:focus {
    color: #8d8d8d;
    outline: none;
}

#menu .current-page {
    color: #bababa;
}

.placeholder {
    width: 100%;
    padding-top: 56.25%;
    background-color: transparent;
    position: relative;
}
.placeholder img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
}

p.phones > span {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 33%;
}

.glitch:hover {
    animation: glitch 0.2s infinite;
}
  
@keyframes glitch {
    0% {
      text-shadow: 8px 0px 0px #00ff80;
      left: -5px;
    }
    1% {
      text-shadow: 10px 0px 0px #00aaff;
      left: -2px;
    }
    2% {
      text-shadow: -10px 0px 0px #00aaff;
      left: -1px;
    }
    3% {
      text-shadow: -10px 0px 0px #00aaff;
      left: 4px;
    }
    4% {
      text-shadow: -10px 0px 0px #00aaff;
      left: -4px;
    }
    5% {
      text-shadow: -15px 0px 0px #00ff80;
      left: 4px;
    }
    6% {
      text-shadow: -14px 0px 0px #ffee00;
      left: 6px;
    }
    7% {
      text-shadow: 10px 0px 0px #00aaff;
      left: 2px;
    }
    8% {
      text-shadow: 30px 0px 0px #c0147c;
      left: 5px;
    }
    9% {
      text-shadow: 3px 0px 0px #00ff80;
      left: 4px;
    }
    10% {
      text-shadow: -31px 0px 0px #c0147c;
      left: 4px;
    }
    11% {
      text-shadow: 19px 0px 0px #ffee00;
      left: -3px;
    }
    12% {
      text-shadow: -16px 0px 0px #c0147c;
      left: -3px;
    }
    13% {
      text-shadow: 17px 0px 0px #ffee00;
      left: -1px;
    }
    14% {
      text-shadow: -28px 0px 0px #00aaff;
      left: 1px;
    }
    15% {
      text-shadow: 31px 0px 0px #c0147c;
      left: 3px;
    }
    16% {
      text-shadow: -33px 0px 0px #00aaff;
      left: 5px;
    }
    17% {
      text-shadow: -20px 0px 0px #00aaff;
      left: 3px;
    }
    18% {
      text-shadow: -25px 0px 0px #ffee00;
      left: 6px;
    }
    19% {
      text-shadow: 2px 0px 0px #00aaff;
      left: 3px;
    }
    20% {
      text-shadow: 18px 0px 0px #ffee00;
      left: -2px;
    }
    21% {
      text-shadow: 13px 0px 0px #ffee00;
      left: 0px;
    }
    22% {
      text-shadow: 3px 0px 0px #00ff80;
      left: -4px;
    }
    23% {
      text-shadow: -12px 0px 0px #00ff80;
      left: 6px;
    }
    24% {
      text-shadow: 31px 0px 0px #c0147c;
      left: 1px;
    }
    25% {
      text-shadow: 3px 0px 0px #c0147c;
      left: -2px;
    }
    26% {
      text-shadow: -2px 0px 0px #c0147c;
      left: 3px;
    }
    27% {
      text-shadow: 27px 0px 0px #00aaff;
      left: 4px;
    }
    28% {
      text-shadow: 24px 0px 0px #c0147c;
      left: 0px;
    }
    29% {
      text-shadow: -8px 0px 0px #00ff80;
      left: 2px;
    }
    30% {
      text-shadow: 21px 0px 0px #ffee00;
      left: -5px;
    }
    31% {
      text-shadow: 8px 0px 0px #00ff80;
      left: 3px;
    }
    32% {
      text-shadow: 5px 0px 0px #ffee00;
      left: 1px;
    }
    33% {
      text-shadow: 12px 0px 0px #ffee00;
      left: -1px;
    }
    34% {
      text-shadow: -21px 0px 0px #ffee00;
      left: -5px;
    }
    35% {
      text-shadow: -33px 0px 0px #c0147c;
      left: 3px;
    }
    36% {
      text-shadow: -7px 0px 0px #00ff80;
      left: -5px;
    }
    37% {
      text-shadow: 22px 0px 0px #ffee00;
      left: 5px;
    }
    38% {
      text-shadow: -19px 0px 0px #c0147c;
      left: 0px;
    }
    39% {
      text-shadow: 11px 0px 0px #00aaff;
      left: 1px;
    }
    40% {
      text-shadow: 14px 0px 0px #00aaff;
      left: -1px;
    }
    41% {
      text-shadow: -6px 0px 0px #c0147c;
      left: -2px;
    }
    42% {
      text-shadow: 32px 0px 0px #c0147c;
      left: -3px;
    }
    43% {
      text-shadow: 1px 0px 0px #00aaff;
      left: 3px;
    }
    44% {
      text-shadow: -3px 0px 0px #00aaff;
      left: 4px;
    }
    45% {
      text-shadow: 1px 0px 0px #c0147c;
      left: 1px;
    }
    46% {
      text-shadow: 34px 0px 0px #ffee00;
      left: 6px;
    }
    47% {
      text-shadow: 23px 0px 0px #c0147c;
      left: 5px;
    }
    48% {
      text-shadow: 4px 0px 0px #c0147c;
      left: 6px;
    }
    49% {
      text-shadow: -8px 0px 0px #00ff80;
      left: 5px;
    }
    50% {
      text-shadow: 31px 0px 0px #ffee00;
      left: 4px;
    }
    51% {
      text-shadow: 25px 0px 0px #00ff80;
      left: -5px;
    }
    52% {
      text-shadow: 20px 0px 0px #c0147c;
      left: 6px;
    }
    53% {
      text-shadow: -27px 0px 0px #00ff80;
      left: -1px;
    }
    54% {
      text-shadow: -30px 0px 0px #ffee00;
      left: 0px;
    }
    55% {
      text-shadow: -16px 0px 0px #c0147c;
      left: -4px;
    }
    56% {
      text-shadow: 7px 0px 0px #00ff80;
      left: 5px;
    }
    57% {
      text-shadow: -25px 0px 0px #c0147c;
      left: 2px;
    }
    58% {
      text-shadow: 29px 0px 0px #00aaff;
      left: 6px;
    }
    59% {
      text-shadow: 22px 0px 0px #ffee00;
      left: 2px;
    }
    60% {
      text-shadow: -17px 0px 0px #00aaff;
      left: -1px;
    }
    61% {
      text-shadow: -12px 0px 0px #ffee00;
      left: -4px;
    }
    62% {
      text-shadow: -14px 0px 0px #ffee00;
      left: 5px;
    }
    63% {
      text-shadow: -31px 0px 0px #00ff80;
      left: -4px;
    }
    64% {
      text-shadow: 13px 0px 0px #ffee00;
      left: 2px;
    }
    65% {
      text-shadow: -8px 0px 0px #00ff80;
      left: -4px;
    }
    66% {
      text-shadow: 12px 0px 0px #ffee00;
      left: 4px;
    }
    67% {
      text-shadow: -12px 0px 0px #00ff80;
      left: 3px;
    }
    68% {
      text-shadow: 2px 0px 0px #00aaff;
      left: 5px;
    }
    69% {
      text-shadow: -1px 0px 0px #00ff80;
      left: -5px;
    }
    70% {
      text-shadow: -32px 0px 0px #ffee00;
      left: 0px;
    }
    71% {
      text-shadow: 25px 0px 0px #00ff80;
      left: -5px;
    }
    72% {
      text-shadow: -9px 0px 0px #ffee00;
      left: 5px;
    }
    73% {
      text-shadow: 24px 0px 0px #c0147c;
      left: -3px;
    }
    74% {
      text-shadow: -1px 0px 0px #ffee00;
      left: -2px;
    }
    75% {
      text-shadow: -23px 0px 0px #ffee00;
      left: -1px;
    }
    76% {
      text-shadow: 30px 0px 0px #00aaff;
      left: -4px;
    }
    77% {
      text-shadow: 4px 0px 0px #00aaff;
      left: -4px;
    }
    78% {
      text-shadow: -7px 0px 0px #ffee00;
      left: -4px;
    }
    79% {
      text-shadow: 26px 0px 0px #00aaff;
      left: 6px;
    }
    80% {
      text-shadow: 26px 0px 0px #00ff80;
      left: 5px;
    }
    81% {
      text-shadow: -7px 0px 0px #00ff80;
      left: 0px;
    }
    82% {
      text-shadow: -22px 0px 0px #ffee00;
      left: 3px;
    }
    83% {
      text-shadow: 17px 0px 0px #00ff80;
      left: -1px;
    }
    84% {
      text-shadow: -18px 0px 0px #00ff80;
      left: -3px;
    }
    85% {
      text-shadow: -18px 0px 0px #00aaff;
      left: -4px;
    }
    86% {
      text-shadow: -9px 0px 0px #c0147c;
      left: 1px;
    }
    87% {
      text-shadow: 1px 0px 0px #c0147c;
      left: 4px;
    }
    88% {
      text-shadow: 22px 0px 0px #00aaff;
      left: 5px;
    }
    89% {
      text-shadow: 22px 0px 0px #00aaff;
      left: 0px;
    }
    90% {
      text-shadow: -17px 0px 0px #00ff80;
      left: 3px;
    }
    91% {
      text-shadow: 21px 0px 0px #c0147c;
      left: 1px;
    }
    92% {
      text-shadow: 29px 0px 0px #00ff80;
      left: 2px;
    }
    93% {
      text-shadow: -16px 0px 0px #00ff80;
      left: -4px;
    }
    94% {
      text-shadow: 35px 0px 0px #00ff80;
      left: 0px;
    }
    95% {
      text-shadow: -7px 0px 0px #00aaff;
      left: -3px;
    }
    96% {
      text-shadow: -9px 0px 0px #ffee00;
      left: -4px;
    }
    97% {
      text-shadow: 14px 0px 0px #c0147c;
      left: 6px;
    }
    98% {
      text-shadow: -12px 0px 0px #00ff80;
      left: 0px;
    }
    99% {
      text-shadow: -17px 0px 0px #00ff80;
      left: -5px;
    }
    100% {
      text-shadow: 12px 0px 0px #c0147c;
      left: -1px;
    }
  }


@media (max-width: 1279px) {
p.phones > span {
width: 66%;
	font-size: 30px;
 }
}
@media (max-width: 1279px) {
#menu ul li a {
font-size: 30px;
 }
}