body,
        html {
            height: 100%;
            margin: 0;
        }

        /* ----------------------
The hover box above text
 ----------------------*/
        .container {
            position: relative;
            margin: 0px auto;
            width: 80%;
            height: 150px;
            ;
        }

        .left-bg,
        .right-bg {
            background-color: rgba(0, 0, 0, 0.8);
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            transition: .25s ease;
            color: #fff;
            font-size: 25px;
            font-family: "Raleway";
        }

        .left-bg {
            left: 0;
            padding: 23px;
        }

        .right-bg {
            background-position: right;
            right: 0;
            padding: 23px;
        }

        .right-bg:before {
            content: "OR";
            font-size: 15px;
            color: #000;
            font-weight: bold;
            position: absolute;
            background: white;
            text-align: center;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            top: 150px;
            left: 0;
            -webkit-transform: translate(-50%, -50%);
        }

        .right-bg:after {
            content: " ";
            height: 80px;
            width: 1px;
            background-color: white;
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            top: 20px;
        }

        .right-bg:after {
            right: 0;
        }

        .left-bg:hover {
            width: 60%;
        }

        .left-bg:hover+.right-bg {
            width: 40%;
        }

        .right-bg:hover {
            width: 60%;
        }

        .right-bg:hover+.left-bg {
            width: 40%;
        }

        /* ----------------------
End of Hover box above text
 ----------------------*/

        /* ----------------------
Fullscrren Background Summit IMG
  ----------------------*/
        .bg {

            background-image: url("https://s3-eu-west-1.amazonaws.com/tbp-public/img_404/Summit1.jpg");
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* ----------------------
Text boxes
 ----------------------*/

        .textbox {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 5px;
            color: #fff;
            height: 5em;
            left: 50%;
            text-align: center;
            padding: 15px;
            margin-left: -15em;
            margin-top: -9em;
            position: absolute;
            top: 50%;
            width: 30em;
        }

        .textbox2 {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 5px;
            color: #fff;
            height: 11em;
            left: 50%;
            padding: 10px;
            margin-left: -15em;
            margin-top: -9em;
            position: absolute;
            top: 70%;
            text-align: center;
            width: 30em;
        }

        .toptext {
            font-size: 80px;
            font-family: 'Times New Roman', Times, serif;
        }

        .btmtext {
            margin-top: 10px;
            font-size: 50px;
            font-family: 'Times New Roman', Times, serif;
        }

        /* ----------------------
End of Text boxes
 ----------------------*/

        /*Phones or smaller screens*/

        @media (min-width: 320px) and (max-width: 480px) {
            .toptext {
                font-size: 40px;
                font-family: 'Times New Roman', Times, serif;
            }

            .btmtext {
                font-size: 20px
            }

            .textbox {
                margin-left: -6em;
                width: 10em;
            }

            .textbox2 {
                margin-left: -5em;
                width: 9em
            }
        }

        .enders-container {
            display: flex;
            flex-direction: column;
            padding: 50px;
            justify-content: center;
            align-items: center;
        }

        .enders-container div {
            padding: 10px;
        }

        .enders-container img {
            max-width: 400px;
            width: 100%;
        }