/*
	(c)2020 - visuallizard.com

	Mobile styles using Media Queries
*/


/* !Media Queries ============================== */


body:before {
	visibility: hidden; position: absolute; 
}

/* Larger Desktop sizes (more than 1200px): */
@media only screen and (min-width: 1800px) {
	body:before { content: 'x-large'; }
	
	.gallery-sets .gallery { width: 20%; }
	
}
@media only screen and (max-width: 1800px) {
	html { font-size: 14px; }
	body:before { content: 'large'; }
	
	.gallery-sets .gallery { width: 25%; }

}

@media only screen and (max-width: 1450px) {
	html { font-size: 12px; }
	body:before { content: 'large'; }
	

	.gallery-sets .gallery { width: 33.33%; }
}

@media only screen and (max-width: 1150px) {
	html { font-size: 14px; }
	body:before { content: 'large'; }
	
	.gallery-sets .gallery { width: 50%; }

}

@media only screen and (max-width: 1000px) {
	body:before { content: 'large'; }

	
	.gallery-set-box figcaption { padding: 10%; }
	.gallery-set-box h3 { margin-bottom: 1rem; font-size: 1.5rem; }
	.gallery-set-box p { font-size: .75rem; }
}


@media only screen and (max-width: 800px) {
	body:before { content: 'medium'; /* mobile nav. mode kicks in */ }



	.cke div.c3 { width: auto; float:  none; padding:  .5em; }

	.cke > .c2,
	.cke > .c3,
	.cke > .c4,
	.cke > .c5,
	.cke > .c6 { float: none; margin-left: 0; width: auto; }

	.flex { display: block; }
	.flex > div + div { margin: 0 0 1em 0; }

	h1, .h1 { font-size: 40px; }
	h2, .h2 { font-size: 30px; }
	h3, .h3 { font-size: 22px; }

	table { font-size: 12px; }

	/* Forms */
	.fm-form [type="url"],
	.fm-form [type="tel"],
	.fm-form [type="text"],
	.fm-form [type="date"],
	.fm-form [type="email"],
	.fm-form [type="number"],
	.fm-form [type="password"],
	.fm-form select,
	.fm-form textarea { -webkit-appearance: none; }

	.fm-form [type="date"] {  min-height: 46px; }
	.fm-form [class^="input-"] { width: 100%; }
	
	
	.pagination-links { font-size: 16px; }
	.pagination-links li:not([class]) { display: none; }
	
	.container { padding: 0 1rem; }
	
	
	.site-header { padding: 2rem 0 1em; }
	.site-header .container { /* align-items: flex-start; */ }
	.site-title { width: 40%; position: relative; margin-bottom: 1rem; }
	.site-title .site-subtitle { display: none; }
	
	.main-nav {  }
	.main-nav .nav-1 > li > a { padding: .5em 1em; font-size: 1em; }
	
	
	.region-contact { flex-direction: column; }
	.region-contact > .fm-form { margin: 2rem 0; }
	.region-contact > .cke { width: 100%; padding: 1rem; margin: 3rem 0; min-height: 0; border: 1px solid #fff; line-height: 1.5; order: -1; }
	
	.site-footer .bottom { flex-direction: column; margin-bottom: 0; }
	.site-footer .social { margin-bottom: 2rem; }
	
	
	.gallery-filter { display: none; }
	
	.gallery-set { margin: 0 auto 10%; }
	.gallery-set li { margin: 5% auto !important; }
	
	.gallery-set-box figcaption { opacity: 1; padding: 7%; }
	.gallery-set-box h3 { margin-bottom: 0; font-size: .75rem; }
	.gallery-set-box p { display: none; }
	
	.gallery-wrapper { font-size: 1.1em; }
	
	.gallery-wrapper .gallery-title { margin-top:  3rem; }
	.gallery-wrapper .gallery-profile { flex-direction: column; margin-bottom: 2rem; }
	.gallery-wrapper .gallery-description { width: 100%; margin-bottom: 0; padding: 1em 0; }
	.gallery-wrapper .gallery-details { width: 100%; margin-top: 3rem; order: -1; }
	.gallery-wrapper .gallery-details li { padding: 0.5rem 0 0 0.5rem;  }
	.gallery-wrapper .gallery-details li::before { position: relative; }
	
	
	.gallery-related { flex-wrap: wrap; margin-bottom: 2rem; padding-top: 2rem; }
	.gallery-related .gallery-related-title { width: 100%; margin-top: 0; }
	.gallery-related .gallery-related-set { width: 100%; padding: 0; }
}


@media only screen and (max-width: 480px) {
	body:before { content: 'small'; }
	
	
	.gallery-sets { border-top: 1px solid white; }
	
	.gallery-sets .gallery { position: relative; display: block; width: 100%; padding: 5% 0; }
	.gallery-sets .gallery figure { position: relative; display: block; width: 100%; padding: 0; }
	.gallery-sets .gallery a { position: relative; display: block; width: 100%; padding: 0; height: unset; }
	.gallery-sets .gallery img { position: relative; display: block; width: 100%; padding: 5% 5% 3%; }
	.gallery-sets .gallery figcaption { position: relative; display: block; width: 100%; padding: 0; font-style: normal; }
	.gallery-sets .gallery h3 { margin: 0 20px 5px; font-size: 1.25em; font-weight: 600; }
	.gallery-sets .gallery p { display: block; padding: 0 20px 15px; border: none; }
	.gallery-set-box p span { float: none } .gallery-set-box p span:nth-child(n+2):before { content: " / "; }

	.gallery-wrapper .gallery-details li { width: 100%; }

}