#test .btn{margin: 80px auto 30px auto;
    border: 1px solid #23345c;
    width: 200px;
    padding: 10px;
    text-align: center;
    background-color: #eee;
	}
#test .btn.active{ margin: 30px auto;
    border: 2px solid #B02721;
    width: 200px;
    padding: 10px;
    text-align: center;
    background-color: #eee;
    color: #B02721;
cursor: pointer;}

#progDesc {line-height:1.3}

.fa-cog {margin: 0 10px; color: #8C1510}
.fa-check {   font-size: 14px; margin: 0 10px 0 0 ;
    padding: 0;}
#speedMenuOuter {margin: 0 0 0 60px}
#playBackMenue{background-color: #2E2E2E;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
	width: 200px;
	position: relative;
top: -370px;}
#playBack{
	cursor: pointer}
	
#playBackMenue li{padding: 10px 0 10px 20px; margin: 0}
#playBackMenue li:hover{background-color:#515A5A}
#playBackMenue ul {    list-style: none;
    margin: 0;
    padding: 0;
}
.fa-check.hide {visibility: hidden}

.free{background-color: green;
    color: #fff;
    padding: 2px 7px;
    border-radius: 7px;
margin: 0 0 0 5px;}

.menuButt, .menuButtShow {color: #8C1510; border: 1px solid #8C1510; margin: 0px auto 15px 0; width: 200px; padding: 5px; cursor:pointer;     position: relative;
    top: 0; transition: top 1s;}
.menuButt i, .menuButtShow i	{margin: 0 10px 0 5px;}
.menuButt:hover, .menuButtShow:hover, .menuButt.active, .menuButtShow.active {color: #fff; background-color:#8C1510 }
#note {color: #8C1510; padding: 15px 40px; border:1px solid #23345c; background-color:#eee; width: 80%; margin: auto}
td{    padding-right: 10px;}
 tr{ padding-bottom: 5px}
 
 .menuButtShow {z-index:20}
 .noShow {top: -400px; transition: top 1s; z-index: 1}
 /*.noShow.active {opacity: 1; position: absolute; top: 0; z-index: 10}*/
  #dashMenu {height: 340px; transition: all 1s;}
 #dashMenu.short {height: 60px}
 #dashMenu .hid {padding: 0; margin: 0}
 
#blockRecommend {display: flex; margin-bottom: 50px; cursor:pointer}
.recommendImg {width: calc(50% - 40px); flex-basis:  auto}
.recommendImg img {width: 100%}
.recommendImg:hover {border: 4px solid #F74529;}

#menuOpen { color:#fff;     float: right;
    transform: rotate(90deg);
    font-size: 35px;
    top: -10px;
    position: relative; }
.shadow {
  -webkit-box-shadow: 10px 5px 8px 2px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    10px 5px 8px 2px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         10px 5px 8px 2px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.d1right {margin: 0; width:100%}
.courseSteps {font-size: 18px}
.far{color: #009FB5; margin: 0 5px 0 5px}
.hid {transition: height 1.5s}
#note.hid{ padding:0}


#hi {width: 500px;}
.step {width: 300px; }

.t1{height: 100%;
    vertical-align: middle;
    display: block;
    margin: 0;
    top: calc(50% - 15px);
    position: absolute;}
.t2{margin-left: 40px;}
#classMain { height: 1000px;
    width: 90%;
    margin: 0 auto;}
.classButton { font-weight: 700; padding: 10px; width: 100%; border: 1px solid #000; background-color: #eee; cursor: pointer}
.locked {cursor: default}
.classButton img {width: 25px;
    float: right;
    opacity: 0.5;}
.classList {border-left: 5px solid #fff; border-bottom: dashed 1px #eee; padding: 10px 0 10px 10px; cursor: pointer; position:relative}
input {
    margin: 5px 0 5px 20px; padding: 7px 10px;
	position: relative;
    font-size: 18px;
    color: #12224c;
}

.progDesc { margin-left: 60px}
.progDesc h2{ margin: 0}

li {
    margin: 10px;
}
li:first-child, li:last-child{
    margin: 10px;
}
.myButton {
	box-shadow:inset 0px 1px 0px 0px #cf866c;
	background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	background-color:#d0451b;
	border-radius:3px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:6px 34px;
	text-decoration:none;
	text-shadow:0px 1px 0px #854629;
	margin: 20px auto;
	display: block;
	 width: 60%; min-width: 180px;
	 text-align: center
}
.myButton:hover {
	background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	background-color:#bc3315;
}
.myButton:active {
	position:relative;
	top:1px;
}

#video1{    width: 100%; margin-left: 60px;
    display: block; max-height: 500px;}

.active {border-left: 5px solid green; font-weight: 700; cursor: default;}





@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

	#blockRecommend {display: block}
	.recommendImg {width: 320px; margin: 10px auto}
	
	.menuButt, .menuButtShow {width:calc(100% - 10px)}
  
}
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
	#blockRecommend {display: flex}
	.recommendImg {width: calc(50% - 40px); flex-basis:  auto}
	
	.menuButt, .menuButtShow {width: 250px}
}


#courses {font-family: "Montserrat", system-ui, BlinkMacSystemFont, -apple-system, sans-serif;}
#courses .fas, #footer .fas {position: relative}
.ct1 {color: #8C1510; font-size: 30px; font-weight: 600 }
.ct2 {color: #23345c; font-size: 28px; font-weight: 600 }
.ct4 {color: #8C1510; font-size: 24px; font-weight: 400 }

.ct5 {color: #23345c; font-size: 18px; font-weight: 600 }
.ct6 {color: #23345c; font-size: 16px; font-weight: 400;     padding-left: 10px;}

#courses h1 {color: #23345c; font-weight: 700; font-size: 44px; line-height: 1.2; margin: 10px 0;}
#courses .i1 {display:block; margin: 0 auto}


#footer, #footer2{font-family: "Montserrat", system-ui, BlinkMacSystemFont, -apple-system, sans-serif;}
#footer a {text-decoration: none}

.butWite {color: #fff; border: 2px solid #fff; margin: 0 auto; padding: 5px; width:  250px; text-align: center; cursor:pointer }
.sep {width: 100%; display:block; clear: both;}

.buttonA {
    display: block;
    margin-top: 10px;
    padding: 10px 30px;
    border: 2px solid #eee;
    min-width: 320px;
    width: 50%;
    left: 25%;
    position: relative;
	text-align: center;
}