html {
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #330;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

/*fonts and headings*/

@font-face {
    font-family: "Dual 300";
    src: url(../fonts/Dual_300.ttf) format("truetype");
}
@font-face {
    font-family: "NimbusSans Regular";
    src: url(../fonts/NimbusSanL-Reg.otf) format("opentype");
}
@font-face {
    font-family: "Capture Smallz Clean Regular";
    src: url(../fonts/Capture_Smallz_Clean_Regular.ttf) format("truetype");
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Dual 300", 'NimbusSans Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    margin: 0 auto;
    font-weight: bold;
    padding: 0;
    color: #cc0;
    border: 0;
    outline: 0;
    text-align: center;
    /*    background: rgba(255, 255, 255, 0.7);*/
    letter-spacing: 0.1rem;
    vertical-align: middle;
}
h1 {
    font-size: 2rem;
    line-height: 2rem;
    padding: 0.8rem 0 0 0;
    color: #cc0;
}
h2 {
    font-size: 1.6rem;
    line-height: 1.8rem;
}
h3 {
    font-size: 1.4rem;
    line-height: 1.6rem;
    padding-top: 1.4rem;
}
h4 {
    font-size: 1.2rem;
    line-height: 1.4rem;
}
h5 {
    font-size: 1.1rem;
    line-height: 1.3rem;
}

/*RESET*/

body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
picture,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
footer,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
    text-align: justify;
    margin: 0.5rem auto 0.5rem 10%;
    width: 85%;
    line-height: 1.7rem;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-though;
}
figcaption {
    font-size: 1rem;
    font-weight: 600;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
sup {
    font-variant-caps: all-small-caps;
    font-variant-position: super;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1rem;
}

/*MAIN*/

a {
    color: #0f0;
    text-decoration: none;
    font-weight: 700;
}
a:hover {
    color: #cc0;
    font-weight: 700;
}
/*abbr {
    position: relative;
}
abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 0.5rem;
    background: #000;
    content: attr(title);
    font-variant: small-caps;
    font-size: 1rem;
    text-align: center;
    width: auto;
    height: auto;
    z-index: 102;
    line-height: 1.3rem;
}*/
body {
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-family: 'NimbusSans Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 100;
    color: khaki;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 14rem;
    max-width: 260rem;
    width: 100%;
    margin: 0 auto;
}
dl {
    background: #000;
    border: 0;
    width: 90%;
    float: left;
    height: auto;
    clear: both;
    margin: 0.5rem 5%;
    padding: 0 0 0.5rem 0;
    left: 0;
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
}
dd {
    width: 90%;
    float: left;
    margin: 0 5% 0.5rem 5%;
    padding: 0.1rem 0 0.5rem 0;
    line-height: 1.5rem;
    font-size: 1.2rem;
    vertical-align: text-top;
    text-align: center;
    clear: both;
}
dt {
    line-height: 1.6rem;
    font-size: 1.4rem;
    width: auto;
    text-align: center;
    margin: 0.2rem auto 0 auto;
    padding: 0.4rem 0 0.2rem 0;
    color: #cc0;
    font-weight: 700;
    vertical-align: bottom;
}
footer {
    min-height: 2rem;
    line-height: 1.5rem;
    width: 80%;
    margin: 1.5rem auto;
    text-align: center;
    position: relative;
    bottom: 0;
    font-size: 1.2rem;
    max-width: 260rem;
}
hr {
    border: 0.05rem solid #cc0;
    margin: 0.3rem auto;
    display: block;
}
header {
    width: 100%;
    height: 4rem;
    position: fixed;
    top: 0;
    left: 0;
    border: 0;
    z-index: 100;
    padding: 0;
    margin: 0 auto;
    background-color: #000;
    max-width: 260rem;
    /*    background-image: linear-gradient(rgba(148, 184, 184, 1), rgba(255, 0, 0, 0));*/
}
#menu-icon {
    display: inline-block;
    width: 2.7rem;
    height: 2.4rem;
    background: url(../img/menu.png) center no-repeat;
    background-size: 2.7rem 2.4rem;
    margin: 0.7rem 0 0 0;
}
nav {
    float: left;
    padding: 0 0.6rem 0 0.6rem;
    height: inherit;
    margin: 0;
}
nav ul,
    nav:active ul {
        display: none;
        position: fixed;
        padding: 0 1rem 0.2rem 0;
        background: #000;
        top: 2.5rem;
        left: 0.2rem;
        width: auto;
        border-radius: 0.5rem;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        margin: 0;
    }
    nav li {
        text-align: center;
        width: 100%;
        padding: 0.2rem 0.5rem;
        margin: 0;
        border-top: 0.4rem solid #cc6;
        background: #000;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        line-height: 1.6rem;
    }
    nav:hover ul {
        display: block;
    }
nav a {
    color: #0f0;
    text-decoration: none;
    font-weight: 400;
}
nav a:hover {
    color: #cc0;
    font-weight: 400;
}
p {
    line-height: 1.4em;
    background-color: none;
    padding: 0.8rem 4%;
    /*    background: rgba(255, 255, 255, 0.7);*/
    border-radius: 0.5rem;
    width: 92%;
    text-align: left;
    letter-spacing: 0.01rem;
    margin: 0;
    z-index: 100;
    font-weight: 100;
}
section {
    margin: 4rem auto 0 auto;
    width: 100%;
    padding: 0;
    position: relative;
    background: transparent;
}
.babu {
    background-color: #fff;
    padding: 0 0.2rem;
    border-radius: 0.4rem;
    border: 0.1rem solid #9cf;
    cursor: pointer;
    color: #369;
    font-size: 1rem;
    font-weight: 400;
    margin: 0 auto;
    line-height: 1.1rem;
    vertical-align: middle;
}
.brake {
    text-align: center;
    background-color: #993;
    font-size: 2rem;
    width: 12%;
    line-height: 2rem;
    margin: 0.1rem auto 1rem auto;
}
.bun {
    background-color: #000;
    padding: 0.1rem 0.4rem;
    font-family: 'NimbusSans Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    border: 0;
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    cursor: pointer;
    color: #0f0;
    white-space: nowrap;
    line-height: 1.8rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0.3rem 0 0;
}
.bun:hover {
    color: #cc0;
    font-weight: 700;
}
.bunb {
    border: 0.2rem solid #cc0;
}
.current {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 0;
}
.centa {
    text-align: center;
    line-height: 1.5rem;
}
.grades {
    border: 1px solid #993;
}
.fixform {
    list-style-type: none;
    text-align: center;
    line-height: 1.6rem;
    background: #000;
}
.nope {
    width: 0;
    height: 0;
}
.sampleMovie {
    width: 30%;
    margin: 1rem 35%;
}
.special {
    color: #f00;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4rem;
}
.straight-a {
    white-space: nowrap;
}
.teenth {
    font-size: 1rem;
    color: #cf0;
    line-height: 1.2rem;
    text-align: center;
}
.tooltip {
    position: relative;
    display: block;
}
.tooltip .tooltiptext {
    visibility: visible;
    width: 100%;
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    /* Position the tooltip */
    position: absolute;
    top: 6%;
    left: 0;
    margin: 0 3%;
    z-index: 1;
    font-size: 15rem;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.topit {
    min-height: 1.4rem;
    line-height: 1.3rem;
    text-align: center;
    font-variant-caps: all-small-caps;
    color: khaki;
    padding: 5.2rem 0 0 0;
}
.frow {
    margin: 0.5rem 0;
    background: transparent;
    border: 0;
    width: 100%;
}
.frow,
.frow > .column {
    padding: 0;
    background: transparent;
}
.column {
    float: left;
    width: 25%;
    border: 0;
    background: transparent;
    height: auto;
    margin: 0;
}
.frow:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */

.content {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}
.content img {
    width: 100%;
    height: auto;
    bottom: 0;
    border: 0;
    margin: 0;
    padding: 0;
}
.content p {
    height: 2.2rem;
    margin: 0 auto;
    padding: 0;
    width: 85%;
    text-align: center;
    line-height: 1.0rem;
}
.content a {
    padding: 0;
    font-size: 0.9rem;
}
.contented img {
    width: 50%;
    bottom: 0;
    border: 0.1rem solid #cc6;
    margin: 0 25% 2rem 25%;
    padding: 0;
}
.contented p {
    height: 2rem;
    margin: 1rem auto 0 auto;
    padding: 0;
    width: 90%;
    text-align: center;
    line-height: 1.2rem;
    font-size: 1rem;
}

/*
a:hover#menu-icon {
    filter: brightness(50%);
    background-color: #000;
    border-radius: 4px;
}*/

#logo {
    font-size: 3.4rem;
    line-height: 3.8rem;
    letter-spacing: 0.15rem;
    vertical-align: text-bottom;
    margin: 0;
    padding: 0;
    color: #cc0;
    border: 0;
    outline: 0;
    font-family: 'Capture Smallz Clean Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    float: left;
    width: auto;
    height: 3.8rem;
    background: transparent;
    display: block;
}
#logo span {
    font-size: 1.6rem;
    line-height: 3rem;
    letter-spacing: 0.1rem;
    vertical-align: top;
    margin: 0 0 0 0.2rem;
    font-family: 'NimbusSans Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    padding: 0;
    float: right;
    font-weight: bold;
    width: auto;
}
#logo span a {
    color: #cc0;
    font-weight: bold;
}
#logo span a:hover {
    color: #0f0;
    font-weight: bold;
}
#logo a {
    color: #cc0;
    font-weight: normal;
}
#logo a:hover {
    color: #0f0;
    font-weight: normal;
}
time {
    color: #cf0;
    font-size: inherit;
}

/*LIST*/

.bigdigit {
    font-family: 'NimbusSans Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    margin: 2rem auto 3.5rem auto;
    padding: 0;
    list-style-type: none;
    color: khaki;
    width: 50%;
    clear: both;
}
.bigdigit li {
    counter-increment: step-counter;
    margin: 0.1rem 0 0.5rem 0.4rem;
    line-height: 1.4rem;
    font-size: 1.2rem;
    padding: 0.4rem 0 0.1rem 0.6rem;
    text-indent: -4rem;
    min-height: 5rem;
    left: 2.4rem;
    position: relative;
    background: #000;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border: 0.5rem solid khaki;
    text-align: left;
    letter-spacing: 0.1rem;
}
.bigdigit li strong {
    font-weight: bold;
    color: #fff;
}
.bigdigit li::before {
    content: counter(step-counter);
    margin: 0 0.7rem 0 -2.1rem;
    font-size: 300%;
    background-color: #993;
    color: #000;
    font-weight: 700;
    padding: 0.6rem 1.2rem 4rem 1.2rem;
    border: 0.5rem solid khaki;
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
}
.raised {
    width: 80%;
    border: 1px solid #993;
    margin: 0.5rem auto 0.5rem auto;
    height: 2rem;
}
.raised div {
    width: 17.1%;
    border: 0;
    margin: 0;
    padding-left: 0.2rem;
    height: 2rem;
    background-color: #aeeaea;
    text-align: center;
    line-height: 2rem;
    font-size: 1.4rem;
    color: #099;
    font-weight: bold;
}
.raised span {
    width: auto;
    border: 0;
    margin: 0 1rem 0 0;
    height: 2rem;
    float: right;
    line-height: 2rem;
    font-size: 1.1rem;
    color: #f00;
    font-weight: bold;
    letter-spacing: 0.1rem;
}

/*DESIGN*/

#badger {
    width: 100%;
    margin: 1rem auto;
    height: 8rem;
    padding: 0;
    clear: both;
}
#badger div {
    float: left;
    width: 33%;
    padding: 0;
    margin: 0 auto;
    height: auto;
}
#badger div a img {
    width: 40%;
    margin: 0 30%;
    height: 40%;
}

/*.badger div a:link {
    filter: grayscale(100%) sepia(65%) hue-rotate(165deg);
}
.badger div a:hover {
    filter: none;
}*/


/*LINKS*/

#linko {
    position: fixed;
    bottom: 0;
    right: 0;
    background-size: cover;
   /* -webkit-transform: translateY(-98%);
    -ms-transform: translateY(-98%);
    transform: translateY(-98%);*/
    z-index: 99;
    margin: 0 1rem 0 0;
    width: auto;
    height: 1.6rem;
    max-width: 260rem;
}
.linin {
/*    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);*/
    white-space: nowrap;
/*    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;*/
    margin: 0;
    padding: 0;
    height: auto;
    width: auto;
    z-index: 3;
}
.linin a:link {
    background-color: lawngreen;
    padding: 0.4rem 0.8rem 0.2rem 0.8rem;
    color: #000;
    font-size: 1.4rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    margin: 0;
    letter-spacing: 0.1rem;
    line-height: 1.2rem;
}
.linin a:hover {
    background-color: #ff0;
    color: #060;

}
.champsf {
    font-family: 'NimbusSans Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: lighter;
    letter-spacing: 0.15rem;
}

/*PROFILES*/

.profiles {
    border-radius: 0.5rem;
    /*    background: rgba(255, 255, 255, 0.7);*/
    border: 0;
    padding: 1rem;
    width: 80%;
    margin: 0.5rem auto 0.7rem auto;
    background-color: #000;
}
.video-box {
    border: 0;
    padding: 0;
    width: 100%;
    margin: 0;
    background-color: #000;
    background-image: radial-gradient(olivedrab 0.16rem, transparent 0);
    background-size: 0.7rem 0.7rem, 0.7rem 0.7rem;
}
.video-box,
.profiles fieldset,
form {
    border: 0;
    padding: 0;
    width: 100%;
}
.quart {
    width: 25%;
}
.quart img {
    border: 0;
    width: 96%;
    margin: 2%;
    float: left;
    padding: 0;
    height: 96%;
}
.third {
    width: 45%;
    height: 45%;
    margin: 0.1rem 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 0;
}
.thirdy3 {
    width: 33.3%;
    height:auto;
    margin: 0.1rem 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 0;
    float: left;
}
.video-half {
    width: 60%;
    height: 33.75%;
    margin: 0;
    padding-bottom: 33.75%;
    padding-top: 0;
    padding-left: 0;
    position: relative;
    overflow: hidden;
    border: 0;
    float: left;
}
.video-half video,
.video-half iframe,
.video-half object,
.video-half embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding:0;
    margin: 0;
}
.video-text {
    width: 40%;
    margin: 0.4rem 0 0.5rem 0;
    padding: 0;
}
.video-text h1,
.video-text h2,
.video-text h3 {
    font-family: "Dual 300", 'NimbusSans Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    color: #000;
    padding: 0.5rem 0.2rem 0 0.2rem;
    /*font-size: 2.2rem;*/
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    line-height: 2.5rem;
    background: #cc0;
    text-align: center;
    margin: 1rem auto 0 auto;
    width: 90%;
    font-weight: bold;
}

.video-text p {
    font-size: 1.2rem;
    background: #000;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border: 0.4rem solid #cc0;
    margin: 0 auto 0.5rem auto;
    width: 84%;
    height: 100%;
}
.devco {
    background: url("../img/DevCo-475w-image.jpg") no-repeat center center #993;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.olomba {
    background: url("../img/Our-lives-on-Mars-475w-poster.jpg") no-repeat center center #993;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.smithiba {
    background: url("../img/SmitHIcam-poster-475w.jpg") no-repeat center center #993;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.jimba {
    background: url("../img/To-Exonerate-Too-Late-poster_475w.jpg") no-repeat center center #993;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.devtra {
    background: url("../img/devcotrail-back-800.jpg") no-repeat center center #993;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.feat_video {
    background: url("../img/Cartomancy_2024_poster_small.png") no-repeat center center #993;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.third img {
    border: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.thirdy3 img {
    border: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.thispa {
    position: absolute;
    left: 0%;
    top: 0%;
    font-size: 10rem;
    font-weight: normal;
    float: left;
    color: #0f0;
    font-family: 'Capture Smallz Clean Regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    z-index: 99;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: rgba(000, 000, 000, 0.6);
    height: 100%;
    line-height: 10rem;
    width: 6rem;
    vertical-align: middle;
    text-align: center;
}
.zoo {
    transform: scale(1.05);
    transition: transform ease-in-out 0.3s;
}
.zoo:hover {
    transform: scale(1.4);
    transition: transform ease-in-out 0.3s;
}
.quartol {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.tripcol {
    width: 55%;
    margin-bottom: 0.5rem;
}
.tripcol p {
    line-height: 1.4rem;
    text-align: center;
    background: none;
    font-size: 1.1rem;
}
.tripcol input[type=image] {
    width: 70%;
    margin: 0 15%;
    padding: 0;
}
.video-text,
.quart,
.third,
.tripcol {
    text-align: center;
    border: 0;
    background: none;
    padding: 0;
    float: left;
    line-height: 1.4rem;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}

.tripcol ul {
    border-radius: 0.5rem;
    width: 90%;
    height: 100%;
    float: left;
    margin: 0.4rem 5% 1rem 5%;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
.tripcol li {
    width: auto;
    margin: 0 auto;
    padding: 0.5rem 0.5rem 0.5rem 0.4rem;
    line-height: 1.4rem;
    font-size: 1.2rem;
    vertical-align: middle;
}


/*SITEMAP*/

.maplist {
    background: #000;
    border: 0;
    width: 90%;
    float: left;
    height: auto;
    clear: both;
    margin: 0 5% 0.5rem 5%;
    padding: 0;
    left: 0;
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
}
.maplist li {
    width: auto;
    float: left;
    margin: 0;
    padding: 0 1rem;
    line-height: 2.4rem;
    font-size: 1.3rem;
    vertical-align: text-top;
}
.sitehead {
    line-height: 3rem;
    font-size: 1.5rem;
    width: 90%;
    text-align: left;
    margin: 0.5rem auto 0 auto;
    padding: 0.4rem 0 0.3rem 0;
    color: #cc0;
    font-weight: 700;
    vertical-align: middle;
}

/*SHOWS*/
.mySlides {
	width: 100%;
    height: 56.25%;
	margin: 0;
	padding: 0;
}
.careful {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
	padding: 0;
	width: 60%;
	height: 33.75%;
	/* position: relative; */
    overflow: hidden;
    border: 0;
    float: left;
  }

  .carousel {
    width: 100%;
    height: 56.25%;
    overflow: hidden;
    position: relative;
    border-radius: 0;
	margin: 0;
	padding: 0;
  }

  .carousel-slide {
    display: flex;
    width: 2000%; /* Adjust based on the number of images */
    animation: carousel-animation 80s infinite alternate; 
	/* Adjust duration as needed */
	/* height: 56.25%; */
	margin: 0;
	padding: 0;
  }

  .carousel-slide img {
    width: calc(100% / 20); /* Adjust based on the number of images */
    height: 56.25%;
    object-fit: cover;
	margin: 0;
	padding: 0;
  }

  @keyframes carousel-animation {
    /* Adjust based on the number of images */
    /* 20 image animation */
    0% {
      transform: translateX(0);
    }
    5% {
      transform: translateX(0);
    }
    10% {
      transform: translateX(-5%);
    }
    15% {
      transform: translateX(-10%);
    }
	20% {
      transform: translateX(-15%);
    }
    25% {
      transform: translateX(-20%);
    }
    30% {
      transform: translateX(-25%);
    }
    35% {
      transform: translateX(-30%);
    }
	40% {
      transform: translateX(-35%);
    }
    45% {
      transform: translateX(-40%);
    }
    50% {
      transform: translateX(-45%);
    }
    55% {
      transform: translateX(-50%);
    }
	60% {
      transform: translateX(-55%);
    }
    65% {
      transform: translateX(-60%);
    }
    70% {
      transform: translateX(-65%);
    }
    75% {
      transform: translateX(-70%);
    }
	80% {
      transform: translateX(-75%);
    }
    85% {
      transform: translateX(-80%);
    }
    90% {
      transform: translateX(-85%);
    }
    95% {
      transform: translateX(-90%);
    }
	100% {
      transform: translateX(-95%);
    }
	/*0 {
      transform: translateX(0);
    }*/
  }

/*COPYRIGHT*/

#social_media_share {
    position: fixed;
    top: 98%;
    -webkit-transform: translateY(-98%);
    -ms-transform: translateY(-98%);
    transform: translateY(-98%);
    background-color: transparent;
    padding: 3rem 0.1rem 0.3rem 0.1rem;
    z-index: 10;
    margin: 0;
    width: 2.8rem;
    height: auto;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0 0.5rem 0.5rem 0;
}
.notes {
    list-style-type: decimal;
    padding-left: 3rem;
}

/*TABLE*/

.prospect {
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 0;
    font-size: 1rem;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 50%;
    white-space: nowrap;
    background-color: #000;
    margin: 0 auto;
    padding: 0;
}
.prospect caption {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    border: 0;
    width: auto;
    line-height: 2.2rem;
    white-space: nowrap;
    background-color: #000;
    padding: 0;
    color: #cc0;
}
.prospect td,
.prospect th {
    text-align: center;
    padding: 0.5rem;
}
.prospect td {
    border-right: 0.2rem solid khaki;
}
.prospect th {
    background: olivedrab;
    color: #000;
    margin: 0;
    border-right: 0.2rem solid khaki;
}
.prospect tr:nth-child(even) {
    background: #cc6;
    color: #000;
}

/*FOOTER MENU*/
.footer-menu {
    padding: 0;
    height: 100%;
    width: 100%;
    margin: 1rem auto 0 auto;
}
.footer-menu div p {
    text-align: center;
    padding: 0;
    font-weight: bold;
    margin: 0 auto;
    width: 100%;
}
.footer-menu div {
    /* Container for our tooltip */
    position: relative;
    cursor: pointer;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.bub {
    font-size: 1.1rem;
    padding: 0.4rem;
    border: 0;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    text-align: center;
    margin: 0.5rem;
    white-space: nowrap;
    line-height: 2rem;
    background: #000;
    width: 7rem;
    display: inline-block;
   /* float: left;*/
}
.tooltext {
    visibility: hidden;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    text-align: left;
    padding: 0.3rem;
    border: 0.1rem solid #9df;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    z-index: 25;
    transition: opacity .5s;
    overflow-x: hidden;
}
.footer-menu div:hover .tooltext {
    visibility: visible;
    opacity: 1;
}

.order {
    font-size: 1.2rem;
    padding: 0 0.5rem;
    border: 0.2rem solid #cc0;
    background-color: #000;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    text-align: center;
    margin: 0 0.2rem;
    white-space: nowrap;
    line-height: 1.3rem;
}

/*words*/

.champeti {
    color: #369;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0.1rem auto;
    text-align: center;
    padding: 0;
    width: 50%;
    float: left;
    line-height: 2.2rem;
}
.champeti a {
    background-color: #cef;
    padding: 0.1rem 0.5rem;
    border: 0.1rem solid #993;
    border-radius: 0.7rem;
    color: #069;
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.5rem;
    font-weight: bold;
}
.champeti a:hover {
    color: #fff;
    background-color: #993;
    border: 0.1rem solid #9df;
}
.noter ol {
    list-style-type: decimal;
    list-style-position: outside;
    padding: 0rem;
    margin: 0 2rem 1rem 3rem;
}
.noter ol li {
    padding: 0rem;
    margin: 1rem 0 0 0;
    text-align: justify;
    border-bottom: none;
}
.words {
    width: 80%;
    margin: 0 auto 1rem auto;
    line-height: 1.4rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.words img {
    width: 50%;
    max-width: 700px;
    margin: 1% 2%;
    filter: sepia(90%) hue-rotate(175deg) grayscale(25%);
    float: left;
}
.reveal-if-active {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    background-color: #cef;
    height: 2rem;
    text-align: center;
    width: 100%;
}
.words input[type=checkbox] {
    padding: 0;
    height: 1rem;
    width: 1rem;
    margin: 0;
    outline: 0.15rem solid #993;
    resize: both;
    color: #369;
}
.words input[type="checkbox"]:checked ~ .reveal-if-active {
    opacity: 1;
    max-height: 100px;
    overflow: visible;
    color: #369;
    font-size: 2rem;
    width: 100%;
}
.words span {
    font-weight: bold;
    font-variant-caps: small-caps;
}
.words li {
    border-bottom: 1px solid #9df;
    margin-bottom: 0.5rem;
    padding-bottom: 0.2rem;
    text-align: left;
}
.word {
    width: 90%;
    margin: 0 auto;
}
a:link.devho {
    filter: sepia(80%) saturate(200%) hue-rotate(350deg);
    transition-duration: 0.5s;
}
a:hover.devho {
    filter: none;
    transition-timing-function: ease-out;
}

/*MEDIA QUERY*/

@media (min-width: 640px) {
    h1 {
        font-size: 2.2rem;
        line-height: 2.4rem;
        width: 76%;
    }
    h2 {
        font-size: 2rem;
        line-height: 2.2rem;
    }
    h3 {
        font-size: 1.6rem;
        line-height: 2rem;
    }
    h4 {
        font-size: 1.4rem;
        line-height: 1.8rem;
    }
    h5 {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }
}
@media only screen and (max-width: 1440px) {
    .frow {
        margin: 0.5rem -8px;
    }
    .noter ol {
        padding: 1rem;
        margin: 1rem 0rem 1rem 1rem;
    }
    .quart,
    .third {
        width: 40%;
    }
    .tripcol {
        width: 60%;
    }
    .quart img {
        border: 0;
        width: 94%;
        margin: 0 3%;
        float: left;
        clear: both;
    }
    .tripcol input[type=image] {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .tripcol p {
        line-height: 1.6rem;
        font-size: 1.2rem;
    }
    .badger {
        width: 90%;
        margin: 0.1rem auto;
        padding: 0.5rem 0 0 0;
    }
    .badger div img {
        width: 90%;
        margin: 0 5%;
    }
    .pgal {
        width: 1000%;
    }
    .words img {
        width: 80%;
        max-width: 700px;
        margin: 1% 10%;
        filter: sepia(90%) hue-rotate(175deg) grayscale(25%);
        float: left;
    }
    .sampleMovie {
        width: 50%;
        margin: 1rem 25%;
    }
    .fixform {
        font-size: 1rem;
        line-height: 1.3rem;
    }
    .word {
        width: 80%;
    }
}
@media only screen and (max-width: 860px) {
    .frow {
        margin: 0.5rem -2px;
    }
    .badger {
        width: 100%;
    }
    .badger div {
        width: 50%;
        padding: 0;
    }
    .badger div img {
        width: 70%;
        margin: 0 15%;
    }
    header {
        height: 3.2rem;
    }
    #logo {
        font-size: 2.6rem;
        line-height: 2.8rem;
        letter-spacing: 0.1rem;
    }
    #logo span {
        font-size: 1.2rem;
        line-height: 3.2rem;
    }
    .champeti {
        padding: 0;
        width: 100%;
        font-size: 1rem;
    }
    .special {
        font-size: 1rem;
        line-height: 1.2rem;
        color: #f00;
    }
    #menu-icon {
    width: 2rem;
    height: 1.8rem;
    background-size: 2rem 1.8rem;
    margin: 0.5rem 0.1rem 0 0;
}
    nav ul,
    nav:active ul {
        display: none;
        position: fixed;
        padding: 0.4rem 0.8rem 0.2rem 0;
        left: 1%;
        top: 1.8rem;
        width: auto;
        border-radius: 0.5rem;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
    }
    nav li {
        text-align: center;
        width: 100%;
        padding: 0.2rem 0.4rem 0.3rem 0.4rem;
        margin: 0;
        line-height: 1.6rem;
    }
    nav:hover ul {
        display: block;
    }
    section {
    margin: 3.2rem auto 0 auto;
    }
    .noter ol {
        padding: 1rem;
        margin: 1rem 0rem 1rem 0rem;
    }
    p {
        font-size: 1.2rem;
        line-height: 1.4rem;
    }
    .words {
        width: 90%;
        font-size: 1rem;
        line-height: 1.25rem;
    }
    .words img {
        width: 100%;
        margin: 1% 0 2% 0;
        max-width: 700px;
    }
    #linko {
        height: 1.6rem;
    }
    .linin a:link {
        font-size: 1.1rem;
        line-height: 1.1rem;
        padding: 0.2rem 0.5rem 0.3rem 0.5rem;
    }
    #social_media_share img {
        height: 2rem;
        width: 2rem;
        margin: 0.15rem;
    }
    #social_media_share {
        width: 2.3rem;
        padding: 3rem 0rem 0.3rem 0.05rem;
    }
    .copyright-sitemap {
        padding: 0.5rem 0.3rem 0 0.3rem;
    }
    .bigdigit {
        margin: 1rem auto 1.5rem auto;
        width: 60%;
    }
    .bigdigit li {
        margin: 0.3rem 0;
        line-height: 1.3rem;
        font-size: 1.1rem;
        text-indent: -4rem;
        min-height: 4.5rem;
        left: 1.5rem;
        position: relative;
        padding: 0.2rem 0 0.2rem 0.4rem;
    }
    .bigdigit li::before {
        margin: 0 0.5rem 0 -0.3rem;
        font-size: 250%;
        padding: 0.4rem 0.6rem 6rem 0.6rem;
        border: 0.5rem solid khaki;
        border-radius: 1rem;
        -webkit-border-radius: 1rem;
        -moz-border-radius: 1rem;
    }
    .profiles {
        width: 86%;
    }
    .video-box {
        background: darkolivegreen;
    }
    .video-half {
        width: 100%;
        padding-bottom: 56.25%;
    }
    .video-text h1 {
    font-size: 1.6rem;
    line-height: 1.7rem;
    padding: 0.6rem 0.2rem 0 0.2rem;
    margin: 0.8rem auto 0 auto;
    }
	.careful {
        width: 100%;
        height: 56.25%;
    }
    .quart,
    .third,
    .tripcol,
    .video-half,
    .video-text {
        width: 100%;
        margin: 0 auto;
        font-size: 1.2rem;
    }
    .tripcol p {
        line-height: 1.2rem;
        font-size: 1.2rem;
    }
    .quart img {
        width: 90%;
        margin: 0.3rem 5%;
    }
    .tripcol input[type=image] {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .sampleMovie {
        width: 100%;
        margin: 1rem 0;
    }
    .word {
        width: 100%;
    }
    .raised {
        width: 94%;
    }
    .raised span {
        font-size: 0.8rem;
    }
    .raised div {
        font-size: 1rem;
    }
    footer {
        line-height: 1.2rem;
        width: 90%;
        margin: 1.5rem auto;
        font-size: 1rem;
    }
}
@media screen and (max-width: 1180px) {
    .column {
        width: 50%;
    }
    .bun {
        width: auto;
        padding: 0 0.3rem;
        margin: 0 0.2rem 0 0;
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .thispa {
        font-size: 7rem;
        line-height: 7.5rem;
        width: 5rem;
    }
     .video-text h1 {
    font-size: 1.4rem;
    line-height: 1.5rem;
    padding: 0.4rem 0.2rem 0 0.2rem;
    margin: 0.6rem auto 0 auto;
    }
     .video-text p {
    font-size: 1.2rem;
    line-height: 1.3rem;
    }
}
@media screen and (max-width: 620px) {
    dt {
        font-size: 1.2rem;
    }
    dd {
        font-size: 1.1rem;
    }

    .column {
        width: 100%;
    }
    .thispa {
        font-size: 6rem;
        line-height: 7.5rem;
        width: 4rem;
    }.bigdigit {
        margin: 1rem auto 1.5rem auto;
        width: 74%;
    }
    .brake {
    font-size: 1.5rem;
    width: 25%;
    line-height: 1.5rem;
    margin: 0 auto 0.6rem auto;
    }
    .prospect {
    width: 75%;
    }
}