/*
Theme Name: TPH Ambulancias
Text Domain: tphambulancias
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: Tuxideas
Author URI: https://tuxideas.com/
Theme URI: https://tphambulancias.com/
*/

html, body {
	background-color: #F3F3F3;
	color: #081249;
}

.navbar {
	min-height: 7rem;
	border-bottom-left-radius: 40px;
	padding: 0 2rem;
}

.navbar-menu {
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.navbar-menu a.navbar-item {
	border-bottom: 3px solid #FFBC00;
	padding: .5rem 2.75rem;
}

.navbar-menu a.navbar-item.current-menu-item {
	color: #FFBC00;
}

.navbar-menu a.navbar-item:hover {
	background-color: #FFBC00;
	border-bottom: 3px solid #c49100;
	color:  #FFFFFF;
}

.heading-line {
	font-size: 1.2rem;
	display: table;
	padding-bottom: 20px;
	border-bottom: 6px solid #203AFF;
	color: #000000;
}

.heading-line.heading-strong-blue {
	border-bottom: 6px solid #081249;
	color: #081249;
}

.heading-arrow h2 {
	color: #0B083F;
	line-height: 1.1;
	position: relative;
	display: table;
	font-size: 40px;
	padding-left: 45px;
}

.heading-arrow h2::after {
	content: " ";
	position: absolute;
	top: -5px;
	left: 0px;
	background: url('assets/img/icons/arrow_right.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	height: 60px;
	width: 30px;
}

.hero.has-background {
	position: relative;
	overflow: hidden;
}

.hero .hero-background {
	position: absolute;
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
}

.hero .hero-background.is-transparent {
	opacity: 0.3;
}

.button.is-warning {
	background-color: #FFBC00;
	color:  #FFFFFF;
}

.button.is-warning:hover {
	background-color: #203AFF;
	color: #FFFFFF;
}

.button.is-link {
	background-color: #203AFF;
	white-space: normal;
	line-height: 1.1;
}

.button.is-link:hover {
	background-color: #FFBC00;
}

.button.is-light {
	background-color: #FFFFFF;
	color: #203AFF;
}

.file.is-fullwidth .file-cta {
	width: 100%;
}

.file.is-rounded .file-cta {
	border-radius: 9999px;
}

.file .file-cta {
	background-color: #ffffff;
}

.label {
	color: #203AFF;
	font-weight: 500;
	padding-left: 15px;
}

/* Page Body */

.page-body {
	position: relative;
	z-index: 3;
}

.page-body section {
	position: relative;
}

.page-body .bg-arrow {
	position: absolute;
	z-index: 2;
	top: 0;
	width: 10%;
	height: auto;
}

.page-body .bg-arrow.bg-arrow-left {
	transform: rotateY(180deg);
}

.page-body .bg-arrow.bg-arrow-left {
	left: -3%;
}

.page-body .bg-arrow.bg-arrow-left.bg-arrow-size-2 {
	left: -6%;
}

.page-body .bg-arrow.bg-arrow-left.bg-arrow-size-3 {
	left: -8%;
}

.page-body .bg-arrow.bg-arrow-left.bg-arrow-size-4 {
	left: -8%;
}

.page-body .bg-arrow.bg-arrow-right {
	right: -3%;
}

.page-body .bg-arrow.bg-arrow-right.bg-arrow-size-2 {
	right: -6%;
}

.page-body .bg-arrow.bg-arrow-right.bg-arrow-size-3 {
	right: -8%;
}

.page-body .bg-arrow.bg-arrow-right.bg-arrow-size-4 {
	right: -12%;
}

.page-body .bg-arrow.bg-arrow-right.bg-arrow-size-5 {
	right: -12%;
}

.page-body .bg-arrow.bg-arrow-size-2 {
	width: 20%;
	height: auto;
}

.page-body .bg-arrow.bg-arrow-size-3 {
	width: 30%;
	height: auto;
}

.page-body .bg-arrow.bg-arrow-size-4 {
	width: 40%;
	height: auto;
}

.page-body .bg-arrow.bg-arrow-size-5 {
	width: 50%;
	height: auto;
}

.page-body .bg-arrow.bg-arrow-top-3 {
	top: 30% !important;
}

.page-body .bg-arrow.bg-arrow-top-4 {
	top: 40% !important;
}

.page-body .bg-arrow.bg-arrow-top-5 {
	top: 50% !important;
}

.page-body .bg-arrow.bg-arrow-top-8 {
	top: 80% !important;
}

.page-body .bg-arrow.bg-arrow-top-9 {
	top: 90% !important;
}

/* Estilos Home */

.hero-home {
	background-image: url('assets/img/bg_hero_home.png');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
}

.hero-home .title.is-size-1,
.hero-home .subtitle.is-size-1 {
	font-size: 4.4rem !important;
	color: #000000;
}

.section-valores .item-valor img {
	max-height: 130px;
	width: auto;
	margin-bottom: 30px;
}

.section-valores .item-valor h3 {
	white-space: normal;
	line-height: 1.1;
	color: #FFBC00;
	font-weight: 600;
}

.section-beneficios {
	box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.12);
	border-radius: 40px;
	padding: 40px 50px;
}

.section-beneficios .item-beneficio img {
	max-height: 150px;
	width: auto;
	margin-bottom: 15px;
}

/* Estilos Servicio */

.section-servicio {
	border-top: 70px solid #203AFF;
}

.section-servicio .content p {
	font-size: 18px;
}

.servicio-description .block-title {
	border-top: 4px solid #203AFF;
	border-bottom: 4px solid #203AFF;
	border-right: 4px solid #203AFF;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;

	padding: 10px 20%;
}

.servicio-description .block-title h2,
.servicio-description .block-title h3 {
	color: #081249;
	line-height: 1.1;
}

.servicio-description .block-title h2 {
	font-size: 3.1rem;
	font-weight: bold;
}

.servicio-description .block-title h3 {
	font-size: 2.1rem;
}

.servicio-description .text-arrow {
	max-width: 40px;
}

.servicio-description p {
	font-size: 20px;
	color: #0B083F;
}

.servicio-ambulancia-left {
	border-top-right-radius: 35px;
	border-bottom-right-radius: 35px;
}

.servicio-ambulancia-right {
	border-top-left-radius: 35px;
	border-bottom-left-radius: 35px;
}

/* Estilos Ambulancias */

.section-ambulancias {
	border-top: 70px solid #203AFF;
}

.section-ambulancias .title {
	margin: 0 auto;
}

/* Estilos About Us */

.section-about {
	border-top: 70px solid #203AFF;
}

.conoce-tph-mision-img {
	border-top-right-radius: 35px;
	border-bottom-right-radius: 35px;
}

.bloque-valores {
	box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.12);
	border-radius: 40px;
	padding: 40px 50px;
}

/* Estilos Contacto */

.hero-contacto {
	background-image: url('assets/img/bg_contacto.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 100%;
}

.hero-contacto h1 {
	color: #0B083F;
	line-height: 1.125;
	position: relative;
	display: table;
	padding-bottom: 15px;
	border-bottom: 7px solid #0B083F;
}

.hero-contacto h1::after {
	content: " ";
	position: absolute;
	top: 0;
	left: -45px;
	background: url('assets/img/icons/arrow_right.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	height: 60px;
	width: 30px;
}

/* Header  */

.hero-header .icon-page {
	max-width: 100px;
}

.hero-header .title {
	font-size: 4rem !important;
	border-bottom: 10px solid #FFBC00;
	display: table;
	padding-bottom: 10px;
}

.hero-header h2 {
	line-height: 1.1;
}

/* Estilos Footer */

.footer {
	background: #203AFF;
	border-top-right-radius: 40px;
	padding: 3rem 1.5rem;
	position: relative;
	z-index: 3;
}

.footer .contact-block img {
	width: 20px;
}

/*.footer .contact-block a {
	font-size: 24px;
}*/

.footer .contact-block p {
	font-size: 14px;
}

/* Fondo Circles */

#background-wrap {
    bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1;
}

/* OBJECTS */

.circle {
	height: 200px;
	position: absolute;
	width: 200px;
}

/* KEYFRAMES */

@-webkit-keyframes rotateCircle { 
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-moz-keyframes rotateCircle { 
    from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotateCircle { 
    from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rotateCircleInvert { 
    from {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	to {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@-moz-keyframes rotateCircleInvert { 
    from {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	to {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes rotateCircleInvert { 
    from {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	to {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

/* ANIMATIONS */

.x1 {
	-webkit-animation: rotateCircle 30s linear infinite;
	-moz-animation: rotateCircle 30s linear infinite;
	animation: rotateCircle 30s linear infinite;
	
	left: -7%;
	top: 5%;
	
	width: 180px;
	height: auto;
}

.x2 {
	-webkit-animation: rotateCircleInvert 30s linear infinite;
	-moz-animation: rotateCircleInvert 30s linear infinite;
	animation: rotateCircleInvert 30s linear infinite;
	
	left: 5%;
	top: 85%;
	
	width: 140px;
	height: auto;
}

.x3 {
	-webkit-animation: rotateCircle 30s linear infinite;
	-moz-animation: rotateCircle 30s linear infinite;
	animation: rotateCircle 30s linear infinite;
	
	left: 45%;
	top: 50%;
	
	width: 260px;
	height: auto;
}

.x4 {
	-webkit-animation: rotateCircleInvert 30s linear infinite;
	-moz-animation: rotateCircleInvert 30s linear infinite;
	animation: rotateCircleInvert 30s linear infinite;
	
	left: 65%;
	top: 5%;
	
	width: 220px;
	height: auto;
}

.x5 {
	-webkit-animation: rotateCircle 30s linear infinite;
	-moz-animation: rotateCircle 30s linear infinite;
	animation: rotateCircle 30s linear infinite;
	
	left: 92%;
	top: 65%;

	width: 160px;
	height: auto;
}

.x6 {
	-webkit-animation: rotateCircle 30s linear infinite;
	-moz-animation: rotateCircle 30s linear infinite;
	animation: rotateCircle 30s linear infinite;
	
	left: 20%;
	top: 40%;

	width: 90px;
	height: auto;
}