/* ==========================================================================
FORMAT
========================================================================== */
/*
* === FUENTES ===
*
	font-family: 'Barlow Condensed', sans-serif;
	font-family: 'Roboto', sans-serif;
*/

/*
* === COLORES ===
*/

/* Definir variables para el elemento raiz */
:root {
	/* Fuentes */
	--font-family-primary: 'Barlow Condensed', sans-serif;
	--font-family-secundary: 'Roboto', sans-serif;
	/* colors */
	--primary-color: #282828;
	--secondary-color: #dc2518;
	--tertiary-color: #7c7c7c;
	--quaternary-color: #fff;
	--quinary-color: #f5f5f5;

	--secondary-color-hover: #e94a3e;

	--secondary-rgba-color: rgba(220, 37, 24, 0.5);
	/* wrappers */
	--wrapper-size: 3.125rem;
}

/*
* === GENERAL ===
*/
/* Html/Body Tags */
body
{
	font-family: var(--font-family-secundary);
	font-weight: 400;
	font-size: 1rem;
	color: var(--primary-color);
	background-color: var(--quaternary-color);
	line-height: 1.25;
}

/* Utility Resets */
.lead
{
	font-size: 1.875rem;
	font-family: var(--font-family-primary);
	font-style: italic;
	font-weight: 400;
}

strong, b
{
	font-weight: 800;
}

/* Titles */
.title
{
	font-family: var(--font-family-primary);
	font-size: 2.8125rem;
	font-weight: 800;
	font-style: italic;
	margin-bottom: 0;
	color: var(--primary-color);
}

.title.space
{
	margin-bottom: var(--wrapper-size);
}

/* Selection */
::selection
{
	background: #111416 ;
	color: #ffffff;
}

::-webkit-selection
{
	background: #111416 ;
	color: #ffffff;
}

::-moz-selection
{
	background: #111416 ;
	color: #ffffff;
}

/* Wrappers */
.wrapper
{
	padding-top: var(--wrapper-size);
	padding-bottom: var(--wrapper-size);
}

.wrapper-top
{
	padding-top: var(--wrapper-size);
}

.wrapper-bottom
{
	margin-bottom: var(--wrapper-size);
}

/* Brackgrounds */
.bg-config
{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.bg-bicolor
{
	background-image: url('../img/graficas-bg.jpg');
	background-position: center;
	background-repeat: repeat-y;
}

.bg-hands
{
	background-image: url('../img/cover-empresa.jpg');
}

.bg-ship
{
	background-image: url('../img/cover-servicios.jpg');
}

.bg-collage
{
	background-image: url('../img/cover-contacto.jpg');
}

/* covers */
.cover
{
	height: 400px;
	margin-top: 57px;
}

.cover .cover-text
{
	margin: 0 auto;
	font-family: var(--font-family-primary);
	font-weight: 800;
	font-size: 3.125rem;
	color: var(--quaternary-color);
	text-align: center;
	min-width: 430px;
	padding: 2.5rem;
	border: 5px solid var(--quaternary-color);
}

/* Buttons */
.button-square
{
	font-family: var(--font-family-primary);
	font-size: 1.25rem;
	min-width: 160px;
	border-radius: 0rem;
	padding: 0.625rem 2rem;
	text-align: center;
	border: 0;
}

.button-square.red 
{
	background-color: var(--secondary-color);
	color: var(--quaternary-color);
	transition: all .3s ease-in-out;
	cursor: pointer;
}

.button-square.red:hover,
.button-square.red:focus,
.button-square.red:active
{
	background-color: var(--secondary-color-hover);
	color: var(--quaternary-color);
	text-decoration: none;
}

/* Links */
.link
{
	font-family: var(--font-family-montserrat);
}

.link.white
{
	color: var(--link-white);
}

.link.white:hover,
.link.white:focus,
.link.white:active
{
	color: var(--link-white);
}

/* Form */
.control-label
{
	font-size: 1.25rem;
	font-family: var(--font-family-primary);
}

.form-control
{
	border-radius: 0;
	background-color: var(--quinary-color);
}

textarea
{
	resize: none;
}
/* ==========================================================================
COMPONENTES
========================================================================== */
/*
* === TEMPLATE ===
*/
header
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: var(--quaternary-color);
	z-index: 5000;
	transition: all .3s ease;
}

header .logo
{
	width: 260px;
	height: 98px;
	background-image: url('../img/logo.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: all .3s ease;
}

header .navbar
{
	padding: 0;
	font-family: var(--font-family-primary);
	padding-bottom: 36px;
}

header .navbar .navbar-brand::after
{
	content: "";
    height: 100%;
    background-color: var(--quaternary-color);
    position: absolute;
    top: 0;
    left: 0;
	right: 0;
	margin: 0 auto;
    width: 110px;
    border-radius: 50%;
    z-index: -1;
	transform: scale(1.3);
}

header .navbar .navbar-nav .nav-item
{
	position: relative;
}

header .navbar .navbar-nav .nav-item:not(:last-child) .nav-link::after
{
	content: "/";
	position: absolute;
	right: 0;
}

header .navbar .navbar-nav .nav-item .nav-link
{
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--tertiary-color);
	padding: 1.25rem 1rem;
	transition: all .3s ease-in-out;
}

header .navbar .navbar-nav .nav-item .nav-link:hover, 
header .navbar .navbar-nav .nav-item .nav-link:focus, 
header .navbar .navbar-nav .nav-item .nav-link:active, 
header .navbar .navbar-nav .active > .nav-item .nav-link
{
	color: var(--secondary-color);
}

header .navbar .navbar-nav .nav-item .nav-link:hover::after, 
header .navbar .navbar-nav .nav-item .nav-link:focus::after, 
header .navbar .navbar-nav .nav-item .nav-link:active::after, 
header .navbar .navbar-nav .active > .nav-item .nav-link::after
{
	color: var(--tertiary-color);
}

header .navbar-toggler 
{
    border-radius: 0;
}

/* header.stacked */
header.stacked
{
	position: fixed;
	top: 0;
	bottom: auto;
}

header.stacked .logo
{
	width: 120px;
	height: 46px;
}

header.stacked .navbar
{
	padding-bottom: 0;
}

header.stacked .navbar .navbar-brand::after
{
	width: 65px;
    transform: scale(1);
}

/* - Footer -  */
footer
{
	font-family: var(--font-family-primary);
	background-color: var(--secondary-color);
	color: var(--quaternary-color);
}

footer a
{
	color: var(--quaternary-color);
}

footer a:hover,
footer a:focus,
footer a:active
{
	color: var(--quaternary-color);
}

footer .wrapper
{
	padding-top: calc(var(--wrapper-size) / 2);
	padding-bottom: calc(var(--wrapper-size) / 2);
}

/*
* === PORTRAIT ===
*/
.portrait
{
	height: 100vh;
	width: 100%;
	background-image: url('../img/cover-index.jpg');
}

header.stacked + .portrait
{
	height: calc(100vh - 57px);
	margin-bottom: 57px;
}

/*
* === BORDERED CARD ===
*/
.bordered-cards
{
	font-family: var(--font-family-primary);
	font-size: 1.25rem;
}

.bordered-cards .bordered-card
{
	border-left: 1px solid var(--tertiary-color);
}

.bordered-cards .bordered-card:last-child
{
	border-right: 1px solid var(--tertiary-color);
}

.bordered-cards .bordered-card .bordered-card-item
{
	padding: calc(var(--wrapper-size) / 2) calc(var(--wrapper-size) / 1.3);
}

/*
* === CROOKED CARD ===
*/
.crooked-card
{
	font-family: var(--font-family-primary);
	font-size: 1.25rem;
}

/*
* === MEDIA OBJECT ===
*/
/* .media-number */
.media .media-number
{
	font-family: var(--font-family-primary);
	font-size: 3.5625rem;
	font-weight: 800;
	width: 66px;
	color: var(--secondary-color);
}

.media .media-title
{
	font-family: var(--font-family-primary);
	font-weight: 800;
}

/*
* === IMAGE TEXT ===
*/
.image-text .text-title
{
	font-family: var(--font-family-primary);
	margin-bottom: var(--wrapper-size);
}

.image-text .text-title span
{
	font-weight: 800;
	font-style: italic;
}