/*
Theme Name: ePortfolio 2023 Twentytwenty Child theme
Author: { Write Your Name Here }
Template: twentytwenty
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Basic, simple, minimal 
Text Domain: eportfolio2023theme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/



/* ================ COLOR PALETTE ======================= */


:root {
  --main-bg-color: #BAD1C0;
  --pale-accent-color: #F0EFEA;
  --main-accent-color: #000;
  --bodytext-color: #003A3D;
  --headers-color: #8C192B;
	--blue-color: #0000FF;
	--purple-color: #AEA5FF;
	--orange-color: #FFAC79;
	
	--h1-color: #418699;
	--h2-color: #FFAC79;
	
  --alink-color: #F0EFEA;
  --avisited-color: #F0EFEA;
  --ahover-color: #99C087;
  --aactive-color: #418699;
  --currentlink-color: #BAD1C0;
	
	--size-1:  2.5rem;
	--size-2: 2.1459rem;
	--size-3: 1.7rem;
	--size-4:  1.5rem;
	--size-5:  1.2rem;
	--size-6: 1.1rem; 
	--size-default: 1rem;
	--size-small: .8584rem;
	--line-height: 1.5;
	--line-height-rem: 1.5rem;
	--thumbnail-size: 255px;
} 

html {
	font-size: 100%;
	scroll-behavior: smooth;
}
body {font-size: var(--size-default);}


.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content ul,
.entry-content li {
	margin: 0;
	padding: 0;
}

#site-content .entry-header {
	background-color: #BAD1C0;
}

.header-titles .site-title.faux-heading a {
	color: #F0EFEA;
	font-family: eloquent-jf-pro,serif;
	font-weight: 400;
	font-style: italic;
}

.header-titles .site-description {
	color: #99C087;
	font-family: 'montserrat', sans-serif;
    font-weight: 300;
	font-size: var(--size-4);
}

header#site-header.header-footer-group {
	margin-bottom: 3rem;
}

h5.has-large-font-size {
    margin-left: 1.8rem;
    margin-top: -0.6rem;
}



#site-content #site-header .togger-wrapper .search-toggle .toggle-icon, .search-toggle svg{
	max-width: 2rem;
	width: 1.5rem;
}

#site-content #site-header .togger-wrapper .search-toggle .toggle-icon, .search-toggle .toggle-text{
	font-size: 1rem;
}

div.toggle-wrapper >  button.toggle {
	margin-right: 4rem;
	padding: 0;
}

.header-inner .header-navigation-wrapper {
	align-items: center;
    display: flex;
    position: relative;
    left: 3rem;
}

.header-toggles .toggle-inner span.toggle-text {
	left: -2.4rem;
    right: 0;
    text-align: left;
    top: calc(100% - -0.3rem);
    width: auto;
    position: relative;
}

#site-header .header-inner .primary-menu-wrapper + .header-toggles .toggle-wrapper:first-child::before {
	display: none;
}








nav.mobile-menu ul li {
	border-color: var(--bodytext-color);
}


nav.mobile-menu ul li a {
	color:var(--alink-color);
	font-family: eloquent-jf-pro,serif ; 
	font-style: italic;
	text-decoration: none;
}

nav.mobile-menu ul li a:link {
	color: var(--alink-color);
	text-decoration: none;
}

nav.mobile-menu ul li a:visited {
	color: var(--avisited-color);
	text-decoration: none;
}

nav.mobile-menu ul li a:hover {
	color: var(--ahover-color);
	text-decoration: none;
}

nav.mobile-menu ul li a:active {
	color: var(--aactive-color);
	text-decoration: none;
}

nav.mobile-menu ul li.current-menu-item div.ancestor-wrapper > a {
	color: #FFFFFF;
	text-decoration: none;
}




.entry-content h1,
h1.page-title,
h1.entry-title,
aside.widget-area section h4 {
	font-family: eloquent-jf-pro,serif;
	font-weight: 400;
	font-style: italic;
	margin: 0;
	padding: 0;
	line-height: var(--line-height);
	font-size: var(--size-1);
}

h1.page-title {
	text-align: center;
	padding: var(--size-default);
	color: var(--h1-color);
	line-height: calc(var(--line-height) * 0.85);
	margin: 2rem auto;
	position: relative;
}

article header h1.entry-title,
h2.entry-title{
	font-size: var(--size-1);
	line-height: calc(var(--line-height) * 0.85);
	text-align: center;
	padding: 2rem 0 0 0;
	color: var(--h1-color);
}

article .entry-content h1 {
	font-size: var(--size-1);
}


article .entry-content h2 {
	font-size: var(--size-2);
	margin-top: calc(var(--line-height-rem) * 2);
	font-family: 'Monserrat', sans-serif;
	font-weight: 800;
	margin-bottom: 1rem;
	margin-top: 4rem;
}

article .entry-content h3 {
	font-size: var(--size-3);
	font-family: 'montserrat', sans-serif;
	font-weight: 600;
	line-height: var(--line-height);
	color: var(--h1-color);
}

article .entry-content h2 + h5 {
	margin-top: 2rem;
}

article .entry-content h4, 
aside.widget-area section h4{
	font-size: var(--size-4);
	font-family: 'montserrat', sans-serif;
    font-weight: 500;
}



article .entry-content h3 + h4 {
    margin-top: 1.5rem;
}

article .entry-content p + h3 {
	margin-top: 2rem;
}

article .entry-content h5 {
	font-size: var(--size-5);
    font-family: 'montserrat', sans-serif;
    font-weight: 300;
}


article .entry-content h6 {
	font-size: var(--size-6);
	font-family: 'montserrat', sans-serif;
}



article .entry-content p {
	font-size: var(--size-default);
	max-width: 75ch;
	line-height: var(--line-height);
	font-family: 'Montserrat',sans-serif;
	font-style: normal;
	font-weight: 400;	
}

article .entry-content li {
	font-size: var(--size-default);
	max-width: 75ch;
	line-height: var(--line-height);
	font-family: 'Montserrat',sans-serif;
	font-style: normal;
	font-weight: 400;	
}

article .entry-content ul {
	margin-left: 3rem;
	margin-top: 1rem;
	margin-bottom: 1rem
}

article .entry-content ul + h5 {
	margin-top: 4rem;
}

body.thumbs main#site-content.grid figure figcaption {
	font-size: calc(var(--size-default) * 0.8);
	max-width: 75ch;
	line-height: var(--line-height);
	font-family: 'Montserrat',sans-serif;
	font-weight: 400;
	font-style: normal;
}

body.highres main#site-content.artwork figure figcaption {
	font-size: var(--size-default);
	max-width: 75ch;
	line-height: var(--line-height);
	font-family: 'Montserrat',sans-serif;
	font-weight: 400;
	font-style: normal;
}



main#site-content div.post-inner div.entry-content div.top-left, main#site-content div.post-inner div.entry-content div.top-right, main#site-content div.post-inner div.entry-content div.bottom-left, main#site-content div.post-inner div.entry-content div.bottom-right {
	/*border: 1px solid red;*/
}

main#site-content div.post-inner div.entry-content div.top-left > figure.wp-block-image.size-full {
	margin-top: 0;
}

div.top-right h2{
	
	margin-top: 0;
	margin-bottom: 0;
	color: #003A3D;
}

div.top-right h3 {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}



div.bottom-left {
	background-color: #99C087;
	color: #003A3D;
	text-align: center;
	transition: background-color 2s;
	width: 100%;
	height: 279px;
}

div.bottom-right {
	background-color: #418699;
	color: #D1EAB7;
	text-align: center;
	transition: background-color 2s;
	width: 100%;
	height: 279px;
}

div.bottom-left h1 {
	margin: 3rem auto;
	font-size: var(--size-2);
}
div.bottom-right h1 {
	margin: 3rem auto;
	font-size: var(--size-2);
}

div.bottom-right a {
	padding: 115px 50px;
    position: relative;
    top: 114px;
	text-decoration: none;
	color: #BAD1C0;
	font-size: var(--size-3);
}

div.bottom-left a {
    padding: 116px 42px;
   	top: 27px;
    position: relative;
	text-decoration: none;
	color: #003A3D;
	position: relative;
    top: 113px;
	font-size: var(--size-3);
}

div.bottom-left a:hover {
	color: #418699;
}

div.bottom-left a:active {
	
}


div.bottom-right a:hover {
	color: #D1EAB7;
}

div.bottom-right a:active {
	
}

div.bottom-right:hover {
	background-color: #6CB298;
}

div.bottom-left:hover {
	background-color: #D1EAB7;
}

/* FIGCAPTION */
body.thumbs main#site-content.grid figure figcaption {
	text-align: center;
}

body.thumbs main#site-content.grid figure figcaption a:link {
	color: var(--headers-color);
	font-size: var(--size-default);
    text-decoration: none; /* removes underline */
}


body.thumbs main#site-content.grid figure figcaption a:hover {
	color: var(--ahover-color);
	font-size: var(--size-default);
    text-decoration: underline; /* adds underline for UX feedback */
}



/* PRIMARY MENU */
#site-header .primary-menu a:link {
	font-family: eloquent-jf-pro, serif;
	font-style: italic;
    color: var(--alink-color);
	font-size: var(--size-default);
}

#site-header .primary-menu a:visited {
    color: var(--avisited-color);
	font-size: var(--size-default);
	text-decoration: none;
}

#site-header .primary-menu a:hover {
    color: var(--ahover-color);
	font-size: var(--size-default);
	text-decoration: none;
}

#site-header .primary-menu a:active {
    color: var(--aactive-color);
	font-size: var(--size-default);
	text-decoration: none;
}

#site-header .primary-menu li.current-menu-item > a {
	color: var(--currentlink-color);
	font-size: var(--size-default);
	text-decoration: none;
}

}

footer#site-footer .header-footer-group {
	line-height: var(--line-height);
	font-family: eloquent-jf-pro,serif;
	font-style: italic;
	font-weight: 400;
	font-size: var(--size-small);
	position: relative;
	margin-top: 11rem
}

#menu-footer-menu {
	list-style-type: none;
	padding: 0;
	margin-left: calc(var(--size-default));
}

/* FOOTER */
#site-footer ul {
    list-style-type: none; /* removes bullets */
    }

#site-footer a:link {
	color: var(--alink-color);
	font-size: var(--size-default);
	text-decoration: none;
}

#site-footer a:visited {
	color: var(--avisited-color);
	font-size: var(--size-default);
	text-decoration: none;
}

#site-footer a:hover {
	color: var(--ahover-color);
	font-size: var(--size-default);
	text-decoration: none;
}

#site-footer a:active {
	color: var(--aactive-color);
	font-size: var(--size-default);
	text-decoration: none;
}
/* Add a:visited, a:hover, a:active */ 



section {width: 85vw; margin: 0 auto;}


#share-buttons {
    list-style-type: none;
	margin: 0;
	padding: 0;
    /* Removes bullets on the list */
}

ul#share-buttons {
	margin: 1.5rem auto;
}

#share-buttons li {
    margin: 0 0 1rem 0;
	padding: 0;
}

#share-buttons li svg{
    display: block;
	margin: 0 auto;
} 

#share-buttons .social-icon {
    width: calc(var(--line-height-rem) * 2);
    height: auto;
    /* Adjust the height of all the icons */
    /* Use the ID if you want to adjust one specific icon */
}

#share-buttons li.digg {
	width: 109px;
	margin: 0;
	padding: 0;
}

#share-buttons li.digg a {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding 0;
}

#share-buttons svg#Digg {
	margin: 0;
	padding: 0;
	width: 115px;
	height: 59px;
	position: relative;
	left: -15px;
}

ul.pagination + h2 {
	font-family: eloquent-jf-pro,serif;
	font-style: italic;
	font-size: var(--size-3);
	text-align: center;
	margin-bottom: 0;
}

.pagination {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
	max-width: 525px;
}

.pagination li {
	margin: 0;
}

/* =========== START BLOG PAGE ================= */
body.blog section.post {
	margin: 2rem 0 8rem 0; /* clockwise from noon */
	padding: 0;
	width: 100%;
	}
	body.blog section.post .page-title {
	margin: 0 0 2rem 0;
	}

	section.post h2.page-title a {
		font-size: var(--size-2);
		text-decoration: none;
		color: var(--avisited-color);
		}

		body.blog figcaption p {
		font-size: var(--size-default);
		max-width: 80ch;
		}



h1.site-title > a {
	font-family: eloquent-jf-pro,serif;
	font-style: italic;
	color: var(--alink-color);
	
}
	
	/*body.blog section.post figure.post-list-featured-image { 
	
	}*/
	
		/* =========== END BLOG PAGE ================= */


body.error404 {
	background-image: url("img/hero-image-vertical.jpg");
	background-size: 100vw;
    background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 56px;
}

div.error404-content {
	color: white;
}


/* ==================  START DEFAULT (MOBILE) STYLES ============================= */



body {
  background-color: var(--main-bg-color);
  color: var(--bodytext-color);
  
	
  /* See /htdocs/wp-content/themes/twentytwenty-child/fonts/read-me.md 
     and functions.php for how to add your own fonts or properly enqueue Google or Adobe fonts
  */
}

body.singular main#site-content .entry-content figure.wp-block-image.size-full {
	width: 100%;
	max-width: 100%;
	margin-bottom: 6rem;
}

/*============================== START ASIDE ===============================*/




/*============================== END ASIDE ===============================*/

	.singular .entry-header {
    padding: 1rem 0;
	background-color: var(--main-bg-color);
	}

.post-inner {
    padding-top: var(--line-height-rem);
}

body main#site-content {
	max-width: calc(100% - 2 * var(--size-default));
	margin: var(--size-default) auto;
	margin-bottom: 6rem;
}


body.thumbs main#site-content.grid figure.wp-block-image {
	margin-bottom: 3rem;
	margin-top: 0;
}

body.thumbs main#site-content.grid figure img {
	width: 100%;
	height: auto;
}

/*body.thumbs main#site-content.grid figure img {
	display: block;
	margin: 0 auto;
} */


input.wpcf7-form-control.has-spinner.wpcf7-submit {
    margin-top: 3rem;
}

ul.wordpress-html-sitemap a {
    color: black;
}

.privacy-policy {
	margin: 0 0 0 0;
}

.site-title {
	font-size: 2rem;
}

#site-content input[type="submit"] {
	background-color: var(--purple-color);
}

/* ==================  END DEFAULT (MOBILE) STYLES ============================= */










/* ==================  MEDIA QUERIES ============================= */


/*
SMALL DEVICES (LANDSCAPE PHONES, 576PX AND UP)
THESE DEVICES ARE USUALLY RETINA DISPLAY, SO USE 2X IMAGES
USE EITHER LANDSCAPE OR PORTRAIT IMAGES
*/

@media only screen and (min-width: 287px) {
/* all screens */
	
	body.thumbs main#site-content.grid figure img {
		width: var(--thumbnail-size);
		display: block;
		margin: 0 auto;
	}
}



/*
MEDIUM DEVICES (TABLETS, 768PX AND UP)
THESE DEVICES ARE USUALLY RETINA DISPLAY, SO USE 2X IMAGES
USE EITHER LANDSCAPE OR PORTRAIT IMAGES
*/

@media only screen and (min-width: 526px) {
	
	
	body.error404 {
	background-image: url("img/hero-image-vertical.jpg");
	background-size: 100vw;
    background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
}
	
	
/* TWO THUMBS COLUMNS GRID */
	
	.site-title {
	font-size: 2.1rem;
}
	
		body.thumbs main#site-content.grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: var(--size-default);
		margin: var(--size-default) auto;
		width: calc((var(--thumbnail-size) * 2) + var(--size-default));
		grid-row-gap: var(--size-default);
	}
	
	body.thumbs main#site-content.grid figure.wp-block-image {

		margin-top: 0;
	}
	
		div.bottom-left {
		width: 100%;
		height: 430px;
		
		}

		div.bottom-right {
		width: 100%;
		height: 430px;
		}
	
	div.bottom-left a {
    padding: 180px 76px;
    top: 185px;
	font-size: var(--size-1);
	}
	
	div.bottom-right a {
    padding: 180px 90px;
    top: 185px;
	font-size: var(--size-1);
	
}


	
}

@media only screen and (min-width: 563px) {
	
	body.error404 {
	background-image: url("img/hero-image-cropped.jpg");
	background-size: 100vw;
    background-repeat: no-repeat;
	background-position: top;
	}


/* SMALL LAPTOP AND DESKTOP SCREENS CAN BE REGULAR OR RETINA DISPLAY */
/* Large devices (desktops, 992px and up) */

@media only screen and (min-width: 797px) {
/*THREE COLUMNS THUMBS */

	
	header#site-header.header-footer-group {
	margin-bottom: 4rem;
}
	
	body.thumbs main#site-content.grid {
		grid-template-columns: 1fr 1fr 1fr;
		width: calc((var(--thumbnail-size) * 3) + calc(2 * var(--size-default)));
	}
	
	#share-buttons {
		display: flex;
		width: 100%;
		justify-content: space-between;
		max-width: 525px;
		margin: auto;
	}
	
	.homepage-grid {
	display: grid;
    grid-template-rows: 375px 375px;
    grid-template-columns: 375px 375px;
	grid-column-gap: var(--line-height-rem);
    grid-row-gap: var(--line-height-rem);
	justify-content: center;
	}	
	
	div.bottom-left {
	width: 100%;
	height: 375px;
	}

	div.bottom-right {
	width: 100%;
	height: 375px;
	}
	
	div.bottom-left a {
    padding: 153px 40px;
    top: 109px;
	font-size: var(--size-1);
	}
	
	div.bottom-right a {
    padding: 152px 52px;
    top: 110px;
	font-size: var(--size-1);
}


}
	
	/* SMALL LAPTOP AND DESKTOPSCREENS */
	
	@media only screen and (min-width: 992px) {
		
	

		
		
		footer#site-footer.header-footer-group {
			margin-top: 6rem;
		}
	
	
		
		header#site-header.header-footer-group {
	margin-bottom: 5rem;
}
		
		h1.entry-title,
		h2.entry-title {
			font-size: calc(var(--size-1) * 1);
		}
		
		/* ============== DEFAULT PLAIN TEXT TEMPLATE PAGES ================ */
	
	body.page-template-default:not(.home) main#site-content {
	margin: var(--size-default) auto;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	/*border: 1px solid red;
	padding: 2px;*/
	width: calc((100% / 12) * 6);
	margin-top: 6rem;
}

body.page-template-default:not(.home) main#site-content article {
	max-width: calc(100% * var(--size-default));*/
	/*border: 2px dashed green; */
	width: calc((100% / 8) * 8 - var(--line-height-rem));
}

		/*
body.page-template-default:not(.home) aside.widget-area {
	margin-left: var(--line-height-rem);
	/*border: 3px dotted pink;*/
	/* width: calc((100% / 8) * 2); 
} */

/* ============== END DEFAULT PLAIN TEXT TEMPLATE PAGES ============== */
		
		/* ============= START HIGH RES PAGE =======================*/


	 body.highres div.flex-container {
		margin: var(--size-default) auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: calc((100% / 12) * 8);
	}
	
	

	
	/*body.highres aside.widget-area {
		margin-left: var(--line-height-rem);
		width: calc((100% / 8) * 2);
	} */
		
		/* ============= START THUMBNAILS =======================*/
	body.single-post .flex-container, body.thumbs .flex-container {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: calc((100% / 12) * 8);
		margin: 0 auto;
	}
	
	/*body.single-post .flex-container, body.thumbs div.flex-container main#site-content.grid {
		margin: 0 auto;
		width: calc((100% / 8) * 6);
		} 8/
		
		/*body.thumbs aside.widget-area {
		margin-left: var(--line-height-rem);
		padding: 0;
		width: calc((100% / 8) * 2);*/
	}
	
	body.single-post aside.widget-area {
		margin-left: var(--line-height-rem);
		padding: 0;
		width: calc((100% / 8) * 8);
	}


	body.blog div.flex-container {
		margin: var(--size-default) auto; /* auto centers the div */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: calc((100% / 12) * 8); /* 2 columns margin on both sides */
		align-items: flex-start; /* vertically align content at top of flexbox */
		}

		body.blog main#site-content {
			max-width: calc(100% - 2 * var(--size-default));
			margin: var(--size-default) auto;
			width: 100%;
			}
			body.blog aside.widget-area {
			/*border: 1px solid #444;*/
			padding: var(--line-height-rem);
			width: 20rem;
			}
			
			body.blog h1.page-title {
				padding: 0 var(--size-default);
				width: calc(100% / 12 * 8);
				margin: 0 auto;
				}
		
		
		
}
	
	


	


	


@media only screen and (min-width: 1068px) {
/* all screens */
	
	div.header-titles-wrapper div.header-titles {
		display: block;
	}
	
	header#site-header.header-footer-group {
	margin-bottom: 3rem;
}
	
	body.thumbs main#site-content.grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		width: calc((255px * 4) + calc(3 * var(--size-default)));
	}
}


@media only screen and (min-width: 1700px) {
	
	#site-footer::before {
	content: " ";
    display: block;
    height: 110px; 
    width: 100%;
    position: absolute;
    top: -6.8rem;
	left: 0;
	background-repeat: no-repeat;
    z-index: -10;
	background-image: url(img/footer-web-large.svg); 
	background-size: cover;
	background-position: bottom center;
	
	}
	
	#site-header::after {
	content: " ";
    display: block;
    height: 97px; 
    background-size: contain;
    width: 100%;
    position: absolute;
    bottom: -6rem;
	background-repeat: no-repeat;
    z-index: -10;
	background-image: url(img/header-web-large.svg); 
	background-size: 100%;
		
	}
	
	body.error404 {
		background-image: url("img/hero-image.jpg");
		background-size: 100vw;
    	background-repeat: no-repeat;
		background-position: 0 166px;
		}
	
}
	
	

@media only screen and (min-width: 992px) and (orientation: portrait) {
/* portrait screens */
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
/* landscape screens */
}



/* RETINA 992px + DISPLAYS */

@media only screen and (min-width: 992px) and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
/* Retina screens */
}

@media only screen and (min-width: 992px) and (min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-resolution: 192dpi) and (orientation: portrait){
/* Retina screens in Portrait Mode */
}

@media only screen and (min-width: 992px) and (min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min-resolution: 192dpi) and (orientation: landscape) {
/* Retina screens in Landscape Mode */
}

/* ==================  END MEDIA QUERIES ============================= */

/* ===== LoVeHA! RULE COLORS ============= */

 a:link {
  color: var(--alink-color);
}
a:visited {
  color: var(--avisited-color);
}
a:hover {
  color: var(--ahover-color);
}
a:active {
  color: var(--aactive-color); 
} 

/* ===== END LoVeHA! RULE COLORS ============= */







/* ============  HACKS  =============== */

/*
OLD SCHOOL IMAGE REPLACEMENT TECHNIQUE
.HIDE-TEXT FOR IMAGE REPLACEMENTS
SEE: HTTP://WWW.ZELDMAN.COM/2012/03/01/REPLACING-THE-9999PX-HACK-NEW-IMAGE-REPLACEMENT/
*/

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.sr-only {  /* More modern alternative to hide-text */
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }

/*
* CLEARFIX: CONTAIN FLOATS
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}