/*
 Put your custom overlay styles in here
 You can use your northpass color palette in this file

{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/

/* FONT IMPORT */
@font-face {
  font-family: "EngelVoelkersHead";
  src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersHead_W_Rg.woff") format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "EngelVoelkersHead";
  src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersHead_W_Bd.woff") format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "EngelVoelkersText";
  src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersText_W_Rg.woff") format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "EngelVoelkersText";
  src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersText_W_Lt.woff") format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "EngelVoelkersText";
  src: url("https://s3.amazonaws.com/static.northpass.com/engel-volkers/EngelVoelkersText_W_BD.woff") format('woff');
  font-weight: 700;
  font-style: normal;
}



{% comment %} 
Styles for course.html.liquid template
 {% endcomment %}
* {
  color: #0d0d0d !important;
   
}

html {
    font-family: "EngelVoelkersText", Arial, sans-serif;
    color: #0d0d0d;
    font-size:16px;    
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    margin: 0 0 5% 0%;
    }    

  h1, 
  h2 {
    font-family: "EngelVoelkersHead", Georgia, serif;
  }

  h3, h4, h5 {
    font-family: "EngelVoelkersText", Arial, sans-serif;
  }

.header-modify {
  width: 1440px;
}
.uk-container-mod {
}

{% comment %} 
Header Nav Styles
 {% endcomment %}
.uk-navbar-nav{
   float: none ;
  display: flex;

}
 .course-top-nav li{
    display: flex;
    flex-flow: row wrap;
    justify-content:flex-end;
    list-style: none;
    width: 100%;
    font-size: 18px;
    letter-spacing: .05px;
    list-style: none;
    height: auto;

}
  .course-top-nav li a {
      text-decoration:none;
      color: #444444;
      letter-spacing: 0.01px; 
       font-size: 18px;
      font-weight:bolder;
      list-style: none;
      height: auto; 
      line-height:30px;
      margin-top: 15px;
      margin-bottom: 15px;
  }


.current::after {
  content: "";
  bottom: 2px; 
  height: 2px; 
  background: red; 
  display: flex; 
  width: 100%; 
  margin: 0 auto;
}


  @media all and (max-width: 879px) {
  .resize-nav li{
  flex-flow: column wrap !important;
  height: auto;  
  }
    .resize-nav li a{
  justify-content:center;
  text-align: center;
  width: auto;
  font-size: 28px;
  }

.course-top-nav li a {
  line-height: 35px;
}

.current::after{
  content: "";
  bottom: 2px; 
  height: 2px; 
  background: red; 
  display: flex; 
  width: 50%; 
  margin: 0 auto;

}

}

@media all and (max-width: 500px) {
    .resize-nav {
    height: auto;         
   

  }
  .resize-nav a { 
    text-align: center; 
    padding: 8px;
  }
}

.course-top-nav a:hover { 
  -ms-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  transition:.5s;
}

.uk-border {
    border: none !important;
}
.uk-border-bottom {
    border-bottom:none !important;
}
    

.my-course-title{
      letter-spacing: .05px;
      font-weight:bolder;
      color: #444444;
      letter-spacing: 0.01px;
      height:5%;
}

.space-title {
  display:flex;
}
.uk-grid-modify {
  width: 1100px;
}
.search-box {
  margin-top: 9px;
}


{% comment %} .uk-margin-large-bottom .course-time p{
    color:red;
    margin-bottom: 0px;
} {% endcomment %}


 .course-desc-clamp {
  margin-top:4% !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
    }


  .course-desc-clamp p span{
  color: #444444 !important;

  }

.uk-panel-teaser-mod {
  position: relative !important;
  display: inline-block !important; 
  transition: transform 150ms ease-in-out !important;
  color: white;

}
.uk-panel-teaser-mod img {
   display: block !important;
   max-width: 100% !important;
   height: auto !important;
}   
.uk-panel-teaser-mod svg{
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
}
{% comment %} 
Styles for percentage circle within Course image element
 {% endcomment %}
.percent-circle {
  display: block !important;
  margin: 10px auto !important;
  max-width: 20% !important;
  max-height: 20% !important;
}
.circle-bg {
  fill: white;
  stroke: #eee;
  stroke-width: 2.2;
}

.circle {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.percent-circle.red .circle {
  stroke: rgb(210,4,0) ;
}

.percentage {
  fill: #666;
  font-size: .70rem !important;
  color: black !important;
  text-anchor: middle !important;
}

{% comment %}
Homepage
{% endcomment %}
.uk-heading-mod {
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.02px;
}
.uk-subheading-mod {
  font-size: 20px;
   max-width: 735px;
   margin: 0 auto;
}
.school-hero-mod {
  max-width: 1044px;
  max-height: 400px;
  margin: 0 auto 0 auto;
  display:block;
}

.left-margin-h2 {
  margin: 0 auto 0 auto;
  padding-left:
}
.uk-text-center-mod {
  max-width: 800px;
  font-size: 21px;
  display:block;
  margin: 0 auto 0 auto;
}


@media (max-width: 768px) {
   .uk-heading-large {
    font-size: 25px;
    line-height: auto;
}
   .uk-text-center-mod {
    max-width: 450px;
    font-size: 14x;
    display:block;
    margin: 0 auto 0 auto;
}

}

{% comment %} 
Styles for Clock SVG next to Estimated Course Completion Time
 {% endcomment %}
.clock-container { 
  display: flex;
  width: 100%;
  justify-content:flex-start;
  align-items: flex-end;
  background: white;
  color: #E60000 !important;
  font-size: 14px;
} 

.clock-container svg{ 
  display: flex;
  width: 7%;
  margin-right: 2%;
  background: white;
}

{% comment %} .svg-time-position.clock-container svg {
  display:flex;
  align-items: flex-end;
} {% endcomment %}

.school-website-course-tile .uk-panel-box  {
  display: grid;
}

#face { stroke-width: 3px; stroke: red; fill:white;}
#hour, #min { 
  stroke-width: 2.2px;
  fill: rgb(213,20,16);
  stroke: rgb(213,20,16);
}
#clock, #red {
    width:20%;
}


{% comment %} 
Course Catalog
 {% endcomment %}

 .header-image img{
  margin: 0 auto;
  display:block;
  box-sizing: border-box;
 }

 .category-chosen {
     background: rgb(255,255,255) !important;
     color: #E60000 !important;
     padding-left: 5px;
     font-size: 16px;
     text-align: left;
     border-radius: 6px;
     border: 1px solid #E60000 !important;
 } 

@media screen and (max-width: 830px) {
  .category-chosen {
    text-align: center;
  }
}


.uk-list-mod li a{
  line-height: 35px;
  width: 85%;
}

@media (min-width: 768px)
.uk-list-mod {
    width: 20%;
}

.h3-size-mod {
max-width: 160px;
}
 {% comment %} 
 Learning Path Style
  {% endcomment %}

  .go-path-style {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin: 0;
    overflow: visible;
    font: inherit;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 25px;
    vertical-align: middle;
    line-height: 39px;
    min-height: 30px;
    font-size: 18px;
    font-weight:bolder;
    text-decoration: none;
    text-align: center;
    border-radius: 6px;
    transition: background-color 100ms ease-in;
    border: 1px solid #068ca8;
    border-color: #e60000 !important;
    color: #ffffff !important;
    background: #e60000 !important;

  } 


  {% comment %} 
  .go-path-style {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin: 0;
    overflow: visible;
    font: inherit;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 20px;
    vertical-align: middle;
    line-height: 39px;
    min-height: 30px;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    border-radius: 2px;
    transition: background-color 100ms ease-in;
    border: 1px solid #068ca8;
    border-color: #d20400 !important;
    color: #ffffff !important;
    background: #d20400 !important;

  } 
  {% endcomment %}

{% comment %} 
My Dashboard Styles
 {% endcomment %}

 .discover-events-button {
     background: rgb(210,4,0) !important;
     color: rgb(255,255,255) !important;
     padding: 0 25px;
     font-size: 18px;
     font-weight:bolder;
     border-radius: 6px;
     border: 1px solid #eee !important;
 } 



{% comment %} 
Footer Styles
 {% endcomment %}

.footer-container {
  border-top: 1px solid #e4e4e4;
}

.footer-container .footer-content {
    padding-top: 50px;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    justify-content: space-between;
    font-weight: 300;
    flex-wrap: wrap;
    margin: 0px auto;
    width: 95%;
    height: 100%;
}

.group {
    display: flex;
    justify-content: space-between;
    -webkit-box-align: baseline;
    align-items: baseline;
    margin: 0 2.5% 0 2.5%;
}


@media screen and (max-width: 830px)
.footer-container .footer-content .group {
    width: 100%;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    padding: 10px 0 10px 0;
}

.group img{
    display: flex;
    height: 45px;
}

  @media all and (max-width: 830px) {
     .group {
    width: 100%;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
   }
}
.copyright {
  font-size: 14px !important;
  display:flex;
}
  @media all and (max-width: 830px) {
     .copyright {
    width: 100%;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    }
}

 .footer-container img {
   border-style:none;
 }

.ev-links {
  display:flex;
  justify-content: space-between !important;
  margin: 0 4% 0 4%;
  width:400px;
}

.ev-links a {
    margin: 0 10% 0 10%;
    justify-content: space-between 

}

  @media all and (max-width: 830px) {
   .ev-links a {
     margin-top: 18px;
   }
}

.sk-branding-banner {
-webkit-box-align: none;
    align-items: none;
    background-color: none;
    display: none;
    height: none;
    -webkit-box-pack: none;
    justify-content: none;
}

  .sk-branding-banner .sk-powered-button {
    display:none;
    height: 0px;
    width: 0px;
  }

    .sk-branding-banner.uk-button.uk-button-link.uk-text-small .sk-powered-button{
    display:none !important;
    height: 0px;
    width:0px;
    line-height: 0px !important;
    font-size: 0px !important;
  }

  {% comment %} 
  Events Page
   {% endcomment %}
   .stopwatch-color {
     color: rgb(210,4,0) !important;
   }


.view-button {     
     border-radius: 6px;
     font-size: 14px;
     line-height: 28px;
     margin-left: 4%;
}



 .apply-button {
     border-radius: 6px;
     font-size: 18px;
     font-weight:bolder;
     padding: 0 25px;
 } 
     
{% comment %} 
Styles for Events List Segement in My Dashboard
 {% endcomment %}

 .event-name-highlighted {
font-size: 16px;
list-style: none;
line-height: 30px;
color: rgb(210,4,0) !important;
font-weight: 500;
 }

  .event-list-item__title {
font-size: 16px;
list-style: none;
line-height: 30px;
color: rgb(210,4,0) !important;
font-weight: 500;
 }


 .event-list-item__actions {
    font-weight:550;
 }

  .iZnTPu {
    font: white !important;
    display:none;
}

.uk-float-right {
    float: none;
}

.search-box {
  display:flex;
  justify-content: flex-end;
}