@charset "UTF-8";
/**
 * Theme Name:        The Inventor's Patent Academy (TIPA)
 * Theme URI:         https://learn.inventtogether.org/
 * Description:       Official WordPress Theme for TIPA 2025-2026
 * Version:           1.1.07172025
 * Author:            Qualcomm
 * Author URI:        https://www.qualcomm.com/
 * Tags:              eLearning System
 * Text Domain:       tipa
 * Tested up to:      6.8.1
 * Requires at least: 6.8
 * Requires PHP:      7.4
 * License:           GNU General Public License v3.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-3.0.html
 */

body {
  margin:0;
  padding:0;
  background-color: #6e6d6d;
  font-family: 'Montserrat', sans-serif;
  font-size:14px;
  color:#656565;
}

a {
  color:#000;
}

.svg-inline--fa {

    color: #e9b657;
    margin-right:5px;

}

#header .svg-inline--fa {

    color:#FFF;

}

h1 {

    font-size:50px;
    font-weight: bold;
    color:#3B499F;

}

h2 {

    font-size:30px;
    font-weight: bold;
    color:#3B499F;
    margin:0 0 20px 0; 

}

h3 {

    font-size:18px;
    font-weight: bold;
    color:#3B499F;
    margin:0 0 20px 0; 

}

@media only screen and (max-width : 1149px) {

    h1 { font-size:30px; }
    h2 { font-size:22px; }
    h3 { font-size:15px;   margin:0 0 12px 0; }

}

.orange-bg { background-color:#e9b657 !important; border:1px solid #e9b657 !important; }
.blue-bg { background-color:#3B499F !important; border:1px solid #3B499F !important;   }
.red-bg { background-color:#8C1F20 !important; border:1px solid #8C1F20 !important;  }

.center {text-align: center;}

.button-align {

    text-align: center;

}

.button {

    min-width:200px;
    display: inline-block;
    margin:0 5px 15px 5px;
    background-color: #e9b657 !important;
    border:1px solid #e9b657 !important;
    -moz-border-radius: 30px !important;
    -webkit-border-radius: 30px !important;
    border-radius: 30px !important;
    -khtml-border-radius: 30px !important;
    color:#FFF !important;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    padding:15px;
    cursor: pointer;
    text-align: center;

}

.button-sm {

    display: inline-block;
    margin:0 auto;
    background-color: #e9b657 !important;
    border:1px solid #e9b657 !important;
    -moz-border-radius: 30px !important;
    -webkit-border-radius: 30px !important;
    border-radius: 30px !important;
    -khtml-border-radius: 30px !important;
    color:#FFF !important;
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    padding:7px;
    cursor: pointer;
    text-align: center;

}

@media only screen and (max-width : 767px) {

    .button {

        font-size: 12px;
    
    }

}

.red-button {

    background-color: #8C1F20 !important;
    border:1px solid #8C1F20 !important;
    
}

.blue-button {

    background-color: #3B499F !important;
    border:1px solid #3B499F !important;
    
}

.green-button {

    background-color: #6EAE51 !important;
    border:1px solid #6EAE51 !important;
    
}

.new-button,
.new-button-white,
.new-button-white-sm,
#wp-submit,
#reg-button {

    display: inline-block;
    border:2px solid #3C4A9F;
    background-color:#3C4A9F;
    line-height: 1.1;
    color:#FFF;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    padding:15px 20px;
    box-sizing: border-box;

    -moz-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    border-radius: 10px !important;
    -khtml-border-radius: 10px !important;

    letter-spacing: 1px;

    font-family: 'Montserrat', sans-serif;

}



#wp-submit,
#reg-button  {

    border:2px solid #3C4A9F !important;
    background-color:#3C4A9F !important;

}


.new-button-white {

    border:2px solid #3C4A9F;
    background-color:#FFF;
    color:#3C4A9F;

}

.new-button-white-sm {

    padding:7px 10px;
    border:2px solid #3C4A9F;
    background-color:#FFF;
    color:#3C4A9F;

}


#bg {

    background-image: url(images/bg.svg);
    background-repeat: no-repeat;
    background-size: cover;  
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 0;

}

#header {

    height:70px;
    background-color:#0C2F6B;
    position: relative;
    overflow: visible;
    z-index: 2;

}

@media only screen and (max-width : 767px) {

    #header {
        border-bottom:1px solid #0C2F6B;
    }

}

#holder {

    position: relative;
    z-index: 1;
    padding:0 0 10px 0;
    
}

#holder.full-holder {

    position: absolute;
    top:100px;
    left:20px;
    right:20px;
    bottom:20px;

}


@media only screen and (max-width : 1099px) {

    #holder {

        padding:0 0 5px 0;
        
    }

}


#logo {

    width:285px;
    margin:0 auto;
    display: block;
    position: relative;
    top:10px;

}

#logo img {

    display: block;
    width:100%;
}

@media only screen and (max-width : 1199px) {

    #logo {

        width:280px;
        top:10px;

    }

}

@media only screen and (max-width : 1099px) {

    #logo {

        width:250px;
        top:12px;

    }

}

#left-nav {

    margin:0;
    padding:0;
    position: absolute;
    left:20px;
    top:24px;

}

#left-nav li {

    margin:0 30px 0 0;
    padding:0;
    list-style: none;
    display: inline;
    
}

#left-nav > li .svg-inline--fa { margin: 0 5px 0 0; }

#left-nav li a {

    margin:0;
    padding:0;
    list-style: none;
    color:#FFF;
    font-size:16px;
    text-decoration:none;
    
}

#right-nav {

    margin:0;
    padding:0;
    position: absolute;
    right:0;
    top:24px;

}

#right-nav > li {

    margin:0 30px 0 0;
    padding:0;
    list-style: none;
    display: inline;
    
}

#right-nav > li .svg-inline--fa { margin: 0 5px 0 0; }

#right-nav > li > a {

    margin:0;
    padding:0;
    list-style: none;
    color:#FFF;
    font-size:16px;
    text-decoration:none;
    
}

#profile-nav {

    width:200px;
    top:20px;
    right:0;
    margin:0;
    padding:0;
    position: absolute;
    background-color:#FFF;
    display: none;

}

#profile-nav li {

    margin:0;
    padding:0;
    list-style: none;
    display: block;
    border-bottom:1px solid #CCC;

}

#profile-nav li:last-child {

    border:none;

}

#profile-nav li a {

    display: block;
    padding:10px 20px;
    color:#656565;
    text-decoration: none;

}

#right-nav > li:hover #profile-nav {

    display: block;

}

@media only screen and (max-width : 1299px) {

    #left-nav li { margin:0 15px 0 0; }
    #right-nav > li { margin:0 15px 0 0; }
    #left-nav > li .svg-inline--fa { margin: 0 2px 0 0; }
    #right-nav > li .svg-inline--fa { margin: 0 2px 0 0; }

}

@media only screen and (max-width : 1149px) {

    #left-nav li { margin:0 10px 0 0; }
    #right-nav > li { margin:0 10px 0 0; }

    #left-nav li > a { font-size:16px; }
    #right-nav > li > a { font-size:16px; }

}


.container {

    max-width: 1160px;
    min-width: 930px;
    margin:0 auto;
    padding:0 20px;

}

.round {

    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
    -khtml-border-radius: 5px !important;

    background-color:#FFF;
    margin:30px 0 0 0;

}

@media only screen and (max-width : 1149px) {

    .round { margin:20px 0 0 0; }

}

@media only screen and (max-width : 1000px) {

    .round { margin:10px 0 0 0; }

}

@media only screen and (max-width : 767px) {

    .round {

        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        -khtml-border-radius: 0px !important;
        margin:0;

    }

}

#holder.full-holder .round  {

    position: fixed;
    top:60px;
    left:20px;
    right:20px;
    bottom:40px;

}

@media only screen and (max-width : 991px) {

    #holder.full-holder .round  {

        top:90px;
        bottom:80px;
    
    }

}

@media only screen and (max-width : 767px) {

    #holder.full-holder .round  {

        bottom:110px;
        -moz-border-radius: 5px !important;
        -webkit-border-radius: 5px !important;
        border-radius: 5px !important;
        -khtml-border-radius: 5px !important;
    
    }

    #reg-c .round {

        margin:0 20px;
        -moz-border-radius: 5px !important;
        -webkit-border-radius: 5px !important;
        border-radius: 5px !important;
        -khtml-border-radius: 5px !important;
        padding:0 5px;
  
    }

    #reg-c h2 {

        padding-top:30px;

    }

}


/*
#login .round {

    position: fixed;
    top:60px;
    left:20px;
    right:20px;
    bottom:40px;

}
*/

/* Get Started */

#get-started {

    display:grid;
    grid-template-columns: 49% 49%;
    grid-gap:2%;
    text-align: center;

}

.gs {

    height:500px;
    display: flex;
    align-items: center;
    justify-content: center;

}


.gs-pad { padding:0 40px; }
.gs-text { padding:30px 0; }

#go-register { 
    
    background-color:#F2BC56;
    border:1px solid #F2BC56;

}

/* Login */

#login {

    width:500px;
    margin:0 auto;
    text-align: center;

}

.login {

    display: flex;
    align-items: center;
    justify-content: center;

}

.login-pad {

    padding:40px;

}

#loginform { width: 500px; }

#registration_form label,
#loginform label { 
    
    text-align: left; 
    font-size:12px; 
    color:#595858;
    text-transform: uppercase;

}

.form-links a {

    font-size:15px;
    color:#3C4A9F;
    font-weight: bold;

}

/* Register */

fieldset {

    border:none;

}

.form-row {

    display:grid;
    grid-template-columns: 49% 49%;
    grid-gap:2%;
    margin-bottom:20px;

}

.field {

    text-align: left;

}


.field label,
.login label,
.please-rate
{

    font-size:17px;
    line-height: 1.2;
    color:#000000;
    font-weight: bold;
    display: block;
    margin-bottom:10px;

    
}

#eeoc-form .field label,
.likert-group label {

    font-size:14px;
    font-weight: normal;

}

.likert-group .likert-label{

    font-size:17px;
    color:#000000;
    font-weight: bold;

}

.label-sub-text {

    margin:10px 10px 10px 20px;
    line-height: 1.5;

}

.label-indent {

    margin:10px;

}

.form-row .field[data-conditional="1"] {

    display: none;

} 

.check-check {

    margin-right:10px;

}

.check-label {

    display: inline !important;

}


.field input[type=text],
.login input[type=text],
.field input[type=email],
.login input[type=email],
.field input[type=password],
.login input[type=password],
.field select,
.login select,
.field textarea,
.login textarea
{

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -khtml-border-radius: 5px; 
    font-size:14px;
    padding:18px 22px;
    border:1px solid #707070;
    width:100%;
    color:#000;
    background-color:#FFF;
    outline:none;
    box-sizing: border-box;

}

.field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;  

    background-image: url(images/select-arrow.svg);
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 20px auto;

}

.field textarea {

    min-height: 150px;
    font-family: 'Montserrat', sans-serif;
    font-size:14px;

}

.field input::placeholder {

    color:#707070;

}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #707070;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;
    -webkit-text-fill-color: #707070;
}


#loginform input[type=text],
#loginform input[type=email],
#loginform input[type=password]
{ 
    
    width:100%;
    border:2px solid #595858;
    padding:10px;

}

#registration_form input {

    border:2px solid #595858;
    padding:10px;
     
}

#registration_form select {

    border:2px solid #595858;
    padding:10px;

}

#registration_form input[type=checkbox] {

    width:40px;

}

@media only screen and (max-width : 767px) {

    .field label,
    .login label,
    .please-rate
    {

        font-size:11px;
        
    }

    .field input[type=text],
    .login input[type=text],
    .field input[type=email],
    .login input[type=email],
    .field input[type=password],
    .login input[type=password],
    .field select,
    .login select,
    .field textarea,
    .login textarea
    {

        font-size:11px;
   
    }

}

.error {

    color:#FF0000;

}

.field-error,
#form-errors,
#reg-errors
{

    color:#FF0000;
    font-size:12px;

}

#reg-errors,
#form-errors {

    margin-bottom:20px;

}

@media only screen and (max-width : 767px) {

    .field-error,
    #form-errors,
    #reg-errors
    {

        font-size:11px;

    }

}

.other-field {

    padding-left:40px;
    display: none;
    
}

#state-holder {

    display: none;

}


/* Welcome */

#home-logo {

    width:95px;
    margin:0 auto;
    display: block;

}

#home-grid {

    display:grid;
    grid-template-columns: 55% 40%;
    grid-gap:5%;
    border-bottom:1px solid #CDCDCD;
    padding-bottom:40px;

}

/*
#home-left {}
*/


#home-left img {

    max-width: 100%;
    cursor: pointer;

}

#home-right h1 {

    font-size:26px;
    line-height: 1.2;

}

.nb-wide,
#home-right .new-button,
#home-right .new-button-white,
#home-bottom .new-button,
#wp-submit,
#reg-button  {

    width:350px;
    margin-bottom:10px;

}

#reg-button, 
#wp-submit {

    margin:20px 0; 

}

#home-flex {


    padding-top:30px;
    margin:0 40px 50px 40px;

}


.home-flex { display: flex; }
.home-flex-l,
.home-flex-r { 
    
    flex:1;
    display: flex;
    align-items: center;
    justify-content: center;

 }

.home-flex-rev .home-flex-l {

    order: 2;

}

.home-flex-rev .home-flex-r {

    order: 1;

}

.home-flex-img {

    display: block;
    margin:0 auto;
    max-width: 100%;

}

.home-flex-pad {

    padding:0 30px;
    
}

@media only screen and (max-width : 991px) {

    #home-flex {

        padding:0;
        margin:0 20px;
        
    }


}

@media only screen and (max-width : 767px) {


    .home-flex-pad { padding:0 20px;}
    
    .home-flex { display: block; }


}



#home-trips {

    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap:2%;
    margin-top:35px;

}

.home-trip {

    text-align: center;
    
}

.home-icon {

    height:90px;

}

#home-link {

    font-size:15px;
    color:#3B499F;
    text-transform: uppercase;
    font-weight: bold;
    margin:40px 0;
    display: inline-block;
    letter-spacing: 1px;

}

#home-link-mobile { display: none; }

@media only screen and (max-width : 991px) {


    #home-link-mobile { display: inline-block; margin:0 20px 40px 20px; }
    #home-link { display: none; }


    #home-grid { display:block; }
    #home-left{ margin-bottom:30px; } 
    #home-right { padding:0 20px; }
    #home-right p { margin:20px 0 30px 0;  }
    #home-right h1 { font-size:24px !important;  }
    
    #home-trips { display:block; }
    .home-trip { 
        
        border-top:3px solid #f0f0f0;
        padding:40px 20px 30px 20px;
    
    }

    #home-trips h2{ font-size:20px !important;  }

    #home-link {  padding:0 20px; }

    #home-bottom {

        padding:20px;

    }
    

}

@media only screen and (max-width : 499px) {

    .new-button,
    .new-button-white {

        font-size: 13px;

    }


    #reg-button,
    #wp-submit,
    .nb-wide,
    #home-right .new-button,
    #home-bottom .new-button,
    #home-right .new-button-white {

        width:100%;
 
    }

}

h2 {

    font-size:22px;
    margin-top:20px;

}

#welcome {

    padding:40px 50px;
    line-height: 1.5;

}

#welcome p {

   line-height: 1.5;

}

@media only screen and (max-width : 1149px) {

    #welcome { padding:20px 50px; }

}

#edit-profile { padding:40px; }
#edit-profile-text { text-align: center; }

#edit-password{ padding:40px; }
#edit-password-text { text-align: center; }


#courses {

    padding:40px;  
    margin:0 auto;
    min-height: 600px;

}

#courses h1 { text-align: center; }


.courses-grid { margin:30px 0; }

.courses-grid .courses-row-header {

    font-weight: bold;

}

.courses-grid .course-row {

    display:grid;
    grid-template-columns: 12% 12% 12% 12% 12% 12% 12%;
    grid-gap:2%;
    margin-bottom:15px;

}

.courses-grid .course-col { text-align: center; }

.course {

    margin:15px 0 0 0;
    background-color:#FFF;
    position: relative;

    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
    -khtml-border-radius: 5px !important;

    min-height: 660px;


}

.course.cover-bg {

    background-image:url(images/bg-cover.png);
    background-repeat: no-repeat;
    background-size: cover;  
    background-position: center;

}

.slides.cover-bg {

    background-image:url(images/bg-cover.png);
    background-repeat: no-repeat;
    background-size: cover;  
    background-position: center;

}

@media only screen and (max-width : 1149px) {

    #courses { padding:20px 40px; }
    .courses-grid { margin:0 0 15px 0; }

    .course { margin:20px 0 0 0; }

}

@media only screen and (max-width : 1000px) {

    .course { margin:10px 0 0 0; }

}

@media only screen and (max-width : 767px) {

    .course { 
        
        margin:0;
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        -khtml-border-radius: 0px !important;
  
    
    }

    #courses { padding:20px; }

    #courses h2 { margin:30px 0 10px 0; }

}

.start-button-outer {

    text-align: center;
    margin:30px 0 0 0;

}

@media only screen and (max-width : 1149px) {

    .start-button-outer { margin:15px 0 0 0; }
    

}

#courses p,
.start-box p {

    line-height: 2;

}

.home-progress {

    color:#3B499F;
    font-weight: bold;

}

.slides {

    position: relative;
    z-index: 0;
    
}

.slide {

    position: relative;
    min-height:580px;
    padding:40px;  
    display: none;

}

.slide-content { 

    position: absolute;
    top:20px;
    left:50px;
    right:50px;
    bottom:0;
    z-index: 1;

}

@media only screen and (max-width : 767px) {

    .slide {

        padding:0 20px 20px 20px !important;

    }

    .slide-content { 

        left:20px;
        right:20px;
        position: static;
        height:auto;
        padding:0 0 80px 0;
     
    }

}

.slide-align {

    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    display: flex;
    align-items: center;
    justify-content: center;


}

@media only screen and (max-width : 767px) {

    .slide-align {

        left:20px;
        right:20px;
    
    }

}

@media only screen and (max-width : 1149px) {

    .course {

        min-height: 580px;

    }

    .slide { 

        min-height:575px;
        padding:20px; 
    
    }
    
}

@media only screen and (max-width : 767px) {

    .course {

        min-height: 535px;

    }

    .slide { 

        min-height:530px;
       
    }
    
}

.next-slide, .next-custom {

    width:50px;
    height:50px;
    position: absolute;
    right:14px;
    bottom:16px;
    cursor: pointer;
    background-color: #e9b657;

    background-image: url(images/icon-arrow-forward.svg);
    background-repeat: no-repeat;
    background-size: 25px auto;  
    background-position: center;

    z-index: 1;

    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
    -khtml-border-radius: 5px !important;
    
}

.next-custom {

    display: block;
    right:-35px;
  
}

.prev-slide {

    width:50px;
    height:50px;
    position: absolute;
    bottom:16px;
    left:14px;
    cursor: pointer;
    background-color: #e9b657;
   
    background-image: url(images/icon-arrow-back.svg);
    background-repeat: no-repeat;
    background-size: 25px auto;  
    background-position: center;

    z-index: 1;

    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
    -khtml-border-radius: 5px !important;
   
}

@media only screen and (max-width : 767px) {

    .prev-slide {

        bottom:4px;
        left:4px;

    }

    .next-slide, .next-custom {

        bottom:4px;
        right:4px;

    }

}

.slide h2 {
    
    font-size:27px;
    color:#3B499F;
    margin:0 0 10px 0;

}

@media only screen and (max-width : 991px) {

    .slide h2 { font-size:28px; }

}

@media only screen and (max-width : 767px) {

    .slide h2 { font-size:18px; }

}

.start-screen h2, .end-screen h2 {

    text-align: center;
    padding:0 10px;

}


.slide p {
    
    font-size:16px;
    color:#656565;

}

@media only screen and (max-width : 1199px) {

    .slide p {
    
        font-size:14px;
      
    }

}

@media only screen and (max-width : 768px) {

    .slide p {
    
        font-size:12px;
      
    }

}

.slide ul {

    margin:0 0 15px 20px;
    padding:0;

}

.slide ul li {

    font-size:18px;
    line-height:1.5;
    color:#656565;
    margin:0 0 10px 0;
    padding:0;

}

@media only screen and (max-width : 1149px) {

    .slide ul li {

        font-size:14px;
        margin:0 0 6px 0;

    }

}

@media only screen and (max-width : 767px) {

    .slide ul li { font-size:12px; }

}

.end-screen p {

    line-height: 2;

}

.img-main {

    display: block;
    max-width: 100%;
    
}

.img-main.content-wide {


    max-width:980px;
    margin:15px auto 0 auto;
    display: block;

}

@media only screen and (max-width : 1149px) {

    .img-main.content-wide {

        max-width:100%;

    }
    
}


.audio {

    position: relative;

}

.audio-player {

    position: absolute;
    right:30px;
    bottom:10px;
    z-index: 10;

}

@media only screen and (max-width : 991px) {

    .audio-player {

        right:50px;
        left:50px;
        text-align:center;

    }

}

@media only screen and (max-width : 767px) {

    .audio-player {

        right:60px;
        left:60px;
        bottom:0px;
    
    }

}


@media only screen and (max-width : 450px) {

    audio {

        width:70%;

    }

}

.ff-menus {


    display: inline-block;
    position: relative;
    top:-12px;

}

.ff-menu {

    display: block;
    text-align: center;
    width:40px;
    height:20px;
    vertical-align: top;
    cursor: pointer;
    position: relative;

}


.ff-menu .clicker {

    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;

}


.ff-menu .svg-inline--fa {

    color:#3f3f3f;
    text-align:center;
    margin-left:10px;

    position: relative;
    z-index: 0;

}

.ff-items {

    display: none;
    background-color:#f2f2f2;
    position: absolute;
    left:-100px;
    top:-40px;
    width:110px;
    font-size:11px;
    border:1px solid #CCC;

}

.ff-items.active { display: block; }


.ff-item {

    display: block;
    height:30px;
    padding:10px;

    display: flex;
    align-items: center;

}

.ff-item:hover { background-color:#dbdbdc; }

.ff-sub-items {

    display: none;
    background-color:#f2f2f2;
    position: absolute;
    left:-112px;
   
    width:110px;
    font-size:11px;
    border:1px solid #CCC;
    z-index: 100;

}

.ff-sub-items.ff-lang { top:-1px; }
.ff-sub-items.ff-playback { bottom:-1px; }


.ff-sub-items.active { display: block; }

.ff-sub-item {

    display: block;
    height:15px;
    padding:10px;

    display: flex;
    align-items: center;

}

.ff-sub-item.active,
.ff-sub-item:hover 
{ background-color:#dbdbdc; }

.ff-sub-item .fa-check { display: none; }

.ff-sub-item.active .fa-check { 
    
    display: inline;
    position: relative;
    top:-5px;

}

.video-size {

    max-width:560px;
    margin:0 auto;

}

.video-size.content-wide {

    position: static;
    max-width:880px;
    margin:15px auto 0 auto;
    display: block;

}

@media only screen and (max-width : 1149px) {

    .video-size.content-wide {

        max-width:800px;

    }

}

#home-video {

    max-width:880px;
    margin:15px auto 0 auto;
    display: block;
    position: relative;
    top:100px;
   
}

@media only screen and (max-height : 767px) {

    #home-video {

        top:30px;
       
    }

}

.video-wrapper {

    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;

}

.video-wrapper iframe,
.video-wrapper video
{

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

.video-hidden {
  
    position: absolute;
    top:15px;
    left:15px;
    z-index: -1;
 
}

.video-hidden video {

    position: relative;
    z-index: 0;

}

.video-hidden .v-cover {

    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #FFF;
    z-index: 1;

}

video::-webkit-media-controls-fullscreen-button {
    display: none;
}


/*
::cue {

    color:#FF0000;
    position: absolute !important;
    bottom:50px;

}
*/

.bullet {

    margin-bottom:20px;

}

.img-br {

    position: absolute;
    right:0;
    bottom:70px;

}



.sm-col {  /* For content when there is no main content on right */
    
    width:450px;
    width:45%;

} 

.right-col { 
    
    width:560px;
    width:50%;
    position: absolute;
    top:11%;
    right:0;

 }

 @media only screen and (max-width : 767px) {

    .sm-col { 
    
        width:100%;
        display:block;
    
    } 

    .right-col { 
    
        position:static;
        width:100%;
        display:block;
        margin-bottom:10px;

     }

     .right-col img,
     .right-col video { 

        display:block;
        margin:0 auto;
        max-width:none;
        width:100%;

     }

 }

.img-body {

    max-width: 100%;

}

.questions {
 
    margin-bottom:20px; 

}

.slide p.question {

    color: #3B499F;
    font-size: 20px;
    font-weight:bold;
    
}

ol.answers {

    margin:0 0 0 20px;
    padding:0;
    font-size:15px;


}

ol.answers li {

    margin:0 0 20px 0;
    padding:0;
    position: relative;
   

}

ol.answers li .a {

    position: relative;
    display: inline-block;
    cursor: pointer;
    vertical-align: top;

}

ol.answers li .a-none {

    display: inline-block;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;

}

ol.answers li .response {

    display:inline-block;
    background-color:#F5f5f5;
    border:1px solid #CCC;
    padding:10px 40px 10px 10px;
    margin:10px 0 0 0;
    position: relative;
  
}

ol.answers li .response .svg-inline--fa {

    font-size:20px;
    margin-left:15px;
    position: absolute;
    right:0;
    top:10px;

}

ol.answers li .response .fa-circle-check {

    color:#aef359;

}

ol.answers li .no-response {

    display:inline-block;
    background-color:#F5f5f5;
    border:1px solid #CCC;
    width:25px;
    height:25px;
    position: absolute;
    top:-5px;
    right:-35px;
  
}

ol.answers li .no-response .svg-inline--fa {

    font-size:20px;
    position: absolute;
    left:2px;
    top:3px;

}

ol.answers li .no-response .fa-circle-check {

    color:#aef359;

}

ol.answers li .res { display: none; }
ol.answers li .res .svg-inline--fa { display: none; }

ol.answers li.on .res { display:inline-block; }
ol.answers li.on.correct .res .fa-circle-check { display: block;  }
ol.answers li.on .res .fa-circle-xmark { display: block; }
ol.answers li.on.correct .res .fa-circle-xmark { display: none }

@media only screen and (max-width : 1149px) {

    .slide p.question { font-size: 16px; }

    ol.answers { font-size:13px; }
    
}

@media only screen and (max-width : 767px) {

    .slide p.question { font-size: 14px; }

    ol.answers { font-size:12px; }

    ol.answers li .response { font-size:11px; }
    
}


#admin-nav {

    margin:0;
    padding:0;
    position: fixed;
    bottom:10px;
    left:0;

}

#admin-nav li {

    margin:0;
    padding:0;
    list-style: none;
    display: inline-block;
    padding:10px 0;
    background-color:#666;
    cursor: pointer;
    width:50px;
    text-align: center;
    
}

#admin-nav li svg {

    color:#FFF;
    margin:0;

}

@media only screen and (max-width : 1149px) {

    #admin-nav { bottom:150px; }

}

@media only screen and (max-width : 991px) {

    #admin-nav { 
        
        bottom:0;
    
    }

}

.cs-slides {

    position: relative;
    width: 100%;
    margin:0 auto;
    height:495px;
    display: flex;
    align-items: center;
    justify-content:center;

}

@media only screen and (max-width : 1149px) {

    .cs-slides { height:450px; }

}

@media only screen and (max-width : 767px) {

    .cs-slides { height:250px; }

}

.right-col .cs-slides  {

    height:450px;

}

@media only screen and (max-width : 1149px) {

    .right-col .cs-slides  {

        height:400px;
    
    }

}

@media only screen and (max-width : 767px) {

    .right-col .cs-slides  { height:250px; }

}


.cs-slides img {

    position: absolute;
    max-width: 100%;
    max-height: 100%;
    display: none;

}


.cs-thumbs {display: none; }
.cs-thumbs img {border: none;}

.cs-nav {

    margin:20px 0 0 0 !important;
    padding:0 !important;
    width: 100%;
    text-align: center;
    display: none;
   
}

.cs-nav li {

    margin:0 !important;
    padding:0 !important;
    list-style: none !important;
    display: inline-block;
    background-color: #CCCCCC;
    border-radius: 50%;
    width:8px;
    height:8px;
    cursor: pointer;

}

.cs-nav li.active {

    background-color: #e9b657;

}

#words {

    /*margin-right:250px;*/
    margin-right:30px

}

/*
.word-explain {

    position: absolute;
    top:15px;
    left:340px;
}

*/

.slide #words-list {

    margin:20px 0 0 10px;
    padding:0;
    display:grid;
    grid-template-columns: 16% 16% 16% 16% 16% 16%;
    grid-gap:1%;
    position: relative;

}



.slide #words-list li {

    margin:0 0 2px 0;
    padding:0 7px;
    background-color:#f5f5f5;
    height:22px;
    list-style: none;
    border:1px solid #CCC;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.7;
    white-space:nowrap;
    
}

.slide #words-list li.active {

    background-color:#e9b657;
    border:1px solid #e9b657;
    color:#FFF;

    /*
    background-image: url(images/check-solid.svg);
    background-repeat: no-repeat;
    background-size: 16px; 
    background-position: 99% center; 
    */

    
}

@media only screen and (max-width : 1149px) {

    .slide #words-list {

        margin:10px 0 0 10px;

    }

    .slide #words-list li {

        margin:0 0 2px 0;
        padding:0 4px;
        font-size: 12px;
        height:20px;
    }
    

}

@media only screen and (max-width : 991px) {

    #words {

        margin-right:10px;

    }


    .slide #words-list li { font-size: 11px; }
    .slide #words-list li.sm-v { font-size: 9px; padding-top:2px; box-sizing: border-box; }
    
}

@media only screen and (max-width : 767px) {

    #words {

        margin-right:0;
  

    }

    .slide #words-list {
        
        display: block;
        margin:10px 0 20px 0;

    }

    .slide #words-list li { font-size: 11px; margin-bottom:5px; }
    .slide #words-list li.sm-v { font-size: 11px; padding-top:0px; box-sizing: border-box; }
    
  
    
}


.slide #word-col {

    margin:0;
    padding:0;
    border:1px solid #FF0000;
    position: absolute;
    top:0;
    right:-25px;
    bottom:20px;    
    width:220px;

}

.slide #word-col li {

    margin:0;
    padding:0 7px;
    background-color:#f5f5f5;
    width:200px;
    height:30px;
    list-style: none;
    border:1px solid #CCC;
    cursor: pointer;

}

#words-num {

    position: absolute;
    top:15px;
    right:0px;
    font-size:18px;
    color: #3B499F;

}

@media only screen and (max-width : 767px) {
    

    #words-num {

        top:5px;
        right:20px;
    
    }
    
}

#saved-values,
#saved-values-2,
#leading-values,
#leading-values-2
{

    display: none;

}

#words-error {

    position: absolute;
    bottom:80px;
    right:30px;
    color:#FF0000;

}

@media only screen and (max-width : 767px) {

    #words-error {

        bottom:95px;

    }
    
}

#word-align{

    display: block;
    overflow:hidden;
    overflow-x: auto;
    position: relative;
    height:525px;
    width: 100%;
    left:0;
    right:0;

}

#word-choices {

    text-align: center;

}

.word {

    margin-top:30px;
    text-align: center;
    
}

.word .term, .stat-word {

    margin:0;
    padding:5px 12px;
    background-color:#f5f5f5;
    background-color: #e9b657;
    min-width:300px;
    list-style: none;
    border:1px solid #CCC;
    border:1px solid #e9b657;
    cursor: pointer;
    font-size: 22px;
    line-height: 1.7;
    color:#FFF;
    display: inline-block;

}

.stat-word {

    display: block;
    width:300px;
    margin:0 auto 15px auto;

}

.dash {

    display: inline-block;
    margin:0 40px;

}

.term-explanation {

    margin-bottom:40px;

}

#bracket-logo {

    display: block;

    width:200px;
    height:101px;
    position: absolute;
    top:50%;
    left:50%;
    margin:-175px 0 0 -100px;

}


#bracket {

    width:1000px;
    height:600px;
    background-image: url(images/bracket-sm.png);
    background-repeat: no-repeat;
    background-size: 100% auto;  
    background-position: center;
    position: relative;
    margin:0 auto;
    top:-30px;
    
}

#bracket-text {

    position: absolute;
    top:0;
    left:0;
    right:0;
    text-align: center;

}

#bracket-reset {

    background-color:#8C1F20;
    color:#FFF;
    display: block;
    padding:7px 12px;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -khtml-border-radius: 5px; 

    width:70px;
    position: absolute;
    bottom:25px;
    left:35px;

    text-align: center;

    cursor: pointer;
    z-index: 1;
    display: none;
    

}

@media only screen and (max-width : 767px) {

    #bracket-text {

        left:85px;
        right:85px;
        font-size:11px;
     
    }

    #bracket-reset {

        bottom:65px;
        left:25px;
        
    }

}

.b-item {

    width:100px;
    height:24.5px;
    color:#FFFFFF;
    background-color: #e9b657;
    text-align: center;
    position: absolute;
    padding:0 5px;
    cursor: pointer;
    font-size:12px;
    display: flex;
    align-items: center;
    justify-content:center;
    
}

.b-item:nth-child(1) { top:60px; left:0px }
.b-item:nth-child(2) { top:122px; left:0px }
.b-item:nth-child(3) { top:192px; left:0px }
.b-item:nth-child(4) { top:252px; left:0px }
.b-item:nth-child(5) { top:322px; left:0px }
.b-item:nth-child(6) { top:382px; left:0px }
.b-item:nth-child(7) { top:452px; left:0px }
.b-item:nth-child(8) { top:511px; left:0px }

.b-item:nth-child(9) { top:60px; right:0px }
.b-item:nth-child(10) { top:122px; right:0px }
.b-item:nth-child(11) { top:192px; right:0px }
.b-item:nth-child(12) { top:252px; right:0px }
.b-item:nth-child(13) { top:322px; right:0px }
.b-item:nth-child(14) { top:382px; right:0px }
.b-item:nth-child(15) { top:452px; right:0px }
.b-item:nth-child(16) { top:511px; right:0px }

.b-item:nth-child(17) { top:93px; left:129px }
.b-item:nth-child(18) { top:223px; left:129px}
.b-item:nth-child(19) { top:355px; left:129px }
.b-item:nth-child(20) { top:485px; left:129px }

.b-item:nth-child(21) { top:93px; right:129px }
.b-item:nth-child(22) { top:223px; right:129px}
.b-item:nth-child(23) { top:355px; right:129px }
.b-item:nth-child(24) { top:485px; right:129px }

.b-item:nth-child(25) { top:159px; left:253px }
.b-item:nth-child(26) { top:420px; left:253px }

.b-item:nth-child(27) { top:159px; right:253px }
.b-item:nth-child(28) { top:420px; right:253px }

.b-item:nth-child(29) { top:288px; left:375px }
.b-item:nth-child(30) { top:288px; right:375px }


.b-final {

    position: absolute;
    width:230px; 
    top:260px;
    left:50%;
    margin-left:-115px;
    box-sizing: border-box;
    display: none;
    text-align: center;
    z-index: 0;

}

.final-text {

    position: absolute;
    width:230px; 
    top:375px;
    left:50%;
    margin-left:-115px;
    box-sizing: border-box;
    text-align: center;
    display: none;
    z-index: 1;

}

.b-width {

    width:100%;

}

.red-bg-final {

    background-color:#8C1F20;
    font-size:18px;
    padding:30px 14px;
    color:#FFF;
}

#print-bracket {

    display: block;
    margin-top:15px;
    cursor: pointer;
    text-decoration: underline;

}

.values-link {

    margin-top:7px;
    display: block;

}

.grid-imgs {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:0 auto;

}

/*240 - image width */

.grid-img {

    width: 25%;
    flex: 0 0 calc(25%);
    margin-bottom:20px
  
}

.grid-imgs.grid-md {

    width:800px;
 
}

.grid-imgs.grid-md .grid-img {

    width: 33.3333%;
    flex: 0 0 calc(33.3333%);
  
}

.grid-imgs.grid-sm {

    max-width:560px;
 
}

.grid-imgs.grid-sm .grid-img {

    width: 50%;
    flex: 0 0 calc(50%);
  
}

.grid-img img {

    max-width: 90%;
    margin:0 auto;
    display: block;

}

@media only screen and (max-width : 599px) {

    .grid-imgs {

        max-width:250px;

    }

    .grid-img {

        width: 50%;
        flex: 0 0 calc(50%);
        margin-bottom:5px;

    }
    
}

.fade { opacity: 0; }


#notes {

    width:  320px;
    position: absolute;
    top:  85px;
    bottom:20px;
    right:0;
    background-color:#FFFFFF;
   
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;

    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;

    display: none;
    z-index: 2;
    overflow: hidden;
}

#notes-pad {

    padding:15px;
    display: none;

}

#notes.on {

    display: block;
    
}

@media only screen and (max-width : 767px) {

    #notes {

        width:100%;
        top:71px;
        bottom:0;

        -moz-border-radius-topleft: 0px;
        -webkit-border-top-left-radius: 0px;
    
        -moz-border-radius-bottomleft: 0px;
        -webkit-border-bottom-left-radius: 0px;

    }

}

#bookmarks-pad {

    /*
    padding:15px;
    display: none;
    */

    position: absolute;
    left:15px;
    top:60px;
    bottom:10px;
    right:5px;
    overflow: hidden;
    overflow-y:auto;
    padding-right:10px;
    display: none;

}

#side-tabs {


}

#note-mod-title {

    display: block;
    color:#8C1F20;
    color:#3B499F;
    margin: 0 30px 10px 0;
    font-weight: bold;
    background-color:#f5f5f5;
    padding:8px 10px 8px 10px;
   
    position: absolute;
    top:0;
    left:0;
    right:0;

  

    /*
     border:1px solid #CCC;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -khtml-border-radius: 5px; 
    */

}

#notes-scroll {

    position: absolute;
    left:15px;
    top:60px;
    bottom:40px;
    right:5px;
    overflow: hidden;
    overflow-y:auto;
    padding-right:10px;

}

#notes.active #notes-scroll {

    bottom:140px;

}

.note-title {

    display: block;
    color:#3B499F;
    margin-bottom:10px;
    font-weight: bold;

}

.note {

    position: relative;

}

.bookmark-title {

    display: block;
    color:#3B499F;
    margin-bottom:10px;
    font-weight: bold;
 
}

.bookmark-line {

    display: block;
    color:#3B499F;
    margin-bottom:10px;
    text-decoration: underline;
    font-size:12px;
    cursor: pointer;

}

@media only screen and (max-width : 767px) {

    .bookmark-line {
   
        font-size:11px;

    }

}

#side-tabs {

    margin:0;
    padding:0;
    width:88%;

}

#side-tabs li {

    margin:0;
    padding:0;
    width:48%;
    height:32px;
    display: inline-block;
    background-color: #e5e5e5;
    color: #3B499F;
    font-weight: bold;
    text-align: center;
    padding-top:7px;
    box-sizing: border-box;
    cursor: pointer;

}

#side-tabs li.active {

    background-color:#e9b657;
    color:#FFF;

}



.comment {

    border:1px solid #CCCCCC;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -khtml-border-radius: 5px; 
    margin-bottom:10px;
    padding:15px;
    font-size:12px;
    line-height: 1.3;
    position: relative;

}

.edit-comment {

    border:1px solid #CCCCCC;
    background-color: #f5f5f5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -khtml-border-radius: 5px; 
    outline:none;
    padding:8px;
    min-height: 80px;
    font-size:12px;
    line-height: 1.3;
    font-family: 'Montserrat', sans-serif;
    z-index: 0;
    width:94%;
    margin-bottom:10px;
   
}

@media only screen and (max-width : 767px) {

    .comment {

        font-size:11px;

    }

}

.e-buttons{

    text-align: right;
    margin-bottom:20px;

}

.e-buttons a {

    margin:0 0 0 7px;
   
}


.notes-bottom, .notes-bottom-active {

    position: absolute;
    bottom:0;
    left:0;
    right:0;

}

.notes-bottom-active {

    height:140px;
    display: none;

}


#notes.active .notes-bottom { display: none; }
#notes.active .notes-bottom-active { display: block; overflow: hidden; }


.notes-bottom-active textarea {

    border:1px solid #CCCCCC;
    background-color: #f5f5f5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -khtml-border-radius: 5px; 
    position: absolute;
    left:15px;
    top:15px;
    right:15px;
    bottom:40px;
    outline:none;
    padding:8px;
    font-size:12px;
    line-height: 1.3;
    font-family: 'Montserrat', sans-serif;
    z-index: 0;
  
}

@media only screen and (max-width : 767px) {

    .notes-bottom-active textarea {

        font-size:11px;

    }

}


.notes-bottom-active #close-bottom {

    color:#e9b657;
    width:15px;
    height:15px;
    position: absolute;
    top:7px;
    right:10px;
    cursor: pointer;
    font-size:25px;
    line-height: 1;
    background-color: #FFFFFF;

}

.notes-bottom-active #close-bottom svg {

    position: relative;
    top:-5px;
    left:-5px;

}


#add-note, #save-note {

    position: absolute;
    right:15px;
    bottom:6px;

}

#save-yn {

    position: absolute;
    font-size:12px;
    bottom:6px;
    left:12px;
    display: none;

}

#yes-note {

    background-color: #e5e5e5 !important;
    border:1px solid #e5e5e5 !important;
    color:#333 !important;

}

#notes-close
{

    color:#FFF;
    width:35px;
    height:35px;
    position: absolute;
    top:0;
    right:0;
    cursor: pointer;
    font-size:20px;
    line-height: 1;
    background-color: #e9b657;
    cursor: pointer;
    display: none;
    z-index: 1;

}


#notes-close {
    
    width:32px;
    height:32px;
    display: block;
    text-align: center;
    font-size:24px;

    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px; 


}

#notes-close svg{

    color:#FFF;
    position: absolute;
    left:8px;
    top:4px;

}

#top-icons {

    margin:0;
    padding:0;
    position: absolute;
    top:7px;
    right:10px;
    z-index: 1;
    display: none;

}

#top-icons li {

    margin:0 0 0 3px;
    padding:0;
    list-style: none;
    width:35px;
    height:35px;
    background-color: #e5e5e5;
    color:#CCC;
    font-size:20px;
    cursor: pointer;
    display: inline-block;
    position: relative;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -khtml-border-radius: 5px; 

}

#top-icons li svg {

    color:#FFF;
    position: absolute;
    left:10px;
    top:8px;

}

#top-icons li#notes-toggle,
#top-icons li.active
{ 

    background-color: #e9b657;
    color:#FFF;

}

#top-icons li#notes-toggle svg { 

    left:8px;
    top:7px;
  
}


#top-icons li#side-toggle svg { transform: rotate(180deg); }
#top-icons li#side-toggle.active svg { transform: rotate(0);  left:7px; }


@media only screen and (max-width : 767px) {

    #top-icons {

        right:10px;
    
    }

    #top-icons li {

        width: 30px;
        height: 30px;
        font-size: 14px;

    }

}

.delete-comment {

    color:#e9b657;
    width:13px;
    height:13px;
    position: absolute;
    top:-8px;
    right:8px;
    cursor: pointer;
    font-size:27px;
    line-height: 1;
    background-color: #FFFFFF;
    display: none;

}

.delete-comment .fa-times-circle {

    position: absolute;
    top:-5px;
    left:-5px;

}

.c-edit {

    width: 26px;
    height: 26px;
    border-radius: 50%;
    position: absolute;
    top:-8px;
    right:27px;
    background-color:#e9b657;
    cursor: pointer;
    display: none;
 
}

.note.on .c-edit {

    display: none !important;

}

.c-edit .fa-pen {

    color: #FFF;
    font-size:13px;
    position: relative;
    top:3px;
    right:-6px;

}

.note:hover .c-edit,
.note:hover .delete-comment {

    display: block;

}

.status {

    position: absolute;
    left:30px;
    bottom:30px;
    color: #3B499F;
    font-weight: bold;

}

@media only screen and (max-width : 767px) {

    .status {

        left:20px;
        bottom:auto;
        top:15px;
      
    }

}

#resources {

    padding:40px 100px;
    position: relative;

}

#resources h2 {

   margin:0;
   text-transform:lowercase;
   text-transform: capitalize;

}

@media only screen and (max-width : 1149px) {

    #resources { padding:20px 50px; }

}

.captions{

    position: absolute;
    bottom:0px;
    right:340px;
    width:600px;
    min-height: 30px;
    color:#333333;
    font-size:16px;
    text-align: center;
    z-index: 0;
 
}

.captions.ffc{

    width:610px;
    right:350px;

}

@media only screen and (max-width : 1149px) {

    .captions {  
        
        width:475px;
        font-size:14px; 
    
    }

    .captions.ffc{

        width:455px;
    
    }

}

@media only screen and (max-width : 991px) {

    .captions{

        width:auto;
        bottom:60px;
        right:-50px;
        left:-50px;
   
    }

}

@media only screen and (max-width : 767px) {

    .captions{

        font-size:11px;
        
    }

    .v-captions {

        right:0px;
        left:0px;
   

    }

}

#copyright {

    color:#FFF;
    text-align: center;
    margin-top:10px;

}

#copyright a {

    color:#FFF;

}

@media only screen and (max-width : 1149px) {

    #copyright { font-size: 13px;  }

}

@media only screen and (max-width : 1024px) {

    #copyright { font-size: 12px;  }

}

@media only screen and (max-width : 991px) {

    #carr { display: block; margin-bottom:7px;  }
    #first-pipe {display: none;}

}

@media only screen and (max-width : 767px) {

    #copyright { 
        
        padding:0 10px; 
        line-height:18px; 
        font-size: 11px;
    
    }

    #copyright a {white-space: nowrap;}

}
 
#holder.full-holder #copyright {

    position: absolute;
    bottom:-5px;
    left:0;
    right:0;

}
   
   
.generic h1 { margin:0 0 20px 0; }

.generic p { 
    
    margin:0 0 20px 0;
    line-height: 2;

}

#eeoc {

    padding: 40px;
    margin: 0 auto;
    position: relative;
    min-height: 500px;

}

#eeoc .form-row {

    display: block;
    margin-bottom:40px;

}

#eeoc .likert-group .form-row {

    margin:0px !important;

}

.skip-top {

    position: absolute;
    top:40px;
    right:40px;
    text-decoration:none;
   
}

.skip-bottom {

    display: block;
    width:200px;
    margin:20px auto 0 auto;

}



@media only screen and (max-width : 767px) {

    #eeoc {

        padding: 30px 20px 20px 20px;
    }
    
    #eeoc .form-row {
  
        margin-bottom:20px;
    
    }

    .skip-top {

        top:7px;
        right:20px;
       
    }


}

.likert-group {

    margin:0 0 40px 0;

}

.scale {

    margin:30px 0 0 0;

}

.likert-group .scale {

    margin:0 0 10px 0;

}

.likert {

    font-weight: bold;
    margin:15px 0;

}

.r-holder-outer {

}

.r-holder-outer-label {

    margin-bottom:15px;

}

.r-holder {

    padding:0 30px;
    display: inline-block;
    text-align: center;
}

.r-holder input {

    margin-bottom:10px;

}

.r-holder-outer .r-holder {

    margin-bottom:20px;

}

.c-holder {

    font-size:16px;
    margin-bottom:7px;

}

.option-group-label {

    margin:15px 0 20px 0;
    font-size: 16px;
    font-weight: 600;

}

.option-group-label-level-2 {

    margin:15px 0 20px 0;
    font-size: 16px;
    font-weight: 400;

}

.option-group {

    margin:0 0 20px 20px;

}

@media only screen and (max-width : 767px) {

    .r-holder { padding:0 10px; }

    .score-holder .r-holder { padding:0 0px; }

    .c-holder { font-size:11px; }

}

.score-holder {

    display: inline-block;
    position: relative;

}

.score-caption {

    margin-top:20px;
    position: relative;
    font-weight: bold;

}

.strongly {

    position: absolute;
    right:0;

}

#report { padding:40px; min-height: 500px; }
#report-text { text-align: center; }

#export { padding:40px; min-height: 500px; }


#report .form-row {

    display: block;
    margin-bottom: 40px;

}

#report .form-row textarea {

    height:400px;

}

#report .r-label { display: inline; }

#report-ty { display:none; }


.custom-reports .report-row {

    display:grid;
    grid-template-columns: 47% 2% 47% 2%;
    grid-gap:1%;
    margin-bottom:20px;
    
}

.report-row .report-equals { text-align: center; }

.report-row .report-remove { 

    position: relative; 

}

.report-row .report-remove .fa-x { 
    
    position: relative; 
    z-index: 0;  

}

.report-row .report-remove-c { 

    position: absolute; 
    width:100%;
    height:100%;
    z-index: 1;
    cursor: pointer;

 }

.custom-reports select {

    width: 100%;

}

#add_custom_field, #run_custom_report {

    padding:7px;
    min-width: 120px;

}


#disclaimer { font-size:12px; }

@media only screen and (max-width : 991px) {

    #disclaimer { font-size:11px; }

}

@media only screen and (max-width : 767px) {

    #disclaimer { padding:0 20px 30px 20px; }

}


.socials {

    position: relative;
    height:0;
    overflow: hidden;
    background-color:#FFF;
    box-sizing: border-box;

}

.socials.active {
    
    padding-top:50px;
    height:auto;


}

#end-slide .socials {

    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index: 3;

 
}

#end-slide .socials.active  {

    padding:50px 15px 30px 15px;
    min-height: 100%;

}

.socials .close-socials {

    position: absolute;
    width: 50px;
    height: 50px;
    right: 0;
    top: 0px;
    font-size: 30px;
    text-align: center;
    padding-top: 7px;
    box-sizing: border-box;
    cursor: pointer;
  

}

.socials .close-socials .clicker {

    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
}

.socials .close-socials svg { color:#000; }

.a-tweet {

    position: relative;
    background-color:#1d9bf0;
    color:#FFF;
    padding:30px 160px 30px 100px;

    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -khtml-border-radius: 20px;

    margin-bottom:20px;

}

.a-tweet p {

    color:#FFF;

}

.a-tweet svg {

    font-size:50px;
    position: absolute;
    left:30px;
    top:40px;
    color:#FFF;

}

.a-tweet .a-tweet-button {

    position: absolute;
    right:30px;
    top:50%;
    margin-top:-15px;
    border:2px solid #FFF;
    color:#FFF;
    padding:10px;
    font-size:14px;
    font-weight: bold;
    width:80px;
    text-align: center;
    text-decoration: none;

}

.button.social-share-button {

    background-color: #1d9bf0 !important;
    border:1px solid #1d9bf0 !important;

}

.a-tweet.a-linked {

    background-color:#225ab6;

}

.a-tweet.a-facebook {

    background-color:#4267B2;

}

#share-text {

    display: none;

}

.text-copied {

    position: absolute;
    right:30px;
    bottom:20px;
    display: none;

}

.print-button {

    display: inline-block;
    margin:0 auto;
    background-color: #e9b657 !important;
    border:1px solid #e9b657 !important;
    -moz-border-radius: 30px !important;
    -webkit-border-radius: 30px !important;
    border-radius: 30px !important;
    -khtml-border-radius: 30px !important;
    color:#FFF !important;
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    padding:12px 20px;
    cursor: pointer;
    text-align: center;

    position:absolute;
    right:10px;
    top:10px;
    z-index: 10;

}

@media only screen and (max-width : 767px) {

    .a-tweet {

        padding:100px 30px 30px 30px;

    }

    .a-tweet svg {

        font-size:50px;
        left:50%;
        margin-left:-25px;
    
    }
    
    .a-tweet .a-tweet-button {
    
        position: static;
        width:80px;
        margin:20px auto 0 auto;
        display: block;
    
    }

}

.toggles {


}

.toggle {

    margin-bottom: 30px; 
    background-color:#f5f5f5;
    border:1px solid #CCC;
    padding:30px;
    position: relative;

}

.toggle-content { display: none; }
.toggle.active .toggle-content { display: block; }

.toggle-top { 
    
    cursor: pointer;
    position: relative;

}

.toggle-top h2 { margin:0; }

.toggle-top .svg-inline--fa {

    position: absolute;
    top:0;
    right:-25px;
    color:#3B499F;
    font-size:30px;

}

.toggle .svg-inline--fa.fa-chevron-down {

    font-size:26px;

}

.toggle .fa-xmark { display: none; }
.toggle.active .fa-xmark { display: block; }

.toggle.active .fa-chevron-down { display: none; }


#mobile-nav,
#mobile-button { display: none; }
.mobile-col { display: none; }

@media only screen and (max-width : 991px) {

    #left-nav,
    #right-nav {

        display: none;
    }
    
    #mobile-button { 
        
        display: block;
        position: absolute;
        top:10px;
        right:10px;
        width:50px;
        height:50px;
        text-align: center;
        font-size: 30px;

    }

    #mobile-button .fa-bars { 

        position: relative;
        z-index: 0;
        top:5px;
        left:5px;

    }

    #mobile-button #mobile-press { 

        top:0;
        left:0;
        right:0;
        bottom:0;
        position: absolute;
        z-index: 1;
        cursor: pointer;

    }

	#mobile-nav { 
        
        background-color:#F5f5f5;
        margin:0;
        padding:0;
        position: absolute;
        top:70px;
        left:0;
        width:100%;
    
    }

    #mobile-nav li {
        
        list-style: none;  
        margin:0;
        padding:0;

    }

    #mobile-nav li a {

        display: block;
        padding:10px 25px;
        text-decoration: none;
        border-top:1px solid #CCC;

    }

    #mobile-nav li:last-child a {
        
        border-bottom:1px solid #CCC;

    }

    #header.mobile-nav-on #mobile-nav {

        display: block;

    }

    .container {

        min-width:auto;
    
    }

  
}

@media only screen and (max-width : 767px) {

    body {

        font-size:12px;

    }
    
    h1 { font-size:18px !important; }
    h2 { font-size:14px; }

    /* Welcome */

    #welcome {

        padding: 0;

    }

    #home-logged-in {padding:20px;}

    #home-logo { max-width: 100%; }

    /*  Courses */
    
    .courses-row-header {

        display: none !important; 

    }

    .mobile-col { 
        
        display: inline-block;
        width:150px;
        font-weight: bold;
        color: #656565;
    
    }

    .courses-grid .course-row {

        display: block;

    }

    .course-col {

        display: block;
        margin-bottom:10px;

    }

    .courses-grid .course-col { text-align: left; }

    /* Glossary */


    #resources {

        padding: 10px 15px;

    }

    .toggle {

        margin-bottom: 15px;
        padding:20px 30px 20px 15px;

    }

    .toggle .svg-inline--fa.fa-chevron-down,
    .toggle.active .fa-xmark {

        font-size: 18px;

    }

    /* Forms */

    .form-row {

        display: block;
        margin:0;

    }

    .form-row .field {

        margin:0 0 20px 0;

    }


    #edit-profile,
    #edit-password,
    .login-pad {

        padding: 10px 15px;

    }

    #get-started {

        display: block;

    }

    #get-started .gs {

        height:auto;

    }

    #login,
    #loginform {

        width: 100%;

    }

    #loginform input[type=text], #loginform input[type=email], #loginform input[type=password] {

        width: 100%;

    }

    .container {

        max-width:none;
        padding:0;
    
    }

    #mobile-nav li a {

        font-size:12px;

    }

    
}

@media only screen and (max-width : 499px) {

    #logo {

        max-width: 200px;
        padding-top:5px;

    }

    #home-logo { max-width: 200px; }


}

#breadcrumbs {

    width:87%;
    height:70px;
    color:#7D7D7D;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    display: none;

}

#breadcrumbs #b-mod {

    text-transform: uppercase;
    cursor: pointer;

}

#breadcrumbs.active #b-mod .fa-caret-down { display: none; }
#breadcrumbs #b-mod .fa-caret-up { display: none; }
#breadcrumbs.active #b-mod .fa-caret-up { display: inline; }



#breadcrumbs #b-lesson {

    color:#e9b657;
    text-transform: uppercase;

}

#breadcrumbs #b-pipe {

    margin:0 10px;
    display: inline-block;

}

#breadcrumbs #b-nums {

    display: inline-block;
    margin-left:20px;

}

#breadcrumbs .b-nums {

    display: inline-block;

}

#breadcrumbs .b-num {

    display: inline-block;
    border-radius: 50%;
    background-color: #e5e5e5;
    font-weight: bold;
    width:23px;
    height:23px;
    padding:2px 0 0 0;
    color:#FFF;
    text-align: center;
    box-sizing: border-box;
    font-weight: 600;

}

#breadcrumbs .b-nums.on .b-num {

    background-color: #e9b657;

}

#breadcrumbs .b-nums.done .b-num {

    background-color: #e9b657;

}

#breadcrumbs .b-line {

    display: inline-block;
    width:35px;
    height:3px;
    background-color: #e5e5e5;
    position: relative;
    top:-2px;

}

@media only screen and (max-width : 1199px) {

    #breadcrumbs .b-line { width:30px; }

}

@media only screen and (max-width : 1099px) {

    #breadcrumbs .b-line { width:23px; }

}

@media only screen and (max-width : 991px) {

    #breadcrumbs #b-nums { display:none; }

}

@media only screen and (max-width : 767px) {

    #breadcrumbs {
        
        width:60%;
        height:40px;
    
    }

}


#breadcrumbs .b-nums.on .b-color {

    position: relative;
    height:100%;
    background-color: #e9b657;

}

#breadcrumbs .b-nums.done .b-color {

    position: relative;
    width:100% !important;
    height:100%;
    background-color: #e9b657;

}

#breadcrumbs .b-check {

    display: inline-block;
    border-radius: 50%;
    background-color: #e5e5e5;
    font-weight: bold;
    width:23px;
    height:23px;
    padding:3px 0 0 0;
    text-align: center;
    box-sizing: border-box;


}

#breadcrumbs .b-check svg {

    font-weight: bold;
    font-size:17px;
    color:#FFF;
    text-align: center;
    margin:0 auto;

}


#b-nums.done .b-check { background-color: #6EAE51; }

#b-nums.done .b-color {     
    
    position: relative;
    width:100% !important;
    height:100%;
    background-color: #e9b657; 

}

#b-nums.done .b-num { background-color: #e9b657 !important; }

#b-list {

    display: none;
    width:400px;
    position: absolute;
    left:50px;
    top:50px;
    z-index: 1;
    background-color:#F2F2F2;
    padding:10px 0;
    box-sizing: border-box;
    max-height: 525px;
    overflow-y:scroll;
  
}

#b-list span {

    display: block;
    font-size:12px;
    padding:5px 20px;
    color:#CCC;

}

#b-list span.on { color: #656565; cursor: pointer; }
#b-list span.active { color: #3B499F; }

#breadcrumbs.active #b-list {

    display: block;

}

#b-list .b-close {

    position: absolute;
    right:0;
    top:10px;
    font-size:20px;
    cursor: pointer;

}

@media only screen and (max-width : 767px) {


    #b-list {

        width:100%;
        left:0;
        top:40px;

    }


}

.lb {

    background: rgba(0,0,0,0.5);
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 101;
    padding:20px;
    box-sizing: border-box;
    display: none;

}

.lb-close {

    font-size:30px;
    position: absolute;
    top:-35px;
    right:0;
    color:#FFF;
    cursor: pointer;

}

.lb-close svg {

    color:#FFF;

}

.lb-close .lb-clicker {

    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;

}

.flex-404 {

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;

}


/*
For Tipa 2.0  
*/

.status {

    left: auto;
    bottom: auto;
    top:-52px;
    right:50px;
    color:#7D7D7D;
    font-weight: 500;

}

@media only screen and (max-width : 767px) {

    .status {

        top:-25px;
        right:90px;

    }

}

.slide-content {

    top:0;

}

.report-error {

    color:#FF0000;

}

.print-r {

    display: inline-block;
    margin:0 auto;
    background-color: #e9b657 !important;
    border:1px solid #e9b657 !important;
    -moz-border-radius: 30px !important;
    -webkit-border-radius: 30px !important;
    border-radius: 30px !important;
    -khtml-border-radius: 30px !important;
    color:#FFF !important;
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    padding:12px 20px;
    cursor: pointer;
    text-align: center;

    position:absolute;
    right:10px;
    top:10px;

}

#print-div {

    display: none;

}

@media print {

    .template-resources #bg { display: none; }
    .template-resources #header { display: none; }
    .template-resources #holder { display: none; }

    #print-div {display:block;}

    .print-title {

        font-size:18px;
        font-weight: bold;
        color:#3B499F;

    }
 
}

#about {

    padding:40px 50px;

}

#about h1 {

    margin:0 0 15px 0;
    font-size: 30px;

}

#about-col {

    display:grid;
    grid-template-columns: 49% 49%;
    grid-gap:2%;
    border-bottom:1px solid #CDCDCD;
    padding-bottom:30px;
    margin-bottom:30px;

}

#about-text {

    display: flex;
    align-items: center;
    justify-content: center;

}

#about-text p {

    line-height: 1.5;

}


#creators {

    border-bottom:1px solid #CDCDCD;
    padding-bottom:30px;
    margin-bottom:40px;

}

.creator {

    position: relative;
    padding-left:200px;
    min-height: 180px;
    margin-bottom:20px;

}

.creator .creator-img {

    position: absolute;
    left:0;
    top:0;
    width: 156px;

}


#inventors {

    margin:40px 0;
    display:grid;
    grid-template-columns: 49% 49%;
    grid-gap:2%;

}

.inventor {

    position: relative;
    padding-left:136px;
    min-height: 130px;
    margin-bottom:20px;

}

.inventor .inventor-img {

    position: absolute;
    left:0;
    top:0;
    width: 108px;

}


.creator h3,
.inventor h3 { margin:0 0 5px 0; }

.inventor h4,
.creator h4 {

    margin:0;
    font-weight: normal;
    font-style: italic;
    
}

.inventor p,
.creator p { line-height: 1.5; }

@media only screen and (max-width : 991px) {

    #inventors {

        display:block;

    }

}

@media only screen and (max-width : 767px) {

    #about-col {

        display:block;
      
    }

    .creator,
    .inventor {

        padding-left:0;

    }

    .creator .creator-img,
    .inventor .inventor-img {

        position: static;
        width: 108px;
        margin:0 auto 20px auto;
        display: block;
    
    }

    #about {

        padding:30px 20px;
    
    }


}

#default {

    padding:40px 100px;
    position: relative;
    min-height: 500px;

}


#cookie-pop {

    background-color: #3B499F;
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    padding:20px 30px 15px 30px;
    z-index: 100;
    color:#FFF;
    display: none;
    min-height:80px;

}

#cookie-pop h6 {

    color:#FFF;
    font-size:20px;
    margin:0;

}

#cookie-pop p { margin: 0; }

#cookie-pop a {

    color:#FFF;
    text-decoration: underline;

}

#cookie-pop #close-pop {

    position: absolute;
    top:15px;
    right:20px;
    cursor: pointer;

}

#cookie-pop #close-pop #close-pop-clicker {

    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    z-index: 1;

}

#cookie-pop #close-pop .fa-xmark {

    font-size: 20px;
    color:#FFF;
    position: relative;
    z-index: 0;

}

#cookie-pop .cookie-button {

    display: block;
    border:2px solid #FFF;
    padding:8px;
    width:100px;
    text-align:center;
    text-decoration: none;
    position: absolute;
    right:100px;
    top:40px;
    font-weight: bold;

}


#cookie-pop #reject-cookies {

    right:230px;
  
}

.fa-arrow-rotate-right {

    cursor: pointer;

}


#webinars-outer {

    padding:30px;

}

.webinar {

    cursor: pointer;
    width: 33.33333%;
    display: inline-block;
    margin: 0 0 30px -4px;
    text-align: left;
    vertical-align: top;

}

.webinar .v { 
    
    margin:0 10px;   

}

.webinar .v-img {

    position: relative;

}

.webinar .v img { 
    
    width: 100%;
    position: relative;
    z-index: 0; 

}

.webinar .v svg { 

    color:#FFF;
    font-size:80px;
    z-index: 1;
    position: absolute;
    left:50%;
    top:50%;
    margin:-40px 0 0 -40px;
    opacity: .70;

}

.webinar .vd {display: none;}

.webinar h3 {

    color:#FFF;
    font-size:16px;

}

#video-pop {

    max-width: 800px;
    margin:0 auto 30px auto;
    position: relative;

}

.videoWrapper {

    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;

}

.videoWrapper iframe {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
}


#video-pop p { color:#FFF; }

.past-event-videos #video-pop p { color: #6C818C; }
.past-event-videos h3 { color: #6C818C; }


#video-pop .v-close { 
    
    color:#FFF;
    position: absolute;
    top:-5px;
    right:-30px;
    font-size:30px;
    cursor: pointer;

}

#video-pop .v-close .svg-inline--fa { 
    
    color:#3B499F;
    font-size:30px;
    position:relative;
    z-index: 0;
  
}

#video-pop .v-close .clicker { 

    position:absolute;
    z-index: 1;
    top:0;
    left:0;
    right:0;
    bottom:0;
  
}

@media only screen and (max-width : 991px) {

    #video-pop { max-width: 85%; }

}

@media only screen and (max-width : 799px) {

    #videos-outer {

        padding:20px 0;
    
    }

    .webinar { 
        
        width: 50%; 
    
    }

}

@media only screen and (max-width : 499px) {

    .webinar { 
        
        width: 100%;
        margin-bottom:0;
    
    }

}