@charset "utf-8";
/* CSS Document */

.art-frame {
	background-color: white!important;
}
.frame-player {
	position:relative;
	width: 250px!important; height: 75px!important;
	margin: 10px auto 0px!important;
	background-color: white;
}

/* extra exercises o */
.exWrapper {
	display:flex; flex-direction: column;
	width:100%; /*height:100%;*/
	background-color: aliceblue;
	margin:0 auto; padding:0;
	border-radius: 0 0 8px 8px;
}

.exTabs {
  display:flex; flex-direction: row; flex-wrap: wrap;
	align-content: center; justify-content:space-around; align-items:center;
	height:100%; width: 100%;
  margin:0px auto 5px auto; padding:0;
}
.exContent {
  display:block;
	height:100%; width: 100%;
  background-color: yellowgreen;
	margin:0 ; padding:0;
	border-radius: 0 0 12px 12px;
}

.exTabs button {
  display: block; width:8em; height:2.5em;
  background-color: dimgray; color: white;
  padding: 10px 5px; margin:4px;
  cursor: pointer; outline: none;
  font-family: 'header-big'; font-size: 12pt;
	text-align: center; font-weight: bold; letter-spacing: 1px;
  border: none;
  transition: 0.3s;
}
.exTabs button:hover {
  background-color: darkorange;
	/*border: solid 2px dimgray;*/
}
.exTabs button.active {
  background-color: LIMEGREEN; color: white;
	/*border-top: solid 2px white; border-bottom: solid 2px white; border-left: none; border-right: none;*/
	cursor: default;
}
.exTabs button.active:before {
  content:"\2714  "; /*content:"\21E2  ";*/
	font-size: 11pt; font-weight: bold; letter-spacing: 0px;
}
.tabcontentEx {
  padding: 0px; min-height:5em;
	border-radius: 0 0 12px 12px;
}
/* extra exercises x */

#extframe4_1, #extframe4_2, #extframe4_3, #extframe4_4 {
	min-height:100vh!important;
	border-radius: 0 0 12px 12px;
}

@media screen and (max-width : 980px ){
#extframe4_1, #extframe4_2, #extframe4_3, #extframe4_4 {
	min-height:140vh!important;
}
}

@media screen and (max-width : 690px ){
.exWrapper {
	display:flex; flex-direction: column;
}

.exTabs button {
  font-size: 13pt;
	padding: 10px 5px; margin:2.5px;
}

.exContent {
  display:block; flex-direction: column;
	align-content: center; justify-content: center; align-items: center;
	height:100%; width:100%;
  background-color: yellowgreen;
}
#extframe4_1, #extframe4_2, #extframe4_3, #extframe4_4 {
	min-height:120vh!important;
}

}