/*=====================
Custom Styles
======================*/


::selection {
	background: #f3352e; /* WebKit/Blink Browsers */
	color: #fff;
}
::-moz-selection {
	background: #f3352e; /* Gecko Browsers */
	color: #fff;
}


body {
	font-family: 'Rubik', sans-serif;
}

p, h1, h2, h3, h4, h5, h6{
	font-family: 'Rubik', sans-serif;
}

a{color: #f3352e;}


h2 {
	font-weight: 300;
	font-size: 42px;
}

.dropdown-item.active, .dropdown-item:active {
	background-color: transparent;
	font-weight: 500;
	color: var(--bs-dropdown-link-color);
}


.red-box {
	padding: 30px 36px;
	background-color: #f3352e;
	position: absolute;
	right: 50px;
	bottom: 0px;
}

.red-box p {
	font-size: 36px;
	color: #fff;
	font-weight: 300;
	line-height: 1.25;
	max-width: 350px;
	margin-bottom: 0;

}

.navbar.onscroll {
	background: #fff !important;
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

.dropdown:hover .dropdown-menu {
	display: block;
}


.slick-prev {
	left: -75px !important;
}

.slick-next {
	right: -75px !important;
}

.location-grid img {
	width: 100%;
}


.divider {
	border-bottom: 1px #eee solid;
}

.divider-top {
	border-top: 1px #eee solid;
}

.bg-light {
	--bs-bg-opacity: 0 !important;
}

/*==================
Homepage
===================*/

.heroVideo {
	position: absolute;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	-o-object-fit: cover;
	object-fit: cover;
	box-shadow: none;
	opacity: .33;
}

.gradientTop {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 30%;
	content: ' ';
	backface-visibility: hidden;
	background: linear-gradient(to bottom, rgb(255, 255, 255, 1), rgba(255, 255, 255, 0.0));
}

.slider {
	width: 100%;
	margin: 60px auto;
	overflow: hidden;
	background: #fff;
}
.slick-slide {
	margin: 0px 20px;
}
.slick-slide img {
	width: 100%;
	height: auto;
	max-height: 560px;
}
.asl .slick-slide img {
	width: 100%;
	height: auto;
	max-height: 500px;
}
.slick-prev:before,
.slick-next:before {
	color: black;
}
.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .3;
}
.slick-active {
	opacity: .5;
}
.slick-current {
	opacity: 1;
}

.btn-wrap {margin: 10px 30px 60px;}
.prev-btn, .next-btn {padding: 0; margin: 0; background: none; border: none; transform: scale(1.3);}
.next-btn:focus, .prev-btn:focus {outline: 0;}
.prev-btn img, .next-btn img {width: 100px; height: auto;}
.next-btn {float: right;}
.variable img {border-radius: 15px;}
.prev-btn img:hover, .next-btn img:hover {filter: invert(100%);}
.variable.slider img {width: auto; height: 100%;}

.slick-prev::before {
	content:  url(/wp-content/themes/china-trade-rite/images/prev-chevron.svg);
}

.slick-next::before {
	content: url(/wp-content/themes/china-trade-rite/images/next-chevron.svg);
}


#menu-item-71, #menu-item-81, #menu-item-82, #menu-item-83, #menu-item-80 {
	padding: 0 !important;
}

.contact-btn {
	padding: 0 20px !important;
	transition: .25s;
}

.contact-btn:hover {
	background-color: #fff;
}

.homehero {
	height: 100vh;
}

.homehero .container {
	z-index: 1;
}


.homehero p {
	font-size: 22px;

}

.homehero h1 {
	font-size: 68px;
	line-height: 1;

}

.homehero h2 {
	font-size: 56px;
	font-weight: 300;

}

.mask-shape {
	max-width: 150px;
	margin-bottom: 24px;
}

.btn {
	border: 1px solid #f3352e;
	border-radius: 0;
	padding: 10px 20px;
	transition: .25s ease-in ease-out;
	background: none;
}

.white-btn {
	color: #fff;
}

.white-btn:hover {
	color: #fff;
}

.btn:hover {
	border: 1px solid #f3352e;
}

.btn:after {
	content: url(/wp-content/themes/china-trade-rite/images/btn-arrow.svg);
	margin-left: 10px;
	transition: .25s ;

	position: relative;
}

.white-btn:after {
	content: url(/wp-content/themes/china-trade-rite/images/btn-arrow-white.svg);
	margin-left: 10px;
	transition: .25s;
	position: relative;
}


.our-advantage img {
	width: 100%;
	padding-right:36px;
}

.advantage-icon img {
	max-height: 40px;
}


/*=====================
Button Animations
======================*/

.btn:hover:after {
	animation: pushRightin .25s linear forwards;
}

.btn:after {
	animation: pushRightout .25s linear forwards;
}


@keyframes pushRightin{
	from {
		left:0px;
	}

	to {
		left: 6px;
	}
}


@keyframes pushRightout{
	from {
		left: 6px;
	}

	to {
		left: 0px;
	}
}


/*=====================
Navigation
======================*/

.navbar-nav {
	width: 100%;
	padding-left: 36px;
}

.navbar-brand img {
	height: auto;
	width: 200px;
	padding: 25px 0;
	transition: .25s;
}

.onscroll .navbar-brand img{
	width: 150px;
	padding: 10px 0;
}

#menu-header .nav-link {
	font-size: 18px;
	font-weight: 400;
	color: #000;
}

#menu-header .menu-item {
	padding: 0 12px;
}

#menu-header .menu-item:last-child {
	padding: 0;
}


body.page-template:not(.home) .contact-btn:hover {
	border: 1px solid #000;
	background-color: #000;
	color: #fff !important;
}

body.page-template:not(.home) .contact-btn:hover a {
	color: #fff !important;
}


/*================ 
Subpages
================*/

.subpagehero {
	margin-top: 7em;
	position: relative;
}

.subpagehero h1 {
	font-size: 72px;
	line-height: 1;
}

/*
.page-template-page-history .subpagehero  {
	height: 600px;
}
*/

.dark-hero {
	background-color: #121212;
}


.dark-hero h1, .dark-hero p{
	color: #fff;
}

.subpagehero {
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: bottom;
}

.subpagehero.shapeHero {
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 500px auto;
	min-height: 640px;
}


body.page-template-page-history .subpagehero.shapeHero {
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 500px auto;
	min-height: 400px;
}

.primary-services .card {
	padding: 36px;
	border: 1px solid #eee;
	-webkit-box-shadow: 10px 10px 15px -14px rgba(0,0,0,0.33);
	-moz-box-shadow: 10px 10px 15px -14px rgba(0,0,0,0.33);
	box-shadow: 10px 10px 15px -14px rgba(0,0,0,0.33);
}

.primary-services .card img {
	margin: 0 auto;
	margin-bottom: 36px;
}

.services h4 {
	font-size: 20px;
} 

.service-icon {
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-bottom: 12px;
	border-radius: 50%;
}


.page-template-page-contact h2{
	font-weight: 500;
}


.nf-form-content button, .nf-form-content input[type="button"], .nf-form-content input[type="submit"] {
	padding: 12px 26px;
}

.nf-form-content button:hover, .nf-form-content input[type="button"]:hover, .nf-form-content input[type="submit"]:hover {
	background: #000000 !important;
	color: #ffffff !important;
}


/*============ 
Stats
================*/

.big-stats h2 {
	color: #f3352e;
}

.big-stats h3 {
	color: #f3352e;
	font-size: 56px;
	font-weight: 300;
}



/*==================
Footer
===================*/


#footer {
	background-color: #f7f7f7;
}

#footer .menu-item {
	display: block;
}

#footer .nav {
	display: block;
}


#footer .nav ul li a {
	color: #202020;
	font-size: 20px;
}


#footer .nav-link, #footer .menu-item {
	color: #202020;
	font-size: 20px;
	padding-left: 0;
}

#footer .menu-item a[aria-current="page"] {
	color: #202020;
}


.locations-map img {
	width: 100%;
	max-width: 400px;
}

.locations-map ul {
	padding-left: 0;
}

.locations-map ul li {
	list-style: none;
}

.contact-btn {
	border: 1px solid #f3352e;
	margin-left: auto;
	justify-content: flex-end;
}

.colophon {
	font-size: 14px;
}

.website-by {
	color: #555;
	text-align: center;
}

.website-by p {
	text-align: right;
}

.website-by a {
	color: #000;
}

footer .locations-map ul {
	margin-bottom: 14px;
}

/*=================
History
=================*/


.group-history ul {
}

.group-history  li {
	list-style: none;
}

.group-history  li::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background-size: contain;
	background-image: url(/wp-content/themes/china-trade-rite/images/ctr-bullet.png);
	background-repeat: no-repeat;
	position: relative;
	top: 21px;
	right: 32px;
}

body.page-template-page-location .subpagehero h1 {font-size: 42px;}




/*=================
Locations Grid
=================*/


.locations a{
	color: #000;
}

.locations a {
	transition: .25s
}


.locations a:hover {
	color: #f3352e;
}

.locations a img {
	transition: .25s;
}


.locations a:hover img {
	transform: translateY(-4px);
}

.locations h3 {
	font-weight: 400;
}


/*=================
Locations Page
=================*/

.location-map img {
	width: 100%;
}

.video-embed {
	width: 100%;
}



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


@media screen and (max-width:991px) {
	.homehero h1 {
		font-size: 58px;
	}

	.homehero h2 {
		font-size: 50px;
	}

	.homehero p {
		font-size: 20px;
	}

	.homehero .stats p {
		margin-bottom: 0;
	}

	.subpagehero.shapeHero {
		background-size: 40%;
		background-position: right top;
	}

	body.page-template-page-history .subpagehero.shapeHero  {
		background-size: 40%;
		background-position: right top;
	}

	.contact-btn {
		margin: 0 12px;
		width: fit-content;
	}

	.navbar-collapse {
		background: #ffffff;
		-webkit-box-shadow: 3px 0px 11px -2px rgba(0,0,0,0.35);
		-moz-box-shadow: 3px 0px 11px -2px rgba(0,0,0,0.35);
		box-shadow: 3px 0px 11px -2px rgba(0,0,0,0.35);
	}

	.onscroll .navbar-collapse {
		background: #ffffff;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	.dropdown-menu {
		display: block;
		border: none;
		box-shadow: none;
	}

	.navbar-nav {
		padding: 20px 12px 20px 12px;
	}

	.dropdown-item {
		padding: 0;
	}

	.menu-item {
		margin-bottom: 12px;
	}

	.dropdown-menu .menu-item {
		margin-bottom: 12px;
	}

	.slick-prev, .slick-next {
		top: 25% !important;
	}

	.slick-next {
		right: 20px !important;
	}

	.slick-prev {
		left: 20px !important;
	}

	.menu-item {
		margin-bottom: 0;
	}

	body.page-template-page-about .red-box,
	body.page-template-page-contact .red-box {
		bottom: initial;
		position: relative;
		left: 0;
		max-width: 325px;
	}

	body.page-template-page-about .red-box,
	body.page-template-page-contact .red-box .red-box {
		padding: 24px 28px;
		background-color: #f3352e;
		position: relative;
		right: auto;
		bottom: auto;
	}

	body.page-template-page-about .red-box p,
	body.page-template-page-contact .red-box .red-box p {
		font-size: 24px;
	}	
}


@media screen and (max-width:768px) {
	.our-advantage img {
		padding-right: 0;
		margin-bottom: 36px;
	}

	.subpagehero.shapeHero {
		background-size: 30%;
		background-position: right top;
	}


	footer .nav {
		margin-bottom: 36px;
	}

	footer .locations-map {
		margin-bottom: 46px;
	}

	#footer .nav-link, #footer .menu-item {
		color: #202020;
		font-size: 18px;
		padding-left: 0;
		line-height: 1;
	}

	.colophon {
		text-align: center;
	}

	.website-by p {
		text-align: center;
	}
}




@media screen and (max-width:480px) {
	.homehero h1 {
		font-size: 46px;
	}

	.homehero h2 {
		font-size: 42px;
	}

	.homehero p {
		font-size: 18px;
	}

	.homehero .stats p {
		margin-bottom: 0;

	}
	.subpagehero h1 {
		font-size: 42px;
	}
	.homehero {
		height: 620px;
		padding-top: 110px;
	}

	.red-box {
		padding: 24px 28px;
		background-color: #f3352e;
		position: relative;
		right: auto;
		bottom: auto;
	}

	.red-box p {
		font-size: 20px;
	}
	
	.heroVideo {
		position: absolute;
		padding: 0;
		width: 100%;
		height: 620px;
		max-width: none;
		max-height: none;
		-o-object-fit: cover;
		object-fit: cover;
		box-shadow: none;
		opacity: .33;
	}
	

	.subpagehero.shapeHero {
		background-size: 40%;
		background-position: right top;
	}

	body.page-template-page-history .subpagehero.shapeHero  {
		background-size: 40%;
		background-position: right top;
	}
}




@media screen and (max-width: 400px) {
  .heroVideo {
    height: 700px;
}

.homehero{
	height: 700px;
}
}