/*
Page: Retail
*/
html,
body {
	max-width: 100%;
	overflow-x: hidden;
	height: auto !important;
}

@media screen and (min-width: 1660px) {
	#hero .container {
		width: calc(1756px + 30px);
		padding:0 15px;
	}
}
#hero {
	padding-bottom:160px;
}
#hero .inner{
	padding:0 88px;
	height:596px;
	border-radius:40px;
}
#hero .text {
    max-width: 596px;
    padding-right: 30px;
}
@media screen and (min-width: 1600px) {
	.page-id-616 #hero .text {
		max-width:582px;
	}
}
#hero .images {
	width:60%;
}
#hero h1 {
	font-size:40px;
	line-height:48px;
	letter-spacing: -0.01em;
	padding-bottom:10px;
}
#hero p {
	margin-bottom:1em;
}
#hero .button {
	padding:0 14px;
}
.button:after {
	transform: rotate(90deg);
}
.button:hover:after {
	transform: rotate(45deg);
}
#hero .image-tablet{
	right:0;
	bottom:-33px;
}
#hero .image-tablet img {
	border-radius: 30px;
}

#hero .image-phone{
    right: -28px;
    top: 52px;
}

#hero .image-phone:before {
	position: absolute;
    content: "";
    top: -9px;
    left: -9px;
    width: calc(100% + 20px);
	height: calc(100% + 17px);
    backdrop-filter: blur(8px);
    border-radius: 50px;
    background-color: rgb(255 171 127 / 50%);
	box-shadow: 0px 8px 15px 0px rgba(246, 81, 7, 0.4)
}

#hero .image-phone .video {
    width: 90%;
    height: 202px;
    bottom: 253px;
    right: 15px;
}

#hero .video-horizontal {
    width: 98%;
    height: auto;
    bottom: -19px;
    right: 0;
    z-index: 2;
    border-radius: 30px;
}

#hero #hero-video-horizontal {
	border-radius: 30px;
}

#hero #hero-video-horizontal svg {
	display:block;
}

#hero .video-horizontal:before,
#hero .image-tablet:before {
	position: absolute;
    content: "";
    top: -9px;
    left: -9px;
    width: calc(100% + 20px);
	height: calc(100% + 17px);
    backdrop-filter: blur(8px);
    border-radius: 30px;
    background-color: rgb(255 171 127 / 50%);
    box-shadow: 6px 8px 25px 0px rgba(246, 81, 7, 0.77);
	
}

/* Big Box Retailers: */
.page-id-616 #hero .video-horizontal:before,
.page-id-616 #hero .image-tablet:before {
	background-color: rgb(69 228 225 / 50%);
	box-shadow: 6px 8px 25px 0px rgb(34 154 152 / 70%)
}
.page-id-616 #hero .image-phone:before { 
	background-color: rgb(69 228 225 / 20%);
	box-shadow: 0px 8px 15px 0px rgb(34 154 152 / 40%);
}
 
#logos .smalltitle {
	overflow:hidden;
}
#logos .smalltitle span:before {
	content:"";
	position:absolute;
	height:1px;
	background-color:#CCD0D9;
	width:350px;
    top: 11px;
    left: -420px;
}
#logos .smalltitle span:after {
	content:"";
	position:absolute;
	height:1px;
	background-color:#CCD0D9;
	width:350px;
    top: 11px;
    right: -420px;
}
#logos .logos .logo {
	margin: 0 50px;
	height:90px;
}
#logos .logos .logo:first-child {
	margin-left:0;
}
#logos .logos .logo:nth-child(6) {
	margin-right:0;
}
#services #squiggle1 {
	left: -5px;
	bottom: -14px;
	width: 95%;
}
.page-id-616 #services #squiggle2 {
	left: -9px;
	bottom: -24px;
	width: 97%;
}
#services {
	padding-bottom: 145px;
}

#services .smalltitle {
	margin-top: -43px;
}

#services .left {
	padding: 0 40px 0 70px;;
}

#services .left p:not(.smalltitle) {
	font-size: 22px;
	line-height: 36px;
	margin-bottom: 1.5rem;
}

#services .left .star {
	transform: translateY(14px);
	display: inline-block;
}

#services .left .button.b-white {
	border-color:var(--blackfull);
	color:var(--blackfull);
}

#services .left .button.b-white:hover {
	background-color:var(--blackfull);
	color:#fff;
}

#services .title70 {
	padding-bottom: 15px;
}

#services .content-bottom>div {
	margin-bottom: 30px;
}
#services .items {
	max-width:650px;
}
#services .accordion-item {
	border-top: 1px solid #ccd0d9;
	padding:25px 45px 25px 0;
}
#services .accordion-item .arrow {
	border-radius:100px;
	width:31px;
	height:31px;
	margin-right:25px;
	background-image: url(../../images/arrow.svg);
    background-size: 10px;
	background-repeat:no-repeat;
	background-position:center;
	transform: rotate(45deg);
}
#services .accordion-item:first-child {
	border-top: 0;
	padding-top:0;
}

#services .accordion-item .title {
	font-size:30px;
	cursor:pointer;
}
.page-id-460 #services .accordion-item .acc-head.active .arrow {
	background-color:var(--orange);
}
.page-id-616 #services .accordion-item .acc-head.active .arrow {
	background-color:var(--cyan);
}
.page-id-460 #works .item.item-2 {
	display:none;
}
.page-id-616 #works .item.item-1 {
	display:none;
}
#services .accordion-item .desc {
	font-size:18px;
	line-height:28px;
	padding-top: 20px;
}

#bottom-banner {
	margin:70px 0;
}
#bottom-banner .inner {
	padding:75px 20px 50px 20px;
	
}
#bottom-banner .button:hover {
	border-color:#fff;
	color:#fff;
}
#bottom-banner .button:hover:after {
	filter: invert(0);
}
@media screen and (max-width: 1600px) and (min-width: 992px){
	#hero .inner {
		padding:0 30px;
		height:560px;
	}
	#hero .image-phone {
		bottom: -132px;
		width: 36%;
		max-width:302px;
		top:auto;
		right: 0;
	}
	#hero h1 br {
		display:none;
	}
	#hero .inner {
		height: 38vw;
	}
	#hero .text {
		max-width: 38.5%;
	}
	#hero .button {
		margin-top:0;
	}
	#hero .image-tablet {
		bottom: -2vw;
		right: 10px;
	}
	#hero .image-phone {
		bottom: -7.5vw;
	}
	#hero .image-phone .video {
		height:auto;
		bottom:7vw;
	}
}


@media screen and (max-width: 1400px) {
	#services .left {
		padding-left: 0;
	}
}


@media screen and (max-width: 1400px) and (min-width: 992px) {
	#hero h1 {
		font-size: 2.8vw;
		line-height: 1.2;
	}
	#hero p {
		font-size: 1.35vw;
		line-height:1.5;
	}
}

@media screen and (max-width: 1300px) {
	#services {
		padding: 160px 0;
	}
	#services .accordion-item .title {
		font-size: 24px;
	}
}

@media screen and (max-width: 1100px) {
	#logos .logos .logo {
		margin: 0 20px;
	}
}

@media screen and (min-width: 992px) {
	.page-id-616 #masthead #site-navigation .menu > li.item-big-box a span .star,
	.page-id-460 #masthead #site-navigation .menu > li.item-independent a span .star {
		display:inline;
	}
	.page-id-616 #masthead #site-navigation .menu > li.item-big-box a .def,
	.page-id-460 #masthead #site-navigation .menu > li.item-independent a .def {
		display:none;
	}
}

@media screen and (max-width: 992px) {
	#hero .container {
		padding:0;
	}
	#hero .flex {
		flex-direction: column;
	}
	#hero .inner {
		padding:120px 20px 30px 20px;
		border-radius:0;
		height:100%;
	}
	#hero h1 br {
		display:none;
	}
	#hero .text {
		min-width:100%;
		padding-right:0;
	}
	#hero .images {
		width:100%;
		padding-top:70px;
		margin-bottom: -120px;
	}
	#hero .image-tablet {
		position: relative;
		width: calc(100% + 50px);
		max-width: calc(100% + 50px);
		margin-left: -30px;
		margin-top: 50px;
		bottom: auto;
		transform: translateY(-55px);
	}
	#hero .image-phone {
		right: -28px;
		top: auto;
		width: 40%;
		bottom: -1vw;
		max-width: 300px;
	}
	#hero .image-phone .video {
		height: auto;
		bottom: 14vw;
	}
	#hero .video-horizontal {
		position:relative;
		width:calc(100% + 50px);
		margin-left:-68px;
		bottom: auto;
		right: auto;
		margin-top: 100px;
		transform: translateY(-60px);
	}
	#logos .smalltitle span:before,
	#logos .smalltitle span:after {
		display:none;
	}
	#services {
		padding:100px 0;
	}
	#services .left {
		padding: 0 30px 0 0;
	}

	#services .container > .flex {
		flex-direction: column;
	}

	#services .container > .flex .col-6 {
		width: 100%;
	}

	#services .right {
		padding-left: 0;
		margin-top: 20px;
	}
	#services .items {
		max-width:100%;
	}
}

@media screen and (min-width: 922px) and (max-width: 992px){
	#hero .image-phone .video {
		bottom:11.5vw;
	}
}

@media screen and (min-width: 800px) and (max-width: 922px){
	#hero .image-phone .video {
		bottom:12.4vw;
	}
}


@media screen and (min-width: 768px) {
	#services {
		padding: 250px 0;
		margin-top: 0;
	}
}

@media screen and (max-width: 567px) {
	#hero {
		padding-bottom: 113px;
	}
	#hero .inner {
		padding: 102px 20px 30px 20px;
	}
	#hero .button {
		margin-top:0;
	}
	#hero h1 {
		font-size:27px;
		line-height:33px;
	}
	#hero p:not(.uppercase) {
		font-size:14px;
		line-height:22px;
		font-family: "Benton Sans Med";
	}
	#hero p.uppercase {
		font-size:16px;
		margin-bottom: 7px;
	}
	#hero .image-phone {
		right: -20px;
		width: 46%;
		bottom: -7vw;
		max-width:200px;
	}
	#hero .image-phone .video { 
		right:8px;
		bottom: 15vw;
	}
	#hero .image-tablet {
		width: calc(100% + 127px);
		max-width: calc(100% + 112px);
		margin-left: -85px;
		transform: translateY(-8px);
		margin-top:20px;
	}
	#hero .video-horizontal {
		width: calc(100% + 100px);
		margin-left: -65px;
		transform: translateY(-23px);
		margin-top: 14px;
	}
	#hero .video-horizontal:before {
		top: -8px;
		left: -5px;
		width: calc(100% + 10px);
		height: calc(100% + 15px);
	}
	#hero .image-phone:before {
		border-radius: 28px;
		top: -7px;
		left: -6px;
		width: calc(100% + 10px);
		height: calc(100% + 12px);
	}

	@keyframes scroll {
		0% {
			transform: translateX(0px);
		}
		100% {
			transform: translateX(calc(-120px * 6));
		}
	}
	#logos  {
		margin-top:30px;
		padding-bottom:10px;
		border-bottom:1px solid #CCD0D9;
	}
	#logos .logos {
		overflow: hidden;
		white-space: nowrap;
		width:fit-content;
		position: relative;
		width: calc(120px * 12);
		animation: scroll 10s linear infinite;
		padding-top:0;
	}
	#logos .logos .logo {
		margin: 0 20px !important;
	}
	#logos .smalltitle {
		font-size: 15px;
		line-height:22px;
		max-width:350px;
		margin:0 auto;
	}
	#services {
		padding: 55px 0;
		margin-top:30px;
		padding-bottom:0;
	}
	#services .title70 {
		padding-bottom:7px;
		font-size:36px;
		line-height:45px;
	}
	#services #squiggle1 {
		bottom: -12px;
	}
	#services .right {
		margin-top:0;
	}
	#services .left {
		padding: 0;
	}
	#services .left .star {
		transform: translateY(8px);
	}
	#services .content-bottom {
		padding: 44px 15px;
	}

	#services .content-bottom.lg-hide {
		margin-top: 30px;
		background-image: url(../../images/bg-blue-m.png);
	}

	#services .content-bottom.lg-hide .medium {
		font-size: 24px;
		margin-bottom: 5px;
	}
	#services .left p:not(.smalltitle) {
		font-size:16px;
		line-height:26px;
	}
	#services .accordion-item {
		padding: 15px 30px 15px 0;
	}
	#services .accordion-item .title {
		font-size: 16px;
		line-height:24px;
	}
	#services .accordion-item .desc {
		font-size: 15px;
		line-height: 24px;
		padding-top: 10px;
	}
	#services .accordion-item .arrow {
		align-self: flex-start;
		width: 26px;
		height: 26px;
		margin-right: 15px;
		background-size: 8px;
	}
	#works {
		margin-top:60px;
	}
	#works h3 {
		padding-bottom: 15px;
	}
	#bottom-banner {
		margin:60px 0 0 0;
	}
	#bottom-banner .inner {
		padding:75px 0;
	}
	#bottom-banner .container {
		padding:0;
	}
	#bottom-banner .title50 {
		font-size:40px;
		max-width: 300px;
		margin: 0 auto;
	}
	#bottom-banner .button {
		margin-top:10px;
	}
}