html {
overflow-x: hidden;
}
.no-scroll {
overflow: hidden; }
.img_wrapper {
height: 700px;
width: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
position: relative; }
.acclist {
list-style: none;
display: flex;
flex-direction: column;
padding: 5px;
width: 36px;
margin: 0;
}
.acclist a {
font-weight: 600;
color: #BAD405;
display: flex;
align-items: center;
border-radius: 8px;
transition: all .5s;
/* width: 180px; */
margin: 5px 0px;
text-decoration: none;
background: #fff;
min-height: 25px;
}
.acclist a:hover {
color: #333333;
}
.acclist span {
padding-left: 5px;
}
.buttons {
background: #BAD405;
display: block;
position: fixed;
top: 50%;
transform: translateY(-50%);
left: auto;
right: 0;
z-index: 200;
border-radius: 8px;
box-shadow: 0px 0px 10px 3px #0000002b;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.img_wrapper .info_home {
max-width: 1000px;
width: 100%;
margin: 250px auto 0;
display: block;
padding: 0 15px; }
@media screen and (max-width: 1023px) {
.img_wrapper .info_home {
margin: 320px auto 0;
padding: 0 5%; } }
.img_wrapper .info_home .last_news {
color: #BAD405;
font-size: 22px;
margin-bottom: 20px; }
.img_wrapper .info_home .title_last_news {
color: #fff;
font-size: 60px;
line-height: 120%;
font-weight: 400;
width: 90%;
margin-bottom: 20px;
text-shadow: 5px 0px 3px black;
}
@media screen and (max-width: 1023px) {
.img_wrapper .info_home .title_last_news {
font-size: 30px; } }
.img_wrapper .info_home .link_last_news {
width: auto;
height: auto;
padding: 5px 25px;
display: inline-block;
line-height: 50px !important;
font-size: 18px;
text-align: center;
color: #333333;
background: #BAD405;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px; }
@media screen and (max-width: 1023px) {
.img_wrapper .info_home .link_last_news {
font-size: 14px;
padding: 0px 25px; } }
.wrapper {
width: 100%;
display: block;
margin: 0 auto;
}
.header_inner{
max-width: 1420px;
margin: 0 auto;
max-width: calc(100vw - 30px);
}
.wrapper .menu {
width: 100%;
height: 74px;
position: absolute;
display: block;
z-index: 100000;
transition: all .2s ease-out;
padding: 0 0 5px; }
@media screen and (max-width: 1023px) {
.wrapper .menu {
display: flex;
justify-content: center;
align-items: center;
position: fixed; } }
.wrapper .menu.sticky {
transition: all .2s ease-out;
position: fixed;
background: #F1F2F2; }
.wrapper .menu.sticky .language {
border-left: 1px solid #333333 !important; }
@media screen and (max-width: 1023px) {
.wrapper .menu.sticky .language {
border-left: 0 !important; } }
.wrapper .menu.sticky #nav-icon span {
background: #333; }
.wrapper .menu.sticky .options_contact a,
.wrapper .menu.sticky .options_contact .select {
font-size: 14px; }
.wrapper .menu.sticky .options_contact .select span {
color: #333333; }
.wrapper .menu.sticky .select:hover {
background: url("../images/arrow_idioma_up.png") no-repeat 95% center;
background-size: 10px; }
@media screen and (max-width: 1023px) {
.wrapper .menu.sticky .select:hover {
background: none; } }
.wrapper .menu.sticky .logo {
background: url("../images/Eco_logo_1_Color-3.svg") no-repeat 0 0;
background-size: contain; }
.wrapper .menu.sticky > ul {
margin: 0; }
.wrapper .menu.sticky .header_inner > ul a {
color: #333333; }
.wrapper .menu.sticky .header_inner > ul a:hover {
color: #333333; }
.wrapper .menu .header_inner > ul > li .content_submenu h3 {
padding: 0 0 0 3.2%;
font-size: 20px;
flex: 0 1 100%;
margin-top: 0 !important;
padding: 0 0 0 3.2%;
font-size: 20px;
}
.wrapper .menu .close_menu {
display: flex;
width: 16px;
height: 16px;
background: url("../images/closed.png") no-repeat center;
background-size: contain;
position: absolute;
right: 16px;
top: 16px;
z-index: 300;
cursor: pointer;
border: none;
}
@media screen and (max-width: 1023px) {
.wrapper .menu .close_menu {
display: none !important; } }
.wrapper .menu .logo {
display: block;
float: left;
width: 166px;
height: 90px;
margin: 0 0 0 5px;
z-index: 10;
background: url("../images/Logo-Ecopetrol-blanco.svg") no-repeat 0 0;
background-size: contain; }
@media screen and (max-width: 1439px) {
.wrapper .menu .logo {
width: 150px;
margin: 0 0 0 2.5%; } }
@media screen and (max-width: 1300px) {
.wrapper .menu .logo {
width: 130px; } }
@media screen and (max-width: 1023px) {
.wrapper .menu .logo {
width: 128px;
display: block;
float: none; } }
.wrapper .menu .logo img {
width: 100%; }
.wrapper .menu .header_inner > ul {
float: right;
margin: 0;
list-style: none;
padding: 0;
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
width: calc(100% - 216px);
height: 74px; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul {
display: none;
background: #fff;
position: absolute !important;
height: auto !important;
flex-direction: column;
width: 100%;
left: 0;
}
.wrapper .menu.active .header_inner > ul{
display: flex !important;
}
.wrapper .menu .header_inner > ul.new-position {
top: 114px !important; } }
.wrapper .menu .header_inner > ul > li {
z-index: 10;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
width: 100%; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li {
overflow: hidden;
padding: 0 !important; }
.wrapper .menu .header_inner > ul > li.open .content_submenu {
display: flex; }
.wrapper .menu .header_inner > ul > li.active {
background: #E6E6E6; }
.wrapper .menu .header_inner > ul > li.active a {
font-weight: bold;
background: url("../images/arrow_up.png") no-repeat 95% center;
background-size: 10px; } }
.wrapper .menu .header_inner > ul > li > a {
color: #fff;
font-size: 14px;
text-decoration: none;
display: flex;
height: 74px;
border-top: 4px solid transparent;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: center;
width: 100%;
margin: 0;
cursor: pointer; }
.wrapper .menu .header_inner > ul > li > a.last_link {
font-weight: 400;
font-size: 12px;
line-height: 16px;
padding-right: 13px;
text-align: right;}
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li > a.last_link {
text-align: left !important;
}
}
.wrapper .menu .header_inner > ul > li > a:hover {
border-top: 4px solid #BAD405;
color: #fff; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li > a:hover {
border-top: 4px solid transparent;
font-weight: bold;
background: url("../images/arrow_up.png") no-repeat 95% center;
background-size: 10px; } }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li > a {
font-size: 14px;
font-weight: 400;
text-align: left;
background: url("../images/arrow_down.png") no-repeat 95% center;
background-size: 10px;
padding-left: 24px !important;
margin: 0;
height: 46px;
color: #333333 !important;
border-top: 0;
padding-top: 4px; }
.wrapper .menu .header_inner > ul > li > a.active {
background: url("../images/arrow_up.png") no-repeat 95% center;
background-size: 10px;
font-weight: bold; } }
.wrapper .menu .header_inner > ul > li .content_submenu {
position: fixed;
margin: 0 auto;
width: 100vw;
right: 0;
top: 74px;
height: 424px;
display: none; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu {
position: relative;
float: left;
overflow: hidden;
top: 0px;
max-height: initial;
height: auto !important;
width: calc(100vw + 15px); } }
.wrapper .menu .header_inner > ul > li .content_submenu.show {
display: flex !important; }
.wrapper .menu .header_inner > ul > li .content_submenu.hide {
display: none !important; }
.wrapper .menu .header_inner > ul > li .content_submenu .bg_submenu {
display: flex;
max-height: 486px;
position: absolute;
left: 0;
background-size: cover;
height: 424px;
width: 35%; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu .bg_submenu {
display: none; } }
.wrapper .menu .header_inner > ul > li .content_submenu h3, .wrapper .menu .header_inner > ul > li .content_submenu h2 {
padding: 0 0 0 3.2%;
font-size: 20px; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu h3, .wrapper .menu .header_inner > ul > li .content_submenu h2 {
padding: 15px 0;
text-align: left;
height: auto;
font-size: 14px; } }
.wrapper .menu .header_inner > ul > li .content_submenu h3 {
line-height: 47px;
height: 55px; }
.submenu_list {
flex: 1 0 100% !important;
}
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu h3 {
display: none; } }
.wrapper .menu .header_inner > ul > li .content_submenu h2 {
font-size: 24px;
font-weight: bold;
height: 55px;
width: 100%;
margin: 0px 0 10px;
border-bottom: 0px solid transparent; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu h2 {
display: none; } }
.wrapper .menu .header_inner > ul > li .content_submenu > ul {
background: #fff;
display: none;
padding: 38px 0 0;
margin: 0;
position: absolute;
right: 0;
width: 73.66%;
height: 100%;
max-height: 486px;
display: flex;
flex-direction: column; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu > ul {
position: relative;
top: 0;
background: transparent;
margin: 0;
padding: 10px 0;
width: 100%; } }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li {
width: 32%;
display: block;
float: none;
border: none;
text-align: left; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li {
padding: 0;
width: 100%; }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li.active {
background-color: #E6E6E6; }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li.active a {
font-weight: bold;
background: url("../images/arrow_up.png") no-repeat right center !important;
background-size: 10px !important; }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li.active .submenu {
display: flex !important; } }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li a {
display: block;
background: #fff;
background-size: 6px;
margin-left: 20px;
padding: 8px 10px;
width: 100%;
color: #333333;
border-bottom: none;
font-size: 14px;
border: none;
background: url("../images/arrow_decor.png") no-repeat left;
background-size: 4px;
cursor: pointer;
}
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li a {
font-size: 12px;
font-weight: bold;
line-height: 16px;
background: url("../images/arrow_down.png") no-repeat right !important;
background-size: 10px !important;
padding-right: 15px;
width: 82%;
display: block; } }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li a:hover {
background: url("../images/arrow_decor_g.png") no-repeat left;
background-size: 4px;
border-bottom: none;
border-top: none;
color: #ADC200;
text-decoration: underline;
font-weight: bold; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li a:hover {
background-size: 10px;
padding-right: 15px;
width: 82%;
display: block;
color: #333333;
text-decoration: none; } }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li .submenu {
width: 65%;
padding: 0px 0 0 3%;
right: 0px;
top: 38px;
background: url("../images/decor_ul.png") no-repeat left top;
background-size: 13px;
position: absolute;
height: 300px;
list-style: none;
display: none;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start; }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li .submenu.show {
display: flex; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li .submenu.show {
background-color: #E6E6E6; } }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li .submenu h3 {
flex: 0 1 100%; }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li .submenu li {
flex: 1 0 50%; }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li .submenu li {
flex: 1 !important; } }
@media screen and (max-width: 1023px) {
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li .submenu {
position: relative;
top: 0;
background: transparent;
padding: 0 0 0 5%;
width: 100%;
height: auto;
flex: 1 !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
display: none !important; }
.wrapper .menu .header_inner > ul > li .content_submenu > ul > li .submenu a {
background: url("../images/arrow_decor.png") no-repeat left !important;
background-size: 4px !important;
border-bottom: none;
border-top: none;
color: #333333;
text-decoration: underline;
font-weight: 400;
text-decoration: none; } }
.wrapper .menu.active {
overflow: hidden; }
.wrapper .menu.active.menu {
overflow: initial;
transition: all .2s ease-out;
position: fixed;
background: #F1F2F2; }
.wrapper .menu.active.menu .language {
border-left: 1px solid #333333 !important; }
@media screen and (max-width: 1023px) {
.wrapper .menu.active.menu .language {
border-left: 0 !important; } }
.wrapper .menu.active.menu #nav-icon span {
background: #333; }
.wrapper .menu.active.menu .options_contact a,
.wrapper .menu.active.menu .options_contact .select {
font-size: 14px; }
.wrapper .menu.active.menu .options_contact .select span {
color: #333333; }
.wrapper .menu.active.menu .select:hover {
background: url("../images/arrow_idioma_up.png") no-repeat 95% center;
background-size: 10px; }
@media screen and (max-width: 1023px) {
.wrapper .menu.active.menu .select:hover {
background: none; }
.wrapper .menu.active.menu > ul {
padding-bottom: 50px !important;
}
}
.wrapper .menu.active.menu .logo {
background: url("../images/Eco_logo_1_Color-3.svg") no-repeat 0 0;
background-size: contain; }
.wrapper .menu.active.menu > ul {
margin: 0; }
.wrapper .menu.active.menu .header_inner > ul > li a {
color: #333333; }
.wrapper .menu.active.menu .header_inner > ul > li a:hover {
color: #333333; }
.wrapper .menu.active.menu > ul {
float: none;
display: block;
width: 100%;
margin: 0;
text-align: center;
background: #F1F2F2;
height: 510px !important;
z-index: 1000;
position: absolute !important;
padding: 0;
top: 74px;
overflow: auto; }
.wrapper .menu.active.menu > ul.new_position {
top: 114px; }
.wrapper .menu.active.menu > ul.select_language {
display: none; }
.wrapper .menu.active.menu > ul.select_language:hover {
display: block; }
.wrapper .menu.active.menu .header_inner > ul > li {
width: 100%;
float: none;
display: block;
padding: 10px 0;
margin: 0px 0 0; }
.wrapper .menu.active #nav-icon span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%; }
.wrapper .menu.active #nav-icon span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.wrapper .menu.active #nav-icon span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.wrapper .menu.active #nav-icon span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%; }
.wrapper #nav-icon {
width: 16px;
height: 16px;
position: absolute;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
top: 35px;
left: 17px;
display: none; }
@media screen and (max-width: 1023px) {
.wrapper #nav-icon {
display: block; } }
.wrapper #nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #fff;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out; }
.wrapper #nav-icon span:nth-child(1) {
top: 0px; }
.wrapper #nav-icon span:nth-child(2), .wrapper #nav-icon span:nth-child(3) {
top: 6px; }
.wrapper #nav-icon span:nth-child(4) {
top: 12px; }
.wrapper .options_contact {
height: 74px;
cursor: pointer; }
@media screen and (max-width: 1023px) {
.wrapper .options_contact.desktop {
display: none !important; } }
@media screen and (max-width: 1023px) {
.wrapper .options_contact {
display: none; } }
.wrapper .options_contact a, .wrapper .options_contact .select {
color: #333333;
font-size: 20px; }
.wrapper .options_contact a:hover, .wrapper .options_contact .select:hover {
font-weight: bold; }
.wrapper .options_contact a {
text-transform: uppercase;
color: #333333;
font-size: 16px;
font-weight: bold;
line-height: 19px; }
.wrapper .options_contact .select {
background: url("../images/arrow_idioma.png") no-repeat right center;
background-size: 10px;
display: flex;
height: 74px;
margin-right: 15px;
justify-content: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.wrapper .options_contact .select {
border-left: 1px solid transparent;
background: none;
margin-right: 8px; } }
.wrapper .options_contact .select .language {
font-size: 10px;
color: #fff;
padding: 0 15px;
position: relative;
display: flex;
align-items: center;
border-left: 1px solid #ffffff;
height: 20px; }
@media screen and (max-width: 1023px) {
.wrapper .options_contact .select .language {
border-left: 0;
padding: 0; } }
.wrapper .options_contact .select .language img {
height: 20px;
width: 20px;
margin: 0 8px 0 0; }
.wrapper .options_contact .select .language span {
font-size: 14px;
line-height: 1;
margin-right: 8px; }
@media screen and (max-width: 1023px) {
.wrapper .options_contact .select .language span {
display: none; } }
.wrapper .options_contact .select .select_language {
position: absolute;
display: none;
text-align: center;
background: #BAD405;
z-index: 100;
width: 253px;
border-radius: 10px 0 0 10px;
top: 74px;
height: 40px;
right: 0;
list-style: none;
justify-content: flex-end;
padding-left: 50px;
margin: 0; }
.wrapper .options_contact .select .select_language.show {
display: flex; }
@media screen and (max-width: 1023px) {
.wrapper .options_contact .select .select_language {
display: none;
width: 100%;
position: fixed !important;
left: 0;
border-radius: 0;
z-index: 1001; } }
.wrapper .options_contact .select .select_language > li {
padding-right: 16px;
display: flex;
align-items: center; }
.wrapper .options_contact .select .select_language > li > a {
height: 40px;
padding: 6px;
border-top: 4px solid transparent;
color: #333333;
font-size: 16px;
font-weight: bold;
line-height: 19px;
font-family: 'Roboto', sans-serif; }
@media screen and (max-width: 1023px) {
.wrapper .options_contact .select .select_language > li > a {
background: none; } }
.wrapper .options_contact .select .select_language > li > a.active, .wrapper .options_contact .select .select_language > li > a:hover {
border-top: 4px solid #333;
text-decoration: none; }
.wrapper .options_contact.mobile {
display: none; }
@media screen and (max-width: 1023px) {
.wrapper .options_contact.mobile {
display: block;
border: none;
width: auto;
position: absolute;
right: 0;
top: 0px;
padding: 30px 0 30px 0 !important; } }
.wrapper .options_contact.mobile a {
display: block;
text-align: center;
font-family: 'Roboto-Medium';
text-transform: normal;
padding: 10px 0;
font-size: 15px; }
.wrapper .options_contact.mobile a:hover {
font-family: 'Roboto-Medium'; }
.wrapper .options_contact.mobile .select {
display: block;
padding: 0;
font-family: 'Roboto-Medium' !important;
font-size: 15px; }
.wrapper .options_contact.mobile .select us
span {
display: none;
text-align: center; }
.wrapper .options_contact.mobile .select > ul > li {
border: none !important; }
.box_search {
width: 100%;
position: absolute;
height: 75px;
top: 0;
background-color: #F1F2F2;
box-shadow: 0px 5px 10px #ccc;
z-index: 10;
display: none; }
.box_search.show {
display: block; }
.box_search .closed_search {
height: 16px;
width: 16px;
background: url("../images/closed.png") no-repeat center;
background-size: contain;
margin: 21px 1px;
position: absolute;
right: 24px;
top: 6px; }
.box_search input {
height: 50px;
width: calc(100% - 30px);
margin: 10px 15px;
float: left;
padding: 0 20px;
border-radius: 7px;
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
border: 0; }
.search_icon {
width: 30px;
height: 20px;
background: url("../images/icon_search.png") no-repeat center;
background-size: contain;
margin: 21px 1px;
position: absolute;
top: 8px;
right: 39px;
display: none; }
.search_icon.show {
display: block; }
.wrapper .menu .header_inner > ul > li > a.last_link:hover {
border-top: 4px solid transparent !important;
background: transparent !important; }
.wrapper .menu.sticky .select:hover {
background: url(../images/arrow_idioma_up.png) no-repeat 95% center;
background-size: 10px; }
.activeLeng{
visibility: hidden;
}
@media screen and (max-width: 1023px) {
.wrapper .menu.sticky .select:hover {
background: none;
}
}
@media screen and (max-width: 425px){
.wrapper .menu .logo {
background: url(../images/Eco_logo_1_Color-3.svg) no-repeat 0 0;
}
}