body {
    background: #f4f4f4;
}
.blog-container {
    display: table; width: 100%; padding: 30px;
}
.blog-left, .blog-right{
    width: 50%; float: left; padding: 30px;
}
.article-img {
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
hr {
    max-width: 30px; border: none; height: 3px; background: #ff7800; margin: 7px 0 7px;
}
.blog-date {
    color: #ff7800; font-family: 'Fjalla One', sans-serif; text-transform: uppercase; font-size: 24px;
}
.blog-date span {
    font-size: 48px;
}
.blog-read-more {
    margin-top: 20px; display: block; font-size: 18px;
}

/*CONTENT LEFT*/
.blog-left-txt-top {
    display: table;
}
.blog-left-txt-top h3{
    font-size: 90px; text-transform: uppercase; color: #ff7800; float: left; margin: -15px 0 10px;
}
.blog-left-txt-top span {
    position: relative; top: -15px;
}
.blog-left-txt-top p {
    font-size: 16px; line-height: 160%; display: none;
}
.big-image {
    height: 350px; width: 100%;
}
.blog-txt-cont {
    padding: 30px 0;
}
.blog-title-cont {
    display: table; width: 100%;
}
.blog-txt-cont p {
    padding-top: 20px; font-size: 16px; line-height: 155%;
}
.blog-title-cont h2 {
    text-transform: uppercase; font-size: 24px; max-width: 600px;
    width: 75%; float: left; margin-top: 30px;
}
.first-article-cont .blog-date {
    float: right;
}
.blog-txt{
    display: inline-block; vertical-align: middle; width: 47%; padding-left: 25px;
}
/*CONTENT RIGHT*/
.blog-article {
    margin-bottom: 40px;
}
.small-image{
    height: 230px; width: 50%; display: inline-block; vertical-align: middle;
}
.pagination {
     height: 40px; display: table; width: 100%;
}
.pagination a {
    line-height: 40px; position: relative; font-family: 'Fjalla One', sans-serif; font-size: 25px; padding: 0 15px;
    height: 40px;float: left;border: 1px solid; margin-left: -1px; cursor: pointer;
}
.pagination span {
    line-height: 40px; position: relative; font-family: 'Fjalla One', sans-serif; font-size: 25px; padding: 0 15px;
    height: 40px;float: left;border: 1px solid; margin-left: -1px; cursor: pointer;
}
.pagination span:hover {
    background: #ccc;
}
.pagination .active span,
.pagination a:hover {
    background: #ccc;
}
.pagination .active span{
    cursor: default;
}

/*=============== BLOG SINGLE =================*/
.blog-single-container {
    display: table; width: 100%; position: relative;
}
.blog-single-left-cont .title{
    padding: 0 0 20px 0;
}
.blog-single-left {
    width: 80%; float: left; padding: 40px 60px 60px 60px; background: #fff;
}
.article-left-cont, .article-txt-cont {
    width: 50%; float: left;
}
.article-txt {
    padding: 0 0 100px 50px; overflow-y: auto; height: 70vh;
}
.article-txt-cont {
    position: relative;
}
.article-txt::-webkit-scrollbar {
    display: none;
}
.article-txt img {
    max-width: 600px; width: 100%; margin: 15px 0;
}
.degradado-white {
    position: absolute; bottom: 0; height: 100px; width: 100%;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.3) 100%);
}
.art-recientes-cont {
    width: 20%; float: left; height: 100%; background: #f4f4f4; position: relative; bottom: 0; right: 0;
}

.blog-single-left h2{
    font-size: 42px; text-transform: uppercase; color: #ff7800; max-width: 600px; width: 80%;
}
.blog-single-img {
    height: 340px; width: 100%;
}
.share-redes-cont {
    display: table; width: 100%; position: relative; margin: 5px 0;
}
.share-redes{
    float: left; position: absolute; top: 50%; transform: translateY(-50%);
}
.share-redes .fa{
    font-size: 23px; padding: 0 15px 0 0; color: #000;
}
.share-redes-cont .blog-date {
    float: right;
}
.blog-single-intro p {
    font-size: 20px; line-height: 140%;font-weight: 300;
}
.article-txt p {
    margin-bottom: 10px; line-height: 160%;
}
.article-txt p strong {
    color: #ff7800; font-size: 1.2em;
}
.art-recientes {
    padding: 30px;
}

.art-recientes h4{
    font-size: 30px; text-transform: uppercase; color: #ff7800; margin: 0 0 20px;
}
.art-recientes .blog-txt {
    padding: 0; width: 100%;
}
.art-recientes .blog-date{
    font-size: 16px;
}
.art-recientes .blog-date span{
    font-size: 26px;
}
.art-recientes .blog-article h2{
    text-transform: uppercase;
}
.art-recientes .blog-read-more {
    margin: 0;
}
@media screen and (max-width: 1600px){
    .blog-left-txt-top h3 {font-size: 75px;}
}
@media screen and (max-width: 1400px){
    .blog-left-txt-top h3 {font-size: 65px;}
    .blog-left, .blog-right {padding: 20px;}
    .blog-left-txt-top p {font-size: 14px;}
    .blog-article {margin-bottom: 30px;}
}
@media screen and (max-width: 1300px){
    .blog-left, .blog-right {padding: 15px;}
    .blog-right {padding: 15px 0 15px 15px;}
    .blog-article {margin-bottom: 25px;}
    .small-image {height: 180px;}
    .blog-date {font-size: 20px;}
    .blog-date span {font-size: 35px;}
    .big-image {height: 250px;}
    .blog-title-cont h2 {margin-top: 12px;}
    .blog-txt-cont p {padding: 0;}
    .blog-single-img {height: 300px;}
    .article-txt {padding: 0 0 80px 35px;}
    .blog-single-left {padding: 40px 40px 40px }
    .art-recientes .blog-article h2 {font-size: 16px;}
    .blog-single-left h2 {width: 100%; max-width: 100%;}
}
@media screen and (max-width: 1200px){
    .blog-left-txt-top p {display: none;}
    .blog-container {padding: 15px;}
    .blog-title h2{font-size: 18px;}
    .blog-left-txt-top h3 {font-size: 50px;}

}
@media screen and (max-width: 1000px){
    .blog-single-left h2 {font-size: 38px;}
    .art-recientes h4 {font-size: 25px;}

}
@media screen and (max-width: 850px){
    .blog-single-left h2 {font-size: 30px;}
    .blog-single-left {width: 100%;}
    .art-recientes-cont {width: 100%;}
    .art-recientes h4 br{display: none;}
    .blog-article {width: 31%; display: inline-block; vertical-align: top;}

    .blog-left, .blog-right {width: 100%;}
    .blog-container .blog-article {width: 100%;}
}
@media screen and (max-width: 700px){
    .article-left-cont, .article-txt-cont {width: 100%;}
    .article-txt {padding: 20px 0; overflow-y: inherit; height: auto;}
    .degradado-white {display: none;}
    .blog-left-txt-top h3 {font-size: 40px;}
    .blog-left-txt-top span {top: -7px;}
}
@media screen and (max-width: 500px){
    .blog-single-img {height: 200px;}
    .blog-article {width: 48%;}
    .blog-single-left {padding: 40px 20px 10px;}
    .blog-single-left h2 {font-size: 26px;}
    .blog-date span {font-size: 30px;}
    .blog-date {font-size: 18px;}
    .blog-single-intro p {font-size: 18px; line-height: 140%;}

    .blog-left, .blog-right {padding: 0;}
    .blog-container {padding: 40px 20px;}
}
@media screen and (max-width: 400px){
    .big-image {height: 180px;}
    .small-image {width: 100%;}
    .blog-txt {padding: 10px 0 0;}
    .blog-title h2 {font-size: 24px;}
    .blog-txt {width: 100%;}
    .blog-title-cont h2 {width: 100%;}
    .blog-txt-cont p {display: none;}
    .first-article-cont .blog-date {float: left; position: absolute;}
    .blog-title-cont h2 {margin-top: 40px;}
    .blog-txt-cont {padding: 10px 0 25px;}
    .blog-read-more {margin-top: 10px;}
}