/* html */
  
  html {
    background-color: #f1f1f1;
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSm4nm82qeraFI-CW5sSPz_Kv7JPOAr6XJmddk5eMNyMJ6jAN02);
}

/* Header */
header {
    height: 115px;
    border-bottom: solid 1px #b1b1b1;
}

.btnTopStyle {
    padding: 2px;
    font-weight: lighter;
    border-top: solid 0.5px #dfdfdf;
    border-left: solid 0.5px #dfdfdf;
    border-right: solid 0.5px #dfdfdf;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.pageOption {
    width: 100%;
    height: 25px;
    padding-top: 10px;
    border-bottom: solid 1px #b1b1b1;
}

.pageOption .active {
    font-weight: 900;
    border-top: solid 0.5px #a7a7a7;
    border-left: solid 0.5px #a7a7a7;
    border-right: solid 0.5px #a7a7a7;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.topIcon {
    width: 20px;
    float: right;
}

.stylePage {
    width: 100px;
    text-align: center;   
}

.dropbtn {
    background-image: url(https://image.flaticon.com/icons/svg/566/566020.svg);
    background-color: #ffffff;
    width: 40px;
    height: 40px;
    border: none;
    margin-top: 20px;
    margin-left: 20px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #ffffff;
}

.logo {
    width: 60px;
    margin-left: 10px;
}

.pageInfo {
    float: right;
    font-size: 35px;
    margin-right: 20px;
    margin-top: 25px;
}

.onlyRegular {
    display: flex !important;
}

.onlyMobile {
    display: none !important;
}

@media only screen and (max-width: 800px) { 
    
    .onlyRegular {
        display: none !important;
    }
    
    .onlyMobile {
        display: flex !important;
    }
    
}

/* Body */  

body {
    width: 90%;
    max-width: 1000px;
    margin: auto;
    background-color: #ffffff;
}

.contentWrapper {
    margin: 10px;
}

.contentWrapper hr {
    width: 90%;
    margin-top: 30px;
} 

.twitterWrapper {
    border: 1px solid lightgray;
    border-radius: 5px;
    margin:auto
}

/* Contenedores de Noticias */

.noLinkDecoration {
    text-decoration: none;
    color: unset;
}

.newsCont {
    border: solid 0.5px #eeecec;
    display: flex;
    padding: 5px;
    max-width: 900px;
    margin: auto;
    margin-top: 20px;
}

.newsCont h1 {
    font-size: 35px;
    margin-top: 0;
    margin-bottom: 0;
}

.newsCont h2 {
    font-size: 12px;
    color: #525050;
    margin-top: 6px;
    margin-bottom: 0;
}

.newsImgCont {
    width: 30%;
    max-width: 220px;
    min-width: 150px;
}

.newsImg {
    width: 100%;
    min-width: 150px;
    max-width: 200px;
}

.newsContent {
    width: 70%;
    min-width: 245px;
    max-width: 700px;
    float: right;
}

.latestNewsCont {
    max-width: 900px;
    margin: auto;
    margin-top: 20px;
}

.latestNewsCont .twitterWrapper {
    margin-top: 20px;
}

/* Boton */

.btnCont {
    width: 110px;
}

.myButton {
    box-shadow:inset 0px 1px 0px 0px #f7c5c0;
    background:linear-gradient(to bottom, #fc8d83 5%, #e4685d 100%);
    background-color:#fc8d83;
    border-radius:6px;
    border:1px solid #d83526;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #b23e35;
}
.myButton:hover {
    background:linear-gradient(to bottom, #e4685d 5%, #fc8d83 100%);
    background-color:#e4685d;
}
.myButton:active {
    position:relative;
    top:1px;
}

/* body news */

.MainNewsCont {
    padding: 5px;
    max-width: 900px;
    margin: auto;
    margin-top: 20px;
}

.MainNewsCont h1 {
    font-size: 27px;
}

.MainNewsCont h2 {
    font-size: 23px;
    color: #555555;
}

.MainNewsCont h3 {
    font-size: 11px;
    color: #6d6c6c;
    margin-top: 10px;
    margin: 0 !important;
}

.MainNewsCont h4 {
    font-size: 14px;
    color: #555555;
    margin: 0 !important;
}

.MainNewsCont .quote {
    font-style: italic;
    margin-right: 20px;
    margin-left: 20px;
}

.imgNewsMain {
    width: 100%;
    min-width: 200px;
    max-width: 800px;
    max-height: 400px;
}

/* Noticias fix  mobile */

@media only screen and (max-width: 800px) {
    .newsCont {
        display: block;
        overflow: auto;
    }
    
    .newsCont .flex {
        display: block;
    }
    
    .newsImgCont {
        width: 100%;
        min-width: auto;
        max-width: 500px;
        margin: auto;
    }
    
    .newsImg {
        width: 100%;
        max-height: 250px;
        min-width: 200px;
        max-width: 500px;
    }
    
    .newsContent {
        width: 100%;
        float: left;
        min-width: 200px;
        margin-top: 10px;
    }
}

/* Cartas al editor */

.letterCont {
    width: 90%;
    border-top: dotted 1px lightgray ;
    border-bottom: dotted 1px lightgray;
    text-align: center;
}

.letterCont h1 {
    font-style: italic;
}

.letterCont h2 {
    color: #5656ec;
    font-size: 12px;
}

.letterCont h3 {
    color: #778899;
    font-size: 12px;
}

.letterCont a:hover {
    color: #525050;
}

.letterInfo {
    width: 90%;
    border-top: dotted 1px lightgray ;
    border-bottom: dotted 1px lightgray;
}

.letterInfo h2 {
    font-size: 18px;
    color: #4d4b4b;
    font-style: italic;
}

.letterInfo h3 {
    font-size: 11px;
    color: #747474;
}

/* Footer */

footer {
    border-top: solid 1px #808080;
    background-color:#f7f7f7;
}

footer .icons {
    width: 35px;
}

/* footer fix mobile */

@media only screen and (max-width: 800px) { 
    
    footer .flex{
        display: inherit;
    } 
    
    footer .mt-md {
        margin-top: 10px;
    }
    
    footer .w-33 {
        width: 100%;
    }
    
    footer .logo {
        margin-left: 45%;
    }
    
    .companyMotto {
        margin: 0;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .contactSection {
        width: 100%;
        text-align: center;
        display: flex;
        padding: 10px 0;
    }
    
}