#info-step1-1-1{
	-webkit-animation-duration: 1s;
    -webkit-animation-delay: 0s;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 0s;
    animation-duration: 1s;
    animation-delay: 0s;
}
#info-step1-1-2{
	-webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 0.3s;
    animation-duration: 1s;
    animation-delay: 0.3s;
}
#info-step1-1-3{
	-webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.6s;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 0.6s;
    animation-duration: 1s;
    animation-delay: 0.6s;
}

#p-step1-1-2{
	-webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.8s;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 0.8s;
    animation-duration: 1s;
    animation-delay: 0.8s;
}

.step-carousel{
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.image-step{
	margin:20px 0;
}

.image-step3 {
    margin: 60px 0;
    width: 98%;
}

h2.title-section{
	background-color: #E7F5FA;
}
h3.title-section {
    font-size: 26px;
    color: #3462AC;
    margin-top: 14px;
}

.p-section {
    font-size: 17px;
    line-height: 27px;
}

.icon-title{
	color:#F5A207;
	font-size:18px;
	text-transform:uppercase;
	font-weight:bold;
	line-height: 19px;
}

.section1-color{
	color: #3462AC;
}
.section1-background{
    padding: 100px 0 0;
    background-color: #C4E9E8;
}

.box-important{
    background-color: rgb(255, 255, 255);
    outline-style: dotted;
    outline-width: 12px;
    outline-color: white;
    margin-bottom:50px; 
    padding: 20px;
}

.box-important p{
    margin-bottom: 15px;
}


.box-important-blue{
    background-color: #c4e9e8;
    outline-style: dotted;
    outline-width: 12px;
    outline-color: #c4e9e8;
    margin-top:25px; 
    padding: 20px;
}

.box-important-blue p{
    margin-bottom: 15px;
}

.section1-white{
	color: #fff;
}

.li-landing{
    background-color: #000;
}

.separator-lines{
    background-image: url(../img/section1/separator-lines.png);
    background-repeat: repeat-x;
    background-position-y: 0px;
     height: 50px;
    
    background-color:#E7F5FA;
}
.separator-square{
	background-image: url(../img/section1/separator-square.png);
    background-repeat: repeat-x;
    background-position-y: 0;
    height: 25px;
    display: block;
    position: relative;
    top: 24px;
}

#economia-circular{
    padding: 0px 0 40px;
}

.btn-img-2 img{
	width: 17%;
    height: auto;
	transition:transform 0.3s;
}
.btn-img img:hover, .btn-img-1 img:hover ,  .btn-img-2 img:hover  {
	color:#045F74;
	transform: scale3d(1.1,1.1, 1);
}

#content-step1-1 div, #content-step1-2 div{
    text-align: center;
}

#content-step1-1{
	position:relative;
	bottom:-70px;
    margin-top: 50px;
}
#info-step1-1-1{
	position: absolute;
    top: 12%;
    left:3%;
}
#content-step1-1 a{
	width:100%;
}
#content-step1-1 img{
	width:100%;
}
#info-step1-1-2{
	position: absolute;
    top: 12%;
    left:40%;
}
#info-step1-1-2 a{
    right: 0;
    position: relative;
}
#info-step1-1-3{
	position: absolute;
    top: 12%;
    right:0;
}
#info-step1-1-3 a{
    
}

#content-step1-2{
	
}
#content-step1-2 div{
	width:15%;
}

#info-step1-2-0 {
   	position: absolute;
	top: 18%;
	left: 20%;
}
#info-step1-2-1 {
    position: absolute;
    top: 19%;
	left: 38%;
}
#info-step1-2-2 {
    position: absolute;
    top: 19%;
	right: 31%;
}
#info-step1-2-3 {
    position: absolute;
    top: 45%;
	right: 27%;
}
#info-step1-2-4 {
    position: absolute;
    bottom: 22%;
	right: 40%;
}
#info-step1-2-5 {
    position: absolute;
    top: 45%;
    left: 32%;
    width: 19% !important;
}
#info-step1-2-6 {
    position: absolute;
    top: 166px;
    left: 18%;
    width: 32%;
}
    #info-step1-2-6 h4 {
        position: relative;
        top: 53px;
    }
#info-step1-2-7 {
    position: absolute;
    bottom: 25%;
	left: 20%;
}

#content-step1-3{
	
}
#info-step1-3-1{
	position: absolute;
    top: 103px;
    left: 0;
}
#content-step1-3 div{
	width:20%;
}
#info-step1-3-2{
	position: absolute;
    top: 54px;
    left: 27%;
}
#info-step1-3-3{
	position: absolute;
    top: 96px;
    right: 27%;
}
#info-step1-3-4{
	position: absolute;
    top: 60px;
    right: -1%;
    text-align: right;
}

.p2-section{
    line-height: 29px;
    margin-top: 20px;
    font-size: 22px;
    font-weight: 600;
}

.p3-section{
	margin-top: 25px;
	font-size: 28px;
	color: #8DADBC;
	text-align: center;
}


h2.title-section {
	background-color: #C4E9E8; 
	font-weight: bold;
    font-size: 36px;
    margin-bottom: -15px;
    margin-left: -21px;
    line-height: 50px;
}

h2.title-section2 {
    background-color: #FFF; 
    font-weight: bold;
}

h4.title-section {
    background-color: #E7F5FA; 
    font-weight: bold;
    display: -webkit-inline-box;
}

.icon-title-lineal{
    top: -93px;
    position: relative;
}

.separator-square2 {
    background-image: url(../img/section1/separator-square.png);
    background-repeat: repeat-x;
    background-position-y: 0;
    height: 25px;
    display: block;
    position: relative;
    top: -23px;
}

.title-section-separator-white {
	background-image: url(../img/section1/separator-lines-white.png);
    background-repeat: repeat-x;
    background-position-y: 61px;
}

.title-section-separator-medium{
    background-size: 217px;
    background-position-y: 122px;
}

.title-section-separator2{
    background-image: url(../img/section1/separator-lines.png);
    background-repeat: repeat-x;
    background-position-y: 100px;
    background-position: 0 100px;
}

.p-section-space{
    margin-bottom: 70px;
}

#content-step4-1-1 img{
	width:52%;
}
#info-step4-1-1{
    position: absolute;
    top: 60px;
    left: 21%;
}
#info-step4-1-2{
	position: absolute;
    top: 74%;
    left: 25%;
}
#info-step4-1-3{
	position: absolute;
    top: 45%;
    right: 77%;
    text-align: right;
}
#info-step4-1-4{
    position: absolute;
    top: 74%;
    left: 70%;
}
#info-step4-1-5{
    position: absolute;
    top: 38%;
    right: 9%;
}
#info-step4-1-6{
    position: absolute;
    top: 70px;
    text-align: right;
    right: 22%;
}


#content-step4-1-2 div{
	width:17%;
}
#info-step4-1-7{
    position: absolute;
    top: 5%;
    right: 43%;
}
#info-step4-1-8{
    position: absolute;
    top: 26%;
    left: 27%;
}
#info-step4-1-9{
    position: absolute;
    top: 25%;
    right: 26%;
    text-align: right;
}
#info-step4-1-10{
    position: absolute;
    top: 59%;
    left: 32%;
}
#info-step4-1-11{
	position: absolute;
    top: 59%;
    right: 31%;
    text-align: right;
}


#content-step4-1-3 div{
	width: 17%;
}
#info-step4-1-12{
    position: absolute;
    top: 50px;
    left: 2%;
}
#info-step4-1-13{
    position: absolute;
    top: 50px;
    left: 29%;
}
#info-step4-1-14{
    position: absolute;
    top: 50px;
    left: 56%;
}
#info-step4-1-15{
    position: absolute;
    top: 50px;
    right: 22px;
    text-align: right;
}
#info-step4-1-16{
    position: absolute;
    top: 326px;
    left: 15%;
}
#info-step4-1-17{
    position: absolute;
    top: 326px;
    left: 42%;
}
#info-step4-1-18{
    position: absolute;
    top: 326px;
    right: 12%;
    text-align: right;
    width: 19% !important;
}

.image-step-4{
	margin-bottom: 0px !important;
    width: 78%;
    margin: auto;
}

.image-step-5{
	margin-bottom: 250px;
	margin-top:250px;
}

.step1-hidden{
    display: none;
}

.step2-hidden{
    display: none;
}

.step3-hidden{
    display: none;
}

.step4-hidden{
    display: none;
}

.step5-hidden{
    display: none;
}

.step2-out{

}

.step2-inside{
    position: absolute;
    top: 107px;
    left: 25%;
    width: 60% !important;
}

 .step2-inside-2{
	position: absolute;
    top: 13%;
    left: 33.5%;
    width: 39% !important;
}

#carousel1 .carousel-inner .item {
	min-height:620px;
}

/*Rotación*/
.rotating {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 60000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 60000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 60000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 60000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


.parallax-section1-step1{
    margin-bottom:250px;
    /*overflow:hidden;*/
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 0.3s;
    animation-duration: 1s;
    animation-delay: 0.3s;
}


    #carousel2 .carousel-inner .item {
        min-height:650px;
    }

/******************/
/* MEDIAS QUERIES */
/******************/
@media (max-width: 1200px){
    
    #content-step1{   
    }
    #content-step1-1 a {
        width: 230px;
        display: -webkit-box;
    }

/*Iconos economia lineal*/
    #content-step1-1 {
        bottom: -27px;
        margin-top: 13px;
    }

    .icon-title-lineal {
            top: -78px;
    }

    #info-step1-1-1 {
        position: absolute;
        top: 38px;
        left: 3%;
        width: 26%;
    }
    
    #info-step1-1-2 {
        position: absolute;
        top: 38px;
        left: 41%;
        width: 26%;
    }

    #info-step1-1-3 {
        position: absolute;
        top: 38px;
        left: 75%;
        width: 26%;
    }

    /*Iconos economia circular*/
    #content-step1-2 div {
        width: 14%;
    }

    #info-step1-2-7 {
       bottom: 33%;
	   left: 19%;
    }
    /**/

    /*Iconos los pilares*/
    #content-step1-3 div {
        width: 20%;
    }
    #info-step1-3-1 {
        position: absolute;
        top: 100px;
        left: 0;
    }
    #info-step1-3-2 {
        position: absolute;
        top: 45px;
        left: 27%;
    }
    #info-step1-3-3 {
        position: absolute;
        top: 90px;
        right: 27%;
    }
    #info-step1-3-4 {
        position: absolute;
        top: 55px;
        right: -1%;
        text-align: right;
    }
    /**/

    /*Iconos ciclo de vida envase*/
    #content-step4-1-1 img{
        width:50%;
    }
    #info-step4-1-1{
        position: absolute;
        top: 21px;
        left: 23%;
    }
    #info-step4-1-2{
        position: absolute;
        top: 433px;
        left: 25%;
    }
    #info-step4-1-3{
        position: absolute;
        top: 230px;
        right: 77%;
        text-align: right;
    }
    #info-step4-1-4{
        position: absolute;
        top: 426px;
        left: 70%;
    }
    #info-step4-1-5{
        position: absolute;
        top: 216px;
        right: 9%;
    }
    #info-step4-1-6{
        position: absolute;
        top: 24px;
        text-align: right;
        right: 24%;
    }


    #content-step4-1-2 div{
        width:17%;
    }
    #info-step4-1-7{
        position: absolute;
        top: 24px;
        right: 41%;;
    }
    #info-step4-1-8{
        position: absolute;
        top: 110px;
        left: 28%;
    }
    #info-step4-1-9{
        position: absolute;
        top: 129px;
        right: 26%;
        text-align: right;
    }
    #info-step4-1-10{
        position: absolute;
        top: 295px;
        left: 32%;
    }
    #info-step4-1-11{
        position: absolute;
        top: 310px;
        right: 32%;
        text-align: right;
    }

    /**/

    /*Iconos ventajas envases*/
    #content-step4-1-3 div{
        width: 20%;
    }
    #info-step4-1-12 {
        position: absolute;
        top: 50px;
        left: 0%;
    }
    #info-step4-1-13 {
        position: absolute;
        top: 50px;
        left: 27%;
    }
    #info-step4-1-14 {
        position: absolute;
        top: 50px;
        left: 54%;
    }
    #info-step4-1-15 {
        position: absolute;
        top: 54px;
        right: 0px;
        text-align: right;
    }
    #info-step4-1-16 {
        position: absolute;
        top: 326px;
        left: 13%;
    }
    #info-step4-1-17 {
        position: absolute;
        top: 326px;
        left: 41%;
    }
    #info-step4-1-18 {
        position: absolute;
        top: 326px;
        right: 10%;
        width: 22% !important;
        text-align: right;
    }
    /**/

}

/* IPAD VERTICAL *//*
@media (max-width: 1024px) and (orientation: portrait){
     
    .parallax-section1-step1{
        margin-bottom:190px;
    }

}*/

@media (max-width: 992px){
    #content-step1-1 a {
        width: 170px;
        display: -webkit-box;
    }

/*Iconos economia lineal*/
    #content-step1-1 {
        bottom: 2px;
    }

    .icon-title-lineal {
        top: -63px;
    }

    #info-step1-1-1 {
        position: absolute;
        top: 38px;
        left: 3%;
        width: 26%;
    }
    
    #info-step1-1-2 {
        position: absolute;
        top: 38px;
        left: 42%;
        width: 26%;
    }
    
    #info-step1-1-3 {
        position: absolute;
        top: 38px;
        left: 75%;
        width: 26%;
    }
    /**/

    /*Iconos economia circular*/
    #content-step1-2 div {
        width: 16%;
    }
    #info-step1-2-0 {
        position: absolute;
        top: 17%;
        left: 9%;
    }
    #info-step1-2-1 {
        position: absolute;
        top: 16%;
        left: 34%;
    }
    #info-step1-2-2 {
        position: absolute;
        top: 15%;
        right: 28%;
    }
    #info-step1-2-3 {
       position: absolute;
        top: 42%;
        width: 17% !important;
        left: 64%;
    }
    #info-step1-2-4 {
       position: absolute;
        bottom: 19%;
        right: 39%;
    }
    #info-step1-2-5 {
        position: absolute;
        top: 44%;
        left: 27%;
        width: 19% !important;
    }
    #info-step1-2-6 {
        position: absolute;
        top: 100px;
        left: 19%;

    }
        #info-step1-2-6 h4 {
            position: relative;
            top: 50px;
        }
    #info-step1-2-7 {
        position: absolute;
        bottom: 35%;
        left: 7%;
    }
    .step2-inside{
        position: absolute;
        top: 46px;
        left: 24%;
        width: 61% !important;
    }
    .step2-inside-2{
		position: absolute;
    	top: 7.5%;
    	left: 23%;
    	width: 63% !important;
	}
	
    /**/

     /*Iconos los pilares*/
    #content-step1-3 div {
        width: 22%;
    }
    #info-step1-3-1 {
        position: absolute;
        top: 19px;
        left: -12px;
    }
    #info-step1-3-2 {
        position: absolute;
        top: -19px;
        left: 26%;
    }
    #info-step1-3-3 {
        position: absolute;
        top: 14px;
        right: 27%;
    }
    #info-step1-3-4 {
        position: absolute;
        top: -19px;
        right: -2%;
        text-align: right;
    }
    /**/

    /*Iconos ciclo de vida envase*/
    #content-step4-1-1 img{
        width:40%;
    }
    #info-step4-1-1{
        position: absolute;
        top: 21px;
        left: 24%;
    }
    #info-step4-1-2{
        position: absolute;
        top: 335px;
        left: 25%;
    }
    #info-step4-1-3{
        position: absolute;
        top: 170px;
        right: 77%;
        text-align: right;
    }
    #info-step4-1-4{
        position: absolute;
        top: 333px;
        left: 70%;
    }
    #info-step4-1-5{
        position: absolute;
        top: 160px;
        right: 5%;
    }
    #info-step4-1-6{
        position: absolute;
        top: 18px;
        text-align: right;
        right: 24%;
    }


    #content-step4-1-2 div{
        width:17%;
    }
    #info-step4-1-7{
        position: absolute;
        top: 28px;
        right: 42%;
    }
    #info-step4-1-8{
        position: absolute;
        top: 108px;
        left: 27%;
    }
    #info-step4-1-9{
        position: absolute;
        top: 110px;
        right: 27%;
        text-align: right;
    }
    #info-step4-1-10{
        position: absolute;
        top: 244px;
        left: 32%;
    }
    #info-step4-1-11{
        position: absolute;
        top: 248px;
        right: 33%;
        text-align: right;
    }

    /**/

    /*Iconos ventajas envases*/
    #content-step4-1-3 div{
        width: 20%;
    }
    #info-step4-1-12 {
        position: absolute;
        top: -158px;
        left: 1%;
    }
    #info-step4-1-13 {
        position: absolute;
        top: -154px;
        left: 27%;
    }
    #info-step4-1-14 {
        position: absolute;
        top: -152px;
        left: 54%;
        text-align: right;;
    }
    #info-step4-1-15 {
        position: absolute;
        top: -149px;
        right: 0px;
        text-align: right;
    }
    #info-step4-1-16 {
        position: absolute;
        top: 56px;
        left: 13%;
    }
    #info-step4-1-17 {
        position: absolute;
        top: 59px;
        left: 41%;
    }
    #info-step4-1-18 {
        position: absolute;
        top: 59px;
        right: 10%;
        width: 22% !important;
        text-align: right;
    }
    .image-step-5 {
        margin: 170px auto;
        width: 90%;
    }
    /**/

}

@media (max-width: 767px){
    
    .brand-logo img {
        width: 130px !important;
        margin-top: 0px !important;
    }

    #content-step1-1 a {
        width: 170px;
        display: -webkit-box;
    }
    #content-step1-1 {
        bottom: 3px;
    }

    .p-section-space {
        margin-bottom: 0px;
    }

    .image-step-4 {
        margin-bottom: 0px !important;
    }
    
    .image-step3 {
        margin: 16px auto;
        width: 78%;
    }

    .p3-section {
        margin-top: 0px;
        font-size: 16px;
    }

    .p2-section {
        line-height: 23px;
        margin-top: 20px;
        font-size: 19px;
        font-weight: 600;
    }

   
    
    /*oculta los 'Iconos economia lineal' y muestra una sola imagen*/
    #content-step1-1 {
        display: none !important;
    }
    .step1-show{
        display: none !important;
    }
    .step1-hidden{
        display: initial;
    }

    .step1-mobile{
        margin: 50px auto;
        width: 80%
    }

    /*oculta los 'Iconos economia circular' y muestra una sola imagen*/
    #content-step1-2 {
        display: none;
    }
    .step2-show{
        display: none !important;
    }
    .step2-hidden{
        display: initial;
    }

    /*oculta los 'Iconos Los pilares' y muestra una sola imagen*/
    #content-step1-3 {
        display: none;
    }
    .step3-show{
        display: none
    }
    .step3-hidden{
        display: initial;
    }

    /*oculta los 'Iconos ciclo de vida envase' y muestra una sola imagen*/
    #content-step4-1-1 {
        display: none;
    }
    #content-step4-1-2 {
        display: none;
    }
    .step4-show{
        display: none
    }
    .step4-hidden{
        display: initial;
    }

    /*oculta los 'Iconos ventajas envases' y muestra una sola imagen*/
    .image-step-5 {
        margin-bottom: 0;
        margin-top: 20px;
    }
    #content-step4-1-3 {
        display: none;
    }
    .step5-show{
        display: none
    }
    .step5-hidden{
        display: initial;
    }
    /**/

    h2.title-section {
        padding-bottom: 0;
        padding-top: 0;
        margin-bottom: 2px;
    }
}






@media (max-width: 680px){
    #content-step1-1 a {
        width: 130px;
        display: -webkit-box;
    }
    #content-step1-1 {
        bottom:-40px;
    }


    #carousel1 .carousel-inner .item {
        min-height:550px;
    }



   /* Texo más acorde al tamaño */
    h2.title-section {
        font-family: 'Titillium Web', sans-serif;
        text-transform: uppercase;
        font-size: 36px;
        font-weight: bold;
        padding: 10px 20px;
        line-height: 35px;
        margin-top: 0;
        display: -webkit-inline-box;
    }   
    h3.title-section {
        font-size: 26px;
        color: #3462AC;
    }
    .p-section {
        font-size: 16px;
        line-height: 23px;
        margin-top: 2%;
        margin-bottom: 0;
    }
    /**/
}





@media (max-width: 600px){
    #content-step1-1 a {
        width: 130px;
        display: -webkit-box;
    }
    #content-step1-1 {
        bottom:-40px;
    }

}

@media (max-width: 568px){
    #carousel1 .carousel-inner .item {
        min-height:500px;
    }

    #carousel2 .carousel-inner .item {
        min-height:520px;
    }
}

@media (max-width: 480px){

    #carousel1 .carousel-inner .item {
        min-height:446px;
    }

    #carousel2 .carousel-inner .item {
        min-height:470px;
    }

    .section1-background {
        padding: 65px 0 0;
    }
    .title-section-separator {
        background-position: 0px 68px;
    }
    
    .section1-background2 {
        padding: 0 0 0;
    }
    .title-section-separator2 {
        background-position: 0 5px;
    }

    h2.title-section {
        font-size: 26px;   
    }

    h3.title-section {
        font-size: 22px;
    }

    .p-section {
        font-size: 16px;
    }

    .p2-section {
        font-size: 17px;
        line-height: 21px;
    }

    .step1-mobile {
        margin: 20px auto;
        width: 80%;
    }
}

@media (max-width: 380px){

    #carousel1 .carousel-inner .item {
        min-height:220px;
    }

     #carousel2 .carousel-inner .item {
        min-height:455px;
    }
    
}