html,
body {
	overflow-x: hidden;
	background-color: #343a40;
	font-family: 'Roboto' !important;
}

p{
	text-align: justify;
}

.my-container {
	position: relative;
}

.my-container button {
  position: absolute;
  top: 85%;
  left: 5%;
  background-color: red;
  border-color: red;
  padding: 5px;
  width: 15vw!important;
}

.col-11 a, footer .row .col-12 a {
	text-decoration: none;
	color: white !important;
}

.footer-button, #subscribeMail{
	text-align: center;
	display: block;
	margin: 0 auto;
}

.child-vertical-footer{
	margin: 0;
	position: absolute;
	top: 50%;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

/*.static-map{
	display: block;
	margin: 10px auto;
}*/

.only-mobile {
	display: none;
}

header {
	background-color: #343a40;
}

.header-menu a {
	margin-right: 50px;
	font-family: 'Roboto';
	font-size: 20px;
	color: white;
	font-weight: bold;
	text-decoration: none !important;
}

.header-menu a:hover {
	color: #00A0C6;
	font-weight: bold;
}

.header-logo {
	height: 15vh;
	display: block;
	margin: .5em auto;
}

.header-menu {
	display: inline-flex;
	float: left !important;
	margin-top: 3em;
}

.father-vertical {
	position: relative;
}

.child-vertical {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.red-flag {
	height: 1em;
	background-color: #B40000;
}
.blue-bg{
	background-color: #00A0C6;
}

.small-blue-flag {
	border-radius: 5px;
	position: relative;
	bottom: 20px;
	width: 50px;
	height: .5em;
	background-color: #00A0C6;
}

.cover {
	width: 100%;
	 height: 80%; 
}

.separator{
	width: 100vw;
	margin: 0;
}

.gray-dots{
	width: 100%;
	margin: 0;
	height: 35px;
}

#acerca,
.member-description,
#services-services {
	background-color: white;
}

#acerca h3,
#who-we-are,
#team-title,
#clients-title, 
#service-home-title {
	font-family: 'Arial', sans-serif;
	color: #B40000;
	font-weight: bold;
}

#mission{
	background-color: #B40000;
	color: white;
}
#vission{
	background-color: #00A0C6;
	color: white;
}

.img-team,
.mission-img {
	width: 100%;
}

#team-info,
#services {
	background-color: lightgray;
}

.banner {
	width: 100%;
	/* height: 30vh; */
	height: auto;
}

#service-title {
	color: #423C39;
	font-weight: bold;
}

footer {
	height: auto;
	background-color: #27292B;
	color: white;
}

.form-footer {
	display: flex;
	flex-direction: column;
}

.form-footer h6 {
	padding: 0 2em;
}

.form-footer input {
	width: 80%;
	align-self: center;
	border-radius: 1em;
}

.form-footer button,
.modal-button, .footer-button {
	align-self: center;
	width: 40%;
	background-color: #B40000;
	color: white;
	border-radius: 1em;
	border: solid #B40000;
	cursor: pointer;
	box-shadow: 2.5px 5px black;
	transition-duration: .5s;
}

.form-footer button:hover {
	background-color: #B40000;

}

button span {
	display: inline-block;
}

.footer-icon {
	display: inline-block;
	width: 30px;
	height: 30px;
}

.ig-div {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.ig-icon {
	width: 35px;
}

.social-link {
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 0 10px;
	background-size: 50px 50px;
}

.social {
	flex: 1;
	max-width: 1000px;
	margin: 0 auto;
	display: inherit;
	justify-content: inherit;
	align-items: inherit;
	height: inherit;
	flex-wrap: inherit;
}

.social-link.twitter {
	background-image: url('./../img/twitter.svg');
}

.social-link.facebook {
	background-image: url('./../img/facebook.svg');
}

.social-link.instagram {
	background-image: url('./../img/instagram.svg');
}

.button-icon {
	width: 30px;
	height: 30px;
}

#acerca-who {
	padding: 3em;
}

.who-image {
	width: 100%;
	/* height: 50vh; */
	height: auto;
}

.service-list-img {
	height: 30vh;
	display: block;
	margin: 1em auto;
}

.white-hr {
	background-color: #27292B !important;
	width: 7.5% !important;
	height: 1vh !important;
	margin: 0;
}

.client-img {
	width: 100px;
	margin-left: 50%;
	border-radius: 10em;
}

#form {
	display: flex;
	flex-direction: column;
	background-image: url('./../img/chica-sonriente.jpg');
	background-position: contain;
	background-size: auto auto;
	background-repeat: no-repeat;
}

#estaremos-contigo-form {
	background-color: #00A0C6;
	display: none;
}

.estaremos-contigo-button {
	width: 20%!important;
}

.visible {
	display: flex!important;
}


#estaremos-contigo-form div {
	padding: 5%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-position: contain;
	background-size: auto auto;
	background-repeat: no-repeat;
	color: black;
	font-weight: bold;
}

#options-span {
	display: flex;
	flex-direction: row;
}

#form input,
#form textarea,
#estaremos-contigo-form input,
#estaremos-contigo-form select,
#estaremos-contigo-form textarea,
#options-span span, select, select option {
	background-color: rgba(0, 0, 0, 0.3);
	color: black;
	font-weight: bold;
	margin-right: 5%;
	margin-left: 5%;
	border-radius: .8em;
	padding: 0.5em 1em;
}

#form input::placeholder,
#form textarea::placeholder,
#estaremos-contigo-form input::placeholder,
#estaremos-contigo-form textarea::placeholder {
	color: black;
}

#form textarea {
	height: 30vh;
	resize: none;
}

#form button {
	width: 20%;
	background-color: #B40000;
	color: white;
	border-radius: .8em;
	border: solid #B40000;
	margin-left: 5%;
	cursor: pointer;
	box-shadow: 2.5px 5px black;
	transition-duration: .5s;
}

#form button:hover {
	background-color: #B40000;
	border: solid #B40000;
}

video {
	width: 90vw;
	/* height: 65vh; */
	height: 90;
	/* object-fit: fill; */
	object-fit: cover
}

#service-title {
	text-align: center;
}

#read-more a {
	color: #B40000;
}

#read-more a:hover {
	color: #2A0D7C;
}

* {
	box-sizing: border-box
}

/* Slideshow container */
.slideshow-container {
	max-width: 100%;
	position: relative;
	margin: auto;
}

/* Hide the images by default */
.mySlides {
	display: none;
}

.services-list {
	display: inline-flex;
	padding: 0 5%;
}

.full-width {
	width: 80vw;
}

.service {
	display: block;
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    margin: auto 1%;
    background: gray;
	box-shadow: 0px 9px 20px 0px black;
}

.img-service {
	width: 90%;
	display: block;
	margin: auto;
}

.service-active div h4, .service-active div p {
	display: block;
	text-align: center;
}

.w-18 {
	width: 18%;
	height: 13vw;
}

.w-9 {
	width: 9%;
	height: 6.5vw;
}
.w-18 {
	width: 18%;
	height: 13vw;
}
.w-12 {
	width: 12%;
	height: 9vw;
}
.w-6 {
	width: 6%;
	height: 4.5vw;
}
.w-20 {
	width: 20.25%;
	height: 14.25vw;
}
.w-14 {
	width: 14.25%;
	height: 10.25vw;
}
.w-11 {
	width: 11.25%;
	height: 8.25vw;
}
.w-8 {
	width: 8.25%;
	height: 6.25vw;
}

.service-active {
	background-color: #B40000;
	width: 36%;
	height: 26vw;
}

/* Next & previous buttons */
.prev,
.next, .service-next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white!important;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.service-next {
	right: 4%;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a white background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(255, 255, 255, 0.8);
}


/* Caption text */
.text {
	color: #f2f2f2;
	font-size: 25px;
	padding: 10px 14px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 25px;
	padding: 10px 14px;
	position: absolute;
	top: 0;
}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.dots-control{
	position: absolute;
	bottom: 5%;
	text-align: center;
	margin: 0 auto;
	left: 47.5%;
}

.dot-active,
.service-dot-active,
.dot:hover {
	background-color: #717171;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

@keyframes fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

#mision-title {
	color: #2A0D7C;
	font-weight: bold;
}

#services-text {
	font-size: 20px;
}

.ig-image {
	width: 110px;
	height: 100px;
	padding: 100px;
	border-radius: 15px;
	transition-duration: .5s;
}

.ig-image:hover {

	-webkit-filter: grayscale(60%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(60%);
}

#contact-info {
	display: flex;
	/* display: -webkit-inline-box; */
	flex-direction: row;
}

#contact-info div h5 {
	font-size: 15px!important;
}

.my-modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 100;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	/* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 35% !important;
	/* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.ig-image{
	width: 1000px;
}

#ig-text{
	text-align: right;
}

#ig-text h6{
	color: #B40000;
}

#subscribeMail::placeholder{
	text-align: center;
}

@media screen and (max-width: 580px) {
	.my-container button {
		position: absolute;
		display: block;
		margin: 0 auto;
		top: 75%;
		left: 38%;
		font-size: 10px;
		min-width: 15vw;
		width: auto!important;
		background-color: orange;
		border-color: orange;
		padding: 5px;
	  } 

	#options-span {
		display: flex;
		flex-direction: column;
	}
	.service-active {
		display: block!important;
		width: 95vw!important;
		height: 95vw;
	}

	.service-active div p {
		display: none;
	}

	.service {
		display: none;
	}

	#form {
	 background-size: 100% 100%; 
	}
	#ig-text{
		text-align: center;
	}

	.dots-control{
		left: 40%;
	}

	video{
		height: 50vh;
	}
	
	.only-mobile {
		display: block;
	}

	.modal-content {
		width: 80%;
	}

	#service-card {
		margin-bottom: 1em;
	}

	.header-menu {
		display: none;
		margin-top: 0;
		font-size: 1.5em;
		flex-direction: column;
		color: white;
		float: none !important;
		text-align: center;
	}

	.visible-menu {
		transition: all .2s ease-in-out;
		display: flex;
	}

	.header-menu a {
		margin-bottom: .2em;
		margin-right: 0;
	}



	#mission-text {
		margin-top: 1em;
	}

	footer div {
		margin-inline: 1em;
	}

	#mission-text h3,
	#mission-text p {
		text-align: center;
	}

	#acerca h3,
	#team-title,
	#clients-title {
		font-size: 6vw;
	}

	#who-we-are {
		font-size: 5vw;
	}

	.client-img {
		margin-left: 0;
	}

	.service-img {
		height: 30vh;
		display: block;
		margin: 1em auto;
	}

	footer {
		height: auto;
		text-align: center;
	}

	#form button {
		width: 30%;
	}

	.child-vertical-footer{
	margin: 0;
	position: static;
    transform: translate(0, -0%);
}

.father-vertical {
	position: static;
}

#contact-info {
	text-align: center;
}
}