@font-face {
    font-family: 'fontin-italic'; /*a name to be used later*/
    src: url('./fonts/Fontin-Italic.ttf'); /*URL to font*/
}

.tres_intro{
	text-align: center;
	margin-top: 96px;
}
.tres_intro a{
	display: inline-block; 
	vertical-align: top;
	width: 300px; 
	text-align: center;
	font-size: 1.27em;
	text-decoration: none;
}
.tres_intro a:nth-child(1){	color: #A9B140 }
.tres_intro a:nth-child(2){	color: #EC7471 }
.tres_intro a:nth-child(3){	color: #32B196 }

.tres_intro img{
	display: block; 
	margin: auto;
}

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;/*agrega un clearfix y lo hace más estable que block*/
    width: 925px;
}
 
/*----- Tab Links -----*/
/* Clearfix. en ocaciones displa:inlineblock agrega un margen abajo que afecta al elemento que no la ha removido*/
.tab-links:after {
    display:block;
    clear:both;
    content: '';
}
 
 .tab-links{
    margin-left: -43px;/*las tab está corridas a la derecha*/
    margin-bottom: -33px;
    margin-top: 0px;
 }

.tab-links li {
    float:left;
    list-style:none;
    display: inline-block;
    width: 184px;
    height: 42px;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding-top: 14px;
    margin-left: 1px;
}

.tab-links li a {
    font-weight:bold;
    text-decoration: none;
    transition:all linear 0.15s; /*ayuda a las transiciones :hover*/
}

.tab-links li.active{
    height: 57px;
}

.tab {
    display: none;
    height:217px;
    width: 923px;
    background-repeat: no-repeat;
    background-size: cover;
}

.tab.active{
    display: block;
}

.tab ul{
    padding-top: 57px;
    margin-left: 80px;
    width: 80%;
    text-align: left;
}

.tab ul li{
    margin-bottom: 18px;
    background-repeat: no-repeat;
    padding-left: 30px;
    font-size: 1.125em;
    font-family: 'fontin-italic';
    line-height: 1.2em;
}

.centrar{
    margin-top: 100px;
    text-align: center;
}

.centrar p{  
    margin-bottom: 30px;
    font-size: 1.27em;
}

/*elementos cambiantes*/
/*pgone*/
.tab-links li.pgone{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_botoninnactivado.png);
}

.tab-links li.pgone.active{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_botonactivado.png);
}

.tab-links li.pgone a{
    color:#AFB600;
}

.tab-links li.pgone.active a{
    color: #5D5D5D;
}

#tab1.pgone{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_temperatura1.png);
    
}

div.pgone{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_temperatura2.png);
    
}

.centrar p.pgone{
    color:#AFB600;
}

.tab.pgone ul li{
    color: #5D5D5D;
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_triangulito.png);
}

/*pgtwo*/
.tab-links li.pgtwo{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_botoninnactivado2.png);
}

.tab-links li.pgtwo.active{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_botonactivado2.png);
}

.tab-links li.pgtwo a{
    color: #EB8585;
}

.tab-links li.pgtwo.active a{
    color:white;
}

#tab1.pgtwo{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_papasyoxigenada.png);
    
}

div.pgtwo{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_fondorosado.png);   
}

#tab1.pgtwo, #tab2.pgtwo, #tab5.pgtwo{
    height: 310px
}

.centrar p.pgtwo{
    color: #EB8585;
}

.tab.pgtwo ul li{
    color: white;
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_triangulitorosado.png);
}

.tab.pgtwo ul li.no{
    background: none;
}

.btn-pop{
    position: relative;
    right: -340px;
    top: 9px;
    width: 154px;
    height: 39;
}

.text-popup{
    position: absolute;
    left: 195px;
    bottom: 190px;
    width: 533px;
    font-family: 'fontin-italic';
    font-size: 1.125em;
    color: #5D5D5D;
}

/*pgthree*/
.tab-links li.pgthree{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_botoninnactivado3.png);
}

.tab-links li.pgthree.active{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_botonactivado3.png);
}

.tab-links li.pgthree a{
    color: #15AFAF;
}

.tab-links li.pgthree.active a{
    color:white;
}

div.pgthree{
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_fondoazul.png);
    
}

.centrar p.pgthree{
    color: #15AFAF;
}

.tab.pgthree ul li{
    color: #005D58;
    background-image: url(../img/ACT3/SB_S_G10_U04_L03_triangulitoazul.png) 
}

.tab.pgthree ul li.no{
    background: none;
}

#tab2.pgthree{
    height: 310px
}

#tab3.pgthree{
    height: 455px;
}

.tab-links.pgthree{
    margin-left: 53px;/*las tab está corridas a la derecha*/
}