#trop-logo{
    position: fixed;
    width: 100%;
    height: 100vh;
    font-size: clamp( 30px, 5vw ,80px);
    font-size: clamp( 24px, 4vw ,55px);
    font-family: Arial, sans-serif;
    pointer-events: none;
    z-index: 10;
}

#trop-logo.logo_fixed{
    position: fixed;
}
#trop-logo.logo_absolute{
    position: absolute;
}

body.font1{
    font-family: Arial, sans-serif !important;
}
body.font2{
    font-family: "Trebuchet MS", sans-serif !important;
}
body.font3{
    font-family: Verdana, sans-serif !important;
}
body.font4{
    font-family: "Times New Roman", serif !important;
}
body.font5{
    font-family: Palatino, serif !important;
}
body.font6{
    font-family: Georgia, serif !important;
}
body.font7{
    font-family: "Courier New", sans-serif !important;
}



#trop-logo.font1{
    font-family: Arial, sans-serif;
    line-height: 76%;
}
#trop-logo.font2{
    font-family: "Trebuchet MS", sans-serif;
    line-height: 65%;
}
#trop-logo.font3{
    font-family: Verdana, sans-serif;
    line-height: 65%;
}
#trop-logo.font4{
    font-family: "Times New Roman", serif;
    line-height: 65%;
}
#trop-logo.font5{
    font-family: Palatino, serif;
    line-height: 86%;
}
#trop-logo.font6{
    font-family: Georgia, serif;
    line-height: 71%;
}
#trop-logo.font7{
    font-family: "Courier New", sans-serif;
    line-height: 60%;
}

#T,#R,#O,#P{
    position: absolute;
    /* line-height: 77%; */
    /* transition: all 5s ease; */
    transition: left 5s ease, top 5s ease;
    z-index: 11;
    pointer-events: all;
}

.logo_start #T{
    left: -4px;
    top: 0;
}
    .font2 .logo_start #T{
        top: 2px;
    }
.logo_start #R{
    left: 33%;
    top: 0;
}
    .font2 .logo_start #R{
        top: 2px;
    }
.logo_start #O{
    left: 66%;
    top: 0;
}
    .font2 .logo_start #O{
        top: 2px;
    }
.logo_start #P{
    /* left: 98.1%;
    left: 98.2%; */
    top: 0;
    left: 100%;
    transform: translateX(-97%);
}
    .font1 .logo_start #P{
        /* left: 97.7%; */
        left: 100%;
        transform: translateX(-97%);
    }
    .font2 .logo_start #P{
        top: 2px;
    }
    .font7 .logo_start #P{
        transform: translateX(-93%);
    }

.logo1 #T{
    left: -4px;
    top: 0;
}
    .font2 .logo1 #T{
        top: 3px;
    }
.logo1 #R{
    left: 33%;
    top: 0;
}
    .font2 .logo1 #R{
        top: 3px;
    }
.logo1 #O{
    left: 66%;
    /* top: 96.1vh; */
    top: 100vh;
    transform: translateY(-100%);
}
    .font2 .logo1 #O{
        /* top: 94.5vh; */
        top: 100vh;
        transform: translateY(-100%);
    }
.logo1 #P{
    /* left: 98.1%; */
    left: 100%;
    /* top: 96.1vh; */
    top: 100vh;
    transform: translateY(-100%) translateX(-97%);
}
    .font2 .logo1 #P{
        /* left: 97.45%; */
        left: 100%;
        /* top: 94.5vh; */
        top: 100vh;
        transform: translateY(-100%) translateX(-97%);
    }

.logo2 #T{
    left: -4px;
    top: 0;
}
    .font2 .logo2 #T{
        top: 3px;
    }
.logo2 #R{
    left: 48%;
    top: 0;
}
    .font2 .logo2 #R{
        top: 3px;
    }
.logo2 #O{
    /* left: 97.8%; */
    left: 100%;
    transform: translateX(-100%);
    top: 0;
}
    .font2 .logo2 #O{
        top: 3px;
    }
    .font3 .logo2 #O{
        /* left: 96.7%; */
        top: 2px;
    }
    .font7 .logo2 #O{
        /* left: 97.5%; */
        top: 2px;
    }
.logo2 #P{
    left: -4px;
    /* top: 96.1vh; */
    top: 100vh;
    transform: translateY(-100%);
}
    .font3 .logo2 #P{
        left: -7px;
    }
    .font7 .logo2 #P{
        left: -7px;
        /* top: 95.5vh; */
    }

.logo3 #T{
    left: -4px;
    top: 0;
}
    .font2 .logo3 #T{
        top: 3px;
    }
.logo3 #R{
    /* left: 97.8%; */
    left: 100%;
    transform: translateX(-100%);
    top: 0;
}
    .font2 .logo3 #R{
        top: 3px;
        /* left: 97.2% */
    }
.logo3 #O{
    /* left: 97.8%; */
    left: 100%;
    transform: translateX(-100%);
    top: 48vh;
}
    .font2 .logo3 #O{
        /* left: 97%; */
        transform: translateX(-95%);
    }
.logo3 #P{
    /* left: 98.1%;     */
    /* top: 96.1vh; */
    top: 100vh;
    left: 100%;
    transform: translateX(-100%) translateY(-100%);
}
    .font2 .logo3 #P{
        /* left: 97.5%;
        top: 94.6vh; */
        transform: translateX(-95%) translateY(-100%);
    }

.logo4 #T{
    left: -4px;
    top: 0;
}
    .font2 .logo4 #T{
        top: 3px;
    }
.logo4 #R{
    left: 100%;
    top: 0;
    transform: translateX(-100%);
}
    .font2 .logo1 #R{
        top: 3px;
    }
.logo4 #O{
    left: -3px;
    top: 100vh;
    transform: translateY(-95%);
}
.logo4 #P{
    left: 100%;
    top: 100vh;
    transform: translateY(-95%) translateX(-100%);
}


.logo5 #T{
    left: -4px;
    top: 0;
}
    .font2 .logo5 #T{
        top: 3px;
    }
.logo5 #R{
    left: 97.8%;
    top: 0;
}
    .font2 .logo5 #R{
        top: 3px;
    }
    .font3 .logo5 #R{
        left: 96.9%;
    }
.logo5 #O{
    left: -2px;
    top: 48vh;
}
    .font3 .logo5 #O{
        left: -4px;
    }
.logo5 #P{
    left: -4px;    
    top: 100vh;
    transform: translateY(-95%);
}
    .font3 .logo5 #P{
        left: -7px;
    }


.logo6 #T{
    left: -4px;
    top: 0;
}
    .font2 .logo6 #T{
        top: 3px;
    }
.logo6 #R{
    left: -4px;
    top: 100vh;
    transform: translateY(-95%);
}
    .font7 .logo6 #R{
        /* top: 95.5vh; */
    }
.logo6 #O{
    left: 48%;
    top: 100vh;
    transform: translateY(-95%);
}
    .font7 .logo6 #O{
        /* top: 95.5vh; */
    }
.logo6 #P{
    left: 100%; 
    top: 100vh;
    transform: translateY(-95%) translateX(-100%);
}
    .font7 .logo6 #P{
        /* left: 97.5%; */
        /* top: 95.5vh; */
        transform: translateY(-95%) translateX(-97%);
    }


.logo7 #T{
    left: -4px;
    top: 0;
}
    .font2 .logo7 #T{
        top: 3px;
    }
.logo7 #R{
    left: -4px;
    top: 32vh;
}
.logo7 #O{
    left: -4px;
    top: 65vh;
}
.logo7 #P{
    left: -4px;    
    top: 100vh;
    transform: translateY(-97%);
}
    .font7 .logo7 #P{
        left: -7px;
        /* top: 95.5vh; */
    }


.logo_end #T{
    left: -4px;
    top: 100vh;
    transform: translateY(-95%);
}
    .logo_end.font5 #T{
        transform: translateY(-81%);
    }
.logo_end #R{
    left: 33%;
    top: 100vh;
    transform: translateY(-95%);
}
    .logo_end.font5 #R{
        transform: translateY(-81%);
    }
.logo_end #O{
    left: 66%;
    top: 100vh;
    transform: translateY(-95%);
}
    .logo_end.font5 #O{
        transform: translateY(-81%);
    }
.logo_end #P{
    left: 100%;    
    top: 100vh;
    transform: translateY(-95%) translateX(-97%);
}
    .logo_end.font5 #P{
        transform: translateY(-81%) translateX(-97%);
    }



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


    .logo_start #T{
        left: -1px;
        top: 0;
    }
    .logo_start #R{
        left: 33%;
        top: 0;
    }
    .logo_start #O{
        left: 66%;
        top: 0;
    }
    .logo_start #P{
        /* left: 95.8%; */
        left: 100%;
        top: 0;
        transform: translateX(-100%);
    }
    
    .logo1 #T{
        left: -2px;
        top: 0;
    }
    .logo1 #R{
        left: 33%;
        top: 0;
    }
    .logo1 #O{
        left: 66%;
        top: 100vh !important;
        transform: translateY(-97%);
    }
    .logo1 #P{
        left: 100%;
        top: 100vh !important;
        transform: translateY(-97%) translateX(-100%);
    }
    
    .logo2 #T{
        left: -2px;
        top: 0;
    }
    .logo2 #R{
        left: 48%;
        top: 0;
    }
    .logo2 #O{
        /* left: 94%; */
        left: 100%;
        transform: translateX(-100%);
        top: 0;
    }
    .logo2 #P{
        left: -2px;
        top: 100vh !important;
        transform: translateY(-97%);
    }
    
    .logo3 #T{
        left: -2px;
        top: 0;
    }
    .logo3 #R{
        /* left: 94%; */
        left: 100%;
        transform: translateX(-100%);
        top: 0;
    }
    .logo3 #O{
        /* left: 94%; */
        left: 100%;
        transform: translateX(-100%);
        top: 48vh;
    }
    .logo3 #P{
        /* left: 94.8%;     */
        left: 100%;
        /* top: 96.1vh; */
        top: 100vh !important;
        transform: translateY(-97%) translateX(-100%);
    }
    
    .logo4 #T{
        left: -2px;
        top: 0;
    }
    .logo4 #R{
        /* left: 94%; */
        left: 100%;
        transform: translateX(-100%);
        top: 0;
    }
    .logo4 #O{
        left:0;
        /* top: 96.1vh; */
        top: 100vh !important;
        transform: translateY(-97%);
    }
    .logo4 #P{
        left: 100%;    
        /* top: 96.1vh; */
        top: 100vh !important;
        transform: translateY(-97%) translateX(-100%);
    }
    
    
    .logo5 #T{
        left: -2px;
        top: 0;
    }
    .logo5 #R{
        /* left: 94%; */
        left: 100%;
        transform: translateX(-100%);
        top: 0;
    }
    .logo5 #O{
        left:0;
        top: 48vh;
    }
    .logo5 #P{
        left: -2px;    
        top: 100vh !important;
        transform: translateY(-97%);
    }
    
    
    .logo6 #T{
        left: -2px;
        top: 0;
    }
    .logo6 #R{
        left: -2px;
        /* top: 96.1vh; */
        top: 100vh !important;
        transform: translateY(-97%);
    }
    .logo6 #O{
        left: 48%;
        /* top: 96.1vh; */
        top: 100vh !important;
        transform: translateY(-97%);
    }
    .logo6 #P{
        /* left: 94%;     */
        left: 100%;
        /* top: 96.1vh; */
        top: 100vh !important;
        transform: translateY(-97%) translateX(-100%);
    }
    
    
    .logo7 #T{
        left: -2px;
        top: 0;
    }
    .logo7 #R{
        left: -2px;
        top: 32vh;
    }
    .logo7 #O{
        left: -2px;
        top: 65vh;
    }
    .logo7 #P{
        left: -2px;    
        top: 100vh !important;
        transform: translateY(-97%);

    }
    
    
    .logo_end #T{
        left: -1px;
        /* top: 96.1vh; */
    }
    .logo_end #R{
        left: 33%;
        /* top: 96.1vh; */
    }
    .logo_end #O{
        left: 66%;
        /* top: 96.1vh; */
    }
    .logo_end #P{
        /* left: 94.8%;     */
        /* top: 96.1vh; */
    }



}