/* CSS para remover a borda de foco */
        input:focus {
            outline: none;
        }

            
        /* FONT FAMILY */


        @font-face {
            font-family: 'Britanica';
            font-weight: 100;
            /* src: url("../fonts/font/GT-Walsheim-Pro-Medium.woff2") format('truetype'); */
            src: url("../fonts/final_font/Britanica_Bold.ttf") format('truetype');
          }
          
          @font-face {
            font-family: 'Britanica';
            font-weight: 200;
            /* src: url("../fonts/font/GT-Walsheim-Pro-Medium.woff2") format('truetype'); */
            src: url("../fonts/final_font/Britanica_Bold.ttf") format('truetype');
          }
          
          @font-face {
            font-family: 'Britanica';
            font-weight: 300;
            /* src: url("../fonts/font/GT-Walsheim-Pro-Medium.woff2") format('truetype'); */
            src: url("../fonts/final_font/Britanica_Bold.ttf") format('truetype');
          }
          
          @font-face {
            font-family: 'Britanica';
            font-weight: 400;
            /* src: url("../fonts/font/GT-Walsheim-Pro-Medium.woff2") format('truetype'); */
            src: url("../fonts/final_font/Britanica_Bold.ttf") format('truetype');
          }
          
          @font-face {
            font-family: 'Britanica';
            font-weight: 500;
            /* src: url("../fonts/font/GT-Walsheim-Pro-Medium.woff2") format('truetype'); */
            src: url("../fonts/final_font/Britanica_Bold.ttf") format('truetype');
          }
          
          @font-face {
            font-family: 'Britanica';
            font-weight: 600;
            /* src: url("../fonts/font/GT-Walsheim-Pro-Medium.woff2") format('truetype'); */
            src: url("../fonts/final_font/Britanica_Bold.ttf") format('truetype');
          }
          
          
          @font-face {
            font-family: 'Britanica';
            font-weight: 700;
            /* src: url("../fonts/font/GT-Walsheim-Pro-Bold.woff2") format('truetype'); */
            src: url("../fonts/final_font/Britanica_Extra_Bold.ttf") format('truetype');
          }
          
          @font-face {
            font-family: 'Britanica';
            font-weight: 800;
            /* src: url("../fonts/font/GT-Walsheim-Pro-Black.woff2") format('truetype'); */
            src: url("../fonts/final_font/Britanica_Black.ttf") format('truetype');
          }
          
          /* END FONT FAMILY */
            * {
                box-sizing: border-box;
            }

            body {
                background: #f6f5f7;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                font-family: 'Britanica', sans-serif;
                height: 100vh;
                margin: -20px 0 50px;
            }

            h1 {
                font-weight: bold;
                margin: 0;
            }

            h2 {
                text-align: center;
            }

            p {
                font-size: 14px;
                font-weight: 100;
                line-height: 20px;
                letter-spacing: 0.5px;
                margin: 20px 0 30px;
            }

            span {
                font-size: 12px;
            }

            a {
                color: #333;
                font-size: 14px;
                text-decoration: none;
                margin: 15px 0;
            }

            button {
                border-radius: 20px;
                border: 1px solid #002d48;
                background-color: #002d48;
                color: #FFFFFF;
                font-size: 12px;
                font-weight: bold;
                padding: 12px 45px;
                letter-spacing: 1px;
                text-transform: uppercase;
                transition: transform 80ms ease-in;
            }

            button:active {
                transform: scale(0.95);
            }

            button:focus {
                outline: none;
            }

            button.ghost {
                background-color: transparent;
                border-color: #FFFFFF;
            }

            form {
                background-color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 0 50px;
                height: 100%;
                text-align: center;
            }

            input {
                background-color: #eee;
                border: none;
                padding: 12px 15px;
                margin: 8px 0;
                width: 100%;
            }

            .container {
                background-color: #fff;
                border-radius: 10px;
                box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
                    0 10px 10px rgba(0, 0, 0, 0.22);
                position: relative;
                overflow: hidden;
                width: 768px;
                max-width: 100%;
                min-height: 480px;
            }

            .form-container {
                position: absolute;
                top: 0;
                height: 100%;
                transition: all 0.6s ease-in-out;
            }

            .sign-in-container {
                left: 0;
                width: 50%;
                z-index: 2;
            }

            .container.right-panel-active .sign-in-container {
                transform: translateX(100%);
            }

            .sign-up-container {
                left: 0;
                width: 50%;
                opacity: 0;
                z-index: 1;
            }

            .container.right-panel-active .sign-up-container {
                transform: translateX(100%);
                opacity: 1;
                z-index: 5;
                animation: show 0.6s;
            }

            @keyframes show {

                0%,
                49.99% {
                    opacity: 0;
                    z-index: 1;
                }

                50%,
                100% {
                    opacity: 1;
                    z-index: 5;
                }
            }

            .overlay-container {
                position: absolute;
                top: 0;
                left: 50%;
                width: 50%;
                height: 100%;
                overflow: hidden;
                transition: transform 0.6s ease-in-out;
                z-index: 100;
            }

            .container.right-panel-active .overlay-container {
                transform: translateX(-100%);
            }

            .overlay {
                background: #002d48;
                background: -webkit-linear-gradient(to right, #002d48, #002d48);
                background: linear-gradient(to right, #002d48, #002d48);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 0 0;
                color: #FFFFFF;
                position: relative;
                left: -100%;
                height: 100%;
                width: 200%;
                transform: translateX(0);
                transition: transform 0.6s ease-in-out;
            }

            .container.right-panel-active .overlay {
                transform: translateX(50%);
            }

            .overlay-panel {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 0 40px;
                text-align: center;
                top: 0;
                height: 100%;
                width: 50%;
                transform: translateX(0);
                transition: transform 0.6s ease-in-out;
            }

            .overlay-left {
                transform: translateX(-20%);
            }

            .container.right-panel-active .overlay-left {
                transform: translateX(0);
            }

            .overlay-right {
                right: 0;
                transform: translateX(0);
            }

            .container.right-panel-active .overlay-right {
                transform: translateX(20%);
            }

            .social-container {
                margin: 20px 0;
            }

            .social-container a {
                border: 1px solid #DDDDDD;
                border-radius: 50%;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                margin: 0 5px;
                height: 40px;
                width: 40px;
            }

            footer {
                background-color: #222;
                color: #fff;
                font-size: 14px;
                bottom: 0;
                position: fixed;
                left: 0;
                right: 0;
                text-align: center;
                z-index: 999;
            }

            footer p {
                margin: 10px 0;
            }

            footer i {
                color: #f38b3b;
            }

            footer a {
                color: #3c97bf;
                text-decoration: none;
            }

            @media (max-width:600px){
                .desktop01-register{
                    display: none;
                }
                #signup-mobile{
                    display: block;
                }
            }
            @media (min-width:600px){
                .desktop01-register{
                    display: block;
                }
                #signup-mobile{
                    display: none;
            }
            }