style.css

/*
Theme Name: Blogpocket Sustie
Theme URI: https://lanzatu.blog/sustie
Description: El propósito es puramente didáctico y académico, aunque el tema es completamente operativo para implementar cualquier sitio web que uno pueda imaginar. Siga las recomendaciones para configurar un sitio web móvil rápido y optimizado, seguro y preparado para SEO. Y para diseñar la página de inicio, edítela solo con Gutenberg. También redacte con Gutenberg cualquier otra página que incluya en su sitio web. Con el tema Blogpocket Sustie se tiene una serie de páginas en blanco para diseñar desde cero, fácilmente, sin distracciones y sin usar herramientas externas complicadas. Tienes la garantía total de que el tema funcionará correctamente porque la base es el tema Susty de Jack Lennox. Pero tú haces el diseño del front-end.
The purpose is purely didactic and academic, although the theme is fully operational to implement any website that one can imagine. Follow the recommendations to set up a fast and optimized mobile website, safe and prepared for SEO. And to design the home page, edit it only with Gutenberg. Also compose with Gutenberg any other page that you will include on your website. With the theme Blogpocket Sustie you have a series of blank pages to design from scratch, easily, without distractions and without using complicated external tools. You have the full guarantee that the theme will work correctly because the basis is Genesis's Susty theme by Jack Lennox. But you do the front-end design.
Author: Antonio Cambronero
Author URI: https://www.blogpocket.com

Version: 1.3.0

Tags: accessibility-ready, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, welcome-widget, welcome-single-post-page-widget, full-width-template, left-sidebar, one-column, right-sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, two-columns, wide-blocks, Gutenberg ready, micro-blog

License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Text Domain: sustie
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Links
# Accessibility
# Alignments
# Clearings
# Content
	## Posts and pages
	## Comments
# Media
	## Captions
	## Galleries
# Site
	## Header
	## Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements with `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
	background-color: transparent;
        
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none; /* 1 */ted

	
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */

legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
	display: none;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: rgb(4, 4, 2);
	font-family: "Lato", sans-serif;
	font-size: calc( 15px + 4 * (100vw / 1500));
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
        font-family: 'Merriweather Sans';
        
}

p {
	margin-bottom: 1.5em;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Lato", sans-serif;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: "Lato", sans-serif;;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 0px #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background-color: #fffefc;
	border-top: 0.4rem solid;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
a {
	color: rgb(4, 4, 2);
	text-decoration: underline;
	border-bottom: 0em solid transparent;
}



a#susty-back-link {
	padding: .3em .6em;
}

a:visited {
	color: rgb(4, 4, 2);
}

a:hover, a:focus, a:active {
	/*color: midnightblue;*/
	text-decoration: none;
	
}

a:focus {
	outline: thin;
}

a:hover, a:active {
	outline: 0;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Site
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
header#masthead {
	display: flex;
	align-items: center;
	max-width: 69em;
	margin: 2em auto;
	padding: 0 1em;
}

header#masthead h1, header#masthead p {
	font-size: 1em;
	line-height: 1em;
	font-weight: bold;
	flex: 1;
	margin: 0;
}

header#masthead a {
	border-bottom: unset;
	text-decoration: none;
}

header#masthead > a {
	font-weight: bold;
}

header#masthead > a > svg {
	width: 1.8em;
	height: 1.8em;
}

.logo {
	flex: 0 0 2.4em;
	text-align: center;
	line-height: 0;
	margin-right: .5em;
}

.logo svg {
	width: 2.4em;
	height: 2.4em;
}

svg * {
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------------------
## Content
--------------------------------------------------------------*/

#content {
	max-width: 39em;
	margin: 0 auto;
	padding: 0 1em;
}

#contenthome {
        max-width: 100%;
	margin: 0 auto;
	padding: 0 0em;
}


article a, nav a {
	text-decoration: underline;
	border-bottom: 0.1em;
	line-height: 1.6em;
}

article h2 > a {
        text-decoration: none;
}

article h2 > a:hover {
        text-decoration: underline;
}

article > header > h1, article > header > h2 {
	font-size: 1.4em;
	line-height: 1em;
	margin: 0 0 .4em 0;
        
}

.entry-meta {
	color: rgb(179, 179, 179);
}

.entry-meta a {
	color: rgb(179, 179, 179);
}

.cat-links {
	display: flex;
	align-items: center;
}

.cat-links a:first-of-type {
	margin-left: .5em;
}

.cat-links a, .comments-link a, .edit-link a {
	padding: 0 .5em;
	margin: 0 .5em 0 0;
}

footer#colophon {
	max-width: 69em;
	margin: 3em auto;
	text-align: center;
	padding: 0 1em;
	font-size: .75em;
}

.home .entry-title {display: none;}

/* Widget Base ------------------------------- */

.widget {
	margin-top: 3rem;
}

.widget:first-child {
	margin-top: 0;
}

.widget-content > div > *:first-child {
	margin-top: 0;
}

.widget-content > div > *:last-child {
	margin-bottom: 0;
}

.widget .widget-title {
	margin: 0 0 2rem;
}

.widget li {
	margin: 2rem 0 0 0;
}

.widget li:first-child,
.widget li > ul,
.widget li > ol {
	margin-top: 0;
}

.widget table,
.widget table * {
	border-color: #dedfdf;
}

.widget table caption {
	background-color: #dedfdf;
}

.widget .post-date,
.widget .rss-date {
	color: #6d6d6d;
	display: block;
	font-size: 0.85em;
	font-weight: 500;
	margin-top: 0.2rem;
}

.widget select {
	max-width: 100%;
}

/* Font Families ----------------------------- */

.widget_text p,
.widget_text ol,
.widget_text ul,
.widget_text dl,
.widget_text dt,
.widget-content .rssSummary {
	font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
	letter-spacing: normal;
}

.widget-content cite,
.widget-content figcaption,
.widget-content .wp-caption-text {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

@supports ( font-variation-settings: normal ) {

	.widget-content cite,
	.widget-content figcaption,
	.widget-content .wp-caption-text {
		font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	}
}

/* Base List Widget -------------------------- */

.widget_archive ul,
.widget_categories ul,
.widget_pages ul,
.widget_meta ul,
.widget_nav_menu ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_rss ul {
	list-style: none;
	margin: 0;
}

.widget_archive li,
.widget_categories li,
.widget_pages li,
.widget_meta li,
.widget_nav_menu li {
	color: #6d6d6d;
	margin: 0.3rem 0;
}

.widget_archive li li,
.widget_categories li li,
.widget_pages li li,
.widget_meta li li,
.widget_nav_menu li li {
	margin-left: 2rem;
}

.widget_archive a,
.widget_categories a,
.widget_pages a,
.widget_meta a,
.widget_nav_menu a {
	font-weight: 700;
	text-decoration: none;
}

.widget_archive a:focus,
.widget_archive a:hover,
.widget_categories a:focus,
.widget_categories a:hover,
.widget_pages a:focus,
.widget_pages a:hover,
.widget_meta a:focus,
.widget_meta a:hover,
.widget_nav_menu a:focus,
.widget_nav_menu a:hover {
	text-decoration: underline;
}

/* 16. Site Footer */
/* -------------------------------------------------------------------------- */


.footer-nav-widgets-wrapper,
#site-footer {
	background-color: #fff;
	border-color: #dedfdf;
	border-style: solid;
	border-width: 0;
}

.footer-top-visible .footer-nav-widgets-wrapper,
.footer-top-hidden #site-footer {
	margin-top: 5rem;
}

.reduced-spacing.footer-top-visible .footer-nav-widgets-wrapper,
.reduced-spacing.footer-top-hidden #site-footer {
	border-top-width: 0.1rem;
}

.footer-top,
.footer-widgets-outer-wrapper,
#site-footer {
	padding: 3rem 0;
}


/* Footer Top -------------------------------- */

.footer-top {
	display: flex;
	border-bottom: 0.1rem solid #dedfdf;
	justify-content: space-between;
}

/* FOOTER MENU */

.footer-menu {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: -0.0277em;
}

.footer-menu li {
	line-height: 1.25;
	margin: 0.25em 0 0 0;
}

.footer-menu a {
	text-decoration: none;
}

.footer-menu a:hover,
.footer-menu a:focus {
	text-decoration: underline;
}

/* FOOTER SOCIAL */

.footer-social-wrapper {
	margin: 0;
	width: 100%;
}

.has-footer-menu .footer-social-wrapper {
	flex-shrink: 0;
	margin-left: 1rem;
	width: 50%;
}

ul.footer-social {
	margin: -0.5rem 0 0 -0.5rem;
}

.has-footer-menu .footer-social {
	justify-content: flex-end;
}

ul.footer-social li {
	margin: 0.5rem 0 0 0.5rem;
}

.footer-social a {
	background-color: #cd2653;
	height: 3.6rem;
	width: 3.6rem;
}

.footer-social a::before {
	font-size: 1.6rem;
}

/* Footer Widgets ---------------------------- */

.footer-widgets-outer-wrapper {
	border-bottom: 0.1rem solid #dedfdf;
}

.footer-widgets + .footer-widgets {
	margin-top: 3rem;
}

/* Footer Bottom ----------------------------- */

#site-footer {
	font-size: 1.6rem;
}

#site-footer .section-inner {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
}

#site-footer a {
	text-decoration: none;
}

#site-footer a:focus,
#site-footer a:hover {
	text-decoration: underline;
}


/* Code from https://code.tutsplus.com/es/tutorials/dynamically-adding-four-footer-widget-areas--cms-22168 */
/* floats */
.quarter,
.one-third,
.two-thirds,
.half {
    float: left;
}

/* widths */
.one-third {
    width: 32%;
}
.two-thirds {
    width: 65.5%;
}
.quarter {
    width: 23.5%;
}
.three-quarters {
    width: 74.5%;
}
.half {
    width: 48%;
}

/* margins  */
.one-third {
    margin: 0 0.5%;
}
.quarter,
.two-thirds {
    margin: 0 0.5%;
}
.left,
.quarter.left,
.one-third.left {
    margin: 0 1% 0 0;
    float: left;
}
.right,
.quarter.right,
.one-third.right {
    margin: 0 0 0 1%;
    float: right;
}
.half.left {
    width: 48%;
    margin: 0 2% 0 0;
}
.half.right {
    width: 48%;
    margin: 0 0 0 1%;
}
.two-thirds.left {
    margin: 0 2% 0 0;
}
.two-thirds.right {
    margin: 0 0 0 1%;
    float: right;
}

/* media queries for larger screens such as small tablets in landscape or large tablets in portrait */
@media screen and ( max-width: 780px ) {
     
    /* only the .quarter layout class is relevant here - all other classes will have full width */
    .quarter {
        width: 48%;
    }
    .quarter.left {
        margin-right: 2%;
    }
    .quarter.right {
        margin-left: 2%;
    }
    footer .third.quarter.widget-area {
        clear: both;
    }
}
 
/* media queries for small screens in landscape mode (or similar) */
@media screen and ( max-width: 600px ) {
     
    /* width sizing all full width in small screens */
    .quarter,
    .one-third,
    .half,
    .two-thirds,
    .three-quarters,
    .full-width {
        width: 100%;
        margin: 0;
    }
    /* padding adjustments */
    .widget-area {
        padding: 0 0 10px 0;
    }
}

.footer-contenedor {
    margin-left:20px;
    margin-right: 20px;
}