body{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
overflow: hidden;
height: 100vh;
}
div.banner{
background: url(../img/line/full-screen-banners-led-60.gif) no-repeat;
position: absolute;
background-size: cover;
height: 100%;
width: 100%;
}

.textGoldmedal, .textLed {
position: absolute;
width: 56%;
right: 10%;
top: 25%;
}

.textLed {
    top: 43%;
}

svg{
    font-family: 'Monoton';
    display: block;
}
                        
svg.goldmedalname {
    font-size: 4.5em;
    width: 100%;
    height: 290px;
    display: block;
    margin-left: 40px;
}

svg.ledname {
    font-size: 12em;
    height: 336px;
    width: 100%;
    letter-spacing: 16px;
    margin-left: 13px;
}

.textGM {
fill: none;
stroke: white;
stroke-dasharray: 8% 29%;
stroke-width: 5px;
stroke-dashoffset: 1%;
animation: stroke-offset 5.5s infinite linear;
}


.text {
fill: none;
stroke: white;
stroke-dasharray: 8% 29%;
stroke-width: 5px;
stroke-dashoffset: 1%;
animation: stroke-offset 5.5s infinite linear;
}

.text:nth-child(1){
stroke: #FF8CC0;
animation-delay: -1;
}
.text:nth-child(2){
stroke: #11CAFF;
animation-delay: -2s;
}
.text:nth-child(3){
stroke: #D7FF4E;
animation-delay: -3s;
}
.text:nth-child(4){
stroke: #F8FFFF;
animation-delay: -4s;
}
.text:nth-child(5){
stroke: #005DFF;
animation-delay: -5s;
}



@keyframes stroke-offset{
100% {
stroke-dashoffset: -35%;
}
}
.wrapLed{
    display: none;
}

@media(max-width: 767px){
    div.banner{
        background-position: 20%;
    }
}

@media (min-width: 1300px){
    .wrapLed{
        display: block !important;
    }
}


.custom_icon{
    width: 25px;
    height: 46px;
    border: 2px solid #fff;
    border-radius: 18px;
    position: absolute;
    left: 50%;
    bottom: 60px;
    z-index: 2;
    margin-left: -12px;
    -webkit-animation: caption-start 1.5s ease .2s infinite;
    -moz-animation: caption-start 1.5s ease .2s infinite;
    -ms-animation: caption-start 1.5s ease .2s infinite;
    -o-animation: caption-start 1.5s ease .2s infinite;
    animation: caption-start 1.5s ease .2s infinite;
}

.custom_dot{
    background: none repeat scroll 0 0 white;
    border-radius: 50%;
    height: 5px;
    left: 10px;
    opacity: 1;
    position: absolute;
    top: 9px;
    width: 5px;
}
.custom_dot:after{
    content: " ";
    background: none;
    border: 2px solid #FFF;
    border-radius: 50%;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-animation: 2000ms ease-in 0ms normal none infinite circle-border-scale;
    -moz-animation: 2000ms ease-in 0ms normal none infinite circle-border-scale;
    -o-animation: 2000ms ease-in 0ms normal none infinite circle-border-scale;
    animation: 2000ms ease-in 0ms normal none infinite circle-border-scale;
    }

    
@-webkit-keyframes caption-start {
  0%{ 
        -webkit-transform: translate3d(0,0,0);
    }
  50% { 
        -webkit-transform: translate3d(0,10px,0);
    }
  100% { 
        -webkit-transform: translate3d(0,0,0);
    }
}
@-moz-keyframes caption-start{
  0%{ 
        -moz-transform: translate3d(0,0,0);
    }
  50% { 
        -moz-transform: translate3d(0,10px,0);
    }
  100% { 
        -moz-transform: translate3d(0,0,0);
    }
}
@-o-keyframes caption-start {
  0%{ 
        -o-transform: translate3d(0,0,0);
    }
  50% { 
        -o-transform: translate3d(0,10px,0);
    }
  100% { 
        -o-transform: translate3d(0,0,0);
    }
}
@keyframes caption-start {
  0%{ 
        transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
    }
  50% { 
        transform: translate3d(0,10px,0);
        -ms-transform: translate3d(0,10px,0);
    }
  100% { 
        transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
    }
}
    
@keyframes circle-border-scale{
    0% {
        width:100%;
        height:100%;
        left:0;
        top:0;
        opacity:1
    }
    30% {
        width:21px;
        height:21px;
        left:-8px;
        top:-8px;
        opacity:0;
    }
    100% {
        width:21px;
        height:21px;
        left:-8px;
        top:-8px;
        opacity:0;
    }
    
}
@-webkit-keyframes circle-border-scale{
    0% {
        width:100%;
        height:100%;
        left:0;
        top:0;
        opacity:1
    }
    30% {
        width:21px;
        height:21px;
        left:-8px;
        top:-8px;
        opacity:0;
    }
    100% {
        width:21px;
        height:21px;
        left:-8px;
        top:-8px;
        opacity:0;
    }
}

@-moz-keyframes circle-border-scale{
    0% {
        width:100%;
        height:100%;
        left:0;
        top:0;
        opacity:1
    }
    30% {
        width:21px;
        height:21px;
        left:-8px;
        top:-8px;
        opacity:0;
    }
    100% {
        width:21px;
        height:21px;
        left:-8px;
        top:-8px;
        opacity:0;
    }
}

@-o-keyframes circle-border-scale{
    0% {
        width:100%;
        height:100%;
        left:0;
        top:0;
        opacity:1
    }
    30% {
        width:21px;
        height:21px;
        left:-8px;
        top:-8px;
        opacity:0;
    }
    100% {
        width:21px;
        height:21px;
        left:-8px;
        top:-8px;
        opacity:0;
    }
}