<div class="sky-tabs sky-tabs-pos-left sky-tabs-anim-flip sky-tabs-response-to-icons">

	<input type="radio" name="sky-tabs" checked="" id="sky-tab1" class="sky-tab-content-1">
	<label for="sky-tab1"><span><span><i class="fa fa-th-list"></i>Tr&aacute;mite</span></span></label>
									
	<input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2">
	<label for="sky-tab2"><span><span><i class="fa fa-user"></i>Servicio</span></span></label>
																		
	<ul>
		<li class="sky-tab-content-1">					
			<div class="typography">
				<span class="titulo">Tr&aacute;mite</span>
				<p>Es toda una serie de pasos o acciones regulados por el Estado que pueden realizar los usuarios con el fin de adquirir cualquier derecho u obligaci&oacute;n. Los tr&aacute;mites son aquellos que est&aacute;n amparados por una o m&aacute;s leyes, es decir, que es obligatorio que el municipio los ponga al alcance de los ciudadanos. El proceso se inicia a trav&eacute;s de las leyes cuando se activa el dispositivo al p&uacute;blico a trav&eacute;s de una petici&oacute;n o solicitud y termina cuando se recibe respuesta de la Administraci&oacute;n P&uacute;blica, aceptando o rechazando la solicitud.</p>
			</div>
		</li>
										
		<li class="sky-tab-content-2">
			<div class="typography">
				<span class="titulo">Servicio</span>
				<p>Es un conjunto de acciones o actividades dise&ntilde;adas para aumentar la satisfacci&oacute;n de los ciudadanos, lo que a&ntilde;adir&aacute; valor a las funciones de la entidad. Los servicios hacen parte del plan de acci&oacute;n de la alcald&iacute;a.</p>
			</div>
		</li>
										
	</ul>
</div>

<style type="text/css">
  .sky-tabs-pos-left > label,
  .sky-tabs-pos-right > label {
    display: block;
    /* width: 20%;*/
    float: left;
    clear: left;
    margin-right: 0;
    font-size: 20px;
    font-family: helvetica, arial, sans-serif !important;
  }

  .sky-tabs .typography p {
    margin: 20px 0 0 0;
    padding: 0;
    line-height: 20px;
    text-align: justify;
    font-size: 16px;
    font-family: helvetica, arial, sans-serif !important;
  }

  .titulo {
    font-size: 20px;
    color: #333;
    text-transform: uppercase;
    line-height: 30px;
    font-family: helvetica, arial, sans-serif !important;
  }

  .panel-primary > .panel-heading {
    color: #fff;
    background-color: #608f7d;
  }

  /** =============== INTERNALS TABS STYLES ============== **/
  .sky-tabs,
  .sky-tabs * {
    margin: 0;
    padding: 0;
    outline: none;
    border: 0;
    background: none;
  }
  .sky-tabs {
    position: relative;
    font-family: "Oswald";
    font-size: 0;
    text-align: left;
    color: #666;
  }
  .sky-tabs > input {
    position: absolute;
    display: none;
  }
  .sky-tabs > label {
    position: relative;
    z-index: 1;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 1px;
    padding-top: 0;
    padding-left: 0;
    font-size: 13px;
    line-height: 45px;
    cursor: pointer;
  }
  .sky-tabs > label.inverse {
    float: right;
    padding-right: 0;
    padding-left: 1px;
  }
  .sky-tabs > label.disabled {
    cursor: default;
  }
  .sky-tabs > label span {
    display: block;
    background: rgba(243, 243, 243, 0.9);
  }
  .sky-tabs > label span span {
    padding: 0 20px;
    background: transparent;
    transition: background 0.4s, color 0.4s;
    -o-transition: background 0.4s, color 0.4s;
    -ms-transition: background 0.4s, color 0.4s;
    -moz-transition: background 0.4s, color 0.4s;
    -webkit-transition: background 0.4s, color 0.4s;
  }
  .sky-tabs > label:hover span span {
    background: #608f7d;
    color: #fff;
  }
  .sky-tabs > label.disabled span span {
    background: transparent;
    color: inherit;
  }
  .sky-tabs > input:checked + label {
    cursor: default;
  }
  .sky-tabs > input:checked + label span span {
    background: #608f7d;
    color: #fff;
  }
  .sky-tabs > .switcher {
    display: none;
  }
  .sky-tabs > .switcher a {
    display: block;
    margin: 0 -20px;
    padding: 0 20px;
    text-decoration: none;
    color: inherit;
  }
  .sky-tabs > ul {
    list-style: none;
    position: relative;
    display: block;
    font-size: 13px;
  }
  .sky-tabs > ul > li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    overflow: auto;
    padding: 20px 25px 25px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    opacity: 0;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -o-transition: opacity 0.8s, -o-transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
    border: 1px solid #608f7d;
  }
  .sky-tabs > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
  .sky-tabs > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
  .sky-tabs > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
  .sky-tabs > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
  .sky-tabs > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
  .sky-tabs > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
  .sky-tabs > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
  .sky-tabs > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
  .sky-tabs > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
    position: relative;
    z-index: 1;
    opacity: 1;
  }

  /** ==== POSITIONS ==== **/
  .sky-tabs-pos-top-center {
    text-align: center;
  }
  .sky-tabs-pos-top-right {
    text-align: right;
  }
  .sky-tabs-pos-top-right > label {
    padding-right: 0;
    padding-left: 1px;
  }
  .sky-tabs-pos-top-justify > label {
    padding-right: 0;
    padding-left: 1px;
  }
  .sky-tabs-pos-top-justify.sky-tabs-amount-2 > label {
    width: 50%;
  }
  .sky-tabs-pos-top-justify.sky-tabs-amount-3 > label {
    width: 33.33%;
  }
  .sky-tabs-pos-top-justify.sky-tabs-amount-4 > label {
    width: 25%;
  }
  .sky-tabs-pos-top-justify.sky-tabs-amount-5 > label {
    width: 20%;
  }
  .sky-tabs-pos-top-justify.sky-tabs-amount-6 > label {
    width: 16.66%;
  }
  .sky-tabs-pos-top-justify.sky-tabs-amount-7 > label {
    width: 14.28%;
  }
  .sky-tabs-pos-top-justify.sky-tabs-amount-8 > label {
    width: 12.5%;
  }
  .sky-tabs-pos-top-justify.sky-tabs-amount-9 > label {
    width: 11.11%;
  }
  .sky-tabs-pos-top-justify > input:first-child + label {
    padding-left: 0;
  }
  .sky-tabs-pos-left > label,
  .sky-tabs-pos-right > label {
    display: block;
    width: 20%;
    float: left;
    clear: left;
    margin-right: 0;
    font-size: 20px;
  }
  .sky-tabs-pos-right > label {
    float: right;
    clear: right;
  }
  .sky-tabs-pos-left > ul {
    margin-left: 20%;
  }
  .sky-tabs-pos-right > ul {
    margin-right: 25%;
  }
  .sky-tabs-pos-right > label {
    padding-right: 0;
    padding-left: 1px;
  }
  .sky-tabs-pos-top-center > ul > li,
  .sky-tabs-pos-top-justify > ul > li {
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
  }
  .sky-tabs-pos-right > ul > li,
  .sky-tabs-pos-top-right > ul > li {
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
  }

  /** ==== ANIMATIONS ==== **/
  .sky-tabs-anim-slide-up > ul > li {
    -o-transform: translateY(-15%);
    -ms-transform: translateY(-15%);
    -moz-transform: translateY(-15%);
    -webkit-transform: translateY(-15%);
  }
  .sky-tabs-anim-slide-right > ul > li {
    -o-transform: translateX(15%);
    -ms-transform: translateX(15%);
    -moz-transform: translateX(15%);
    -webkit-transform: translateX(15%);
  }
  .sky-tabs-anim-slide-down > ul > li {
    -o-transform: translateY(15%);
    -ms-transform: translateY(15%);
    -moz-transform: translateY(15%);
    -webkit-transform: translateY(15%);
  }
  .sky-tabs-anim-slide-left > ul > li {
    -o-transform: translateX(-15%);
    -ms-transform: translateX(-15%);
    -moz-transform: translateX(-15%);
    -webkit-transform: translateX(-15%);
  }
  .sky-tabs-anim-slide-up-left > ul > li {
    -o-transform: translate(-15%, -15%);
    -ms-transform: translate(-15%, -15%);
    -moz-transform: translate(-15%, -15%);
    -webkit-transform: translate(-15%, -15%);
  }
  .sky-tabs-anim-slide-up-right > ul > li {
    -o-transform: translate(15%, -15%);
    -ms-transform: translate(15%, -15%);
    -moz-transform: translate(15%, -15%);
    -webkit-transform: translate(15%, -15%);
  }
  .sky-tabs-anim-slide-down-right > ul > li {
    -o-transform: translate(15%, 15%);
    -ms-transform: translate(15%, 15%);
    -moz-transform: translate(15%, 15%);
    -webkit-transform: translate(15%, 15%);
  }
  .sky-tabs-anim-slide-down-left > ul > li {
    -o-transform: translate(-15%, 15%);
    -ms-transform: translate(-15%, 15%);
    -moz-transform: translate(-15%, 15%);
    -webkit-transform: translate(-15%, 15%);
  }

  .sky-tabs > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
  .sky-tabs > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
  .sky-tabs > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
  .sky-tabs > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
  .sky-tabs > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
  .sky-tabs > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
  .sky-tabs > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
  .sky-tabs > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
  .sky-tabs > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }

  .sky-tabs-anim-scale > ul > li {
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
  }

  .sky-tabs-anim-scale > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
  .sky-tabs-anim-scale > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
  .sky-tabs-anim-scale > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
  .sky-tabs-anim-scale > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
  .sky-tabs-anim-scale > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
  .sky-tabs-anim-scale > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
  .sky-tabs-anim-scale > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
  .sky-tabs-anim-scale > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
  .sky-tabs-anim-scale > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }

  .sky-tabs-anim-rotate > ul > li {
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }

  .sky-tabs-anim-rotate.sky-tabs-pos-right > ul > li,
  .sky-tabs-anim-rotate.sky-tabs-pos-top-right > ul > li {
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }

  .sky-tabs-anim-rotate > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
  .sky-tabs-anim-rotate > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
  .sky-tabs-anim-rotate > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
  .sky-tabs-anim-rotate > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
  .sky-tabs-anim-rotate > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
  .sky-tabs-anim-rotate > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
  .sky-tabs-anim-rotate > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
  .sky-tabs-anim-rotate > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
  .sky-tabs-anim-rotate > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  .sky-tabs-anim-flip > ul {
    perspective: 2000px;
    -o-perspective: 2000px;
    -ms-perspective: 2000px;
    -moz-perspective: 2000px;
    -webkit-perspective: 2000px;
    perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
  }
  .sky-tabs-anim-flip > ul > li {
    -o-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
  }
  .sky-tabs-anim-flip.sky-tabs-pos-left > ul > li {
    -o-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
  }
  .sky-tabs-anim-flip.sky-tabs-pos-right > ul > li {
    -o-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
  }

  .sky-tabs-anim-flip > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
  .sky-tabs-anim-flip > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
  .sky-tabs-anim-flip > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
  .sky-tabs-anim-flip > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
  .sky-tabs-anim-flip > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
  .sky-tabs-anim-flip > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
  .sky-tabs-anim-flip > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
  .sky-tabs-anim-flip > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
  .sky-tabs-anim-flip > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
  }

  /** ==== GRID SYSTEM ==== **/
  .sky-tabs .grid-row {
    margin-top: 20px;
  }
  .sky-tabs .grid-row:after {
    content: "";
    display: table;
    clear: both;
  }
  .sky-tabs .grid-row:first-child {
    margin-top: 0;
  }
  .sky-tabs .grid-col {
    display: block;
    float: left;
    width: 100%;
    margin-left: 2%;
  }
  .sky-tabs .grid-col:first-child {
    margin-left: 0;
  }
  .sky-tabs .grid-col .inner {
    padding: 10px 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  .sky-tabs .grid-col-1 {
    width: 6.5%;
  }
  .sky-tabs .grid-col-2 {
    width: 15%;
  }
  .sky-tabs .grid-col-3 {
    width: 23.5%;
  }
  .sky-tabs .grid-col-4 {
    width: 32%;
  }
  .sky-tabs .grid-col-5 {
    width: 40.5%;
  }
  .sky-tabs .grid-col-6 {
    width: 49%;
  }
  .sky-tabs .grid-col-7 {
    width: 57.5%;
  }
  .sky-tabs .grid-col-8 {
    width: 66%;
  }
  .sky-tabs .grid-col-9 {
    width: 74.5%;
  }
  .sky-tabs .grid-col-10 {
    width: 83%;
  }
  .sky-tabs .grid-col-11 {
    width: 91.5%;
  }
  .sky-tabs .grid-col-offset-1,
  .sky-tabs .grid-col-offset-1:first-child {
    margin-left: 8.5%;
  }
  .sky-tabs .grid-col-offset-2,
  .sky-tabs .grid-col-offset-2:first-child {
    margin-left: 17%;
  }
  .sky-tabs .grid-col-offset-3,
  .sky-tabs .grid-col-offset-3:first-child {
    margin-left: 25.5%;
  }
  .sky-tabs .grid-col-offset-4,
  .sky-tabs .grid-col-offset-4:first-child {
    margin-left: 34%;
  }
  .sky-tabs .grid-col-offset-5,
  .sky-tabs .grid-col-offset-5:first-child {
    margin-left: 42.5%;
  }
  .sky-tabs .grid-col-offset-6,
  .sky-tabs .grid-col-offset-6:first-child {
    margin-left: 51%;
  }
  .sky-tabs .grid-col-offset-7,
  .sky-tabs .grid-col-offset-7:first-child {
    margin-left: 59.5%;
  }
  .sky-tabs .grid-col-offset-8,
  .sky-tabs .grid-col-offset-8:first-child {
    margin-left: 68%;
  }
  .sky-tabs .grid-col-offset-9,
  .sky-tabs .grid-col-offset-9:first-child {
    margin-left: 76.5%;
  }
  .sky-tabs .grid-col-offset-10,
  .sky-tabs .grid-col-offset-10:first-child {
    margin-left: 85%;
  }
  .sky-tabs .grid-col-offset-11,
  .sky-tabs .grid-col-offset-11:first-child {
    margin-left: 93.5%;
  }

  /** ==== ICONS ==== **/
  .sky-tabs > label .fa {
    display: block;
    float: left;
    width: 18px;
    margin: 0 12px 0 -6px;
    font-family: FontAwesome;
    font-style: normal;
    font-size: 16px;
    line-height: 45px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }

  /*+ ==== PAD ==== **/
  @media screen and (max-width: 1000px) {
    .sky-tabs > label span span {
      padding: 0 15px;
    }
    .sky-tabs > label .fa {
      margin-right: 10px;
      margin-left: -5px;
    }
  }

  /** ==== PHONE ==== **/
  @media screen and (max-width: 767px) {
    .sky-tabs .grid-col,
    .sky-tabs .grid-col:first-child {
      float: none;
      width: 100%;
      margin: 20px 0 0 0;
    }
    .sky-tabs-response-to-stack > label {
      display: block;
      width: 100%;
      padding-right: 0;
      padding-left: 0;
      text-align: left;
    }
    .sky-tabs-response-to-stack > ul {
      margin-top: 0;
      margin-right: 0;
      margin-left: 0;
    }
    .sky-tabs-response-to-stack > ul > li {
      -o-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
      -moz-transform-origin: 50% 0%;
      -webkit-transform-origin: 50% 0%;
    }
    .sky-tabs-response-to-stack.sky-tabs-anim-flip > ul > li {
      -webkit-transform: rotateX(-90deg);
    }
    .sky-tabs-response-to-icons > label {
      font-size: 0;
    }
    .sky-tabs-response-to-icons > label .fa {
      width: 45px;
      margin: 0;
      font-size: 16px;
    }
    .sky-tabs-response-to-icons > label span span {
      padding: 0;
    }
    .sky-tabs-response-to-icons.sky-tabs-pos-left > label,
    .sky-tabs-response-to-icons.sky-tabs-pos-right > label {
      width: 56px;
    }
    .sky-tabs-response-to-icons.sky-tabs-pos-left > ul {
      margin-left: 56px;
    }
    .sky-tabs-response-to-icons.sky-tabs-pos-right > ul {
      margin-right: 56px;
    }
    .sky-tabs-response-to-switcher > label {
      display: none;
      width: 100%;
      padding-right: 0;
      padding-left: 0;
      text-align: left;
    }
    .sky-tabs-response-to-switcher > .switcher {
      display: block;
    }
    .sky-tabs-response-to-switcher:hover > label {
      display: block;
    }
    .sky-tabs-response-to-switcher:hover > .switcher {
      display: none;
    }
    .sky-tabs-response-to-switcher > ul {
      margin-top: 0;
      margin-right: 0;
      margin-left: 0;
    }
    .sky-tabs-response-to-switcher > ul > li {
      -o-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
      -moz-transform-origin: 50% 0%;
      -webkit-transform-origin: 50% 0%;
    }
    .sky-tabs-response-to-switcher.sky-tabs-anim-flip > ul > li {
      -webkit-transform: rotateX(-90deg);
    }
  }
</style>