body {
    overflow-x: hidden; 
    font-size:18px; line-height: 150%;
    font-family: 'Poppins', sans-serif;
    color:#212529;
    background-color: #ffffff;
}


/* handle spacing for the "hero" page */
.showcase {
    position: relative;
    height: 100vh;
    display: flex;  /* to center all */
    flex-direction: column;  /* so we can use align-items */
    align-items: center;
    justify-content: center;    /*so the content is center in x and y*/
    /*text-align: center;*/
}
.showcase-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    
    min-height: 100%;
    overflow: hidden;
}


/* padding */
.dyn-sectionpadding {padding-top: 2.5rem; padding-bottom: 2.5rem;}
.dyn-transitionpadding {padding-top: 2rem; padding-bottom: 2rem;}
.dyn-transitionpadding-lg {padding-top: 4rem; padding-bottom: 0rem;}
.dyn-padding-1 {padding-top: 1.5rem; }
.dyn-headerpadding {padding-bottom: 1.5rem;}
.dyn-ourclientspadding {padding-top: 3rem; padding-top: 3rem;}


.dyn-font-tools {color:#ffffff; font-size: 1rem; background:#ffa400; }

.dyn-font-body{
    font-size:18px; line-height: 150%;
    font-family: 'Poppins', sans-serif;
    color:#212529;
}

.dyn-font-process {color: #ffa400; font-size: 1.1rem;  }
.dyn-font-subheading {font-size:1.3rem; font-weight:300;}

/* Manage responsive fonts  */
/* If the screen size is 1024px wide or more */
@media screen and (min-width: 993px) {
    .dyn-font-headerlargest {
        font-size:4.1rem; font-weight:700; color:#ffa400;
        line-height: 120%;
    }
    .dyn-font-headerlarge {font-size:3.0rem; font-weight: 700; line-height: 110%;}
    .dyn-font-header {font-size:2.5rem; font-weight: 700; line-height: 110%;}
    .dyn-font-header-nobold {font-size:2.4rem; font-weight: 200; line-height: 110%;}
    .dyn-font-header-smaller {font-size:2.0rem; font-weight: 600; line-height: 110%;}
    .dyn-font-subheader {font-size:1.6rem; color: #00bed6 ; line-height: 110%;}
    .dyn-font-textlarge {font-size:1.5rem; font-weight:600; line-height: 120%;}
    .dyn-font-plan {font-size:1.2rem;}
    .dyn-font-plan-orange {
        font-size:1.2rem; font-weight:600; 
        line-height: 110%;
        color: white; background:#ffa400;
    }
    .dyn-font-title {font-size:1.1rem; line-height: 140%; font-weight: 600;}
    .dyn-font-title-met {font-size:1.1rem; line-height: 140%; font-weight: 600;}
    .dyn-font-text {font-size:1.1rem; line-height: 140%; font-weight: 200;}
    .dyn-font-email {font-size:1rem; line-height: 140%;color:#212529;}

    .dyn-border-black-right { border-right: 1px solid #000000; }

    /*-new-*/
    .dyn-fullmiddle{height:100%;}

    .dyn-font-hero-big {font-size:4.25rem; line-height:100% }
    .dyn-font-hero {font-size:4rem; line-height:100% }
    .dyn-font-transition {font-size: 4rem; font-weight: 700; line-height: 125%;}
    .dyn-font-energy {font-size: 5.75rem; font-weight: 900; line-height: 125%;}
    .dyn-font-cdt {font-size:4rem;  font-weight: 900;}
    .dyn-font-muestra {font-size:7rem;  font-weight: 900;}
    .dyn-font-section {font-size:4.5rem; font-weight: 700; line-height: 110%;}
    .dyn-font-email2 {font-size:1rem; line-height: 140%;color:#ffffff;}
    .dyn-font-h2 {font-size:1.5rem; font-weight: 500; }
    .dyn-font-orange-we {color:inherit;}

    .dyn-border-orange-right {    border-right: 3px solid #ffa400; }
    .dyn-border-orange-bottom {     border-bottom: 3px solid #ffa400;  }
    
}


/* If the screen size is between 769px-1023px wide, set the font-size of <div> to 30px */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .dyn-font-headerlargest {
        font-size:3rem; font-weight:700; color:#ffa400;
        line-height: 120%;
    }
    .dyn-font-headerlarge {font-size:2.75rem; font-weight: 600; line-height: 110%;}
    .dyn-font-header {font-size:2.25rem; font-weight: 600; line-height: 110%;}
    .dyn-font-header-nobold {font-size:2.1rem; font-weight: 200; line-height: 110%;}
    .dyn-font-header-smaller {font-size:1.8rem; font-weight: 600; line-height: 110%;}
    .dyn-font-subheader {font-size:1.5rem; color: #00bed6 ; line-height: 110%;}
    .dyn-font-textlarge {font-size:1.4rem; font-weight:500; line-height: 120%;}
    .dyn-font-plan {font-size:1.1rem;}
    .dyn-font-plan-orange {
        font-size:1.rem; font-weight:600; 
        line-height: 110%;
        color: white; background:#ffa400;
    }
    .dyn-font-title {font-size:1.1rem; line-height: 140%; font-weight: 600;}
    .dyn-font-title-met {font-size:1.1rem; line-height: 140%; font-weight: 600;}
    .dyn-font-text {font-size:1rem; line-height: 140%; }
    .dyn-font-email {font-size:.8rem; line-height: 140%; }

    .dyn-border-black-right { border-right: 1px solid #000000; }
    

    /*-new-*/
    .dyn-fullmiddle{height:50%;}

    .dyn-font-hero-big {font-size:4.0rem; line-height:100% }
    .dyn-font-hero {font-size:3.75rem; line-height:100% }
    .dyn-font-energy {font-size: 4.4rem; font-weight: 900; line-height: 100%;}
    .dyn-font-cdt {font-size:3rem;  font-weight: 900;}
    .dyn-font-muestra {font-size:4rem;  font-weight: 900;}
    .dyn-font-section {font-size:3rem; font-weight: 700; line-height: 110%;}
    .dyn-font-email2 {font-size:.8rem; line-height: 140%; color:#ffffff;}
    .dyn-font-h2 {font-size:1.5rem; font-weight: 500; }
    .dyn-font-orange-we {color:inherit;}

    .dyn-border-orange-right {    border-right: 3px solid #ffa400; }
    .dyn-border-orange-bottom {     border-bottom: 3px solid #ffa400;  }
    
}


/* If the screen size is between 601px-768px wide, set the font-size of <div> to 30px */
@media screen and (min-width: 577px) and (max-width: 768px) {
    .dyn-font-headerlargest {
        font-size:3rem; font-weight:700; color:#ffa400;
        line-height: 120%;
    }
    .dyn-font-headerlarge {font-size:2.25rem; font-weight: 600; line-height: 110%;}
    .dyn-font-header {font-size:2.0rem; font-weight: 600; line-height: 110%;}
    .dyn-font-header-nobold {font-size:1.8rem; font-weight: 200; line-height: 110%;}
    .dyn-font-header-smaller {font-size:1.6rem; font-weight: 600; line-height: 110%;}
    .dyn-font-subheader {font-size:1.5rem; color: #00bed6 ; line-height: 110%;}
    .dyn-font-textlarge {font-size:1.2rem; font-weight:500; line-height: 120%;}
    .dyn-font-plan {font-size:1.2rem;}
    .dyn-font-plan-orange {
        font-size:1.rem; font-weight:600; 
        line-height: 110%;
        color: white; background:#ffa400;
    }
    .dyn-font-title {font-size:1.1rem; line-height: 140%; font-weight: 600;}
    .dyn-font-title-met {font-size:1.2rem; line-height: 140%; font-weight: 600;}
    .dyn-font-text {font-size:1rem; line-height: 140%; }
    .dyn-font-email {font-size:.8rem; line-height: 140%; }

    .dyn-border-black-right { border-right: 1px solid #000000; }

    /*-new-*/
    .dyn-fullmiddle{height:50%;}

    .dyn-font-hero-big {font-size:3.75rem; line-height:100% }
    .dyn-font-hero {font-size:3.5rem; line-height:100% }
    .dyn-font-energy {font-size: 4rem; font-weight: 900; line-height: .75;}
    .dyn-font-cdt {font-size:2.5rem;  font-weight: 900;}
    .dyn-font-muestra {font-size:3rem;  font-weight: 900;}
    .dyn-font-section {font-size:3rem; font-weight: 700; line-height: 110%;}
    .dyn-font-h2 {font-size:1.5rem; font-weight: 500; }
    .dyn-font-email2 {font-size:1rem; line-height: 140%; color:#ffffff;}
    .dyn-font-orange-we {color:inherit;}

    .dyn-border-orange-right {    border-right: 3px none #ffa400; }
    .dyn-border-orange-bottom {     border-bottom: 1px solid #ffa400;  }
    
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 576px) {
    .dyn-font-headerlargest {
        font-size:2.0rem; font-weight:700; color:#ffa400;
        line-height: 120%;
    }
    .dyn-font-headerlarge {font-size:1.75rem; font-weight: 600; line-height: 110%;}
    .dyn-font-header-nobold {font-size:1.2rem; font-weight: 200; line-height: 110%;}
    .dyn-font-header-smaller {font-size:1.1rem; font-weight: 600; line-height: 110%;}
    .dyn-font-subheader {font-size:1.2rem; color: #00bed6 ; line-height: 110%;}
    .dyn-font-header {font-size:1.3rem; font-weight: 600; line-height: 110%;}
    .dyn-font-textlarge {font-size:1.1rem; font-weight:500; line-height: 120%;}
    .dyn-font-plan {font-size:.75rem;}
    .dyn-font-plan-orange {
        font-size:0.8rem; font-weight:600; 
        line-height: 110%;
        color: white; background:#ffa400;
    }
    .dyn-font-title {font-size:.85rem; line-height: 140%; font-weight: 600;}
    .dyn-font-title-met {font-size:1.1rem; line-height: 140%; font-weight: 600;}
    .dyn-font-text {font-size:.85rem; line-height: 150%;}
    .dyn-font-email {font-size:0.75rem; line-height: 140%; color:#212529;}

    .dyn-border-black-right { color:inherit;}

    /*-new-*/
    .dyn-fullmiddle{height:50%;}

    .dyn-font-hero-big {font-size:2rem; line-height:100% }
    .dyn-font-hero {font-size:1.5rem; line-height:100% }
    .dyn-font-energy {font-size: 3rem; font-weight: 900; line-height: 100%;}
    .dyn-font-cdt {font-size:2rem;  font-weight: 900;}
    .dyn-font-muestra {font-size:3rem;  font-weight: 900;}
    .dyn-font-section {font-size:2.5rem; font-weight: 700; line-height: 110%;}
    .dyn-font-email2 {font-size: .9rem; line-height: 140%; color:#ffffff;}
    .dyn-font-h2 {font-size:1.5rem; font-weight: 500; }
    .dyn-font-orange-we {color:#ffa400}
    
    .dyn-border-orange-right {    border-right: 3px none #ffa400; }
    .dyn-border-orange-bottom {     border-top: 1px none #ffa400;  }
    
    .dyn-border-no-sm {border:none !important}
}

.dyn-font-email2:hover {color:#ffffff !important; }


/* section borders  */
@media screen and (min-width: 768px) {
    .dyn-responsive-border{ border-top: 0px; }
}
@media screen and (max-width: 767px) {
    .dyn-responsive-border{ border-top: 1px solid lightgray;  }
}


/* font colors */
.dyn-color-blue {color:#222154;}
.dyn-font-orange {color:#ffa400; }
.dyn-font-we-shadow{
    text-shadow: 0 0 2px rgba(255, 0, 0,0.9),
    0 15px 25px rgba(255, 0, 0, 0.3),
    0 -2px 3px rgba(255, 0, 0, 0.1),
    0 -5px 10px rgba(255, 0, 0, 0.5),
    0 5px 10px rgba(255, 164, 0, 0.5),
    0 3px 4px rgba(255, 0, 0, 0.2),
    0 0 20px rgba(255, 0, 0, 0.45) !important;
}

/* backgrounds */
.dyn-bggray {background-color: #E5E6E6;}
.dyn-bgblue {background-color: #222154;}
.dyn-bgdarkgray {background-color: #231f20;}
.dyn-bgwhite {background-color: #ffffff;}
.dyn-bgblack {background-color: #000000;}
.dyn-bgwhite-transparent {background: rgba(255, 255, 255, 0.8)}
.dyn-bgorange {background:#ffa400; }


/* form input */
.dyn-contact-field {
    border: 1px solid white;
    background: transparent;
    color:white !important;
}
.dyn-contact-field:focus{
    background: #1d252c;
}
input:autofill {
    -webkit-text-fill-color:white !important;
    -webkit-box-shadow: 0 0 0 1000px #1d252c inset !important;
    background-clip: content-box !important;
}
input:-webkit-autofill {
    -webkit-text-fill-color:white !important;
    -webkit-box-shadow: 0 0 0 1000px #1d252c inset !important;
    background-clip: content-box !important;
}




/* buttons  */
.dyn-btn-contact {
    background-color:  #ffa400; 
    color: white; 
    transition-duration: 0.4s;
    border: 2px solid #ffa400;
}
.dyn-btn-contact:hover {
    background-color: white; 
    color: #ffa400;
    border: 2px solid #ffa400;
}

/* effects */
.dyn-headline {
    background-color:  inherit; 
    color: inherit; 
    /*transition-duration: 0.4s;*/
}
.dyn-headline:hover > .dyn-border-orange-bottom {
    color: black ;     background: #ddd;    border-style:none;
}
.dyn-headline:hover > .dyn-border-orange-right {
    background: #f0f0f0;
}



.dyn-section {transition-duration: 0.4s; border: 1px solid rgba(255,255,255,.0);}
.dyn-section:hover { 
    border:1px solid #ffa400;
    /*transform: scale(1.0);*/
}
.dyn-border-light {transition-duration: 0.4s; border: 2px solid rgba(255,255,255,.0); background: inherit;}
.dyn-border-light:hover { 
    border:2px solid #000000;
    background:#fff;
    /*transform: scale(1.0);*/
}
.dyn-effect-show { color:inherit;} 
.dyn-effect-show:hover ~ .dyn-effect-show2 { 
    /*text-transform: uppercase;*/
    /*https://media.giphy.com/media/ctGFLebG1AqK4/giphy.gif);*/ /*sun*/
    background-image: url('https://media.giphy.com/media/ctGFLebG1AqK4/giphy.gif');
	background-size: cover;
    color: transparent;
	-moz-background-clip: text;
    -webkit-background-clip: text;
    text-shadow: none !important;
}
.dyn-effect-show2 { color:inherit;} 
.dyn-effect-show2:hover { 
    background-image: url('https://media.giphy.com/media/ctGFLebG1AqK4/giphy.gif');
	background-size: cover;
    color: transparent;
	-moz-background-clip: text;
    -webkit-background-clip: text;
    text-shadow: none !important;
} 


/* borders */
.dyn-border-red {border: 1px solid #E9575C; border-radius: 5px;}
.dyn-border-red-top {border-top: 1px solid #E9575C; }

.dyn-border-white-right {    border-right: 1px solid #ffffff; }
.dyn-border-white-left {    border-left: 1px solid #ffffff; }
.dyn-border-white-bottom {    border-bottom: 2px solid #ffffff; }
.dyn-border-orange {     border-bottom: 10px solid #ffa400; }

.dyn-border-orange-horizontal {
    border-top: 1px solid #ffa400; 
    border-bottom: 1px solid #ffa400; 
}

.dyn-border-orange-top {     border-top: 2px solid #ffa400; }

/* sizing */
.dyn-full-height{
    height:100%;
}
/* images sizing */
.dyn-image-center{
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0; bottom: 0; 
    left: 0; right: 0;
    margin: auto;        
}
.dyn-image-center1{
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0; bottom: 0; 
    left: 0; right: 0;
    margin: auto;        
}
.dyn-image-size-p1 {
    width: 100%; 
    /*height: 100%; */
    object-fit: contain; /*fit image to container without changing proportion*/
    padding: 0px;
}
.dyn-image-size-p2 {
    width: 100%; 
    /*height: 100%; */
    object-fit: contain; /*fit image to container without changing proportion*/
    padding: 20px;
}
.dyn-image-size-p0 {
    width: 100%; 
    height: 100%; 
    object-fit: contain; /*fit image to container without changing proportion*/
    padding: 20px 0px;
}


/* Box shadow */
.dyn-box-shadow {
    transition-duration: 0.4s;

    background-color: #f9f9f9;
    
    /*border: 1px solid #f3fDf6;*/
    border-color: #cad8cc;
    border-style: solid;
    border-width: 0px 3px 0px 0;

    border-radius: 5px;
    padding: 10px;
    /*box-shadow: 1px 2px 1px 2px #cad8cc;*/
    box-shadow: 0px 2px 0px 0px #cad8cc;
}
.dyn-box-shadow:hover {
    border-color: #ffa400;
    border-width: 0px 3px 0px 0px;
    box-shadow: 2px 2px 2px 2px #ffa400;
}

/* footer */
.dyn-link-social{     text-decoration: none !important; transition-duration: .3s;}
.dyn-link-social:hover {  
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    /*transform: translate3d(0, 0, 0);
    transform: scale(1.05) !important ;
    backface-visibility: hidden;
    perspective: 1000px;*/
}
@keyframes shake {
    10%, 90% {       transform: translate3d(-1px, 0, 0);     }
    20%, 80% {      transform: translate3d(2px, 0, 0);    }
    30%, 50%, 70% {      transform: translate3d(-3px, 0, 0);     }
    40%, 60% {      transform: translate3d(3px, 0, 0);     }
}
/* footer */



/* animation - text with gif in the bg  */
.dyn-energy {
    /*https://media.giphy.com/media/FZzbTJyRTwPuw/giphy.gif*/ /*lightning*/
    background-image: url('https://media.giphy.com/media/FZzbTJyRTwPuw/giphy.gif');
	background-size: cover;
    color: transparent;
	-moz-background-clip: text;
	-webkit-background-clip: text;
	/* text-transform: uppercase; */
	margin: 10px 0;
}

/* animation - text with gif in the bg  */
.dyn-sun {
    background-image: url(https://media.giphy.com/media/ctGFLebG1AqK4/giphy.gif);/*sun*/
    background-image: url(https://media.giphy.com/media/3o85xGFFW31jqtDgFW/giphy.gif);/*pixdust*/
    background-image: url(https://media.giphy.com/media/3ohzdKgSnQwjEbkxry/giphy.gif); /*lines*/
    background-image: url(https://www.uniper.energy/sites/default/files/gif%20home_reduced.gif);
    background-size: cover;
    /*color: rgba(255, 164, 0, 0.2);*/
    color:transparent;
	-moz-background-clip: text;
	-webkit-background-clip: text;
	/* text-transform: uppercase; */
    font-size: 4.5rem;
    font-weight: 900;
	/*margin: 10px 0;*/
}


/* Animation for carousel Nosotros */
/*Vertical Sliding*/
.slidingVertical{
    /* display: inline;*/
    margin-top: 8px;
    font-size: 1.1rem;
	/*text-indent: 8px;*/
}
.slidingVertical span{
	animation: topToBottom 15s linear infinite 0s;
	color: #ffa400;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical span:nth-child(2){	animation-delay: 2.5s;}
.slidingVertical span:nth-child(3){	animation-delay: 5s;}
.slidingVertical span:nth-child(4){	animation-delay: 7.5s;}
.slidingVertical span:nth-child(5){	animation-delay: 10s;}
.slidingVertical span:nth-child(6){	animation-delay: 12.5s;}
/*.slidingVertical span:nth-child(7){	animation-delay: 15s;}*/

@keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; transform: translateY(-50px); }
    10% { opacity: 1; transform: translateY(0px); }
    11% { opacity: 1; transform: translateY(3px); }
    12% { opacity: 1; transform: translateY(0px); }
	25% { opacity: 1; transform: translateY(0px); }
	30% { opacity: 0; transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

/*a*/


/* animation for nosotros v5*/
/* rotate */
/*
.dyn-we-effect{     color:inherit; }
.dyn-we-effect:hover > .dyn-we-effect-left { transform: rotate(0deg); }
.dyn-we-effect:hover > .dyn-we-effect-right { transform: rotate(0deg); }
.dyn-we-effect-left{     transform: rotate(-5deg);     transition-duration: 0.4s; }
.dyn-we-effect-right{     transform: rotate(5deg);     transition-duration: 0.4s; }
*/
/* translate x */
.dyn-we-effect{     transition-duration: 0.4s; }
.dyn-we-effect:hover { color:inherit; }
.dyn-we-effect:hover > .dyn-we-effect-left { transform: translateX(0px); background:#1d252c; color:white;}
.dyn-we-effect:hover > .dyn-we-effect-right { transform: translateX(0px); background:#1d252c; color:white;}
.dyn-we-effect-left{  
    border-top: 2px solid #ffa400;   border-bottom: 2px solid #ffa400;
    border-left: 2px solid #ffa400;   border-right: 0px solid #fff;
    transform: translateX(-10px);   transition-duration: 0.4s; }
.dyn-we-effect-right{     
    border-top: 2px solid #ffa400;   border-bottom: 2px solid #ffa400;
    border-left: 0px solid #fff;   border-right: 2px solid #ffa400;
    transform: translateX( 10px);  transition-duration: 0.4s; }

.dyn-we-effect2{ transition-duration: 0.4s; }
.dyn-we-effect2:hover { color: inherit; }
.dyn-we-effect2:hover > .dyn-we-effect-left2 { transform: translateX(0px); background:#1d252c; color:white;}
.dyn-we-effect2:hover > .dyn-we-effect-right2 { transform: translateX(0px); background:#1d252c; color:white;}
.dyn-we-effect-left2{  
    border-top: 2px solid #ffa400;   border-bottom: 2px solid #ffa400;
    border-left: 2px solid #ffa400;   border-right: 0px solid #fff;
    transform: translateX(-10px);   transition-duration: 0.4s; }
.dyn-we-effect-right2{     
    border-top: 2px solid #ffa400;   border-bottom: 2px solid #ffa400;
    border-left: 0px solid #fff;   border-right: 2px solid #ffa400;
    transform: translateX( 10px);  transition-duration: 0.4s; }

.dyn-we-effect3{ transition-duration: 0.4s; }
.dyn-we-effect3:hover { color: inherit; }
.dyn-we-effect3:hover > .dyn-we-effect-left3 { transform: translateX(0px); background:#1d252c; color:white;}
.dyn-we-effect3:hover > .dyn-we-effect-right3 { transform: translateX(0px); background:#1d252c; color:white;}
.dyn-we-effect-left3{  
    border-top: 2px solid #ffa400;   border-bottom: 2px solid #ffa400;
    border-left: 2px solid #ffa400;   border-right: 0px solid #fff;
    transform: translateX(-10px);   transition-duration: 0.4s; }
.dyn-we-effect-right3{     
    border-top: 2px solid #ffa400;   border-bottom: 2px solid #ffa400;
    border-left: 0px solid #fff;   border-right: 2px solid #ffa400;
    transform: translateX( 10px);  transition-duration: 0.4s; }

.dyn-we-effect4{ transition-duration: 0.4s; }
.dyn-we-effect4:hover { color: inherit; }
.dyn-we-effect4:hover > .dyn-we-effect-left4 { transform: translateX(0px); background:#1d252c; color:white;}
.dyn-we-effect4:hover > .dyn-we-effect-right4 { transform: translateX(0px); background:#1d252c; color:white;}
.dyn-we-effect-left4{  
    border-top: 2px solid #ffa400;   border-bottom: 2px solid #ffa400;
    border-left: 2px solid #ffa400;   border-right: 0px solid #fff;
    transform: translateX(-10px);   transition-duration: 0.4s; }
.dyn-we-effect-right4{     
    border-top: 2px solid #ffa400;   border-bottom: 2px solid #ffa400;
    border-left: 0px solid #fff;   border-right: 2px solid #ffa400;
    transform: translateX( 10px);  transition-duration: 0.4s; }