/**
	
* Template Name: Bluebird - Multipurpose Responsive HTML Template
* Version: 2.6
* Author: Unicoder
* Email: unicoder16@gmail.com
* Developed By: Unicoder
* First Release: 6th October, 2019
* Author URL: www.unicoderbd.com

**/



/**
Blurbird - Multipurpose HTML Template Stylesheet, all of the demos css
are in the style.css file. But the color css are loding from seperate 
color css file in assets/css/category folder. So you can easily 
control the color option from that file. It's will not conflique or 
afftect the style.css file and you don't need to edit style.css

All the color option we use as variable system. Just the variable call
in main style.css file.

**/


/*================== Start CSS =====================*/


.container,
.container-fluid{
	transition: all 0.6s ease 0s;
	-moz-transition: all 0.6s ease 0s;
	-webkit-transition: all 0.6s ease 0s;
	-o-transition: all 0.6s ease 0s;
}

body {
	font-size: 15px;
	font-family: var(--theme-general-font);
	font-weight: 400;
	line-height: 28px;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0
}
a, a:hover{
	text-decoration: none;
}
img{
	max-width: 100%
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a{
	font-family: var(--theme-highlight-font);
	margin-bottom: 0;
}

h1, .h1{
	font-size: 40px;
	font-weight: 700
}
h2, .h2{
	font-size: 32px;
	font-weight: 700
}
h3, .h3{
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
}
h4, .h4{
	font-size: 21px;
	font-weight: 700
}
h5, .h5 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5
}
h6, .h6 {
	font-size: 16px;
	font-weight: 500;
	line-height: 28px
}

.purchase-btn-envato {
	position: fixed;
	left: 50px;
	bottom: 50px;
	z-index: 9;
	width: 50px;
	height: 50px;
	z-index: 100
}
.purchase-btn-envato a {
	z-index: 100;
	position: relative
}


/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
	padding-top: 80px;
  }
  
  .clients .owl-item {
	display: flex;
	justify-content: center;
	align-items: center;
	/*padding: 0 20px;*/
  }
  
  .clients .owl-item img {
	width: 100%;
	opacity: 0.5;
	transition: 0.3s;
	-webkit-filter: grayscale(100);
	filter: grayscale(100);
  }
  
  .clients .owl-item img:hover {
	-webkit-filter: none;
	filter: none;
	opacity: 1;
  }
  
  .clients .owl-nav, .clients .owl-dots {
	margin-top: 5px;
	text-align: center;
  }
  
  .clients .owl-dot {
	display: inline-block;
	margin: 0 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #ddd !important;
  }
  
  .clients .owl-dot.active {
	background-color: #ffc451 !important;
  }

   /*--------------------------------------------------------------
# Flipeamelod
--------------------------------------------------------------*/

  .flipcard {
	perspective: 1000px;
	margin-bottom: 1.5rem;
  }
  .flipcard .flipcard-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
  }
  .flipcard .card-front, 
  .flipcard .card-back {
	width: 100%;
	height: 100%;
	position: relative;
	backface-visibility: hidden;
	transition: all .3s;
	-webkit-backface-visibility: hidden;
         backface-visibility: hidden;
 	-webkit-transition: 0.6s;
         transition: 0.6s;
 	-webkit-transform-style: preserve-3d;
         transform-style: preserve-3d;
  }
  .flipcard .card-front {
	z-index: 2;
  }
  .flipcard .card-front::after {
	content: "";
	display: block;
	width: 0;
	position: absolute;
	bottom: -1px;
	right: -1px;
	border-width: 16px 16px 0 0;
	border-style: solid;
	border-color: #999 #f6b70c;
	border-radius: .25rem 0 0 0;
  }
  .flipcard .card-back {
	position: absolute;
	top: 0;
	text-align: left;
	z-index: 1;
	transform: rotateY(180deg);
	overflow-y: auto;
  }
  /* the flippying bob */ 
  .flipcard:hover .flipcard-wrap {
	transform: rotateY(-180deg);
  }
  /* identando */

  ul.bbob {
	list-style-position: outside;
  } 

.flipcard .flipcard-wrap p {

	line-height: 20px;
}

/* Bob's overlay */

.bobsoverlay {
	background: rgba(225, 175, 21, .7);
	display: block;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
.bobsoverlay1 {
	
	background-size: cover;
	background-position: center;
	
	background-image: url("/assets/images/about/camara-about.jpg");
}


.formyform {
	/* background:  rgba(225, 175, 21, .5); */
	background-size: cover;
	background-position: center;
	/*background-image: url(https://picsum.photos/1920/1030);*/
	background-color: #e1af15;
	/* min-height: 800 px; */
	padding: 30px 0px 30px 0px;
	position: relative;
}



/* bullets */

ul.bbob {
	list-style-type: disc;
	list-style-position: outside;
	list-style: initial;
  } 


/* bootstrap cards */
/* height */

/* .card {
	min-height: 140px; 
	
	 margin-bottom: 2rem;
	
	
}

@media screen and (max-width:940px) {
	.card {
		max-width: 375px;
		max-height: 100px;
	}
	.card-img-top {
		max-width: 375px;
	}
} */

/* iconos nuevos para servicios */

.nuevoIcono {
	max-height: 10rem;
}

.hov:hover svg path{
	fill: #1b355d;
}



/* Adición 10-5-2021 */

.card {
	border: none;
}


.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}


/* CONTACT FORM  */

.contact .info-box {
	color: #444444;
	text-align: center;
	box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
	padding: 20px 0 30px 0;
	border-radius: 4px;
  }
  
  .contact .info-box i {
	font-size: 32px;
	color: #e03a3c;
	border-radius: 50%;
	padding: 8px;
	border: 2px dotted #f8d4d5;
  }
  
  .contact .info-box h3 {
	font-size: 20px;
	color: #777777;
	font-weight: 700;
	margin: 10px 0;
  }
  
  .contact .info-box p {
	padding: 0;
	line-height: 24px;
	font-size: 14px;
	margin-bottom: 0;
  }
/*   
  .contact .php-email-form {
	box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
	padding: 30px;
	border-radius: 4px;
  } */
  
  .contact .php-email-form .validate {
	display: none;
	color: red;
	margin: 0 0 15px 0;
	font-weight: 400;
	font-size: 13px;
  }
  
  .contact .php-email-form .error-message {
	display: none;
	color: #fff;
	background: #ed3c0d;
	text-align: left;
	padding: 15px;
	font-weight: 600;
  }
  
  .contact .php-email-form .error-message br + br {
	margin-top: 25px;
  }
  
  .contact .php-email-form .sent-message {
	display: none;
	color: #fff;
	background: #18d26e;
	text-align: center;
	padding: 15px;
	font-weight: 600;
  }
  
  .contact .php-email-form .loading {
	display: none;
	background: #fff;
	text-align: center;
	padding: 15px;
  }
  
  .contact .php-email-form .loading:before {
	content: "";
	display: inline-block;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	margin: 0 10px -6px 0;
	border: 3px solid #18d26e;
	border-top-color: #eee;
	-webkit-animation: animate-loading 1s linear infinite;
	animation: animate-loading 1s linear infinite;
  }
  
  .contact .php-email-form input, .contact .php-email-form textarea {
	box-shadow: none;
	font-size: 14px;
	border-radius: 4px;
  }
  
  .contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
	border-color: #111111;
  }
  
  .contact .php-email-form input {
	padding: 20px 15px;
  }
  
  .contact .php-email-form textarea {
	padding: 12px 15px;
  }
  
  .contact .php-email-form button[type="submit"] {
	background: #e03a3c;
	border: 0;
	padding: 10px 32px;
	color: #fff;
	transition: 0.4s;
	border-radius: 4px;
  }
  
  .contact .php-email-form button[type="submit"]:hover {
	background: #e35052;
  }
  
  @-webkit-keyframes animate-loading {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }
  
  @keyframes animate-loading {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }

/* END CONTACT FORM */
