/* TOP BAR STYLE */
.topbar {
	height: 55px;
	width: 100%;
	background: #003B49;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 0px 100px;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}
.topbar-content-left, .topbar-content-right {
	width: 49.9%;
	height: 100%;
	display: flex;
	align-items: center;
}
.topbar-content-left {justify-content: flex-start;}
.topbar-content-right {justify-content: flex-end;}
.topbar-content-left .contact {
    height: 85%;
    width: auto;
}
.topbar-content-left .contact img {
    height: 100%;
    width: auto;
}
.topbar .topbar-content-right .consulta-link {
	text-decoration: none;
	color: #fff;
	margin-right: 15px;
}
.topbar .topbar-content-right .social-media {
	padding: 0px 20px 0px 20px;
	border-left: 1px solid #fff;
}
.topbar .topbar-content-right .social-media .social-element i {
	color: #fff;
	font-size: 18px;
}
.topbar .topbar-content-right .social-media .social-element i {
	margin-right: 10px;
}
.topbar .topbar-content-right .social-media .social-element:nth-child(5) i {
	margin-right: 0px;
}
.topbar .contact .contact-element:hover i, .topbar .topbar-content-right .consulta-link:hover,.topbar .social-media .social-element:hover i {
	transition: all 0.5s ease;
	color: #6cc24a;
}
/* END TOP BAR SYLE */

/* NAVBAR STYLE */
navbar {
	padding: 10px 100px;
	height: 70px;
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 55px;
	z-index: 998;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
}
navbar nav {
	max-width: 1200px;
	width: 100%;
	display: flex;
}
navbar nav .navbar-content {
	display: inline-flex;
}
navbar nav .image-brand {
    display: none;
}
navbar nav .hamburguer {
    margin-left: auto;
    display: none;
    justify-content: center;
    align-items: center;
}
navbar nav .hamburguer i {
    color: #003B49;
    font-size: 22px;
    cursor: pointer;
}
navbar nav .close {
    display: none;
    position: absolute;
    right: 25px;
    top: 25px;
}
navbar nav .close i {
    font-size: 22px;
    color: #003B49;
    cursor: pointer;
}
navbar nav .navbar-content {
	margin-left: auto;
}
navbar nav .image-brand img {
	height: 50px;
}
nav .navbar-content .navbar {
	list-style-type: none;
	display: inline-flex;
}
nav .navbar-content .navbar .nav-item {
	margin: auto;
	padding: 10px 20px;
	position: relative;
}
nav .navbar-content .navbar .nav-item.non-active {
	cursor: pointer;
}
nav .navbar-content .navbar .nav-item .nav-link {
	text-decoration: none;
	color: #003B49;
}
nav .navbar-content .navbar .nav-item.active .nav-link {
	font-weight: 900;
}
nav .navbar-content .navbar .nav-item span {
	position: absolute;
	width: 80%;
	height: 100%;
	bottom: 0;
	left: 10%;
	border-bottom: 2px solid #6ccd4a;
	transition: all 0.5s ease;
	opacity: 0;
	z-index: -1;
}
nav .navbar-content .navbar .nav-item.non-active:hover span {
	opacity: 1;
}
/* END NAVBAR STYLE */


/* CONTACT FORM */
.contact-form {
	width: 100%;
	padding: 70px 0px;
	display: flex;
	justify-content: center;
}
.contact-form .contacto-container {
	width: 60%;
	max-width: 1200px;
}
.contact-form .contacto-container h1 {
	text-align: center;
	color: #003B40;
	font-family: 'Roboto Slab', serif;
	font-size: 35px;
	font-weight: 100;
	margin-bottom: 15px;
}
.contact-form .contacto-container .des {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 25px;
}
.contact-form .contacto-container p {
	text-align: center;
	color: #52565A;
	font-family: 'Roboto', serif;
	font-size: 18px;
	font-weight: 300;
	max-width: 450px;
}

.contact-form .contacto-container form .form-row {width: 100%;display: flex;flex-wrap:wrap;justify-content: center;margin-bottom: 8px;}
.contact-form .contacto-container form .form-row input {width: 32.6%}
.contact-form .contacto-container form .input-style:first-child{margin-left:0;}
.contact-form .contacto-container form .input-style:last-child{margin-right:0;}

.contact-form .contacto-container form label[for="upload-file"], .contacto-container form .form-row select {width: 49.5%!important;}
#type{margin:0 .5% 0 0;}
#upload-file-label{margin:0 0 0 .5%;}
#msg{margin:0;}
.contact-form .contacto-container textarea {width: 100%;}
.contacto-container form .form-row select {cursor: pointer;}

.contact-form .contacto-container form .input-style, .contact-form .contacto-container form label[for="upload-file"] {
	padding: 15px 10px;
	margin: 0px .5%;
	color: #004B49;
	font-weight: 500;
	border: 1px solid #DDE5ED;
	border-bottom: 1px solid transparent;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(221,229,237,1);
	-moz-box-shadow: 0px 2px 2px 0px rgba(221,229,237,1);
	box-shadow: 0px 2px 2px 0px rgba(221,229,237,1);
	font-size: 14px;
	font-family: 'Roboto', serif;
}
.contact-form .contacto-container form input[type="file"] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.contact-form .contacto-container form label[for="upload-file"] {
	padding: 15px;
	margin: 0px 5px;
	background: #fff;
	color: #53565A;
	font-weight: 400;
	display: inline-block;
	cursor: pointer;
}

.contact-form .contacto-container form label[for="upload-file"] i {
	margin-right: 10px;
}
.contact-form .contacto-container form .form-row select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0px;
	background: #fff;
	color: #53565A;
	font-weight: 400;
	background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
	background-position: 95% 50%;
}
.contact-form .contacto-container form .form-row input:focus, .contact-form .contacto-container textarea:focus, .contact-form .contacto-container form .form-row select:focus {
	outline: none;
}
.contact-form .contacto-container form .form-row input::placeholder, .contact-form .contacto-container textarea::placeholder {
	font-weight: 300;
	color: #53565A;
}
.contact-form .contacto-container form .form-row input#file-upload-button {
	background: red!important;
}
.contact-form .contacto-container .form-buttons {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 15px;
}

.contact-form .contacto-container .form-buttons .button-container {
	width: 25%;
	height: 40px;
	padding: 12px 0px;
	margin: 0px 5px;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	background: #6CC24A;
}
.contact-form .contacto-container .form-buttons .button-container input {
	color: #fff;
	font-size: 16px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-family: 'Roboto', serif;
	font-weight: 500;
	z-index: 2;
	transition: all 0.8s ease;
	border:none;
	background-color:transparent;
	cursor:pointer;
}
.contact-form .contacto-container .form-buttons .button-container div {
	background: rgba(0,0,0,0.1);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	border-radius: 2px;
	transform: translate(-100%, -100%);
	transition: all 0.3s ease;
}
.contact-form .contacto-container .form-buttons .button-container:hover div {
	transform: translate(0,0);
}
.contact-form .contacto-container .form-buttons .button-container:hover a {
	color: #fff;
}
/* END CONTACT FORM */

/* FOOTER STYLE */
.footer {
	width: 100%;
}
.footer .clientes {
	width: 100%;
	background: #e2e2e2;
	display: flex;
	justify-content: center;
	padding: 15px;
}
.footer .clientes .img-container {
	padding: 0px 20px;
}
.footer .clientes .img-container img{
	height: 35px;
	width: auto;
}
.footer .footer-content {
	width: 100%;
	background: #003B49;
}
.footer .footer-content .top-row {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0px 20px 0px;
}
.footer .footer-content .top-row .img-container img {
	width: 200px;
	height: auto;
}
.footer .footer-content .contact-info {
	width: 100%;
	display: flex;
	justify-content: center;
}
.footer .footer-content .contact-info .contact-info-container {
	width: 100%;
	max-width: 900px;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #002c35;
	padding-bottom: 15px;
}
.footer .footer-content .contact-info .contact-info-container .element {
	padding: 0px 15px;
	color: #fff;
	font-family: 'Roboto', serif;
	text-decoration:none;
}
.footer .footer-content .contact-info .contact-info-container .element:nth-child(1), .footer .footer-content .contact-info .contact-info-container .element:nth-child(2) {
	border-right: 1px solid #002c35;
}
.footer .footer-content .general-info {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0px;
}
.footer .footer-content .general-info .general-info-container {
	width: 100%;
	max-width: 900px;
	display: flex;
	justify-content: center;
}
.footer .footer-content .general-info .general-info-container .element {
	width: 33.3%;
	padding: 0 25px;
}
.footer .footer-content .general-info .general-info-container .element h2 {
    font-family: 'Roboto', serif;
    font-size: 16px;
    margin-bottom: 8px;
    color: #6cc24a;
}
.footer .footer-content .general-info .general-info-container .element p a {
    font-family: 'Roboto', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}
.footer .footer-content .general-info .general-info-container .element p a:hover {
    color: #dde5ed;
}
.footer .footer-content .general-info .general-info-container .element .button {
	display: flex;
	justify-content: flex-end;
}
.footer .footer-content .general-info .general-info-container .element .button .btn {
	width: 80%;
	height: 40px;
	-webkit-box-shadow: 1px 1px 3px 0px rgba(0,38,48,1);
	-moz-box-shadow: 1px 1px 3px 0px rgba(0,38,48,1);
	box-shadow: 1px 1px 3px 0px rgba(0,38,48,1);
	margin: 0px 0px 5px 0px;
	position: relative;
	overflow: hidden;
}
.footer .footer-content .general-info .general-info-container .element .button:nth-child(1) .btn {
	background: #6CC25A;
}
.footer .footer-content .general-info .general-info-container .element .button:nth-child(2) .btn {
	background: #53565A;
}
.footer .footer-content .general-info .general-info-container .element .button .btn a {
	color: #fff;
	text-decoration: none;
	font-family: 'Roboto', serif;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer .footer-content .general-info .general-info-container .element .button .btn div {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background: rgba(0,0,0,0.1);
	transform: translate(-100%, -100%);
	transition: all 0.3s ease;
}
.footer .footer-content .general-info .general-info-container .element .button .btn:hover div {
	transform: translate(0,0);
}
.footer .footer-content .social-media {
	width: 100%;
	text-align: center;
	padding: 15px 0px 20px 0px;
}
.footer .footer-content .boletin {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}
.footer .footer-content .boletin .boletin-container {
    width: 100%;
    max-width: 300px;
    text-align: center;
}
.footer .footer-content .boletin .boletin-container h2 {
    font-family: 'Roboto', serif;
    color: #fff;
    font-size: 16px;
    margin-bottom: 8px;
}
.footer .footer-content .boletin .boletin-container form input {
    width: 100%;
    padding: 10px 10px;
    border: 0px;
    font-size: 14px;
    color: #53565A;
}
.footer .footer-content .boletin .boletin-container form input:focus, .footer .footer-content .boletin .boletin-container form input:active {
    outline: none;
}
.footer .footer-content .boletin .boletin-container form input::placeholder {
    color: rgba(83, 86, 90, 0.5);
}
.footer .footer-content .boletin .boletin-container form input:nth-child(1) {
    border-bottom: 1px solid rgba(108, 194, 74, 0.5);
}
.footer .footer-content .boletin .boletin-container form input:nth-child(2) {
    margin-bottom: 18px;
}
.footer .footer-content .boletin .boletin-container form a {
    padding: 8px 15px;
    background: #6CC24A;
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto', serif;
    font-size: 15px;
    border-radius: 3px;
}
.footer .footer-content .social-media .social-media-content a {
	font-size: 18px;
	color: #fff;
	margin: 0px 10px;
}
.footer .copyright {
	height: 50px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer .copyright p {
	margin-bottom: 0px!important;
	font-family: 'Roboto', serif;
	font-size: 13px;
	color: #003B49;
	font-weight: 500;
}
/* END FOOTER STYLE */

/* RESPONSIVE CEL */
@media screen and (max-width: 599px){
    .contact-form{padding:50px 0px;}
    .contact-form .contacto-container{width:90%!important;}
    #type{margin-bottom:8px;}
    #type,#upload-file-label{width:100%!important;margin-left:0;margin-right:0;}
    .contact-form .contacto-container textarea{margin:0!important;}
    .contact-info-container{flex-wrap:wrap;padding:0px 15px;}
    .contact-info-container .element:nth-child(1){border-right:0!important;width:100%;margin-bottom:10px;text-align:center;}
}

@media screen and (max-width: 899px) and (min-width: 600px) {
    .contact-form{padding:40px 0;}
    .contact-form .contacto-container{width:85%;}
}

@media screen and (max-width: 830px) {
    .topbar {
        padding: 0px 50px;
    }
    navbar {
        padding: 10px 50px;
    }
}
@media screen and (max-width: 768px) {
    .topbar {
        padding: 0px 10px;
    }
    .topbar-content-left {
        display: none;
    }
    .topbar-content-right {
        width: auto;
    }
    navbar {
        padding: 0px;
    }
    navbar nav .image-brand {
        display: inline-flex;
        padding: 10px 25px;
    }
    navbar nav .image-brand img {
        height: 50px;
        width: auto;
    }
    navbar nav .hamburguer {
        display: flex;
        padding: 10px 25px;
    }
    navbar nav .close {
        display: block;
    }
    navbar nav .navbar-content {
        position: absolute;
        background: #fff;
        width: 100%;
        transition: all 0.5s ease;
        transform: translateY(-100%);
    }
    navbar nav .navbar-content .navbar {
        display: block;
        padding: 10px 0px;
    }
}
/* END RESPONSIVE CEL */