/* Smartphones ----------- */ @media only screen and (max-width: 1200px) { #alert-mobile { display: block !important; } #main-container { display: none; } } body { background: #F5F5F5; background-repeat: no-repeat; background-size: cover; background-position: center center; background-fill-mode: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: white; padding: 20px 25px; border: 2px solid #22244E; width: 550px; height: auto; box-sizing: border-box; position: relative; } .container { animation: showUp 0.5s cubic-bezier(0.18, 1.3, 1, 1) forwards; } .col.s6>.btn { width: 100%; } .gender-male, .gender-female { display: inline-block; } .gender-female { margin-left: 35px; } radio:required { border-color: red; } @keyframes showUp { 0% { transform: scale(0); } 100% { transoform: scale(1); } } .row { margin-bottom: 10px; } #customGoogleBtn { background: white; color: #444; border-radius: 5px; border: thin solid #888; box-shadow: 1px 1px 1px grey; white-space: nowrap; } #customGoogleBtn:hover { cursor: pointer; } span.label { font-family: serif; font-weight: normal; } span.icon { background: url('/media/img/g-normal.png') transparent 5px 50% no-repeat; display: inline-block; vertical-align: middle; width: 42px; height: 42px; } span.buttonText { display: inline-block; vertical-align: middle; font-size: 14px; font-weight: bold; /* Use the Roboto font that is loaded in the */ font-family: 'Roboto', sans-serif; }