/** FONTS **/
/**
Ubuntu:
Ubuntu-Bold:
Ubuntu-BoldItalic:
Ubuntu-Italic:
Ubuntu-Medium:
Ubuntu-MediumItalic:
**/
@font-face{
    font-family: 'Ubuntu';
    src: url('fonts/JosefinSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face{
    font-family: 'Ubuntu';
    src: url('fonts/JosefinSans-SemiBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face{
    font-family: 'Ubuntu';
    src: url('fonts/JosefinSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face{
    font-family: 'Ubuntu';
    src: url('fonts/JosefinSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
body{
    overflow-x:hidden;
}
body{
    font-family: Ubuntu, sans-serif, Arial;
    font-size: 16px;
}
section,article{
    overflow: hidden;
    display:block;
    width: 100%;
}
footer{
    width:100%;
}
/** NAVIGATION **/

.main-menu{
    position:fixed;
    z-index: 20;
    top: 0;
    width: 100%;
    padding-top: 5px;
}
    .main-menu img{
        display: block;
    }
    
    .main-menu .header{
        width: 730px;
        margin: 0 auto;
        position: relative;
    }
   
    @media screen and (max-width: 802px) {
        .main-menu .header{
            width: 90%;
        }
    }
    .main-menu h1{
        display: block;
        margin: 0;
        padding: 0;
    }
    .main-menu .main-logo{
        width: 30%;
    }
    .main-menu .social-wrapper{
        position: absolute;
        top: 75%;
        left: 0;
        right: 0;
        z-index: 20;
        text-align: center
    }
    .main-menu .social-links{
        display: inline-block;
        vertical-align: baseline;
    }
    .social-links .sprite-icons{
        float:left;
        margin: 3px;
        -webkit-opacity: 0.5;
        -o-opacity: 0.5;
        -moz-opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        opacity: 0.5;
    }
    .social-links .sprite-icons:hover,
    .social-links .sprite-icons:active,
    .social-links .sprite-icons:focus{
        -webkit-opacity: 1;
        -o-opacity: 1;
        -moz-opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    .main-menu nav{
        position: absolute;
        width: 74.65%;
        height: 56%;
        left: 25%;
        top:16.6%;
        background: url(../img/degradados/cinta1.png) no-repeat center center transparent;
        background-size: 100% 100%; 
        /*margin: 25px 0 0 8px;*/
    }
    @media screen and (min-width: 700px) and (max-width:799px){
        .main-menu nav{
            font-size:0.9em;
        }
    }
    @media screen and (min-width: 600px) and (max-width:699px){
        .main-menu nav{
            font-size:0.8em;
        }
    }
    @media screen and (min-width: 500px) and (max-width:599px){
        .main-menu nav{
            font-size:0.7em;
        }
    }
    @media screen and (min-width: 480px) and (max-width:499px){
        .main-menu nav{
            font-size:0.6em;
        }
    }
    .main-menu ul{
        margin: 0;
        padding: 0 5% 0 9%;
        overflow: hidden;
    }
    .main-menu li{
        float:left;
    }
    .main-menu li a{
        display: block;
        color: #fff;
        padding: 2.5em 0.3em 0 0.3em;
        text-decoration: none;
        font-weight: bold;
        background: url(../img/icons/menu_point.png) center -2.5em no-repeat transparent;
        background-size: 0.75em 1.125em;
        transition: background-position .3s;
        -webkit-transition: background-position .3s;
    }
	
	.menu li a{
        display: block;
        text-decoration: none;
        font-weight: bold;
        background: url(../img/icons/menu_camion.png) left  no-repeat transparent;
        background-size: 1.75em 1.155em;
		background-position:125% 0%;
        transition: background-position .4s;
        -webkit-transition: background-position .4s;
		-webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
    }
    .menu li a:hover, 
    .menu li a:focus,
    .menu li.active a{
        background-position: 80% 0%;
    }
	
	.main-menu li a:hover, 
    .main-menu li a:focus,
    .main-menu li.active a{
        color: #B8D875;
        background-position: center 1.125em;
    }
    .left-panel{
        position: absolute;
        top: 100%;
        right: 0;
		 margin-top: 100px !important;
    }
    .curioso{
        width: 116px;
        height:74px;
        display:block;
        overflow:hidden;
        position:relative;
    }
    .curioso .liston{
        position:absolute;
        bottom:0;
        right:0;
        z-index: 20;
    }
    .curioso .human{
        position:relative;
        left:17px;
        top:24px;
        -webkit-animation:curanim 3s linear infinite;
        -moz-animation:curanim 3s linear infinite;
        -o-animation:curanim 3s linear infinite;
        -ms-animation:curanim 3s linear infinite;
        animation:curanim 3s linear infinite;
    }
    .sec-menu{
        margin: 20px 10px 0 0 !important;
        padding:11px 0 0 11px;
        float:right;
        clear: both;
        cursor:pointer;
        display:block;
        -moz-opacity:0.5;
        -webkit-opacity:0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        opacity: 0.5;
    }
    .sec-menu:hover{
        -moz-opacity:1;
        -webkit-opacity:1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    .sec-menu-item{
        margin: 0 11px 11px 0;
    }
/** SECTION 1 **/
#top-space{
    background: url(../img/fondos/sky-1.png) repeat-x 50% 0 fixed #1A7298;
    position: relative;
    overflow: hidden;
    height:1504px;
}
    .slogan{
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        z-index: 5;
        margin-top: 70px !important;
    }
    #top-space .world-space{
        position: absolute;
        background: url(../img/world.png) no-repeat 50% 0 fixed;
        width: 100%;
        height: 100%;
        z-index: 3;
    }
    .satellite{
        position: absolute;
        background: url(../img/satellite.png) no-repeat 20% 0 fixed;
		background-size:40% auto;
        width: 100%;
        height: 100%;
        z-index: 4;
    }
    .stars{
        position: absolute;
        background: url(../img/fondos/stars.png) repeat 50% 0 fixed;
        width: 100%;
        height: 100%;
        z-index: 2; 
    }

    #middle-space{
        position:relative;
        overflow: hidden;
        height: 290px;
        background: url(../img/fondos/stars.png) repeat 50% 0 #18688B fixed;
        z-index: 4;
    }
    #middle-space .world-space{
        position: absolute;
        background: url(../img/world.png) no-repeat 50% 0 fixed;
        background-size: 600px;
        width: 100%;
        height: 100%;
        z-index: 3;
    }
    #ocean{
        position:relative;
        overflow: hidden;
        height: 400px;
        background: url(../img/mapa-marsan.png)  no-repeat 100% 0 fixed;
        z-index: 4;
	background-size:contain;
    }
    #middle-space .world-space2{
        position: absolute;
        background: url(../img/mapa-marsan.png)  no-repeat 100% 0 fixed;
        background-size: 100%;
        width: 100%;
        height: 100%;
        z-index: 3;
    }
    #campo{
        position: relative;
        overflow: hidden;
        height: 488px;
        background: url(../img/fondos/campo.png) repeat-x 50% 0 #749f2c;
    }
    .section1 #what-do-we-do{
        position: absolute;
        z-index: 6;
        top: 778px;
    }
    .small-road{
        width: 44px;
        height: 488px;
        background: url(../img/fondos/miniRoad.png) repeat-y 0 0 transparent;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    #small-mobile{
        background: url(../img/vehicles/small.png) no-repeat 50% 50% transparent fixed;
        z-index: 3;
    }
    .small-tunel{
        width: 108px;
        height: 137px;
        background: url(../img/fondos/smallTunel.png) no-repeat 0 0 transparent; 
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4;
    }
/** SECTION 2 **/
.section2{
    background: url(../img/fondos/seccion1.png) repeat-x 50% 0 #749F2C;
	/**background-size:100% 100%;**/
    position: relative;
    overflow: hidden;
}
    .section2 .ratio:after{
        padding-top: 555.3%; /* (4918 / 1024 * 100) */
    }
    .section2 #transportistas{
        position: absolute;
        top: 4%;
        z-index: 9;
    }
    .section2 #logo-tractor{
        position: absolute;
        right: 2.15%;
        top: 8.68%;
    }
    .section2 #logo-grua{
        position: absolute;
        top: 25%;
        right: 0.5%;
    }
    .section2 #logo-volteo{
        position: absolute;
        top: 48%;
        right: 0.5%;
    }
    .section2 #primary-mobile{
        z-index: 2;
        top:0;
        background: url(../img/vehicles/primary.png) no-repeat 50% 50% transparent ;
        width: 100%;
        height: 100%;
		background-attachment: fixed, scroll;
    }
    .section2 #gas-mobile{
        position:absolute;
        z-index: 2;
        background: url(../img/vehicles/gas2.png) no-repeat 50% 0 transparent;
        width: 100%;
        height: 100%;
		left:-32%;
    }

	.section2 #gas-mobile2{
        position:absolute;
        z-index: 2;
        background: url(../img/vehicles/trailer2.png) no-repeat 50% 0 transparent;
        width: 100%;
        height: 100%;
		left:-32%;
    }
	
	.section2 #mono-orde{
        position:absolute;
        z-index: 2;
        background: url(../img/sprites/mono-orde.png) no-repeat  transparent;
        width: 100%;
        height: 100%;
		background-size:4%;
		left:27%;
		top: 41.8%;
    }
	
	.section2 #peso-mobile{
        position:absolute;
        z-index: 2;
        background: url(../img/vehicles/gondola.png) no-repeat 50% 0 transparent;
        width: 100%;
        height: 100%;
		background-size:13.5% auto;
		left:26.4%;
    }
	
    .section2 #tractor-mobile{
        background: url(../img/sprites/trailer5.png) no-repeat  transparent;
       background-size: 100%;
        width: 25.68359375%;
        height: 3.029686864579097%;
        top: 58.8%;
        z-index: 2;
        position:absolute;
    }
    .section2 #tractor-mobile .cyd-logo{
        position:absolute;
        right: -10px;
        bottom: -10px;
    }
    .section2 #trailer-mobile{
        background: url(../img/sprites/trailer3.png) no-repeat  transparent;
        background-size: 100% ;
        width: 69.3359375%;
        height: 2.419682797885319%;
        top: 48.6%;
        z-index:4;
        position:absolute;
    }
    .section2 #trailer-mobile .cyd-logo{
        position:absolute;
        left: 16px;
        top: -16px;
    }
    .section2 #revolvedora{
        background: url(../img/revolvedora.gif) no-repeat 0 0 transparent;
        background-size: 100% 100%;
        width: 34.15%;
        height: 9.14%;
        top: 36.9%;
        right:6.5%;
        z-index:2;
        position:absolute;
    }
    .section2 #revolvedora .cyd-logo{
        position:absolute;
        top:65%;
        left:0;
    }
    .section2 #wood-mobile{
        background: url(../img/sprites/trailer6.png) no-repeat  transparent;
		background-size:100% 100%;
		width: 12.40703125%;
        height: 8.358723058153721%;
        left:79.8%;
        z-index:2;
        position:relative;
    }
    .section2 #wood-mobile .cyd-logo{
        position:absolute;
        top:20%;
        left:0;
    }
    .section2 #disel-mobile{
        background: url(../img/sprites/trailer7.png) no-repeat transparent;
		background-size:100% 100%;
        width: 11.42578125%;
		height: 7.035380235868239%;
        left:80.5%;
        z-index:2;
        position:relative;
    }	
	
    .section2 #disel-mobile .cyd-logo{
        position:absolute;
        top:20%;
        left:0;
    }
    .section2 #sensordigital{
        position:absolute;
        top:18%;
        left:0;
        right:0;
        margin:auto;
        width:26%;
        z-index:3;
    }
    .section2 #puente{
        position:absolute;
        background: url(../img/fondos/puente.png) repeat-x 0 0 transparent;
        background-size: auto 100%;
        top:47.4%;
        left: 0;
        width:100%;
        height:4.35%;
        z-index: 3;
    }
    .section2 #big-tunnel{
        top: 0;
        z-index: 3;
        background: url(../img/fondos/big-tunnel.png) no-repeat 0 0 transparent;
        background-size: 100% 100%;
        width: 69.8%;
        height: 2.8%;
    }
    .section2 #ralert-low-gas,
    .section2 #ralert-full-gas,
    .section2 #ralert-parkedtime-over,
    .section2 #ralert-batery,
    .section2 #ralert-detect-units{
        position: absolute;
        left:8%;
    }
	.section2 #ralert-speedlimit{
        position: absolute;
        right:28%;
    }
    .section2 #ralert-low-gas{
        top:13%;
    }
    .section2 #ralert-full-gas{
        top:28%;
    }
    .section2 #ralert-parkedtime-over{
        top:45%;
    }
    .section2 #ralert-batery{
        top:62%;
    }
    .section2 #ralert-detect-units{
        top:69.5%;
    }
    .section2 #ralert-speedlimit{
        top:94%;
    }
    
    .section2 #puralert-disel{
        position: absolute;
        top: 38%;
        left: 19%;
    }
    .section2 #puralert-truetime{
        position:absolute;
        top:64.4%;
        left:18.8%;
    }
	
	.section2 #puralert-peso{
        position:absolute;
        top:64.4%;
        left:72.8%;
    }
    .section2 #puralert-rutecontrol{
        position:absolute;
        top:87.8%;
        left:18.7%;
    }

    .section2 #balert-entregas{
        position:absolute;
        top:44%;
        right:13%;
    }
    .section2 #balert-productivity{
        position: absolute;
        top:55.9%;
        left:13.7%;
    }
    .section2 #balert-rutes{
        position:absolute;
        top:48.4%;
        right:13.3%;
    }
    .section2 #balert-report-each{
        position:absolute;
        top:71.4%;
        right:14.7%;
    }
    .section2 #balert-food{
        position:absolute;
        top:82%;
        right:10.7%;
    }
    .section2 #balert-fuel{
        position:absolute;
        top:95%;
        right:10.7%;
    }
/** SECTION 2 **/
.section25{
    background: url(../img/fondos/seccion2.png) repeat-x 50% 0  #E6EBE0;

    position: relative;
    overflow: hidden;
}
 .section25 #puente2{
        position:absolute;
        background: url(../img/fondos/puente.png) repeat-x 0 0 transparent;
        background-size: auto 100%;
        top:0%;
        left: 0;
        width:100%;
        height:10.35%;
        z-index: 3;
    }
.section25 .ratio:after{
        padding-top: 297.4%; /* (4918 / 1024 * 100) */
    }
.section25 #car-purple{
        background: url(../img/vehicles/thermo1.png) no-repeat 42% 50% transparent fixed;
        width: 100%;
        height: 100%;
        z-index:2;
        position:absolute;
    }
	 .section25 .semaforo{
        position:absolute;
        width:20.1171875%;
        height: 1.2%;
        background: url(../img/semaforo.png) no-repeat 0 0 transparent;
        background-size: 100% auto;
        z-index:3;
    }
    .section25 #semaforo1{
        top:12.699266055045872%;
        left:21.8796875%;
    }
    .section25 #semaforo2{
        top:38.38%;
        left:21.6796875%;
    }
    .section25 #semaforo3{
        top:59.68%;
        left:21.6796875%;
    }
	.section25 #puertas{
        background: url(../img/aberturapuerta.gif) no-repeat 0 0 transparent;
        background-size: 100% 100%;
        width: 26.85%;
        height: 13.44%;
        top: 64.9%;
        right:8.1%;
        z-index:2;
        position:absolute;
    }
	.section25 #thermo-mobile{
        background: url(../img/vehicles/thermo2.png) no-repeat transparent;
		background-size:100% 100%;
        width: 25.42578125%;
		height: 4.035380235868239%;
		top:35.78%;
        left:52.5%;
        z-index:2;
        position:absolute;
    }
	
	.section25 #thermo-mobile2{
        background: url(../img/vehicles/thermo3.png) no-repeat transparent;
		background-size:100% 100%;
        width: 25.42578125%;
		height: 4.035380235868239%;
		top:78.98%;
        left:69.5%;
        z-index:2;
        position:absolute;
    }
	
	.section25 #thermo-mobile3{
        background: url(../img/vehicles/thermo4.png) no-repeat transparent;
		background-size:100% 100%;
        width: 25.42578125%;
		height: 4.035380235868239%;
		top:90.98%;
        left:69.5%;
        z-index:2;
        position:absolute;
    }
	
	.section25 #distribuidora{
        background: url(../img/fondos/distribuidora.png) no-repeat transparent;
		background-size:100% 100%;
        width: 41.52578125%;
		height: 22.035380235868239%;
		top:76.58%;
        left:92%;
        z-index:3;
        position:absolute;
    }
	 .section25 #ralert-opendoor{
        position:absolute;
        top:70%;
        right:28%;
    }
	
	 .section25 #puralert-thermo{
        position: absolute;
        top: 38%;
        right: 19%;
    }

	.section25 #puralert-entregas{
        position: absolute;
        top: 60%;
        left: 14%;
    }
	
	.section25 #puralert-distribuidora{
        position: absolute;
        top: 85%;
        right: 14%;
    }
	 .section25 #ad-mobile{
        background: url(../img/sprites/cars.png) no-repeat 82.4% 0 transparent;
        background-size: 592.1259842519685% 100%;
		width: 13.4%;
		height: 8.62%;
		left: 56.64%;
		z-index: 2;
		position: absolute;

    }
	    .section25 #taxi-car{
        background: url(../img/sprites/cars2.png) no-repeat 100% 0 transparent;
        background-size: 687.565% 133.03%;
        width:18.85%;
        height:3.87%;
        top:53.8%;
        z-index:2;
        position:absolute;
    }
/** SECTION 3 **/
.section3{
    background: url(../img/fondos/seccion3.png) repeat-x 52% 0 #E6EBE0;
    position: relative;
    overflow: hidden;
}
.section3 #puente3{
        position:absolute;
        background: url(../img/fondos/peatonal.png) repeat-x 0 0 transparent;
        background-size: 100% auto;
        top:0%;
        left: 0;
        width:100%;
        height:10.35%;
        z-index: 3;
    }
    .section3 .ratio:after{
        padding-top: 285.78125%; /* (4360 / 1024 * 100) */
    }
    .section3 #flotillas{
        position: absolute;
        top: 6.7%;
        z-index: 9;
    }
    .section3 #logo-hotdogs{
        position: absolute;
        left: 0;
        top: 2.8%;
    }
    .section3 #logo-parquedcar{
        position: absolute;
        top: 29%;
        right: 20.21484375%;
    }
    .section3 #logo-sos{
        position: absolute;
        top: 64.5%;
        left: 17.578125%;
    }
    .section3 #logo-parkedtaxi{
        position:absolute;
        top:88%;
        right:36.1328125%;
    }
    .section3 #logo-mechanics{
        position:absolute;
        top:51.8%;
        right:3.5%;
    }

   
    .section3 #ralert-maintenance{
        position:absolute;
        top:18%;
        left:7%;
    }
    .section3 #ralert-sos-button{
        position:absolute;
        top:45%;
        left:8%;
    }
    .section3 #ralert-inout{
        position:absolute;
        top:77.2%;
        left:8%;   
    }

    .section3 #puralert-maintenance{
        position:absolute;
        top:28%;
        right:19.1%;
    }
    .section3 #puralert-sitecontrol{
        position:absolute;
        top:75.8%;
        right:19.1%;
    }

    .section3 #balert-detect-rutes{
        position:absolute;
        top:48.4%;
        right:37.6%;
    }
    .section3 #balert-coverage{
        position:absolute;
        top:62.2%;
        right:37.5%;
    }

    .section3 #car-purple{
        background: url(../img/vehicles/purple_car.png) no-repeat 50% 50% transparent fixed;
        width: 100%;
        height: 100%;
        z-index:2;
        position:absolute;
    }
    .section3 #car-red{
        background: url(../img/sprites/cars.png) no-repeat 17.5% 0 transparent;
        background-size: 671.4285714285714% 123.1155778894472%;
        width: 10.9375%;
        height: 6.264%;
        left:55%;
        z-index:2;
        position:absolute;
    }
    .section3 #moto-vehicle{
        background: url(../img/sprites/cars.png) no-repeat 32.5% 0 transparent;
        background-size: 1193.650793650794% 176.2589928057554%;
        width: 6.15%;
        height: 4.188%;
        left:56.64%;
        z-index:2;
        position:absolute;
    }
    .section3 #moto-vehicle .cyd-logo{
        position:absolute;
        bottom:0;
        left:100%;
    }
    .section3 #car-blue{
        background: url(../img/sprites/cars.png) no-repeat 44.8% 0 transparent;
        background-size: 683.636% 131.016%;
        width: 10.742%;
        height: 6.289%;
        left:56.64%;
        z-index:2;
        position:absolute;
    }
    .section3 #van-purple{
        background: url(../img/sprites/cars.png) no-repeat 62.6% 0 transparent;
        background-size: 642.735% 116.114%;
        width: 11.428%;
        height: 6.84%;
        left:56.64%;
        z-index:2;
        position:absolute;
    }
    .section3 #van-purple .cyd-logo{
        position:absolute;
        top:40%;
        left:0;
    }
   
    .section3 #ad-mobile .cyd-logo{
        position:absolute;
        top:40%;
        left:0%;
    }
    .section3 #car-dark-blue{
        background: url(../img/sprites/cars.png) no-repeat 100% 0 transparent;
        background-size: 677.47% 123.115%;
        width: 10.9375%;
        height: 4.564%;
        right:33%;
        z-index:2;
        position:absolute;
    }
    .section3 #green-car{
        background: url(../img/vehicles/coche2.png) no-repeat 0 0 transparent;
        background-size: 100% auto;
        width:16.6%;
        height:4.73%;
        top:94.19%;
        z-index:2;
        position:absolute;
    }

	.section3 #autobus-orange{
        background: url(../img/vehicles/autobus.png) no-repeat 0 0 transparent;
        background-size: 100% auto;
        width:35.6%;
        height:17.73%;
        top:82.39%;
        z-index:2;
        position:absolute;
    }

    .section3 #green-tape{
        text-shadow:0 -1px 1px rgba(0,0,0,.2);
        color:#FFF;
        background: url(../img/degradados/green-tape.png) no-repeat;
        background-size: 100% 100%;
        position:absolute;
        bottom:1%;
        width: 77.44%;
        z-index: 3;
        vertical-align: middle;
        table-layout: fixed;
    }
    .section3 #green-tape .left-cell{
        padding-left: 5.41%;
    }
    .section3 #green-tape .right-cell{
        padding-right: 5.41%;
    }
    .section3 #green-tape h3{
        font-size: 2.4375em;
        margin:0;
    }
    .section3 #green-tape ul{
        padding:0 0 0 30px;
        margin:.8em 0;
        line-height:1.3em;
        font-size:1.25em;
    }
    .section3 .semaforo{
        position:absolute;
        width:20.1171875%;
        height: 1.8%;
        background: url(../img/semaforo.png) no-repeat 0 0 transparent;
        background-size: 100% auto;
        z-index:3;
    }
    .section3 #semaforo1{
        top:6.919266055045872%;
        left:22.4796875%;
    }
    .section3 #semaforo2{
        top:51.68%;
        left:22.4796875%;
    }
    .section3 #semaforo3{
        top:70.58%;
        left:21.6796875%;
    }
/** SECTION 4 **/
.section4{
    background-color: #749F2C;
    padding: 200px 0;
    position:relative;
}
.section4 .road1{
    position:absolute;
    top:0;
    left:0;
    height:164px;
    width:1681px;
    background: url(../img/fondos/carreteras1.png)
}
.section4 .road2{
    position:absolute;
    bottom:20px;
    left:0;
    right:0;
    margin:auto;
    height:128px;
    width:1681px;
    background: url(../img/fondos/carreteras2.png)
}
.section4 .purple-tape{
    background: url(../img/degradados/purple-tape.png) no-repeat transparent;
    background-size: 100% 100%;
    padding: .5em 4.35%;
    width:80%;
    margin:0 auto;
}
.section4 .purple-tape h3{
    text-shadow:0 -1px 1px rgba(0,0,0,.2);
    font-weight: normal;
    color:#FFF;
    font-size: 2.125em;
    text-align: center;
    margin:0;
}
.icon-sol{
    display:block;
    width:182px;
    height:172px;
    display:inline-block;
    margin: 32px 23px 0 23px;
    position:relative;
}
.icon-sol .icon-sol-ventas,
.section4 .icon-sol-logistica,
.section4 .icon-sol-reparto,
.section4 .icon-sol-direccion,
.section4 .icon-sol-admon,
.section4 .icon-sol-seguridad,
.section4 .icon-sol-mantenimiento{
    background: url(../img/icons/soluciones.png) no-repeat transparent;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.icon-sol:hover .icon-sol-ventas,
.icon-sol:hover .icon-sol-logistica,
.icon-sol:hover .icon-sol-reparto,
.icon-sol:hover .icon-sol-direccion,
.icon-sol:hover .icon-sol-admon,
.icon-sol:hover .icon-sol-seguridad,
.icon-sol:hover .icon-sol-mantenimiento{
    display:none;
}
.icon-sol-wrap{
    text-align: center;
}
.section4 .icon-sol-ventas{
    background-position: 0 0;
}
.section4 .icon-sol-logistica{
    background-position: -182px 0;
}
.section4 .icon-sol-reparto{
    background-position: -364px 0;
}
.section4 .icon-sol-direccion{
    background-position: -546px 0;
}
.section4 .icon-sol-admon{
    background-position: 0 -174px;
}
.section4 .icon-sol-seguridad{
    background-position: -182px -173px;
}
.section4 .icon-sol-mantenimiento{
    background-position: -364px -172px;
}
/** SECTION 5 **/
.section5{
    color: #FFF;
    text-align: center;
    overflow:visible;
    /*height: 700px;*/
    padding-top:10px;
}
    .section5 .band,
    .section5 .offer{
        background: #9DCC42;
        font-size: 2em;
        padding: 36px 0;
    }
    .section5 .band p,
    .section5 .offer p{
        margin:0;
    }
    .section5 .band{
        position:absolute;
        left:0;
        right:0;
        top:10px;
        z-index:5;
    }
    .section5 .offer{
        position:relative;
        z-index:6;
    }
    .sad{
        background: url(../img/sprites/sprite6.png) no-repeat -32px 0 transparent;
        width:90px;
        height: 90px;
        display: block;
        margin:5px auto;
    }
    .happy{
        background: url(../img/sprites/sprite6.png) no-repeat -122px 0 transparent;
        width:90px;
        height: 90px;
        display: block;
        margin:5px auto;
    }
    .section5 .solutions{
        padding-top: 1.4em;
        font-size: 0.95em;
        color: #690965;
        position:relative;
    }
    .solutions .icon-wrap{
        display: inline-block;
        padding-top: 50px;
        position: relative;
        min-width: 90px;
        margin: 0 0.625em 1.4em 0.625em;
        transition: all .3s;
    }
    .icon-wrap .icon-solutions{
        position: absolute;
        top: 0;
    }
    /** SECTION 6 **/ 
    .section6{
        color: #FFF;
        text-align: center;
    }
    
    
    .testimonios{
        padding: 1em 0;
    }
    .testimonios h2{
        margin: 0 0 0.2em 0;
    }
    .testimonios table{
        width: 80%;
        margin: 0 auto;
        table-layout: fixed;
    }
    .testimonios td{
        vertical-align: top;
    }
    .testimonios-arrow{
        width: 2.5em;
    }
    .testimonios-arrow-btn{
        display: block;
        padding: 0.625em;
    }
    #testimonios-slider .slide{
        height: 80px;
    }
    .testimonios-wrap{
        padding: 0 50px;
    }
    .icon-clients-iso .title-box{
        top: 150%;
        left: -100%;
    }
    .map{
        height: 432px;
        position:relative;
    }
    .map-buttons{
        padding: 11em 0 0 0;
        border-bottom: 13px solid #690965;
    }
    .map-buttons button{
        margin: .5em .5em 0 .5em;
    }
    .map-description{
        background-color: #923789;
        font-size: 1.25em;
        padding: .8em;
    }
    #map-leon{
        height:436px;
        background: url(../img/mapa.png) no-repeat center center;
        position:relative;
    }
    #map-republic{
        height:436px;
        background: url(../img/republic-a.png) no-repeat center center;
        position:relative;
    }
    #map-leon-point{
        position:absolute;
        left:40%;
        top:160px;
        margin-left:65px;
    }
    #map-rep-point1{
        position:absolute;
        left:50%;
        top:265px;
        margin-left:-130px;
        cursor:pointer;
    }
    #map-rep-point2{
        position:absolute;
        left:50%;
        top:290px;
        margin-left:-100px;
        cursor:pointer;
    }
    #map-rep-point3{
        position:absolute;
        left:50%;
        top:309px;
        margin-left:-56px;
        cursor:pointer;
    }
    #support-tel-leon{
        position:absolute;
        top:32px;
        left:32px;
		z-index:7;
    }
    #support-tel-rep{
        position:absolute;
        top:32px;
        right:32px;
    }
    .support-box{
        padding: .8em .8em .8em 65px;
    }
    .support-box h4{
        margin:0;
        font-size: 1.25em;
        font-weight: normal;
        white-space:nowrap;
    }
    .support-box span{
        font-size: 1.8em;
        font-weight: normal;
        white-space:nowrap;
    }
    .support-tel-icon{
        background:url(../img/icons/ayuda.png) no-repeat  transparent;
		background-size:100% auto;
        position:absolute;
        top:0;
        bottom:0;
        margin:auto;
        left:10px;
        width: 40px;
        height:38px;
    }

/** SPRITES **/
.sprite-icons{
    width:36px;
    height:36px;
    display: block;
    background: url(../img/sprites/icons.png) no-repeat transparent;
}
.fb-icon{
    background-position: 0 0;
}
.fb-icon:active{
    background-position: 0 -36px;
}
.tw-icon{
    background-position: -36px 0;
}
.tw-icon:active{
    background-position: -36px -36px;
}
.mail-icon{
    background-position: -72px 0;
}
.mail-icon:active{
    background-position: -72px -36px;
}
.icon-logo{
    background-position: 0px -73px;
}
.incognita-icon{
    background-position: -108px 0;
}
.icon-home{
    display:block;
    width:22px;
    height:18px;
    background: url(../img/sprites/icons.png) no-repeat -108px -36px transparent;
}

.cyd-logo{
    display: block;
    height: 40px;
    width: 40px;
	z-index: 5;
}
.cyd-logo-medium{
    display: block;
    height: 40px;
    width: 40px;
    z-index: 5;
}
.cyd-logo-small{
    display: block;
    height: 28px;
    width: 28px;
    z-index: 5;
}
.icon-solutions{
    background: url(../img/icons/purple_icons.png) no-repeat transparent;
    width: 45px;
    height: 45px;
    display: block;
}
.icon-solutions.applications{
    background-position: 0px 0px;
}
.icon-solutions.support{
    background-position: -45px 0px;
}
.icon-solutions.proyection{
    background-position: -90px 0px;
}
.icon-solutions.solution{
    background-position: -135px 0px;
}
.icon-solutions.control{
    background-position: -180px 0px;
}
.icon-solutions.savings{
    background-position: -225px 0px;
}
.icon-solutions.security{
    background-position: -270px 0px;
}

.icon-clients{
    background: url(../img/sprites/clientes.png?v=12) no-repeat transparent;
    height: 40px;
    display: inline-block;
    margin: 1em .5em 0 .5em;
}
.icon-clients-canacar{
    background-position: 0 0;
    width: 124px;
}
.icon-clients-telcel{
    background-position: -133px 0;
    width: 116px;
}
.icon-clients-inegi{
    background-position: -249px 0;
    width: 122px;
}
.icon-clients-prezi{
    background-position: -371px 0;
    width: 88px;
}
.icon-clients-gpo-cerebro{
    background-position: -459px 0;
    width: 46px;
}
.icon-clients-iso{
    background-position: -505px 0;
    width: 48px;
}

.icon-clients-gto{
    background-position: -554px 0;
    width: 40px;
}

.icon-clients-esr{
    background-position: -599px 0;
    width: 128px;
}
.ui-tooltip {

    z-index: 99999999999999999!important;
   background:#333;
   color:#fff;
   padding:2px 5px;
   font-size:12px;
    -webkit-box-shadow: 0 0 5px #711060;
    box-shadow: 0 0 5px #711060;
}
.icon-purple{
    display: block;
    width: 64px;
    height: 64px;
    background: url(../img/sprites/purple-icons.png) no-repeat transparent;
}
.icon-purple-compass{
    background-position: 0 0;
}
.icon-purple-clock{
    background-position: -64px 0;
}
.icon-purple-ruler{
    background-position: -128px 0;
}
.icon-purple-truck{
    background-position: -192px 0;
}
.icon-purple-open-truck{
    background-position: -256px 0;
}
.icon-purple-open-tractor{
    background-position: 0 -64px;
}
.icon-purple-mixer{
    background-position: -64px -64px;
}
.icon-purple-trafic{
    background-position: -128px -64px;
}
.icon-purple-fruit{
    background-position: -192px -64px;
}
.icon-purple-tall-truck{
    background-position: -256px -64px;
}
.red-alert{
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/icons/help.png) no-repeat -78px 0 transparent;
    overflow: visible;
    z-index: 6;
}
.red-alert-tooltip{
    font-family: Ubuntu, sans-serif, Arial;
    font-weight: bold;
    font-size:.8em;
    text-align: center;
    background: #AA0000;
    color: #FFF;
    white-space: nowrap;
    padding: 0.4em 1em;
    border-radius: 8px;
    border: 1px solid #FFF;
    z-index: 5;
}
.purple-alert-big{
    cursor: pointer;
    display: block;
    width: 62px;
    height: 62px;
    background: url(../img/icons/purple-alert-b.png) no-repeat 0 0 transparent;
    overflow: visible;
    z-index: 10;
}
.purple-alert,
#main-menu .sec-menu .purple-icon-alert{
    cursor: pointer;
    display: block;
    width: 36px;
    height: 36px;
    background: url(../img/sprites/icons.png) no-repeat -36px -73px transparent;
    overflow: visible;
    z-index: 10;
}
.purple-alert-tooltip{
    font-family: Ubuntu, sans-serif, Arial;
    /*background: rgba(138, 8 ,98, .7);*/
    background: rgba(97, 119, 199, .7);
    border: 3px solid #242c4b;
    border-radius: 12px;
    color: #fff;
    padding: 0;
    max-width: 350px;
    font-size: 1em;
}
.purple-alert-tooltip h2{
    display: block;
    margin: 0;
    padding: 0.7em 1em;
    color: #FFF;
    background: #07455f;
    font-size: 1.4em;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.purple-alert-tooltip ul{
    font-size: 1.125em;
    font-style: italic;
    line-height: 1.2em;
    padding: 0 2.1875em 0 2.1875em;
}
.blue-alert{
    cursor: pointer;
    display: block;
    width: 36px;
    height: 36px;
    background: url(../img/sprites/icons.png) no-repeat -72px -73px transparent;
    overflow: visible;
    z-index: 11;
}
.blue-alert-tooltip{
    font-family: Ubuntu, sans-serif, Arial;
    background: #31A5AD;
    color:#FFF;
    border: 2px solid #FFF06C;
    border-radius: 8px;
    padding: 1em 1em 1em 85px;
    min-height: 3.125em;
	font-size:18px;
}
.blue-alert-tooltip .left-icon{
    position:absolute;
    left:.6em;
    top:0;
    bottom:0;
    margin:auto;
}
.waves{
    width:62px;
    height:62px;
    background: url(../img/icons/i2.png);
    background-size: 100% auto;
    -webkit-animation: waves 1.5s infinite;
    -moz-animation: waves 1.5s infinite;
    -o-animation: waves 1.5s infinite;
    -ms-animation: waves 1.5s infinite;
    animation: waves 1.5s infinite;
}
.animated-alert{
    cursor: pointer;
    display: block;
    width: 62px;
    height: 62px;
    /*background: url(../img/icons/info.gif) no-repeat 0 0 transparent;*/
    background: url(../img/icons/i1.png) no-repeat center center transparent;
    background-size: 37px auto;
    z-index: 11;
}
.clients-tooltip{
    font-size: 1em;
    padding: 0.3em;
    background: #690965;
    border:none;
    color:#FFF;
}
.clients-tooltip-arrow{
    border-bottom: 10px solid #690965;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
}
.map-inv-tooltip{
    font-size: 1.25em;
    padding: 0.5em;
    background: #FFF;
    border:none;
    color:#690965;
}
.map-inv-tooltip-arrow{
    border-bottom: 10px solid #FFF;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
}
/*  MODALS  */
.modal-overlay{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #231F20;
    filter: alpha(opacity=30);
    -ms-filter: alpha(opacity=30);
    opacity: 0.30;
    z-index: 100;
}
.background-modal{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.modal-wrapper{
    display: none;
    position: absolute;
    z-index: 101;
}
.modal-content{
    border-radius: 8px;
    overflow: hidden;
    background-color: #FFF;
}
.modal-content.default-modal-class{
    background-color: #FFF;
    padding: 20px;
}
/*.modal-close{
    background: url(../img/icons/help.png) no-repeat -40px 0 transparent;
    width: 38px;
    height:38px;
    position: absolute;
    display: block;
    top: -19px;
    right: -19px;
    z-index: 105;
}*/
.loadingModal{
    margin: 20px;
}
.help-table{
    text-align: left;
    vertical-align: middle;
}
.help-table td{
    padding: .2em .5em;
}
.help-table-icon{
    width: 40px;
    text-align: center;
}
/** GENERAL CLASS **/
.wrap, .wrap-all{
    margin: 0 auto;
    max-width: 1024px;
    position: relative;
}
.fillall{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.fl{float:left;}
.fr{float:right;}
.posr{position:relative;}
.posa{position:absolute;}
.ratio{
    width: 100%;
    position: relative;
    display: block;
}
.ratio:after{
    /*padding-top: 56.25%; 16:9 ratio*/
    display: block;
    content: '';
}
.ratio-fill{
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
}
.sec-menu{
	box-shadow: -2px 2px 2px 2px rgba(7, 69, 95, 0) !important;
}
.primary-box{
	 /* box-shadow: -2px 2px 2px 2px rgba(7, 69, 95, 0.81);*/
    background-color: rgba(255, 255, 255, 0.73);
    border: 0px solid #FFF06C;
    border-radius: 20px;
    color: #682266;
    margin: 0 auto;
    overflow: hidden;
}
.primary-box.text-box{
    text-align: center; 
    padding: 0 1.875em 1.25em 1.875em;
    width: 61.5234375%;
    left: 0;
    right: 0;
}
.primary-box.text-box h2{
    margin: 0.5em 0;
    font-size: 2.53125em;
    font-weight: normal;
    color: #07455f;
}
.primary-box.text-box h3{
    font-weight: bold;
    font-size:1.5625em;
    color:#FFF;
}
.primary-box.text-box span{
    font-size: 1.40625em;
    line-height: 1.2em;
    font-weight: normal;
    font-style: normal;
}
.primary-box.text-box p{
    font-size: 1.25em;
    margin:0;
    line-height: 1.3em;
}
.sucursales-info{
    max-width: 370px;
}
.hidden-text{
    text-indent: 100%;
    overflow: hidden;
}
.separator{
    border-top: 10px solid #690965;
}
.oneline{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.visible{
    display: block !important;
}
.absolute-center{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
.absolute-center.vertical-center{
    top: 0;
    bottom: 0;
}
.arrow-l,.arrow-r{
    background: url(../img/icons/arrows.png) no-repeat transparent;
    height: 35px;
    width: 20px;
    cursor: pointer;
    display: block;
}
.arrow-l{
    background-position: -20px 0;
}
.arrow-r{
    background-position: 0 0;
}

button{
    font-family: Ubuntu, sans-serif, Arial;
    background-color: #690965;
    border: none;
    color: #FFF;
    display: inline-block;
    font-size: 1.125em;
    padding: .5em 1em;
    text-shadow: 0 1px 1px #000;
    position:relative;
}
.map-button.active{
    border: 2px solid #FFF06C !important;
}
.map-button{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.zoom-hover{
    -webkit-transition: All 0.3s ease; 
    -moz-transition: All 0.3s ease; 
    -o-transition: All 0.3s ease; 
    -webkit-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); 
    -moz-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); 
    -o-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
}
.zoom-hover:hover{
    -webkit-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px); 
    -moz-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px); 
    -o-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px);
}
.footer{
    height: 80px;
}
/** COLORS **/
.purple-start{
    background-color: #571a54;
}
.purple-gradient{
    background: #571a54;
    background: url(../img/degradados/degradado1.png) repeat-y;
    background-size: 100% 100%;
    background: -moz-linear-gradient(left,  #571a54 0%, #682366 33%, #7b2c6f 50%, #682366 67%, #571a54 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#571a54), color-stop(33%,#682366), color-stop(50%,#7b2c6f), color-stop(67%,#682366), color-stop(100%,#571a54));
    background: -webkit-linear-gradient(left,  #571a54 0%,#682366 33%,#7b2c6f 50%,#682366 67%,#571a54 100%);
    background: -o-linear-gradient(left,  #571a54 0%,#682366 33%,#7b2c6f 50%,#682366 67%,#571a54 100%);
    background: -ms-linear-gradient(left,  #571a54 0%,#682366 33%,#7b2c6f 50%,#682366 67%,#571a54 100%);
    background: linear-gradient(to right,  #571a54 0%,#682366 33%,#7b2c6f 50%,#682366 67%,#571a54 100%);
}
.purple-gradient-v{
    background: #773b6f;
    background: -moz-linear-gradient(top,  #773b6f 0%, #571a54 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#773b6f), color-stop(100%,#571a54));
    background: -webkit-linear-gradient(top,  #773b6f 0%,#571a54 100%);
    background: -o-linear-gradient(top,  #773b6f 0%,#571a54 100%);
    background: -ms-linear-gradient(top,  #773b6f 0%,#571a54 100%);
    background: linear-gradient(to bottom,  #773b6f 0%,#571a54 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#773b6f', endColorstr='#571a54',GradientType=0 );
}
.cyan{
    background: #31A5AD; 
}
.leaf-green{
    background: #9DCC42;
}
.version-info{
    padding: 0.3em;
    position: fixed;
    bottom: 5px;
    left:5px;
    z-index: 30;
}
.primary-color{
    background-color: #13235e; /* Purple */
}
/****** ANIMATIONS *********/

@-webkit-keyframes curanim{0% {top:24px;}25% {top:2px;}50% {top:2px;}75% {top:24px;}100% {top:24px;}}
@-moz-keyframes curanim{0% {top:24px;}25% {top:2px;}50% {top:2px;}75% {top:24px;}100% {top:24px;}}
@-o-keyframes curanim{0% {top:24px;}25% {top:2px;}50% {top:2px;}75% {top:24px;}100% {top:24px;}}
@-ms-keyframes curanim{0% {top:24px;}25% {top:2px;}50% {top:2px;}75% {top:24px;}100% {top:24px;}}
@keyframes curanim{0% {top:24px;}25% {top:2px;}50% {top:2px;}75% {top:24px;}100% {top:24px;}}

@-webkit-keyframes waves{0%{opacity:0;-webkit-transform:scale(.6,.6)}70%{opacity:1}90%{opacity:1}100%{opacity:0;-webkit-transform:scale(1,1)}}
@-moz-keyframes waves{0%{opacity:0;-moz-transform:scale(.6,.6)}80%{opacity:1}100%{opacity:0;-moz-transform:scale(1,1)}}
@-o-keyframes waves{0%{opacity:0;-o-transform:scale(.6,.6)}80%{opacity:1}100%{opacity:0;-o-transform:scale(1,1)}}
@-ms-keyframes waves{0%{opacity:0;-ms-transform:scale(.6,.6)}80%{opacity:1}100%{opacity:0;-ms-transform:scale(1,1)}}
@keyframes waves{0%{opacity:0;-webkit-transform:scale(.6,.6)}70%{opacity:1}90%{opacity:1}100%{opacity:0;transform:scale(1,1)}}