/* Variación de yaravi_paginas.css incluye bloque sociales */ /* css para páginas de yaravi.org basado en multiColumnTemplate.css de Basic - Multicolumn template de Dreamweaver*/ /* Replaced font family "Source Sans Pro" with "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro" */ @charset "UTF-8"; .container { /* container contains the whole */ background-color: #FFFFFF; width: 70%; margin-left: auto; margin-right: auto; border-bottom-width: 0px; padding-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; } /* adding this img.center to center images duh! But does nothing apparently .img.center { display:block; margin: 0 auto; } */ /* Start - block Share block snippet*/ .share-block { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0; } .share-label { font-weight: 600; margin-right: 0.25rem; } .share-btn { display: inline-flex; justify-content: center; align-items: center; width: 38px; height: 38px; border-radius: 50%; color: white; text-decoration: none; transition: transform 0.2s ease; padding: 8px; } /* Brand-ish colors */ .share-btn.fb { background-color: #1877f2; } /* Facebook */ .share-btn.x { background-color: #000000; } /* X */ .share-btn.ln { background-color: #0077b5; } /* LinkedIn */ .share-btn.wa { background-color: #25d366; } /* WhatsApp */ .share-btn.bs { background-color: #0285ff; } /* Bluesky-ish blue */ .share-btn:hover { transform: scale(1.1); } /* Shrink only on small screens */ @media (max-width: 480px) { .share-btn { width: 32px; height: 32px; padding: 6px; } } /* End - block Share block snippet */ .row { width: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: inline-block } .row.blockDisplay { display: block; } .column_half { width: 50%; float: left; margin-top: 0px; } .columns { width: 25%; float: left; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; color: #A5A5A5; line-height: 24px; padding-top: 10px; padding-bottom: 10px; text-align: justify; margin-top: 15px; margin-bottom: 15px; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; } .row .columns p { padding-left: 10%; padding-right: 10%; } .container .columns h4 { text-align: center; color: #01B2D1; } .primary_header { /* original width: 100% paddings 10px */ width: 100%; background-color: #349ac3; padding-top: 0px; padding-bottom: 0px; clear: left; border-bottom: 2px solid #2C9AB7; } /* FAILED - working to put this secondary header menu at the right side of primary header */ .secondary_header { width: 100%; padding-top: 10px; padding-bottom: 10px; background-color: #212153; clear: left; /* original padding-top: 50px; padding-bottom: 50px; background-color: #B3B3B3; clear: left; */ } .container .secondary_header ul { margin-top: 0%; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; /* width: 100%; */ } .secondary_header ul li { list-style: none; float: left; margin-right: auto; margin-top: 0px; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; font-weight: normal; color: #FFFFFF; letter-spacing: 1px; margin-left: auto; text-align: center; width: 16%; transition: all 0.3s linear; } .secondary_header ul li:hover { color: #717070; cursor: pointer; } .left_article { background-color: #FFFFFF; width: 60%; float: left; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; color: #343434; padding-bottom: 15px; } .noDisplay { display: none; } .container .left_article h3 { padding-left: 5%; padding-right: 5%; margin-top: 5%; color: #717070; font-weight: bold; text-transform: uppercase; } .container .left_article p { padding-left: 5%; padding-right: 5%; text-align: justify; line-height: 24px; margin-top: 30px; margin-bottom: 15px; color: #545252; } /* TEST Adding this to change font for a table */ .container .left_article table { font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; font-size: smaller; } /*end TEST*/ .right_article { width: 40%; float: left; background-color: #F6F6F6; } /* rule added DMC */ .right_article_cent { /* exclude width to see what happens. SEEMS TO WORK */ /* width: 40%; */ float: left; background-color: #F6F6F6; text-align: center; } .container .right_article ul { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .right_article ul li { font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; list-style: none; text-align: center; background-color: #B3B3B3; width: 90%; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; padding-top: 15px; padding-bottom: 15px; color: #FFFFFF; font-weight: bold; border-radius: 0px; transition: all 0.3s linear; border-left: 5px solid #717070; } .right_article ul li:hover { background-color: #717070; cursor: pointer; } .footer { background-color: #212153; } .title { /* this bold weight seems to be spread to many classes font-weight: bold; */ font-style: normal; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; text-align: left; color: #FFFFFF; letter-spacing: 2px; } .placeholder { /* [disabled]max-width: 400px; */ /* [disabled]max-height: 200px; */ width: 100%; padding-top: 30px; /* [disabled]padding-left: 19px; */ padding-bottom: 30px; height: 100%; } .left_half { background-color: #01B2D1; } .container .column_half.left_half h2 { color: #FFFFFF; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; text-align: center; } .right_half { background-color: #01B2D1; color: #FFFFFF; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; text-align: center; font-weight: bold; } .column_title { padding-top: 25px; padding-bottom: 25px; } .copyright { text-align: center; background-color: #ffffff; color: #212153; text-transform: uppercase; font-weight: lighter; letter-spacing: 2px; border-top-width: 2px; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif,"Source Sans Pro"; } body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } @media (max-width: 320px) { .container { width: 100%; } .secondary_header ul li { float: none; margin-top: 28px; margin-left: 0px; width: 100%; } .container .secondary_header ul { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; height: auto; width: 100%; text-align: center; } .secondary_header { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 1px; padding-bottom: 40px; } .left_article { width: 100%; height: auto; } .right_article { width: 100%; height: auto; } .placeholder { width: 100%; margin-top: 22PX; margin-right: 0px; margin-bottom: 22PX; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 400px; max-height: 200px; height: auto; } .columns { width: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0PX; padding-right: 0PX; padding-bottom: 0PX; padding-left: 0PX; } .columns p { padding-left: 10px; padding-right: 10px; } .column_half.left_half { width: 100%; } .column_half.right_half { width: 100%; } .copyright { padding-top: 25px; padding-bottom: 0px; margin-bottom: 0px; } .container .left_article h3 { margin-top: 30px; } .social .social_icon img { width: 80%; } .container .secondary_header { } } @media (min-width: 321px) and (max-width: 768px) { .container { width: 100%; } .secondary_header ul li { float: none; margin-top: 28px; margin-left: 0px; width: 100%; } .container .secondary_header ul { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; height: auto; width: 100%; text-align: center; } .secondary_header { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 1px; padding-bottom: 40px; } .left_article { width: 100%; height: auto; } .right_article { width: 100%; height: auto; padding-bottom: 25px; } .placeholder { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 100%; max-width: 100%; height: auto; max-height: 100%; } .columns { width: 100%; margin-top: 6px; margin-right: 0px; margin-bottom: 6px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .columns p { padding-left: 14px; padding-right: 14px; } .column_half.left_half { width: 100%; } .column_half.right_half { width: 100%; } } @media (min-width: 769px) and (max-width: 1000px) { .container { width: 80%; } .secondary_header { overflow: auto; padding-top: 30px; padding-bottom: 30px; } .secondary_header ul li { margin-top: 10px; margin-right: 7%; margin-bottom: 10px; margin-left: 7%; } .left_article { height: auto; } .right_article { height: auto; padding-bottom: 27px; } .placeholder { width: 100%; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } .columns { width: 50%; float: left; padding-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; } .container .columns p { padding-left: 25px; padding-right: 25px; } } @media (min-width: 1001px) { } .thumbnail { width: 100px; border-radius: 200px; height: 100px; margin-left: auto; } .thumbnail_align { text-align: center; } .social { text-align: center; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 100%; background-color: #414141; clear: both; overflow: auto; } .social_icon { width: 25%; text-align: center; float: left; transition: all 0.3s linear; line-height: 0px; padding-top: 7px; } .container .social .social_icon:hover { cursor: pointer; opacity: 0.5; } #menu a { color: #F9E113; }