@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #163953; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #163953; background-image: -moz-linear-gradient(top, #163953, #163953); background-image: -ms-linear-gradient(top, #163953, #163953); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#163953), to(#163953)); background-image: -webkit-linear-gradient(top, #163953, #163953); background-image: -o-linear-gradient(top, #163953, #163953); background-image: linear-gradient(top, #163953, #163953); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#163953, endColorstr=#163953, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(22, 57, 83, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(22, 57, 83, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(22, 57, 83, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #163953; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { background-color: #AB2B83; background-image: -moz-linear-gradient(top, #6eb6de, #AB2B83); background-image: -ms-linear-gradient(top, #6eb6de, #AB2B83); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#792399), to(#AB2B83)); background-image: -webkit-linear-gradient(top, #EA369B, #AB2B83); background-image: -o-linear-gradient(top, #6eb6de, #5AB2B83); background-image: linear-gradient(top, #5D067E, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);  border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #792399; }
.btn-block { width: 100%; display:block; margin-bottom:20px; }

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

html { width: 100%; height:100%; overflow:auto; }

body { 
	height: auto;
	font-family: 'Open Sans', sans-serif;
    background-color: #FFFFFF;
	
}

.box h1 {
    color: black;
}

.navbar {
    z-index: 50;
}

a {
    text-decoration: none;
    text-align: center;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
	height: 80vh;
	padding: 0% 2%;
}
.box h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
.container {
    margin-top: 10rem;
	text-align: center;
}
.box1 {
	position: absolute;
	top: 35%;
	left: 50%;
	margin: -150px 0 0 -150px;
	width:300px;
	height:300px;
}
.box-popup {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
    width: 100px;
    height: 100px;
}
#full-size-img-box {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
#full-size-img-box img {
    max-height:80vh;
}
.artwork-popup {
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 100;
}
#artwork-popup {
    display:none;
}

#artwork-popup-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Cover the whole viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    z-index: 1; /* Ensure it's behind the popup */
}


.box h2 {
    text-align: center;
}
.box1 h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
.container {
    margin-top: 10rem;
	text-align: center;
}
.add_ws{
    top: 35%;
}
.container h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input { 
	width: 100%; 
	margin-bottom: 10px; 
	background: rgba(255,154,224,0.7);
	border: none;
	outline: none;
	padding: 10px;
	font-size: 13px;
	color: #FFFFFF;
	/* text-shadow: 1px 1px 1px rgba(0,0,0,0.3); */
	border: 1px solid rgba(138,12,121,0.5);
	border-radius: 4px;
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .5s ease;
	-moz-transition: box-shadow .5s ease;
	-o-transition: box-shadow .5s ease;
	-ms-transition: box-shadow .5s ease;
	transition: box-shadow .5s ease;
}

.radio-inp-option {
	width: 30%;
	margin-bottom: 10px;
	background: #F5A5DC;
	border: none;
	outline: none;
	padding: 10px;
	font-size: 12px;
	color: white;
	/* text-shadow: 1px 1px 1px rgba(0,0,0,0.3); */
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	/* box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2); */
	/* -webkit-transition: box-shadow .5s ease; */
	/* -moz-transition: box-shadow .5s ease; */
	/* -o-transition: box-shadow .5s ease; */
	/* -ms-transition: box-shadow .5s ease; */
	transition: box-shadow .5s ease;
}
.radio-inp-option2 {
	width: 49%;
	text-align:center;
	margin-bottom: 10px;
	background: #F5A5DC;
	border: none;
	outline: none;
	padding: 10px;
	font-size: 12px;
	color: white;
	/* text-shadow: 1px 1px 1px rgba(0,0,0,0.3); */
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	/* box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2); */
	/* -webkit-transition: box-shadow .5s ease; */
	/* -moz-transition: box-shadow .5s ease; */
	/* -o-transition: box-shadow .5s ease; */
	/* -ms-transition: box-shadow .5s ease; */
	transition: box-shadow .5s ease;
}

.radio-inp {
    width: 25%;
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }

.background {
    display:flex;
    height: 90vh;
    justify-content:center;
    align-items:center;
}

::placeholder {
    color: #FFFFFF;
    opacity: 1;/* Firefox */
}
#footer {
    height: 15vh;
    background: black;
    color: #387287;
    display: flex;
    padding: 2% 5% 0% 5%;
    flex-direction: column;
    text-decoration: none;
    font-size: 0.9rem;
}
#footer_links {
    display: flex;
    justify-content: center;
    text-align: center;
    text-decoration: none;

}
#footer_links a {
    padding: 0% 10%;
    text-decoration: none;
}
#footer_links a p {
    text-decoration: none;
    color: #ffffff;
    opacity: 0.5;
}
#copyright {
    padding-top: 1%;
    display: flex;
    justify-content: center;
    opacity: 0.5;
    color: #ffffff;
}

/*  --------------------------------------------------------------------- HOME ----------------------------------------------------------------------------------------------------------------------  */

.text-content {
    display:
    text-align: left;
}

.main-upcoming-ws-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    padding: 1% 5%;
    background:#FFC6C6;
}
.main-upcoming-ws-item {
    flex: 0 0 auto;
    padding: 1%;
    width: 400px;
}
/*  ----------------------------------------------------------------------  SCHOOL -------------------------------------------------------------------------------------------------------------------  */

.master-container{
        padding-top: 5%;
        padding-bottom: 3%;
    }

    .container-ws {
        width: 80%;
        overflow: hidden;
        padding-bottom: 3%;
    }
    .container-ws .point {
        padding: 8px;
        width: 33.3%;
        float: left;
    }
   .ws-main-content {
        width: 100%;
        height: 100%;
        text-align: center;
        opacity: 0.7;
        font-size: 1.2rem;
    }

    #topics {
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        margin-bottom: 3%;
    }
    .heading {
        padding: 2% 0%;
        text-align: center;
    }
    .heading h4 {
        font-size:1.5rem;
    }
    .button-container {
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .btn-wrapper {
        width: 100%;
        padding: 5% 0%;
    }
    .btn-set {
        display: flex;
        justify-content: center;
    }
    .button {
        width: 80%;
        background: #644A07;
        border:none;
    }
    .button:hover {
        background: #402e01;
    }

    .description {
        border-bottom: 2px solid gray;
    }
    .description p {
        font-size: 1.3rem;
    }

    .upcoming_ws_thumbnail {
        padding: 8px;
        width: 33.3%;
        float: left;
    }

    .upcoming_ws_content {
        width: 100%;
        height: 100%;
    }
    .container-upcoming-ws {
        width: 100%;
        overflow: hidden;
        padding-bottom: 3%;
    }
    .wrapper-ws {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 10%;
        padding-right: 10%;
    }
    .form-popup3 {
    display: none;
    position: fixed;
    bottom: 25%;
    right: 25%;
    z-index: 9;
}
.instructor-artwork-slide-section {
    background:black;
    padding:2% 0% 2% 0%;
}
.instructor-artwork-slide-section p {
    text-align:center;
    color:white;
    font-size: 2rem;
    opacity: 0.6;
}
.instructor-artwork-slide-container {
    display:flex;
    background:black;
    justify-content:center;
    align-content: center;
    background:black;
    padding: 2% 0% 2% 0%;
}
.instructor-artwork-slide {
    display:flex;
    height:100%;
    width: 100%;
    justify-content:center;
    align-items:center;
}
.instructor-artwork-slide img {
    position:cover;
    repeat:no-repeat;
    padding: 0% 1%;
    max-width: 100%;
    height: 100%;
}
.ws_page_category {
    display:flex;
    justify-content: space-between;
    padding: 1% 5%;
    text-align:center;
}
.ws_page_category h6 {
    font-size: 1.5rem;
}
.ws_page_title {
    padding: 2% 0%;
    display:flex;
    flex-direction:column;
    text-align:center;
}
.ws_page_title h1 {
    font-size: 3.5rem;
}
.ws_page_title h6 {
    font-size: 1.5rem;
}
.ws-main-schedule {
    text-align: center;
    padding: 5% 0%;
}
.ws-main-schedule h5{
    font-size: 1.6rem;
}
.ws-main-green p {
    text-align: center;
    color:#6eb661;
    font-size:1.8rem;
    background:black;
    padding: 1% 0%;
}
.ws-main-subheading {
    text-align:center;
    padding: 2% 0%;
}
.ws-main-subheading h5 {
    font-weight: 600;
    font-size: 1.6rem;
}
.ws-main-vision-quote {
    font-size:2.5rem;
    opacity:0.5;
    padding-bottom:2%;
}
.ws-main-vision-description {
    opacity:0.7;
    font-size:1.2rem;
}

/* ----------------------------------------------------------------------- USER MY ACCOUNT STYLING --------------------------------------------------------------------------------------------------- */

.user-profile{
    padding: 3%;
    margin-top: 3%;
    margin-bottom: 0%;
    border-radius: 0.5rem;
    background: #fff;
    text-align: left;
}

.profile-img{
    text-align: center;
}
.profile-img img{
    width: 70%;
    height: 40%;
}
.profile-img .file {
    position: relative;
    overflow: hidden;
    margin-top: -20%;
    width: 70%;
    border: none;
    border-radius: 0;
    font-size: 15px;
    background: #212529b8;
}
.profile-img .file input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
}
.profile-head h5{
    color: #333;
}
.profile-head h6{
    color: #0062cc;
}
.profile-edit-btn{
    border: none;
    border-radius: 1.5rem;
    width: 70%;
    padding: 2%;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background-color: #bf6547;
}
.proile-rating{
    font-size: 12px;
    color: #818182;
    margin-top: 5%;
    text-align: left;
}
.proile-rating span{
    color: #495057;
    font-size: 15px;
    font-weight: 600;
}
.profile-head2 .nav-tabs{
    margin-bottom:5%;
}
.profile-head2 .nav-tabs .nav-link{
    font-weight:600;
    border: none;
}
.profile-head2 .nav-tabs .nav-link.active{
    border: none;
    border-bottom:2px solid #0062cc;
}
.profile-work{
    padding: 14%;
    margin-top: -15%;
}
.profile-work p{
    font-size: 12px;
    color: #818182;
    font-weight: 600;
    margin-top: 10%;
}
.profile-work a{
    text-decoration: none;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}
.profile-work ul{
    list-style: none;
}
.profile-tab label{
    font-weight: 600;
}
.profile-tab p{
    font-weight: 600;
    color: #0062cc;
    text-align: left;
}


#update {
    visibility: hidden;
}
#cancel {
    visibility: hidden;
    color: red;
}

.form-popup {
    display: none;
    position: fixed;
    bottom: 35%;
    right: 20%;
    left: 20%;
    z-index: 9;
    z-index: 9;
}
.form-popup2 {
    display: none;
    position: fixed;
    bottom: 25%;
    right: 25%;
    z-index: 9;
}

.popup-form-container {
    max-width: 100%;
    padding: 5%;
    background-color: white;
    box-shadow: 0px 0px 10px 5px rgba(120,120,120,0.5);
    border: 1px solid gray;
}

.error {
    color: red;
}

.Empty {
    color: red;
}

.Exists {
    color: green;
}

.success {
    color: green;
}

.Done {
    color: green;
}

.Pending {
    color: gray;
}

.cert_list {
    max-width: 100%;
    padding: 5%;
    background-color: white;
    box-shadow: 0px 0px 10px 5px rgba(120,120,120,0.5);
}

#action .container {
    margin-bottom: 25%;
}
.form-center-container {
    display: flex;
    justify-content: center;
}

.form-center {
    width: 20%;
}
.delete-btn-container {
    display:flex;
    justify-content:center;
}
.delete-btn {
    width:20%;
    color:white;
    font-weight:300;
}
.delete-btn p {
    background:gray;
    padding:1% 2%;
}
.delete-btn:hover {
    color:white;
    text-decoration:none;
}
.delete-btn p:hover {
    background:#656565;
}
.default-form {
    display:flex;
    justify-content:center;
    height: 80vh;
    align-items:center;
}
.default-form div {
    width: 40%;
}
.change-password-container {
    display: flex;
    justify-content: center;
    height: 90vh;
    align-items: center;

}
/* --------------------------------------------------------------------- CLASSROOM VIDEOS DISPLAY ------------------------------------------------------------------------ */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#video-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

#video-wrapper3 {
    display: flex;
    align-items: center;
    justify-content: center;
}
#video-wrapper4 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2%;
}
#video-wrapper-container {
    width: 1240px;
    overflow: auto;
}

#video-wrapper-container3 {
    width: 1240px;
}
#video-wrapper-container4 {
    width: 1240px;
}

#video-wrapper-container3 .photo {
    padding: 8px;
    padding-top: 8px;
    height: 400px;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
}

#video-wrapper-container .video {
    padding: 8px;
    width: 25%;
    height: 200px;
    float: left;
}
#video-wrapper-container4 .video {
    padding: 8px;
    width: 25%;
    height: 200px;
    float: left;
    margin-bottom: 2%;
}

#video-wrapper-container .video .content {
    width: 100%;
    height: 100%;
}
#video-wrapper-container4 .video .content {
    width: 100%;
    height: 100%;
}

#video-wrapper-container .video .content p{
    text-align: center;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}
#video-wrapper-container4 .video .content p{
    text-align: center;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}

.video-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-wrapper-container {
    width: 80%;
    overflow: auto;
    height: 100%;
}
.video-wrapper-container h3, .width-80-container h3 {
    color:black;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Roboto';
}

.video-wrapper-container .video {
    padding: 8px;
    width: 25%;
    height: 200px;
    float: left;
}

.video-wrapper-container .video .content {
    width: 100%;
    height: 100%;
}


.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    padding:2% 0%;
}
.width-80-container {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}
.study-material-wrapper {
    display:flex;
    width:100%;
    justify-content:left;
}
.category-list {
    width:20%;
    height:40vh;
    background:#806262;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2% 2% 0% 2%;
    overflow: scroll;
}
.category-list button {
    border: none;
    background: #deacac;
    margin: 2%;
    font-size: 1rem;
}
.category-list button:focus {
    background:white;
}
.category-list p {
    color:white;
}
.category-content {
    width:80%;
    height: 40vh;
    background:#FFC6C6;
    display: flex;
    flex-direction: column;
    justify-content: left;
    overflow-y: scroll;

}
.category-content a {
}

.file-item {
    display: none;
    overflow: auto;
    flex-wrap: wrap;
    width: 100%;
}
.file-item-inner {
    display:flex;
    padding:1%;
}
.file-item-inner button {
    width: 100%;
}
.file-item-inner img {
    width:100%;
}
.file-item-inner p {
    font-size: 1rem;
}

.video-wrapper-container .video .content p{
    text-align: center;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}
.responsive-iframe {
        width: 22%;
        aspect-ratio: 16/9;
        margin: 1% 1%;
    }
.session_schedule {
        display:flex;
        padding:0% 5%;
        justify-content:center;
        text-align: center;
        flex-wrap: wrap;
    }
    .session_schedule p {
        width: 45%;
        font-size: 1.3rem;
    }
.full-size-img {
    display:none;
}
.box {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -150px 0 0 -150px;
        width: 100px;
        height: 100px;
    }
.enroll-form {
    display:flex;
    height: 90vh;
    justify-content: center;
    align-items:center;
    width: 100%;
}
.login {
    display:flex;
    height: 90vh;
    justify-content:center;
    align-items:center;
    width:100%;
}
.section-heading {
    padding: 1.5% 0% 1.2% 0%;
    text-align: center;
    font-size: 1.5rem;
}
.title-workshop-study-materials {
    display:none;
    padding:0.5% 2%;
    font-size: 1.5rem;
}

.quiz-btn {
    display:block;
    color:white;
    width:20%;
    padding:0.5% 1%;
    margin: 0% 0% 2% 0%;
}
.quiz-btn:hover {
    background:#3D2C00;
}
.quiz {
    display: flex;
    justify-content: center;
}
.quiz form {
    width: 60%;
    display: none;
    background: #FFDBDB;
    padding: 2% 5%;
    margin-bottom: 1.5%;
}
.quiz form p {
    text-align:center;
}
.quiz form div {
    display:flex;
    justify-content:center;
}
.quiz form input {
    width:10%;
    background: #be9292;
    border:2px solid #644A07;
    color: white;
    font-weight: 600;
}
.quiz form input:hover {
    color:white;
}
.quiz form label {
    font-size: 1rem;
}
#number-questions {
    display: none;
}
#number-submit {
    display: none;
}
#no-questions-label {
    display: none;
}
#next {
    display:none;
}
#quiz-btn1, #quiz-btn2, #quiz-btn3, #quiz-btn4, #quiz-btn5 {
    display:none;
}
#start-quiz {
    display:none;
    margin:1% 0%;
}
.quiz-close-reset-btn {
    display:flex;
    justify-content:left;
}
.quiz-close-reset-btn a {
    text-decoration:none;
    text-align:left;
    color:white;width:100%;
    margin: 0% 5%;
    padding:1% 20% 1% 20%;
    font-size: 1rem;
}
#logged-in-text {
    display:none;
}
#not-logged-in-text {
    display:none;
}
#log-in-alert {
    display:none;
}
#log-in-btn {
    display:none;
}
#start-quiz {
    text-decoration:none;
    width:20%;
    text-align:center;
    padding:1%;
    color:white;
}
#quiz h3 {
    width:100%;
    text-align:center;
    padding-top:3%;
    font-size: 1.5rem;
}
#quiz {
    justify-content:center;
    flex-direction:column;
    align-content:center;
}
#quiz-select-div {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    font-size: 0.9rem;
}
#quiz-select-div input {
    padding:0.2% 0%;
    width: 25%;
    margin-top:0.5%;
}
#quiz-select-div input::placeholder {
    font-size: 0.9rem;
    font-weight: 300;
}
#quiz-select-item-box {
    display:flex;
    justify-content:center;
    width: 60%;
}
#quiz p {
    font-size:1rem;
}
#quiz-category, #no-question {
    width: 50%;
    text-align:center;
}
#number-submit {
    color:white;
    font-size:0.9rem;
    text-decoration:none;
    text-align:center;
    width:10%;
}
#start-quiz {
    font-size:1.2rem;
    padding: 1% 1%;
}
#q {
    display:none;
    font-size: 1.3rem;
}
#oa, #ob, #oc, #od, #e {
    display:none;
}
#test {
    display:none;
}
#final-score {
    display:none;
}
#result {
    display:none;
}
#next-quiz {
    text-decoration: none;
    color: white;
    width: 20%;
    padding: 1% 0%;
    font-size: 1.3rem;
}
#next-quiz-btn {
    display: none;
}
.title h1 {
    text-align: center;
    font-size: 2rem;
}
.title p {
    color: white;
    text-align:center;
    font-size:1rem;
}
.video-wrapper-container p {
    font-size: 1rem;
}
.upcoming-ws-btn {
    font-size:0.9rem;
}
.feedback_inner {
    background:#FFC6C6;
    width: 100%;
    display:flex;
    padding:1%;
}
.ws-feedback, .topic-feedback {
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    width:50%;
    border:solid 0.2rem #644A07;
    padding:2%;
    margin: 1%;
}
.default-input {
    background:rgba(0, 0, 0, 0.3);
    color: white;
}
.feedback-container {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}
#ws-feedback-form p, #topic-feedback-form p {
    display:none;
}

.purchase-credits {
    display:none;
    width:100%;
    justify-content:center;
    padding-top:2%;
}
#know-more-ws-feedback, #know-more-topic-feedback {
    display: none;
}
#read-less-ws-btn, #read-less-topic-btn {
    display: none;
}
#credit-expiry-label {
    display:none;
}

@media only screen and (min-width : 1900px) {
    #video-wrapper-container .video {
        width: 25%;}
        #video-wrapper-container2 .video {
        width: 25%;}
        .course-btn {
        padding: 0% 3%;
        }
}
@media only screen and (max-width : 1900px) {
 .heading h4 {
        font-size:1.3rem;
    }
.video-wrapper-container h3, .width-80-container h3 {
    font-size: 1.4rem;
}
#start-quiz {
    font-size:1.1rem;
}
.title h1 {
    font-size: 1.8rem;
}
#quiz-select-div input {
    width: 35%;
}
    .ws_page_title h1 {
        font-size: 3rem;
    }
    .ws-main-schedule h5 {
        font-size: 1.4rem;
    }
    .ws-main-subheading h5 {
        font-size: 1.3rem;
    }
    .session_schedule p {
        font-size: 1.1rem;
    }
    .ws-main-vision-quote {
        font-size:2rem;
    }
    .ws-main-vision-description {
        font-size:1rem;
    }
    .description p {
        font-size: 1rem;
    }
    .ws-main-green p {
        font-size:1.4rem;
    }
    .instructor-artwork-slide-section p {
        font-size: 1.6rem;
    }
    .default-form div {
    width: 40%;
}
.file-item-inner p {
    font-size: 0.9rem;
}

.file-item-inner button {
    width: 90%;
}
.category-list button {
    font-size: 0.9rem;
}
.title-workshop-study-materials {
    font-size: 1.3rem;
}
.quiz-close-reset-btn a {
    font-size: 0.9rem;
}
#quiz h3 {
    font-size: 1.4rem;
}
.quiz form {
    margin-bottom: 1.5%;
}
}

@media only screen
and (max-width : 1440px) {
.upcoming-ws-btn {
    font-size:0.76rem;
}
.wrapper-ws {
        padding-left: 0%;
        padding-right: 0%;
    }
 .heading h4 {
        font-size:1.1rem;
    }
.video-wrapper-container h3, .width-80-container h3 {
    font-size: 1.3rem;
}
.title p, .video-wrapper-container p {
    font-size:0.9rem;
}
.title h1 {
    font-size: 1.6rem;
}
#q {
    font-size: 1.2rem;
}
.quiz form label {
    font-size: 0.9rem;
}
#start-quiz {
    font-size:1rem;
}
#number-submit {
    width: 15%;
    font-size:0.8rem;
}
#quiz-select-item-box {
    width: 80%;
}
#quiz-select-div input {
    width: 42%;
}
    .form-center {
        width: 40%;
    }
    #video-wrapper-container .video {
    width: 25%;
    }
    #video-wrapper-container2 .video {
    width: 25%;
    }
    #video-container {
    padding-left: 5%;
    padding-right: 5%;
    }
    .main-upcoming-ws-item {
        width: 350px;
    }
    .responsive-iframe {
        width: 32%;
    }
    .delete-btn {
        width: 25%;
    }
    #footer {
        font-size: 1.1rem;
    }
    .ws_page_category h6 {
         font-size: 1.2rem;
    }
    .ws_page_title h1 {
        font-size: 2.2rem;
    }
    .ws_page_title h6 {
        font-size: 1.2rem;
    }
    .ws-main-schedule h5 {
        font-size: 1.4rem;
    }
    .ws-main-subheading h5 {
        font-size: 1.1rem;
    }
    .ws-main-content {
        font-size: 1rem;
    }
    .session_schedule p {
        font-size: 1rem;
    }
    .ws-main-vision-quote {
        font-size:1.7rem;
    }
    .ws-main-vision-description {
        font-size:1rem;
    }
    .description p {
        font-size: 1rem;
    }
    .ws-main-green p {
        font-size:1.2rem;
    }
    .instructor-artwork-slide-section p {
        font-size: 1.4rem;
    }
    .default-form div {
    width: 50%;
}
.instructor-artwork-slide-container {
    padding: 4% 0%;
}
.file-item-inner p {
    font-size: 0.8rem;
}
.category-list button {
    font-size: 0.8rem;
}
.category-list {
    width: 30%;
}
.section-heading {
    font-size: 1.3rem;
}
.title-workshop-study-materials {
    font-size: 1.1rem;
}
.quiz-close-reset-btn a {
    font-size: 0.8rem;
}
#quiz h3 {
    font-size: 1.3rem;
}
.quiz form {
    margin-bottom: 2%;
}
#next-quiz {
    width: 25%;
    font-size: 1.2rem;
}
}


@media only screen
and (max-width : 992px) {
.upcoming-ws-btn {
    font-size:0.65rem;
}
.heading h4 {
        font-size:1rem;
    }
.video-wrapper-container h3, .width-80-container h3 {
    font-size: 1.2rem;
}
.title h1 {
    font-size: 1.4rem;
}
.title p, .video-wrapper-container p {
    font-size:0.8rem;
}
#full-size-img-box img {
    max-height:none;
    max-width:100%;
}
.artwork-popup {
    width:100%;
}
#q {
    font-size: 1.1rem;
}
.quiz form label {
    font-size: 0.85rem;
}
#start-quiz {
    width:25%;
    font-size:0.9rem;
}
#number-submit {
    width: 20%;
    font-size:0.7rem;
}
#quiz-select-div {
    font-size: 0.8rem;
}
#quiz-select-div input {
    width: 48%;
}
#quiz-select-div input::placeholder {
    font-size: 0.8rem;
}
#quiz p {
    font-size:0.9rem;
}
.form-center {
        width: 100%;
    }
    #video-wrapper-container .video {
    width: 33.33%;}
    #video-wrapper-container2 .video {
    width: 33.33%;}
    .main-upcoming-ws-item {
        width: 250px;
    }
    .responsive-iframe {
        width: 49%;
    }
    .delete-btn {
        width: 30%;
    }
    #footer {
        font-size: 0.9rem;
    }
    .session_schedule p {
        width: 80%;
        font-size: 1rem;
    }
    .ws_page_category h6 {
         font-size: 1rem;
    }
    .ws_page_title h1 {
        font-size: 1.8rem;
    }
    .ws_page_title h6 {
        font-size: 1rem;
    }
    .ws-main-schedule h5 {
        font-size: 1.2rem;
    }
    .ws-main-subheading h5 {
        font-size: 1rem;
    }
    .ws-main-content {
        font-size: 0.9rem;
    }
    .ws-main-vision-quote {
        font-size:1.5rem;
    }
    .ws-main-vision-description {
        font-size:0.8rem;
    }
    .description p {
        font-size: 0.9rem;
    }
    .ws-main-green p {
        font-size:1.2rem;
    }
    .instructor-artwork-slide-section p {
        font-size: 1.2rem;
    }
    .change-password-container form{
        width: 60%;
    }
.instructor-artwork-slide-container {
    padding: 4% 0% 6% 0%;
}
.file-item-inner p {
    font-size: 0.7rem;
}
.file-item-inner button {
    width: 80%;
}
.category-list button {
    font-size: 0.7rem;
}
.section-heading {
    font-size: 1.1rem;
    padding: 1.8% 0% 1.1% 0%;
}

.title-workshop-study-materials {
    font-size: 1rem;
}
.quiz form {
    padding: 2% 5%;
    margin-bottom: 3%;
}
.quiz form input {
    width:14%;
    }
.quiz-close-reset-btn a {
    font-size: 0.7rem;
}
#quiz h3 {
    font-size: 1.2rem;
}
#next-quiz {
    width: 30%;
    font-size: 1.1rem;
}
}

@media only screen
and (max-width : 768px) {
.feedback-container {
    width: 100%;
}
.feedback_inner {
    flex-direction: column;
    align-items:center;
    width:100%;
}
.ws-feedback, .topic-feedback {
    width:100%;
}
.video-wrapper-container h3, .width-80-container h3 {
    font-size: 1.1rem;
}
.title h1 {
    font-size: 1.3rem;
}
#start-quiz {
    font-size:0.9rem;
}
#quiz-select-div input {
    width: 48%;
}
.form-center {
        width: 60%;
    }
    #video-wrapper-container .video {
    width: 50%;}
    #video-wrapper-container2 .video {
    width: 50%;}
    .button {
        font-size: 16px;
        width: 100%;
    }
     .upcoming_ws_thumbnail {
        width: 50%;
    }
    .button_medium {
    width: 60%%;
    }
    .course-btn {
    padding: 0% 5%;
    }
    .main-upcoming-ws-item {
        width: 230px;
    }
    .responsive-iframe {
        width: 49%;
    }
    .delete-btn {
        width: 40%;
    }
    #footer {
        font-size: 0.8rem;
    }
    .ws_page_category h6 {
         font-size: 1rem;
    }
    .default-form div {
    width: 60%;
}
.enroll-form form{
    width: 80%;
}
.instructor-artwork-slide-container {
    padding: 6% 0% 8% 0%;
}
.category-list {
    width: 40%;
}
.section-heading {
    font-size: 1rem;
    padding: 2.2% 0% 1% 0%;
}
.title-workshop-study-materials {
    font-size: 0.9rem;
}
.quiz-btn {
    width:30%;
}
.quiz form {
    width: 80%;
    padding: 3% 5%;
    margin-bottom: 3%;

    }
.quiz form input {
    width:12%;
    }
}

@media only screen
and (max-width : 576px) {
.heading h4 {
    padding-top:2%;
    font-size:0.9rem;
    }
.video-wrapper-container h3, .width-80-container h3 {
    font-size: 1rem;
}
.title h1 {
    font-size: 1.2rem;
}
.title p, .video-wrapper-container p {
    font-size:0.7rem;
}
#q {
    font-size: 1rem;
}
#start-quiz {
    width:30% !important;
    font-size:0.8rem;
}
#quiz-select-div {
    font-size: 0.7rem;
}
#quiz-select-div input {
    width: 60%;
}
#quiz-select-div input::placeholder {
    font-size: 0.7rem;
}
#quiz-select-item-box {
    flex-direction:column;
    align-items:center;
    width: 80%;
}
#quiz-category, #no-question {
    width:80%;
}
#quiz p {
    font-size:0.8rem;
}
    #quiz h3 {
    font-size: 1.1rem;
}
    .form-center {
        width: 80%;
    }
    #video-wrapper-container .video {
    width: 100%;
    margin-bottom: 25%;
    padding: 0% 5%;
    }
    #video-wrapper-container4 .video {
    width: 100%;
    margin-bottom: 25%;
    padding: 0% 5%;
    }
    #video-wrapper-container2 h3 {
        padding: 0% 5%;
    }
    #video-wrapper-container h3 {
        padding: 0% 5%;
    }
    #video-wrapper-container3 h3 {
        padding: 0% 5%;
    }
      #video-wrapper-container4 h3 {
        padding: 0% 5%;
    }
    #video-wrapper-container2 .video {
    width: 100%;
    margin-bottom: 25%;
    padding: 0% 5%;
    }

    .button {
        font-size: 0.8rem;
        width: 100%;
    }
     .upcoming_ws_thumbnail {
        width: 100%;
    }
    .container-ws {
    width: 100%;
    }
     .wrapper-ws {
    font-size: 14px;
    }
    .course-btn a {
    font-size: 12px;
    width: 80%;
    }
    .course-btn {
    padding: 0% 5%;
    }
    .main-upcoming-ws-wrapper {
    flex-direction: column;
    align-items: center;
    padding: 4% 5%;
    }
    .responsive-iframe {
        width: 100%;
    }
    .delete-btn {
        width: 100%;
    }
    #footer {
        font-size: 0.7rem;
    }
    .main-upcoming-ws-item {
        width: 100%;
    }

    .ws_page_category h6 {
         font-size: 0.8rem;
    }
    .ws_page_title h1 {
        font-size: 1.3rem;
    }
    .ws_page_title h6 {
        font-size: 0.8rem;
    }
    .ws-main-schedule h5 {
        font-size: 1rem;
    }
    .session_schedule p {
        width: 80%;
        font-size: 0.8rem;
    }
    .ws-main-vision-quote {
        font-size:1.3rem;
    }
    .ws-main-vision-description {
        font-size:0.8rem;
    }
    .description p {
        font-size: 0.8rem;
    }
    .ws-main-green p {
        font-size:1rem;
    }
    .instructor-artwork-slide-section p {
        font-size: 1rem;
    }
    .instructor-artwork-slide-container {
        padding: 8% 0% 10% 0%;
}

    .default-form div {
    height:
}
.form-popup {
    right: 10%;
    left: 10%;
}
.change-password-container form{
        width: 80%;
    }
 .login form{
    width:80%;
 }
 .study-material-wrapper {
    flex-direction:column;
    width: 100%;
 }
 .category-list {
    width: 100%;
    height: 20vh;
 }
 .category-content {
    width: 100%;
 }
 .section-heading {
    font-size: 0.9rem;
    padding: 3% 0% 1% 0%;
}
.title-workshop-study-materials {
    font-size: 0.8rem;
    }
.quiz-btn {
    width:40%;
    font-size: 0.9rem;
    margin: 3% 0%;
}
.quiz form {
    width: 100%;
    padding: 5% 5%;
    margin-bottom: 5%;
    }
.quiz form input {
    width:15%;
    }
#start-quiz {
    width: 80%;
}
#next-quiz {
    width: 40%;
    font-size: 1rem;
}
}

#classroom-hero {
    width: 100%;
    height: 0%;
    background: #dbaaaa;
    color: white;
    opacity: 1;
    margin-bottom: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}
#gallery-hero {
    width: 100%;
    height: 20%;
    background: black;
    color: white;
    opacity: 0.4;
    margin-bottom: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}

.course-btn {
    display: block;
    height: 10%;
    padding: 5%;
    /* width: 100% /*
    /* margin: 0 0 0 -15%; */
    text-align: center;
}



.button_medium {
    width: 40%;
}

.text-button-center {
    display: block;
    text-align: center;
}
.text-button-center a {

}
hr {
    width:100%;
    height:2px;
    background: #400a57;
}
/* ---------------------------------------------------------------------------------- YOUTUBE VIDEOS FAST LOADING ------------------------------------------------------------------------------------- */

lite-youtube {
    width: 80%;
    overflow: auto;
    height: 100%;
}

/* gradient */
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target… */
    width: 100%;
    height: 100%;
    /* …but visually it's still the same size */
    background: no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  /* -------------------------------------------------------------------------------------- STUDIOS ----------------------------------------------------------------------------------------------------------- */
    .trunk {
        text-align: left;
        padding-top: 5%;
    }
    .trunk img {
        float: left;
        padding-right: 2%;
    }
    .trunk h2, h4, h6 {
        line-height: 0px;
    }
    .trunk p {
        opacity: 0.7;
    }
    .trunk h2 {
        padding-top: 8%;
    }
    .two-btn-full {
        display: flex;
        width: 100%;
    }
    .two-btn-full a{
        width: 50%;
        margin-top: 2%;
    }
    .btn-one  {
        margin-right: 3%;
    }
    .btn-two {
        margin-left: 3%;
    }
    .select-inp {
        padding: 0% 20%;
    }
  /* -------------------------------------------------------------------------------------- MANAGER ----------------------------------------------------------------------------------------------------------- */

.manager-page {
    margin-top: 2%;
    padding-bottom: 5%;
}
.manager-page h2 {
    margin-bottom: 8%;
}

#workshop {
    background-color: rgba(84, 56, 27, 0.5);
    padding: 5% 10%;
}

#menu-list {
    height: 90vh;
    overflow: scroll;
}

#add-ws-details {
    height: 70vh;
    overflow: scroll;
    display: none;
}

#notification {
    background-color: rgba(107, 72, 35, 0.5);
    padding: 5% 10%;
}
#communication {
    background-color: rgba(84, 56, 27, 0.5);
    padding: 5% 10%;
}
#export {
    background-color: rgba(107, 72, 35, 0.5);
    padding: 5% 10%;
}

.manager-page h5 {
    padding-bottom:5%;
}

.operation-body {
    padding-top: 10%;
    display: flex;
    justify-content: center;
}

#manager-img {
    display: block;
}

#overview-content {
    display: none;
}

#overview-content table {
    border-collapse: collapse;
}

#overview-content table td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
}

#add-ws {
    display: none;
}

.view_workshop_table {
    display: none;
}

#add-recording-link {
    display: none;
}

#open-reg {
    display: none;
}

#close-reg {
    display: none;
}
#open-demo {
    display: none;
}

#add-session-link {
    display: none;
}

#add-ws-files {
    display: none;
}
#add-quiz-data {
    display: none;
}

#ws-promo {
    display: none;
}

#last-day-reminder {
    display: none;
}

#session-link {
    display: none;
}

#session-reminder {
    display: none;
}
#send-email {
    display: none;
}
#send-wa {
    display: none;
}
#workshop-recipient {
    display: none;
}
#workshop-list {
    display: none;
}
#manual-recipients {
    display: none;
}

#certificate-dist {
    display: none;
}

#csv-export-cert {
    display: none;
}

#basket {
    display: block;
    width: 100%;
    justify-content: center;
    margin-top: 25%;
}
#form1 {
    display: flex;
    justify-content: center;
    width: 100%;
}

#gallery {
    display: none;
}

.ws_view_table {
    margin-left:auto;
    margin-right: auto;
}

#operations {
    display: none;
}

/* .submenu_options { */
    /* margin-left: auto;
    margin-right: auto;
} */

.submenu_options table, th, td {
    padding: 0.5%;
    border: 0px solid black;
    border-collapse: collapse;
}

.submenu_options table tr {
    width: 100%;
}

#user-opt {
    display: none;
}

#workshop1-opt {
    display: none;
}

#query-opt {
    display: none;
}

#accountant-opt {
    display: none;
}

#gst-opt {
    display: none;
}
#blank {
    display: block;
}

# ------------------------------------------------------------------------------- ANIMATION-ADMIN ------------------------------------------------------------------------------------------