/*----------------------------------------GENERAL*/

*{margin: 0px;padding: 0px;font-family: "Segoe UI Light","Calibri";}
.contentWrapper{width: 100%;max-width: 600px;margin: auto;}
.contentPanel{width: calc(100% - 40px);padding: 0px 20px;}
.subtitle{font-size: 22px;font-family: "Segoe UI","Arial";font-weight: bold;}
a,input,button,textarea,select{-webkit-transition:all 100ms ease;-moz-transition:all 100ms ease;-o-transition:all 100ms ease;transition:all 100ms ease;}
html{height: 100%;}
body{min-height: 100%;height:100%;position: relative;box-sizing:content-box;}

/*-----------------------------------------CUERPO*/

section{min-height:calc(100% - 20px);box-sizing:content-box;padding-bottom:20px;}
section{color:#fff;background-color:/*rgb(83,84,79);*/rgb(54,55,49);}
section p{font-size:18px;}
#logo{text-align:center;margin-bottom:20px;font-size:50px;padding-top:20px;font-weight:bold;}
#inst{text-align:center;margin-bottom:20px;}

#day>a,#campus>a{width:30px;height:30px;border-radius:15px;line-height:30px;text-align:center;}
#day>a,#campus>a{color:#fff;text-decoration:none;display:inline-block;}
#day>a,#campus>a{font-weight:bold;background-color:rgb(40,41,35);}
#day>a+a,#campus>a+a{margin-left:4px;}
#day>a:hover,#campus>a:hover,#hour a:hover{background-color:rgb(50,51,45);}
#hour a{color:#1a1a1a;text-decoration:none;display:block;width:100%;height:100%;color:inherit;}
a.active{background-color:#2020f8 !important;}

#detail{margin-top:20px;}
#detail p{margin-top:10px;}
#detail strong{text-decoration:underline;}

.bullet{display:inline-block;margin-top:6px;height:16px;width:16px;border-radius:8px;background-color:rgb(154,155,149);}

/*---------------------------------------SCHEDULE*/

#schedule{width:100%;color:#000;position:relative;margin:20px 0px;text-align:center;}
#schedule div{font-size:16px;display:block;}
#schedule.hfixed{padding-top:calc(40px + (4px)*2);margin-top:17px;}
#schedule>.h{height:40px;line-height:40px;font-weight:bold;margin-bottom:4px;background-color:rgb(54,55,49);z-index:20;}
#schedule>.h.fixed{position:fixed;top:0px;left:50%;transform:translate(-50%,0px);width:calc(100% - 40px);padding:4px 20px;max-width:calc(600px - 40px);}
#schedule>.h.absolute{position:absolute;bottom:30px;width:100%;left:0px;padding-top:4px;}
#schedule>.h:after{content:"";display:table;clear:both;}
#schedule>.h>a{float:left;height:100%;line-height:inherit;color:#1a1a1a;text-decoration:none;display:block;width:100%;background-color:rgb(40,41,35);color:#fff;width:calc((100% - (8px)*7) / 8);}
#schedule>.h>a+a{margin-left:8px;}
#schedule>.h>a.active{background-color:#2020f8 !important;}
#schedule>.b{margin:0px -4px;position:relative;background-color:#20f820;}
#schedule>.b>.c{position:absolute;height:100%;width:100%;top:0px;left:0px;z-index:9;}
#schedule>.b>.c:after{content:"";display:table;clear:both;}
#schedule>.b>.c>p{float:left;height:100%;width:calc((100%)/8);border-left:4px solid rgb(54, 55, 49);border-right:4px solid rgb(54, 55, 49);box-sizing:border-box;}
#schedule>.b>div[r]{display:block;height:34px;line-height:34px;border-top:4px solid rgb(54, 55, 49);border-bottom:4px solid rgb(54, 55, 49);box-sizing:border-box;position:relative;}
#schedule>.b>div[r]:before{content:attr(r);position:absolute;height:28px;line-height:28px;padding:0px 14px;border-radius:14px;z-index:10;font-size:20px;font-weight:bold;top:50%;left:50%;transform:translate(-50%,-50%);background-color:rgba(40,41,35,0.6);color:#fff;}
#schedule>.b>div[r]:after{content:"";display:table;clear:both;}
#schedule>.b>div[r]>hr{border:none;float:left;height:100%;background-color:#f82020;}
#schedule>.b>div[r][o=""]{display:none;}
#schedule>.b>div[r][o*="a0"]>hr:nth-child(1),
#schedule>.b>div[r][o*="b0"]>hr:nth-child(2),
#schedule>.b>div[r][o*="c0"]>hr:nth-child(3),
#schedule>.b>div[r][o*="d0"]>hr:nth-child(4),
#schedule>.b>div[r][o*="e0"]>hr:nth-child(5),
#schedule>.b>div[r][o*="f0"]>hr:nth-child(6),
#schedule>.b>div[r][o*="g0"]>hr:nth-child(7),
#schedule>.b>div[r][o*="h0"]>hr:nth-child(8){width:calc((100%)/16*0);margin-left:calc((100%)/16*1);margin-right:calc((100%)/16*1);}
#schedule>.b>div[r][o*="a1"]>hr:nth-child(1),
#schedule>.b>div[r][o*="b1"]>hr:nth-child(2),
#schedule>.b>div[r][o*="c1"]>hr:nth-child(3),
#schedule>.b>div[r][o*="d1"]>hr:nth-child(4),
#schedule>.b>div[r][o*="e1"]>hr:nth-child(5),
#schedule>.b>div[r][o*="f1"]>hr:nth-child(6),
#schedule>.b>div[r][o*="g1"]>hr:nth-child(7),
#schedule>.b>div[r][o*="h1"]>hr:nth-child(8){width:calc((100%)/16*1);margin-left:calc((100%)/16*1);margin-right:calc((100%)/16*0);}
#schedule>.b>div[r][o*="a2"]>hr:nth-child(1),
#schedule>.b>div[r][o*="b2"]>hr:nth-child(2),
#schedule>.b>div[r][o*="c2"]>hr:nth-child(3),
#schedule>.b>div[r][o*="d2"]>hr:nth-child(4),
#schedule>.b>div[r][o*="e2"]>hr:nth-child(5),
#schedule>.b>div[r][o*="f2"]>hr:nth-child(6),
#schedule>.b>div[r][o*="g2"]>hr:nth-child(7),
#schedule>.b>div[r][o*="h2"]>hr:nth-child(8){width:calc((100%)/16*1);margin-left:calc((100%)/16*0);margin-right:calc((100%)/16*1);}
#schedule>.b>div[r][o*="a3"]>hr:nth-child(1),
#schedule>.b>div[r][o*="b3"]>hr:nth-child(2),
#schedule>.b>div[r][o*="c3"]>hr:nth-child(3),
#schedule>.b>div[r][o*="d3"]>hr:nth-child(4),
#schedule>.b>div[r][o*="e3"]>hr:nth-child(5),
#schedule>.b>div[r][o*="f3"]>hr:nth-child(6),
#schedule>.b>div[r][o*="g3"]>hr:nth-child(7),
#schedule>.b>div[r][o*="h3"]>hr:nth-child(8){width:calc((100%)/16*2);margin-left:calc((100%)/16*0);margin-right:calc((100%)/16*0);}

/*----------------------------------PIE DE PAGINA*/

footer{width:100%;color:#fff;padding: 1px 0px;background-color:rgb(46,47,41);}
footer p{margin:10px 0px;}
footer .app{display:inline-block;width:40%;}
footer .app+.app+.app{margin-top:10px;}
footer .app>a{display:block;width:80px;height:80px;margin:auto;}
footer .app>a{background-size: cover;background-repeat:no-repeat;background-position:50% 50%;}
footer .app>span{display:block;text-align:center;}
footer a{color:#fff;text-decoration:none;}
footer a:hover{text-decoration:underline;}

/*-------------------------------------RESPONSIVE*/

@media screen and (max-width:600px){
	#logo{font-size: 40px;}
	.subtitle{font-size: 18px;}
	section p{font-size: 16px;}
	#schedule .c>span{display:none;}
	footer p{font-size: 14px;}
	footer .app{display:block;width:100%;margin:10px 0px;font-size: 14px;}
}
@media screen and (max-width:320px){
	#logo{font-size:40px;}
	section p{font-size:16px;}
}