/***************************************************************************
* site.css
*
* All custom styles used in the tc site are in this file. These styles expand
* upon bootstrap.css, Bootstrap 4 
*
* The below index shows each section and then at the top of every section is
* Another section specific index
*
* Index
*  - Backgrounds 
*  - Buttons 
*  - Custom Components
*  - Form Styles
*  - Navigation Styles
*  - Text Styles
*  - HTML Overwrites 
*  - Bootstrap Overwrites 
*  - Image Styles
***************************************************************************/



/***************************************************************************
* Backgrounds
*
* These are the styles for element backgrounds.
* class naming  color-(l|d) l is for a lighter color, 
* ll is for a lighter lighter color  and d is for darker
*
* Index
*  - Brand 
*  - Gray
*  - Accent
*  - Gradient
***************************************************************************/

/*
* Brand backgrounds
*/

.brand-red { 
  background-color:#9A3324;
}
.brand-red-l {
  background-color:#CD331E;
}
.brand-red-d {
  background-color:#642117;
}

.brand-blue { 
  background-color:#8DC8E8;
}
.brand-blue-l { 
  background-color:#EEF7FC;
}
.brand-blue-d { 
  background-color:#124A68;
}

/*
* Gray backgrounds
*/

.gray-dd { 
  background-color:#332F21;
}
.gray-d { 
  background-color:#929699;
}
.gray { 
  background-color:#C4C9CC;
}
.gray-l {
  background-color:#DCE1E5;
}
.gray-ll { 
  background-color:#E8ECED;
}
.gray-lll { 
  background-color:#EDF2F4;
}

/*
* Accent backgrounds
*/

.gm { 
  background-color:#242f40;
}
.gm-l { 
  background-color:#296083;
}
.gm-ll { 
  background-color:#bec9da;
}

.yg {
  background-color:#cbe896;
}
.yg-l {
  background-color:#def0bc;
}
.yg-ll {
  background-color:#f7fbee;
}

.orange { 
  background-color:#ff7a59;
}
.orange-l {
  background-color:#ff9d85;
}
.orange-ll {
  background-color:#ffded6;
}

/*
* Gradient
*/
.blue-gradient {
  background-image: linear-gradient(#8dc8e8, #439ecf);
}

/*************************************************************************** 
* Buttons
*
* These are the styles for all buttons used in the tc site.
* These styles expand upoun and overwride bootstrap.css 
*  
* Index
*  - btn 
*  - a.btn 
*  - btn-primary
*  - btn-secondary
*  - btn-tertiary
*  - btn-white-*
***************************************************************************/

/* 
* Overwrite base bootstrap btn styles 
*/

.btn {
  padding: 20px 40px; 
  display: inline-block;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 2px solid;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 3px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn.thin {
  border-width:thin;
}
/*
* Set size for main nav btns 
*/
.btn-main-nav {
  padding: 8px 20px;
}
/*
* Set style for anchor tags being used as buttons
*/

a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/*
* Overwrite bootstrap btn-primary uses light blue background and white border 
* that switch on hover
*/

.btn-primary {
  color: #fff;
  background-color: #8dc8e8;
  border-color: #fff;
}

.btn-primary:hover {
  color: #8dc8e8;
  background-color: #fff;
  border-color: #8dc8e8;
}

/*
* Primary and secondary btns use the same colors so im using the same color
* for their focus shadow
*/ 

.btn-primary:focus,
.btn-primary.focus, 
.btn-secondary:focus,
.btn-secondary.focus, {
  box-shadow: 0 0 0 0.2rem #124A6880;
}

/*
* Overwrite bootstrap btn-secondary uses white background with light blue
* border that switch on hover
*/

.btn-secondary {
  color: #8dc8e8;
  background-color: #fff;
  border-color: #8dc8e8;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #8dc8e8;
  border-color: #fff;
}

/*
* Overwrite bootstrap btn-tertiary uses dark red background with white text
* on hover the dark red turns light red
*/

.btn-tertiary {
  color: #fff;
  background-color: #9A3324;
  border-color: #fff;
}

/* standard background color lightening on hover */
.btn-tertiary:hover {
  color: #fff;
  background-color: #cd331e;
  border-color: #fff;
}

/* using class switch-colors when we want the color and background
 color to switch on hover */
.btn-tertiary.switch-colors:hover {
  color: #9A3324;
  background-color: #fff;
  border-color: #9A3324;
}

.btn-tertiary:focus,
.btn-tertiary.focus, {
  box-shadow: 0 0 0 0.2rem #124a6880;
}

/*
* btn-white-blue uses white background and border with light blue text
* on hover the text and background switch and the border stays white
*/

.btn-white-blue {
  color: #8DC8E8;
  background-color: #fff;
  border-color: #fff;
}
.btn-white-blue:hover {
  color: #fff;
  background-color: #8DC8E8;
  border-color: #fff;
}
.btn-white-blue:focus,
.btn-white-blue.focus, {
  box-shadow: 0 0 0 0.2rem #000;
}

/*
* btn-white-red uses white background and border with red text
* on hover the text and background switch and the border stays white
*/

.btn-white-red {
  color: #9A3324;
  background-color: #fff;
  border-color: #fff;
}
.btn-white-red:hover {
  color: #fff;
  background-color: #9A3324;
  border-color: #fff;
}
.btn-white-red:focus,
.btn-white-red.focus, {
  box-shadow: 0 0 0 0.2rem #000;
}

/*
* btn-white-red-l uses white background and border with lt red text
* on hover the text and background switch and the border stays white
*/

.btn-white-red-l {
  color: #CD331E;
  background-color: #fff;
  border-color: #fff;
}
.btn-white-red-l:hover {
  color: #fff;
  background-color: #CD331E;
  border-color: #fff;
}
.btn-white-red-l:focus,
.btn-white-red.focus, {
  box-shadow: 0 0 0 0.2rem #000;
}

/*
* btn-red-l uses lt red background with white border and text
* on hover the text and background switch 
*/

.btn-red-l {
  color: #fff;
  background-color: #CD331E; 
  border-color: #fff;
}
.btn-red-l:hover {
  color: #CD331E;
  background-color: #fff;
  border-color: #fff;
}
.btn-red-l:focus,
.btn-white-red.focus, {
  box-shadow: 0 0 0 0.2rem #000;
}
.btn-red-l.red-border:hover {
  border-color: #CD331E;
}
/*
* btn-white-w-border uses white background, gray border light blue text
* on hover the gray border turns black
*/

.btn-white-w-border {
  color: #8dc8e8;
  background-color: #fff;
  border-width: 1px;
  border-color: #dce1e5;
}
.btn-white-w-border:hover {
  color: #8dc8e8;
  background-color: #fff;
  border-width: 1px;
  border-color: #929699;
}
.btn-white-w-border:focus,
.btn-white-w-border.focus, {
  box-shadow: 0 0 0 0.2rem #000;
}

.btn-outline-white {
  color: #fff;
  background-color: transparent;
  background-image: none;
  border-color: #fff;
}

.btn-outline-white:hover {
  background-color: #00000030;
}


/***************************************************************************
* Custom Components
*
* These are the styles for the custom css features used in the tc site.
*
* Index
*  - html and body height 
*  - horizontal-card 
*  - img stack
*  - inline icon
***************************************************************************/

/*
* The horizontal-card feature creates a content area next to an image
* The outer element needs class horizontal-card, that elements needs
* An inner div and img elements. The img will take up 40% of parent element
* The div will take 60%
*/

.horizontal-card {
  display: flex;
  box-shadow: -2px 2px 5px #C4C4C4;
}

.horizontal-card > div.card-content {
  width: 60%;
  padding: 8px;
}
.horizontal-card > div.card-img-container {
  width: 40%;
}


/*
* The img-stack feature creates a look over overlaying images
* The parent element needs the img-stack class and the child elemtents
* Need img-stack-1 2 or 3  
*/

.img-stack {
  position: absolute;
  width: 50%;
}
.img-stack-1 {
  left: 0;
  bottom: 0;
}
.img-stack-2 {
  left: 20%;
  bottom: 10%;
}
.img-stack-3 {
  left: 40%;
  bottom: 20%;
}

.stack-wrapper {
  height: 225px;
  position: relative;
}

/* img-course-creation overwritten for medium screens*/
@media (min-width: 768px) {
  .stack-wrapper {
    height: 100%;
  }
}

/*
* inline-icon formats the icon for inline use
*/
.inline-icon {
  width: 30px;
}

/***************************************************************************
* Form Styles 
*
* These are the styles for forms 
*
* Index
*  - form_control 
*  - label 
*  - responses 
***************************************************************************/


/*
* Change style of form elements
*/
.form-control:focus {
  border-color: #ced4da;
  box-shadow: 0 0 0 0.1rem #332f2180;
}

label.in-border {
  position: relative;
  top: 17px;
  left: 20px;
  background-color: #fff;
  padding: 0 5px;
  font-size: small;
}

/*
* Styles for form submit responses
*/
.good_response {
  border: 2px solid #28a745;
  background-color: #28a74530;
  padding: 10px;
}

.bad_response {
  border: 2px solid #dc3545;
  background-color: #dc354530;
  padding: 10px;
}

.inputx {
  visibility: hidden;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/***************************************************************************
* Navigation Styles
*
* These are the styles for main navbar and links throughout the website 
*
* Index
*  - pointer
*  - breadcrumb 
*  - search  
*  - nav bar
*  - anchor tags
*  - footer links 
***************************************************************************/

.pointer {
  cursor: pointer;
}

/*
* breadcrumb styles 
*/

/* Override bootstrap breadcrumb styles */
.breadcrumb {
  background-color: inherit;
  border-radius: 0;
}

/*
* Sets the breadcrumb seperator to ">>" and makes it black
*/
.breadcrumb-item + .breadcrumb-item::before {
  color: #000;
  content: ">>";
}

/*
* Prevent breadcrumb anchor for having underling and makes it black
*/
.breadcrumb-item > a {
  text-decoration: none;
  color:#000;
}
.breadcrumb-item > a:hover {
  text-decoration: underline;
  color: #8DC8E8;
}

/* 
* Prevent border on search select
*/

.search-select, .search-select:focus {
  border: none;
  margin-right: 10px;
  outline: none;
}
.search-input {
  border-radius: 0;
}

/*
* nav bar link hover color override 
*/

.navbar-light .navbar-nav a.nav-link:hover,
.navbar-light .navbar-nav a.nav-link:focus {
  color: #9A3324;
}
.navbar-light .navbar-nav a.nav-link:hover {
  text-decoration: underline;
}
.navbar-light .navbar-nav a.nav-link,
.navbar-light .navbar-nav a.nav-link {
  color: #000000BF;
}
.nav-link {
  white-space: nowrap;
  text-align: right;
  font-size: 22px;
}

@media (min-width: 992px) {
  .nav-link {
    white-space: nowrap;
    font-size: 16px;
  }
}

/*
* Set the width of the tc logo on the main nav bar
* 50% on xs,sm,md screens when nav menu is collapsed and icon is shown
* 35% on md and 25% on lg + when nav menu is shown
*/
.navbar-brand {
  width: 50%
}
@media (min-width: 768px) {
  .navbar-brand {
    width: 35%
  }
}
@media (min-width: 992px) {
  .navbar-brand {
    width: 25%
  }
}

/*
* Link colors
*/

/* red link */
a.tc-lt-red-link {
  color: #CD331E !important;
}
a.tc-lt-red-link:hover {
  color: #8DC8E8 !important;
}

/* light blue link */
a.tc-lt-blue-link, 
span.tc-lt-blue-link {
  color: #8DC8E8 !important;
}
a.tc-lt-blue-link:hover, 
span.tc-lt-blue-link:hover {
  color: #FFF !important;
}

/* black link */
a.black-text:hover {
  color: #212529 !important;
}

/* Basic link */
.link:hover {
  text-decoration: underline;
  cursor: pointer; 
}
/*
* Footer links style
*/

.footer-links, .footer-links a {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

/* First li item is a header and should be bigger */
ul.footer-links > li:first-child {
    font-size: 16px;
}

.footer-links a:hover {
  color: #8DC8E8;
  text-decoration: none;
}

.footer-header {
  font-size:16px;
}

.footer-text {
  font-size: 12px;
}


/***************************************************************************
* Text Styles
*
* These styles will set the text sizes and colors used in the tc site
*
* Index
*  - font family 
*  - text sizes 
*  - text colors 
*  - link colors 
*  - copyright
***************************************************************************/

/* 
* Used https://google-webfonts-helper.herokuapp.com/fonts/open-sans 
* to get required files and css format 
* open-sans-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic 
*/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open_sans.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open_sans.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*
* Text colors
*/

.inherit-text {
  color: inherit;
}

.red-text {
  color: #9A3324;
}

.black-text {
  color: #212529;
}

.gray-d-text {
  color: #929699;
}

.brand-blue-l-text { 
  color: #8DC8E8 !important;
}

.invalid-text {
  color:#cd3545;
}

.valid-text {
  color:#28a745;
}

.copyright {
  font-size: 14px;
}

.weight-600 {
  font-weight: 600;
}
.footer-top-text {
  font-weight: 700;
  font-size: 2.4rem;
}

/***************************************************************************
* HTML Overwrites 
*
* These styles overwrite or add to base html tags 
*
* Index
*  - html body 
*  - p 
*  - negative margin
***************************************************************************/

html, body {
  height:100%;
  font-family: "Open Sans";
  overflow-x: hidden;
}

p {
  overflow-wrap: break-word; 
  font-size: 1.1rem;
  font-weight: normal;
}

p.lead {
  font-size: 1.5rem;
  font-weight: normal;
}

p.sub-lead {
  font-size: 1.2rem;
  font-weight: 700;
}

.sub-lead-lt {
  font-size: 1.2rem; 
}

.hero {
  font-size: 3.5rem;
  font-weight: 700;
}

.hero-label {
  font-size: 1rem;
  font-weight: 700;
}

.col-header {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

h3 {
  font-size: 2.0rem;
  font-weight: normal; 
}

.no-wrap {
  white-space: nowrap;
}

.ml-n5 {
  margin-left: -5px;
}

.mr-n5 {
  margin-right: -5px;
}

/* md screen */
@media (min-width: 768px) {
  .absolute-md-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
  }
}

.overflow-left {
  position: absolute;
  right: 0;
}

/* md screen */
@media (min-width: 768px) {
  .overflow-md-left {
    position: absolute;
    right: 0;
  }
  .mr-md--50{
    margin-right: -50px !important;
  }
}

.flex-50 {
  flex-basis: 50%;
}

.w-120 {
  width: 120% !important;
}
.w-150 {
  width: 150% !important;
}

/* sm screen */
@media (min-width: 576px) {
  .w-sm-150 {
    width: 150% !important;
  }
  .w-sm-120 {
    width: 120% !important;
  }
  .w-sm-100 {
    width: 100% !important;
  }
  .w-sm-75 {
    width: 75% !important;
  }
  .w-sm-50 {
    width: 50% !important;
  }
}
/* md screen */
@media (min-width: 768px) {
  .w-md-150 {
    width: 150% !important;
  }
  .w-md-120 {
    width: 120% !important;
  }
  .w-md-100 {
    width: 100% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
}
/* lg screen */
@media (min-width: 992px) {
  .w-lg-150 {
    width: 150% !important;
  }
  .w-lg-120 {
    width: 120% !important;
  }
  .w-lg-100 {
    width: 100% !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
}

.p-6 {
  padding: 5rem !important;
}

.pt-6,
.py-6 {
  padding-top: 5rem !important;
}

.pr-6,
.px-6 {
  padding-right: 5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 5rem !important;
}

.pl-6,
.px-6 {
  padding-left: 5rem !important;
}


/* sm screen */
@media (min-width: 576px) {
  .p-sm-6 {
    padding: 5rem !important;
  }

  .pt-sm-6,
  .py-sm-6 {
    padding-top: 5rem !important;
  }

  .pr-sm-6,
  .px-sm-6 {
    padding-right: 5rem !important;
  }

  .pb-sm-6,
  .py-sm-6 {
    padding-bottom: 5rem !important;
  }

  .pl-sm-6,
  .px-sm-6 {
    padding-left: 5rem !important;
  }
}

/* md screen */
@media (min-width: 768px) {
  .p-md-6 {
    padding: 5rem !important;
  }

  .pt-md-6,
  .py-md-6 {
    padding-top: 5rem !important;
  }

  .pr-md-6,
  .px-md-6 {
    padding-right: 5rem !important;
  }

  .pb-md-6,
  .py-md-6 {
    padding-bottom: 5rem !important;
  }

  .pl-md-6,
  .px-md-6 {
    padding-left: 5rem !important;
  }
}
/* lg screen */
@media (min-width: 992px) {
  .p-lg-6 {
    padding: 5rem !important;
  }

  .pt-lg-6,
  .py-lg-6 {
    padding-top: 5rem !important;
  }

  .pr-lg-6,
  .px-lg-6 {
    padding-right: 5rem !important;
  }

  .pb-lg-6,
  .py-lg-6 {
    padding-bottom: 5rem !important;
  }

  .pl-lg-6,
  .px-lg-6 {
    padding-left: 5rem !important;
  }

}

/* xl screen */
@media (min-width: 1200px) {
  .p-xl-6 {
    padding: 5rem !important;
  }

  .pt-xl-6,
  .py-xl-6 {
    padding-top: 5rem !important;
  }

  .pr-xl-6,
  .px-xl-6 {
    padding-right: 5rem !important;
  }

  .pb-xl-6,
  .py-xl-6 {
    padding-bottom: 5rem !important;
  }

  .pl-lx-6,
  .px-xl-6 {
    padding-left: 5rem !important;
  }
}

/***************************************************************************
* Bootstrap Overwrites
*
* These styles overwrite bootstrap classes that aren't part of one of the other
* sections in this file, e.g the bootstrap .btn class is in the Buttons section
*
* Index
*  - container-fluid 
***************************************************************************/

/*
* Set the max width of the fluid container
*/
.container-fluid {
  max-width:1140px;
}

/* Used for multi slide carousels */
.carousel-item.active-next {
  display: flex;
}

/*
* Used to make the base bootstrap carousel show multiple imgs
*/

@media (min-width: 768px) {

    /* show 4 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: 1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* right or backward direction */


    .carousel-item-prev.carousel-item-right + .active.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    .carousel-item-prev {
      display: block;
      position: absolute;
      top: 0;
       -webkit-transform: translateX(-100%);
      transform: translateX(-100%);

    }
   
    .carousel-item-prev.carousel-item-right {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
      .carousel-item-prev.carousel-item-right {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
    @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
      .carousel-item-prev,
      .active.carousel-item-left {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    }

    .no-transform {
       transform: none !important;
    }

} /* close > medium block for carousel */

.carousel-control-next, .carousel-control-prev {
  width:25px;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

/* Safari 9+ only, used to prevent img stretching */
_:not(a,b), .giant-img-fluid {
  height: auto;
  height: intrinsic;
}

.wide-modal {
  width: 75%;
  max-width: none;
}

.modal-open {
  overflow: inherit;
}

/***************************************************************************
* Image Styles 
*
* These styles are used to correctly position and size images
*
* Index
*  - home page imgs
*  - features page imgs
*  - trainers page imgs
***************************************************************************/

/*
* Home page imgs
*/
.img-home-course-creation,
.img-home-reports {
  width: 100%;
  height: auto;
}
.img-home-admin {
  width: 100%;
  padding-bottom: 1.5rem;
}
/* for medium windows */
@media (min-width: 768px) {
  .img-home-course-creation {
    width: auto;
    height: 650px;
    position: relative;
    margin-bottom: -50px;
    margin-top: -50px;
  }
  .img-home-reports {
    position: absolute;
    left: 0;
    top: 0;
    height: 550px;
    width: auto;
  }
  .img-home-reports-container {
    min-height: 550px;
  }

  .img-home-admin {
    position: absolute;
    right: 0;
    top: 0;
    height: 450px;
    width: auto;
    padding: 0;
  }
  .img-home-admin-container {
    min-height: 450px;
  }
}

.img-home-hero {
  width: 100%;
}
/* for large windows */
@media (min-width: 992px) {
  .img-home-hero {
    position: absolute;
    width: 850px;
    left: 0;
    top: 0;
  }
  .img-home-hero-container {
    min-height: 500px;
  }
}

/*
* Features page imgs
*/
.img-lg-course-creation {
  width: 1350px;
}
.img-features-details,
.img-features-repository,
.img-features-managers,
.img-features-admin,
.img-features-manage {
  width: 100%;
}

/* for medium windows */
@media (min-width: 768px) {
  .img-features-details {
    position: absolute;
    right: 0;
    top: 0;
    height: 500px;
    width: auto;
  }
  .img-features-details-container {
    min-height: 500px;
  }
  .img-features-manage {
    position: absolute;
    left: 0;
    top: 0;
    height: 500px;
    width: auto;
  }
  .img-features-manage-container {
    min-height: 500px;
  }
  .img-features-repository {
    position: absolute;
    left: 0;
    top: 0;
    height: 500px;
    width: auto;
  }
  .img-features-repository-container {
    min-height: 500px;
  }
  .img-features-managers {
    height: 500px;
    width: auto;
  }
  .img-features-admin {
    position: absolute;
    left: 0;
    top: 0;
    height: 500px;
    width: auto;

  }
  .img-features-admin-container {
    min-height: 500px;
  }
}

/*
* Trainers page imgs
*/
.img-trainers-courses,
.img-trainers-quiz,
.img-trainers-events,
.img-trainers-reminders,
.img-trainers-notifications,
.img-trainers-survey,
.img-trainers-ppt {
  width: 100%;
}

/* for medium windows */
@media (min-width: 768px) {
  .img-trainers-courses {
    position: absolute;
    left: 0;
    top: 0;
    height: 450px;
    width: auto;
  }
  .img-trainers-courses-container {
    min-height: 450px;
  }

  .img-trainers-ppt {
    position: absolute;
    right: 0;
    top: 0;
    height: 450px;
    width: auto;
  }
  .img-trainers-ppt-container {
    min-height: 450px;
  }

  .img-trainers-quiz {
    position: absolute;
    left: 0;
    top: 0;
    height: 450px;
    width: auto;
  }
  .img-trainers-quiz-container {
    min-height: 450px;
  }

  .img-trainers-events {
    position: absolute;
    right: 0;
    top: 0;
    height: 450px;
    width: auto;
  }
  .img-trainers-events-container {
    min-height: 450px;
  }

  .img-trainers-reminders {
    position: absolute;
    left: 0;
    top: 25;
    height: 600px;
    width: auto;
  }
  .img-trainers-reminders-container {
    min-height: 600px;
  }

  .img-trainers-notifications {
    position: absolute;
    right: 0;
    top: 10;
    height: 600px;
    width: auto;
  }
  .img-trainers-notifications-container {
    min-height: 600px;
  }

  .img-trainers-survey {
    position: absolute;
    left: 0;
    top: 25;
    height: 600px;
    width: auto;
  }
  .img-trainers-survey-container {
    min-height: 600px;
  }

}

/*
* Admin page imgs
*/
.img-admin-notifications, 
.img-admin-left, 
.img-admin-hero {
  width: 100%;
}

/* for medium windows */
@media (min-width: 768px) {
  .img-admin-notifications {
    position: absolute;
    left: 0;
    top: 0;
    height: 400px;
    width: auto;
  }
  .img-admin-notifications-container {
    min-height: 400px;
  }

  .img-admin-hero {
    position: absolute;
    left: 0;
    top: 0;
    height: 500px;
    width: auto;
  }
  .img-admin-hero-container {
    min-height: 500px;
  }

  .img-admin-left {
    position: absolute;
    right: 0;
    top: 0;
    height: 600px;
    width: auto;
  }
  .img-admin-left-container {
    min-height: 600px;
  }

}

.img-course, 
.img-quiz-preview {
  width: 100%;
}

/* for medium windows */
@media (min-width: 768px) {
  .img-quiz-preview {
    position: absolute;
    right: 0;
    top: 0;
    height: 400px;
    width: auto;
  }
  .img-quiz-preview-container {
    min-height: 400px;
  }

  .img-course {
    position: absolute;
    left: 0;
    top: 0;
    height: 400px;
    width: auto;
  }
  .img-course-container {
    min-height: 400px;
  }

}

/*
* User Management page imgs
*/
.img-manage-users {
  width: 100%;
}

/* for medium windows */
@media (min-width: 768px) {
  .img-manage-users {
    position: absolute;
    left: 0;
    top: 0;
    height: 500px;
    width: auto;
  }
  .img-manage-users-container {
    min-height: 500px;
  }
}


.course-authoring-hero-img {
  background: url(/graphics/bg-authoring.png);
  background-size: cover;
}

.about-hero-img {
  background: url(/graphics/bg-about.png);
  background-size: cover;
}

.contact-hero-img {
  background: url(/graphics/bg-contact.png);
  background-size: cover;
}

.for-trainers-hero-img {
  background: url(/graphics/bg-contact.png);
  background-size: cover;
}

.resources-hero-img {
  background: url(/graphics/bg-resources.png);
  background-size: cover;
}

.user-management-hero-img {
  background: url(/graphics/bg-user-management.png);
  background-size: cover;
}



/* sm screen 
@media (min-width: 576px) {

 md screen
@media (min-width: 768px) {

 lg screen 
@media (min-width: 992px) {
*/