.page-hidden {
     opacity: 0;
}
 .page-visible {
     opacity: 1;
     transition: opacity 0.5s ease-out;
}


body {
	height:100svh;
     background:url(/assets/img/new-background.jpg) repeat center;
}


 @media (min-width:950px ){
   /* .course .trigger .body .icon{
         padding-top:40px;
    }*/
    .course .trigger {
         width:200px;
         height:200px;
    }
    /*.course .trigger .body {
         height:160px;
    }*/
	
	
	.content .course .trigger .title {
		 height:200px;
	}
	
	
    .classes .trigger {
         width:200px;
         height:200px;
    }
	
	.classes .trigger .title {
		 height:200px;
	}
	
	.course .trigger .title {
		 height:200px;
	}
	
	
	
	
    .course .overlay .popup .popup-content {
         max-width:860px;
         max-height:600px;
    }
    .course .overlay .popup .popup-content .body {
         max-height:500px;
    }
}
 @media (max-width:950px ){

					.course .lesson {
		
     margin:10px;
	}
	
			.classes .class-link {
		
     margin:10px;
	}


    /*.course .trigger .body .icon {
         padding-top:70px;
    }*/
    .course .trigger {
         width:250px;
         height:250px;
    }
    /*.course .trigger .body {
         height:210px;
    }*/
	
	.content .course .trigger .title {
		 height:250px;
	}
	
	
    .classes .trigger {
         width:250px;
         height:250px;
    }

	
	.classes .trigger .title {
		 height:250px;
	}
	
	
	
	
}
 @media (min-width:700px){
    .course .overlay .popup .popup-content {
         border-radius: 5px;
    }
	

	
	
}

.course .trigger {
     border:2px solid #000;
     border-radius: 5px;
     cursor: pointer;
     position:relative;
     z-index:9980;
	 background:#eee;
}

.course .trigger:hover {
	background:#000;
	color:#fff;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.classes .trigger:hover {
	background:#000;
	color:#fff;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.classes .class-link {
     border:2px solid #000;
     border-radius: 5px;
     cursor: pointer;
     background:#fff;
     position:relative;
     z-index:9980;
}

.classes .trigger {
	background:#eee;
}

.classes .class-link a {
	text-decoration:none;
	color:inherit;
}

 .disabled .trigger {
 #    background:#eee !important;
}



.course .trigger .body {
     width:100%;
     font-family: Arial;
     font-size:70px;
     font-weight: bold;
     color:#000;
     text-align: center;
     line-height: 160px;
}
.course .trigger .title {
     width:100%;
	 height:200px;
}
.course .trigger .title h2 {
     text-align: center;
     line-height:40px;
     font-family: Arial;
     font-size:18px;
     margin:0;
	 
}


.classes .class-link.invisible {
	visibility:hidden;
	height:1px !important;
}


.content .course .trigger .title {
	display:table;
}

.content .course .trigger .title h2 {
     display:table-cell;
     vertical-align:middle;
     font-size:24px;
	padding:10px;
}


.classes .trigger .title {
     width:100%;
	 display:table;
}
.classes .trigger .title h2 {
     text-align: center;
     font-family: Arial;
     display:table-cell;
     vertical-align:middle;
     font-size:24px;
     margin:0;
}





.course .overlay {
     position:fixed;
     display:table;
     width:100%;
     max-height:100dvh;
     min-height:100dvh;
     height:100%;
     text-align:center;
     top:0;
     right:0;
     left:0;
     bottom:0;
     background-color:rgba(0,0,0,0.3);
     z-index:9997;
}
.course .overlay .popup {
     display:table-cell;
     width:100%;
     height:100%;
     vertical-align:middle;
     text-align:center;
     z-index:9998;
     position:relative;
}
.course .overlay .popup .popup-content {
     width:100%;
     height:85dvh;
     display:inline-block;
     background-color:#fff;
     z-index:9999;
     position:relative;
}
.course .overlay .popup .popup-content .title {
     height:50px;
}
.course .overlay .popup .popup-content .title h2 {
     line-height:40px;
     font-family: Arial;
     font-size:24px;
     margin:0;
}
 .course .overlay .popup .popup-content .body {
	height:calc(85dvh - 100px);
     padding-left:10px;
     padding-right:10px;
     overflow-y:scroll;
     text-align:left;
     font-family: Arial;
     font-size:16px;
     line-height:1.5;
}

.course .overlay .popup .popup-content .body h3 {
     margin-bottom:20px;
     font-size:24px;
	 text-align:left;
}
.course .overlay .popup .popup-content .body h4 {
     margin-bottom:20px;
     font-size:20px;
	 text-align:left;
}

.course .overlay .popup .popup-content .body h5 {
     margin-bottom:20px;
     font-size:18px;
	 font-weight:bold;
	 text-align:left;
	 
}

.course .overlay .popup .popup-content .body table {
	    table-layout:fixed;
    width:100%;
}

.course .overlay .popup .popup-content .body p, table {
     margin-bottom:20px;
     font-size:18px;
}

.course .overlay .popup .popup-content .body span {
	font-weight:bold !important;
}

.course .overlay .popup .popup-content .body span.keyword {
	color:blue !important;
}

.course .overlay .popup .popup-content .body ol, ul, li {
     font-size:18px;
}
.course .overlay .popup .popup-content .body img {
     max-width: 100%;
     height:auto;
}
.course .overlay .popup .popup-content .body iframe {
     height:auto;
     max-width:100%;
}

.course .overlay .popup .popup-content .body table {
	border: 1px solid #000;
}

.course .overlay .popup .popup-content .body tr {
	text-align:center;
}

.course .overlay .popup .popup-content .body td {
	text-align:left;
}

.course .overlay .popup .popup-content .body tr, td {
	padding:15px;
}

.course .overlay .popup .popup-content .body tr:nth-child(even) {
	background-color: #f2f2f2;
}

.course .overlay .popup .popup-content .body > a {
     text-decoration:none;
     font-size:18px;
     color:#0000FF;
     border-bottom:1px solid #0000FF;
}
.course .overlay .popup .popup-content .body > a:hover {
     font-size:18px;
     color:#000;
     border-color:#000;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.course .overlay .popup .popup-content .body .downloads > a {
     margin-right:10px;
}



.course .overlay .popup .popup-content .footer {
     width:100%;
     height:50px;
}
.course .overlay .popup .popup-content .footer .close-button {
     width: 50px;
     height: 30px;
     font-family: Arial;
     font-size:20px;
     font-weight: bold;
     line-height: 30px;
     border:3px solid #000;
     border-radius: 3px;
     float:right;
     margin-right:5px;
     margin-top:10px;
}
.course .overlay .popup .popup-content .footer .close-button:hover {
     cursor: pointer;
     background:#000;
     color:#fff;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.course .overlay .popup .popup-content .footer:after {
    clear:both;
}
 header,section,footer {
     position:relative;
}
 body {
     margin:0;
     overflow-y:scroll;
	 min-height:100%;
}


 .wrapper {
     min-height:100%;
     position:relative;
     background-color:#fff;
}
 header {
     width:100%;
     height:130px;
     position:absolute;
     top:0;
     right:0;
}
 .menu-trigger {
     background:url(../img/hamburger.png) no-repeat;
     width:40px;
     height:39px;
     margin-top:50px;
     margin-right:20px;
}
 .menu-trigger:hover {
     cursor:pointer;
}
 header #logo {
     font-family:Verdana;
     font-size:36px;
     font-weight:bold;
     text-decoration:none;
     color:#fff;
	 text-outline:20px solid #000;
     margin-top:20px;
	 text-align:left;
}
 nav .nav-overlay .nav-content {
     padding:0;
     list-style:none;
}
 nav .nav-overlay .nav-content li {
     text-align:center;
     padding:0;
}
 nav .nav-overlay .nav-content li a {
     text-decoration: none;
     font-family:Arial;
     font-size:18px;
     font-weight:bold;
}
 .banner {
     width:100%;
     height:50svh;
     display:table;
}
 .banner .banner-wrap {
     width:100%;
     height:100%;
     padding:130px 20px 0 20px;
     display:table-cell;
     vertical-align:middle;
     min-height:100%;
}
 .banner .banner-wrap .banner-content {
     max-width:860px;
     margin:0 auto;
}
 .banner .banner-wrap h1 {
     background:#fff;
     padding:10px;
     border-radius:3px;
     font-size:40px;
     font-family:Arial;
     color:#000;
     text-align:left;
}

.content-lock {
	padding-top:20px;
}
.content-lock img {
	display:none;
	max-width:100%;
}

 .login-system {
     positon:relative;
     top:30px;
     background:#fff;
     border:4px solid #006400;
     border-radius:5px;
     font-family:Arial;
     font-size:18px;
	 line-height:30px;
     padding:0 20px 20px 20px;
}
 .login-system .error {
     font-weight:bold;
     color: #ff0000;
}
 .course {
     padding-top:20px;
}



 .classes {
     padding-top:20px;
}
 .content {
     background:#fff;
     min-height:50svh;
	 margin: 0 auto;
	 border-radius:8px;
}
 .content > h2 {
     padding-top:20px;
     font-size:28px;
     font-family:Arial;
     color:#000;
     text-align:left;
}
 .content > h3 {
     padding-top:40px;
     font-size:24px;
     font-family:Arial;
     color:#000;
}
 .content > p {
     padding: 20px 20px 0 20px;
     font-size:18px;
     font-family:Arial;
     line-height:30px;
     color:#000;
     text-align:left;
}
.noselect,
*
 {
     -webkit-touch-callout: none;
    /* iOS Safari */
     -webkit-user-select: none;
    /* Safari */
     -khtml-user-select: none;
    /* Konqueror HTML */
     -moz-user-select: none;
    /* Old versions of Firefox */
     -ms-user-select: none;
    /* Internet Explorer/Edge */
     user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}


@media (min-width:700px){
	
     header {
         text-align:left;
    }
	
	
	
	
				.course .lesson {
		
     margin:10px 10px 10px 0;
	}
	
			.classes .class-link {
		
     margin:10px 10px 10px 0;
	}
	
	
	
	
     .menu-trigger:hover {
         cursor: pointer;
    }
     nav.active .menu-trigger {
         display: none;
    }
     nav.active {
         position:fixed;
         display:table;
         width:100%;
         max-height:100dvh;
         height:100%;
         top:0;
         left:0;
         background-color:#000;
    }
     nav.active .nav-overlay {
         display:table-cell;
         width:100%;
         height:100%;
         vertical-align:middle;
         text-align:center;
    }
     nav.active .nav-overlay .nav-content {
         width:95%;
         height:100dvh;
         max-width:1000px;
         max-height:600px;
         display:inline-block;
         border-radius: 5px;
         margin:0;
    }
     nav.active .nav-overlay .nav-content li {
         margin-bottom:50px;
         border:3px solid #fff;
    }
     nav.active .nav-overlay .nav-content li:hover {
         margin-bottom:50px;
         border:3px solid #fff;
         background:#fff;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
    }
     nav.active .nav-overlay .nav-content li a {
         width:100%;
         color:#fff;
         display:block;
         padding:10px 0;
    }
     nav.active .nav-overlay .nav-content li a:hover {
         color:#000;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
    }
     nav.active .nav-overlay .nav-content .menu-close {
         width:100%;
         border:3px solid #fff;
         font-family:Arial;
         font-size:18px;
         font-weight:bold;
         display:inline-block;
         color:#000;
         padding:10px 0;
         background:#fff;
    }
     nav.active .nav-overlay .nav-content .menu-close:hover {
         cursor:pointer;
    }
	
	

}

@media (max-width: 700px) {
		
     header #logo{
         text-align:center;
    }
	
	     .content > h2, h3 {
         text-align:center;
    }
	
					.classes.grid-x {
					flex-flow:column nowrap;
					
				}
				
				.course.grid-x {
					flex-flow:column nowrap;
				}
	
				
	
				.course .lesson {
		
     margin:20px auto 20px auto;
	}
	
			.classes .class-link {
		
     margin:20px auto 20px auto;
	}
	
     .menu-close {
         display:none;
    }
     nav .nav-overlay .nav-content li {
         margin-top:40px;
    }
     nav .nav-overlay .nav-content li a {
         border-radius: 12px;
         padding:10px 20px;
         color:#fff;
         background:#000;
         margin-right:10px;
    }
     nav .nav-overlay .nav-content li a:hover {
         border-radius: 12px;
         padding:10px 20px;
         color:#000;
         background:#fff;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
    }
	
	
}