/*mobileview css start*/
/*       body {
  display: flex;
  justify-content: center;
  padding: 5%;
  background: #23272f;
}*/

.stars {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: url("http://www.script-tutorials.com/demos/360/images/stars.png") repeat top center;
}

/* @media screen and (max-width: 964px) {
              .galaxy-s8,.galaxy-s8 .bazzel {
                width: 320px !important;
            }
        }
  @media screen and (max-width: 964px) {
              .galaxy-s8 .screen{
                width: 300px !important;
            }
        }*/


.galaxy-s8 {
    z-index: 1;
    position: relative;
    height: 686px;
    width: 318px;
}

    .galaxy-s8 *, .galaxy-s8 *::before, .galaxy-s8 *::after {
        box-sizing: border-box;
        border-radius: 7%;
       
       display: block;
    }

    .galaxy-s8 .bazzel {
        height: 544px;
        width: 318px;
        background: #222;
        border: solid #a3c5e8;
        border-radius: 46px;
        border-width: 4px 0;
        box-shadow: inset 0 0 0 2px #5192d4;
        padding: 35px 4px;
    }

    .galaxy-s8 .screen {
        margin-top: -30px;
        height: 491px;
        width: 306px;
        position: relative;
        background: url("#") no-repeat;
        background-position: center center;
        background-size: cover;
        border-radius: 28px;
        border: 2px solid #222;
    }

    .galaxy-s8 .edge {
        /* height: 674px;*/
        /*width: 292px;*/
        position: relative;
        background: transparent;
        /* margin-left: 8px;*/
        margin-top: -648px;
        border-radius: 28px;
        /*box-shadow: 12px 0 15px -4px rgba(255, 255, 255, 0.5), -12px 0 8px -4px rgba(255, 255, 255, 0.5);*/
    }

    .galaxy-s8 .line::after, .galaxy-s8 .line::before {
        content: "";
        position: absolute;
        height: 686px;
        width: 5px;
        top: 0;
        z-index: 9;
        border: solid #ccdff2;
        border-width: 4px 0;
    }

    .galaxy-s8 .line::after {
        left: 40px;
    }

    .galaxy-s8 .line::before {
        right: 40px;
    }

    .galaxy-s8 .header {
        height: 40px;
        width: 190px;
        position: absolute;
        left: 50%;
        top: 6px;
        z-index: 199;
        margin-left: -95px;
    }

        .galaxy-s8 .header::after {
            content: "";
            position: absolute;
            height: 4px;
            width: 40px;
            left: 50%;
            top: 50%;
            margin-left: -20px;
            margin-top: -2px;
            border-radius: 2.5px;
            background: #666;
        }

    .galaxy-s8 .sensors::after, .galaxy-s8 .sensors::before {
        content: "";
        position: absolute;
        top: 50%;
        background: #666;
        border-radius: 50%;
    }

    .galaxy-s8 .sensors::after {
        height: 6px;
        width: 6px;
        right: 0;
        margin-top: -3px;
    }

    .galaxy-s8 .sensors::before {
        height: 10px;
        width: 10px;
        left: 0;
        margin-top: -5px;
        box-shadow: 155px 0 #666;
    }

    .galaxy-s8 .volume-button {
        height: 98px;
        width: 3px;
        position: absolute;
        top: 120px;
        left: -2px;
        border-radius: 2px 0 0 2px;
        background: #5192d4;
    }

        .galaxy-s8 .volume-button::after {
            content: "";
            position: absolute;
            height: 45px;
            width: 3px;
            left: 0;
            top: 138px;
            border-radius: 2px 0 0 2px;
            background: #5192d4;
        }

    .galaxy-s8 .power-button {
        height: 46px;
        width: 3px;
        position: absolute;
        top: 218px;
        right: -2px;
        border-radius: 0 2px 2px 0;
        background: #5192d4;
    }


/*mobileview css End*/