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

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

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


.btn-link:hover {
    color: #d7e100;
    text-decoration: underline;
    text-shadow: 0px 0px 3px black;
}


.btn-group-toggle label.btn-secondary {
    color: #000;
    background-color: #ffffff;
    border-color: #00344e;
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
    background-color: #4a5763;
}


html,
body {
    font-family: 'RobotoSlab', Arial, Helvetica, sans-serif;
    height: 100%;
}

.tran-roboto-bold {
    font-family: 'RobotoSlabBold' !important;
}

.tran-roboto-regular {
    font-family: 'RobotoSlab' !important;
}

.tran-paladise {
    font-family: 'PaladiseScript' !important;
}

.tran-color-lightblue {
    color: #bee2f4 !important;
    font-size: calc(1em + 1vw)
}
/* Landscape */
@media (max-width: 998px) 
and (max-height: 640px)
and (orientation:landscape) {
    .tran-color-lightblue {
        font-size: 22px;
    }
}

.tran-color-blue {
    color: #2a2d96;
}

.tran-color-lime {
    color: #d4e200;
}

.tran-color-yellow {
    color: #edc905;
}

.tran-color-red {
    color: #bf0043;
}

.tran-color-purple {
    color: #9e8ebc;
}

.tran-color-pink {
    color: #f0a5bc !important;
}

.tran-color-orange {
    color: #f19800 !important;
}

.tran-color-cyan {
    color: #009cdd !important;
}

.tran-color-white {
    color: #ffffff;
}

.tran-color-green {
    color: #8ec6a6;
}

.tran-color-greenes {
    color: #28a745;
}

.tran-bg-primary {
    background: #2c3544;
}

.tran-bg-secondary {
    background: #c4cede;
}

.tran-bg-white {
    background: #ffffff;
}

.tran-bg-marq {
    background: #c0ffe0;
}

.tran-bg-greenes {
    background: #ddf545;
    color: #28a745;
    background-color: #ddf545;
    border-color: #ddf545;
}

.tran-bg-1 {
    background: url(../images/bg-1.png);
    animation: animatedBackground 300s ease infinite;
}

.tran-bg-2 {
    background: url(../images/bg-2.png);
    animation: animatedBackground 300s ease infinite;
}

.tran-button {
    border-radius: 32px !important;
    font-family: 'RobotoSlabBold' !important;
}

.tran-inputs {
    height: 55px;
    border-radius: 30px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 2px;
    border-left: 0px;
    border-style: solid;
    border-bottom-color: #9a9a9a;
    box-shadow: 3px 3px 2px #a38fc2;
    font-family: 'RobotoSlabBold' !important;
    font-size: calc(0.7em + 1.2vw);
    margin-bottom: 25px;
}

/* Landscape */
@media (max-width: 998px) 
and (max-height: 640px)
and (orientation:landscape) {
    .tran-inputs {
        height: 50px;
        margin-bottom: 15px;
    }
}


.tran-text {
    font-size: 24px;
}

.level-class {
    width: 100%;
    max-width: 200px;
}

.ins-class {
    width: 100%;
    max-width: 175px;
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 5px auto 5px auto;
    text-align: center;
    display: block;
}


/**/
.tran-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
.tran-loading img{
    max-height: 250px;
}

.tran-logo {
    max-width: 700px;
    width: 80%;
}

.tran-icon-car {
    max-height: 30px;
}

.tran-create {
    position: absolute;
    width: 100%;
    display: block;
    margin: 0px auto -15px auto;
    text-align: right;
    padding: 15px 0px 0px 0px;
    right: 15px;
    z-index: 10;
}

.tran-create img {
    margin-left: 10px;
}

.btn-group-toggle img {
    max-height: 75px;
}

.tran-back {
    position: absolute;
    z-index: 10;
    top: 15px;
}

.tran-back img {
    max-height: 50px;
}

#tranlogout {
    color: #650003;
    font-weight: bold;
    background: #df0209;
    width: auto;
    height: auto;
    padding: 0 5px 0 5px;
    margin-top: 15px;
    border-radius: 2px;
}

#tranlogout:hover {
    color: #fbd2d3;
    background: #7b0004;
}

.tran-title {
    font-size: calc(1.6em + 1.6vw);
    text-shadow: 2px 2px 0px #a38fc2;
}

.tran-cities .tran-content h2 {
    font-size: calc(0.8em + 1.8vw);
}

.tran-cities .tran-content a p {
    font-size: 24px;
    margin-bottom: 1px;
    line-height: 30px;
}

.tran-cities .col-7 .tran-content a p {
    font-size: 44px;
    margin-bottom: 1px;
    line-height: 30px;
}

.tran-cities .tran-content a {
    display: block;
    margin: 0 0 0px 0;
}
.tran-url-video{
    position: relative;
    z-index: 7;
    display: inline-block;
}


.tran-videos{
    width: 250px;
    margin: 15px 0 5px 0;
}
.tran-videos:hover{
    zoom: calc(1 + 0.1);
}

/* Landscape */
@media (max-width: 998px) 
and (max-height: 640px)
and (orientation:landscape) {
    .tran-cities .tran-content a img {
        width: 70% !important;
    }
}


.tran-cities .tran-content a label {
    font-size: 16px;
}

#tran-animate-1 {
    border-radius: 35px !important;
}

.tran-content {
    padding: 1px 15px 15px 15px;
    border-radius: 15px;
    position: relative;
    z-index: 3;
    opacity: 0.90;
}

.tran-brand {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

.tran-conacevito {
    max-height: 350px;
    position: relative;
    top: 563px;
    right: -500px;
    left: auto;
    display: block;
    margin: 0px 0 0 auto;
}

.tran-fonatin {
    max-height: 350px;
    top: 500px;
    left: -563px;
    position: relative;
}

@media (max-width: 769px) {
    .tran-conacevito {
        max-height: 250px;
    }

    .tran-fonatin {
        max-height: 250px;
    }
}

@media (max-width: 576px) {
    .tran-conacevito {
        max-height: 100px;
    }

    .tran-fonatin {
        max-height: 100px;
    }
}
/* Landscape */
/* Landscape */
@media (max-width: 998px) 
and (max-height: 640px)
and (orientation:landscape) {
    .tran-conacevito {
        max-height: 200px;
    }

    .tran-fonatin {
        max-height: 200px;
    }
}

.tran-name-ranking {
    font-size: 32px;
    font-family: 'RobotoSlab' !important;
}

.tran-name-level {
    font-size: 52px;
    font-family: 'RobotoSlabBold' !important;
}

.tran-table-ranking thead tr th {
    color: white;
    font-size: 28px;
}

.tran-table-ranking tbody tr th {
    color: white;
    font-size: calc(1em + 2vw);
    text-align: right;
    font-family: 'RobotoSlabBold' !important;
}

.tran-table-ranking tbody tr td {
    color: #d4e200;
    font-size: 32px;
    text-align: center;
    font-weight: bold;
}

.tran-table-ranking.table td,
.tran-table-ranking.table th {
    padding: 0rem .5rem 0rem .5rem;
}

.tran-prev {
    position: absolute;
    top: 15px;
    left: 100px;
}

.tran-next {
    position: absolute;
    top: 15px;
    right: 100px;
}

.tran-prev .carousel-control-prev-icon,
.tran-next .carousel-control-next-icon {
    width: 50px;
    height: 50px;
}

@media (max-width: 769px) {
    .tran-prev {
        left: 0;
    }

    .tran-next {
        right: 0;
    }
}

.tran-game-choose {
    /*margin-top: 150px;*/
}

.tran-game-choose .tran-message p {
    font-size: calc(0.7em + 1vw);
    position: absolute;
    left: 0;
    right: 0;
    font-weight: 600;
    top: 25px;
}

.tran-image-message {
    width: 360px;
    height: 210px;
    top: 5px;
    left: 10px;
    position: relative;
    z-index: -1;
}

@media (min-width: 768px){
    .tran-message img {
        width: 70%;
    }
}
/* Landscape */
@media (max-width: 998px) 
and (max-height: 640px)
and (orientation:landscape) {
    .tran-message img {
        width: 60%;
    }
}



.tran-carousel-game .carousel-item a {
    display: inline-block;
}

.tran-carousel-game .carousel-item a img {
    border-radius: 25px;
    margin: 15px 15px 15px 15px;
    width: 100%;
    max-width: 175px;
    transition: all 200ms ease-in-out;
}

.tran-carousel-game .carousel-item a img:hover {
    border: 4px solid #0edeff;
    border-radius: 55px;
    box-shadow: 0px 0px 11px 1px #52e7ff;
}

@media (max-width: 769px) {

    .tran-carousel-game .carousel-item a img:hover {
        border-radius: 55px;
    }

}

@media (max-width: 576px) {
    .tran-game-choose .tran-message p {
        font-size: 16px;
    }

    .tran-image-message {
        width: 320px;
        height: 175px;
        left: 20px;
    }

    .tran-carousel-game .carousel-item a img {
        border-radius: 25px;
        max-width: 125px;
    }

    .tran-carousel-game .carousel-item a img:hover {
        border-radius: 40px;
    }
}
@media (max-width: 375px) {
    
    .tran-carousel-game .carousel-item a img {
        border-radius: 15px;
        max-width: 105px;
    }

    .tran-carousel-game .carousel-item a img:hover {
        border-radius: 20px;
    }
}
/* Landscape */
@media (max-width: 998px) 
and (max-height: 640px)
and (orientation:landscape) {
    .tran-content .col.col-sm-10.col-md-8.col-lg-8{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .tran-carousel-game .carousel-item a img {
        max-width: 115px;
        margin: 15px 5px 15px 5px;
    }
}


/* SVG MAPA EL SALVADOR*/
.st0 {
    fill: #168bc5;
    stroke: #95D6EF;
    stroke-miterlimit: 10;
    transition: all 200ms ease-in-out;
}

.st0:hover {
    fill: #00344e;
    cursor: pointer
}

.st1 {
    fill: #168bc5;
    stroke: #95D6EF;
    stroke-miterlimit: 10;
    transition: all 200ms ease-in-out;
}

.st1:hover {
    fill: #00344e;
    cursor: pointer;
}

.st2 {
    fill: #168bc5;
    stroke: #95D6EF;
    stroke-miterlimit: 10;
    transition: all 200ms ease-in-out;
}

.st2:hover {
    fill: #00344e;
    cursor: pointer;
}

.st0.selected,
.st1.selected,
.st2.selected {
    fill: #fff !important;
}

.st3 {
    fill: #168bc5;
}

.st4 {
    fill: #95D6EF;
}

.st5 {
    fill: #6FB353;
}

.st6 {
    fill: #F7EC9B;
}

.st7 {
    fill: #DE99BF;
}

.st8 {
    fill: #95D6EF;
}

.st9 {
    fill: #9484BB;
}

.st10 {
    fill: #E09BB0;
}

.st11 {
    fill: #168bc5;
}

.st12 {
    fill: #168bc5;
}

.st13 {
    fill: #F0C431;
}

.st14 {
    fill: #95D6EF;
}

.st15 {
    fill: #000000;
}

.st16 {
    fill: #000000;
}

.st17 {
    fill: #000000;
}

.tran-svmap {
    max-width: 768px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

/*
.slide-tl {
	-webkit-animation: slide-tl 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
	        animation: slide-tl 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
*/
.tran-animate-r-to-l {
    animation: tran-animate-r-to-l 3s forwards;
}

.tran-animate-l-to-r {
    animation: tran-animate-l-to-r 3s forwards;
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    animation-name: flip;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
}



/* ----------------------------------------------
 * Generated by Animista on 2020-2-5 20:38:45
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-tl
 * ----------------------------------------
 */
/*
 @-webkit-keyframes slide-tl {
    0% {
      -webkit-transform: translateY(0) translateX(0);
              transform: translateY(0) translateX(0);
    }
    100% {
      -webkit-transform: translateY(-100px) translateX(-100px);
              transform: translateY(-100px) translateX(-100px);
    }
  }
  @keyframes slide-tl {
    0% {
      -webkit-transform: translateY(0) translateX(0);
              transform: translateY(0) translateX(0);
    }
    100% {
      -webkit-transform: translateY(-100px) translateX(-100px);
              transform: translateY(-100px) translateX(-100px);
    }
  }
  */

@keyframes tran-animate-r-to-l {
    from {
        top: 563px;
        right: -500px;
    }

    to {
        top: 0;
        right: 0;
    }
}

@keyframes tran-animate-l-to-r {
    from {
        top: 500px;
        left: -563px;
    }

    to {
        top: 0;
        left: 0;
    }
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 5000px 0;
    }
}

@keyframes flip {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    to {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}





/*******************************************************************************/
/****************************MEDIA QUERIES****************************/
/*******************************************************************************/