body{

    font-family: 'Dosis', sans-serif;

    /*font-size: 18px;*/

}

.intro {

    display: table;

    width: 100%;

    height: 650px;

    /*text-align: center;*/

    color: white;

    background: url(../img/background_hd.jpg) no-repeat center;

    /*background-color: black;*/

    padding: 150px 0;



}



h1{

    font-family: "Arial Black", Gadget, sans-serif;

    font-size: 4rem;

    color: teal;

}

h2{

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

    color: lightgoldenrodyellow;

}



h3{

    font-family: "Comic Sans MS", cursive, sans-serif;



}

.map-container{

    overflow:hidden;

    /*padding-bottom:56.25%;*/

    position:relative;

    height:300px;

}

.map-container iframe{

    left:0;

    top:0;

    height:100%;

    width:100%;

    position:absolute;

}





.line{

    font-family: "Comic Sans MS", cursive, sans-serif;

    font-size: 2rem;

    /* z-index: -29; */

    overflow: hidden;

}

.line > .row{    width: 100%; position:relative; left:7%; }





.line-item {

    height: 100px;

    min-width: 78px;

    display: flex;

    justify-content: center;

    align-items: center;

    /*transition: all .5s ease;*/

}

@media (max-width: 1300px) {  

	.line > .row{    width: 100%; position:relative; left:8%;   }   

	.line-item {  min-width: 70px; }

}

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

	.line-item {  min-width: 59px; }   

	.line > .row{     position:relative; left:7%; }  

}

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

	.line-item {  min-width: 50px; }   

	.line > .row{     position:relative; left:10%; }  

}





.main-item > span:not(.dots){

    color: red;

    font-size: 230%;

}



.moving-left{   animation-name: move-left;   animation-duration: .4s; }

.moving-left-ten{   animation-name: move-left;   animation-duration: .15s; }



.move-left-finish{

    display: none;

}

@keyframes move-left {

    0% {

        margin-left: 0;

    }

    75%{

        margin-left: -78px;

    }

    100% {

        display: none;

    }

}



.reversing-left{

    animation-name: reverse-left;

    animation-duration: .5s;

}

.reverse-left-finish{

    display: flex;

}

@keyframes reverse-left {

    0% {

        margin-left: -90px;

        display: none;

    }

    25%{

        display: flex;

    }

    100% {

        margin-left: 0px;

    }

} 



/*----- back 100 ----*/

.reversing-left-100{

    animation-name: reverse-left-100;

    animation-duration: 1s;

}

@keyframes reverse-left-100 {

    0% {

        margin-left: -9500px;

        

    }

    75%{

        display: flex;

    }

    100% {

        /*margin-left: 0px;*/

    }

} 



.image-disabled{pointer-events:none;opacity:0.5}

#dragimg1{
    width: 40px!important;

}

#battle .ui-draggable{
    /* width:50px!important;
    height:auto!important; */
}