@font-face {
    font-family: 'GOTHIC';
    src: url('../Font/GOTHIC.TTF') format('truetype');
}
body {
    margin: 0px;
    background-color: #14181B;
    font-family: 'GOTHIC';
    color: #EEC724;
}
a {
    text-decoration: none;
}

    a:link, a:visited {
        color: #EEC724;
    }

    a:hover {
        color: #EEC724;
    }
.header {
    position: relative;
    width: 100%;
    height: 70px;
    background-color: #21292F;
}
    .header img{
        position:absolute;
        height:60px;
        top:5px;
        left:2%;
    }
    .slider {
        position: relative;
        margin-top: 8px;
        width: 94%;
        height: 200px;
        background-color: #21292F;
        left: 3%;
        color: #EEC724;
    }
.SideRightSlider {
    position: absolute;
    width: 5px;
    height: 100%;
    background-color: #EEC724;
}
.SliderHeader {
    position: absolute;
    width: calc(100% - 5px);
    left: 5px;
    color: #EEC724;
    font-size: 17px;
    padding-left: 7px;
    top: 0px;
    margin-top: 10px;
}
.Main {
    position: relative;
    margin-top: 8px;
    width: 94%;
   
   
    left: 3%;
}
.MainCont{
width:70%;
}
.RateBox {
    position: relative;
    display: inline-table;
    margin: 1px;
    width: calc(25% - 9px);
    background-color: #21292F;
    min-height: 100px;
    color: #EEC724;
    top: 0px;
}
.RateHeader{
    position:absolute;
    margin-left:5px;
    margin-top:5px;
    font-size:14px;
}
.ADS1{
    position:absolute;
    left:70%;
   margin:5px;
   height:500px;
   width:calc(30% - 2px);
   background-color:white;
}
.ADS1 img{
    width:100%;
}
.HeaderCal {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #242424;
}

.rootCal {
    position: relative;
    width: 500px;
    height: 100px;
    margin-top: 3px;
    left:20px;
    top:50px;
}

.RateBoxA {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 14px
}

.sepCal {
    position: absolute;
    width: calc(100% - 5px);
    right: 5px;
    height: 50px;
    border-bottom: solid #FBBD13 .9px;
    top: 0px;
}

.sepCal2 {
    position: absolute;
    width: calc(100% - 5px);
    right: 5px;
    height: 50px;
    top:51px;
   
}




.dropboxcur {
    position: relative;
   
    text-align: center;
    color: #FBBD13;
    border: none;
    height: 49px;
    width: 100%;
    right: 0px;
}
.divmos {
    height: 0px;
    width: 100%;
    top: 0px;
    display: none;
    z-index: 1;
}
.currencyBox {
    position: relative;
    width: 100px;
   
    height: 100%;
    line-height: 50px;
    text-align: center;
    color: #FBBD13;
}

.CanvertBox {
    position: absolute;
    top: 35px;
    height: 30px;
    width: 30px;
    background-color: #242424;
    right: 15px;
    text-align: center;
    color: #FBBD13;
    font-size: 25px;
}

.numberbox {
    position: absolute;
    width: 395px;
    height: 100%;
    right: 0px;
    text-align: center;
    top: 0px;
    color: #FBBD13;
}

.textboxcur {
    background-color: #323232;
    text-align: center;
    top: 5px;
    color: #FBBD13;
    border: none;
    height: 48px;
    width: 100%
}
h1 {
    font-size: 18px;
    margin-top: 30px;
}
    .textboxcur:focus {
        outline: none;
    }

.dropboxcur {
    position: absolute;
    background-color: #242424;
    text-align: center;
    color: #FBBD13;
    border: none;
    height: 49px;
    width: 100%;
    right: 0px;
}
h5 {
    position: absolute;
    top: 5px;
    font-size: 9px;
    margin-left: 5px;
    color: #B58503;
}
    .dropboxcur:focus {
        outline: none;
    }
.PriceBox{
    position:absolute;
    right:0px;
    top:0px;
    margin:5px;
    font-size:23px;
   width:200px;
    text-align:right;

    
    
}
.double-bounce1, .double-bounce2 {
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #242424;
    opacity: 0.9;
    position: absolute;
    z-index: 3;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}


.percentDiv {
    position: absolute;
    right: 0px;
    font-size: 16px;
   
    line-height: 16px;
    top: 30px;
    width: 50%;
    color: white;
    font-size: 12px;
   
   
    animation: Hidediv 3s 3;
    animation-iteration-count: infinite;
    animation-direction: forward;
    background-color: #222838;
   
}

@keyframes Hidediv {
    0% {
        opacity: 0;
        display: none;
    }

    25% {
        opacity: 0;
        display: none;
    }

    75% {
        opacity: 1;
        display: block;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

@keyframes Hidediv2 {
    0% {
        opacity: 0;
        display: none;
    }

    25% {
        opacity: 0;
        display: none;
    }

    75% {
        opacity: 1;
        display: block;
    }

    100% {
        opacity: 1;
        display: block;
    }
}
.percentDiv2 {
    color: white;
   
    margin: 0px;
    text-align: right;
    width: 80px;
    animation: Hidediv2 3s 3;
    animation-iteration-count: infinite;
    animation-direction: forward;
    background-color: #222838;
    text-align: right;
}
.colorMain {
    background-color: #21292F;
}
.CurrencyPriceTa {
    position: absolute;
    display: inline;
    right: 0px;
    font-size: 16px;
   
    line-height: 16px;
    top: 30px;
    color: green;
    font-size: 12px;
    text-align: left;
    
    text-align: right;
}

.CurrencyPriceTa2 {
    position: absolute;
    left: .4px;
    color: green;
    text-align: right;
}
.updateTime {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
   background-color:#FBBD13;
   color : black;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
   
}
.ColorBackRed {
    color: red;
}

.ColorBackGreen {
    color: green;
}
.ColorBlue {
    color: deepskyblue;
}
@keyframes bounce {
    0%, 100% {
        transform: scale(0);
        -webkit-transform: scale(0)
    }

    50% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}
.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    z-index:3;
}
.thirdSec {
    position: absolute;
    width: 100%;
    height: 142px;
    background-color: #242424;
    margin-top: 3px;
}

    .thirdSec h6 {
        position: relative;
        top: 5px;
        right: 5px;
        color: #FBBD13;
        font-size: 12px;
        display: table-row-group;
        line-height: 25px
    }

    .thirdSec img {
        width: calc(100% - 30px);
        margin: 15px;
    }
    h2{
        font-size:18px;
        margin-top:30px;
    }
   .ads2{
       position:absolute;
       margin-top:10px;
       right:10px;
       width:60%;
       height:180px;
   }
   .ads2 img{
       width:100%;
       height:100%;
   }
.sepCalconV {
    position: absolute;
    width: calc(100% - 5px);
    right:auto;
    height: 50px;
    border-bottom: solid #FBBD13 .9px;
    top: 0px;
    left:0px;
}

.sepCal2Conv {
    position: absolute;
    width: calc(100% - 5px);
    right: auto;
    height: 50px;
    border-bottom: hidden;
    top: 50px;
    left: 0px;
}
.shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px #B58503);
    filter: drop-shadow( 5px 1px 3px #B58503);
}
.ColorBackRed {
    color: red;
}

.ColorBackGreen {
    color: green;
}

.RateBox img {
    position: absolute;
    top: 35px;
    height: 30px;
    width:50px;
    left: 5px;
    transition: all 200ms ease-in;
    filter: grayscale(0) opacity(1);
}
.RateBox:hover > .RateBox img {
   
    filter: grayscale(1) opacity(.8);
}
.footer {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 50px;
    height: 300px;
    background-color: #21292F;
}
.footerInfo{
    position:absolute;
    width:20%;
    left:50px;
    top:95px;
    text-align:justify;
    font-size:14px;

}
.footer img {
    position: absolute;
    left: 40px;
    width: 20%;
}
.footerCopy{
    position:absolute;
    width:100%;
    bottom:0px;
    height:50px;
    line-height:50px;
    text-align:center;
}
.footerLink {
    position: relative;
    left: 30%;
    top: 10px;
    width: 60%;
    text-align: left;
   
}
.linkk {
    position: relative;
    width: 30%;
    margin: 8px;
    display:inline-table;
    font-size:13px;
}
@media only screen and (max-width: 1450px) {
    .RateBox {
        position: relative;
        display: inline-table;
        margin: 1px;
        width: calc(33% - 9px);
        background-color: #21292F;
        min-height: 100px;
        color: #EEC724;
        top: 0px;
    }
}
@media only screen and (max-width: 1400px) {
    .RateBox {
        position: relative;
        display: inline-table;
        margin: 1px;
        width: calc(33% - 9px);
        background-color: #21292F;
        min-height: 100px;
        color: #EEC724;
        top: 0px;
    }
    .ads2 {
        position: absolute;
        margin-top: 50px;
        right: 10px;
        width: 50%;
        height: auto;
        
    }

        .ads2 img {
            width: 100%;
            height: 100%;
        }

}
@media only screen and (max-width: 1200px) {
    .RateBox {
        position: relative;
        display: inline-table;
        margin: 1px;
        width: calc(100% - 2px);
        background-color: #21292F;
        min-height: 100px;
        color: #EEC724;
        top: 0px;
    }

    .ads2 {
        position: absolute;
        margin-top: 50px;
        right: 10px;
        width: 50%;
        height: auto;
        display:none;
    }

        .ads2 img {
            width: 100%;
            height: 100%;
        }
    .ADS1 {
        position: relative;
        left: 0%;
        margin: 5px;
        height: 500px;
      width:100%;
        background-color: white;
        display:none;
    }

        .ADS1 img {
            width: 100%;
        }
    .MainCont {
        width: 100%;
    }

    .rootCal {
        position: relative;
        width:calc( 100% - 40px);
        height: 100px;
        margin-top: 3px;
        left: 20px;
        top: 50px;
    }
    .numberbox {
        position: absolute;
        width: 68%;
        height: 100%;
        right: 0px;
        text-align: center;
        top: 0px;
        color: #FBBD13;
    }
    .footer {
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: 50px;
        height: auto;
        background-color: #21292F;
    }

    .footerInfo {
        position: relative;
        width: 95%;
        left: 5px;
        top: 105px;
        text-align: justify;
    }

    .footer img {
        position: absolute;
        left: 5px;
        width: 80%;
    }

    .footerCopy {
        position: relative;
        width: 100%;
        bottom: 0px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-top:50px;
    }

    .footerLink {
        position: relative;
       margin-top:100px;
        top: 10px;
        width: 95%;
        text-align: left;
        left:0px;
    }
   

    .linkk {
        position: relative;
        width: 100%;
        margin: 8px;
        display: inline-table;
    }
}