html 
  {
  /* background-color: #000; */
  padding: 0 !important;
  margin: 0 !important;  
  background-position: 50% 0;
  transition: 0s linear;
  transition-property: all;
  transition-property: background-position;
  background-size: cover;
  min-height: 100%;
  }

body
  {
  width:100%;
  min-height:100%;
  padding: 0 !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  line-height: 1.5;
  background-color: transparent !important;
  color: #fff;
  }

body.academy
  {
  margin-top: 0 !important;    
  margin-bottom: 0 !important;
  font-size: 18px;
  }

div.cs-background
  {
  background-repeat: repeat-y;
  background-position: 50% 0;
  transition: 0s linear;
  transition-property: all;
  transition-property: background-position;
  background-size: cover;   
  padding-bottom: 80px; 
  }

section:not(.swapContent)
  {
  padding: 10px 0;  
  margin: 40px 0;    
  background-color: rgba(255,255,255,0.15);
  }

body.academy section:nth-child(1)
  {
  margin-top: 0;  
  }

body.academy section:not(.swapContent)
  {
  background-color: transparent;  
  }

section:not(.swapContent) .row > div
  {
  /* background-color: #eee; */
  }

section .csbox.image-box img 
  {
  border-radius: 0px;  
  }

section .boxed-content .csbox.image-box img 
  {
  border-radius: 10px;  
  }

section .boxed-content .csbox
  {
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 10px;  
  border: 1px solid white;
  box-shadow: 0px 6px 10px 4px rgba(0,0,0,0.55);
  height: 100%;
  padding: 20px 15px;
  }

section .boxed-content .csbox.image-box
  {
  padding: 0;
  }

section:not(.swapContent) div.container
  {
  max-width: 95%;  
  }
  
section .csblock:hover
  {
  }

section img
  {
  border-radius: 10px;  
  }
  
section ul
  {
  margin: 20px 0;  
  }
  
section ul li
  {
  margin-bottom: 10px;  
  }

button[data-proceed], button[data-goal]
  {
  width: 100%;
  padding: 12px 20px;
  text-align: center;  
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 10px;  
  border: 1px solid white;
  transition: all 1s ease-in-out;
  box-shadow: 0px 6px 10px 4px rgba(0,0,0,0.55);
  }

button[data-proceed] i, button[data-goal] i
  {
  position: relative;
  left: 0px;
  top: 1px;
  opacity: 0.25; 
  transition: all 1s ease-in-out;
  } 
   
button[data-proceed]:hover, button[data-goal]:hover
  {
  background-color: #000;  
  }
  
button[data-proceed]:hover i, button[data-goal]:hover i 
  {
  left: 10px;
  opacity: 1;  
  }
  
body.academy img.logo.title
  {
  position: relative;
  max-width: 40%;
  height: auto;
  margin: 0 auto;  
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
  }
  
body.academy #footer
  {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;  
  background-color: rgba(0,0,0,0.8);
  padding: 20px 20px;
  border-top: 1px solid white;
  color: #fff;  
  }
  
body.academy #footer a 
  {
  color: #fff;
  }
  
body.academy #footer ul
  {
  list-style-type: none;
  margin: 0;
  padding: 0;  
  }

body.academy #footer ul li
  {
  display: inline-block;  
  }
  
body.academy #footer ul li img
  {
  width: 26px;  
  height: auto;
  border-radius: 0;
  margin-left: 10px;
  }
  
body.academy.course-title section#home 
  {
  padding-bottom: 100px !important;  
  }
  
body.academy #cs-header
  {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;    
  z-index: 10000;
  opacity: 0;
  transition: opacity 2s ease-out;
  }  

body.academy #cs-header.show
  {
  opacity: 1;  
  }
  
body.academy #cs-header #cs-company-logo 
  {
  position: relative;
  margin-top: 10px;
  left: -300px;
  width: 200px;
  height: auto;
  transition: left 1s ease-out;
  -webkit-filter: drop-shadow(3px 3px 2px #111);
  filter: drop-shadow(3px 3px 2px #111);
  }

body.academy #cs-header.show #cs-company-logo
  {
  left: 20px;  
  }

body.academy.course-title #cs-header, body.academy.course-title #cs-company-logo
  {
  opacity: 0 !important;  
  }
  
ul.ul-cicon 
  {
  --icon-space: 1.5em;
  list-style: none;
  padding: 0 0 0 20px;
  }
  
ul.ul-cicon li 
  {
  padding-left: var(--icon-space);
  }
  
ul.ul-cicon li:before 
  {
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  display: inline-block;
  margin-left: calc( var(--icon-space) * -1 );
  width: var(--icon-space);
  content: "\f105";
  }

ul.ul-cicon li.li-check:before 
  {
  content: "\f00c"; /* FontAwesome Unicode */    
  }

ul.ul-cicon li.li-cross:before 
  {
  content: "\f00d"; /* FontAwesome Unicode */        
  }

ul.ul-cicon li.li-thumbup:before   
  {
  content: "\f164"; /* FontAwesome Unicode */            
  }
  
ul.ul-cicon li.li-thumbdown:before   
  {
  content: "\f165"; /* FontAwesome Unicode */                
  }
  
ul.ul-cicon li.li-happy:before   
  {
  content: "\f118"; /* FontAwesome Unicode */            
  }
    
ul.ul-cicon li.li-sad:before   
  {
  content: "\f119"; /* FontAwesome Unicode */                
  }
  
ul.ul-cicon li.li-info:before   
  {
  content: "\f05a"; /* FontAwesome Unicode */                
  }
  
ul.ul-cicon li.li-warning:before   
  {
  content: "\f06a"; /* FontAwesome Unicode */                
  }