*:after, *:before { margin: 0; padding: 0; box-sizing: border-box; -webkit-animation-fill-mode: both;    /* Chrome, Safari, Opera */ animation-fill-mode: both }
.pie { margin: 10px auto; width: 200px; height: 200px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 50%; position: relative;    /*overflow: hidden;*/ }
.clip1 { position: absolute; top: 0; left: 0; width: 200px; height: 200px; clip: rect(0px, 200px, 200px, 100px); border-radius: 50%; }
.slice1 { position: absolute; width: 200px; height: 200px; clip: rect(0px, 100px, 200px, 0px); -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background-color: #0093cf; border-color: #f7e5e1; -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); transition: all 0.3s linear 0s; }
.clip2 { position: absolute; top: 0; left: 0; width: 200px; height: 200px; clip: rect(0, 100px, 200px, 0px); border-radius: 50%; }
.slice2 { position: absolute; width: 200px; height: 200px; clip: rect(0px, 200px, 200px, 100px); -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background-color: #0093cf; border-color: #f7e5e1; -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); transition: all 0.3s linear 0.3s; }
.status { position: absolute; width: 100%; text-align: center; font-size: 16px; font-family: verdana; padding-top: 50px; }
.inner { background-color: #efefef; position: absolute; height: 96%; width: 96%; line-height: 60px; text-align: center; top: 42%; left: 42%; margin-top: -40%; margin-left: -40%; border-radius: 100%; }
.outer { position: absolute; border-radius: 50%; width: 100%; height: 100%; top: 0; left: 0; }
.ico-big { font-size: 80px; color: #787878;}
.check { display: none; position: absolute; right: 10px; font-size: 28px; background: #0093d0; border-radius: 100%; padding: 8px; color: #fff; border: 3px solid #0093d0;}
.titulo {color: #787878; display: block; height: 40px; margin: 40px 0 5px 0; font-size: 22px; font-family: Oswald, Open Sans, sans-serif; font-weight: 400; margin-top: 0;}
.detalles { margin-top: 10px; text-align: left; }
.detalles ul { font-size: 13px; }
.detalles ul li { background-color: #efefef; padding: 10px; margin-bottom: 1px; }
.detalles ul li.completado { background-color: #0093cf; color: #fff; border-radius: 2px;}
.detalles ul li.completado::before {content: "\e6f8"; font-family: 'idealtheme'; margin-right: 10px;}

@media only screen and (max-width: 768px) {
	.pie { width: 120px; height: 120px; -moz-border-radius: 60px; -webkit-border-radius: 60px; }
	.clip1 { width: 120px; height: 120px; clip: rect(0px, 120px, 120px, 60px);}
	.slice1 { width: 120px; height: 120px; clip: rect(0px, 60px, 120px, 0px); -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px;}
	.clip2 { width: 120px; height: 120px; clip: rect(0, 60px, 120px, 0px); }
	.slice2 { width: 120px; height: 120px; clip: rect(0px, 120px, 120px, 60px); -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px;}
	.check { right: 10px; font-size: 19px; padding: 5px; color: #fff; border: 2px solid #0093d0;}
	.status { padding-top: 36px; }
	.ico-big { font-size: 48px;}
}