/*
Theme Name: Twenty Sixteen
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentysixteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


@import url(https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700);
* { margin: 0; padding: 0; border: none; text-decoration: none; list-style: none;} 

body {font-family: 'Titillium Web', sans-serif; font-weight: 400; background: #001f4e url(images/back-tocadisco.jpg) center top;background-attachment:fixed;background-size:100% auto;background-repeat:no-repeat;/*background: url(images/background.jpg);*/}

/* Structure */

.row {float: left; width: 100%; position:relative; padding-bottom: 64px;}
.row .container { margin: 0 auto; width: 1140px;}

.mainLogo { float: left; width: 100%; margin-top: 40px; text-align: left;}
.mainLogo a { float: left; width: auto; margin-bottom: -9px; margin-left: 35px;}

.playerRow {text-align: center; /*background: url(images/boxBack.png) center 0 no-repeat; */}
.playlistVinilosRow {display: inline-block; width: 887px; margin-bottom: 75px;}
.tocadiscos {position: relative; float: left; width: 579px; box-sizing: border-box;}
.tocadiscos-cover {position:absolute; top:0; left:0;width:100%; height:100%;background:url(images/tocadiscos-top.png) center center no-repeat; background-size: 100%;}
.tocadiscos img {float: left; width: 100%; height: auto;}
.tapaTocadisco {position: absolute; width: 94px; height: 94px; border-radius: 47px; overflow: hidden; top: 38%; left: 28%;}
.tapaTocadisco img {float: left; width: 100%; height: auto;}
.playlist {float: left; width: 307px; padding: 18px; box-sizing: border-box; text-align: left; background: url(images/playlist.jpg) 0 0 no-repeat; background-size: 100% 100%; margin-top: 10px;}
.playlist iframe {float: left; width: 100%; height: 345px;}

.links {float: left; width: 100%; text-align: center;}
.links a {display: inline-block; width: auto; font-size: 22px; color: #fff; font-size: 22px; text-transform: uppercase; height: 35px; line-height: 35px; padding: 2px 35px; border-radius: 20px; margin: 0 10px;}
.links a:hover, .links a.active, .category-nuevos .links a.nuevos, .category-2016-rock .links a.rock {border: 2px solid #fff; color: #fff; padding: 0 33px;}

.linksBottom  {float: left; width: 100%; text-align: center;}
.linksBottom a {display: inline-block; width: auto; font-size: 22px; font-size: 24px; height: 48px; line-height: 48px; padding: 0 70px; border-radius: 24px; margin: 0 10px; background: #fff; color: #09417c;}
.linksBottom a:hover {background: #09417c; color: #fff;}

.vinilosListRow {text-align: center;}
.vinilosListRow div.item {display: inline-block; width: auto;}
.vinilosListRow div.item .disc {float: left; position: relative; width: 280px; height: 235px;background: url(images/vinilos.png) center center no-repeat; margin: 20px;}
.vinilosListRow div.item .disc a {position: absolute; float: left; width: 174px; height: 174px; left: 26px; top: 32px; z-index: 2;}
.vinilosListRow div.item .disc a img {float: left; width: 100%; height: 100%;}
.vinilosListRow div.item .viniloDisc {float: left; width: 74px; height: 74px; border-radius: 37px; overflow: hidden; position: absolute; right: 45px; top: 80px;}
.vinilosListRow div.item .viniloDisc img {float: left; width: 100%; height: 100%;}
.vinilosListRow div.item .disc a .icon-play {float:left; width: 40px; height:40px; border-radius:50%; background:rgba(0,0,0,.7); text-align:center; color:#fff; font-size:18px; line-height:40px; position:absolute; top:50%; left:50%; margin: -20px 0 0 -20px;display:none;}
.vinilosListRow div.item .disc a:hover .icon-play {display:block;}

.category-nuevos .links a.nuevos {}
.posts-list{ max-width: 963px; margin: 50px auto 0; }

.navigation h2 {display:none;}

/* Footer */

.footer { padding-bottom: 160px; text-align:center;}
.footerLogo {display: inline-block; width: auto;}
.rightBox {display: inline-block; width: auto; margin-left: 30px; border-left: 1px solid #fff; padding: 20px 0 0 0; padding-left: 30px;}
.socials {float: left; width: auto; clear: both; text-align: left;}
.socials a {display: inline-block; font-size: 50px; color: #fff; margin: 0 30px 0 0;}
.socials a.deezer { width: 48px; height: 55px; background: url(images/deezer.png) center center no-repeat; background-size: 90%;}
.footer p {float: left; width: 100%; font-size:14px; color:#fff; margin-top: 20px;}
.shop {float: left; width: auto; clear: both; text-align: left; font-size:18px; vertical-align:middle; line-height:19px; color: #fff;}
.shop a {display:inline-block; margin:0 10px 0 0; vertical-align:middle;}
.shop a img {vertical-align:middle;height: 19px;}


/* Cambios nuevos */

.posts-list { max-width: 100%;}
.vinilosListRow div.item .disc { margin: 20px 0;}

.abced {float: left; width: 100%; text-align: center; margin-bottom: 20px;}
.abced li {display: inline-block; width: auto; padding: 0 5px;}
.abced li a {float: left; width: auto; font-size: 21px; font-weight: 600; text-transform: uppercase; color: #fff;}
.abced li a:hover{ text-decoration: underline;}

.floatingshop { position: fixed;     right: -290px;    top: 300px;z-index: 100; background: rgba(0,0,0,0.8); padding: 10px; color: #fff; -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ transform: rotate(-90deg);}
.floatingshop span {float: left; margin-top: -5px; margin-right: 5px;}
.floatingshop a {margin: 0 5px;}
.floatingshop img {height: 19px;}

::-webkit-input-placeholder {color: #fff;}
:-moz-placeholder {color: #fff;}
::-moz-placeholder {color: #fff;}
:-ms-input-placeholder {color: #fff;}

.searchBar {display: inline-block; position: relative; width: 600px; height: 50px; border: 2px solid #fff; border-radius: 25px; margin-bottom: 30px;}
.searchBar input {float: left; width: 100%; height: 50px; line-height: 50px; background: none; padding: 0 60px 0 20px;box-sizing: border-box; font-family: 'Titillium Web', sans-serif; font-size: 21px; font-weight: 300; color: #fff;}
.searchBar input.btn {position: absolute; right: 0; top: 0; width: 50px; height: 50px; overflow: hidden; text-indent: 5000px; background: url(images/searchBtn.png) center center no-repeat;}

#loading, .no-results {float:left; width:100%;margin:100px 0;text-align:center;color:#fff; font-size:20px;font-style:italic;font-family: 'Titillium Web', sans-serif; }

/* Newletter */

.newsletterRow {position: fixed; bottom: 0; left: 0; z-index: 20; background: #fff; width: 100%; padding: 15px 0; text-align: center; vertical-align: top;}
.newsletterRow p.text { vertical-align: top; float: none; display: inline-block; width: auto;height: 31px; line-height: 31px; background: url(images/newsletterIcon.jpg) no-repeat; padding-left: 80px; font-size: 23px; font-family: 'Titillium Web', sans-serif; font-weight: 300; margin-right: 10px;}
.newsletterRow .newsBox { vertical-align: top; display: inline-block; width: 430px;}
.newsletterRow .newsBox .wpcf7-form-control-wrap {float: left; width: 65%;}
.newsletterRow .newsBox p {float:left;width:100%;}
.newsletterRow .newsBox .wpcf7-form-control-wrap input {float: left; width: 100%; height: 31px; line-height: 31px; font-size: 14px; font-family: 'Titillium Web', sans-serif; font-weight: 300; border-bottom: 1px solid #000; box-sizing: border-box;}
.newsletterRow .newsBox .newsSendBtn {float: right; width: 33%; height: 31px; line-height: 31px; font-size: 18px; font-family: 'Titillium Web', sans-serif; font-weight: 300; box-sizing: border-box; text-align: center; text-transform: uppercase; color: #fff; background: #000;}
.newsletterRow .close {position: absolute; top: 12px; right: 20px; font-size: 30px; color: #000;}

.loading { display: block; float: left; width: 100%; height: 60px; background: url(images/loading.gif) top center no-repeat; background-size: auto 100%; text-indent: 7000px;}
div.wpcf7-validation-errors,
span.wpcf7-not-valid-tip,
div.wpcf7-mail-sent-ok {float: left; width: 100%; border: none; font-size: 11px; padding: 0; margin: 10px 0 0 0; text-align: left;}

.modal-terminos {display:none;position:fixed; top: 5%; left: 50%; width: 600px; margin-left: -300px; height: 400px; overflow-y: scroll; background:#fff; box-sizing:border-box;padding: 30px; color:#333; font-size: 14px;z-index:1000;box-shadow:#999 0 0 10px;}
.modal-terminos p {display:block;color:#333;font-size: 14px;}
.modal-terminos p  a {color:#333;font-weight:bold;}
/*.newsletterRow a.openterminos {font-size: 14px;color:#666;float:left; margin-top:-15px;}*/
.modal-terminos .close {position: absolute; top: 12px; right: 20px; font-size: 30px; color: #000;}
.check-wrapper {display:block; margin: 10px auto 0 ;text-align:center; font-size:14px;font-size: 14px;color:#666;float:left; margin-top:-15px;}
.check-wrapper input {float:none;display:inline-block;width:12px; height:12px;}
.check-wrapper a {color:#666;font-weight:bold;text-decoration:underline;}

/* Responsive */

@media all and (max-width: 1260px) {
	.row .container { float: left; width: 96%; margin: 0 2%;}
	.floatingshop { top:0; left:0;  -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ transform: rotate(0deg);}
}
@media all and (max-width: 920px) {
.newsletterRow {text-align: left;}
.newsletterRow .newsBox { width: 380px;}
}
@media all and (max-width: 887px) {
	.playerRow { background: none;}
	.playlistVinilosRow {width: 100%;}
	.tocadiscos { float: left; width: 60%;}
	.playlist { float: left; width: 100%; margin-top: 0;}
	.tapaTocadisco {top: 42%; left: 30%;}
	.newsletterRow .newsBox { margin-top: 10px; width: 100%;}

}

@media all and (max-width: 800px) {
.socials a {margin: 0 20px;}
}

@media all and (max-width: 750px) {
	body {background: #001f4e}
	.posts-list {text-align: center;}
	.vinilosListRow div.item {float: none; display: inline-block; left: 50% !important; margin-left: -160px;}
}

@media all and (max-width: 700px) {
	.tapaTocadisco {top: 34%; left: 23%;}
}

@media all and (max-width: 650px) {
	.tocadiscos { float: left; width: 100%;}
	.tapaTocadisco {top: 38%; left: 28%;}
	.links a {font-size: 17px; height: 30px; line-height: 30px; padding: 2px 15px; border-radius: 15px; margin: 0 5px;}
	.rightBox { width: 100%; margin-left: 0; border-left:none; padding-left: 0; text-align: center;}
	.shop {width: 100%; text-align: center;}
	.socials {width: 100%; text-align: center;}
}

@media all and (max-width: 600px) {
	.searchBar { width: 100%;}
	.modal-terminos { left: 5%; width: 90%; margin-left: 0px; }

}

@media all and (max-width: 570px) {
	.mainLogo a { margin-left: 0; margin-bottom: 0;}
	.mainLogo img {float: left; width: 100%;}
}

@media all and (max-width: 500px) {
	.tapaTocadisco {top: 35%; left: 25%;}
	.socials a {font-size: 30px;}
	.newsletterRow p.text { background: none; padding-left: 0px;}

}

@media all and (max-width: 470px) {
	.posts-list {margin: 0px auto 0;}
	.mainLogo {margin-top: 20px;}
}

@media all and (max-width: 400px) {
	.tapaTocadisco {top: 32%; left: 23%;}
	.playerRow {padding-bottom:0;}
}

@media all and (max-width: 350px) {
	.tapaTocadisco {top: 28%; left: 20%;}
}

/* ADA */
.sr-only, .screen-reader-text {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.sr-only-focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}