/*
Theme Name: Transportes Shalom
Theme URI: https://transportesshalom.mx

Author: PaginasWebPRO
Author URI: https://paginaswebpro.com.mx

Version: 1.0

Template: genesis
*/

/* Defaults */
*{ box-sizing: border-box; }
input:focus { outline: none; }

/* Reset */
body, h1, h2, h3, h4, h5, h6, p, ul, ol {
	padding: 0;
	margin: 0;
}

a { text-decoration: none; }

/* Colors */
:root {
	--primary-orange: #EA4E1B;
	--black: #0A0F0D;
}

.orange { color: rgba(234, 78, 27, 0.9); }
.bg-orange { background-color: var(--primary-orange); }
.bg-black { background-color: var(--black); }

/* Typography */
body,
button,
input,
textarea {
	-webkit-font-smoothing:antialiased;
	font-size: 100%;
	font-family: "Plus Jakarta Sans", sans-serif;
	color: var(--black);
}

h1 {
	font-size: 2.488rem;
	margin-bottom: 0.5rem;
}

h2 {
	font-size: 2.074rem;
	font-weight: 800;
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.44rem;
	font-weight: 800;
	margin-bottom: 2rem;
}

h4 {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

p {
	line-height: 1.5rem;
}

p.headline {
	text-transform: uppercase;
	color: var(--primary-orange);
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0.5rem;
}

/* Forms */
input {
	width: 100%;
	border-radius: 0.25rem;
	padding: 1rem;
	border: 0;
	background-color: rgba(0, 0, 0, 0.05);
	margin-bottom: 0.75rem;
}

input[type="submit"] {
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	background-color: var(--primary-orange);
	color: white;
	margin: 0;
}

input,
input::placeholder { color: rgba(0, 0, 0, 0.4); }

/* Site Structure */
.site-header > .wrap,
.site-hero > .wrap,
.section > .wrap,
.site-footer .wrap {
	padding: 0 5%;
}

/* Site Header */
.site-header {
	padding: 1rem 0;
}

.site-header .phone {
	padding-top: 2rem;
}

/* Site Hero */
.site-hero {
	position: relative;
	background-color: var(--black);
	padding: 2rem 0;
}

.site-hero .wrap {
	position: relative;
}

.site-hero::before {
	position: absolute;
	content: "";
	background-image: url('https://transportesshalom.mx/assets/Photos/transportes-3.jpeg');
	width: 100%;
	height: 100%;
	background-size: cover;
	top: 0;
	opacity: 0.2;
}

.site-hero .sign-up {
	margin-top: 2rem;
	padding: 1.25rem 1rem;
	background-color: white;
	border-radius: 0.25rem;
}

.site-hero .sign-up .form-headline {
	font-weight: 600;
	margin-bottom: 0.75rem;
}

/* Site Footer */
.site-footer .top {
	padding: 2.75rem 0;
}

.site-footer .logo {
	margin-bottom: 1rem;
}

.site-footer .top .wrap div {
	margin-bottom: 2.5rem;
}

.site-footer .top .wrap div:last-of-type {
	margin-bottom: 0rem;
}

.site-footer .header {
	text-transform: uppercase;
	letter-spacing: 1px;
	color: white;
	font-weight: 700;
}

.site-footer .copyright {
	padding: 0.75rem 0;
}

.site-footer .copyright a {
	color: rgba(255, 255, 255, 0.38);
}

/* Btns */
.btn {
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
}

.btn-active {
	background-color: var(--primary-orange);
}

/* Features */
.features .box {
	padding: 1.75rem 1rem;
	margin-bottom: 1.5rem;
}

.features .box .circle {
	background-color: rgba(234, 78, 27, 0.05);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	margin-bottom: 1rem;
}

/* Flex */
.flex-m {
	display: flex;
	justify-content: space-between;
}

.left {
	margin-bottom: 2rem;
}

.flex div {
	margin-bottom: 1.5rem;
}

.flex div:last-of-type {
	margin-bottom: 0;
}

/* Framework */
.section { padding: 3.5rem 0; }

.text-center { text-align: center; }

.big { font-size: 1.2rem; }
.small { font-size: 0.9375rem; }
.smallest { font-size: 0.875rem; }

.white { color: white; }
.white-95 { color: rgba(255, 255, 255, 0.95); }
.white-90 { color: rgba(255, 255, 255, 0.90); }
.white-87 { color: rgba(255, 255, 255, 0.87); }
.white-60 { color: rgba(255, 255, 255, 0.60); }
.white-38 { color: rgba(255, 255, 255, 0.38); }

.black-75 { color: rgba(10, 15, 13, 0.75); }
.black-60 { color: rgba(10, 15, 13, 0.6); }

.bg-white { background-color: white; }
.bg-gray { background-color: rgba(0, 0, 0, 0.05); }

/* Custom */
.intro .left {
	background-image: url('https://transportesshalom.mx/assets/Photos/transportes-1.jpg');
	height: 400px;
	background-position: center center;
	background-size: cover;
}

.benefits {
	list-style-type: none;
	margin-top: 1.75rem;
	margin-left: 1.75rem;
}

.benefits li {
	line-height: 3.25rem;
}

.gallery {
	margin-top: 2rem;
}

.gallery div {
	width: 100%;
	height: 325px;
	overflow: hidden;
}

.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (min-width:768px){
	.site-header .wrap,
	.site-hero .wrap,
	.section .wrap,
	.site-footer .wrap {
		padding: 0; /* Reset */
		max-width: 720px;
		margin: 0 auto; /* Center */
	}
}

@media only screen and (min-width: 960px){
	/* Structure */
	.site-header .wrap,
	.site-hero .wrap,
	.section .wrap,
	.site-footer .wrap {
		max-width: 960px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.sign-up { max-width: 400px; }

	.section {
		padding-top: 4.5rem;
		padding-bottom: 4.5rem;
	}

	/* Flex */
	.flex { display: flex; }
	.col-4 {
		padding-left: 10px;
		width: 33.33%;
		padding-right: 10px;
	}

	.col-6 { width: 50%; }
	.flex div:last-of-type { margin-bottom: auto; }

	/* Truck */
	.intro .left {
		margin-right: 15px;
		margin-bottom: 0; /* Reset */
	}

	.intro .right { padding-left: 15px; }

	/* Typography */
	.galeria h2,
	h3 {
		margin-bottom: 3rem;
	}

	h3 {
		font-size: 1.728rem;	
	}

	/* Features */
	.features .box {
		width: 25%;
		margin-left: 10px;
		margin-right: 10px;
	}

	.small-d {
		font-size: 0.9375rem;
	}

	.gallery div {
		padding: 0 10px;
		height: 400px;
	}
}

@media only screen and (min-width: 1200px){
	.site-header .wrap,
	.galeria .wrap {
		max-width: 1200px;
	}
}