/*
Theme Name: Italians Do It Better QNY
Author: Edison Dairo Jimenez / QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* fonts */
@import url("https://use.typekit.net/blv4ump.css"); /* new adobe fonts */

@font-face {
    font-family: 'Ariata Display';
    src: url('fonts/AriataDisplay-Black.woff2') format('woff2'),
        url('fonts/AriataDisplay-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ariata Display';
    src: url('fonts/AriataDisplay-Bold.woff2') format('woff2'),
        url('fonts/AriataDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ariata Display';
    src: url('fonts/AriataDisplay-Medium.woff2') format('woff2'),
        url('fonts/AriataDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ariata Display';
    src: url('fonts/AriataDisplay-Regular.woff2') format('woff2'),
        url('fonts/AriataDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, *{ font-size: 24px; font-family: "proxima-nova", sans-serif; font-weight: 400; font-style: normal;}
h1, h2 , h3, h4, h5, h1 span, h2 span, h3 span, h4 span, h5 span{ font-family: 'Ariata Display'; font-weight: 900;}
body{ }

/* wp admin styles */
body#tinymce{ margin:0; padding:0; border:none;}

/* wp basic styles */
.entry-content img {margin: 0 0 1.5em 0;}
div.alignleft, img.alignleft {display: inline-block;float: left;margin-right: 1em;margin-bottom: 1em;}
div.alignright, img.alignright {display: inline-block;float: right;margin-left: 1em;margin-top: 1em;}
div.aligncenter, img.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;}
.wp-caption {text-align: center;margin-bottom: 1.5em;}
.wp-caption img {border: 0 none;margin: 0;padding: 0;}
.wp-caption p.wp-caption-text {margin: 0;font-weight: bold;}
.wp-smiley { max-height: 1em;margin:0 !important;}
.gallery dl {margin: 0;border: 0;padding: 0;}
blockquote.left {float: left;margin-left: 0;margin-right: 20px;text-align: right;width: 33%;}
blockquote.right {float: right;margin-left: 20px;margin-right: 0;text-align: left;width: 33%;}
.gallery-caption{font-size: 12px;}
html{height: 100%;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
p {	padding-top:0.1em;padding-bottom:0.1em;}
em{font-style: italic;}
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {max-width: 100%;height: auto;}
.center{text-align: center;}
#page_content_wrapper p {padding-top:0.5em;padding-bottom:0.5em;}
#page_content_wrapper p:empty{padding: 0 !important;margin: 0 !important;}
#footer p {padding-top:0.5em;padding-bottom:0.5em;}
html, body {min-height: 100%;}
img, a img {image-rendering: optimizeQuality;}
em { font-style: italic; }
::selection {background: #000; color: #f5f2e9;}
table{border-spacing: 0;}
.sticky{background: #ffffe0;padding: 30px 20px 20px 20px;border: 1px solid #e6db55 !important;box-sizing: border-box;}
.marginright{margin-right: 7px;}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {	float:right; margin:0 0 1em 1em}
a img.alignleft {	float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.sticky, .bypostauthor { font-weight: bold; }

/* common styles */
html { overflow-x: hidden; }
body{ margin:0; padding:0; min-width:1294px; overflow-x: hidden; position: relative; background: #000;}
.contentCenter,
.wooContent .woocommerce{ width:1294px; margin:0 auto;}
.contentCenter:after{ content: ''; clear: both; float: none; width: 100%; height: 0;}
a{ color:inherit;}
a img{ border:none; display:block;}
.displayTable{ display:table; width:100%; height:100%;}
.tableCell{ display:table-cell; width:100%; height:100%; vertical-align:middle;}
.button, .shopify-buy__btn{ border: none; display: inline-block; box-sizing: border-box; cursor: pointer; text-transform: uppercase; padding: 14px 29px; color: #fff; text-decoration: none !important; transition: 0.3s ease; background: #272727; line-height: 1; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.11rem;} 
.button.active,
.button:hover,
.shopify-buy__btn:active,
.shopify-buy__btn:hover{ background: #000; color:#fff;  }

.clear{ clear:both;}
.hidden{ display: none !important;}
.row{ margin: 0 -15px;}
.row:after,
footer .left ul:after{ content: ''; width: 100%; clear: both; display: block;}
.column1{ width: calc(100% - 30px); float: left; margin: 0 15px;}
.column2{ width: calc(50% - 30px); float: left; margin: 0 15px;}
.column3{ width: calc(33.3333% - 30px); float: left; margin: 0 15px;}
.column4{ width: calc(25% - 30px); float: left; margin: 0 15px;}
.column5{ width: calc(20% - 30px); float: left; margin: 0 15px;}
.row img{ display: block; margin: 0 auto 30px;}
strong, b{ font-weight:bold;} 

/* preload */
.preloadDiv{ width:0; height:0; overflow:hidden; }
.showIphone,
.showIpad,
.showBigDesktop,
.hideDesktop{ display:none;}
.showDesktop{}

.floatingProducts{ background: url(images/floatingProducts.png) no-repeat center center / contain;}

/* header */
header{ position: relative; width: 100%; background: #FAF8D7;}
header:before{ z-index: 1; content: ''; width: 100%; height: 21px; background: url(images/headerBg.svg) repeat-x center top / auto 100%; position: absolute; left: 0; top: 0;}
header .contentCenter{ position: relative; z-index: 2;}
header{ top: 0;}
header .logo{border-radius: 0 0 20px 20px; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); float: left; background:#fff url(images/logo.svg) no-repeat left 24px top 18px / 137px auto; width: 190px; height: 146px; overflow: hidden; text-indent: -5000px; display: block;}
header .linkedin{ transition: 0.3s ease; float: right; width: 24px; aspect-ratio: 1/1; background: url(images/linkedin.svg) no-repeat center center / contain; display: inline-block; overflow: hidden; text-indent: -5000px; margin: 50px 11px 0 0;}

/* footer */
footer{ background:#511A09; color: #fff; padding: 120px 0;}
footer .contentCenter{ width: 1246px;}
footer .left{ width: 50%; float: left;}
footer .right{ width: 170px; float: right; text-align: center; font-size: 0.9rem; padding: 40px 0 0 0;}
footer .right p{ font-size: inherit;}
footer a{ text-decoration: none;}
footer a:hover{ text-decoration: underline;}
footer .logo{ float: left; background: url(images/logoWhite.svg) no-repeat center center / cover; width: 186px; aspect-ratio: 185/155; overflow: hidden; text-indent: -5000px; display: block;}
footer .linkedin{ transition: 0.3s ease; width: 29px; aspect-ratio: 1/1; background: url(images/linkedinWhite.svg) no-repeat center center / contain; display: inline-block; overflow: hidden; text-indent: -5000px;}
header .linkedin:hover, footer .linkedin:hover{ transform: scale(1.1);}

/* section */
section{ position: relative; background: #FAF8D7;}

/* pageHeader */
.pageHeader{ height: 815px; position: relative; }
.pageHeader .displayTable{ position: relative; z-index: 3;}
.pageHeader .tableCell{ vertical-align: top;}
.pageHeader h1{ font-size: 2.8rem; line-height: 1.1; text-align: center; color: #2E642C; margin: -7px auto -39px;}
.pageHeader h1 span{ font-size: inherit; line-height: inherit; display: block; color: #E3081C;}
.pageHeader .product{ transition: 0.3s ease;  width: 492px; aspect-ratio: 986/1204; background: url('images/Hero Product.png') no-repeat center center / contain; margin: 0 auto; transform: translate(-81px,72px);}
.pageHeader .product:hover{ transform: scale(1.05) translate(-81px,72px);}
.pageHeader:before{ content: ''; z-index: 1; position: absolute; left: -20px; bottom: 80px; width: 100%; background: url(images/headerBg.png) no-repeat center center / contain; height: 505px;}
.pageHeader:after{ position: absolute; left: -9%; bottom: -2px; -webkit-clip-path: url(#headerPath); clip-path: url(#headerPath); content: ''; z-index: 2; width: 118%; height: 194px; background: #E3081C;}

/* callouts */
.callouts{ margin: 0 auto 43px;}
.callouts .left{ padding: 31px 0 0 0; float: left; width: 204px;}
.callouts .right{ padding: 31px 0 0 0; float: right; width: 204px;}
.callouts .center{ float: left; width: calc(100% - 408px);}
.callouts .callout{ margin: 0 0 34px; font-weight: 600; width: 204px; background: rgba(81,26,9,0.7); border-radius: 30px; text-align: center; color: #fff; font-size: 0.9rem; padding: 43px 0; transition: 0.3s ease;}
.callouts .callout:hover{ transform: scale(1.02);}
.callouts .callout span{ line-height: 1; font-weight: bold; font-size: 2.9rem;  font-family: 'Ariata Display'; display: block; margin: 0 0 10px;}
.callouts .right .callout{ padding: 32px 0 24px;}
.callouts .right .callout span{ margin: 0 0 18px; font-size: 2.35rem;}
.callouts .center .floatingProducts{ width: 100%; height: 643px; animation: levitate 6s infinite;}
.callouts .center{ font-size: 1.12rem; color: #fff;}
.callouts .center h3{ font-size: 2.33rem; font-weight: bold; color: inherit; margin: 15px auto 30px;}

@keyframes levitate {
	0%   { transform: translateY(0) ;}
	50%   {  transform: translateY(25px) ;}
	100%   {  transform: translateY(0);}
}

/* bgOpen */
.bgOpen{ margin: -1px auto; padding: 1px 0;}

/* bannerImage */
.bannerImage{ margin: 0;}
.bannerImage .theImg{ height: 508px; background: #000 no-repeat center center / cover; border-radius: 30px; overflow: hidden; transition: 0.3s ease;}
.bannerImage:hover .theImg{ transform: scale(1.05);}

/* fullwidthText */
.fullwidthText{ margin: 60px auto;}
.fullwidthText h2{ font-size: 3.15rem; line-height: 1.1;}
.fullwidthText h2:first-child{ margin-top: 0;}

.white{ color: #fff;}

.fullwidthText.fwt-0{ margin: 37px auto 43px;}
.fullwidthText.fwt-0 h2{ margin: 0;}

/* productsSlider */
.productsSlider{ padding: 139px 0 73px; background: url(images/handPattern.png) repeat center top / 180px auto;}
.productsSlider .contentCenter{ width: 1040px; background: #FAF8D7; border-radius: 30px; overflow: hidden; }
.productsSlider .wrapper{ height: 483px; margin: 14px 0 0 ; position: relative;}
.productsSlider .wrapper ul{ margin: 0; padding: 0; list-style-type: none; width: 100%; height: 100%;}
.productsSlider .wrapper ul li{ transition: 0.4s ease; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 0 46px 0;}
.productsSlider .wrapper ul li.active{ opacity: 1; }
.productsSlider .wrapper ul li .image{ transition: 0.3s ease; float: left; background: no-repeat center center / contain; width: 465px; height: 100%; }
.productsSlider .wrapper:hover .image{ transform: scale(1.05);}
.productsSlider .wrapper ul li .text{ box-sizing: border-box; padding: 0 63px 0 0; color: #511A09; height: 100%; float: left; text-align: center; width: calc(100% - 465px);}
.productsSlider .wrapper ul li .text h2{ margin: 0 0 -12px; font-family: "duffy-script", sans-serif; font-weight: 800; color: #E3081C; font-size: 3.9rem;}
.productsSlider .wrapper ul li .text strong{ font-size: 1.3rem; display: block; text-transform: uppercase; margin: 0 0 35px; text-align: center;}
.productsSlider .menu{ padding: 18px 0 31px 0; display: block; text-align: center; color: #E3081C; position: relative; }
.productsSlider .menu span{ transition: 0.3s ease; cursor: pointer; opacity: 0.2; display: inline-block; margin: 0 30px; font-family: 'Ariata Display'; font-weight: bold; font-size: 1.455rem;}
.productsSlider .menu span:hover{ opacity: 0.8;}
.productsSlider .menu span.active{ opacity: 1; }
.productsSlider .menu:before{ content: ''; width: calc(100% - 92px); left: 50%; transform: translateX(-50%); top: 0; height: 3px; background: #DB9B4B; position: absolute;}

/* textWithImage */
.textWithImage{ margin: 0 auto; }
.textWithImage .contentCenter{ width: 100%;}
.textWithImage .flex{ display: flex; flex-direction: row; align-items:stretch;}
.textWithImage.Right .flex{ flex-direction: row-reverse;}
.textWithImage .image{ overflow: hidden; transition: 0.3s ease; width: 50%; box-sizing: border-box; padding: 0;  position: relative;  }
.textWithImage .image .theImg{ transition: 0.3s ease; width:50vw; height: 100%; position: absolute; right: 0; top: 0; background: #000 no-repeat center center / cover;}
.textWithImage .image .theImg:hover{ transform: scale(1.02); }
.textWithImage.Right .image .theImg{ right: auto; left: 0; top: 0;}
.textWithImage .text{ color: #511A09; width: 50%; box-sizing: border-box; padding: 82px 0 134px; position: relative; text-align: center; background: url(images/redStripe.svg) repeat-x left bottom / auto 20px;}
.textWithImage.Right .text{ background: url(images/greenStripe.svg) repeat-x right bottom / auto 20px;}
.textWithImage .text .container{  margin: 0 auto; width: 647px;}
.textWithImage h2{ font-size: 2.45rem; line-height: 1.2; text-align: center; color: #008E39; margin: 0 auto 81px;}
.textWithImage h2 span{ font-size: inherit; line-height: inherit; display: block; color: #E3081C;}
.textWithImage.Right h2{ color: #2E642C;}

/* tablet */
@media screen and (min-width:0px) and (max-width:1293px){
	.hideIpad,
	header ul.mainMenu,
	.showDesktop{ display:none !important;}
	.showIpad{ display:block !important;}
	
	html, *{ font-size: 18px;}
	body{ min-width: 810px;}
	.contentCenter, .productsSlider .contentCenter, footer .contentCenter{ width: 790px;}
	
	
	.bannerImage .theImg { height: 315px;}
	.pageHeader .product { width: 412px; transform: translate(-50px,102px);}
	.pageHeader::after { height: 114px;}
	.pageHeader { height: 675px;}
	.pageHeader::before { bottom: -80px;}
	.callouts .callout{ transform: scale(0.7); transform-origin: left top; margin: 0 0 -18px;}
	.callouts .left, .callouts .right{ width: 144px;}
	.callouts .center { width: calc(100% - 288px); }
	.callouts .center .floatingProducts { width: 90%; height: 393px; margin: 0 auto;}
	
	.productsSlider .menu { padding: 15px 0 25px;}
	.productsSlider .menu span{ margin: 0 20px;}
	.productsSlider .wrapper ul li .image{ width: 40%;}
	.productsSlider .wrapper ul li .text{ width: 60%; padding: 0;}
	.textWithImage .text .container{ width: 350px;}
	
	footer{ padding: 60px 0;}
	footer .logo{ float: none; margin: 0 auto 30px;}
	footer .left, footer .right{ margin: 0 auto; float: none;}
}	

/* phone */
@media screen and (min-width:0px) and (max-width:767px){
	.hideIphone,
	#wpadminbar{ display:none !important;}
	.showIphone{ display:block !important;}
	
	html, *{ font-size: 15px;}
	body{ min-width: 390px;}
	.contentCenter, .productsSlider .contentCenter, footer .contentCenter{ width: 360px;}
	
	header .logo { background-size: 100px auto; width: 148px; height: 116px;}
	header::before { background: url(images/redStripe.svg) repeat-x left top / auto 100%;}
	footer .logo{ width: 116px;}
	
	.pageHeader .product { width: 242px; transform: translate(-32px,102px);}
	.pageHeader {  height: 505px; padding: 40px 0 0;}
	.pageHeader::before { left: 0px; bottom: -80px; height: 385px;}
	
	.bannerImage .theImg { height: 145px;}
	.fullwidthText h2 { font-size: 2.1rem;}
	.callouts .center { width: 100%;}
	.callouts .center .floatingProducts { width: 80%; height: 263px;}
	.callouts .center h3 {font-size: 1.8rem;}
	.callouts .left, .callouts .right{ width: calc(50% - 10px); margin: 0 10px 0 0;}
	.callouts .right{ margin: 0 0 0 10px;}
	.callouts .left{ padding: 65px 0 0 0;}
	.callouts .callout { width: 100%; transform: none;  transform-origin: left top; margin: 0 0 20px;}
	.productsSlider{ padding: 60px 0;}
	.productsSlider .wrapper ul li .image { height: 230px; width: 60%; float: none; margin: 0 auto;}
	.productsSlider .wrapper ul li .text { width: 100%; padding: 0; height: 254px; float: none;}
	.productsSlider .menu span { margin: 0 10px;}
	
	.textWithImage .flex { display: block;}
	.textWithImage .image{ height: 250px; width: 100%; display: block;}
	.textWithImage .image .theImg{ width: 100%;}
	.textWithImage .text { width: 100%; padding: 40px 0 80px;}
	.textWithImage h2 { font-size: 2rem; margin: 0 auto 40px;}
}