/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */

@font-face {
  	font-family: 'Gotham';
  	src: url('../fonts/GothamMedium.ttf') format('truetype'); 
	font-weight:300;
}
@font-face {
  	font-family: 'Gotham';
  	src: url('../fonts/GothamBook.ttf') format('truetype'); 
	font-weight:500;

}
@font-face {
  	font-family: 'Gotham';
  	src: url('../fonts/Gotham-Black.otf') format('opentype'); 
	font-weight:700;
}

body{
	font-family: 'Gotham';
}
h1{
	font-size:70px;
	padding-bottom:20px !important;
}
h2{
	font-size: 46px;
}
h3{
	font-size:38px;
}
h4{
	font-size:34px;
	padding-bottom:20px !important;
}
h5,h6{
	font-size:24px;
	padding-bottom:20px !important;
}

h1, h2, #menu-menu-servicio li{
	text-transform:uppercase;
	font-family: 'Gotham';
	font-weight:700 !important;
}

p, .avia-button.avia-size-large, .avia-button , .avia_ajax_form .button, .text-footer p{
	font-size:16px !important;
	font-weight:400 !important;
} 
/*Menu*/
.avia-menu-fx {
    bottom: 27px;
	height: 3px;
}
.av-main-nav > li {
    margin: 0px 10px;
	text-transform:uppercase;
}
.logo a img{
	padding-top:15px;
}

/*Botones*/

#top .avia-button .avia_button_icon, #top .avia-button .avia_iconbox_title{
    font-weight: 600;
}
.avia-button {
    padding: 10px 15px; !important
    margin: 5px 0 !important;
}
.avia-button.avia-size-large {
    padding: 0px !important;
    min-width: 130px;
}
.boton-borde, .main_color input[type='submit'] {
	text-transform: uppercase;
    background-color: unset;
	margin: auto;
    border-width: 8px;
    color: #ffff;
    width: 140px;
    height: 43px;
    border-style: solid;
    border-image: url(/wp-content/uploads/2024/06/borde.png) 10 round;
}
 .main_color input[type='submit']:hover {
    color: #ffffff !important;
}
/*Footer*/
#footer {
	padding: 30px 0px;
}
#footer .container > *:nth-child(4) {
    width: 32%;	
}
#footer .container > *:nth-child(2) {
	width: 9%;	
}
#footer .container > *:nth-child(3) {
	width: 12%;	
}
#footer .container > *:first-child {
	width: 29%;
}
#text-2 .textwidget p, #menu-menu-footer{
	font-weight:600 !important;
}
.img-footer{
	padding-top:10px;
}

.img-footer img{
	padding:10px;
}
#socket .copyright {
    float: unset;
}


/*Formulario*/

.avia_ajax_form.av-form-labels-hidden p {
    text-align: center !important;
}
.avia_ajax_form .button {
	float: unset !important;
	padding:0 !important;
}
#top .avia_ajax_form .text_input{
	border-radius:0 !important;
}
#top .main_color input[type='text'], textarea {
	margin: 10px 0px;
	color: #ffff  !important;
	border: none !important;
	border-bottom: 2px solid #ffff !important;
}
.text_input::placeholder, #top .main_color .widget_nav_menu ul li a:focus {
  	color: #ffffff !important;
	opacity:1;
}

input[type="submit"], #submit, .button {
    margin-top: 20px !important;
}

/*Inicio*/
.img{
  	margin: 20px 0px !important;
}
.bloque-inicio li {
  font-size: 50px;
  color:#ffff;
}

.bloque-inicio-content {
  	display: flex;
  	align-items: center;
  	list-style: none;
  	animation: scrolling 20s linear infinite;
}

.bloque-inicio-item{
  	flex-shrink: 0;
	margin: 0px 20px;
}

li {
  list-style: none;
}

@keyframes scrolling {
  0% { transform: translateX(0) }
  100% { transform: translateX(-100%) }
}

/*Nosotros*/
.bloque-nosotros{
    position: absolute !important;
    z-index: 1;
    bottom: 10%;
    right: 14%;
}

.d-flex{
	display:flex;
	align-items: center;
}

/*Servicios*/
#menu-menu-servicio li{
	line-height: 45px !important;
    font-size: 38px !important;
}

#menu-menu-servicio li a:hover{
	border-bottom:2px solid #ffff;
	background-color:#00000040 !important;
	color:#ffff;
}

#menu-menu-servicio{
	width: 55%;
}

/*Diseño, Ilustracion, Desarrollo*/
.servicios-header h3{
	margin:30px;
}
.servicios-header{
    display:flex;
    align-items: center;
    flex-wrap: wrap;
}

/*Proyectos*/
.proyectos{
	padding:0px 30px;
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 860px) {
  /* Add your Mobile Styles here */
	h1{
		font-size:36px;
	}
	h2{
		font-size: 32px;
	}
	h3{
		font-size:28px;
	}
	h4{
		font-size:24px;
	}
	h5,h6{
		font-size:20px;
	}
	#footer .container, #socket .container{
		text-align:center;
	}
	#footer .widget {
    	margin: 10px 0 !important;
	}
	/*Nosotros*/
	.bloque-nosotros{
    	position: relative !important;
    	bottom: 0;
    	right: 0;
	}
	/*Servicios*/
	
	#menu-menu-servicio{
		width: 100%;
		text-align:center;
	}
	
}