/*
Theme Name: Acanthus International
Theme URI: http://learningglass.com
Author: Jason Mayry
Author URI: http://jasonmayry.com/
Description: Acanthus Theme
Version: 1.0
*/


/*------------------------------------*\
    TABLE OF CONTENTS
\*------------------------------------*/
/**
	* 1. RESET
	* 2. MAIN
	* 3. TYPOGRAPHY
	* 4. GENERAL CLASSES
	* 5. NAVIGATION
	* 6. HERO
	* 7. FORMS
	* 8. FOOTER
	* 9. MEDIA QUERIES
**/


/* Footer Nav */

/*======================================================================== 
	FEATURE 
========================================================================*/
#featured_content {
	padding: 5rem 0;
	background: transparent;
	position: relative;
}
.single-work #featured_content {
	background: #ebebeb;
}
#featured_content h2 {
	font-size: 1.75rem;
	font-weight: 500;
	text-align: center;
	margin: 0;
	padding-bottom: 0;
}
.single-work #featured_content h2 {
	font-weight: 800;
	color: #222;
}
#featured_content p {
	text-align: left;
	font-size: ;
	font-weight: 400;
	color: #454545;
	margin: 0;
	padding: 0;
}

#feature h3 {
	font-size: 30px;
	line-height: 1.2; 
	color: #222; 
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
}
/* CTA */
#cta {
	background: transparent;
	padding: 1.5rem 0;
	/* margin-top: 4.375rem;*/
	text-align: center;
}
#cta h2 {
	color: #222222;
	font-family: var(--body-face);
	text-align: center;
	font-size: 48px;
	line-height: 1.12;
	padding-bottom: .5em;
	text-shadow: 1px 1px 2px #222222;
}
#cta h3 {
	font-family: var(--body-face);
	font-weight: 900;
	text-align: center;
	padding-bottom: 1em;
}
#cta p {
	padding-bottom: 0;
	font-size: 2rem;
	line-height: 1.4;
	font-weight: 600;
	color: #222222;
	text-align: center;
}
#cta .button, #cta .button:visited, #cta a.button, #cta a.button:visited {
	background: #222222;
	color: #111111;
}
#cta a {
	font-size: 2.25rem;
	font-weight: 500;
	text-align: center;
	color: #222222;
	text-decoration: underline;
}
#cta a:hover {
	color: #002fa7;
	text-decoration: underline;
}

/*========================================================================
	HOME 
========================================================================*/
.featured {
	padding: 0 0 3rem;
}
.featured .featured__title {
	font-size: 2rem;
	margin-bottom: 1rem;
}
.alternating.content {
	padding: 0;
}
.alternating article {
	padding: 3em 0;
	margin-bottom: ;
	position: relative;
}
.alternating article:nth-child(odd) {
	background: transparent;
}
.alternating article:nth-child(even)  {
	background: transparent;
}
.alternating .info-wrap {
	top: 0;
	bottom: 0;
	height: 100%;
	display: block;
	padding: 0 2em;
}
.alternating  .info-wrap .info-wrap-inner {
	position: relative;
	top: 0;
	transform: none;
	margin-top: 2em;
}
.alternating article .text {
	position: ;
	right: 0;
	/* display: table; */
	top: 0;
	bottom: 0;
}
.alternating article:nth-child(odd) .text {
    height: 100%;
    position: ;
    right: 0;
}
.alternating article:nth-child(odd) .image {
    float: left;
}
.alternating article:nth-child(even) .text {
    height: 100%;
    position: ;
    left: 0;
}
.alternating article:nth-child(even) .image {
    float: right;
}
.alternating .content_image_wrap img {
	padding: 0;
}
.content_image_wrap {
	margin-bottom: ;
	height: 32vh;
	min-height: 25rem;
	overflow: hidden;
	position: relative;
}
.content_image_wrap img {
	width: 100%;
}
/* END WORK GALLERY */



@media  screen  and (max-width : 768px) {
/*
	.accordion {
	  background-color: #eee;
	  color: #444;
	  cursor: pointer;
	  padding: 18px;
	  width: 100%;
	  text-align: left;
	  border: none;
	  outline: none;
	  transition: 0.4s;
	}
*/
	button.accordion {
	    background: transparent;
	    color: #888;
	    cursor: pointer;
	    padding: 0;
	    width: 100%;
	    text-align: right;
	    border: none;
	    outline: none;
	    transition: 0.4s;
	    font-weight: 500;
	    text-transform: uppercase;
        font-size: .8125rem;
        border-bottom: 2px solid #454545;
	}
	
	/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
/*
	.active, .accordion:hover {
	  background-color: #ccc;
	}
*/
	
	/* Style the accordion panel. Note: hidden by default */
	.panel {
	  padding: 0 18px;
	  background-color: white;
	  display: none;
	  overflow: hidden;
      padding-top: 1rem;
      padding-bottom: 1rem;
      background: #f9f9f9;
	}
	

	.accordion:after {
	  content: '\02795'; /* Unicode character for "plus" sign (+) */
	  font-size: 13px;
	  color: #777;
	  float: right;
	  margin-left: 5px;
	}
	
	.active:after {
	  content: "\2796"; /* Unicode character for "minus" sign (-) */
	}

}



/* Tab Panel */

.tab-content {
  display: none;
  padding: 2.5rem 0 0 0;
}
.tab-content.is-active {
  display: block;
}
.tabs {
	text-align: center;
	padding: 0;
}
.tabs ul {
	padding: 0;
}
.tabs ul li {
	display: inline-block;
	position: relative;
}
.tabs ul li a {
	padding: 3em 2vw 3.5em;
	display: block;
	font-family: 'Cinzel', 'Lora', Georgia, 'Times New Roman', serif;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.tabs ul li a .current_page_item a {
	color: ;
}

.tabs ul li.is-active a {
	color: #002fa7 !important;
	text-decoration: underline;
}











/*========================================================================
	FORMS (CONTACT)
========================================================================*/



.dropdown {
	background: url("images/dropdown-arrow.png") no-repeat right #e9e9e9;
	width: 100%;
	height: 40px;
}
optgroup {
	background: transparent !important;
	-webkit-appearance: none;
}
option {
	background: transparent;
}
.option {
	background: #ff6937;
}
input:focus, textarea:focus {
	background: #f8f8f8;
	color: #181818;
	-webkit-transition: all .5s, font-size 0s;
	-moz-transition: all .5s, font-size 0s;
	-o-transition: all .5s, font-size 0s;
	transition: all .5s, font-size 0s;
}

#textarea {
	max-width: 100%;
	height: auto;
	resize: none;
	padding: .8em;
	margin: 0;
	border: none;
}

.submitbutton {
	width: auto;
	height: auto;
	margin: 0;
	padding: 1.4em 1.4em 1.2em;
	font-family: var(--body-face);
	color: #222222;
	text-transform: uppercase;
	background: #111;
	border: none;
	letter-spacing: .075em;
	font-size: 14px
}

.submitbutton:hover {
	color: #222222;
	cursor: pointer;
	background: #111;
}

.submitbutton:active {
	color: #222222;
	cursor: pointer;
	position: relative;
	top: 2px;
	background: #111;
}


#wpcf7-f27-p23-o1 .button {
	float: left;
	margin-top: 1rem;
}
#wpcf7-f27-p23-o1 input, #wpcf7-f27-p23-o1 textarea {
	margin-bottom: 1rem;
}




/*========================================================================
	* 404 * 
========================================================================*/

#youbrokeit img {
	max-width: 708px;
	width: 96%;
	margin: 0 auto;
	padding: 2%;
	display: block;
}






.cat-nav, ul.cat-nav {
	text-align: center;
	padding: 0;
}
.cat-nav li {
	display: inline-block;
}
.cat-nav li:after {
	content: '|';
	margin: 0 .25rem;
}
.cat-nav li:last-of-type:after {
	content: '';
	margin: 0 ;
}
.cat-nav li a {
	padding: .25rem 1rem;
}


#design .alternating.content {
	background: #f8f8f8;
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
}

/* ========================================================================
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++



	
	* MEDIA QUERIES * 




++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
======================================================================== */


/* Large screens ----------- */
@media  screen  and (max-width: 1920px) {
	/* Styles */
}

/* Desktops and laptops ----------- */
@media  screen  and (max-width: 1440px) {
	/* Styles */
	#logo span {
		font-size: 1.25rem;
	}
	.navbar li a, .navbar li a:visited {
		font-size: .9375rem;
		padding: 0 .75rem;
	}
	#featured_content h2 {
		font-size: 1.5rem;
	}
	.content li {
		font-size: 1rem;
	}
	#hero .title h1 {
		font-size: 2.5rem;
	}
	#design .full-width-hero, .single-design_portfolio .full-width-hero {
		height: 50vh;
		min-height: 24rem;
	}
	section.contact-widget p {
		font-size: 2.5rem;
	}
	label {
		font-size: .8125rem;
	}
	.navbar li a, .navbar li a:visited {
		font-size: 1rem;
	}.navbar .menu > .menu-item > .sub-menu > li a {
		font-size: .875rem;
	}
	
}

/* Desktops and laptops ----------- */
@media  screen  and (max-width : 1140px) {
	footer .navbar ul {
		float: none;
	}

}
/*------------------------------ 
	Tablets and iPads 
------------------------------*/
@media screen and (max-width: 1024px) {
	/* Layout
	-----------------------------*/
	.content {
		padding: 0 0 6rem;
	}	
	#hero .title h1 {
		font-size: 2rem;
	}
	.content li {
		font-size: 1rem;
	}
	#position {
		height: 400px;
	}
	.contact-widget .list-wrap {
		margin-bottom: 1em;
	}
	section.contact-widget p {
		font-size: 2.25rem;
	}	
}



/*------------------------------ 
	Tablet Landscape
------------------------------*/
@media screen and (max-width: 960px) {
	
}

/*------------------------------ 
	Tablet Portrait
------------------------------*/
@media screen and (max-width: 48rem) /* 768px */ {
	.content li {
		font-size: 1rem;
	}
	.alternating .info-wrap {
		padding: 0 2rem;
	}
	.button, .button:visited, a.button, a.button:visited {
		font-size: .75rem;
	}
	.contact-cta {
		padding-top: 3rem;
	}
	.contact-widget {
		position: relative;
	}
	.contact-widget .center-wrap {
		position: relative;
	}
	.contact-widget .center {
		position: relative;
		transform: translateY(0%);
	}
	footer {
		padding: 2rem 4%;
	}
	#footer-menu {
		float: none;
	}
	.menu-footer-menu-container {
		float: none;
		text-align: center;
	}
	#footer-menu.footer__menu .menu li {
		padding: 0px;
		display: inline-block;
		vertical-align: middle;
		height: auto;
	}
	#menu-footer-menu li a, #menu-footer li a:visited {
		font-size: 0.75rem;
	}
	#copy {
		font-size: 0.75rem;
		text-align: center;
		float: none;
	}
}



/*------------------------------ 
	Mobile Landscape
------------------------------*/
@media screen and (max-width: 41.6875rem) /* 667px */ {
	.woocommerce p {
		font-size: 1rem;
	}
	.menu-main-container {
		/* display: none; */
	}
	.foot-nav li {
		display: block;
		padding: 0 5px 10px;
	}
	.foot-nav {
		padding: 2em 0 1em;
	}
	#featured_content h2 {
		font-size: 1.5rem;
	}
	#hero .title h1 {
		font-size: 2rem;
	}
	#page-hero .title h1 {
		font-size: 4rem;
	}
	#my-account #page-hero .title h1, #cart #page-hero .title h1 {
		font-size: 3rem;
	}
	.vertcenter p {
		font-size: 1rem;
	}
	#email-cta h5 {
		font-size: 1.5rem;
	}
	.content {
		padding: 0 0 6rem;
	}

	.woocommerce-products-header .page-title {
		font-size: 3.75rem;
		padding-top: .5em;
		padding-bottom: .5em;
	}
	#page-hero {
		padding-top: 2.5rem;
		padding-bottom: 3.5rem;		
	}
	#home .woocommerce .product-category h2 {
		font-size: 2rem;
	}
	
}
/*------------------------------ 
	Mobile Portrait
------------------------------*/
@media screen and (max-width: 35.5rem) /* 586px */{
	.vertcenter p {
		font-size: 1rem;
	}
}
/*------------------------------ 
	Mobile Portrait
------------------------------*/
@media screen and (max-width: 25.875rem) /* 414px */ {
	.vertcenter h2 {
		font-size: 5.5vw;
	}
	.vertcenter p {
		font-size: ;
	}
	#email-cta input {
		margin-bottom: 1em;
	}
	#hero .title h1 {
		font-size: 2.75rem;
	}
	#page-hero .title h1 {
		font-size: 2rem;
	}

}
/*------------------------------ 
	Mobile Portrait
------------------------------*/
@media screen and (max-width: 23.4375rem) /* 375px */{
	.navbar .menu li a, .navbar .menu li a:visited {
		padding: .5em;
		font-size: 1.75rem;
	}
	#hero .title h1 {
		font-size: ;
	}
	.vertcenter p {
		font-size: 1rem;
	}
	p {
		font-size: .8125rem;
	}
}
/*------------------------------ 
	Mobile Portrait
------------------------------*/
@media screen and (max-height: 30rem) and (max-width: 41.6875rem) /* 480px */{
	.navbar .menu li a, .navbar .menu li a:visited {
		padding: 2.5vh;
		font-size: 1.25rem;
	}
}