.servicios-wrap {
    width: 100%; height: auto; position: relative; background: #000;
}
.servicios-cont {
    width: 100%; height: 100vh; position: relative; display: block;
}
/*CONTROLADOR*/
.controll-wrap {
    height: 100%; background: #000; width: 33.33%; float: left; position: relative; overflow: hidden;
    box-shadow: 2px 0px 10px #000; z-index: 5;
}
.controll-cont {
    padding: 70px; position: relative; z-index: 1;
}
.controll-cont h2{
    font-size: 60px; text-transform: uppercase; color: #fff; letter-spacing: 7px;
}
.controll-cont ul {
    margin: 30px 0 0;
}
.controll-cont li{
    border-bottom: 2px solid #fff;
}
.controll-cont li h3{
    font-size: 24px; color: #fff; letter-spacing: 2px; font-family: 'Fjalla One', sans-serif; padding-right: 15px; cursor: pointer;
    text-transform: uppercase; position: relative; padding: 15px 20px 15px 0; left:0px; background: url('/assets/images/servicios/right-check.png') no-repeat right center;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.controll-cont li:hover h3{
    color: #ff7800; left:10px;
}
.controll-cont .active h3 {
    color: #ff7800;
}
.controll-cont li i {
    float: right; font-size: 30px; position: relative;  color: #ff7800;
}
.number {
    color: rgba(255, 255, 255, 0.14); font-size: 250px; font-family: 'Fjalla One', sans-serif; position: absolute; right: -2px; bottom: -64px;

}
/*CONTENEDOR SERVICIOS*/
#container-servicios {
    float: left; width: 66.66%; height: 100%; position: relative;
}
.item-wrap {
    display: none; height: 100%; width: 100%; background: #000;
}
.item-wrap.active {
    display: block;
}
.item-right-wrap{
    opacity: 0;
}
.active .item-right-wrap{
    opacity: 1; position: absolute; right: 0; top: 0;
}
.item-left-wrap, .item-right-wrap {
    width: 50%; float: left; height: 100%;
}
.item-left-wrap {
    overflow-y: auto; height: 100%; position: relative; z-index: 2;
}
/*.item-left-wrap::-webkit-scrollbar {
    display: none;
}*/
.item-left-wrap::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #2c2c2c;
}

.item-left-wrap::-webkit-scrollbar
{
	width: 10px;
	background-color: #2c2c2c;
}

.item-left-wrap::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #ff7800;
}
.item-right-cont {
    height: 100%; width: 100%; background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.item-left-cont {
    padding: 70px; position: relative; background: #ff7800;
}
.item-left-cont h2 {
    font-size: 34px; text-transform: uppercase; color: #fff; letter-spacing: 4px; position: relative; z-index: 2;
}
.item-left-cont > p {
    font-size: 18px; color: #fff; margin: 5px 0 20px; position: relative; z-index: 2;
}
.item-left-cont li{
    margin-bottom: 20px; background: url('/assets/images/servicios/check.png') no-repeat left top; background-size: 25px;
    padding-left: 33px;
}
.item-left-cont li h4{
    font-size: 18px; font-family: 'Fjalla One', sans-serif;
}
.item-left-cont ul {
    padding: 10px 0;
}
.icon-serv {
    background-size: 100%; background-repeat: no-repeat; background-position: center;
    display: inline-block; height: 120px; width: 120px; position: absolute; top: 40px; left: 40px;
}
.icon-01 {
    background-image: url('/assets/images/servicios/reconocimiento/01-icon.png');
}
.icon-02 {
    background-image: url('/assets/images/servicios/reconocimiento/02-icon.png');
}
.icon-03 {
    background-image: url('/assets/images/servicios/reconocimiento/03-icon.png');
}
.icon-04 {
    background-image: url('/assets/images/servicios/reconocimiento/04-icon.png');
}

/*FORMULARIO*/
.form-servicios {
    padding: 30px; border: solid 1px #2c2c2c; background: rgba(0, 0, 0, 0.14);
}
form h3 {
    font-size: 25px; text-transform: uppercase; margin-bottom: 20px;
}
.item-left-cont input[type='email'], .item-left-cont input[type='text'] {
    border: 1px solid #2c2c2c; width: 100%; background: transparent; height: 40px; color: #fff; padding: 0 15px;
}
.item-left-cont input[type='submit']{
    height: 40px; border: none; background: #5b5b5b; color: #fff; text-transform: uppercase; font-family: 'Fjalla One', sans-serif;
    font-size: 16px; padding: 0 20px;
    appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */
}
.field {
    margin-bottom: 15px;
}
.item-left-cont ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #2c2c2c;
}
.item-left-cont ::-moz-placeholder { /* Firefox 19+ */
  color: #2c2c2c;
}
.item-left-cont :-ms-input-placeholder { /* IE 10+ */
  color: #2c2c2c;
}
.item-left-cont :-moz-placeholder { /* Firefox 18- */
  color: #2c2c2c;
}
/*============ MOVIL ===============*/
@media screen and (max-width: 1850px){
    /*CONTROLADOR*/
    .controll-cont li h3 {font-size: 20px;}
    .controll-cont h2 {font-size: 55px;}
}
@media screen and (max-width: 1650px){
    /*CONTROLADOR*/
    .controll-cont {padding: 50px;}
    .controll-cont li h3 {font-size: 18px;}
    .controll-cont h2 {font-size: 50px;}

    /*CONTENIDO*/
    .item-left-cont {padding: 50px;}
}
@media screen and (max-width: 1500px){
    /*CONTROLADOR*/
    .controll-cont h2 {font-size: 40px;}

    /*CONTENIDO*/
    .icon-serv {width: 90px; height: 90px; top: 30px; left: 30px;}
    .item-left-cont {padding: 40px;}
    .item-left-cont h2 {font-size: 30px;}
    .item-left-cont > p {font-size: 16px;}

}
@media screen and (max-width: 1400px){
    /*CONTENIDO*/
    .item-left-cont h2 {font-size: 28px; letter-spacing: 3px;}
}
@media screen and (max-width: 1000px){
    .servicios-cont {height: inherit;}

    /*CONTROLADOR*/
    .controll-wrap {width: 40%;}
    .number {display: none;}


    /*CONTENIDO*/
    #container-servicios {width: 60%; float: right;}
    .item-right-wrap {display: none;}
    .item-left-wrap {width: 100%;}
    .controll-cont h2 {font-size: 30px;}
    .controll-cont li h3 {font-size: 16px; letter-spacing: 0;}
    .item-left-cont h2 {font-size: 24px; letter-spacing: 1px;}
    .icon-serv {display: none;}
    form h3 {font-size: 20px;}
    .item-wrap {height: auto;}
    .controll-wrap {position: absolute; display: initial;}
}
@media screen and (max-width: 750px){
    /*CONTROLADOR*/
    .controll-cont h2 {font-size: 26px; letter-spacing: 1px;}
    .controll-wrap {width: 100%; position: relative;}
    .controll-cont li {border-bottom: 1px solid rgba(255, 255, 255, 0.27);}
    .controll-cont ul {margin: 15px 0 0;}

    /*CONTENIDO*/
    #container-servicios {width: 100%;}
}
@media screen and (max-width: 500px){
    /*CONTROLADOR*/
    .controll-cont {padding: 50px 30px;}

    /*CONTENIDO*/
    .item-left-cont {padding: 50px 30px;}
}