body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    color: #1a1a1a;
    position: relative;
}
img {width: 100%;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: capitalize; font-display: swap;}
h2 {font-size: 3rem; margin-bottom: 2rem;}
h3 {font-size: 2rem; margin: 1rem 0;}
h4 {margin: 1.5rem 0 1rem;}
h5 {margin: 1rem 0 0; text-transform: uppercase; font-size: 1rem;}
h2 span, h3 span {font-weight: 300; font-size: 1.3rem; display: block; text-transform: uppercase;}
p {margin: 1rem 0;}
section {
    padding: 100px 0;
}
#bodywrapper {
    width: 100vw;
    position: relative;
    overflow: hidden;
}
video {
    width: 100%;
}
.imgbrdr {
    box-shadow: 0 0 2px rgba(0, 0, 0, .1);
    transition: 500ms;
    margin: 2.5rem 0;
}
.imgbrdr:hover, .imgbrdr:active {
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
}
/* teeman button */
.hfc-btn-red {
    background-color: #e80606;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    border-radius: 0;
    border: none;
    transition: 500ms;
    padding: .7rem 2rem;
    margin: 1.5rem 0;
}
.hfc-btn-red i {
    font-size: 1.7rem;
    line-height: 0;
    vertical-align: middle;
    padding-bottom: .1rem;
}
.hfc-btn-red:hover, .hfc-btn-red:active, .hfc-btn-red:focus {
    background-color: #fff;
    color: #1a1a1a;
}
.modal-close-x {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 15;
}
.modal-content-hfc {
    border-radius: 2px;
}
/* menu */

#btn-hfc-menu {
    z-index: 15;
    padding: .3rem .8rem;
    margin: 0;
    font-size: 1.5rem;
    position: fixed;
    top: 20px;
    right: 20px;
    border: 1px solid #e80606;
}
#btn-hfc-menu i {
    font-size: 1.5rem;
    line-height: 1.5rem;
    vertical-align: baseline;
}
#btn-hfc-menu:hover {
    border: 1px solid #000;
}
#menusulje {
    color: #fff;
    background-image: none;
}
#hfc-menu {
    background-color: #1a1a1a;
    color: #fff;
}
#menulink-container{
    border-bottom: 1px solid #222;
    padding: 0 0 20px;
}
.menusection {
    margin: 2px;
    padding: 5px;
    color: #fff;
    text-decoration: none;
    display: block;
}
.menusome {
    font-size: 1.5rem;
    display: inline-block;
    padding: 0 10px 0 0;
    color: #999;
}
#hfc-menu a:hover {
    background-color: #e80606;
    color: #fff;
}
/* image sprites */
/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */
 
.hfcspriteaantti-09b, .hfcspriteaanttiv-01, .hfcspriteaanttiv-02, .hfcspriteaanttiv-03, .hfcspriteaanttiv-04, 
.hfcspriteaanttiv-05, .hfcspriteaanttiv-06, .hfcspriteaanttiv-07, .hfcspriteaanttiv-08, .hfcspriteaanttiv-09, 
.hfcspriteaanttiv-10, .hfcspriteaanttiv-11, .hfcspriteaanttiv-12, .hfcspriteaanttiv-13, .hfcspriteaanttiv-14, 
.hfcspriteaanttiv-15
{ max-width: 100%; background-size: 100%; background-image: url('img/spriteaoptm.jpg'); }
 
.hfcspriteaantti-09b { background-position: 0 0%; background-size: 101%; }
.hfcspriteaanttiv-01 { background-position: 0 6.7%; background-size: 101%; }
.hfcspriteaanttiv-02 { background-position: 0 13.333333%; background-size: 101%; }
.hfcspriteaanttiv-03 { background-position: 0 20%; background-size: 101%; }
.hfcspriteaanttiv-04 { background-position: 0 26.666667%; background-size: 101%; }
.hfcspriteaanttiv-05 { background-position: 0 33.333333%; background-size: 101%; }
.hfcspriteaanttiv-06 { background-position: 0 40%; background-size: 101%; }
.hfcspriteaanttiv-07 { background-position: 0 46.666667%; background-size: 101%; }
.hfcspriteaanttiv-08 { background-position: 0 53.333333%; background-size: 101%; }
.hfcspriteaanttiv-09 { background-position: 0 60%; background-size: 101%; }
.hfcspriteaanttiv-10 { background-position: 0 66.666667%; background-size: 101%; }
.hfcspriteaanttiv-11 { background-position: 0 73.333333%; background-size: 101%; }
.hfcspriteaanttiv-12 { background-position: 0 80%; background-size: 101%; }
.hfcspriteaanttiv-13 { background-position: 0 86.666667%; background-size: 101%; }
.hfcspriteaanttiv-14 { background-position: 0 93.333333%; background-size: 100%; }
.hfcspriteaanttiv-15 { background-position: 0 100%; background-size: 101%; }

.hfcspritebhfc-osa-00, .hfcspritebhfc-osa-01, .hfcspritebhfc-osa-02, .hfcspritebhfc-osa-03, .hfcspritebhfc-osa-04, 
.hfcspritebhfc-osa-05, .hfcspritebhfc-osa-06, .hfcspritebhfc-osa-07, .hfcspritebhfc-osa-08, .hfcspritebhfc-osa-09, 
.hfcspritebhfc-osa-10, .hfcspritebhfc-osa-12, .hfcspritebhfc-osa-13, .hfcspritebhfc-osa-14, .hfcspritebhfc-osa-15
{ max-width: 100%; background-size: 100%; background-image: url('img/spriteboptm2.jpg'); }
 
.hfcspritebhfc-osa-00 { background-position: 0 0%; background-size: 101%; }
.hfcspritebhfc-osa-01 { background-position: 0 7.142857%; background-size: 101%; }
.hfcspritebhfc-osa-02 { background-position: 0 14.285714%; background-size: 101%; }
.hfcspritebhfc-osa-03 { background-position: 0 21.428571%; background-size: 101%; }
.hfcspritebhfc-osa-04 { background-position: 0 28.571429%; background-size: 101%; }
.hfcspritebhfc-osa-05 { background-position: 0 35.714286%; background-size: 101%; }
.hfcspritebhfc-osa-06 { background-position: 0 42.857143%; background-size: 101%; }
.hfcspritebhfc-osa-07 { background-position: 0 50%; background-size: 101%; }
.hfcspritebhfc-osa-08 { background-position: 0 57.142857%; background-size: 101%; }
.hfcspritebhfc-osa-09 { background-position: 0 64.285714%; background-size: 101%; }
.hfcspritebhfc-osa-10 { background-position: 0 71.428571%; background-size: 101%; }
.hfcspritebhfc-osa-12 { background-position: 0 78.571429%; background-size: 101%; }
.hfcspritebhfc-osa-13 { background-position: 0 85.714286%; background-size: 101%; }
.hfcspritebhfc-osa-14 { background-position: 0 92.857143%; background-size: 101%; }
.hfcspritebhfc-osa-15 { background-position: 0 100%; background-size: 101%; }

.accesshfc-3d-stand, .accesshfc-3d-wrower, .accesshfc-3d-wbench, .accesshfc-3d-wangledplatformcalf, .accesshfc-3d-wangledplatform, 
.accesshfc-3d-wseat
{ max-width: 100%; background-size: 100%; background-image: url('img/accessories.jpg'); }
 
.accesshfc-3d-stand { background-position: 0 0%; background-size: 100%; }
.accesshfc-3d-wrower { background-position: 0 21.22962%; background-size: 100.965825%; }
.accesshfc-3d-wbench { background-position: 0 41.747028%; background-size: 105.841121%; }
.accesshfc-3d-wangledplatformcalf { background-position: 0 61.415295%; background-size: 106.6719%; }
.accesshfc-3d-wangledplatform { background-position: 0 80.790708%; background-size: 108.114558%; }
.accesshfc-3d-wseat { background-position: 0 100%; background-size: 108.459697%; }

.handleshfc-part-belt, .handleshfc-part-hardhandle, .handleshfc-part-ropehandle, .handleshfc-part-softhandle, .handleshfc-part-strap
{ max-width: 100%; background-size: 100%; background-image: url('img/handles.jpg'); }
 
.handleshfc-part-belt { background-position: 0 0%; background-size: 100%; }
.handleshfc-part-hardhandle { background-position: 0 25%; background-size: 100%; }
.handleshfc-part-ropehandle { background-position: 0 50%; background-size: 100%; }
.handleshfc-part-softhandle { background-position: 0 75%; background-size: 100%; }
.handleshfc-part-strap { background-position: 0 100%; background-size: 100%; }

/* theme */
.picpanel {
    padding: 20px 0;
    display: inline-block;
    max-width: 1400px;
    margin: 0 auto;
}
.picpanel > span {
    width: 20%;
    float: left;
    padding: 1px;
}
@media (max-width:768px) {
    .picpanel > span {
        width: 50%;
    }
}
@media (max-width:800px) {
    .picpanel > span {width: 25%;}
    .picpanelmob {display: none;}
}
@media (max-width:500px) {
    .picpanel > span {width: 33%;}
    .picpanelmob {display: none;}
}
@media (max-width:380px) {
    .picpanel > span {width: 50%;}
    .picpanelmob {display: none;}
}
.picpanel img:hover {
    filter: contrast(1.2) saturate(1.2);
}
/* container */
@media (max-width:540px) {.container-sm {padding: 0 2rem;}}
/* sections */
#headervid {
    object-fit: cover;
    height: auto;
    filter: brightness(85%);
}
#hero {
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
    padding: 0;
    background-color: #1a1a1a;
}
.herocontainer {
    position: absolute;
    top: 0;
}
#pagetitle {
    position: absolute;
    top: 20px;
    left: 1rem;
    display: block; 
    font-size: 2rem; 
    font-weight: 400;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #000;
}
h1 {
    text-transform: uppercase; 
    font-size: 3rem; 
    text-shadow: 2px 2px 0 #000;
    line-height: 4rem; 
    padding: 80px 0 0 0;
    max-width: 700px;
}
h1 span {font-size: 5rem; display: block;}
@media (max-width:800px) {
    #headervid {width: 130%;}
    h1 {font-size: 3rem;}
    #pagetitle {font-size: 1.5rem;}
}
@media (max-width:580px) {
    h1 span {font-size: 3.5rem;}
    h1 {font-size: 2.5rem; line-height: 3rem;}
    #headervid {width: 200%; margin-left: -45%;}
}
@media (max-width:370px) {
    #headervid {width: 250%; margin-left: -75%;}
    h1 span {font-size: 3rem;}
    h1 {font-size: 2.5rem; line-height: 2.5rem;}
}
#intro {
    background-color: #1a1a1a;
    color: #fff;
    padding: 0;
}
#intro-txt {
    padding-top: 15%;
}
@media (max-width:1200px) {
    #intro-txt {padding-top: 10%;}
}
#intro-img {
    padding: 25% 0 0;
    max-width: 500px;
}
@media (max-width:992px) {
    #intro-img {padding-top: 0;}
}
#salespoints {
    background-color: #f2f2f2;
    padding: 150px 0;
    background-image: url(img/bg1.png);
}
@media (max-width:768px) {
    #salespoints {
        padding: 100px 0;
    }
}
#salespoints h3 span {
    font-size: 1.2rem;
}
#picpanelanna, #picpanellegs {
    padding: 100px 0;
    background-color: #222;
    color: #fff;
}
#how {
    padding: 200px 0 100px;
    background-color: #f9f9f9;
    background-image: url(img/bg1.png);
}
#how p {
    max-width: 820px;
    margin: 0 auto 1.5rem;
}
#howboxwrapper {
    margin: 0 auto;
}
.howbox {
    color: #1a1a1a;
    padding: 40px 20px 5px;
    width: 100%;
    margin: 1%;
    transition: 500ms;
    float: left;
    text-decoration: none;
    height: 98%;
    fill: #c0c0c0;
    text-align: center;
}
.howbox hr {
    margin: 3px 0 5px;
    border-top: 2px solid #eee;
    opacity: 1;
    transition: 500ms;
}
.howbox span {
    display: block;
    padding: 5px 0;
    color: #e80606;
    transition: 500ms;
}
.howbox:hover {
    color: #1a1a1a;
}
.howbox:hover > hr {
    border-top: 2px solid #e80606;
}
.howbox:hover .hovericonfill {
    border-top: 2px solid #e80606;
}
.boxicons {
    max-width: 100px;
    margin: 0 auto 10px;
    fill: #f9f9f9;
}
.boxiconstroke {
    stroke: #1a1a1a;
}
.howbox:hover .boxiconstroke {
    stroke: #000;
}
.howbox h4 {
    font-weight: 600;
    margin-top: 25px;
}
.whaticons {
    width: 120px;
    padding: 0 0 10px;
    margin: 0 auto;
    fill: #fff;
}
#machine {
    background-color: #fff;
    color: #1a1a1a;
    fill: #1a1a1a;
}
.whatvid-container {
    margin: 0 auto 30px;
    text-align: center;
}
.whatvid-wrapper {
    position: relative;
    display: inline-block;
}
.whatvid-wrapper button {
    position: absolute;
    bottom: 6%;
    right: 4%;
    margin: 0;
}
.whatvid {
    margin: 1rem auto 0;
    display: block;
    padding: 1px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    width: 100%;
    height: auto;
}
.hfc-tbl {
    margin: .5rem 0 1rem;
}
.hfc-tbl th {
    white-space: nowrap;
}
#analysis {
    background-color: #f9f9f9;
}
#installation {
    background-color: #fff;
    padding: 200px 0 100px;
}
.custompadding {
    padding-top: 10%;
}
@media (max-width:768px) {
    .custompadding {
        padding-top: 0;
    }
}
#installation h3 {
    padding-top: 50px;
}
#installation img {
    max-width: 400px;
    margin: 0 auto;
}
.accessoriesimgs div {
    padding: 5%;
}
.accessoriesimgs p {
    text-align: center;
}
#qa {
    background-color: #f9f9f9;
}
#contact {
    text-align: center;
    background-color: #333;
    color: #999;
    padding: 100px 0 0;
}
#contact h2 {
    margin-bottom: 0;
}
#contact p {
    margin-top: 0;
}
#footer {
    padding: 50px 0 200px;
    background-color: #333;
    text-align: center;
    color: #777;
}