/*
Theme Name: Musica de Cristianos 
Template Theme URI: https://www.musicadecristianos.com/ 
Author: NosideXP 
Description: Musica Cristiana para escuchar gratis en linea. 
Version: 1.0 
*/
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;500;700;900&display=swap');
html,body{ margin:0; padding:0px; background:#FFF; font-size:1.03rem;}
h1,h2,h3,h4,h5,h6{ float: left; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-align: left;}
body,div,ul,li,h1,h2,h3,h4,h5,h6,form,textarea,p,td{margin:0;padding:0; }
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}*{margin:0; padding:0;}*{outline:0;}
@-webkit-keyframes shine {100% {left: 125%; }}
@keyframes shine {100% {left: 125%;}}
.seclogo{float: left; width:100%; padding-left: 18%; padding-right: 18%; position:fixed; top:0px; z-index:100; background:#000 url("img/line.png") 0px 0px repeat-x; border-bottom: 1px solid #000;}
.navigation{ float:left; width:100%; position:relative; overflow: hidden; z-index:2;}
.logo{ width:24%; float:left; border-right:  1px solid #202020;}
.logo a{ float:left; width:100%; height:60px; background:url(img/logo.png) no-repeat; border-right: 1px solid #000;}
#buscador{ float:left; width:25%; margin:10px;}
#bustxt{width:100%; float:left; color:#919191; height: 40px; line-height: 20px; font-size:1.1em; border-radius: 5px; border:2px solid #000; padding: 3px 3px 3px 30px; overflow:hidden; background:#FFF url(img/bus.png) left no-repeat; margin:0!important; font-family:'Roboto', Arial, Helvetica; font-weight: 400;}
.menu{float:left; width:49%;}
.menu li{float:left; display: block; height: 60px; border-left: 1px solid #000;}
.menu li a{ float:left; line-height:60px; font-size: 1rem; padding-left: 20px; padding-right: 20px; font-family:'Roboto', Arial, Helvetica; font-weight: 500; color:#CCCACA; text-decoration:none; border-left: 1px solid #202020;}
.menu li a:hover{ background: #111111; color: #FFCC09;}
.toggle{ display: none; position:absolute; top:0; right:11px; width:25%; height:80px; cursor:pointer;}
.toggle span{position:absolute; right:30px; display:block; width:40px; height:3px; background-color:#ED4000; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;}
.toggle span:nth-child(1){top:26px;}
.toggle span:nth-child(2){top:38px;}
.toggle span:nth-child(3){top:50px;}
.toggle.active span:nth-child(1){top:38px;	-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.toggle.active span:nth-child(2){width:0;}
.toggle.active span:nth-child(3){top:38px;	-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
/*CUERPO*/
.cuerpo{width:100%; float:left; overflow-y:scroll; position:absolute; top:60px; bottom:0px; padding-top:20px; padding-bottom:20px;}
/*TITLES Y CONTENIDOS*/
.titles{float:left; width:100%; padding-left:18.2%; padding-right:18.2%; margin-bottom: 20px;}
.titles h1{ font-size:2rem; line-height: 40px; font-weight: 700; color: #000; text-transform: uppercase;}
.titles h2{ font-size:1.8rem; line-height: 36px; font-weight: 700; color: #000; text-transform: uppercase; margin-top: 20px;}
.titles p{float:left; width:100%; line-height:26px; font-family: arial, sans-serif; font-size:1rem; color:#636466; text-align:justify; margin-top:14px;}
.titles p strong{ color:#282828; font-weight:600;}
.titles p a{color:#ED4000; font-weight:600;}
.titles p a:hover{ text-decoration:underline;}
.titles bdo{ float: left; width: 100%; margin-top: 10px;}
/*TITLES DE CONTENIDOS*/
.titlepost{float:left; width:100%; padding-left:18.2%; padding-right:18.2%;}
.submenu{float:left; width:100%; text-align:left; color:#C9C9C9; margin-top:10px;}
.submenu a{ text-decoration:none; color:#747577; font-family:'Roboto', Arial, Helvetica!important; font-size:0.9rem; font-weight: 700;}
.submenu a:hover{ text-decoration:underline;}
.titlepost h1{font-size:38px; line-height: 40px; font-weight: 700; margin-top:10px; margin-bottom:10px; text-transform: uppercase; }
/*LISTAR ARTISTA*/
.artista{float:left; width:100%; padding-left: 17.55%; padding-right: 17.55%; margin-bottom: 20px;}
.artista h2{float:left; width:100%; text-align: center;}
.artista article{ float:left; width:16.66666666666667%; padding:1%;}
.artista article header{ float:left; width:100%;}
.artista article header a{ float:left; width:100%; text-decoration: none;}
.artista article header a:hover{ text-decoration:underline;}
.artista article header a figure{float:left; width:100%; margin-bottom:10px; position:relative; overflow:hidden;}
.artista article header a figure::before {position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg);}
.artista article header a figure:hover::before {-webkit-animation: shine .75s; animation: shine .75s; }
.artista article header a figure img{ float:left; width:100%;}
.artista article header a h3{width:100%; height:40px; line-height:18px; font-size:1rem; color: #222222; font-family:'Roboto', Arial, Helvetica; font-weight: 700; text-align:left; display: flex; justify-content: left; align-items: center; overflow:hidden; text-decoration:none;}
.artista article header a:hover h3{ text-decoration: underline;}
.artista article header a span{width:100%; height:20px; line-height:18px; font-size:0.8rem; color: #ED4000; font-family:'Roboto', Arial, Helvetica; font-weight:700; text-align:left;}
/*PAGINADOR*/
.paginator{ float:left; width:100%; background: #F2F2F2; margin-bottom: 20px; padding: 20px; border-top: 1px solid #E1E6E6; border-bottom:  1px solid #E1E6E6; padding-left:1%; padding-right:1%; text-align: center;}
.paginator a,.paginator span{margin-right:10px; margin-left: 10px; font-size:1rem; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; line-height:36px; text-align:center; padding: 10px 15px; border-radius:3px; text-decoration:none;}
.paginator a{background:#E1E6E6; color: #212121; border: 1px solid #B2B2B2;}
.paginator a:hover{ background:#ED4000; color: #FFF; border-color: #ED4000;}
.paginator span{ background:#ED4000; color: #FFF;  border:1px solid  #ED4000;}
/*FOOTER*/
footer{ float:left; font-size:0.9rem; width: 100%; height: 60px; background: #111111; text-align: center; line-height: 30px; padding: 20px 18% 20px 18%; color: #666666; font-family:'Roboto', Arial, Helvetica; font-weight: 500;}
footer a{ text-decoration: none; color: #666666;}
footer a:hover{ text-decoration: underline;}
/*IZQUIERDA Y DERECHA*/
.izde{float:left; width:100%; padding-left: 18%; padding-right: 18%;}
/*CONTENIDO GENERAL*/
.infoartista{float:left; width:65%;}
.infoartista h2{ font-size:1.8rem; line-height: 36px; font-weight: 700; color: #000; margin-top: 20px; margin-bottom: 14px;}
.infoartista h3{font-size:1.6rem; line-height: 36px; font-weight: 700; color: #000; margin-top: 20px; margin-bottom: 14px;}
.infoartista img{ float:left; width:100%; border-radius:3px; border:none; margin-bottom:20px;}
.infoartista p{float:left; width:100%; line-height:26px; color:#2F2E2E; text-align:justify; margin-bottom:20px; font-family: arial, sans-serif;}
.infoartista p strong{ color:#333333; font-weight:600;}
.infoartista p a{color:#ED4000; font-weight:600;}
.infoartista p a:hover{ text-decoration:underline;}
.infoartista bdo{ float:left; width:100%; margin-bottom: 10px;}
.infoartista ul{ float:left; width:100%; list-style-position: inside; font-family: 'Barlow', sans-serif; padding: 20px; font-weight:400; list-style-type: circle; margin-bottom:15px; background: #FAF5F1; border-radius: 4px;}
.infoartista ul li{ float:left; width:100%; line-height:36px; color:#2F2E2E; text-align:justify;}
.infoartista ul li a{ color:#323130;}
.infoartista ul li a:hover{ text-decoration: underline;}	
.infoartista ul li strong{ color:#333333;}
.infoartista ol{ float:left; width:100%; list-style-position: inside; font-family: 'Barlow', sans-serif; padding: 20px; font-weight:400; list-style-type: decimal; margin-bottom:15px; background: #ECF6F6; border-radius: 4px;}
.infoartista ol li{ float:left; width:100%; line-height:36px; color:#2F2E2E; text-align:justify;}
.infoartista ol li strong{ color:#333333;}