/*@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:700&display=swap');
/*@import url('https://fonts.googleapis.com/css?family=Baloo+Paaji&display=swap');*/
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap');

/*@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');*/

/*@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');*/
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap');*/


/*@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,800&display=swap');*/

.plyr{
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    margin: 20px auto;
}

@media (min-width:1100px) {
  .icontainer {
  width:1075px;
 }

}

 .icontainer {
  width:auto;
  padding-left:25px;
  padding-right:25px;
  max-width:1075px;
 
 }
 

@media (min-width:1100px) {
  .lesson-t {
font-family: 'Nunito Sans' !important; line-height: 1.1;  font-size: 36px !important; color: #353535;font-weight:bold;
 }

}

 .lesson-t {
font-family: 'Nunito Sans' !important; line-height: 1.1;  font-size: 36px !important; color: #353535;font-weight:bold;
 }

@media (min-width:1100px) {
  .lesson-subt {
font-family: 'Nunito Sans' !important; line-height: 1.1;  font-size: 18px !important; color: #4C4C4C;
 }

}

 .lesson-subt {
font-family: 'Nunito Sans' !important; line-height: 1.4;  font-size: 18px !important; color: #4C4C4C;
 }



.iframe-placeholder
    {
       background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%237367F0" x="50%" y="60%" font-family="\'Roboto\', sans-serif" font-size="18" text-anchor="middle">Loading...</text></svg>') 0px 0px no-repeat;
    
    }
	
	   .live-terminal {
   position: relative;
   padding-bottom: 75%; // This is the aspect ratio
   height: 0;
   overflow: hidden;
   }
   .live-terminal iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
   }

.dropzone {
  text-align: center;
  font-size: 18px;
}
.dz-max-files-reached {
  pointer-events: none;
  cursor: default;
}

  .md-card-style {
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;*/
 font-family: "Nunito", "Noto Serif", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;
   font-size: 16px;
   color: #4C4C4C;
/*  color:#2e4453;*/
   font-weight: 400;
   padding-top: 17px;
   padding-bottom: 36px;
   line-height: 1.8;
   letter-spacing: 0.02em;
   display: block;
   }
   .md-card-style p {
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;*/
   font-family: "Nunito", "Noto Serif", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;
   font-size: 17px;
   color: #4C4C4C;
   /*color:#2e4453;*/
   font-weight: 400;
   line-height: 1.8;
   letter-spacing: 0.02em;
   display: block;
   }

   .md-card-style ul  {
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;*/
   font-family: "Nunito", "Noto Serif", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;
   font-size: 17px;
   color: #4C4C4C;
   /*color:#2e4453;*/
   font-weight: 400;
   line-height: 1.6;
   letter-spacing: 0.02em;
   display: block;
   list-style-type: circle;
   }
   .md-card-style strong {
   font-size: 16px;
   line-height: 1.3em;
   font-weight: 700;
color: #4C4C4C;
   /*color: #4C4C4C;*/
   font-family: "Nunito",  "Roboto Slab", Arial, "Helvetica Neue", Helvetica, sans-serif;
   letter-spacing: 0.02em;
   }
   .md-card-style b {
   font-size: 16px;
   line-height: 1.4em;
   font-weight: 700;
   /*color:#2e4453;*/
   color:  #4C4C4C;
   font-family: "Nunito", "Roboto Slab", Arial, "Helvetica Neue", Helvetica, sans-serif;
   letter-spacing: 0.02em;
   }
   .md-card-style h1 {
   margin-top: 16px;
   font-size: 28px;
   line-height: 1.4em;
   font-weight: 800;
   /*color:#2e4453;*/
   color: #353535;
   font-family: "Nunito", "Nunito Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
   /*font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
  /* font-family: "Noto Serif", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   letter-spacing: 0.02em;
   margin: 30px 0 15px 0;
   }
   .md-card-style h2 {
   padding-top: 16px margin: .5em 0;
   font-size: 24px;
   line-height: 1.4em;
   font-weight: 800;
   /*color:#2e4453;*/
   color: #353535;
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   /*font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   /*font-family: "Noto Serif", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   font-family: "Nunito", "Nunito Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
   letter-spacing: 0.02em;
   margin: 30px 0 15px 0;
   }
   .md-card-style h3 {
   padding-top: 16px margin: .5em 0;
   font-size: 22px;
   line-height: 1.4em;
   font-weight: 800;
/*color:#2e4453;*/
   color: #353535;
   /* font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   /*font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
  /* font-family: "Noto Serif", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
    font-family: "Nunito", "Nunito Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
   letter-spacing: 0.02em;
   margin: 30px 0 15px 0;
   }
   .md-card-style h4 {
   padding-top: 16px margin: .5em 0;
   font-size: 20px;
   line-height: 1.6em;
   font-weight: 800;
   color: #353535;
   /*color:#2e4453;*/
   
   /*  font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   /*font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   /*font-family: "Noto Serif", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   font-family: "Nunito", "Nunito Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
   letter-spacing: 0.02em;
   margin: 30px 0 15px 0;
   }
/*
a:link, a:visited, h2 a:visited {
    color: 
    #1e8cbe;
}
*/

/*a:link {
  color: #3E416D;
font-weight:bold;
 border-bottom: 1px dotted; 
}

a:visited {
  color: #5d6d7e;
}

a:hover {
  color: #5d6d7e;
}


a:active {
  color: #3E416D;
} */

blockquote {
    background:   #fcf3cf none repeat scroll 0% 0%;
color: #3E416D;
border-left: 5px solid rgb(67, 70, 86);
    /*margin: 1.5em 0.5em;*/
    padding: 16px 20px 16px;
 border-radius: 0 10px 10px 0;
}

   @media (max-width: 800px) {
     .lesson-t {
font-family: 'Nunito Sans' !important; line-height: 1.1;  font-size: 36px !important; color: #353535;font-weight:bold;
 }
   
   .md-card-style {
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;*/
   font-family: "Noto Serif", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;
   font-size: 20px;
   color: #4C4C4C;
   font-weight: 400;
   padding-top: 16px;
   padding-bottom: 36px;
   line-height: 2.2;
   letter-spacing: 0.02em;
   display: block;
   }
    .md-card-style h1 {
   margin-top: 16px;
   font-size: 28px;
   line-height: 1.2em;
   font-weight: 700;
   color: #000000;
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   /*font-family: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
    font-family: "Nunito Sans", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;
   letter-spacing: 0.02em;
   }
   }
   @media (max-width: 640px) {
     .lesson-t {
font-family: 'Nunito Sans' !important; line-height: 1.1;  font-size: 36px !important; color: #353535;font-weight:bold;
 }
   .md-card-style {
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;*/
   font-family: "Noto Serif", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;
   font-size: 16px;
   color: #4C4C4C;
   font-weight: 400;
   padding-top: 16px;
   padding-bottom: 36px;
   line-height: 2.2;
   letter-spacing: 0.02em;
   display: block;
   }
       .md-card-style h1 {
   margin-top: 16px;
   font-size: 28px;
   line-height: 1.2em;
   font-weight: 700;
   color: #000000;
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   font-family: "", Arial, "Helvetica Neue", Helvetica, sans-serif;
   letter-spacing: 0.02em;
   }
   }
   @media (max-width: 480px) {
     .lesson-t {
font-family: 'Nunito Sans' !important; line-height: 1.1;  font-size: 36px !important; color: #353535;font-weight:bold;
 }
   
   .md-card-style {
   font-family: "Noto Serif", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;
   font-size: 16px;
   color: #4C4C4C;
   font-weight: 400;
   padding-top: 16px;
   padding-bottom: 36px;
   line-height: 2.2;
   letter-spacing: 0.02em;
   display: block;
   }
       .md-card-style h1 {
   margin-top: 16px;
   font-size: 28px;
   line-height: 1.2em;
   font-weight: 700;
   color: #000000;
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   font-family: "Nunito Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
   letter-spacing: 0.02em;
   }
   }
   @media (max-width: 360px) {
     .lesson-t {
font-family: 'Nunito Sans' !important; line-height: 1.1;  font-size: 36px !important; color: #353535;font-weight:bold;
 }
   
   .md-card-style {
   font-family: "Noto Serif", Arial, "Helvetica Neue", Helvetica, serif, sans-serif;
   font-size: 16px;
   color: #4C4C4C;
   font-weight: 400;
   padding-top: 16px;
   padding-bottom: 36px;
   line-height: 2.2;
   letter-spacing: 0.02em;
   display: block;
   }
       .md-card-style h1 {
   margin-top: 16px;
   font-size: 28px;
   line-height: 1.2em;
   font-weight: 700;
   color: #000000;
   /*font-family: "Merriweather", Arial, "Helvetica Neue", Helvetica, sans-serif;*/
   font-family: "Nunito Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
   letter-spacing: 0.02em;
   }
   }

.code-content {
	position: relative;

}
.code-content .type {
	border-left: 1px solid #333359;
	border-bottom: 1px solid #333359;
	border-radius: 0 5px 0 5px;
  padding: 0 10px 0 10px;
	font-weight: bold;
	color: #ffffff;
	background: #dd4814;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
}


.copy-code-wrap {
	position: relative;
	bottom: -5px;
	right: -1px;
    overflow:hidden;
	z-index: 5;
	cursor: pointer;
}

.copy-code-wrap .copy-code {
	height: 30px;
	width: 30px;
	position: absolute;
	bottom: -2px;
	right: 0;
	/*background: #DD4814;*/
	border-top-left-radius:     6px;
    border-bottom-right-radius: 6px;
	z-index: 10;
	transition: 0.2s;
}
.copy-code-wrap .copy-code::after {
	/*font-family: 'Font Awesome 5 Free';*/
  /*font-weight: 600;*/
	/*font-size: 18px;*/
	/*content: "\f328";*/
	/*color: #fff;*/
content: url('https://api.iconify.design/uil:copy.svg?color=%23a569bd&height=24');
vertical-align: -0.125em;
/*vertical-align: -0.125em;*/
color: #f7dc6f ;
	/*position: absolute;*/
	top: 3px;
	left: 10px;
right: 10px;
}
.copy-code-wrap .copy-code-wrap:active .copy-code {
	transform: translate(0,0) scale(0.9);
}
.animate {
	transform: translate(0,0) scale(1.05);
}


.hidden {
    display: none;
}