/*
Theme Name: Arcane Wares Theme
Theme URI: 
Description: Arcane Wares theme is a child theme to OceanWP.
Author: Daniel
Author URI: 
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */


@import url("https://use.typekit.net/wez5ttn.css");


@font-face {
    font-family: "Versatin";
    src: url("fonts/Versatin.woff") format('woff');
}


svg.custom-logo {
    width: 18vw;
}

svg.custom-logo image.svg-logo-glow {
	opacity: 0;
	transition: opacity 800ms ease;
}

a.custom-logo-link:hover svg.custom-logo image.svg-logo-glow {
	opacity: 1;
}

svg.custom-logo path.svg-logo-path {
	fill:#fff;
}

#site-navigation-wrap .dropdown-menu > li.acc-nav-link > a {
	font-size: 2.4rem;
}


#top-bar-content {
	display: flex;
	align-items: center;
}

.topbar-country {
	margin-right: 14px;
}

.topbar-country img {
	height: 20px;
}


#top-bar-social li a {
	margin-right: 6px;
}



.oceanwp-social-menu.simple-social {
	display: none;
}

/* Hover Images */


#home-featured-hero {
    width: 100%;
    height: 74vh;
    display: grid;
    grid-template-columns: 60% 40%;
	grid-template-rows: 50% 50%;
	grid-gap: 6px;
    padding-bottom: 6px;
    background: #121212;
}

.feat-box-one {
    grid-row: 1 / 3;
}


.hovereffect {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
	border-radius: 0;
	
	background-size: 105%;
	background-position: center;
	background-blend-mode: normal;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;

  }

.hovereffect:hover {
	background-size: 100%;
}


.color-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	mix-blend-mode: color;
}

.hovereffect:hover .color-overlay {
	background-color: rgba(172, 74, 255,0.65);
}
  
  .hovereffect .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
  }

  /*
  
  .hovereffect:hover .overlay {
	  background-color: rgba(172, 74, 255,0.65);
  }
  */

  .hovereffect h2, .hovereffect img {
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
  }
  
  .hovereffect img {
	display: block;
	position: relative;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
  }
  
.hovereffect:hover img {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
}
  
.hovereffect h2 {
	background: rgb(172, 74, 255, 75%);
	color: #fff;
    text-align: center;
    position: absolute;
    padding: 4px 16px;
    bottom: 3%;
    left: 4%;
    margin: 0;
    font-weight: 400;
    font-size: 2.6vw;
    line-height: 1.2em;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
	width: auto;
	opacity: 0;
}
  
  .hovereffect:hover h2 {
	/* text-shadow: 1px 1px 5px rgb(130 0 241); */
	opacity: 1;
	bottom: 6%;
}

  
  
  .hovereffect a.info {
	  display: flex;
	  flex-wrap: wrap;
	  align-content: center;
	  text-decoration: none;
	  color: #fff;
	  border: none;
	  margin: 0;
	  background-color: transparent;
	  opacity: 0;
	  filter: alpha(opacity=0);
	  -webkit-transform: scale(1.5);
	  -ms-transform: scale(1.5);
	  transform: scale(1.5);
	  -webkit-transition: all 0.4s ease-in-out;
	  transition: all 0.4s ease-in-out;
	  font-weight: normal;
	  height: 78%;
	  width: 90%;
	  position: absolute;
	  top: 8%;
	  left: 5%;
	  padding: 5px 8px;
  }
  
  .hovereffect:hover a.info {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
  }
  
  .hovereffect a.info p {
	  line-height: 1.2em;
	  margin: 0 0 6px 0;
	  font-size: 1.2em;
	  width:100%;
	  color:#fff;
  }

  .hovereffect a.info p i {
	  font-size: 4rem;
  }



.coll-feat-box a {
	position: relative;
	display: block;
}

.cfb-caption {
	font-family: serenity, sans-serif;
	font-weight: 700;
	font-size: 2.2rem;
    position: absolute;
    z-index: 1;
    left: 6px;
    top: 6px;
    color: #fff;
    background: transparent;
    padding: 2px 6px;
	opacity: 0;
	transition: all 500ms ease-in-out;
	text-orientation: upright;
	text-transform: uppercase;
    writing-mode: vertical-lr;
}

.cfb-caption.right-capt {
    left: initial;
    right: 6px;
}

.coll-feat-box a:hover .cfb-caption {
	opacity: 1;
	background: #ac4aff;
}


.coll-feat-box img {
	filter: grayscale(1) contrast(3);
	transition: all 500ms ease-in-out;
}

.coll-feat-box a:hover img {
    filter: grayscale(0) contrast(1);
}


.single_variation_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
}


.woocommerce div.product form.cart .variations td.woo-variation-items-wrapper {
    display: flex;
    align-items: center;
}

.woocommerce div.product form.cart .variations td.woo-variation-items-wrapper a.reset_variations {
    float: none;
    margin: 0 20px;
}

.single_variation_wrap > a {
    display: none;
}

#wc-stripe-payment-request-button-separator, #wc-stripe-payment-request-wrapper {
	width: 90%;
	max-width: 300px;
}



.size-btn {
    color: #fff;
    width: 40%;
    display: block;
	font-size: 1.4rem;
    background: #ac4aff;
    padding: 6px 10px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
	margin-top: 20px;
}
a.size-btn:hover {
    background: #6d28a7;
    color: #fff;
}


.single_variation_wrap .single_variation  {
	float: none;
	margin-bottom: 0;
}

.single_variation .woocommerce-variation-price {
	font-size: 2.6rem;
}



.flex-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.w-12 {
	width: 12%;
}

.w-16 {
	width:16%;
	margin-bottom: 16px;
}

.w-25 {
	width:24%;
	margin-bottom: 16px;
}

.w-50 {
	width: 48%;	
	margin-bottom: 20px;
   }

.w-100 {
	width: 100%;
	margin-bottom: 20px;
}

.flex-wrap input {
	
}


a.anchor {
    visibility: hidden;
    position: relative;
    top: -80px;
}

.anchor-menu {
	list-style: none;
}
.anchor-menu li {
    font-size: 1.8rem;
}
.anchor-menu li::before {
	content: '\f6cf';
    color: #ac4aff;
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.6rem;
    font-weight: 300;
    margin-left: -16px;
    padding-right: 10px;
}



.sticky-section, #pgc-177-0-1 {
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
}



.wpcf7-form-control-wrap.support-topic {
	display: inline-flex;
}

span.input-notice {
    font-size: 1.4rem;
    font-style: italic;
    color: #4e4e4e;
}



form input[type="text"], form input[type="password"], form input[type="email"],
form input[type="url"], form input[type="date"], form input[type="month"],
form input[type="time"], form input[type="datetime"], form input[type="datetime-local"],
form input[type="week"], form input[type="number"], form input[type="search"], form input[type="tel"],
form input[type="color"], form select, form textarea {
	border-radius: 3px 3px 0 0;
}

form input[type="text"]:focus, form input[type="password"]:focus, form input[type="email"]:focus,
form input[type="url"]:focus, form input[type="date"]:focus, form input[type="month"]:focus,
form input[type="time"]:focus, form input[type="datetime"]:focus, form input[type="datetime-local"]:focus,
form input[type="week"]:focus, form input[type="number"]:focus, form input[type="search"]:focus, form input[type="tel"]:focus,
form input[type="color"]:focus, form select:focus, form textarea:focus {
	border-bottom: 2px solid #ac4aff;
	box-shadow: 0 0 4px 0 rgba(172, 74, 255,0.3);
}

textarea.wpcf7-textarea {
	height: 6rem;
}



.wc-stripe-elements-field, .wc-stripe-iban-element-field {
	padding: 8px 10px;
}


.wcmenucart i {
	font-weight: 300;
}


.dark h2, .dark a {
	color: #ac4aff;
}
.dark a:hover {
	color: #fff;
}

.dark p, .dark h3 {
	color: #b1b1b1;
}

.dark h2 a.social-link {
	color: #b1b1b1;
	padding: 4px 6px;
	margin: 0 7px;
}
.dark h2 a.social-link:hover {
	color: #ac4aff;
}

#menu-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#menu-footer li {
    width: 49%;
}

#menu-footer li:first-child {
	border-top: none;
}

#menu-footer li a {
	display: block;
	width: 100%;
}


.ftr-pay-opt {
	justify-content: center;
}

.ftr-pay-opt .w-16 {
	margin-bottom: 10px;
}

.ftr-pay-opt i {
	font-size: 3rem;
	text-align: center;
}


.runes {
	font-family: Versatin;
	color:#ac4aff;
}
.runes:hover {
	font-family: serenity, sans-serif;

}

.white-text h1, .white-text h2 {
	color:#fff;
}


.hidden {
	display: none;
	visibility: hidden;
}



/* ==================== PA Line Page Styles  ==================== */

.pa-prod-link h2 {
	text-align: center;
	margin-bottom: 0;
}

.pa-prod-link h3 {
	text-align: center;
	font-family: Versatin;
	font-size: 1.6rem;
    letter-spacing: 1px;
}
.pa-prod-link:hover h2, .pa-prod-link:hover h3 {
	color:#ac4aff;
}


#glyphInput, #glyphOutput {
	width: 48%;
	border:2px solid #e7cbff;
	box-shadow: 0px 0px 5px 0px #ac4aff, inset 0px 0px 5px 0px #ac4aff;;
	min-height: 150px;
	padding: 20px 30px;
}

#glyphInput {
	font-size: 2.4rem;
}

#glyphOutput {
	font-family: Versatin;
	font-size: 2rem;
    letter-spacing: 1px;
	color:#ac4aff;
}


/* ==================== HYA Line Page Styles  ==================== */

.hya-symbol img {
    width: 60px;
}


/* ==================== Links Page / Landing Page  ==================== */

body.page-template-landing {
	background: #121212;
}

.links-btn {
    border: 3px solid #fff;
    display: flex;
    border-radius: 2px;
    padding: 8px 14px;
    color: #fff;
    justify-content: center;
	align-items: center;
	font-size: 2.4rem;
	font-family: serenity, sans-serif;
}

.links-btn svg {
    width: 40px;
    fill: #fff;
    margin-right: 10px;
}
.links-btn i {
	margin-right: 10px;
}

.links-btn:hover {
	background: #fff;
}
.links-btn:hover svg {
	fill: #ac4aff;
}


/* ==================== Font Awesome Fixes  ==================== */



/* Font Awesome Fixes */

.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before,
.theme-select:after,
.woocommerce-info:before,
.return-to-shop .button.wc-backward:before,
#owp-qv-wrap .flex-direction-nav a:before {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 300;
}

.woocommerce-checkout #payment ul.payment_methods .wc_payment_method > label:before,
input[type=radio]:checked:before, input[type=checkbox]:checked:before {
	font-family: 'Font Awesome 5 Pro';
}


.theme-heading .text::before, .theme-select:after, .sidr-class-dropdown-toggle:before, .sidr-class-dropdown-menu ul a:before,
#mobile-fullscreen ul li .dropdown-toggle:before, .woocommerce button.button.loading:after, .woocommerce a.button.loading:after,
.woocommerce input.button.loading:after, .woocommerce input.button.loading:after,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before,
.woocommerce #respond input#submit.loading:after, .woocommerce-message:before, .woocommerce-error:before, .woocommerce-info:before,
ul.woocommerce-error li:before, ul.woocommerce-message li:before, ul.woocommerce-info li:before,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method > label:before, .return-to-shop .button.wc-backward:before,
.select2-container .select2-choice .select2-arrow b, .select2-container .select2-choice abbr, .blockUI:before, 
.woocommerce-MyAccount-content #payment ul.payment_methods .woocommerce-PaymentMethod > label:before,
.woocommerce .widget_layered_nav li.chosen a:before {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 400;
}



.single-post:not(.elementor-page) .entry-content a:not(.wp-block-button__link):not(.wp-block-file__button),
.page:not(.elementor-page):not(.woocommerce-page) .entry a:not(.wp-block-button__link):not(.wp-block-file__button) {
	text-decoration: none;
}



/* ==================== R E S P O N S I V E ==================== */


@media (min-width: 1080px) {

	.owp-product-nav-wrap {
		top: -30px;
	}
	
}



@media only screen and (max-width: 768px) {

	#top-bar-social {
		display: none;
	}

	.sidr-class-social-menu-inner ul li a {
		font-size: 2.8rem;
	}


}


@media only screen and (min-width: 481px) {

	.mobile {
		display: none;
	}
	.desktop {
		display: initial;
	}
	
}

@media only screen and (max-width: 480px) {

	svg.custom-logo {
		width: 60vw;
	}

	#home-featured-hero {
		grid-template-rows: 1fr 1fr 1fr;
		grid-gap: 6px 0;
		padding-bottom: 0;
		grid-template-columns: 1fr;
	}

	.mobile {
		display: initial;
	}

	.desktop {
		display: none;
	}


	.feat-box-one {
		grid-row: 1 / 2;
		grid-column: 1 / all;
	}
	.feat-box-two {
		grid-row: 2 / 3;
		grid-column: 1 / all;
	}
	.feat-box-three {
		grid-row: 3 / 4;
		grid-column: 1 / all;
	}

	.hovereffect h2 { 
		opacity: 1;
		font-size: 2.2rem;
	}


	.sticky-section, #pgc-177-0-1 {
		position: relative;
		top:initial;
	}


	.cfb-caption {
		font-size: 2rem;
	}

	.w-50, #glyphInput, #glyphOutput {
		width: 100%;
	}

	.mw-50 {
		width: 48%;
		margin-bottom: 20px;
	}

	.cfb-caption {
		opacity: 1;
		background: #454545;
	}


	.single_variation_wrap {
		grid-template:
			"top1 top2" auto
			"btm btm" auto / 1fr 2fr;
	}

	.size-btn { 
		width: 100%;
		grid-area: top2;
	}

	.single_variation {
		grid-area: top1;
	}

	.variations_button {
		grid-area: btm;
	}

	.quantity {
		max-width: 35%;
	}

	button.single_add_to_cart_button {
		font-size: 1.6rem;
		font-weight: 700;
		width: 62%;
	}

	#wc-stripe-payment-request-button-separator {
		margin-bottom: 0;
	}


}