@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,500,700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css?family=K2D:400,700&display=swap');


/*  HIDE MENU LEFT  */
.nav-left{display: none;}

body{
    margin: 0;
    padding: 0 0 40px;
    font-family: 'Nunito', sans-serif;
    background: #eee;
}

/*   ANIMATIONS   */
@keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}

.main-content{
    display: block;
    width: 1000px;
    margin: 50px auto;
    background: #fff;
    text-align: center;
    padding: 50px;
    border: 1px solid #d8d8d8;
    box-shadow: 0 2px 3px 1px rgba(0,0,0,.08);
    border-radius: 10px;
    box-sizing: border-box;
}

h1{
    color: #4B5458;
    margin: 0;
    font-weight: 700;
    font-size: 32px;
    text-shadow: 0 2px 2px rgba(0,0,0,.07);
}

.block-A{
    margin: 65px 0;
    display: flex;
    width: 100%;
}

.block-A-left{
    width: 45%;
    margin: 0 0 0 2%;
    display: inline-block;
    text-align: center;
}

.usa-image{
    display: block;
    width: 300px;
    margin: 15px auto;
    transition: .3s;
}

.usa-image:hover{opacity: .85; cursor: pointer;}

.block-A-right{
    width: 45%;
    margin: 0 1%;
    display: inline-block;
}


#publicDebt{
    margin-top: 25px;
    display: block;
    color: #00B2FF;
    font-weight: 700;
    font-size: 36px;
    text-shadow: 0 2px 2px rgba(0,0,0,.05);
}

.debt-block{
    background: #f3f3f3;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    border-radius: 7px;
    box-shadow: 0 2px 1px rgba(0,0,0,.1);
    width: 325px;
    padding: 10px 15px;
    margin: 10px auto;
    text-shadow: 1px 2px 1px rgba(0,0,0,.04);
    color: #505557;
}

.debt-title{
    font-weight: 700;
    font-size: 15.5px;
}

.debt-info{
    margin-top: 5px; font-weight: 300; font-size: 14px;
}


.block-B{display: block; margin: 50px 0;}
.stat-block{
    display: inline-block;
    width: 30%;
    margin: 0 1%;
    text-align: center;
}

.stat{
    display: block;
    color: #00B2FF;
    font-weight: 700;
    font-size: 32px;
    text-shadow: 0 2px 2px rgba(0,0,0,.05);
}

.stat-caption{
    font-weight: 300;
    color: #505557;
    margin-top: 5px;
    font-size: 15.5px;
}


.about-block{
    padding: 35px 50px;
    box-sizing: border-box;
    background: #1890c5;
    border-radius: 9px;
    text-align: left;
    box-shadow: 0 2px 3px rgba(0,0,0,.12);
}

.about-block-heading{
    font-weight: 700;
    font-size: 24px;
    color: #f9f9f9;
    margin: 10px 0 5px;
    text-shadow: 0 2px 3px rgba(0,0,0,.08);
}

.section-heading{
    color: #fff;
    margin-top: 25px;
    display: block;
    font-weight: 700;
    font-size: 20px;
}

.about-content{
    margin: 10px 0;
    margin-left: 1px;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.05);
    line-height: 27px;
}

#emphasis{font-weight: 700;}
#link{font-weight: 700; color: #fff;}


.chart-area{margin: 35px 0 0; width: 50%; background: #fff; padding: 10px 0; border: 1px solid #999; border-radius: 8px; box-shadow: 0 2px 3px rgba(0,0,0,.2);}

.sources{text-align: left; margin-top: 35px; font-weight: 300; text-shadow: 1px 2px 1px rgba(0,0,0,.03); color: #505557;}
#sourceTitle{font-weight: 500;}



@media (max-width: 1000px) {
    
body{padding: 0;}
.main-content{width: 100%; margin: 0; border-radius: 0;}
.chart-area{width: 70%; margin: 35px auto 0;}
}

@media (max-width: 850px) {
    
.main-content{padding: 50px 35px;}
.block-A-left{margin: 0 1%;}
.usa-image{width: 80%; margin: 25px auto;}
#publicDebt{font-size: 32px;}
.debt-block{width: 100%;}
.stat{font-size: 30px;}
.chart-area{width: 80%;}

}

@media (max-width: 750px) {

    .main-content{padding: 50px 25px;}    
    .block-A-left{display: none;}
    .block-A-right{width: 100%; margin: 0;}
    .debt-block{width: 325px;}
    .chart-area{width: 85%;}
}

@media (max-width: 650px) {
    
    .main-content{padding: 50px 0;}
    .stat{font-size: 28px;}
    .about-block{border-radius: 0;}
    .chart-area{width: 90%;}
    .sources{margin-left: 25px;}
}

@media (max-width: 650px) {
    
    .main-content{padding: 50px 0;}
    .block-A{margin: 50px 0;}
    .stat{font-size: 28px;}
    .about-block{border-radius: 0;}
    .chart-area{width: 90%;}

}

@media (max-width: 550px) {
    
    .main-content{padding: 25px 0 35px;}
    h1{font-size: 28px;}
    .block-A{margin: 35px 0;}
    .debt-block{width: 80%;}
    .stat-block{display: block; margin: 35px 0; width: 100%;}
    .stat{font-size: 32px;}
    .about-block{border-radius: 0; padding: 35px;}
    .chart-area{width: 100%;}
    
    .about-block-heading{font-size: 22px;}
    .section-heading{font-size: 18.5px;}
    .about-content{font-size: 17px; line-height: 25px;}
}

@media (max-width: 450px) {
    
    .debt-block{width: 85%;}
    .about-block{padding: 35px 25px;}

    .about-block-heading{font-size: 20px;}
    .section-heading{font-size: 17px;}
    .about-content{font-size: 15.5px; line-height: 23px;}
}