You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

346 lines
6.7 KiB

.topnav {
background: #025E72!important;
border-bottom: 1px solid rgba(252, 252, 253, 0.15);
}
.topnav.scrolled {
background: #025E72!important;
}
.topnav .logo,
.topnav .mc-login-btn img {
filter: invert(1) brightness(200%);
}
.topnav .dropdown button {
color: #fff;
}
.topnav .mc-login-btn span {
color: #fff;
}
.topnav.scrolled .mc-login-btn span {
color: #fff;
}
.topnav button.navbar-toggler{
color: #fff;
display: none;
}
.header-section {
background: #025E72!important;
}
.backtohome {
background: #025E72;
}
a.return-action {
color: #FCFCFD;
opacity: 0.7;
}
.banner-links{
padding: 24px 20px!important;
}
.banner-links a {
color: #fff!important;
font-family: "Marr Sans";
font-size: 15px;
}
.current-page {
font-weight: 500;
}
.banner-links a.return-action img{
vertical-align: -1px!important;
margin-right: 4px;
}
.online-course-achat {
background: #025E72;
color: #fff;
}
.video-achat-container {
width: 80%;
margin: auto;
padding-top: 24px;
}
.video-achat-container .mc-event-speaker {
font-family: 'Marr Sans Cond';
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 52px;
text-align: center;
}
.video-achat-container .mc-event-title {
font-family: Marr Sans;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 28px;
text-align: center;
}
.video-header {
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
margin-top: 30px;
margin-bottom: 24px;
text-align: center;
}
.episode {
font-family: Marr Sans;
font-style: normal;
font-weight: normal;
font-size: 22px;
line-height: 28px;
}
.video-controls {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
text-align: center;
}
.video-controls img {
width: 90%;
}
.mobile-overlay-video {
display: none;
}
.episodes-container {
background: rgba(255,255,255, 0.05);
border-radius: 8px;
margin-top: 50px;
padding: 48px;
}
.episodes-container .mc-block-title {
font-size: 28px;
line-height: 34px;
color: #FCFCFD;
padding: 0;
text-align: center;
margin-bottom: 8px;
}
.episodes-container .mc-block-subtitle {
text-align: center;
font-family: 'Marr Sans';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
text-align: center;
}
#pause-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
padding: 20px;
display: none;
}
.episode-lists {
margin-top: 24px;
}
.episode-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(245, 246, 248, 0.1);
box-sizing: border-box;
border-radius: 4px;
padding: 16px 24px;
margin-bottom: 16px;
}
.episode-item:last-child {
margin-bottom: 0;
}
.episode-header {
display: flex;
}
.video-title {
font-family: 'Marr Sans';
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 24px;
color: #FCFCFD;
}
.video-duration {
font-family: 'Marr Sans Cond';
font-style: normal;
font-size: 15px;
line-height: 23px;
color: #FCFCFD;
}
.v-separator {
color: #FCFCFD;
margin: 0 8px;
}
p.video-details {
margin-bottom: 0;
font-family: 'Marr Sans';
font-size: 15px;
line-height: 24px;
margin-top: 8px;
margin-bottom: 16px;
color: #FCFCFD;
}
.video-progress {
width: 85%;
}
/* .video-progress-container {
background: rgba(252, 252, 253, 0.5);
border-radius: 10px;
width: 83%;
} */
.video-progress-container, .video-progress-container progress {
width: 100%;
}
progress {
border: none;
height: 4px!important;
background: rgba(252, 252, 253, 0.3);
border-radius: 10px;
}
progress {
color: #FFFFFF;
}
progress::-moz-progress-bar {
background: #FFFFFF;
}
progress::-webkit-progress-value {
background: #FFFFFF;
}
progress::-webkit-progress-bar {
background: rgba(252, 252, 253, 0.3);
border-radius: 10px;
}
.video-progress-bar {
width:0px;
height:4px;
background-color:#FCFCFD;
border-radius: 10px;
}
.ep-control-btn button, button{
border: 1px solid #FCFCFD;
box-sizing: border-box;
border-radius: 3px;
font-family: "Marr Sans";
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 16px;
background-color: transparent;
color: #fff;
padding: 5px 10px;
width: 90px;
margin-right: 16px;
outline: none!important;
}
.ep-control-btn button:hover {
background: #FCFCFD;
color: #025E72;
}
.ep-control-btn button:hover svg path {
fill: #025E72!important;
}
@media screen and (max-width: 769px) {
.video-achat-container {
width: 100%;
}
.video-achat-container .mc-event-speaker {
font-size: 35px;
line-height: 40px;
}
.video-achat-container .mc-event-title {
font-size: 18px;
line-height: 30px;
}
.video-header {
justify-content: center;
margin-bottom: 16px;
}
.video-header .episode {
font-size: 18px;
line-height: 28px;
}
.video-header button{
display: none;
}
#pause-btn {
display: block;
}
.video-controls {
display: none;
}
.mobile-overlay-video {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
border-radius: 8px;
top: 0;
left: 0;
right: 0;
}
.overlay-video {
position: absolute;
width: 95.5%;
height: 100%;
top: 0;
/* background-color: rgba(0,0,0,0.1); */
border-radius: 8px
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
text-align: center;
}
.overlay-content img {
height: 30px!important;
width: 30px!important;
margin-bottom: 8px;
}
.episodes-container {
margin-top: 24px;
padding: 0;
background: transparent;
}
.episodes-container .mc-block-title {
font-size: 24px;
line-height: 29px;
text-align: left;
}
.episodes-container .mc-block-subtitle {
font-size: 16px;
line-height: 19px;
text-align: left;
}
.episode-header {
flex-direction: column;
}
.v-separator {
display: none;
}
.episode-item {
padding: 16px;
margin-bottom: 8px;
}
.video-duration {
font-size: 13px;
line-height: 18px;
margin-top: 4px;
}
}