@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;700;800;900&family=Open+Sans&display=swap');

:root{
    --light-gray: #F2F2F5;
    --medium-light-gray: #F2F2F5;
    --medium-gray: #63657D;
    --dark-gray: #0D102B;
    --dark-purple: #0D102B;
    --light-purple: #A1A3B1;
    --light-blue: #A1A3B1;
    --dark-blue: #383B54;
    --yellow: #FF5100;
    --dark-maroon: #FF5100;
    --light-maroon: #A1A3B1;
}

html, body{
    margin: 0;
    width: 100%;
    color: var(--dark-gray);
    fill: var(--dark-gray);
    line-height: 1.25;
    zoom: 1;
    font-family: "inter", Arial, "Helvetica Neue", Helvetica, sans-serif;
}
table,table td,table th,table tr{
    padding:0px;
}

a {
    color: var(--dark-purple);
    text-decoration: none;
    cursor: pointer;
}


ul{
    padding: 0;
    margin: 0;
}

h1.RIX{
    margin: 0;
    font-size: 2rem !important;
    padding: 5px 0;
    text-transform: uppercase; 
    line-height: 1;
    color: white;
}
.tagline{
    font-size: 1em;
    color: white;
    margin-right: 50px;
}
@media (min-device-width: 768px) and (min-width: 768px){
    h1.RIX{
        font-size: 2.8rem !important;
        padding: 0;
        color: var(--dark-gray);
    }
    .tagline{
        font-size: 0.8em;
        color: var(--dark-gray);
    }
}
@media (min-device-width: 992px) and (min-width: 992px) {
    h1.RIX {
        font-size: 4rem !important;
    }
    .tagline{
        font-size: 1em;
    }
}
@media (min-device-width: 1200px) and (min-width: 1200px) {
    h1.RIX {
        font-size: 5.6rem !important; 
    } 
}
li{
    list-style-type: none;
}

button{
    background: var(--dark-purple);
    border: solid 2px var(--dark-purple);
    border: 0;
    outline: 0;
    color: white;
    font-size: 1em;
    cursor: pointer;
    padding: 8px;
}
button:hover{
    background: white;
    color: var(--dark-purple);
    opacity: .9;
    border: solid 2px var(--dark-purple);
}
.ri-full-width-container{
    display: none;
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: white;
    overflow: hidden;
}
@media (max-device-width: 768px) and (max-width: 768px)
    {
    .ri-full-width-container{    
        min-height: 100vh;    
    }
}

.ri-limited-width-container{
    position: relative;
    width: 100%;
    margin: auto;
    max-width: 1170px;
    pointer-events:none;
}
.ri-myrisk .ri-limited-width-container{
    position: static;
    max-width: 960px;
    pointer-events: none;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .ri-limited-width-container{
        width: 85%;
    }
}

.div-toggle{
    float: right;
    cursor: pointer;
    pointer-events: all;
}
.div-toggle i{
    margin-top: -10px;
    position: relative;
    font-size: 1em;
}

.right{
    text-align: right;
}
.center{
    text-align: center;
}

.key-box{
    position: relative;
    width: 20px !important;
    height: 20px;
    border: 1px solid white;
    margin-bottom: 1px;
}

.key-label{
    position: relative;
    text-align: right;
    font-size: .6em;
    line-height: 10px;
    margin-bottom: 1px;
    color: var(--medium-gray);
}
.white-cover{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(255,255,255,.8);
    display: none;
    z-index: 899;
}

/***** MAP *****/
#map{
    position: absolute;
    display: none;
}
@media (min-device-width: 768px) and (min-width: 768px){
    #map{
        display: inline;
    } 
}
/***** MAP *****/



/****** HEADER ******/
.ri-header{
    position: relative;
    padding: 10px;
    background-color: var(--dark-purple);
    z-index: 899;
    pointer-events:all;
}
.ri-header button{
    border: solid 2px var(--dark-purple);
    background: var(--dark-purple);
    color: white;
}
.ri-header button:hover{
    background: none;
    color: var(--dark-purple);
    opacity: 1;
}

@media (min-device-width: 768px) and (min-width: 768px){
    .ri-header{
        padding: 10px;
        margin-top: 20px;
        background-color: var(--light-gray);
        background-color: rgba(242,242,242,.65);
    } 
}
@media (min-device-width: 992px) and (min-width: 992px) {
    .ri-header{
        margin-top: 40px;
        z-index: 0;
    }
}

.ri-header .ri-menu{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 30px;
    width: 30px;
    height: 30px;
    font-size: 2em;
}
.ri-header .ri-hamburger{
    position: absolute;
    background: white;
    color: var(--dark-purple);
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 5px;
    font-size: .6em;
    cursor: pointer;
    box-sizing: border-box;
}
.ri-header .ri-hamburger-content{
    /*display: none;*/
    background: white;
    width: 160px;
    padding: 5px;
    top: 30px;
    font-size: .5em;
    color: var(--dark-purple);
    border: solid 1px var(--dark-purple);
    right: 0;
    position: absolute;
    display: none;
    line-height: 0.3em;
}
.ri-header .ri-hamburger-content div{
    padding: 10px;
}
.ri-header .ri-hamburger-content div:hover{
    color: var(--light-purple);
    cursor: pointer;
}
@media (min-device-width: 768px){
    .ri-header .ri-menu{
        right: 20px;
        width: 30px;
        height: 30px;
        font-size: .9em;
    }
    .ri-header .ri-hamburger{
        width: 30px;
        height: 30px;
        padding: 5px;
    }
    .ri-header .ri-hamburger-content{
        width: 170px;
        font-size: 1em;
        top: 30px;
    }
    .ri-header .ri-hamburger-content div{
        padding: 5px;
    }
}
@media (min-device-width: 768px) and (min-width: 768px) {
    .ri-header .ri-menu{
        width: auto;
        height: auto;
    }
    .ri-header .ri-hamburger{
        display: none;
    }
}
.ri-header button{
    display: none;
    padding: 8px;
    margin: 5px 0;
}
@media (min-device-width: 768px) and (min-width: 768px) {
    .ri-header button{
        display: inline-block;
    }
}
/***** HEADER *****/


/***** CONTROLS *****/

.controls{
    display: none;
    pointer-events:all;
}
.selectize-input { 
    border: none;
    box-shadow: none;
    border-top: 1px solid var(--dark-gray);
    border-bottom: 1px solid var(--dark-gray);
    margin-top: 2px;
    padding-left: 10px;
}
.selectize-input > input{
    font-size: 1.2em; 
    height: 25px;
    line-height: 27px;
}
.selectize-dropdown-content{
    font-size: 1em; 
    height: 500px;
    max-height: none;
    line-height: 18px;
}
.selectize-control .item {
    font-size: 1em;
    /* height: 100px;
    line-height: 102px; */
}
@media (min-device-width: 992px) {
    .selectize-input { 
        /*border: none;*/
        margin-top: 0;
    }
}
input::-webkit-input-placeholder {
    /*padding-top: 4px;*/
    color: var(--medium-gray);
}
input::-moz-placeholder,
input:-ms-input-placeholder,
input:-moz-placeholder {
    color: var(--medium-gray);
}
@media (min-device-width: 768px) {
    input::-webkit-input-placeholder {
        padding-top: 0;
    }
}

.inline-country-selector{
    z-index: 1000;
    display: block;
    pointer-events:all;
    margin-bottom: -5px;
}
.optgroup-header{
    color: var(--medium-light-gray) !important;
}
@media (min-device-width: 768px){
    .selectize-input > input {
        font-size: 1.2em; 
        height: 50px;
        line-height: 52px;
        width: 300px !important;
    }    
    .selectize-control .item {
        font-size: 1em;
        height: 49px;
        line-height: 52px;
    }
    .selectize-dropdown-content{
        font-size: 1.3em; 
        height: 100%;
        max-height: 300px;
        line-height: 20px;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-drop-desktop-tablet{
        margin-bottom: 2px;
        /*display: none;*/
    }
    .inline-country-selector{
        position: relative;
        display: none !important;
    }
    .controls{
        display: block;
        margin-top: 10px;
        position: absolute;
        right: 0;
    }
    #control-select-country{
        display: block;
    }
    .compare-box{
        display: none;
        /* width: 250px !important; */
        position: relative;
        top: 3px;
    }
    .compare-box div{
        cursor: pointer;
    }
    .compare-box i{
        font-size: 1.2em;
    }
    .compare-country:last-of-type{
        margin-bottom: 10px;
    }
    .compare-box button{
        width: 100%;
        cursor: pointer;
    }
    .compare-box button:disabled{
        cursor: not-allowed;
        opacity: .3;
    }
    .selectize-control{
        /* z-index: 99; */
    }
    .selectize-input, .selectize-dropdown{
        width: 200px;
        margin-right: 2px;
    }
    .selectize-input {
        border-radius: 0;
        border: 1px solid var(--dark-gray);
        box-shadow: inherit;
        width: 290px !important;
    }
    .selectize-input > input {
        font-size: 1em; 
        height: 50px;
        line-height: 52px;
        width: 280px !important;
    }
    .selectize-control.single .selectize-input:after{
        border-width: 8px 8px 0 8px;
    }
    .selectize-control.single .selectize-input.dropdown-active:after {
        border-width: 0 8px 8px 8px;
    }
}
@media (min-device-width: 992px) and (min-width: 992px){
    .controls{
        width: 300px;
    }
    .selectize-input, .selectize-dropdown{
        width: 300px;
    }
    .selectize-input {
        width: 300px !important;
    }
    .selectize-input > input {
        width: 300px !important;
    }
}

@media (min-device-width: 768px) and (min-width: 768px){
    .selectize-input, .selectize-dropdown{
        width: 300px;
    }
    .selectize-control .item {
        font-size: 1.4em;
        height: 49px;
        line-height: 52px;
    }
    .selectize-input > input {
        font-size: 1em; 
        height: 49px;
        line-height: 52px;
        width: 300px !important;
    }
    .selectize-input.item {
        width: 300px !important;
    }
}

.IESelect{
    font-size: .5em;
}

/***** CONTROLS *****/


/***** SECONDARY CONTROLS *****/
.secondary-controls{
    display: none;
    pointer-events:all;
    line-height: 1;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .secondary-controls{
        display: block;
        position: absolute;
        font-size: 2.5rem;
        cursor: pointer;
    }
    .secondary-controls-right{
        right: 10px;
        top: 20px;
    }

    .secondary-controls-right-question {
        right: 60px;
        top: 20px;
    }
    .secondary-controls-left{
        left: 20px;
        top: 35px;
    }
    .secondary-controls div:hover{
        color: var(--yellow);
    }
}
@media (min-device-width: 992px) and (min-width: 992px){
    .secondary-controls{
        font-size: 3rem;
    }
    .secondary-controls-left{
        top: 60px;
        left: 20px;
    }
    .secondary-controls-right{
        top: 42px;
        right: 20px;
    }
    .secondary-controls-right-question {
        top: 42px;
        right: 60px;
    }
}
@media (min-device-width: 1200px) and (min-width: 1200px){
    .secondary-controls{
        font-size: 3.5rem;
    }
    .secondary-controls-left{
        left: 25px;
    }
    .secondary-controls-right{
        right: 25px;
    }
    .secondary-controls-right-question {
        right: 65px;
    }
}
/***** SECONDARY CONTROLS *****/

/***** MAIN INFO BOX *****/
.info-box{
    display: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 10px;
    background-color: white;
    width: 100%;
    /*float: right;*/
    box-sizing: border-box;
    /*margin-right: 32px;*/
}
.info-box i{
    cursor: pointer;
    margin-right: 10px;
    border-radius: 50%;
}
.info-box .country-name{
    font-weight: 700;
}


.info-box .country, .info-box .separator{
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.info-box .info-i{
    float: left;
    font-size: 1.1em;
}
.info-box .country,.info-box .region-name{
    text-transform: uppercase;
    cursor: pointer;
}
.info-box .add-to-compare{
    margin-top: 10px;
    text-transform: none;
    font-size: .8em;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    display: inline-block;
    vertical-align: bottom;
}
.info-box .add-to-compare .info-i{
    font-size: 1.3em;
    margin-left: 5px;
}
.info-box .add-to-compare .label{
    max-width: 150px;
    line-height: 1em;
}
.info-box.country-info-box .country{
    font-size: 1em;
    width: 225px;
}
.info-box .scores .rank, .info-box .scores .score{
    color: var(--dark-purple);
    cursor: pointer;
    font-weight: 700;
    font-size: 1.5em;
}
.info-box .scores .score{
    font-weight: 100;
    font-size: 1.5em;
}
.info-box .scores{
    margin-top: 5px;
    font-size: 1em;
    display: inline-block;
}
.info-box .scores div{
    display: inline-block;
    margin-right: 20px;
}
.info-box .scores .label{
    font-size: .5em;
 }
.country-info-box .separator{
    background-color: var(--medium-light-gray);
    width: 2px;
    margin: 0 10px;
    height: 100px;
}
.score_bar div{
    position: relative;
    display: inline-block;
    background-color: var(--light-gray);
}
@media (min-device-width: 768px) and (min-width: 768px){
    .info-box{
        margin-bottom: 2px;
        border: 1px solid var(--dark-gray);
        width: 290px;
    }
    .info-box.country-info-box .country{
        width: 100%;
        top: 0;
    }
    .region-info-box{    
        max-height: 350px;
        overflow: auto;
    }
    .info-box .scores{
        margin-top: 5px;
    }
    .info-box .info-i{
        font-size: 1.5em;
    }
    .info-box .add-to-compare .info-i{
        font-size: 1.7em;
    }
}
@media (min-device-width: 992px) and (min-width: 992px){
    .info-box{
        width: 300px;
    }
    .info-box.country-info-box .country{
        width: 100%;
        font-size: 1.3em;
    }
    .info-box .info-i{
        font-size: 1.1em;
    }
    .info-box .add-to-compare .info-i{
        font-size: 1.3em;
        max-width: 140px;
    }
    .info-box .scores .rank{
        font-size: 1.5em;
    }
    .info-box .scores .score{
        font-size: 0.8em;
    }
    .info-box .add-to-compare .label{
        width: 150px;
        text-align: center;
        margin-bottom: 5px;
    }
}

/***** MAIN INFO BOX *****/


/***** REGION/ALL COUNTRIES BOX ***/
.all-countries-list{
    overflow: auto;
    padding-bottom: 40px;
}

.all-countries-list .scoreTypeDescription{
    padding: 10px;
}
.info-box.region-info-box .region-name, .all-countries-list .region-name{
    font-size: 1.4em;
}
@media (min-device-width: 768px){
    .info-box.region-info-box .region-name, .all-countries-list .region-name{
        margin-top: 5px;
        font-size: 1.8em;
    }
}
.info-box .region-info-box td.country, .all-countries-list td.country, .all-countries-list td.score{
    font-size: 1em;
    line-height: .9em;
}
@media (min-device-width: 768px){
    .info-box .region-info-box td.country, .all-countries-list td.country, .all-countries-list td.score{
        font-size: 1em;
        line-height: 1.3em;
    }
}

.all-countries-list td.score,.all-countries-list td.country{
    width: 150px;
}
.all-countries-list td.score,.all-countries-list td.rank{
    width: 30px;
    font-size: 1em;
}
@media (min-device-width: 768px){
    .all-countries-list td.score,.all-countries-list td.rank{
        font-size: 1.5em;
    }
}

.region-info-box i, .all-countries-list i{
    margin-left: 10px;
    border: 2px solid var(--dark-gray);
    font-size: .6em;
    padding: 2px;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 50%;
    position: relative;
    top: -1px;
}
@media (min-device-width: 768px){
    .region-info-box i, .all-countries-list i{
        font-size: .7em;
        margin-left: 3px;
        top: 0;
    }
}
.region-info-box i.active, .all-countries-list i.active{
    background-color: var(--dark-gray);
    color: white;
}
.region-info-box .separator, .all-countries-list .separator{
    background-color: var(--medium-light-gray);
    width: 100%;
    height: 2px;
    margin: 8px 0;
}
.region-info-box table, .all-countries-list table{
    width: 100%;
    padding: 0 10px;
}
@media (min-device-width: 768px){
    .region-info-box table, .all-countries-list table{
        padding: 0 10px;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .region-info-box table{
        padding: 0;
    }
}
.region-info-box table thead th, .all-countries-list table thead th{
    text-align: left;
    color: var(--dark-gray);
    font-size: .8em;
    padding: 10px 0;
}
.all-countries-list-sort.rankscore{
    text-align: right;
}
@media (min-device-width: 768px){
    .region-info-box table thead th, .all-countries-list table thead th{
        font-size: 1em;
        padding: 10px 0;
    }
}
.region-info-box table tbody td.country,.region-info-box table tbody td.score_bar, .all-countries-list table tbody td.country,.all-countries-list table tbody td.score_bar{
    width: 120px;
}
@media (min-device-width: 992px) and (min-width: 992px){
    .region-info-box table tbody td.country,.region-info-box table tbody td.score_bar, .all-countries-list table tbody td.country,.all-countries-list table tbody td.score_bar{
        width: 120px;
    }
}
.country-details-explore-back, .country-details-close, .view-compare-explore-back,.click-country-details{
    display: block;
    color: var(--dark-purple);
    cursor: pointer;
    font-size: 0.8em;
    line-height: 1em;
    padding: 10px 0; 
    text-transform: none;
}
@media (min-device-width: 768px){
    .country-details-explore-back{
        font-size: 1em;
        line-height: 20px;
        padding: 0; 
    }
    .click-country-details{
        font-size: 0.6em;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .all-countries-list{
        display: none !important;
    }
    .country-details-explore-back{
        display: none !important;
    }
}
.country-details-explore-back i{
    margin: 10px;
}
.region-info-box tr, .all-countries-list tr{
    background: none;
    cursor: pointer;
}
.region-info-box tbody tr:hover, .all-countries-list tbody tr:hover{
    background: var(--light-gray);
}
.region-info-box td.rank,.region-info-box td.score, .all-countries-list td.rank, .all-countries-list td.score{
    text-align: center;
}
.clickable-country{
    cursor: pointer;
}
/***** REGION/ALL COUNTRIES BOX ***/


/***** SWARM PLOT *****/
.swarm-plot{
    display: none;
    pointer-events:all;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .swarm-plot{
        width: 100%;
        position: fixed;
        max-width: 1170px;
        z-index: 1;
    }
    .swarm-plot.myrisk{
        position: relative;
        display: block;
    }
    .swarm-plot div{
        overflow: hidden;
    }
    .swarm-plot.primary{
        position: absolute;
        width: 100%;
        margin-bottom: 20px;
    }

    .swarm-plot .RIXrows div{
        display: inline-block;
        box-sizing: border-box;
    }
    .swarm-plot .RIXrows.above{
        margin-bottom: 2px;
        width: 100%;
        height: 38px;
    }
    .swarm-plot.myrisk .RIXrows.above{
        height: 28px;
    }
    .swarm-plot .RIXrows.above div.label{
        width: 100%;
        font-size: .8em;
        margin-top: 14px;
        position: absolute;
    }
    .swarm-plot.myrisk .RIXrows.above div.label{
        margin-top: 3px;
    }
    .swarm-plot.myrisk.benchmarking .RIXrows.above div.label{
        margin-top: -30px;
    }

    .swarm-plot .RIXrows.above div.right{
        width: 70%;
        margin-left: 30%;
        position: absolute;
    }

    .swarm-plot .RIXrows.below{
        width: 100%;
        height: 20px;
        margin-top: -7px;
    }
    .swarm-plot .RIXrows.below div{
        width: 33.3%;
        position: absolute;
        font-size: .8em;
    }
    .swarm-plot .RIXrows.below div.data-as-of{
        margin-left: 33.3%;
        text-align: center;
    }
    .swarm-plot .RIXrows.below div.right{
        margin-left: 66.6%;
    }

    .swarm-plot.primary .RIXrows.above div.right div{
        display: inline-block;
        padding-top: 10px;
    }

    .swarm-plot .dots{
        background-color: white;
        border-top: 1px solid var(--medium-light-gray);
        border-bottom: 1px solid var(--medium-light-gray);
        height: 100px;
        width: 100%;
        padding: 0;
        display: inline-block;
        margin-top: -8px;
    }
    .swarm-plot-factor-label{
        fill: var(--dark-gray);
    }
    .swarm-dot{
        stroke: var(--dark-blue);
        stroke-width: 1px;
        cursor: pointer;
    }
    .swarm-dot.active{
        stroke: var(--yellow);
        stroke-width: 2px;
        fill: none;
    }
    .swarm-dot.active-center{
        fill: var(--yellow);
    }
}
@media (min-device-width: 768px) and (min-width: 992px){
    .swarm-plot .RIXrows.above div.label{
        font-size: .8em;
    }
}
/***** SWARM PLOT *****/

/***** macro Viz *****/
.macroDriverLabel{
    font-size: 0.14em;
    fill: var(--medium-gray);
    font-weight: 300;
    cursor: pointer;
}
.macroDriverLabel.macro{
    fill: var(--light-maroon);
}
.macroDriverLabel.phys{
    fill: var(--primary-steel-700);
}
.macroDriverLabel.phys.fade{
    fill: var(--light-maroon);
}
.macroDriverLabel.top50{
    fill: var(--dark-blue);
}
.macroTitleLabel{
    font-size: 0.18em;
    fill: var(--medium-gray);
    font-weight: 600;
    text-transform: uppercase;
}
.arc.active{
    fill: var(--light-maroon);
}
.arc.top50{
    cursor: pointer;
    fill: var(--dark-maroon);
}
.arc.click{
    cursor: pointer;
}
@media (min-device-width: 992px) and (min-width: 992px){
    .macroDriverLabel{
        font-size: 0.14em;
    }
    .macroTitleLabel{
        font-size: 0.18em;
    }
}
/***** macro Viz *****/


/***** physical Viz *****/
rect.phys{
    /* rx: 1.5px; */
    fill: var(--dark-maroon);
    cursor: pointer;
}
rect.phys.fade{
    fill: var(--light-maroon);
}
circle.phys{
    fill: var(--dark-blue);
    stroke: white;
    stroke-width: 0.3px;
    cursor: pointer;
}
circle.phys.fade{
    fill: var(--light-maroon);
}
circle.phys.top50{
    fill: var(--dark-maroon);
}
circle.phys.top50.fade{
    fill: var(--light-blue);
}
line.phys{
    stroke: var(--medium-gray);
    stroke-width: 0.1px;
}
line.phys.secondary{
    stroke: var(--medium-light-gray);
    stroke-width: 0.1px;
}
.physTitleLabel{
    font-size: 0.16em;
    fill: var(--medium-gray);
    font-weight: 600;
    text-transform: uppercase;
}
@media (min-device-width: 992px) and (min-width: 992px){
    .physTitleLabel{
        font-size: 0.18em;
    }
}
/***** physical Viz *****/


/***** trends viz *****/
.rect.trends{
    fill: var(--light-blue);
}
.rect.trends.currentYear{
    cursor: pointer;
    fill: var(--light-blue);
}
.rect.trends.top50{
    fill: var(--dark-blue);
}
.rect.trends.active{
    /* fill: var(--dark-blue); */
}
.trendsLabelYear{
    font-size: 0.18em;
    fill: var(--medium-gray);
    font-weight: 300;
}
path.connector{
    fill:none;
    stroke: var(--light-blue);
    stroke-width: 0.2;
}
path.connector.active{
    stroke-width: 0.4;
}
path.connector.top50{
    stroke: var(--dark-blue);
}
circle.connector{
    fill: var(--light-blue);
}
circle.connector.top50{
    fill: var(--dark-blue);
}
text.trendsLabelCountry{
    font-size: 0.13em;
    fill: var(--light-blue);
    font-weight: 300;
    cursor: pointer;
}
text.trendsLabelCountry.active{
    font-size: 0.28em;
    /* fill: var(--dark-blue); */
    font-weight: 600;
}
text.trendsLabelCountry.top50{
    fill: var(--dark-maroon);
}
.trendsTitleLabel{
    font-size: 0.16em;
    fill: var(--medium-gray);
    font-weight: 600;
    text-transform: uppercase;
}
@media (min-device-width: 992px) and (min-width: 992px){
    .trendsTitleLabel{
        font-size: 0.18em;
    }
}
/***** trends viz *****/

/***** MAP *****/
.map-layer {
    fill: white;
}
.map-country-invisible{
    display: none;
}
/***** MAP *****/

/***** VIEW DATA *****/
.view-data{
    position: relative;
    min-height: 100px;
    z-index: 1;
    display: none;
    padding: 0 10px;
    font-size: 1em;
    box-sizing: border-box;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-data{
        padding: 20px;
        font-size: 1em;
    }
}
.view-data .close{
    display: none;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-data{
        position: absolute;
        top: 20px;
        background-color: white;
        -moz-box-shadow: 0 0 5px var(--medium-light-gray);
        -webkit-box-shadow: 0 0 5px var(--medium-light-gray);
        box-shadow: 0px 0px 5px var(--medium-light-gray);
        border-top: none;
        z-index: 1000;
    }
    .view-data .close{
        display: block;
        position: absolute;
        top: -15px;
        right: -15px;
        font-size: 1em;
        cursor: pointer;
    }
    .view-data .close i.fa-circle-o{
        background: white;
        border-radius: 50%;
    }
}
.view-data-title{
    display: block;
    position: relative;
    margin-top: 2px;
    text-transform: uppercase;
    font-size: 1.5em;
    line-height: 30px;
}
@media (min-device-width: 768px){
    .view-data-title{
        font-size: 1.1em;
        line-height: 20px;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-data-title{
        font-size: 2em;
}
}


.view-data-table{
    height: 100%;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-data-table{
        height: 400px;
        overflow: auto;
    }
}
.view-data button{
    margin-bottom: 20px;
    font-size: 1em;
}
.view-data-table td,.view-data-table th{padding:8px;border:0;background:0;text-align:left}
.view-data-table tbody td{vertical-align:top}
.view-data-table [class*=column]+[class*=column]:last-child{float:none}
.view-data-table tbody td,.view-data-table tfoot th{border-top:1px solid var(--light-gray)}
.view-data-table tbody tr:first-child td{border-top:0}
.view-data-table thead th{border-bottom:1px solid var(--light-gray)}
.view-data-table tfoot th,.view-data-table thead th{background-color:var(--light-gray);color:var(--dark-gray);font:700 11px/22px arial,helvetica,sans-serif;vertical-align:middle}
.view-data-table .odd td{background-color:var(--light-gray)}
.view-data-table .even td{background-color:white}
.view-data-table .RIXrow-hover tr:hover td{background-color:var(--light-gray)}
.view-data-table img{margin:0;padding:0;border:0;max-width:none}
.view-data-table_wrapper{clear:both;margin-bottom:1em}
.view-data-table_wrapper .view-data-table{clear:both;margin:0!important}
.dataTables_length{float:left;white-space:nowrap}
.dataTables_filter{float:right;white-space:nowrap}
.dataTables_info{clear:both;float:left;margin:4px 0 0}
.dataTables_processing{display:none}.dataTables_scroll{clear:both}
.dataTables_scrollBody{-webkit-overflow-scrolling:touch}
.view-data-table_wrapper .sorting,.view-data-table_wrapper .sorting_asc,.view-data-table_wrapper .sorting_desc{padding-right:20px;cursor:pointer;outline:0}
.view-data-table_wrapper .sorting div,.view-data-table_wrapper .sorting_asc div,.view-data-table_wrapper .sorting_desc div{position:relative;margin:0!important;padding:0!important;float:none!important}
.view-data-table_wrapper .sorting:hover,.view-data-table_wrapper .sorting_asc,.view-data-table_wrapper .sorting_desc{background-color: var(--dark-blue);color:var(--dark-maroon)}
.view-data-table_wrapper label input,.view-data-table_wrapper label select{display:inline;margin:2px;width:auto}
.view-data-table thead th{background-color:var(--light-gray)!important;line-height:1em}

.view-data-table{
    border-collapse:collapse;border-spacing:0;width:auto;margin-bottom:1em;border:0; margin-top: 20px; width: 100%;
    font-size: 1.5em;
}
.view-data-table thead th, .view-data-table td{
    font-size: .7em;
}
.view-data p{
    font-size: 1em;
    line-height: 1.5em;
}
@media (min-device-width: 768px){
    .view-data-table{
        font-size: 1em;
    }
    .view-data-table thead th, .view-data-table td{
        font-size: 1em;
    }
    .view-data p{
        font-size: 1em;
        line-height: 20px;
    }
}
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting{
    background-image: none !important;
}
table.dataTable thead th, table.dataTable thead td{
    padding: 5px;
}
table.dataTable tbody td{
    padding: 2px;
}
@media (min-device-width: 768px){
    table.dataTable thead th, table.dataTable thead td{
        padding: 10px;
    }
    table.dataTable tbody td{
        padding: 10px;
    }
}
table.dataTable thead th.sorting:hover{
    color: var(--dark-maroon);
}
.dataTables_info{
    display: none;
}
.dataTables_wrapper{
    font-size: .5em;
}
@media (min-device-width: 768px){
    .dataTables_wrapper{
        font-size: 1em;
    }
}
/***** VIEW DATA *****/


/***** COMPARE *****/
.view-compare{
    position: relative;
    min-height: 100px;
    z-index: 1;
    display: none;
}
.view-compare div.rix-title{
    display: block;
    text-transform: uppercase;
    color: var(--medium-gray);
}
.view-compare div.RIXrow.title{
    padding: 25px;
}
.view-compare div.RIXrow.content{
    padding: 25px;
    background-color: var(--light-gray);
    width: 100%;
    box-sizing: border-box;
}
.view-compare table{
    border-spacing: 0;
}
.view-compare div.trends{
    display: none;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-compare{
        position: absolute;
        top: 0;
        background-color: white;
        border-top: none;
        z-index: 2000;
        width: 100%;
        height: 100%;
    }
}
.view-compare .close{
    display: none;
}
.view-compare-title{
    text-transform: uppercase;
    color: var(--dark-gray);
    font-size: 1.8em;
    font-weight: 800;
    line-height: 1.2em;
}
@media (min-device-width: 768px){
    .view-compare-title{
        font-size: 1.4em;
    }
}
@media (min-device-width: 992px){
    .view-compare-title{
        font-size: 2em;
    }
}
.view-compare .compare-btn{
    text-transform: uppercase;
}

.view-compare .compare-data{
    margin-top: 20px;
}
.view-compare .country-name{
    text-transform: uppercase;
    color: var(--dark-gray);
    font-size: 0.7em;
    line-height: 1.2em;
    cursor: pointer;
}
.view-compare .country-name:hover{
    opacity: .8;
}
/* .view-compare tr{
    height: 50px;
} */
.view-compare td{
    width: 80px;
    /* height: 48px; */
    text-align: center;
    box-sizing: content-box !important;
    vertical-align: middle;
}
.view-compare td.compare-matrix-square{
    border: solid 1px white;
    background: var(--light-gray);
}
.view-compare td.compare-matrix-square div.score.top50{
    color: white;
}
td.compare-matrix-square.MC,td.compare-matrix-square.RQ{
    border: solid 1px var(--light-gray);
    background: none;
}
.view-compare .top50Label{
    top: -3px;
}
.view-compare td div{
    width: 80px;
    text-align: center;
    cursor: pointer;
	overflow: hidden;
    padding: 5px 0;
    color: var(--dark-gray);
}
.view-compare td div.rank{
   position: relative;
}
.view-compare td div.rank.top50{
   color: white;
}
.view-compare .black{
    color: var(--dark-gray);
}
.view-compare td.factor-label{
    width: 200px;
    text-align: right;
    padding-right: 10px;
}
.view-compare td.factor-label:hover{
    opacity: .8;
    cursor: pointer;
}
.view-compare .factor-label .fa{
    font-size: 1.5em;
}
.view-compare .driver-label{
    text-transform: uppercase;
    font-size: .8em;
    text-align: right;
    padding-right: 10px;
}
.view-compare tr.driver{
    /*display: none;*/
}
.view-compare .key{
    margin-left: 220px;
    margin-top: 20px;
}
.view-compare .key div{
    display: inline-block;
}
.key-rank-note{
    margin-left: 20px;
    width: 200px !important;
}
.view-compare .info-explainer{
    margin-left: 220px;
    margin-top: 20px;
}
/***** COMPARE *****/


/***** COUNTRY DETAILS *****/
.country-details{
    position: relative;
    min-height: 100px;
    z-index: 1;
    display: none;
    overflow: auto;
    height: 850px;
}
.country-details div.rix-title{
    display: block;
    text-transform: uppercase;
    color: var(--medium-gray);
}
.country-details .close{
    display: none;
}
.country-details .add-to-compare{
    display: inline-block;
}
.country-details .add-to-compare .info-i{
    float: left;
    margin-right: 5px;
    font-size: 1.2em;
}
.country-details .add-to-compare .label{
    max-width: 120px;
}

.country-details .toggles{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    right: 15px;
    font-weight: 200;
    font-size: 0.6em;
}
.country-details .toggles div{
    margin-left: 5px;
}
.country-details .toggles div.toggle{
    margin-top: -3px;
    margin: auto;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details .toggles{
        font-size: 0.4em;
    }
    .country-details{
        position: absolute;
        /* top: 20px; */
        top: 0;
        height: 100%;
        background-color: white;
        -moz-box-shadow: 0 0 5px var(--medium-light-gray);
        -webkit-box-shadow: 0 0 5px var(--medium-light-gray);
        /* box-shadow: 0px 0px 5px var(--medium-light-gray); */
        border-top: none;
        z-index: 2000;
/*        padding: 10px;*/
        /* top: 50%; */
        /* transform: translateY(-50%); */
        overflow: hidden;
    }
    .country-details .close{
        display: block;
        position: absolute;
        top: -15px;
        right: -15px;
        font-size: 1em;
        cursor: pointer;
    }
    .country-details .close i.fa-circle-o{
        background: white;
        border-radius: 50%;
    }

    .country-details .add-to-compare{
        margin-left: 20px;
        font-size: 1.2em !important;
        line-height: 1em;
        cursor: pointer;
        margin-top: 12px;
        right: 1px;
        position: absolute;
    }
    .country-details .add-to-compare .label{
        font-size: 1em !important;
    }
}

.country-details div{
    display: inline-block;
}

@media (min-width: 992px){
    .country-details .toggles{
        font-size: 0.7em;
    }
}
.country-details div.control-block div{
    display: block;
}

.drop-label{
    font-weight: bold;
}
input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
    cursor: pointer;
}


.country-details div.RIXrow{
    position: relative;
    width: 100%;
    margin-left: 0;
    margin-top: 1px;
    display: block;
    box-sizing: border-box;
}
.country-details div.RIXrow.content{
    padding: 25px;
    background-color: var(--light-gray);
    width: 100%;
    min-height: 115px;
}
.country-details div.RIXrow.content.desktop{
    display: none;
}

.country-details div.RIXrow.content.mobile div.row{
    width: 100%;
}
.country-details div.RIXrow.content div.scoreType{
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: 500;
}


.country-details div.RIXrow.content .scores .rank, .country-details div.RIXrow.content .scores .score{
    color: var(--dark-purple);
    font-weight: 700;
    font-size: 2.5em;
    line-height: 0.8em;
}
.country-details div.RIXrow.content.top50 .scores .rank, .country-details div.RIXrow.content.top50 .scores .score{
    color: white;
}
.country-details div.RIXrow.content .scores .score{
    font-weight: 100;
    font-size: 1em;
}
.country-details div.RIXrow.content .scores .label{
    font-size: 0.7em;
    text-transform: uppercase;
}

.country-details div.RIXrow.content.footer{
    background-color: white;
    font-size: 1em;
    color: var(--medium-gray);
    padding: 20px;
    min-height: 0;
}
.country-details div.RIXrow.content.top50{
    background-color: var(--dark-blue);
    color: white;
}
.country-details div.RIXrow.content.footer span.top50, .all-countries-list div.scoreTypeDescription span.top50{
    color: var(--dark-blue);
    background-color: white;
    font-weight: 700;
}
.country-details div.RIXrow.content.footer span.top50{
    color: var(--dark-maroon);
}
.country-details div.RIXrow.content div.contentLeft{
    width: 59%;
    vertical-align: top;
}
.country-details div.RIXrow.content div.contentLeft .scoreTypeDescription{
    font-size: 0.9em;
    padding-right: 10px;
}
.country-details div.RIXrow.content div.contentRight{
    width: 40%;
    vertical-align: top;
    margin-right: 0;
    position: absolute;
}
.country-details div.RIXrow.content div.contentRight div{
    float: right;
    margin-right: 20px;
    vertical-align: bottom;
    height: 100%;
}
.country-details div.RIXrow.desktopviz{
    width: 85%;
    display: none;
    min-height: 100%;
    vertical-align: top;
    padding-top: 30px;
}

.country-details .swarm-plot .RIXrows.above div.right div{
    margin-bottom: 0;
}

.country-details div.country{
    display: none;
    padding: 25px;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details div.RIXrow.content.footer{
        font-size: 0.7em;
        /* text-align: right; */
    }
    .country-details div.RIXrow.desktopviz{
        display: grid;
    }
    .country-details div.country{
        display: block;
    }
    .country-details div.RIXrow.content div.contentLeft .scoreTypeDescription{
        font-size: 1em;
    }
    .country-details div.RIXrow.content.desktop{
        display: block;
    }
    .country-details div.RIXrow.content.mobile{
        display: none;
    }
    .country-details div.RIXrow.content .scores .rank, .country-details div.RIXrow.content .scores .score{
        font-size: 2.5em;
    }
    .country-details div.RIXrow.content .scores .score{
        font-size: 1em;
    }
    .country-details div.RIXrow.content .scores .label{
        font-size: 0.8em;
    }
}
@media (min-device-width: 992px) and (min-width: 992px){
    .country-details div.RIXrow.content.footer{
        font-size: 1em;
    }
}
@media (min-device-width: 1280px) and (min-width: 1280px){
    .country-details div.RIXrow.content .scores .rank, .country-details div.RIXrow.content .scores .score{
        font-size: 3em;
        line-height: 0.8em;
    }
    .country-details div.RIXrow.content .scores .score{
        font-size: 1.1em;
    }    
}

.country-details .country-name{
    text-transform: uppercase;
    color: var(--dark-gray);
    font-size: 1.8em;
    font-weight: 800;
    line-height: 1.2em;
    margin-bottom: 10px;
}
.country-details div.RIXrow.content.mobile.top50 .country-name{
    color: white;
}
@media (min-device-width: 768px){
    .country-details .country-name{
        font-size: 1.4em;
        margin-bottom: 0;
    }
}
@media (min-device-width: 992px){
    .country-details .country-name{
        font-size: 2em;
    }
}

.country-details div.country-details-score{
    display: none;
    box-sizing: border-box;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details div.country-details-score{
        width: 100%;
        float: left;
        text-transform: uppercase;
        display: block;
        height: 250px;
        padding: 20px;
        border-bottom: solid 2px white;
    }
}
.country-details .score div{
    line-height: 1;
}
.country-details .score{
    color: white;
    text-align: center;
}
.country-details .label{
    font-size: 1em;
    margin-right: 10px;
}
@media (min-device-width: 768px){
    .country-details .label{
        font-size: 1em;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details .score{
        text-align: right;
        margin-top: 16px;
    }
    .country-details .label{
        font-size: .8em;
    }
}
@media (min-device-width: 768px) and (min-width: 992px){
    .country-details .label{
        font-size: .9em;
        width: 130px;
        text-align: center;
    }
    .country-details .label.climateToggle{
        width: auto;
    }
}
.country-details-score-mobile{
    text-transform: uppercase;
}
.country-details .score .label{
    color: var(--dark-gray);
}
.country-details-score-mobile .country-name{
    width: 100%;
    margin-top: 5px;
    color: white;
}
.country-details .score-value,.country-details .rank-value{
    font-size: 2em;
    color: white;
}
@media (min-device-width: 768px){
    .country-details .score-value,.country-details .rank-value{
        font-size: 1.8em;
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details .score .label{
        color: var(--dark-purple);
        font-size: .9em;
    }
    .country-details .score{
        position: relative;
        margin-top: 10px;
        width: 100%;
    }
    .country-details .score-value, .country-details .rank-value{
        margin: 0;
        color: var(--dark-purple);
    }
}
@media (min-device-width: 768px) and (min-width: 768px){
    .country-details .score .label{
        font-size: 1em;
        margin-right: 20px;
    }
    .country-details .score-value,.country-details .rank-value{
        font-size: 2.1em;
    }
}

#country-details-mobile-table{
    border: 0;
    padding: 0 15px 50px 0;
    width: 95%;
}
#country-details-mobile-table tr:not(.driver){
    height: 40px;
}
#country-details-mobile-table tr.driver{
    cursor: pointer;
}
#country-details-mobile-table tr.driver:last-of-type{
    margin-bottom: 20px;
}
#country-details-mobile-table td.content{
    width: 49%;
    padding: 5px 0;
}
#country-details-mobile-table td.top50{
    width: 2%;
    background-color: white;
    text-align: right;
}
#country-details-mobile-table td.factor-name{
    text-transform: uppercase;
    text-align: right;
    padding-right: 10px;
    font-size: 1.1em;
    font-weight: 700;
}
#country-details-mobile-table td.factor-name.RQ{
    color: var(--dark-maroon);
}
#country-details-mobile-table td.factor-line.RQ{
    background-image: url('../notfound.html');
    background-repeat: repeat-x;
    background-position-y: center;
}
#country-details-mobile-table td.factor-line.MC{
    background-image: url('../notfound.html');
    background-repeat: repeat-x;
    background-position-y: center;
}
#country-details-mobile-table td.factor-name.MC{
    color: var(--light-maroon);
}
#country-details-mobile-table td.driver-name{
    color: var(--medium-gray);
    text-align: right;
    padding-right: 10px;
    font-size: 0.8em;
}
@media (min-device-width: 650px) and (min-width: 650px){
    #country-details-mobile-table td.factor-name{
        padding-right: 20px;
        font-size: 1.7em;
    }
    #country-details-mobile-table td.driver-name{
        padding-right: 20px;
        font-size: 1em;
    }
}
/***** COUNTRY DETAILS *****/





/***** COLORS *****/
.map-country{
    stroke: white;
    cursor: pointer;
    fill: var(--light-blue);
}
.mobileBars{
    fill: var(--light-blue); 
    background-color: var(--light-blue) !important;
    color: white;
}
.mobileBars.top50{
    fill: var(--dark-blue); 
    background-color: var(--dark-blue) !important;
    color: white;
    margin-right: 2px;
}

.driver .top50 .mobileBars.top50{
background-color: var(--dark-maroon)!important;
}
.mobileBars.RQ{
    background-color: var(--dark-blue) !important;
}
.mobileBars.MC{
    background-color: var(--light-maroon) !important;
}
.top50{
    fill: var(--dark-blue);
    background-color: var(--dark-blue);
}
.no-score:not(.key-label){
    fill: var(--light-gray);
    background-color: var(--light-gray); 
    cursor: not-allowed;
}
.map-layer .active{
    fill: var(--yellow) !important;
    color: var(--yellow);
}
.map-layer .highlight{
    fill: var(--yellow);
}
.view-compare td div.active{
    color: white;
    background-color: var(--yellow);
}
/***** COLORS *****/


/***** TOOLTIP *****/
.rixtooltip, .rixtooltip-mobile {
    position: absolute;
    z-index: 2000;
    display:none;
    border-radius: 10px;
    font-size: 1em;
    padding: 1px;
    box-sizing: border-box;
    background: white;
    text-transform: uppercase;
    border: 1px solid var(--dark-gray);
    max-width: 300px;
}
.rixtooltip-mobile{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}
.rixtooltip div, .rixtooltip-mobile div {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    line-height: 1em;
}
.rixtooltip span.country, .rixtooltip-mobile span.country{
    font-weight: 700;
}
.rixtooltip span.detail, .rixtooltip-mobile span.detail{
    font-size: .8em;
}
.rixtooltip span.detail span.definition, .rixtooltip-mobile span.definition{
    text-transform: none;
}
span.definition.top50{
    color: var(--dark-blue);
    background-color: white;
    font-weight: 700;
}
.rixtooltip div.rankChange, .rixtooltip-mobile div.rankChange{
    padding: 5px;
    font-size: 2.5em;
    font-weight: 700;
    text-align: center;
}
.rixtooltip div.rankYears, .rixtooltip-mobile div.rankYears{
    font-size: 0.7em;
    padding: 5px;
}

.rixtooltip:after, .rixtooltip:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.rixtooltip:after {
    border-width: 6px;
    margin-left: -6px;
    border-top-color: var(--dark-gray);
}

.rixtooltip:before {
    border-width: 7px;
    margin-left: -7px;
    border-top-color: var(--dark-gray);
}

/***** TOOLTIP *****/

/***** VIEW ALERT *****/
.view-alert{
    position: absolute;
    min-height: 100px;
    z-index: 1;
    display: none;
    padding: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.view-alert .close{
    display: none;
}
.view-alert .alert{
    padding: 20px;
    color: var(--dark-purple);
    font-size: 2em;
    line-height: 1.2em;
}
@media (min-device-width: 768px) and (min-width: 768px){
    .view-alert{
        position: absolute;
        background: white;
        -moz-box-shadow: 0 0 5px var(--medium-light-gray);
        -webkit-box-shadow: 0 0 5px var(--medium-light-gray);
        box-shadow: 0px 0px 5px var(--medium-light-gray);
        border-top: none;
        z-index: 2000;
    }
    .view-alert .close{
        display: block;
        position: absolute;
        top: -15px;
        right: -15px;
        font-size: 1em;
        cursor: pointer;
    }
    .view-alert .close i.fa-circle-o{
        background: white;
        border-radius: 50%;
    }
}
/***** VIEW ALERT *****/

/***** TOGGLES *****/
.compareToggle{
    font-size: 0.6em;
    text-transform: uppercase;
}
.info-box .compareToggle{
    vertical-align: bottom;
    margin-bottom: -1px;
    margin: auto;
}
.toggleWrapper{
    display: inline-block;
}
.toggleWrapper div{
    display: block;
    text-transform: uppercase;
}
.toggle {
    width: 55px;
    height: 24px;
    position: relative;
    border-radius: 24px;
    background-color: var(--light-gray);
    cursor: pointer;
    transition: background-color 0.3s;
}

.toggle::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.toggle.on {
    background-color: var(--dark-purple);
}

.toggle.on::before {
    transform: translateX(30px);
}
/***** TOGGLES *****/

/***** FOOTER *****/
.copyright {
  padding: 25px;
  color: var(--medium-gray);
  font-size: 12px;
  text-align: center; 
}
@media (min-width: 768px) {
    .copyright {
        display: inline;
        float: right;
        padding: 20px 0;
        font-size: 16px; } 
}
/***** FOOTER *****/

.container-fluid
{
	margin: 0;
	padding: 0;
}