html, body, div, a {
    position:relative;
    float:left;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    box-sizing: border-box;
    line-heihgt:1.2;
    font-family: "roboto-light";
    font-size:18px;
    color:white;
}

html,body {
    background:#111;
    overflow:hidden;
}


.inline             { padding:0 2rem;}
.debug              { background:red;}
.h-100              { height:100%; min-height:100%; }
.w-40               { width:40%; }
.w-50               { width:50%; }
.w-60               { width:60%; }
.w-70               { width:70%; }
.w-auto             { width:auto; }
.pb5                { padding-bottom:5rem; }
.pt1                { padding-top:1rem; }
.pt2                { padding-top:2rem; }
.pr8                { padding-right:8rem; }
.pr10               { padding-right:10rem; }
.pb1                { padding-bottom:1rem; }
.mt2                { margin-top:2rem; }
.mt3                { margin-top:3rem; }
.text-smaller       { font-size:60%; }
.text-center        { text-align:center; }
.float-none         { float:initial; }

.center-vertically {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.w-60 {
    &.box-center {
        float:initial;
        margin:auto;

    }
}

.bg {
    overflow:hidden !important;
}
.bg.bg-start {
    /*background-image:url('../img/t4fin/images/bg-body.webp');*/
    background-size:cover;
    background-position:center right;
}
.bg.bg-layer-1,
.bg.bg-layer-2,
.bg.bg-layer-3 {
    position:absolute;
    width:100%; height:100%;
    top:0;left:0;
    z-index:0;
    background-size:cover;
    background-position:center center;
}

.bg.bg-layer-1{
    background-image:url('../img/t4fin/images/bg-layer-5.webp');
    /*animation:animate-move-up 120s linear infinite;*/
}
.bg.bg-layer-2{
    background-image:url('../img/t4fin/images/img-grid.webp');
}
@keyframes animate-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes animate-move-up {
    from {
        background-position:center top 0;
    }
    to {
        background-position:center top -1000px;
    }
}


.text-shadow        { text-shadow: 1px 1px #000; }
.text-bold          { font-weight:700; }
.box-shadow         { box-shadow: 3px 3px #333; }
.backdrop-filter    { backdrop-filter: blur(5px); border-radius:7px; }

.logo img {
    height:160px;
    width:auto;
}

.btn {
    padding:.5rem 1rem .4rem 1rem;
    background:#ec2023;
    border-radius:7px;
    box-shadow: 4px 4px #333;
}
.btn:hover {
    box-shadow: 0 0  1px 1px #333;
}

.center-horizontally {
    left:50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width:auto;
    min-width:auto;
    max-width:none;
}



@media (max-width: 768px) {
    html,body,div,a {
        font-size:18px;
    }
    .mobile-w100 { width:100% !important; }
    .mobile-pt2 { padding-top:2rem !important; }
    .mobile-pt3 { padding-top:3rem !important; }
    .mobile-pr5 { padding-right:5rem; }
    .inline { padding:0 2rem; }

    .logo img {
        height:140px;
    }


    .bg.bg-start {
        background-position:center center;
    }

    .btn {
        width:100% !important;
        padding:1rem 2rem .9rem 2rem;
    }
}