:root {
    --tf-darkest:   rgb(10, 0, 30);
    --tf-dark:   rgb(25, 0, 75);
    --tf-mid:    rgb(50, 0, 150); 

    --tf-darkest:   rgb(0, 0, 0);
    --tf-dark:   rgb(50,54,67);
    --tf-mid:    rgb(96,100,112); 
    --tf-light:  rgb(247,247,247);
    --tf-accent: rgb(255,87,12);

    --tf-background: #111;
    --tf-text: rgb(247,247,247);
    --tf-highlight: rgb(234,81,11);
    --tf-separator: rgb(96,100,112);
    --tf-action: rgb(10,204,97);
}

/* ------------------------------------------------------------------------- */
/* ROOT */
body {
    background: var(--tf-background);
    color: var(--tf-text);
    font-family: "Montserrat", "Open Sans", sans-serif;
}

a {
    color: var(--tf-hightlight);
}

a:hover,
a:active,
a:focus {
    color: var(--tf-hightlight);
}

p a, p a:hover, p a:active, p a:focus {
    text-decoration: underline;
}

.back-to-top {
    background: var(--tf-highlight);
    color: var(--tf-text);
}

.back-to-top i {
    color: var(--tf-text);
}

#preloader:before {
    border: 6px solid var(--tf-text);
    border-top: 6px solid var(--tf-highlight);
}

/* ------------------------------------------------------------------------- */
/* HEADER */
#header.header-scrolled {
    background-color: var(--tf-background);
    opacity: 0.95;

}

#header #logo h1 a,
#header #logo h1 a:hover {
    color: var(--tf-text);
    border-left: none; /*remove left vertical bar */
}

/* ------------------------------------------------------------------------- */
/* INTRO */
#intro .carousel-item::before {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Mobile-only changes. */
@media (max-width: 768px) {

    /* Carousel background image changes */
    #intro .carousel-item {
        background-size: contain; 
        background-repeat: no-repeat;
        background-position: center;
    }
	
	#intro {
        height: 62.5vw;
		margin-top: 92px;
    }
	
	#intro .carousel-item {
        height: 62.5vw;
	}
	
	.carousel-big-copy {
		display: none;
	}
	
	.carousel-small-copy {
		display: inherit;
	}
	
}

/*Not Mobile. */
@media (min-width: 768px) {
	.carousel-big-copy {
		display: inherit;
	}
	
	.carousel-small-copy {
		display: none;
	}
}

#intro h2 {
    color: var(--tf-text);
  }
  
  #intro p {
    color: var(--tf-text);
  }

#intro .btn-get-started {
    color: var(--tf-text);
    background: var(--tf-highlight);
}

#intro .btn-get-started:hover {
    color: var(--tf-highlight);
    background: var(--tf-text);
}

/* ------------------------------------------------------------------------- */
/* NAVIGATION MENU */
.nav-menu a {
    padding: 5px;
}

.nav-menu a {
    color: var(--tf-text);
}
  
.nav-menu li:hover > a,
.nav-menu ul li:hover > a,
.nav-menu > .menu-active > a {
    color: var(--tf-highlight);
}

#mobile-nav ul li a {
    color: var(--tf-text);
}

#mobile-nav ul li a:hover {
    color: var(--tf-highlight);
}

#mobile-nav ul li.menu-active a {
    color: var(--tf-highlight);
}

/* navbar hamburger color */
#mobile-nav-toggle {
    border: var(--tf-separator) solid 1px;
    border-radius: 2px;
}

#mobile-nav-toggle .hamburger-icon {
    color: var(--tf-text);
    transition: all 0.4s;
}

#mobile-nav-toggle .hamburger-icon:hover {
    color: var(--tf-highlight);
    transition: all 0.4s;
}

/* Call-to-action button below the header logo */
header .action-button {
    font-family: "Montserrat", sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 25px;
    transition: 0.5s;
    margin-top: 8px;
    background: var(--tf-action);
    color: var(--tf-text) !important;
    border: 2px solid var(--tf-text);
    width: 100%;
}

header .action-button:hover {
    /*
    background: var(--tf-text);
    color: var(--tf-action) !important;
    */
    border: 2px solid var(--tf-text);
    transform: perspective(1px) scale(1.1);
}

/* Call-to-action button in the nav bar */
header .goto-sign-up-button {
    font-family: "Montserrat", sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 25px;
    transition: 0.5s;
    margin-top: 0px;
    background: var(--tf-action);
    color: var(--tf-text) !important;
    border: 2px solid var(--tf-text);
}

header .goto-sign-up-button:hover {
    background: var(--tf-text);
    color: var(--tf-action) !important;
    border: 2px solid var(--tf-text);
    transform: perspective(1px) scale(1.1);
}

/* drop down decorators - not currently used*/
.nav-menu ul {
    background: rgb(0,0,0, 0.5);
    border: 1px solid var(--tf-text);
    border-top: 1px dashed var(--tf-text);
    border-radius: 0px 0px 4px 4px;
    max-width: 100px;
}
.nav-menu ul li a {
    color: var(--tf-text);
    padding-right: 0;
    margin-right: 0;
}
  
.nav-menu ul li:hover > a {
    color: var(--tf-text);
}

/* ------------------------------------------------------------------------- */
/* VIDEO MODAL */
.modal-dialog {
    max-width: 560px;
    margin: 30px auto;
    color:var(--tf-text);
    background-color:var(--tf-background);
}

.modal-body {
    position:relative;
    padding:0px;
    color:var(--tf-highlight);
    background-color:var(--tf-background);
}

.modal-text {
    position: relative;
    top:0;
    float: center;
    font-size: 1rem;
    font-weight: normal;
    color: var(--tf-text);
    background-color: rgb(0,0,0,0); /* zero opacity */
    border: none;
    z-index:999;
    opacity:1;
}

.close {
    position:absolute;
    right:10px;
    top:0;
    z-index:999;
    font-size:2rem;
    font-weight: normal;
    color: var(--tf-highlight);
    background-color:var(--tf-highlight);
    border: none;
    opacity:1;
}

/* ------------------------------------------------------------------------- */
/* SECTIONS */
.section-header > h3 {
    color: var(--tf-text);
}

.section-header h3::after {
    background: var(--tf-highlight);
}

.section-header h3::before {
    background: var(--tf-separator);
}

.section-header p {
     color: var(--tf-text);
}

.section-bg {
    background: var(--tf-background);
}

/* ------------------------------------------------------------------------- */
/* FEATURED PRODUCT ATTRIBUTES (x3) */
#featured-attributes {
    background: var(--tf-background);
}

#featured-attributes .box-bg {
    background-image: linear-gradient(0deg, #000000 0%, #242323 50%, #000000 100%);
}

#featured-attributes i {
    color: var(--tf-highlight);
}

#featured-attributes h4 a,
#featured-attributes p {
    color: var(--tf-text);
}

/* featured-attributes adjusted for mobile */
@media (max-width: 768px) {
	.featured-attributes-big-copy {
		display: none;
	}
	
	.featured-attributes-small-copy {
		display: inherit;
	}
}

#featured-attributes .box {
  padding: 15px 15px;
}
	
/*Not Mobile. */
@media (min-width: 768px) {
	.featured-attributes-big-copy {
		display: inherit;
	}
	
	.featured-attributes-small-copy {
		display: none;
	}
}

/* ------------------------------------------------------------------------- */
/* ABOUT PRODUCT */
#about {
    background: url("../img/tf-toys-bg.jpg") center top no-repeat fixed;
    background-size: cover;
}

#about::before {
    /* alpha overlay */
    background: rgba(96,100,112, 0.92);
}
#about .about-col {
    background: var(--tf-background);
}
#about .about-col .icon,
#about .about-col:hover .icon {
    background-color: var(--tf-highlight);
    border-color: var(--tf--highlight);
}

#about .about-col i,
#about .about-col:hover i {
    color: var(--tf-text);
}
#about .about-col .title,
#about .about-col p {
    color: var(--tf-text);
}

#about .about-col p a {
    color: var(--tf-highlight);
}

/* ------------------------------------------------------------------------- */
/* PRODUCT FEATURES */
#features {
    background: var(--tf-background);
}
#features .title,
#features p {
      color: var(--tf-text);
}

#features .box:hover .title a {
    color: var(--tf-highlight);
}

#features .icon i {
    color: var(--tf-highlight);
}

#features .features-description {
    color:var(--tf-text);
}

#features .features-description h4 {
    font-size: 18px;
    line-height: 1px;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 0;

    margin-left: 30px;
}

#features .features-description p {
    font-size: 14px;
    line-height: 24px;
    
    margin-left: 30px;
    margin-right: 30px;
    text-align: left;
    text-align: justify;
    text-justify: inter-word;
}

/* ------------------------------------------------------------------------- */
/* FORM */
#sign-up {
    background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/tf-hex-bg.jpg) fixed center center;
    background-size: cover;
}

#sign-up h3,
#sign-up p {
    color: var(--tf-text);
}

/* MAILCHIMP FORM */
#sign-up .mc4wp-response,
#mc4wp-responses { 
    background-color:var(--tf-background) !important;
}

#sign-up .mailing-list-signup {

    border:1px #606470 solid;
    background:var(--tf-background);
    color:var(--tf-text);
    clear:left;
}

#sign-up .sign-up-button {
    color: var(--tf-text);
    background-color:var(--tf-highlight) !important;
    border: 2px solid var(--tf-text);
    margin-left: 0;
}

#sign-up .sign-up-button:hover {
    color: var(--tf-highlight);
    background-color: var(--tf-text) !important;
    border: 2px solid var(--tf-text);
    transform: perspective(1px) scale(1.05) !important;
}

#sign-up .tf-mc-inputtext { 
    background-color:var(--tf-text) !important; 
}

#sign-up .tf-mc-minifooter { 
    font-size: x-small;

}
#sign-up .gdpr-mergeRow {
    display: block;
    visibility: hidden;
    position: absolute;
}

#sign-up .tf-mc-minifooter a {
    text-decoration: underline;
}
#sign-up .tf-mc-minifooter a:hover {
    color: var(--tf-highlight);
}

#sign-up .tf-mc-minifooter label,
#sign-up .tf-mc-minifooter p { 
    padding: 0;
    margin: 10px;
    text-align: left;
    margin-left:  30px;
    margin-right: 30px;
}

/* ------------------------------------------------------------------------- */
/* COMPANY */
#company {
    color: var(--tf-text);
    background: var(--tf-background);
    padding: 60px 0;
}

#company .founded  {
    font-family: Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 100;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}

#company .slogan {
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    width: 100%;
}

#company .member {
    background: inherit;
    opacity: 1;
    transition: 0.4s;
}

#company .member .member-info,
#company .member:hover .member-info {
    border-radius: 50%;
    transition: 0.0s;
}

#company .member h4,
#company .member span {
    color: var(--tf-text);
}

#company .member .social a {
    color: var(--tf-text);
}

#company .member .social a:hover {
    color: var(--tf-highlight);
}

/* Mobile-only changes. */
@media (max-width: 768px) {

    /* Profile pic is X% smaller on mobile. */
    #company .member
    {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

}

/* ------------------------------------------------------------------------- */
/* PARTNERS */

#partners {
    background: var(--tf-background);
}

#partners .partners-carousel {
    border: 0;
}

#partners img {
    opacity: 0.4;
}

#partners .owl-dot.active {
    background-color: var(--tf-highlight);
}

/* ------------------------------------------------------------------------- */
/* FAQs */
#faq {
    background-color: var(--tf-background);
    color: var(--tf-text);
    padding: 60px 0;
}

#faq p {
    color: var(--tf-text);
    padding: 0;
}

#faq p a {
    color: var(--tf-highlight);
    transition: 4s;
}

#faq p a:hover {
    text-decoration: underline;
    transition: 0.4s;
}

#faq a:hover {
    color: var(--tf-highlight);
}

#faq .faq-item {
    background-color: inherit;
    color: var(--tf-text);
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

#faq .faq-item .faq-title {
    padding: 18px;
}

#faq .faq-item .faq-title h4 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    
}

#faq .faq-item .faq-title h4 a.collapsed {
    color: var(--tf-text);
}

#faq .faq-item .faq-title h4 a {
    color: var(--tf-highlight);
    display: block;
}

#faq .faq-item .faq-title h4 a:hover {
    color: var(--tf-highlight);
}

#faq .faq-item .faq-title h4 a.collapsed::before {
    color: inherit;
    float: right !important;
    content: '\002B'; /*PLUS*/
}

#faq .faq-item .faq-title h4 a::before {
    float: right !important;
    content: '\2212'; /*MINUS*/
}

#faq .faq-item .faq-body {
    padding: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 1px 1px 1px 1px;
}

#faq .faq-item .faq-body p {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;

    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 1px dashed var(--tf-text);
    border-bottom: 1px solid var(--tf-highlight);
}

/* ------------------------------------------------------------------------- */
/* FOOTER */
#footer {
    background-color: var(--tf-background);
}
#footer .footer-top {
    background: var(--tf-background);
}

#footer .footer-top h4 {
    color: var(--tf-text);
}

#footer .footer-top h4::after {
    background: var(--tf-highlight);
}

#footer .footer-top h4::before {
    background: var(--tf-separator);
}

#footer .footer-top .footer-links ul a {
    color: var(--tf-text);
}
  
#footer .footer-top .footer-links ul a:hover {
    color: var(--tf-highlight);
}

#footer .footer-top .footer-contact p {
    color: var(--tf-text);
}

#footer .footer-top .social-links a:hover {
    color: var(--tf-text);
    background: var(--tf-highlight);
}

#footer .footer-contact .social-links a {
    color: var(--tf-highlight);
    background: var(--tf-text);
    margin-top: 4px;
    margin-bottom: 4px;
}

#footer .img-attr {
    font-size: 4px;
    font-weight: lighter;
    padding: 0;
    margin: 0;
}

#footer .img-attr a {
    color: var(--tf-text);
    padding-top: 2px;
    margin-bottom:2px;
}

#footer .img-attr a:hover {
    color: var(--tf-highlight);
}

#footer .copyright {
    border-top: 1px solid var(--tf-separator);
}
#footer .copyright,
#footer .credits {
    color: var(--tf-text);
}

#footer .legal-info {
    text-align: center;
    font-size: 13px;
    text-decoration: underline;
}
#footer .legal-info:hover {
    color: var(--tf-highlight);
}

/* ------------------------------------------------------------------------- */
/* LEGAL */

#top {
    width: 100%;
    height: 80px;
}

#privacy-policy .version{
    text-align: left;
    margin-bottom: 30px;
}

#privacy-policy h4 {
    font-weight: bold;
    margin: 15px 0;
    font-size: 18px;
    color: var(--tf-highlight);
}

#terms-of-service .version{
    text-align: left;
    margin-bottom: 30px;
}

#terms-of-service ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-right: 0.6em;

    text-align: left;
    text-justify: inter-word;

}

#terms-of-service li {
    padding-bottom: 10px;
}

#terms-of-service label {
    font-weight: bolder;
    margin-left: 8px;
    
    /*color: var(--tf-highlight); */
}
#terms-of-service .sub-label {
    font-style: italic;
    font-weight: normal;
    color: var(--tf-text);
}

#cookies-policy h4 {
    font-weight: bold;
    margin: 15px 0;
    font-size: 18px;
    color: var(--tf-highlight);
}

#cookies-policy a {
    text-decoration: underline;
}

#cookies-policy a:hover {
    color: var(--tf-highlight);
}