@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

@font-face {
    font-family: 'Banana';
    src: url('../fonts/banana_grotesk_0215-thin-webfont.woff2') format('woff2'),
         url('../fonts/banana_grotesk_0215-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#video-container-1 {
	width: 100%;
	height: auto;
	margin: auto;
}

/*Controls ask container*/
.ask-container, .end-container {
	border-top: 1px solid white;
	justify-content: space-evenly;
	color: white;
	height: 100px;
	background-color: #353995;
	align-items: center;
	display: none;
}

.one-option-container {
	border-top: 1px solid white;
	height: 70px;
	width: 100%;
	background-color: #353995;
	display: flex;
	align-items: center;
	justify-content: center;
}

.persons-container {
	border-top: 1px solid white;
	height: 70px;
	width: 100%;
	background-color: #353995;
	display: none;
	align-items: center;
}

.option-separation {
	border: 1px solid white;
	height: 100%;
}

#ask-op1, #ask-op2,
#end-op1, #end-op2, #end-op3,
#simple-option-video,
.persons-container div[id$="person"] {
	font-family: 'Banana', 'Open Sans', sans-serif;
	text-align: center;
	padding: 5px 5px;	
	font-size: 2rem;
	color: #fff;
	font-weight: 500;
}

.persons-container div[id$="person"] {
	padding: 0;
	width: 100%;
}

#ask-op1:hover, #ask-op2:hover,
#end-op1:hover, #end-op2:hover, #end-op3:hover,
#simple-option-video:hover,
.persons-container div[id$="person"]:hover {
	cursor: pointer;
	font-size: 2.2rem;
}

@media (max-width: 767px) {
	.one-option-container, .persons-container, .ask-container, .end-container {
    	height: 40px;
	}

	#ask-op1, #ask-op2, #end-op1, #end-op2, #end-op3, #simple-option-video, .persons-container div[id$="person"] {
		font-size: 15px;
	}
	#ask-op1:hover, #ask-op2:hover, #end-op1:hover, #end-op2:hover, #end-op3:hover, #simple-option-video:hover, .persons-container div[id$="person"]:hover {
		font-size: 16px;
	}
}


@media (max-width: 991px) and (min-width: 768px) {
	.one-option-container, .persons-container, .ask-container, .end-container {
    	height: 50px;
	}

	#ask-op1, #ask-op2, #end-op1, #end-op2, #end-op3, #simple-option-video, .persons-container div[id$="person"] {
		font-size: 17px;
	}
	#ask-op1:hover, #ask-op2:hover, #end-op1:hover, #end-op2:hover, #end-op3:hover, #simple-option-video:hover, .persons-container div[id$="person"]:hover {
		font-size: 18px;
	}
}

@media (max-width: 1199px) and (min-width: 992px) {

}

@media (min-width: 1200px) {
	
}