/* ==========================================================================
   GLOBAL styles
   ========================================================================== */

/* ==========================================================================
   Puerto Responsive Flat Buttons
   ========================================================================== */

/*
 *  Button 1
 */

.puerto-btn-1 {
	display: inline-block;
	position: relative;
	height: 40px;
	min-width: 170px;
	margin-bottom: 3px;
	border: 0;
	text-align: left;
	outline: none;
	
	cursor:pointer;
}
.puerto-btn-1:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 40px;
	width: 30px;
}
.puerto-btn-1 span {
	display: inline-block;
	width: 25px;
	height: 25px;
	background: #FFF;
	position: absolute;
	left: 17.5px;
	top: 7.5px;
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	
	border-radius: 50% !important;
	-moz-border-radius: 50% !important;
	-webkit-border-radius: 50% !important;
}
.puerto-btn-1 small {
	display: inline-block;
	color: #FFF;
	font-size: 14px;
	padding:11px 20px;
	margin-left: 35px;
}


/*
 *  Button 2
 */
   
.puerto-btn-2 {
	display: inline-block;
	position: relative;
	height: 40px;
	min-width: 100px; /* add-on */
	margin-bottom: 3px;
	border: 0;
	text-align: left;
	outline: none;
	
	cursor:pointer;
}
.puerto-btn-2 span {
	display: inline-block;
	width: 30px;
	height: 40px;
	padding-left: 5px;
	
	color: #FFF;
	position: absolute;
	left: 0px;
	top: 0px;
	text-align: center;
	font-size: 18px;
	line-height: 2.2;
}
.puerto-btn-2 span:before {
	content: "";
	position: absolute;
	left: 35px;
	top: 0;
	
	border-top: 40px solid #139B80;
	border-right: 10px solid transparent;
}
.puerto-btn-2 small {
	display: inline-block;
	color: #FFF;
	font-size: 13px; /* add-on */
	padding:11px 20px;
	margin-left: 35px;
}
   
   
/*
 *  Button 3
 */
   
.puerto-btn-3 {
	display: inline-block;
	position: relative;
	height: 37px;
	min-width: 170px;
	margin-bottom: 3px;
	border: 0;
	text-align: left;
	outline: none;
	
	cursor:pointer;
	
	line-height: 2.2;
	border-bottom: 3px solid #139B80;
}
.puerto-btn-3 span {
	display: inline-block;
	color: #FFF;
	font-size: 18px;
	margin-right: 12px;
	margin-left: 30px;
	
	float: left;
}
.puerto-btn-3 small {
	display: inline-block;
	color: #FFF;
	font-size: 14px;
	margin-top: 4px;
}
   
   
/*
 *  Button 4
 */
   
.puerto-btn-4 {
	display: inline-block;
	border: 2px solid #1ABC9C;
	background: transparent !important;
	position: relative;
	height: 37px;
	min-width: 170px;
	margin-bottom: 3px;
	text-align: left;
	outline: none;
	
	cursor:pointer;
	
	line-height: 2.2;
}
.puerto-btn-4 span {
	display: inline-block;
	font-size: 18px;
	margin-right: 8px;
	margin-left: 30px;
	
	float: left;
}
.puerto-btn-4 small {
	display: inline-block;
	font-size: 14px;
	margin-top: 4px;
}


/*
 * ANIMATIONS
 */

.puerto-btn-1 span i, .puerto-btn-2 span i, .puerto-btn-3 span i, .puerto-btn-4 span i {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.puerto-btn-1:hover span i, .puerto-btn-2:hover span i, .puerto-btn-3:hover span i, .puerto-btn-4:hover span i {
	-webkit-animation: move_from_top 300ms ease-in-out;
	-moz-animation: move_from_top 300ms ease-in-out;
	-ms-animation: move_from_top 300ms ease-in-out;
	-o-animation: move_from_top 300ms ease-in-out;
	animation: move_from_top 300ms ease-in-out;
}

.puerto-btn-1: small, .puerto-btn-2: small, .puerto-btn-3: small, .puerto-btn-4: small {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.puerto-btn-1:hover small, .puerto-btn-2:hover small, .puerto-btn-3:hover small, .puerto-btn-4:hover small {
	-webkit-animation: move_from_left 300ms ease-in-out;
	-moz-animation: move_from_left 300ms ease-in-out;
	-ms-animation: move_from_left 300ms ease-in-out;
	-o-animation: move_from_left 300ms ease-in-out;
	animation: move_from_left 300ms ease-in-out;
}

/*
 * BORDER RADIUS
 */

.radius {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.radius:before, .radius span {
	border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px 0 0 3px;
}
   

/* ==========================================================================
   COLORS styles
   ========================================================================== */
 

/*
 * Color 1
 */ 
   
.color-1 { background-color: #1ABC9C; }
.color-1.puerto-btn-1:before,
.color-1.puerto-btn-2 span { background: #139B80; }
.color-1.puerto-btn-1 span,
.color-1.puerto-btn-4 { color: #1ABC9C; }
.color-1.puerto-btn-2 span:before { border-top-color: #139B80; }
.color-1.puerto-btn-3 {border-bottom-color: #139B80; }
.color-1.puerto-btn-4 {border-color: #1ABC9C; }

/*
 * Color 2
 */ 
   
.color-2 { background-color: #2ecc71; }
.color-2.puerto-btn-1:before,
.color-2.puerto-btn-2 span { background: #16A352; }
.color-2.puerto-btn-1 span,
.color-2.puerto-btn-4 { color: #2ecc71; }
.color-2.puerto-btn-2 span:before { border-top-color: #16A352; }
.color-2.puerto-btn-3 {border-bottom-color: #16A352; }
.color-2.puerto-btn-4 {border-color: #2ecc71; }

/*
 * Color 3
 */ 
   
.color-3 { background-color: #3498db; }
.color-3.puerto-btn-1:before,
.color-3.puerto-btn-2 span { background: #1B7CBD; }
.color-3.puerto-btn-1 span,
.color-3.puerto-btn-4 { color: #3498db; }
.color-3.puerto-btn-2 span:before { border-top-color: #1B7CBD; }
.color-3.puerto-btn-3 {border-bottom-color: #1B7CBD; }
.color-3.puerto-btn-4 {border-color: #3498db; }

/*
 * Color 4
 */ 
   
.color-4 { background-color: #9b59b6; }
.color-4.puerto-btn-1:before,
.color-4.puerto-btn-2 span { background: #8533A7; }
.color-4.puerto-btn-1 span,
.color-4.puerto-btn-4 { color: #9b59b6; }
.color-4.puerto-btn-2 span:before { border-top-color: #8533A7; }
.color-4.puerto-btn-3 {border-bottom-color: #8533A7; }
.color-4.puerto-btn-4 {border-color: #9b59b6; }

/*
 * Color 5
 */ 
   
.color-5 { background-color: #34495e; }
.color-5.puerto-btn-1:before,
.color-5.puerto-btn-2 span { background: #1B344D; }
.color-5.puerto-btn-1 span,
.color-5.puerto-btn-4 { color: #34495e; }
.color-5.puerto-btn-2 span:before { border-top-color: #1B344D; }
.color-5.puerto-btn-3 {border-bottom-color: #1B344D; }
.color-5.puerto-btn-4 {border-color: #34495e; }

/*
 * Color 6
 */ 
   
.color-6 { background-color: #f1c40f; }
.color-6.puerto-btn-1:before,
.color-6.puerto-btn-2 span { background: #D8B00E; }
.color-6.puerto-btn-1 span,
.color-6.puerto-btn-4 { color: #f1c40f; }
.color-6.puerto-btn-2 span:before { border-top-color: #D8B00E; }
.color-6.puerto-btn-3 {border-bottom-color: #D8B00E; }
.color-6.puerto-btn-4 {border-color: #f1c40f; }

/*
 * Color 7
 */ 
   
.color-7 { background-color: #e67e22; }
.color-7.puerto-btn-1:before,
.color-7.puerto-btn-2 span { background: #CA6A14; }
.color-7.puerto-btn-1 span,
.color-7.puerto-btn-4 { color: #e67e22; }
.color-7.puerto-btn-2 span:before { border-top-color: #CA6A14; }
.color-7.puerto-btn-3 {border-bottom-color: #CA6A14; }
.color-7.puerto-btn-4 {border-color: #e67e22; }

/*
 * Color 8
 */ 
   
.color-8 { background-color: #e74c3c; }
.color-8.puerto-btn-1:before,
.color-8.puerto-btn-2 span { background: #C92C1C; }
.color-8.puerto-btn-1 span,
.color-8.puerto-btn-4 { color: #e74c3c; }
.color-8.puerto-btn-2 span:before { border-top-color: #C92C1C; }
.color-8.puerto-btn-3 {border-bottom-color: #C92C1C; }
.color-8.puerto-btn-4 {border-color: #e74c3c; }

/*
 * Color 9
 */ 
   
.color-9 { background-color: #999999; }
.color-9.puerto-btn-1:before,
.color-9.puerto-btn-2 span { background: #777777; }
.color-9.puerto-btn-1 span,
.color-9.puerto-btn-4 { color: #999999; }
.color-9.puerto-btn-2 span:before { border-top-color: #777777; }
.color-9.puerto-btn-3 {border-bottom-color: #777777; }
.color-9.puerto-btn-4 {border-color: #999999; }

/*
 * Color 10
 */ 
   
.color-10 { background-color: #333333; }
.color-10.puerto-btn-1:before,
.color-10.puerto-btn-2 span { background: #000000; }
.color-10.puerto-btn-1 span,
.color-10.puerto-btn-4 { color: #333333; }
.color-10.puerto-btn-2 span:before { border-top-color: #000000; }
.color-10.puerto-btn-3 {border-bottom-color: #000000; }
.color-10.puerto-btn-4 {border-color: #333333; }

/*
 * Color 11
 */ 
   
.color-11 { background-color: #1FA6D5; }
.color-11.puerto-btn-1:before,
.color-11.puerto-btn-2 span { background: #1589B1; }
.color-11.puerto-btn-1 span,
.color-11.puerto-btn-4 { color: #1FA6D5; }
.color-11.puerto-btn-2 span:before { border-top-color: #1589B1; }
.color-11.puerto-btn-3 {border-bottom-color: #1589B1; }
.color-11.puerto-btn-4 {border-color: #1FA6D5; }

/*
 * Color 12
 */ 
   
.color-12 { background-color: #FCC44C; }
.color-12.puerto-btn-1:before,
.color-12.puerto-btn-2 span { background: #E5AF39; }
.color-12.puerto-btn-1 span,
.color-12.puerto-btn-4 { color: #FCC44C; }
.color-12.puerto-btn-2 span:before { border-top-color: #E5AF39; }
.color-12.puerto-btn-3 {border-bottom-color: #E5AF39; }
.color-12.puerto-btn-4 {border-color: #FCC44C; }

/*
 * Color 13
 */ 
   
.color-13 { background-color: #FC4C7D; }
.color-13.puerto-btn-1:before,
.color-13.puerto-btn-2 span { background: #E03363; }
.color-13.puerto-btn-1 span,
.color-13.puerto-btn-4 { color: #FC4C7D; }
.color-13.puerto-btn-2 span:before { border-top-color: #E03363; }
.color-13.puerto-btn-3 {border-bottom-color: #E03363; }
.color-13.puerto-btn-4 {border-color: #FC4C7D; }

/*
 * Color 14
 */ 
   
.color-14 { background-color: #E04CFC; }
.color-14.puerto-btn-1:before,
.color-14.puerto-btn-2 span { background: #C735E2; }
.color-14.puerto-btn-1 span,
.color-14.puerto-btn-4 { color: #E04CFC; }
.color-14.puerto-btn-2 span:before { border-top-color: #C735E2; }
.color-14.puerto-btn-3 {border-bottom-color: #C735E2; }
.color-14.puerto-btn-4 {border-color: #E04CFC; }

/*
 * Color 15
 */ 
   
.color-15 { background-color: #F86227; }
.color-15.puerto-btn-1:before,
.color-15.puerto-btn-2 span { background: #D6511C; }
.color-15.puerto-btn-1 span,
.color-15.puerto-btn-4 { color: #F86227; }
.color-15.puerto-btn-2 span:before { border-top-color: #D6511C; }
.color-15.puerto-btn-3 {border-bottom-color: #D6511C; }
.color-15.puerto-btn-4 {border-color: #F86227; }

/*
 * Color 16
 */ 
   
.color-16 { background-color: #75AD16; }
.color-16.puerto-btn-1:before,
.color-16.puerto-btn-2 span { background: #5F8A16; }
.color-16.puerto-btn-1 span,
.color-16.puerto-btn-4 { color: #75AD16; }
.color-16.puerto-btn-2 span:before { border-top-color: #5F8A16; }
.color-16.puerto-btn-3 {border-bottom-color: #5F8A16; }
.color-16.puerto-btn-4 {border-color: #75AD16; }
   

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */


@-webkit-keyframes move_from_top {
    from {
        opacity: 0;
        -webkit-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes move_from_top {
    from {
        opacity: 0;
        -moz-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes move_from_top {
    from {
        opacity: 0;
        -ms-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}
@-o-keyframes move_from_top {
    from {
        opacity: 0;
        -o-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -o-transform: translateY(0%);
    }
}


@-webkit-keyframes move_from_left {
    from {
        opacity: 0;
        -webkit-transform: translatex(-30%);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0%);
    }
}
@-moz-keyframes move_from_left {
    from {
        opacity: 0;
        -moz-transform: translatex(-30%);
    }
    to {
        opacity: 1;
        -moz-transform: translatex(0%);
    }
}
@-ms-keyframes move_from_left {
    from {
        opacity: 0;
        -ms-transform: translatex(-30%);
    }
    to {
        opacity: 1;
        -ms-transform: translatex(0%);
    }
}
@-o-keyframes move_from_left {
    from {
        opacity: 0;
        -o-transform: translatex(-30%);
    }
    to {
        opacity: 1;
        -o-transform: translatex(0%);
    }
}
@keyframes move_from_left {
    from {
        opacity: 0;
        transform: translatex(-30%);
    }
    to {
        opacity: 1;
        transform: translatex(0%);
    }
}

/* Add-ons */

/* Botón Opiniones color-6 */

.menuBanco
{
    margin-bottom: 15px;
    margin-top: 15px;
}

.menuBanco #PlaceHolderLeft_opinionesMenu:hover, .menuBanco #PlaceHolderLeft_BancoHeaderHome_opinionesMenu:hover
{
    background: #f1c40f;
}

.menuBanco #PlaceHolderLeft_opinionesMenu:hover span, .menuBanco #PlaceHolderLeft_BancoHeaderHome_opinionesMenu:hover span
{
    background: #D8B00E;
}

.menuBanco #PlaceHolderLeft_opinionesMenu:hover span:before, .menuBanco #PlaceHolderLeft_BancoHeaderHome_opinionesMenu:hover span:before
{
    border-top-color: #D8B00E;
}

.menuBanco #PlaceHolderLeft_opinionesMenuActive
{
    background: #f1c40f;
    cursor: default;
}

.menuBanco #PlaceHolderLeft_opinionesMenuActive span
{
    background: #D8B00E;
}

.menuBanco #PlaceHolderLeft_opinionesMenuActive span:before
{
    border-top-color: #D8B00E;
}


/* Botón Productos color-16 */

.menuBanco #PlaceHolderLeft_productosMenu:hover, .menuBanco #PlaceHolderLeft_BancoHeaderHome_productosMenu:hover
{
    background: #75AD16;
}

.menuBanco #PlaceHolderLeft_productosMenu:hover span, .menuBanco #PlaceHolderLeft_BancoHeaderHome_productosMenu:hover span
{
    background: #5F8A16;
}

.menuBanco #PlaceHolderLeft_productosMenu:hover span:before, .menuBanco #PlaceHolderLeft_BancoHeaderHome_productosMenu:hover span:before
{
    border-top-color: #5F8A16;
}

.menuBanco #PlaceHolderLeft_productosMenuActive
{
    background: #75AD16;
    cursor: default;
}

.menuBanco #PlaceHolderLeft_productosMenuActive span
{
    background: #5F8A16;
}

.menuBanco #PlaceHolderLeft_productosMenuActive span:before
{
    border-top-color: #5F8A16;
}


/* Botón Preguntas color-8 */

.menuBanco #PlaceHolderLeft_preguntasMenu:hover, .menuBanco #PlaceHolderLeft_BancoHeaderHome_preguntasMenu:hover
{
    background: #e74c3c;
}

.menuBanco #PlaceHolderLeft_preguntasMenu:hover span, .menuBanco #PlaceHolderLeft_BancoHeaderHome_preguntasMenu:hover span
{
    background: #C92C1C;
}

.menuBanco #PlaceHolderLeft_preguntasMenu:hover span:before, .menuBanco #PlaceHolderLeft_BancoHeaderHome_preguntasMenu:hover span:before
{
    border-top-color: #C92C1C;
}

.menuBanco #PlaceHolderLeft_preguntasMenuActive
{
    background: #e74c3c;
    cursor: default;
}

.menuBanco #PlaceHolderLeft_preguntasMenuActive span
{
    background: #C92C1C;
}

.menuBanco #PlaceHolderLeft_preguntasMenuActive span:before
{
    border-top-color: #C92C1C;
}

/* Botón Sucursales color-3 */

.menuBanco #PlaceHolderLeft_sucursalesMenu:hover, .menuBanco #PlaceHolderLeft_BancoHeaderHome_sucursalesMenu:hover
{
    background: #3498db;
}

.menuBanco #PlaceHolderLeft_sucursalesMenu:hover span, .menuBanco #PlaceHolderLeft_BancoHeaderHome_sucursalesMenu:hover span
{
    background: #1B7CBD;
}

.menuBanco #PlaceHolderLeft_sucursalesMenu:hover span:before, .menuBanco #PlaceHolderLeft_BancoHeaderHome_sucursalesMenu:hover span:before
{
    border-top-color: #1B7CBD;
}

.menuBanco #PlaceHolderLeft_sucursalesMenuActive
{
    background: #3498db;
    cursor: default;
}

.menuBanco #PlaceHolderLeft_sucursalesMenuActiveLink
{
    background: #3498db;
    cursor: pointer;
}

.menuBanco #PlaceHolderLeft_sucursalesMenuActive span, .menuBanco #PlaceHolderLeft_sucursalesMenuActiveLink span
{
    background: #1B7CBD;
}

.menuBanco #PlaceHolderLeft_sucursalesMenuActive span:before, .menuBanco #PlaceHolderLeft_sucursalesMenuActiveLink span:before
{
    border-top-color: #1B7CBD;
}


/* Botón notas color-5 */

.menuBanco #PlaceHolderLeft_notasMenu:hover, .menuBanco #PlaceHolderLeft_BancoHeaderHome_notasMenu:hover
{
    background: #34495e;
}

.menuBanco #PlaceHolderLeft_notasMenu:hover span, .menuBanco #PlaceHolderLeft_BancoHeaderHome_notasMenu:hover span
{
    background: #1B344D;
}

.menuBanco #PlaceHolderLeft_notasMenu:hover span:before, .menuBanco #PlaceHolderLeft_BancoHeaderHome_notasMenu:hover span:before
{
    border-top-color: #1B344D;
}

.menuBanco #PlaceHolderLeft_notasMenuActive
{
    background: #34495e;
    cursor: default;
}

.menuBanco #PlaceHolderLeft_notasMenuActive span
{
    background: #1B344D;
}

.menuBanco #PlaceHolderLeft_notasMenuActive span:before
{
    border-top-color: #1B344D;
}

/* Botón Home Banking color-11 */

.menuBanco #PlaceHolderLeft_homeBankingMenu:hover, .menuBanco #PlaceHolderLeft_BancoHeaderHome_homeBankingMenu:hover
{
    background: #1FA6D5;
}

.menuBanco #PlaceHolderLeft_homeBankingMenu:hover span, .menuBanco #PlaceHolderLeft_BancoHeaderHome_homeBankingMenu:hover span
{
    background: #1589B1;
}

.menuBanco #PlaceHolderLeft_homeBankingMenu:hover span:before, .menuBanco #PlaceHolderLeft_BancoHeaderHome_homeBankingMenu:hover span:before
{
    border-top-color: #1589B1;
}

.menuBanco #PlaceHolderLeft_homeBankingMenuActive
{
    background: #1FA6D5;
    cursor: default;
}

.menuBanco #PlaceHolderLeft_homeBankingMenuActive span
{
    background: #1589B1;
}

.menuBanco #PlaceHolderLeft_homeBankingMenuActive span:before
{
    border-top-color: #1589B1;
}


/* Botón Inicio color-7 */

.menuBanco #PlaceHolderLeft_inicioMenu:hover, .menuBanco #PlaceHolderLeft_BancoHeaderHome_inicioMenu:hover
{
    background: #e67e22;
}

.menuBanco #PlaceHolderLeft_inicioMenu:hover span, .menuBanco #PlaceHolderLeft_BancoHeaderHome_inicioMenu:hover span
{
    background: #CA6A14;
}

.menuBanco #PlaceHolderLeft_inicioMenu:hover span:before, .menuBanco #PlaceHolderLeft_BancoHeaderHome_inicioMenu:hover span:before
{
    border-top-color: #CA6A14;
}

.menuBanco #PlaceHolderLeft_inicioMenuActive
{
    background: #e67e22;
    cursor: default;
}

.menuBanco #PlaceHolderLeft_inicioMenuActive span
{
    background: #CA6A14;
}

.menuBanco #PlaceHolderLeft_inicioMenuActive span:before
{
    border-top-color: #CA6A14;
}