.phone_size {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;

    display: none;
}

.phone_size_box {
    width: 180px;
    height: 280px;
    background-image: url(/img/phone_frame.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 4s ease;
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    position: relative;
    margin-top: 30%;
    animation: flipPhone 6s ease-in-out infinite;
    -webkit-animation: flipPhone 6s ease-in-out infinite;
    -moz-animation: flipPhone 6s ease-in-out infinite;
}

.phone_size_face {
    width: 80px;
    height: 80px;
    background-image: url(/img/bad_phone.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 4s ease;
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    animation: phoneFace 6s ease-in-out infinite;
    -webkit-animation: phoneFace 6s ease-in-out infinite;
    -moz-animation: phoneFace 6s ease-in-out infinite;
}

@keyframes phoneFace {
    0% {
        opacity: 1;
        background-image: url(/img/bad_phone.png);
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    15% {
        opacity: 1;
        background-image: url(/img/bad_phone.png);
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    20% {
        opacity: 0;
        background-image: url(/img/bad_phone.png);
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    45% {
        opacity: 0;
        background-image: url(/img/happy_phone.png);
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
    }
    50% {
        opacity: 1;
        background-image: url(/img/happy_phone.png);
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
    }
    75% {
        opacity: 1;
        background-image: url(/img/happy_phone.png);
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
    }
    80%{
        opacity: 0;
        background-image: url(/img/happy_phone.png);
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
    }
    95% {
        opacity: 0;
        background-image: url(/img/bad_phone.png);
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        background-image: url(/img/bad_phone.png);
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
}

@keyframes flipPhone {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    20% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    50% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
    }
    80%{
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
}

@media (max-width: 567px) { 

    .phone_size {
        display: block;
    }

    body main {
        display: none;
        visibility: hidden;
        -webkit-visibility: hidden;
        -moz-visibility: hidden;
    }

    body nav {
        display: none;
        visibility: hidden;
        -webkit-visibility: hidden;
        -moz-visibility: hidden;
    }

 }

 @media (min-width: 567.1px) and (max-width: 750px){

    body main {
        overflow-x: hidden;
    }

    #eye_section {
        display: none;
        visibility: hidden;
        -webkit-visibility: hidden;
        -moz-visibility: hidden;
    }

    .phoneSize {
        transform: scale(0.5);
    }

    .phoneSize2 {
        transform: scale(0.8);
    }

    .logo_flex_outer {
        margin: 0;
        margin-left: 6em;
    }

    .face_flex {
        margin-right: 35em;
    }



    .phoneTitle {
        margin-top: 100px;
    }

    .about_innerflex {
        flex-direction: column;
    }

    .text_box {
        margin-bottom: 5em;
    }

    .logo_fixed{
        position: fixed;
        top: 1%;
        transform: scale(0.19);
        -webkit-transform: scale(0.19);
        -moz-transform: scale(0.19);
        z-index: 100;
        margin-left: 0em;
        height: 10vh;
      }

      .draw_line {
        display: none;
        visibility: hidden;
        -webkit-visibility: hidden;
        -moz-visibility: hidden;
      }

 }


 @media (min-width: 750.1px) and (max-width: 899px){

    body main {
        overflow-x: hidden;
    }

    .phoneSize {
        transform: scale(0.7);
    }

    .phoneSize2 {
        transform: scale(0.9);
    }

    .logo_flex_outer {
        margin: 0;
        margin-left: 6em;
    }

    .face_flex {
        margin-right: 38em;
    }

    .logo_fixed{
        position: fixed;
        top: 1%;
        transform: scale(0.19);
        -webkit-transform: scale(0.19);
        -moz-transform: scale(0.19);
        z-index: 100;
        margin-left: 0em;
        height: 10vh;
      }

      #eye_section {
        opacity: 0.3;
      }

    .phoneTitle {
        margin-top: 100px;
    }

    .about_innerflex {
        flex-direction: column;
    }

    .text_box {
        margin-bottom: 5em;
    }

    .screenA {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .line_svg {
        transform: scale(1.6);
        -webkit-transform: scale(1.6);
        -moz-transform: scale(1.6);
    }

  }

  @media (min-width: 899.1px) and (max-width: 1000px) {
    body main {
        overflow-x: hidden;
    }

    .phoneSize {
        transform: scale(0.7);
    }

    .phoneSize2 {
        transform: scale(0.9);
    }

    .logo_flex_outer {
        margin: 0;
        margin-left: 6em;
    }

    .face_flex {
        margin-right: 38em;
    }

    .logo_fixed{
        position: fixed;
        top: 1%;
        transform: scale(0.19);
        -webkit-transform: scale(0.19);
        -moz-transform: scale(0.19);
        z-index: 100;
        margin-left: 0em;
        height: 10vh;
      }


    .phoneTitle {
        margin-top: 100px;
    }

    .about_innerflex {
        flex-direction: column;
    }

    .text_box {
        margin-bottom: 5em;
    }

    .screenA {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .line_svg {
        transform: scale(1.6);
        -webkit-transform: scale(1.6);
        -moz-transform: scale(1.6);
    }
  }