.counter-container {
	border-style: solid;
	border-width: 1px;
	border-color: #0275d8;
	padding: 0px 10px 5px 10px;
	margin: 10px 0 0 0;
}
.counter {
	font-size: 12vw;
	color: #0275d8;
	text-align: center;
	max-width: 90%;
}

.counter-warning {
	color: #f0ad4e;
}

.counter-last-warning {
	color: #d9534f;
}


.over-counter {
	font-size: 8vw;
	color: #ddd;
	margin-left: -3	vw;
	text-align: center;
}

.over-counter-active {
	color: #0275d8;
}

.progress-bar {
	background-color: #396b96;
}

.progress-bar-warning {
	background-color: #f0ad4e;
}

.progress-bar-last-warning {
	background-color: #d9534f;
}

.v-center {
 	position: relative;
 	transform: translateY(30%);
}
.bomb-area {
	padding-top: 5px;
	padding-bottom: 5px;
}

.btn-lg {
	margin: 10px 5px 10px 5px;
}

.first-row {
	margin-top: 0px;
}

.header-container {
	padding: 0px 10px 5px 10px;
	margin: 10px 0 0 0;
}

.current-time {
	padding: 15px 0 0 0;
	text-align: right;
}

.app-title {
	padding: 0 0 0 0;
	text-align: center;
	vertical-align: middle;
}

.app-title img {
	max-width: 250px;
	vertical-align: middle;
}


.presentation-container {
	border-style: solid;
	border-width: 1px;
	border-color: #0275d8;
	background-color: #ddd;
	padding: 0px 10px 5px 10px;
	margin: 10px 0 0 0;
}
.presentation-title {
	margin: 10px 0 0 0;
	font-size: 14px;
}

.presentation-info {
	margin: 0 0 0 0;
	font-size: 22px;
}

.brand-logo {
	padding: 15px 0 0 0;
	vertical-align: middle;
}

.control {
	margin: 10px 0 0 0;	
}

.timeframe-display  {
	display: flex;
	align-items: center;
 }

.progress-bar-container {
	width: 95%;
}



@media all and (min-width:300px) and (max-width: 800px) {
  /* put your css styles in here */
	.presentation-container {
		display: none;
	}
}

.presentation-button {
	margin-top: 15px;
}

.hide {
	display: none;
}

.div-navigation {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}