/* Add here all your CSS customizations */

.leftall {
    text-align: left!important;
}

.header-nav {
	border-bottom: 2px solid rgb(240,240,240)!important; 
}

#0088CC 
#0088cc !important

@media (max-width: 767px) {
.leftmob {
    text-align: left!important;
}
}

@media (max-width: 767px) {
.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

}

 

@media (max-width: 767px) {
.sound-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.sound-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.sound-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:150;
}

}



header {
	text-align: center;
}


/* text-controls */

button {
	vertical-align: bottom;
	margin: 0 0.3125em;
	padding: 0 0.3125em;
	border: 1px solid #000;
	background-color: #fff;
	font-weight: bold;
}

button#increasetext {
	font-size: 1.50em;
}

button#resettext {
	font-size: 1.25em;
}

button#decreasetext {
	font-size: 1.125em;
}

.textcontrols {
	padding: 0.625em 0;
	background: #ccc;
	position: fixed;
	
	
 
    bottom: 0px;
    right: 24px;
    height: 70px;
    z-index: 9000;
}


/* content */

#content {
	margin: 3em 0;
	text-align: left;
}


/* demo container */

#container {
	width: 90%;
	margin: 0 auto;
	padding: 2%;
}

#description {
	margin-bottom: 1.25em;
	text-align: left;
}

@media all and (min-width: 700px) {
	#container {
		width: 700px;
	}
	button {
		margin: 0 0.625em;
		padding: 0 0.625em;
	}
}