/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 10, 2019, 12:20:32 PM
    Author     : petar.krastev
*/

/* Fonts */
@font-face {
    font-family: "Roboto-Regular";
    src: url("../fonts/Roboto-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto-Bold";
    src: url("../fonts/Roboto-Bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "Play-Regular";
  src: url("../fonts/Play-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: "Play-Bold";
    src: url("../fonts/Play-Bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

		
.jcarousel-wrapper {
    position: relative;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 177px;
}

.jcarousel ul {
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    text-align: center;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    height: 48px;
    width: 48px;
    line-height: 10px;
    border: 1px solid #707070;
    background: #6A6A6A5C;
    color: #4E443C;
    border-radius: 25px;
    text-indent: -9999px;

    margin: 0 20px;

    -webkit-box-shadow: 0 0 2px #4E443C;
    -moz-box-shadow: 0 0 2px #4E443C;
    box-shadow: 0 0 2px #4E443C;
}

.jcarousel-pagination a.active {
    background: #FFF;
    color: #fff;
    opacity: 1;

    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}
		


html, body {
    margin: 0;
    padding: 0;
    font-size: 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Play-Regular", sans-serif;
}

body { background: transparent linear-gradient(180deg, #EEEEEE 0%, #EDEDED 100%) 0% 0% no-repeat padding-box; }
.wrapper { background: url('../img/background.svg') no-repeat 25% 0%; background-size: 110% auto; }

.flag-icon {
    -webkit-box-shadow: 0 0 2px #000029;
    box-shadow: 0 0 2px #000029;
}

/*  Header */


/* Theme types */
.light {

}

.header { padding: 0 40px 40px; overflow: hidden; }
.header .block-header { float: left; width: 25%; padding: 30px 40px 20px; min-height: 200px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

.box-logo { padding: 0 5%; width: 100%; box-sizing: border-box; }
.box-logo-omv { padding: 0 35% 0 35%; width: 100%; box-sizing: border-box; }
.box-logo img { width: 100%; height: auto; }
.box-logo-omv img { display: block; height: 100%; width: auto; }
.box-time { text-align: center; }
.box-time .time { font: 128px/148px "Play-Regular"; }
.box-time .time-update { font: 46px/56px 'Roboto-Regular'; color: #A3A3A3; }

.box-main {
    width: 100%;
}

.wrapper-table {
    padding: 0 40px;
    overflow: hidden;
}

tr {
    width: 100%;
}

/* opacity: 0.71; */

.box-left {
    width: 50%;
    /* background: #ccc; */
    float: left;
}

.box-main .box-currency,
.box-main .box-gold {
    /* padding: 35px 40px; */
    padding: 0 28px 40px;
    position: relative;

}

.box-main .box-content {
    padding: 20px 30px;
    background: #FFF;
    -webkit-box-shadow: 0px 3px 6px #00000029;
    -moz-box-shadow: 0px 3px 6px #00000029;
    box-shadow: 0px 3px 6px #00000029;
}

.box-main  .currency-info {
    content: '';
    clear: both;
}

.box-main .flag-icon {
    float: right;
    width: 138px; /* 155px; */
    height: 104px;
}

.box-main .currency-code { font: 107px/107px "Play-Bold"; }
.box-main .currency-name { font: 33px/44px 'Roboto-Bold'; color: #a3a3a3; margin-bottom: 30px; text-transform: uppercase; }



.box-main .currency-data {
    overflow: hidden;
}

    .box-main .currency-buy-box {
        width: 50%;
        float: left;
    }

        .box-main .currency-buy-text {
            font: 33px/39px 'Roboto-Bold'; color: #1dc35b;
        }

        .box-main .currency-buy-rate {
            font-size: 2.2rem;
            font: 62px/72px "Play-Bold";
        }

    .box-main .currency-sell-box {
        width: 50%;
        float: right;
    }

        .box-main .currency-sell-text {
            text-align: right;
            font: 33px/39px 'Roboto-Bold';
            color: #ff8700;
        }

        .box-main .currency-sell-rate {
            text-align: right;
            font: 62px/72px "Play-Bold";
        }
        
        
        .box-main .box-gold .currency-buy-rate {
            font: 90px/100px "Play-Bold";
        }
        
    .box-main .box-gold .flag-icon {
         overflow: hidden;
         float: none;
         margin-right: 30px;
         vertical-align: top;
         margin-bottom: 0;
     }
    .box-main .box-gold .flag-icon img {
         width: auto;
         height: 100%;
         position: absolute;
         left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -webkit-transition-property: -webkit-transform;
        transition-property: transform;
     }
     
     .box-main .box-gold .currency-code {
         display: inline-block;
     }
     
    .box-main .box-gold .currency-name {
         margin-bottom: 0;
     }
        
    .box-main .box-gold .currency-data {
        position: absolute;
        right: 30px;
        top: 0;
        padding: 20px 30px;
        width: calc(50% - 84px);
        box-sizing: border-box;
        text-align: right;
    }

    .box-main .box-gold .currency-buy-box {
        float: right;
    }




.box-right {
    width: 50%;
    float: right;
    /* background: #ddd; */
}
.box-right .currency-text { font: 31px/37px 'Roboto-Bold'; color: #000; }
.box-right .box-currency { overflow: hidden; background: #fff; padding: 20px 24px; margin: 0 28px 8px; 
    -webkit-box-shadow: 0px 3px 6px #00000029;
    -moz-box-shadow: 0px 3px 6px #00000029;
    box-shadow: 0px 3px 6px #00000029;
} /* margin: 0 40px 8px; */


.box-right ul {	list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
.box-right li {	padding: 0; float: left; }
.box-right table { width: 100%; }
.box-right td { width: 50%; }


.box-right .currency-info {
    float: left;
    width: 35%;
}

.box-right .flag-icon {
    float: left;
    width: 87px; /* 94px; */
    height: 63px;
    margin-right: 20px;
}

.box-right .currency-code { font: 60px/64px "Play-Bold"; }
.box-right .currency-name { font: 33px/44px 'Roboto-Bold'; color: #a3a3a3; margin-top: 5px; text-transform: uppercase; width: 826px; height: 44px; overflow-y: hidden; }



.box-right .currency-data {
    overflow: hidden;
    width: 65%;
    float: right;
}

    .box-right .currency-buy-box {
        width: 50%;
        float: left;
    }

        .box-right .currency-buy-text {
            font: 31px/37px 'Roboto-Bold'; color: #1dc35b;
            text-align: right;
            padding-right: 24px
            /* margin-bottom: 10px; */
        }

        .box-right .currency-buy-rate {
            font-size: 2.2rem;
            font: 50px/58px "Play-Bold";
            border-right: 1px solid #D2D2D2;
            text-align: right;
            padding-right: 24px;
        }

    .box-right .currency-sell-box {
        width: 50%;
        float: right;
    }

        .box-right .currency-sell-text {
            text-align: right;
            font: 31px/37px 'Roboto-Bold';
            color: #ff8700;
            /* margin-bottom: 10px; */
        }

        .box-right .currency-sell-rate {
            text-align: right;
            font: 50px/58px "Play-Bold";
            border-left: 1px solid #D2D2D2;
        }



.footer {
    position: absolute;
    bottom: 0;
    width: 100%; font: 46px/56px 'Roboto-Regular'; padding: 0 80px; height: 125px; overflow: hidden; line-height: 125px; background: transparent linear-gradient(180deg, #C1C1C1 0%, #EBEBEB 100%) 0% 0% no-repeat padding-box;
}

.footer p {
    margin: 0;
}