@font-face {
    font-family: 'NewJune';
    src: url("../fonts/newjuneregular-webfont.woff") format("woff");
	font-weight: normal;
}

@font-face {
    font-family: 'NewJune';
    src: url("../fonts/newjune-semi-bold.woff") format("woff");
	font-weight: bold;
}


body {
    color: black;
    font-family: 'NewJune', Arial;
}
html, body{

}
.simulator {
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.background-page{
    
}
.container {
    height:100%;

}
.container-fluid{
    padding-left:0px !important;
    padding-right:0px !important;
}
.internalContainer {
    height:100%;
    width: 100%;
}

/* GENERAL UTILS */
.no-padding-sides {
    padding-right: 0px !important;
    padding-left: 0px !important;
}
.highlight {  
    transition: color 0.3s linear; 
}
.highlight[class*="-add"] { 
  color:#9f0953;
}

/* Sliders */
.slider-angle{
    padding: 0px 0px 0px 6px;
    line-height: 0px;   
    color: white;
}
.ui-slider-handle {
    cursor: pointer !important;
    outline: none;
}

   .ui-slider-handle.ui-state-default {
        background: #421744 url("../rcs/LaboralKutxa/Right_Angle.png");
        background-size: 15px 15px;
        background-repeat: no-repeat;
        background-position: 2px 1px; /*Horizontal - Vertical*/
        width: 20px !important;
        height: 20px;
        border: 1px solid #666666; /*Circle border color*/
        margin-left: -3px;
        margin-top: 3px;
        z-index: 99999;
        line-height: 0px; /* CENTER ANGLE */
        padding-top: 1.4px; /* CENTER ANGLE */
    }

.ui-slider-horizontal .ui-slider-range {
    border-radius: 5px;
    background: #421744; /*Slider range color*/
}

.ui-slider-horizontal .ui-slider-handle {
    bottom: -6px;
    top: -10px;
    margin-left: -12px;
}

.ui-slider-horizontal {
    height: 8px;
}

.scaleStep {
    float: left;
    border-left: 1px solid #d1d1d0;
    height: 10px;
    position: relative;
    top: -15px;
}

.scaleSubStep {
    float: left;
    border-right: 1px solid #000000;
    height: 5px;
}

.scaleNumber {
    font-size: 12px;
    color: #686663;
    margin-top: -16px;
    margin-left: -6px;
}

.scaleNumberFirst {
    margin-left: -6px;
}

.scaleNumberLast {
    margin-left: -47px;
    text-align: right;
}

.labelValue {
    position: absolute;
    color: #FFFFFF;
    left: 0px;
    font-size: 11px;
    display: block;
    text-align: center;
    width: 100%;
    top: 6px;
}

.currency {
    float: left;
    margin-top: 1px;
    margin-left: 1%;
    width: 3%;
}

.labelSlider {
    float: left;
    color: #434A58;
    width: 100%;
    font-size: 23px;
    padding-bottom: 10px;
}

.contentSlider {
    float: left;
    width: 100%;
}

.inputSlider {
    border: 1px solid #9d9b99;
    background: #e8e8e8;
    color: #363636;
    font-size: 36px;
    text-align: right;
    margin-top: 11px;
    margin-bottom: 7px;
}

.inputSlider.result {
    margin-top: 25px;
}

.iOS .inputSlider {
    background: url("../rcs/inputEurDark.png") no-repeat 160px 5px #FFFFFF;
}

.inputSlider.years {
    width: 110px;
    padding-right: 69px;
    background: url("../rcs/inputYearsDark.png") no-repeat 115px -2px #FFFFFF;
}

.iOS .inputSlider.years {
    background: url("../rcs/inputYearsDark.png") no-repeat 130px 5px #FFFFFF;
}

.trianguloSliderInput {
    height: 0;
    position: relative;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid #434a58;
    float: left;
    left: 8px;
    top: 18px;
}

.trianguloInput {
    height: 0;
    position: relative;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid #434a58;
    float: left;
    left: 2px;
    top: 20px;
}

.slider {
    width: 530px;
    margin-top: 25px;
    float: left;
}
/*End sliders*/

/* END GENERAL UTILS */

/**********************/
/***     TITLE      ***/
/**********************/


/**********************/
/***   END TITLE    ***/
/**********************/

/**********************/
/*** MAIN CONTAINER ***/
/**********************/

.langs {
    display: flex;
    justify-content: end;
    margin-top: .35rem;
    margin-bottom: .1rem;
}

    .langs .lang {
        text-decoration: none;
        color: #7b0b56;
        margin-right: 1rem;
        font-size: 13px;
    }

        .langs .lang:last-child {
            margin-right: 3rem;
        }

        .langs .lang:hover {
            color: #ac0a5e;
            text-decoration: underline;
            cursor: pointer;
        }

.header {
    background: linear-gradient(90deg, #51284F, #A50050);
    height: 88px;
    display:flex;
    align-items:center;
}

    .header .logo {
        background-repeat: no-repeat;
        height: 48.24px;
        background-size: 100%;
        background-position-y: 50%;
        background-image: url("../rcs/LaboralKutxa/logo_lk.svg");
        width: 200px;
        margin-left: 2.5em;
    }

.mainContainer {
    padding: 60px 93px 70px 93px;
    float: left;
    width: 100%;
    color: #421744;
} 
.generalSectionTitle {
    padding: 0px 20px 0px 20px;
    width: 100%;
    font-size: 30px;
}

.line-separator-input {
    height: 2px;
    background: white;
    border-bottom: 1px solid rgba(193, 189, 179);
    float: left;
    width: 100%;
}

.line-separator-output {
    background:#421744;
    float:left;
    width: 100%;
}

.line-separator-title {
    margin-top:6px;
    height:1px;
    border-bottom:1px solid black;
    float:left;
    width: 100%;
}
.sectionHeader{
    font-size: 18px;
}
.rowHeader{
    margin: 0px 0px 5px 4px;
    font-size: 16px;
}
input {
    text-align: right;
}
.input-md{
    border: 1px black #421744;
    font-size: 11px;
    font-size: 18px;
    color: #48194d;
    font-weight: bold;
    height: 40px;
}
.errorMsg{
    padding: 5px 0px 0px 0px;
    margin-bottom: 5px;
    text-align: left;
    color: red;
}
.fullWidth{
    width: 100% !important;
}
.initialTitle{
    padding: 0px 10% 0px 10%;
}
.initialLeft{
    float: left;
    width: 50%;
    padding-left: 10%;
}
.initialRight{
    float: left;
    width: 50%;
    padding-right: 10%;
}
/* Left section */
.leftSection {
    padding: 28px 20px 10px 20px;
    position: relative;
    width: 33.33%;
    float:left;
}

.w-100 {
    width: 100% !important;
}

.rowInput {
    padding: 10px 0px 10px 0px;
    width: 100%;
    float: left;
}
.rowInput {
    clear: both;
}
.rowContent{
    padding: 5px 0px 0px 13px;
}
.row3Content {
    position:relative;
    padding: 0px 0px 0px 0px;
}
.row4Content {
    padding: 8px 0px 0px 12px;
}
.row2 {
    padding: 20px 0px 0px 0px;
}
.row3{
    margin: 0px 0px 10px 0px;
    padding: 20px 0px 0px 0px;
}
.row4{
    margin: 0px 0px 20px 0px;
    padding: 20px 0px 0px 0px;
}
.inputSection {
    text-align:right;
    padding: 0px 0px 10px 10px;
    clear:both;
} 

.initialLeft .inputSection, .initialRight .inputSection {
    
}

.inputSectionModify{
    text-align:right;
    padding: 0px 0px 10px 10px;
    clear:both;
}
.inputLabel {
    text-align: left;
    padding: 8px 0px 5px 2px;
}
.inputV2 .left{
    padding: 5px 0px 0px 5px;
   width: 15%;
   float: left;
}
.inputV2 .right{
    padding: 5px 0px 0px 13px;
    font-size: 10px;
    width: 85%;
    float: left;
}
.inputContent {
    padding: 0px 10px 0 0px;
    width: 100%;
}
.infoAge{
   float:left;
   width: 50%;
}
.infoSex {
    padding: 0px 0px 0px 10px;
    float:left;
    width: 50%;
}  
.infoResidence{
    float:left;
    width: 50%;
} 
.infoChildren{
    padding: 0px 0px 0px 10px;
     float:left;
     width: 50%;
}
.modifyButton{
    color: #421744;
     padding-right: 23px;
     font-size: 10px;
}
#confirmButton{
    border:none;
    margin-top: 10px;
    font-weight: bold;
    padding: 10px 20px 10px 20px;
    color:white;
    background: #b5096f;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b5096f), color-stop(100%, #a11d6c));
    background: -webkit-linear-gradient(top, #b5096f, #a11d6c);
    background: -moz-linear-gradient(top, #b5096f, #a11d6c);
    background: -o-linear-gradient(top, #b5096f, #a11d6c);
    background: linear-gradient(top, #b5096f, #a11d6c);

}
#confirmButton:hover{
    border:none;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a11d6c), color-stop(100%, #b5096f));
    background: -webkit-linear-gradient(top, #a11d6c, #b5096f);
    background: -moz-linear-gradient(top, #a11d6c, #b5096f);
    background: -o-linear-gradient(top, #a11d6c, #b5096f);
    background: linear-gradient(top, #a11d6c, #b5096f);
}
#confirmButton:active{
    text-decoration: none;
    border:none;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a11d6c), color-stop(100%, #b5096f));
    background: -webkit-linear-gradient(top, #a11d6c, #b5096f);
    background: -moz-linear-gradient(top, #a11d6c, #b5096f);
    background: -o-linear-gradient(top, #a11d6c, #b5096f);
    background: linear-gradient(top, #a11d6c, #b5096f);
}
#savingsSlider{
    width: 52%;
    float: left;
    margin: 18px 0px 0px 0px;
}
.savingsBox {
    margin: 0px 0px 20px 0px;
    padding: 3px 0px 0px 4px;
    width: 48%;
    float: left;
}
#savingsInput {
    border: 1px #421744 solid; 
    margin-left: 5px;
    width: 100%;
    float: left;
}
#helpCodeSavings {
    margin: 5px 0px 0px 5px;
    width: 20%;
    float: left;
}
#salarySlider{
    width: 52%;
    float: left;
    margin: 18px 0px 0px 0px;
}
.salaryBox {
    margin: 0px 0px 20px 0px;
    padding: 3px 0px 0px 4px;
    width: 48%;
    float: left;
}
#salaryInput {
    border: 1px #421744 solid; 
    margin-left: 5px;
    width: 100%;
    float: left;
}
#helpCodeSalary {
    margin: 5px 0px 0px 5px;
    width: 20%;
    float: left;
}
#profileCarousel {
    cursor: move;
     width: 108%;
     float: left;
     left: -10px;
     margin-bottom: 10px;
}
.carousel-control {
    background-image: none !important;
}
.carousel-control .glyphicon-chevron-left:before {
    margin: 4px 0px 0px 5px;
    cursor: pointer;
    content: " ";
    display:block;
    background:url("../rcs/LaboralKutxa/Arrow_left_ON.png") no-repeat;
    width:100%;
    height:30px;
}
.carousel-control .glyphicon-chevron-right:before {
    margin: 4px 0px 0px 10px;
    cursor: pointer;
    content: " ";
    display:block;
    background:url("../rcs/LaboralKutxa/Arrow_right_ON.png") no-repeat;
    width:100%;
    height:30px;
}
.carousel-indicators li { visibility: hidden; }
.profileItem{
    padding: 5px 15% 10px 10%;
    height: 70px;
}
.profileImageContainer{
    height: 100%;
    float:left;
    width: 20%;
}
#wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}
.profileImage {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
    vertical-align: middle;
   text-align: center;
   width: 100%;
   height: 100%;
}
.profileDescription{
    -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
    font-size: 10px;
    padding: 5px 0px 0px 10px;
    text-align:left;
    width: 100%;
    float:left;
}
/* End Left section */

/* Right section */
.rightSection{
    padding: 28px 20px 10px 60px;
    position: relative;
    width: 66.66%;
    float:left;
}
.rowOutput{
    clear:both;
}
.rowPad{
    margin: 0px 0px 61px 0px;
}
.sectionPad {
    padding: 16px 0px 0px 0px;
}
.rowPadContent{
    padding: 2px 0px 0px 13px;
}
.padBox {
    width: 30%;
    float: left;
    padding: 0px 0px 0px 10px;
}
#padSlider {
    margin: 17px 0px 0px 0px;
    width: 70%;
    float: left;
}
#padInput {
    border: 1px #421744 solid;
    width: 100%;
    float: left;
}
#helpCodePad {
    margin: 10px 0px 0px 0px;
    width: 15%;
    padding: 0px;
    float: left;
}

/*Graph*/
.distribution-chart{
}
.graphicContent {
	width: 100%;
}
#graphic{
    width: 100%;
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}
.distribChart {
    padding: 10px 0px 0px 0px;
	width: 50%;
	float: left;
    position: relative;
}
.distribChart:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}
.legend {
    padding: 9px 0px 0px 0px;
	width: 49%;
	font-size: 13px;
	float: right;
	margin-top:7%;
    min-height: 160px;
}

.legendRow {
    margin: 0px 0px 0px 0px;
   padding: 0px 3px 0px 0px;
   clear:both;
   min-height: 40px;
}

.legendCol1 {
	width: 10px;
	height:10px;
	float: left;
}

.legenCol1Color1 {
	background: #9f0953;
}

.legenCol1Color2 {
	background: #421744;
}

.legenCol1Color3 {
	background: #A2A1A6;
}

.legendCol2 {
	float: left;
	width: 55%;
	margin-left: 10px;
}

.legendCol3 {
	float: left;
	margin-left: 10px;
	text-align: right;
	width: 25%;
	font-weight: bold;
}
.legendDesactive{
	-webkit-transition: all 200ms ease-in;
	-webkit-transform: scale(1); 
	-ms-transition: all 200ms ease-in;
	-ms-transform: scale(1); 
	-moz-transition: all 200ms ease-in;
	-moz-transform: scale(1);
	transition: all 200ms ease-in;
	transform: scale(1);

	opacity:0.5;
	cursor:pointer;
}
.legendActive{	
	-webkit-transition: all 200ms ease-in;
	-webkit-transform: scale(1.07);
	-ms-transition: all 200ms ease-in;
	-ms-transform: scale(1.07);   
	-moz-transition: all 200ms ease-in;
	-moz-transform: scale(1.07);
	transition: all 200ms ease-in;
	transform: scale(1.07);
	margin:10px 0px;

	opacity:1;
	cursor:pointer;
}

.legendNormal {
	-webkit-transition: all 200ms ease-in;
	-webkit-transform: scale(1); 
	-ms-transition: all 200ms ease-in;
	-ms-transform: scale(1); 
	-moz-transition: all 200ms ease-in;
	-moz-transform: scale(1);
	transition: all 200ms ease-in;
	transform: scale(1);

	opacity:1;
	cursor:pointer;
}
/* Outputs */
.outputTitle {
    width: 70%;
    float: left;
    text-align: left;
}
.outputValue {
    padding-bottom: 10px;
    width: 30%;
    float: left;
    text-align: right;
    color: #91af2b;
    font-size: 21px;
}
.monthlySection {
    padding: 21px 0px 0px 4px;
    font-size: 18px;
    font-weight: bold;
}
.capitalSection{
     font-size: 16px;
}
.anualSalarySection{
     font-size: 16px;
}
.monthlyValue {
    font-size: 28px;
}
.fiscalValue{
    font-size: 28px;
}
.capitalValue{
    font-size: 16px;
}
.salaryValue{
    font-size: 16px;
}
.fiscalSection {
    font-size: 18px;
    padding: 26px 0px 0px 5px;
    font-weight: bold;
}
.capitalSection {
    padding: 13px 0px 0px 5px;
    font-weight: normal;
}
.anualSalarySection {
    padding: 10px 0px 0px 5px;
    font-weight: normal;
}
/* Products */
.productSection{
    margin: 40px 0px 20px 0px;
    padding: 10px 10px 10px 10px;
    float: left;
    width: 100%;
    background-color: #f4f3ef; 
}
#productHouseImage{
    padding: 35px 15px 5px 13px;
    width: 100%;

}
.productSection .left{
    float: left;
    width: 14%;
}
.productSection .right{
    float: left;
    width: 86%;
    padding: 0px 15px 10px 10px;  
}
 .productTitleDescription{
     margin: 22px 0px 5px 0px;
     padding: 6px 5px 6px 5px;
     text-align:center;
     font-size: 18px;
     display:inline-block;
     background-color: white;
 }
 .PPSection{
     margin: 15px 0px 0px 0px;
     clear: both;
 }
 .PPTitle{
     margin: 0px 0px 0px 0px;
     font-size: 23px;
     text-decoration: none;
     color: #421744;
 }
 .PPTitle{
     text-decoration: none;
     color: #421744;
 }
.PPTitle:visited {
    text-decoration: none;
}
.PPTitle:hover{
    color: #421744;
} 
.PPTitle:active {
    text-decoration: none;
}
 .PPContent{
     float:left;
     width: 100%;
     margin: 10px 0px 20px 0px;
 }
 .PPDescription{
     padding: 0px 5px 0px 0px;
    float:left;
    width: 70%;
 }

.PPLink {
   margin-top: -8px;
   font-size: 16px;
   background-color: #b5096f;
   padding: 5px 5px 5px 10px;
   float: left;
   width: 18%;
   margin-left: 10px;
   display: inline-block;
   min-width: 135px;
   max-width: 135px;
   border: none;
}

 /*Modificar por */
.PPLink a {
     text-decoration: none;
     color: white;
 }
.PPLink a:visited {
    text-decoration: none;
}
   .PPLink a:hover {
      text-decoration: none;
      color: white;
   } 
.PPLink a:active {
    text-decoration: none;
}
 /* Help button */
.helpButton {
    cursor: pointer;
    background-color: white;
    margin: 20px 0px 0px 0px;
    padding: 15px 20px 0px 20px;
    width: 100%;
    float: left;
}
.helpButton .description{
    padding: 5px 0px 0px 7px;
    width: 80%;
    float:left;
}
.helpButton .description .secondRow{
    padding: 5px 0px 0px 0px;
    font-size: 12px;
}
.helpButton .angle{
    padding: 0px 10px 0px 0px;
    text-align: right;
    width: 20%;
    float: left;      
    line-height: 0px;
    font-weight: bold;
    font-size: 35px;
}
.corner{
    cursor: pointer;
    clear: both;
    height: 15px;
    border-top: 15px solid white;
    border-right: 15px solid transparent;
}
/* End Right section */

/*LOADING BAR*/
#loading-bar,
#loading-bar-spinner {
  pointer-events: none;
  -webkit-pointer-events: none;
  -webkit-transition: 350ms linear all;
  -moz-transition: 350ms linear all;
  -o-transition: 350ms linear all;
  transition: 350ms linear all;
  z-index: 999999;
}

#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
  opacity: 0;
}

#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
  opacity: 1;
}

#loading-bar .bar {
  -webkit-transition: width 350ms;
  -moz-transition: width 350ms;
  -o-transition: width 350ms;
  transition: width 350ms;

  background: #666666;
  position: fixed;
  z-index: 10002;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-bottom-right-radius: 1px;
  border-top-right-radius: 1px;
}

/* Fancy blur effect */
#loading-bar .peg {
  position: absolute;
  width: 70px;
  right: 0;
  top: 0;
  height: 2px;
  opacity: .45;
  -moz-box-shadow: #FF0000 1px 0 6px 1px;
  -ms-box-shadow: #FF0000 1px 0 6px 1px;
  -webkit-box-shadow: #FF0000 1px 0 6px 1px;
  box-shadow: #FF0000 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#loading-bar-spinner {
  display: block;
  z-index: 999999;
  position: absolute;
  top: 5px;
  right: 5px;
}

.ie8 #loading-bar-spinner {
	display: block;
	z-index: 999999;
	width: 100%;
	background:url('../rcs/santander_loading.gif');
	background-size: 150px 150px;
	position: absolute;
}

#loading-bar-spinner .spinner-icon {
  width: 20px;
    height: 20px;
    border: solid 3px transparent;
    border-top-color: #666666;
    border-left-color: #666666;
    border-radius: 50px;
    -webkit-animation: loading-bar-spinner 1000ms linear infinite;
    -moz-animation: loading-bar-spinner 1000ms linear infinite;
    -ms-animation: loading-bar-spinner 1000ms linear infinite;
    -o-animation: loading-bar-spinner 1000ms linear infinite;
    animation: loading-bar-spinner 1000ms linear infinite;
    /*margin: auto auto;*/

}

.ie8 #loading-bar-spinner .spinner-icon {
  width: 16px;
  height: 16px;
  background:url('../rcs/santander_loading.gif');
  border:none;
}

.loading-bar-background {
    position: absolute;
    background-color: #FFFFFF;
    opacity: 0.01;
    width: 100%;
    top: 0;
    z-index: 999999;
}

.ie8 .loading-bar-background {
    display:none;
}

@-webkit-keyframes loading-bar-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes loading-bar-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes loading-bar-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes loading-bar-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading-bar-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
/*END LOADING BAR*/

/* CAROUSEL */
    .cntout .cols {
        width: 100%;
        position:relative;
        overflow:hidden;
        display:block;
        min-height:70px;
        max-width: 600px;
        margin: 0 auto;
    }
    .cntout .cols .col3 {
	    border:none;
        cursor:move;
        width:100%;
        height:100%;        
        display:block;
        position:absolute;
    }
    .cols .ng-hide-remove, .cols .ng-hide-add {
        top: 0;
        position:absolute;
	    display: block !important;
    }



   .swipetabright .cols .ng-hide-remove {
        transition:all 400ms ease;
         left:100%;
    }
    .swipetabright .cols .ng-hide-remove-active {
        left:0%;
    }
    .swipetabright .cols .ng-hide-add {
        transition:all 400ms ease;
        left:0;
    }
    .swipetabright .cols .ng-hide-add-active {
        left:-100%;
    }

    .swipetableft .cols .ng-hide-remove {
        transition:all 400ms ease;
        left:-100%;
    }
    .swipetableft .cols .ng-hide-remove-active {
        left:0;
    }
    .swipetableft .cols .ng-hide-add {
        transition:all 400ms ease;
        left:0;
    }
    .swipetableft .cols .ng-hide-add-active {
        left:100%;
    }
    .cntoutgral{
        margin: auto;
    }
    .cntout .freq {
        margin-top:15px;
    }

    .swipeleft {
        position:absolute;
        display:block;
        width:30px;
        height:30px;
        background:url(../rcs/LaboralKutxa/Arrow_left_ON.png);
        background-repeat: no-repeat;
        top:20px;
        cursor:pointer;
    }
    .swiperight {
        display:block;
        position:absolute;
        right:0;
        width:30px;
        height:30px;
        background:url(../rcs/LaboralKutxa/Arrow_right_ON.png);
        background-repeat: no-repeat;
        top:20px;
        cursor:pointer;
    }
/* END CAROUSEL */

@media (max-width:1281px) { 
/* hi-res laptops and desktops */
    .mainContainer{
        padding: 60px 60px 70px 60px;
    }
    .legend{
        width: 49%;
    }
}

@media (max-width:1023px) { 
/* big landscape tablets, laptops, and desktops */
.generalSectionTitle{
        padding-left: 15px !important; 
    }
    .rowInput {
        float:none;
        width:100%;
    }
    .leftSection{
        float:none;
        width: 100%;
    }
    .rightSection{
        padding: 28px 20px 10px 20px;
        float:none;
        width: 100%;
    }
    .generalSectionTitle{
            font-size: 23px !important;
            padding-left: 30px;
            padding-top: 20px;
    }
    .mainContainer {
        padding-top: 30px !important;
        background-size: auto 180px;
    }
    
}

@media (max-width:890px) { 
/* CUSTOM */
    .productTitleDescription{
        width: 100%;
    }
    .PPDescription{
        float:none;
        width:100%;
        margin-bottom: 10px;
    }
    .PPLink{
        float:none;
        display:block;
        margin:auto;
    }
    .internalContainer{
        padding: 0px;
    }
}

@media (max-width:641px) {
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .header {
        background: linear-gradient(90deg, #51284F, #A50050);
        height: 88px;
    }

        .header .logo {
            background-image: url("../rcs/LaboralKutxa/logo-mobile.png");
            width: 42.25px;
        }

#productHouseImage{
        padding: 10px 15px 5px 13px;
    }
    .productSection .left{
        display:none;
    }
    .productSection .right {
        float:none;
        width: 100%;
    }
    .initialLeft{
        width: 100%;
        padding-right: 0%;
        padding-left: 0%;
    }
    .initialRight{
        width: 100%;
        padding-right: 0%;
        padding-left: 0%;
    }
    .initialLeft .inputSection, .initialRight .inputSection {
        min-height:0;
    }
    .mainContainer{
         padding-top: 40px !important;
         padding-right: 10px !important;
         padding-left: 10px !important;
    }
    .generalSectionTitle{
         font-size: 18px !important;
    }
    
    .distribChart{
       float: none !important; 
       width: auto !important; 
       margin-left: 15%;
       margin-right: 15%;     
    }
    #graphic{
        display: block !important; 
        margin:auto !important; 
        width: 100%;
        height: auto;
    }
    .legend{
        margin-left: 5%;
        margin-bottom: 10px;
        float: none;
        width: 100% !important;  
    }
    .initialTitle{
        padding-left: 0%;
        padding-right: 0%;
    }
}

@media (max-width:481px) { 
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .distribChart{
       margin-left: 0%;
       margin-right: 0%;     
    }
    .cntout .cols{
        min-height: 70px;
    }
    .legend{ 
        height: 90px;
    }
    #graphic{ 
        width: 100%;
    }
}

@media (max-width:390px) { 
/* CUSTOM */ 
    [id$="Slider"]{
        float:none !important;
        width: 100% !important;
    }
    [class$="Box"]{
        float:none;
        width: 100%;
        margin-left: 0px;
        padding: 20px 10px 0px 5px !important;
    }
    [id$="Input"]{
        float:none !important;
        width: 100% !important;
        margin-left: 0px !important;
    }
    .inputV2 .left{
        display:none;
        float:none;
    }
    .inputV2 .right{
        float:none;
        width: 100%;
    }
    .outputTitle{
        width: 100%;
    }
    .outputValue{
        width: 100%;
    }
    .profileItem{
        padding: 5px 40px 10px 20px;
    }
    .inputSection{
        margin-top: 0px;
    }
    .rightSection {
        padding-top:5px;
    }
    
}

@media (max-width:320px) { 
/* smartphones, iPhone, portrait 480x320 phones */ 
    .initialRight{
        width: 100%;
    }
    .initialLeft{
        width: 100%;
    }
}