@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-medium.eot');
  src: url('/assets/fonts/roboto-medium.woff2') format('woff2'),
       url('/assets/fonts/roboto-medium.woff') format('woff'),
       url('/assets/fonts/roboto-medium.ttf') format('truetype'),
       url('/assets/fonts/roboto-medium.svg#roboto-medium') format('svg'),
       url('/assets/fonts/roboto-medium.eot?#iefix') format('embedded-opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-regular.eot');
  src: url('/assets/fonts/roboto-regular.woff2') format('woff2'),
       url('/assets/fonts/roboto-regular.woff') format('woff'),
       url('/assets/fonts/roboto-regular.ttf') format('truetype'),
       url('/assets/fonts/roboto-regular.svg#roboto-regular') format('svg'),
       url('/assets/fonts/roboto-regular.eot?#iefix') format('embedded-opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-light.eot');
  src: url('/assets/fonts/roboto-light.woff2') format('woff2'),
       url('/assets/fonts/roboto-light.woff') format('woff'),
       url('/assets/fonts/roboto-light.ttf') format('truetype'),
       url('/assets/fonts/roboto-light.svg#roboto-light') format('svg'),
       url('/assets/fonts/roboto-light.eot?#iefix') format('embedded-opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-bold.eot');
  src: url('/assets/fonts/roboto-bold.woff2') format('woff2'),
       url('/assets/fonts/roboto-bold.woff') format('woff'),
       url('/assets/fonts/roboto-bold.ttf') format('truetype'),
       url('/assets/fonts/roboto-bold.svg#roboto-bold') format('svg'),
       url('/assets/fonts/roboto-bold.eot?#iefix') format('embedded-opentype');
  font-weight: 700;
  font-style: normal;
}

.trl-l-loader{
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Arial", Tahoma, Sans-Serif;
    font-display: swap;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff url(/assets/images/background-pattern.png) repeat;
    z-index: 9999;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.trl-l-loader__header{
    padding: 28px 52px 28px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}

.trl-l-logo__imaap img, .trl-l-logo__trl img{
    max-width: 100%;
    height: 100%;
}
.trl-l-logo__imaap a{
    display: block;
    background: white;
    max-width: 110px;
}
.trl-l-logo__trl a{
    display: block;
    background: white;
    max-width: 125px;
    height: 18px;
}
.trl-l-logo__trl{
    margin-left: auto;
    width: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
    -ms-flex-pack: flex-end;

    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}
.trl-l-loader__content{
    height: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;

    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.trl-l-loader__footer{
    padding: 40px 0 45px;
    text-align: center;
}
.trl-l-loader__footer p{
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    color: #606060;
    font-weight: 300;
}
.trl-l-loader__wrap{

}
.trl-l-loader__wrap h5{
    margin: 23px 0 0 0;
    padding: 0;
    font-size: 14px;
    color: #000000;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}
.trl-l-loader__data{
    padding: 15px 0 0 0;
    text-align: center;
}
.trl-l-loader__data img{
    display: block;
    margin: 0 auto 26px;
    max-width: 100%;
    max-height: 100px;
}
.trl-l-loader__data h4{
    margin: 0 0 6px;
    padding: 0;
    font-size: 18px;
    color: #333333;
    font-weight: 500;
}
.trl-l-loader__data .trl-l-loader__version{
    display: block;
    line-height: normal;
    font-size: 14px;
    color: #606060;
    font-weight: 300;
}

.trl-l-loader__preloader {
    position: relative;
    width: 134px;
    height: 134px;
    margin: 0 auto;
    background: #ffffff;

    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.trl-l-loader-circle {
    position: absolute;
    border-top: 2px solid #404041;
    border-bottom: 2px solid transparent;
    border-left:  2px solid #404041;
    border-right: 2px solid transparent;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;

    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;

    animation: preloader 2s infinite;
    -webkit-animation: preloader 2s infinite;
    -moz-animation: preloader 2s infinite;
    -ms-animation: preloader 2s infinite;
    -o-animation: preloader 2s infinite;
}

.trl-l-loader-circle__one {
    width: 124px;
    height: 124px;
    border-top: 2px solid #ff641e;
    border-left: 2px solid #ff641e;
}

.trl-l-loader-circle__two {
    width: 104px;
    height: 104px;
    animation-delay: -.2s;
    -webkit-animation-delay: -.2s;
    -moz-animation-delay: -.2s;
    -ms-animation-delay: -.2s;
    -o-animation-delay: -.2s;
}

.trl-l-loader-circle__three {
    width: 78px;
    height: 78px;
    border-top: 2px solid #ff641e;
    border-left: 2px solid #ff641e;

    animation-delay: -.4s;
    -webkit-animation-delay: -.4s;
    -moz-animation-delay: -.4s;
    -ms-animation-delay: -.4s;
    -o-animation-delay: -.4s;
}
.trl-l-loader-circle__four{
    width: 52px;
    height: 52px;
    border-top: 2px solid #404041;
    border-left: 2px solid #404041;

    animation-delay: -.6s;
    -webkit-animation-delay: -.6s;
    -moz-animation-delay: -.6s;
    -ms-animation-delay: -.6s;
    -o-animation-delay: -.6s;
}
@keyframes preloader {
    50% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
@-webkit-keyframes preloader {
    50% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
@-moz-keyframes preloader {
    50% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
@-ms-keyframes preloader {
    50% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
@-o-keyframes preloader {
    50% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}


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

}

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

}

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

}

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

    .trl-l-loader-circle__one{
        width: 22px;
        height: 22px;
    }
    .trl-l-loader-circle__two {
        width: 48px;
        height: 48px;
    }
    .trl-l-loader-circle__three {
        width: 74px;
        height: 74px;
    }
    .trl-l-loader-circle__four {
        width: 94px;
        height: 94px;
    }
    .trl-l-loader__data h4{
        font-size: 13px;
    }
}
@media screen and (max-width: 480px){

    .trl-l-loader__header{
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media screen and (max-width: 320px){

}