/* ==========================================================================
     Project:     C-Store Landing Page
     Date:        04/25/2024 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Components
========================================================================== */

/* Type*/
h1 {letter-spacing: 0px; text-transform:none;}
.line-under {position: relative;}
.line-under::after {content:"";display:block; height: 4px; width: 80%; max-width: 100px; margin-top: 15px; }
.line-under-red::after {background: #DA2F30}
.line-under-dark::after {background: #3B4D4D}
.line-under-white::after {background: #fff}
.text-center.line-under::after, .text-center .line-under::after {margin-left: auto;margin-right:auto}
.text-bright-blue {color: #228CD3}
.letterspacing-none {letter-spacing: 0px;}

/* Layout */
.page-wrapper {overflow-x:hidden;}
header.over-blue {background:#0E1C3A}

/* Containers */
.container-small {max-width: 800px}

/* Heros */
.hero {position: relative;}
.hero .container {z-index: 1}
.hero .container + p {display:inline-block}
.hero img, .hero video {object-fit: cover; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1}
.hero .btn-scrolldown {position: absolute; bottom: 15px; z-index: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; background: #0E1C3A;}
.hero .btn-scrolldown a {color: #fff;font-size: 1rem; width: 45px; height: 45px}

/* Backgrounds */
.bg-purple-waves {background: url(/skins/twd/includes/cstore/img/bg-purple-waves.webp) center center no-repeat; background-size: cover}
.bg-lines {position: relative; }
.bg-lines::after {content:""; background: url(/skins/twd/includes/cstore/img/bg-lines.svg) 50px top no-repeat;background-size: cover; background-attachment: fixed; position: absolute; right: -50px; top: 0px; width: calc(100% + 100px); height: 100%; z-index: -1}
.bg-purple-office {background: url(/skins/twd/includes/cstore/img/bg-office.webp) center center no-repeat; background-size: cover}
.bg-map {background: url(/skins/twd/includes/cstore/img/bg-map.webp) center center no-repeat; background-size: cover}
.bg-blue {background-color: #0E1C3A}

/* Slideshows */
.logos-slideshow .slick-track { align-items:center;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; max-height: 250px; }
.logos-slideshow .slick-list {margin: 0px 30px}

.slideshow .slick-arrow {border: none; z-index:2; position: absolute; top: 50%; background:none; padding: 0px; height: 30px; width: 30px;margin-top: -15px;}
.slideshow .slick-arrow::after {content:""; border: 1px solid #fff;width: 15px; height: 15px;border-width: 0px 0px 2px 2px;display:block;}

.slideshow .slick-prev::after {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);margin-left:11px;}
.slideshow .slick-next::after {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg);transform: rotate(-135deg);margin-left:5px;}

/* Borders */
.text-white div[class*="border-"] {border-color: white}

/* CMS */
.hero .container ~ .cms-contentmenu {position: absolute; left: 60px; bottom: 20px}

/* Forms */
.cms-form .form-group {position: relative;}
.cms-form .form-group label span {position: absolute;color: #228CD3; top: 13px; left: 20px}
.cms-form .form-control, .cms-form .custom-select {background: #283859; border: 2px solid #374665; border-radius: 5px; color: #fff; padding: 5px 5px 5px 15px }
.cms-form .form-control::placeholder {color:#949CAC}
.cms-form .form-control ::ms-input-placeholder {color:#949CAC}
.cms-form .custom-select {color:#949CAC;background: #283859 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='%23949CAC' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") right .75rem center/8px 10px no-repeat!important;}
.cms-form label {color: #949CAC; font-size: .875rem}
.cms-form .text-muted {color: #949CAC!important}

/* Buttons */
.btn-blue, .cms-form .btn-primary {border: none; color: #fff; background:none; font-size: .813rem; line-height: 0; text-decoration: none; font-family: "League Spartan", sans-serif;font-weight: 700; text-transform: uppercase; transition: background 250ms ease; padding:20px 30px; border-radius: 0px; margin: 0px; letter-spacing: 5px;}
.btn-blue, .cms-form .btn-primary {background: #0060B6;color: #fff;}
.cms-form .btn-primary { width: 100%}
.cms-form .btn-primary:hover, .cms-form .btn-primary:focus {background: #fff; color: #0060B6}

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

@media (min-width: 0px) {	
	/* Type */
	h1, .h1 {font-size: 2.25rem;line-height: 1.2}

	/* Slideshows */
	.logos-slideshow img {margin: 0px 10px;max-height: 75px;object-fit: contain;}
	.slideshow .slick-prev {left: -10px}
	.slideshow .slick-next {right: -10px}

	/* Heros */
	.hero {margin-top: 59px}
	.hero-fullheight {height: calc(100vh - 59px);}

	/* Images */
	.img-creative {margin-left: -20vw;max-width: 150%}
	.img-web {max-width: 130%}
	.img-trafficking {margin-left: -20vw;max-width: 130%}
}

@media (min-width: 576px) {	
	/* Slideshows */
	.logos-slideshow img {margin: 0px 30px;max-height: 100px}
	.slideshow .slick-prev {left: -30px}
	.slideshow .slick-next {right: -30px}

     /* Borders */
     .border-sm-right {border-right: 1.5px solid rgba(0,0,0,.175)}
}

@media (min-width: 768px) {	
	/* Type */
	h1, .h1 {font-size: 3rem;line-height: 1.4}

	/* Heros */
	.hero {margin-top: 90px}
	.hero-fullheight {height: calc(100vh - 90px);}

	/* Images */
	.img-creative {margin-left: -20vw;max-width: 150%}
	.img-web {max-width: 160%}
	.img-trafficking {margin-left: -20vw;max-width: 150%}
}

@media (min-width: 1900px) {	
	/* Images */
	.img-creative {margin-left: -27vw;max-width: 170%}
	.img-web {margin-left: 10vw}
	.img-trafficking {margin-left: -25vw;max-width: 170%}
}

@media (min-width: 2200px) {	
	/* Images */
	.img-creative {margin-left: -30vw;max-width: 200%}
	.img-web {margin-left: 12vw;max-width: 180%}
	.img-trafficking {margin-left: -30vw;max-width: 200%}
}

@media (min-width: 2500px) {	
	/* Images */
	.img-creative {margin-left: -35vw;max-width: 210%}
	.img-web {margin-left: 14vw;max-width: 200%}
	.img-trafficking {max-width: 210%}
}