/**
 * Theme Name: geek1
 * Theme URI: geek1
 * Description:geek1
 * Version: 1.0.0
 * Author: Julian
 * Author URI: geek1
 * License: GNU General Public License v2.0
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Template: genesis
**/


@font-face { 
font-family: roboto; 
src: url(/wp-content/themes/startergeek/fonts/roboto/Roboto-Medium.woff2); 
font-style:normal;
	font-weight:400
}

@font-face { 
font-family: roboto; 
src: url(/wp-content/themes/startergeek/fonts/roboto/Roboto-Bold.woff2); 
font-style:normal;
	font-weight:800
}


@font-face { 
font-family: roboto; 
src: url(/wp-content/themes/startergeek/fonts/roboto/Roboto-Black.woff2); 
font-style:normal;
	font-weight:900
}






html {-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}
body {background-color: #fff;color: #4d4d4d;font-family: 'roboto', sans-serif;font-size: 15px;font-weight: 400;line-height: 1.5;margin: 0;overflow-x: hidden;}
button,input:focus,input[type="button"],input[type="reset"],input[type="submit"],.button,.gallery img {transition: all 0.2s ease-in-out;border: 0;padding: 0.7em;font-size: 1rem;font-family: inherit; }
input[type="submit"],.button{cursor: pointer;}

article{font-size: 18px;}

button, input, select, textarea { font-size: 1rem;font-family: inherit;     line-height: 1.5;width:100%;padding: 0.7em;border:none;box-sizing:border-box; background: #fff; border-radius:5px}
textarea{height:150px}
a {color: #777;text-decoration: underline;	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; font-weight:700}
a:focus,a:hover {color: #333;text-decoration: none;}
p {	margin: 0 0 20px;	padding: 0;}
ol,ul {	margin: 0;	padding: 0;}
article ol, article ul{padding-left:20px}

li {list-style-type: none;}
article li {padding-left: 10px; list-style:disc}
hr {border: none;	border-collapse: collapse;	border-top: 1px solid #eee;	clear: both;	margin: 30px 0;}
b,strong {font-weight: 700;}
blockquote,cite,em,i {font-style: italic;}
mark {background: #ddd;	color: #333;}
blockquote {margin: 30px;}
h1 {font-family: 'Rajdhani', sans-serif;	font-weight: 700;	line-height: 1.2;	margin: 0 0 20px;}
h2,h3, h4,h5,h6{font-family: 'Rajdhani', sans-serif;	font-weight: 700;	line-height: 1.2;	margin: 0 0 20px;}
h1 {font-size: 45px;}
h2 {font-size: 40px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
.entry-content h3,.entry-content h4 {font-weight: 700;}
.entry-content h4 {	margin-top: 40px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
embed,iframe,img,object,video,.wp-caption {	max-width: 100%;}
img {height: auto;	vertical-align: top;}
figure {margin: 0;}
*, ::before, ::after{-webkit-box-sizing: inherit;-moz-box-sizing: inherit;box-sizing: inherit;}
/*-------- constantes*/
.site-inner{width:100%;margin:0 auto;}



/*------------------------------------------------------------------------------------------------------------------------*/

body.logged-in.admin-bar .totalhead {
  margin-top: calc(0px + 32px);
}



#totalhead.sticky .totalhead{   transition: all .5s ease-out;}

.totalhead {  padding: 0;   overflow-x: visible;  overflow-y: visible;  width: 100%;  position: fixed !important;  top: 0px;  bottom: auto;
  left: 0px;  right: auto;  z-index: 9999; background-color:#fff }

/*-------- general*/
a {color:#707070;text-decoration:none;font-weight:bold}

.site-container{max-width:100%;box-sizing:border-box;margin-top: 90px;}

/*logo*/
.site-header{background:#fff;}
.title-area img{padding:3% 0;max-width:100%;;margin:0 auto;display:block;max-width:90%;max-height:62px;width:auto}
.site-description{display:none}

	#social-container {
  background: #00144B;
  min-height: 52px;
  position: relative;z-index:990
}

/*menu*/

.mobmenu img{margin: 0 auto;	display: block;height:24px}
.mobmenu { background:#fff; cursor: pointer; color:#fff;font-weight:bold;font-size:2em;padding: 10px; }
.active, .mobmenu:hover { background: #E49F15;color:#fff}


.home .content-sidebar-wrap{margin-top:85px}
.telefonotop{position:relative;z-index:120}

#social-container a{color:#fff;margin: 0 10px;}


#social-container, #search-form-container{display:none}


.redes a:hover{filter: invert(88%) sepia(19%) saturate(7%) hue-rotate(116deg) brightness(99%) contrast(85%);}
.formulariofull a:hover{filter: invert(88%) sepia(19%) saturate(7%) hue-rotate(116deg) brightness(99%) contrast(85%);}

#topsocial a:hover, #topsocial .email:hover{filter: brightness(0) invert(1)}

#socialheader a:hover, #socialfooter a:hover{filter:  brightness(0) invert(1) }


/*menu*/
.site-header{width:100%;z-index:99 ;height:90px;top:0}
.site-header > .wrap{margin:0 auto; display:flex;justify-content:space-between;align-items:center; padding:0.5em 1em; box-sizing:border-box;position:relative}

.wrapnav{background:#00144B}
.nav-primary {    max-height: 0;   overflow: hidden;
  transition: max-height .2s ease-out;
  position: absolute;
  left: 0;
  width: 100%;top:90px}

.nav-primary wrap{position:relative}
.nav-primary ul{text-align:center;list-style:none;padding-left: 0; background:#fff;}
.nav-primary li, .nav-primary li a{color: #00144B;padding: 1em .666em;text-decoration: none;font-size: 1em;font-weight: 700; text-transform:uppercase}
.nav-primary li:hover { color:#FFC400;overflow:hidden}
.nav-primary li:hover > a{color:#FFC400}
.nav-primary li ul {display:none;position:absolute;	min-width:140px;top:67px;background:#ed1f41}
.nav-primary li ul li, .nav-primary li ul li a{color:#fff}

/*slideshow*/
.featured-slides{margin:0 auto;background:#202120;position: absolute;z-index: 1;right:0; left:0;}

.mySlides img {margin:0 auto;display: block;}
/*.fadingslide{animation:fading 6s infinite}@keyframes fading{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}*/

.featured-image-class img{margin:0 auto;display:block}


  @keyframes anim {  0% {    display: none;    opacity: 0;  }  1% {    display: block;    opacity: 0;    transform: scale(1.2);  }    100% {    opacity: 1;    transform: scale(1);  }}

.featured-slides picture { animation: anim .8s ease-in-out; overflow:hidden}

.mySlides{overflow:hidden;position:relative}


 
.mySlides .custom-html{position: absolute;
  color: #fff;
  width: 400px;
  max-width: 90%;
  bottom: 10%;
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;font-size:20px}


.mySlides .custom-html a{width:312px;height:60px;background-color:#FFC400;display:flex;justify-content:center;align-items:center;margin:20px auto;color:#00144B;}

	
/* Position the "next button" to the right */

/*
.previous_btn {  position: absolute;  left: 1%;  border-radius: 3px 0 0 3px; width: 0;   height: 0;   border-top: 20px solid transparent;  border-bottom: 20px solid transparent;  border-right: 18px solid #00B3A0;}
.next_btn {  position: absolute;  right: 1%;  border-radius: 3px 0 0 3px; width: 0;   height: 0;   border-top: 20px solid transparent;  border-bottom: 20px solid transparent;  border-left: 18px solid #00B3A0;}
*/
.previous_btn {   border: solid #E49F15;  border-width: 0 3px 3px 0;  display: none;  padding: 9px;  transform: rotate(135deg);  -webkit-transform: rotate(135deg);left:5%; position:absolute}

.next_btn {  border: solid #E49F15;  border-width: 0 3px 3px 0;  display: none;  padding: 9px;  transform: rotate(-45deg);  -webkit-transform: rotate(-45deg); right:5%; position:absolute}



/* On hover, add a black background color with a little bit see-through */
.previous_btn:hover, .next_btn:hover { border-color: #fff;box-shadow:3px 3px 3px #000}	



#contslider{position:relative; overflow:hidden;height: 37.5vw}


/*image*/
.featuredpost article{overflow:hidden}
.featuredpost a img{transition: .75s ease;margin:0 auto;display:block}
.featuredpost a:hover img {	opacity: 1;	-webkit-animation: flash 1s;	animation: flash 1s; transform: scale(1.1)}

@-webkit-keyframes flash {	0% {		opacity: .4;	}	100% {		opacity: 1;	}}
@keyframes flash {	0% {		opacity: .4;	}	100% {		opacity: 1;	}}



#home-block1{margin-top:85px ;position:relative}


/*----------------------------services--------------------------------*/


.servicebanner{background:#040E27; height:223px;}
.home .listaservicios{margin-top: -120px;}



#servicies > img{margin:20px auto;display: block;padding:5px;box-sizing:border-box}

#serviciesint {display:flex;width:1300px;max-width:100%;flex-wrap:wrap;justify-content:center;margin: 20px auto;}
#serviciesint > div{width:240px; display:flex;flex-direction:column;align-items:center;margin: 20px ;} 
#serviciesint > div img{margin-bottom:10px}
/*designs */




#specialized {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/wp-content/uploads/2026/04/fondoazul.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  display: flex;
  position: relative;
  min-height: 500px;
  box-sizing: border-box;
  padding-bottom: 0;
  justify-content: flex-start;
  color: #fff;
  text-align: center;
}
#specilizedservices{margin:40px auto}
#specializedint{display:flex;flex-wrap: wrap;}
#specializedint > img{max-width:100%}
#specializedlist{max-width:670px;padding:10px;box-sizing:border-box;width:100%;display:flex;justify-content:flex-start;flex-wrap:wrap;text-align: left;}
#specializedlist .slist{width: 320px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;font-size:20px;margin: 10px 0;}

#specializedlist .slist > div{width:102px;display:flex;justify-content:center;align-items: center;
}
#specializedlist .slist  span{max-width:200px}
/*--------------- facilities ----------------*/

 
#mechanicalsoftware{display:flex;flex-wrap:wrap}
#mechanicalsoftware > div{width:100%}
#softwarebox{padding:40px 10px;box-sizing:border-box;background-color:#040E27;display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;color:#fff}
#mechanicalbox{padding:40px 10px;box-sizing:border-box;display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;}


.mechsoftbox {display:flex;flex-wrap:wrap;justify-content:center}
.mechsoftbox > div{margin:10px;display:flex;align-items:center;justify-content:center}
.mechsoftbox > div img{margin-right:10px;}
.mechsoftbox > div span{max-width:119px}

#capabilities{position:relative;width:!005; min-height:255px;background-color:#E49F15;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 10px;box-sizing:border-box}
	
#capabilities p{margin-top:20px;color:#fff;font-size:20px}
#capabilities::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Desplaza el triángulo hacia afuera (mitad de su altura) */
    left: 50%;
    transform: translateX(-50%);
    
    /* Construcción del triángulo con bordes */
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #d9991a; /* Debe ser el mismo color que el fondo de arriba */
    
    width: 0;
    height: 0;
    z-index: 10;
}

#mproducts{background-color:#040E27;color:#fff;font-size:20px}
#mproductsint{display:flex;flex-wrap:wrap;width:1300px;max-width:100%;padding:40px 10px;box-sizing:border-box;margin: 0 auto;justify-content:space-around}
#mproductsint > div{display:flex;flex-direction:column;align-items:center;width:400px;padding:5px;box-sizing:border-box}
#mproductsint > div h4{color:#E49F15;font-size:20px}
.mproductimg{height:270px;}

#facilitiestop img{ margin:20px auto;display:block;padding:5px;box-sizing:border-box}

.facilities{width:1540px;max-width:100%;padding:10px;box-sizing:border-box;margin:0 auto}
.facilitiet{display:flex;width:575px;max-width:100%;padding:10px;box-sizing:border-box;flex-wrap:wrap;justify-content:center}
.facilitiet > div{width:252px;margin: 12px;}
.facilitiet > div h4{background-color:#FFC400;width:100%;height:48px;margin:0;padding:5px;box-sizing:border-box;color:#001559;text-align:center;display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;margin-bottom: 15px;
}
#automaticintegration{display:flex;flex-wrap:wrap}

	#automaticintegration > div{margin:20px 0	}
#automaticintegration > div .titlebox{background:#1F283E;position:relative;height:162px;display:flex;align-items:center;padding: 30px;  box-sizing: border-box;}
#automaticintegration > div:first-child .titlebox:after {
    content: '';
  width: 0px;
  height: 0px;
  border-top: 162px solid #fff;
  border-left: 32px solid transparent;
  position: absolute;
  right: 0px;
  top: 0px;
  }
#automaticintegration > div:first-child .titlebox img{margin-left:auto;margin-right:3%}

#automaticintegration > div:last-child .titlebox:before {
    content: '';
  width: 0px;
  height: 0px;
  border-top: 162px solid #fff;
  border-right: 32px solid transparent;
  position: absolute;
  left: 0px;
  top: 0px;
  }
#automaticintegration > div:last-child .titlebox img{margin-right:auto;margin-left:3%}

 

#integrationportafolio{display:flex;flex-wrap:wrap;margin:30px auto;justify-content: center;}
.integrationitem {width: 195px;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;margin:20px auto}
.integrationitem > div{width:144px;height:104px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}

.integrationitem span{text-align:center}


#projectprocess {background-color:#F5F5F5}
#projectprocess img{margin:0 auto;display:block;padding:20px 10px;box-sizing:border-box}
#projectprocesstitulo{background-color:#1F283E;min-height:160px;width:100%;padding:10px;box-sizing:border-box;margin:0 auto}


#mainprojects{display:flex; flex-wrap:wrap;align-items:center;background:#f5f5f5;justify-content:center}
#mainprojectstext {display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/wp-content/uploads/2026/04/Grupo-4436.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
width:100%;
	max-width:100%;
  display: flex;
  position: relative;
  min-height: 500px;
  box-sizing: border-box;
  padding-bottom: 0;
  justify-content: flex-start;
  color: #00144B;
  text-align: center;
flex-direction:column;
	align-items:center;justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}
#mainprojectstext  img{margin-bottom:30px}

#mainprojectstext p{max-width:360px;margin:10px auto;text-align:center;font-size:20px}

#mainprojectstext a{background-color:#FFC400;height:60px;width:313px;padding:5px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;margin-top:30px}


.rl-basicgrid-gallery{width: 1420px;  margin: 0 auto;  justify-content: center; margin: 0 auto !important;}

#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item img{width: auto !important;  height: auto !important;  object-fit: none !important;}

#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item{width: auto !important;  display: flex;  align-items: center;  justify-content: center;padding: 15px;box-sizing:border-box;height: 100px !important;}




#why{background-color:#040E27;min-height:125px}
#whyint{width:1250px;max-width:100%;margin:0 auto;display:flex;justify-content:center;align-items:center;color:#fff;flex-wrap:wrap;font-size:20px;padding:10px;box-sizing:border-box}
#whyint h2{color:#FFC400;font-size:71px;margin:20px;width:390px;text-align:center}
#whyint span{margin:20px auto;display:flex;align-items:center;justify-content:center}


#ouradvantage{display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/wp-content/uploads/2026/05/Grupo-4532.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  display: flex;
  position: relative;
  min-height: 500px;
  box-sizing: border-box;
  padding-bottom: 0;
  justify-content: flex-start;
  color: #fff;
  text-align: center;
}

#ouradvantageint{color:#040E27;display: flex;  text-align: left;  align-items: center;  justify-content: center;width:1520px;width:100%;margin:0 auto;flex-wrap:wrap; padding:10px;box-sizing:border-box}
#ouradvantageint > img{margin:20px}
#ouradvantageint > div{padding:20px;box-sizing:border-box;width:780px;max-width:100%}
#ouradvantageint > div ul{margin-left:20px;padding-left:50px;box-sizing:border-box}
#ouradvantageint > div ul li{margin-bottom:15px;list-style:initial}


#ouradvantageint > div ul li::marker {  color: #E18C00;  font-size: 1.2em;}

#contactus{background:#040E27}


.rl-basicgrid-gallery{max-width:100% !important}


#getintouch{max-width:930px; margin: 0 auto;padding:10px;box-sizing:border-box}

#getintouch > div, #getintouch > div a{color:#fff}

#getintouch > div{padding:5px;box-sizing:border-box}

.forma p{display:flex;justify-content:space-between;margin-bottom:10px}


.forma  label{width:48%}
#getintouch > div:first-child p{color:#E18C00; font-size:17px;font-weight:600}

#getintouch > div:last-child {display:flex; flex-direction:column}
#getintouch > div:last-child img{margin-right:15px}
#getintouch > div:last-child > div{display: flex;align-items: center;margin-bottom: 39px;}

#getintouch > div:last-child > div a{font-weight:normal}

#getintouch > div:last-child  .telefono a:hover img,#getintouch > div:last-child  .email:hover img{filter: invert(88%) sepia(19%) saturate(7%) hue-rotate(116deg) brightness(99%) contrast(85%);}

#socialfooter a:hover{filter:  brightness(0) invert(1) }



#copyright{background-color:#002D81;width:100%;height:72px;display:flex;align-items:center;justify-content:center;color:#fff}



.mySlides {
    height: 520px; 
    overflow: hidden;
    position: relative;
}

.imagendebanner {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* 2. TABLETS Y ESCRITORIO PEQUEÑO: Entre 450px y 1024px */
/* (Aquí puedes decidir si mantener los 520px o usar un valor intermedio) */
@media screen and (min-width: 450px) {
    .mySlides {
        height: 752px; /* Valor opcional para tablets */
    }
}

/* 3. ESCRITORIO GRANDE: Arriba de 1024px */
@media screen and (min-width: 1024px) {
    .mySlides {
        height: 752px;
    }
}





.customtitulo{width:1150px;max-width:100%;padding:10px 20px;box-sizing:border-box;display:flex;justify-content:space-around;align-items:center;margin:0 auto;flex-wrap:wrap}
.customtitulo > img{padding:10px;box-sizing:border-box;}
.customtitulo > div{width:566px;max-width:100%;padding:10px 20px;box-sizing:border-box; border-left:none;padding-left:40px}


/*pages*//*posts*//*archive category*/





.archive .content,.error404 article .entry-content, .single article .entry-content, .page article .entry-content{max-width:1200px;margin:0 auto;padding:1em;width:100%;box-sizing:border-box}

.entry-header{background-color:#F5F5F5;padding:5px;box-sizing:border-box}
.entry-header h1{color: #E49F15;
  text-align: center;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;}
.entry-header h4{font-weight:normal;color:#00144B}


#bannerinternal{display:flex;flex-direction:column-reverse;margin-top:85px ;position:relative}

 

div.wpcf7-response-output {	margin: 2em 0.5em 1em;	padding: 0.2em 1em;	color:#fff; text-align:center;font-weight:900}
div.wpcf7-mail-sent-ok {background: #eb2f35;}
div.wpcf7-mail-sent-ng {background: #ff0000;}
div.wpcf7-spam-blocked {background: #ffa500;}
div.wpcf7-validation-errors {background: #f7e700;color:#000}


.wpcf7-submit{color:#040E27; background:#E18C00;width:200px;margin-left: auto;display: block;margin-top:10px;font-weight: bold;}
.wpcf7-submit:hover{background:#fff}


.wpcf7 form.invalid .wpcf7-response-output{background:#ffb900}
.wpcf7 form.sent .wpcf7-response-output {background:#46b450}


header{transition: all 0.5s ease-out}
header.sticky{position: fixed;top: 0;left: 0;right: 0;padding: 0;z-index:98;}	
/*full site*/
@media screen and (min-width: 900px) {
	
	
	
.previous_btn {   border: solid #E49F15;  border-width: 0 3px 3px 0;  display: none;  padding: 15px;  transform: rotate(135deg);  -webkit-transform: rotate(135deg);left:2%; position:absolute}

.next_btn {  border: solid #E49F15;  border-width: 0 3px 3px 0;  display: none;  padding: 15px;  transform: rotate(-45deg);  -webkit-transform: rotate(-45deg); right:2%; position:absolute}
	
	/*header*/
.headerdeart .radial-progress{top:15%;right:10%}	
	.site-header{background: none;position:relative;height:auto;margin-top:-70px}
	.site-header>.wrap{display:flex;align-items: flex-end;justify-content:center;height:160px;max-width:1300px;margin:0 auto}
	.header-widget-area{max-width:75%;width:100%}
.whatscel{margin-left:1em}
	.headermail img{margin-top:5px}
	/*logo*/
	.title-area {margin:0;background:transparent;max-width:25%; width: 100%;}
	.title-area img{max-height:100%}
	/*menu*/
	
	
	
	
	.mySlides .custom-html{ 
  bottom: 25%;
   }
	
	
	.site-container{margin-top: 142px;}
	
	
#social-container, #search-form-container{display:block}
	
	.mobmenu{display:none}
	.nav-primary { max-height: 100%;overflow:visible;margin-left:42px;position:relative;left:0;width:auto;top:0 }
	/*nav*/
	.nav-primary > ul{display:flex;flex-wrap:wrap;align-items: center;justify-content:space-around; }
	.nav-primary .wrap{display:flex;justify-content:flex-start;align-items:center;height:68px;max-width:66vw}
	.nav-primary .wrap>ul{display:flex;flex-wrap:wrap;justify-content:space-around;align-items: center;position:relative;z-index:10;background: none; }
	.nav-primary li a{color:#00144B}
	
	
	
	.nav-primary .wrap>ul>li{display:inline-block;padding:0.7em 0.5em;}
	
				
	
				.nav-primary li:hover > ul {display:block;}
			
			.nav-primary li ul li {	position:relative;}
			
			.nav-primary li ul li ul {right:-140px;	top:0px;}


	  #social-container {
    width: 66%;
    margin-left: auto;
  }
	
	  #social-container::before {
    content: '';
    width: 0px;
    height: 0px;
    border-bottom: 52px solid #00144B;
    border-left: 20px solid transparent;
    position: absolute;
    left: -19px;
    top: 0px;
  }
	
	
	#topsocial{display:flex;justify-content:flex-start;max-width:1280px;min-height:52px}
	#topsocial > div img{margin-right:10px}
	#topsocial > div{margin:0 20px}
	#topsocial > div, #topsocial > div a{display:flex;align-items:center; font-size:15px}
	#topsocial .direccion{max-width:560px;width:42%}	
	
	.wrapnav{display:flex;position:relative;height:68px}
	.wrapnavint{width:100%;max-width:1280px; display:flex;justify-content:space-around;align-items:center}
	
	.wrapnav:before{content: '';width: 0px;height: 0px;border-top: 68px solid #fff;border-right: 60px solid transparent;position: absolute;left: 0px;top: 0px;}
	
	
	.site-header > .wrap{padding:0}	
	
	
	
	
	.home .content-sidebar-wrap{margin-top:140px}
	
	
	
	#home-block1{margin-top:0}
	
	.bannerdesc {background:none; position:absolute;top:20%;z-index: 1; max-width: 26vw;  font-size: 1.25vw;left: 10vw;}
.bannerinfo a{ width:18vw;height:4.2vw;}
	
	/*servicios--------------------------------------------------------------------*/	
	
	
	.servicebanner h2{font-size:70px}
	
	
	.speservicesint{}
	.speservicesint h2{font-size:50px }
	
	.speservicesint > div{justify-content:left}
		#speservices {flex-direction:row;max-width: 1280px; margin:0 auto}
	#speservices >img{position: absolute;left: 39vw;bottom: -180px;z-index: 1;display: block;margin-bottom:0}
	#speservicescont{margin-right:auto;margin-left:0}
	
/*designs*/	
	
	#mechanicalsoftware > div{width:50%}
	
	
	
	  .facilities {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
		  align-items:center
  }
	
.facilitiet{justify-content:flex-start}	
	
	#automaticintegration{justify-content:space-between;flex-wrap:nowrap}
	
	#automaticintegration > div{width: calc(50% - 70px)	}
	
	#mainprojects{flex-wrap:nowrap;  }
	#mainprojectstext{width: 685px;max-width:50%; min-height: 666px;}
	
	
	
	#whyint{flex-wrap:nowrap}
	#ouradvantageint{flex-wrap:nowrap}
	
	#ouradvantageint > div ul{border-left:solid 1px #E18C00}
	
	
	  #getintouch {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px 0;
    box-sizing: border-box;
  }
	
	  #getintouch > div:first-child {
    padding-right: 8%;box-sizing: border-box;
  }
	  #getintouch > div {
    width: 50%;
  }
	
	
	
/*internal pages*/	
	#bannerinternal{display:flex;justify-content:center;flex-direction:row;margin-top:0}	
	
 

	.entry-header h1{font-size:2.5vw}
	.entry-header h4{font-size:1vw;max-width:50%}
	
	
	.customtitulo{flex-wrap:nowrap}
.customtitulo > div{ border-left: solid 1px #273A91;}
	
	@media screen and (min-width: 1920px) {	
	
		#topsocial > div, #topsocial > div a{font-size:1em}
	

	}

	
	
}



.animatable {
   opacity: 0;
  transition: opacity 100ms;

}

.animatable.zoomIn {opacity:1;  transform: scale3d(0.2, 0.2, 0.2);} 

.animatable.zoomOut {opacity:1;  transform: scale3d(1.25, 1.25, 1.25);}


/* show objects being animated */
.animatable.animated {

opacity: 1;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */


@keyframes bounce {
    20%,
    53%,
    80%,
    from,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}
.animated.bounce {
    animation: bounce  2s ease-in-out both;
    transform-origin: center bottom;
}
@keyframes flash {
    50%,
    from,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
.animated.flash {
    animation: flash 2s ease-in-out both;
}
@keyframes pulse {
    from,
    to {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
}
.animated.pulse {
    animation: pulse  2s ease-in-out both;
}
@keyframes rubberBand {
    from,
    to {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
}
.animated.rubberBand {
    animation: 2s ease-in-out both;
}
@keyframes shake {
    from,
    to {
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}
.animated.shake {
    animation: shake  2s ease-in-out both;;
}
@keyframes headShake {
    0% {
        transform: translateX(0);
    }
    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }
    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }
    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }
    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }
    50% {
        transform: translateX(0);
    }
}
.animated.headShake {
    animation-timing-function: ease-in-out;
    animation: 2s ease-in-out both;
}
@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }
    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}
.animated.swing {
    transform-origin: top center;
    animation: 2s ease-in-out both;
}
@keyframes tada {
    from,
    to {
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
}
.animated.tada {
    animation: 2s ease-in-out both;
}
@keyframes wobble {
    from,
    to {
        transform: none;
    }
    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
}
.animated.wobble {
    animation: wobble  2s ease-in-out both;
}
@keyframes jello {
    11.1%,
    from,
    to {
        transform: none;
    }
    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}
.animated.jello {
    animation: jello  2s ease-in-out both;
    transform-origin: center;
}
@keyframes bounceIn {
    20%,
    40%,
    60%,
    80%,
    from,
    to {
        animation-timing-function: cubic-bezier(0.215, 1, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
 
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.animated.bounceIn {
    animation: bounceIn  2s ease-in-out both;;
}
@keyframes bounceInDown {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    to {
        transform: none;
    }
}
.animated.bounceInDown {
    animation: bounceInDown  2s ease-in-out both;;
}
@keyframes bounceInLeft {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61,  0.25, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }
    75% {
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        transform: translate3d(5px, 0, 0);
    }
    to {
        transform: none;
    }
}
.animated.bounceInLeft {
    animation: bounceInLeft  2s ease-in-out both;;
}




@keyframes bounceInRight {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.25, 1);
    }
    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    to {
        transform: none;
    }
}
.animated.bounceInRight {
    animation: bounceInRight 4s ease-in-out both;
}
@keyframes bounceInUp {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }
    75% {
        transform: translate3d(0, 10px, 0);
    }
    90% {
        transform: translate3d(0, -5px, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.animated.bounceInUp {
    animation: bounceInUp  2s ease-in-out both;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.animated.fadeIn {
    animation: fadeIn  1s ease-in-out both;
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animated.fadeInDown {
    animation: fadeInDown 1s ease-in-out both;
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animated.fadeInLeft {
    animation: fadeInLeft  1s ease-in-out both;
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animated.fadeInRight {
    animation: fadeInRight  1s ease-in-out both;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animated.fadeInUp {
    animation: fadeInUp  1s ease-in-out both;
}
@keyframes lightSpeedIn {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
.animated.lightSpeedIn {
    animation: lightSpeedIn  2s ease-in-out both;
    animation-timing-function: ease-out;
}
@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        transform-origin: center;
        transform: none;
        opacity: 1;
    }
}
.animated.rotateIn {
    animation: rotateIn  1s ease-in-out both;
}
@keyframes rotateInDownLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1;
    }
}
.animated.rotateInDownLeft {
    animation: rotateInDownLeft  1s ease-in-out both;
}
@keyframes rotateInDownRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1;
    }
}
.animated.rotateInDownRight {
    animation: rotateInDownRight  1s ease-in-out both;
}
@keyframes rotateInUpLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1;
    }
}
.animated.rotateInUpLeft {
    animation: rotateInUpLeft  1s ease-in-out both;
}
@keyframes rotateInUpRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }
    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1;
    }
}
.animated.rotateInUpRight {
    animation: rotateInUpRight  1s ease-in-out both;
}
@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animated.rollIn {
    animation: rollIn  2s ease-in-out both;
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale3d(1.25, 1.25, 1.25);
		
    }
    100% {
        opacity: 1;
		 transform: scale3d(1, 1, 1);
		
    }
}

.animated.zoomOut {

	
    animation: zoomOut 1s cubic-bezier(1, 0, 0.7, 1) 0.125s 1 normal forwards running; overflow:hidden;
	
}


@keyframes zoomIn {
 from {
        opacity: 0;
       transform: scale3d(0.2, 0.2, 0.2);
		animation-delay:3s
    }
 
 
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
	
   

	
}
.animated.zoomIn {
	 
  overflow:hidden;position:relative;
	 animation: bounceIn  2s ease-in-out both;;
	
}
@keyframes zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animated.zoomInDown {
    animation: zoomInDown  2s ease-in-out both;
}
@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animated.zoomInLeft {
    animation: zoomInLeft  2s ease-in-out both;
}
@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animated.zoomInRight {
    animation: zoomInRight  2s ease-in-out both;
}
@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.animated.zoomInUp {
    animation: zoomInUp  2s ease-in-out both;
}
@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.animated.slideInDown {
    animation: slideInDown  1s ease-in-out both;
}
@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.animated.slideInLeft {
    animation: slideInLeft  1s ease-in-out both;
}
@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.animated.slideInRight {
    animation: slideInRight  1s ease-in-out both;
}
@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
.slideInUp {
    animation: slideInUp  1s ease-in-out both;
}