@charset "utf-8";

.footer-container {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.a-action {
    color: #fff;
    text-decoration: none;
}

.button-container {
    font-size: 14px;
    background: #9147ff;;
    border-radius: 5px;
    border: 1px solid #9147ff;
}

.button-container:hover {
    border: 1px solid #772ce8;
    background: #772ce8;
}

.button-container-pad {
    padding: 10px;
}

.default-margin-top {
    margin-top: 10px;
}

#load_test {
    color: #333;
    cursor: pointer;
}

#load_test:hover {
    text-decoration: underline;
}

.main-logo {
    max-width: 700px;
    width: 100%;
}

#join-session-code-form #join-session-code-input {
    letter-spacing: 1px;
    font-size: 34px;
    font-family: Inconsolata-VariableFont;
    text-align: center;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
}

#join-session-code-form .bi {
    font-size: 34px;
}

.guess-together-episode-thumbnail-frame {
    max-width: 400px;
    position: relative;
}

.thumbnail-image-frame {
    position: relative;
}

.thumbnail-language-frame {
    position: absolute;
    z-index: 20;
    height: 27px;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    right: 0px;
    padding: 0px 10px;
    bottom: -24px;
}

.thumbnail-language-flag {
    height: 17px;
    border-radius: 4px;
}

.guess-together-episode-thumbnail-frame .live-info-banner {
    position: absolute;
    bottom: -24px;
    background-color: #fff;
    border: 4px solid #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 26px;
}

.guess-together-episode-thumbnail-image {
    width: 100%;
    border-radius: 20px 20px 0 0;
    border: 4px solid #fff;
}

.guess-together-episode-thumbnail-frame .total_number_of_question {
    position: absolute;
    width: 110px;
    text-align: center;
    left: 0;
    margin: 0 auto;
    font-size: 19px;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #554949 !important;
    font-weight: bold !important;
    bottom: -24px;
    height: 24px;
}

.guess-together-episode-thumbnail-frame .thumbnail-time-to-play-frame {
    position: absolute;
    width: 90px;
    text-align: center;
    left: 118px;
    margin: 0 auto;
    font-size: 18px;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #554949 !important;
    font-weight: bold !important;
    bottom: -24px;
    height: 26px;
}

.session_selection {
    cursor: pointer;
}

@media screen and ( min-width: 800px ) { /* desktop */
    .background-video-element {
       display: block;
    }

    .background-video-image {
    	display: none;
    }

    .background-video-overlay {
		height: 100%;
		width: 100%;
		position: absolute;
		background: rgba( 1, 1, 1, 0.8 );
	}

    .content {
		margin: 100vh 0 0 0;
		width: 100%;
	}

    .button-container {
        display: inline-block;
    }

    .logged-in-text {
        font-size: 20px;
    }
}

@media screen and ( max-width: 800px ) { /* mobile */
    .background-video-container {
        position: relative;
    }

    .background-video-element {
        display: none;
    }

    .background-video-image {
    	display: block;
    	width: 100%;
    }

    .background-video-overlay {
    	display: none;
    }

    .background-video-text-overlay {
		font-size: 30px;
	}

    .content-inner {
        margin-top: 0px;
    }

    .logged-in-text {
        font-size: 20px;
        margin-top: 20px;
    }
}