body{
	margin: 0;
	background: url('../img/fons_barca.jpg') #000000;
	background-size: cover;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	color: #313947;
	font-weight: 300;
}
body.principal:before{
	content: '';
	background: url('../img/jugador.png');
	background-size: contain;
    background-position: bottom;
    position: absolute;
	z-index: 1;
    bottom: 0;
    left: 0;
    width: 452px;
    height: 449px;	
}
body.principal:after{
	content: '';
	background: url('../img/visteamessi.png');
	position: absolute;
	background-size: contain;
	background-position: bottom;
	top: 75px;
    left: 126px;
	width: 238px;
    height: 341px;
}
.b-g{
	position: fixed;
    left: 0;
	top: 0;
    width: 100%;
    height: 100%;
}
#ctrllink {
	display:block;
	margin: 15px auto 43px auto;
	width: 145px;
	z-index: 2;
}
#ctrllink img {
	max-width: 145px;
}

.escut{
	position: absolute;
	right: 40px;
    top: 40px;
}
.head-fcb{
	position: relative;
	height: 50px;
	width: 100%;
	display: block;
	background: #1C224E;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}
.head-fcb span{
	height: 5px;
	width: 100%;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #CC0A30;
}
.head-fcb img{
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 5px;
    margin: auto;
}

.container-messi{
	width: 375px;
	height: 800px;
	position: absolute;
	top: calc(50% - 400px);
    left: calc(50% - 187px);
	/* Rectangle: */
	border: 0 solid #979797;
	box-shadow: 7px 7px 10px 0 rgba(0,0,0,0.50);
}
.container-messi:before{
	content: '';
    position: absolute;
	background: url('../img/escanea.png');
	width: 358px;
    height: 349px;
    display: block;
	right: -400px;
    top: -12px;
    z-index: 1;
	opacity: 1;
	transition: all 0.5s;
}
.container-messi:after{
	content: '';
    position: absolute;
	background: url('../img/entrasorteo.png');
    width: 444px;
    height: 366px;
    display: block;
    right: -473px;
    bottom: -30px;
    z-index: 1;
	opacity: 1;
	transition: all 0.5s;
}
.container-messi.opened:before{
	opacity: 0;
}
.container-messi.clicked:after{
	opacity: 0;
}


h2{
	font-size: 24px;
	margin-top: 40px;
    margin-bottom: 5px;
}
h3{
	font-size: 20px;
    margin-top: 12px;
}
h4{
	font-size: 36px;
    margin-top: 40px;
    margin-bottom: 3px;
}
p{
	font-size: 24px;
	font-weight: 300;
    padding: 0px 15px;
    line-height: 32px;
}
p.p-small{
	font-size: 21px;
    margin-top: 30px;
	line-height: 28px;
	margin-bottom: 0px;
}
p.p-small strong{
	font-weight: 700;
}

.messi{
	width: 100%;
	height: 748px;
	position: relative;
	background: #D8D8D8;
	background-position: center;
	transition: background 0.5s;
	border: 1px solid #979797;
	color: #1C224E;
	text-align: center;
	padding: 0px 26px;
}

.messi > img.wear-messi{
	float: left;
	width: 100%;
	/*opacity: 0;
	transition: opacity 1s;*/
	position: absolute;
	z-index: 1;
	display: none;
}

.wear-camiseta{
    left: 0;
    top: 0;
}
.wear-pantalon{
    left: 0;
    top: 418px;
}
.wear-calcetin{
	left: 0;
    bottom: 0;
}

.messi .bg{
	width: 100%;
	height: 100%;
	display: block;
	background: url(bg.jpg) bottom;
	background-size: contain!important;
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.clickAd{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 9999;
	display: none;
}
.face{
	width: 51px;
	height: 75px;
	position: absolute;
	top: 32px;
	left: 128px;
	z-index: 2;
	border-radius: 50%;
	background-size: 198%;
	background-position: center;
}

a.btn-fcb,
form input[type="submit"]{
	background: #CC0A30;
	box-shadow: 0 3px 0 0 #9F0724;
	border-radius: 8px;
	font-size: 20px;
	color: #FFFFFF;
	letter-spacing: 0;
	text-shadow: 1px 1px 0 rgba(254,254,254,0.31);
	text-decoration: none;
    padding: 12px 0px;
	width: calc(100% - 54px);
	display: block;
    position: absolute;
    bottom: 26px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 9999;
	border: none;
	text-transform: uppercase;
	font-weight: 400;
	cursor: pointer;
}


form{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	margin: auto;	
	background: #D8D8D8;
	display: none;
}

form input{
	width: calc(100% - 54px);
	font-size: 18px;
	margin: 12px 26px;
	padding: 12px 10px;
	float: left;
	font-weight: 300;
	/* Rectangle 3 Copy 3: */
	background: #F1F0F0;
	border: 1px solid #979797;
	border-radius: 8px;
}
form input[name="nombre"]{
	margin-top: 6px;
}
form span{
	color: #9B9B9B;
    font-size: 14px;
    text-align: left;
    width: calc(100% - 54px);
    display: inline-block;
    margin: 0px 26px;
}
.graciasform{
	z-index: 9999;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto 0;
	font-size: 30px;
	text-align: center;
	display: none;
	background: #D8D8D8;
}
.graciasform p{
	top: 35%;
    position: relative;
}


body.control{
	background: #D8D8D8;
}

.control p{
	font-size: 20px;
	line-height: 26px;
	padding: 0px 20px;
    margin-bottom: 12px;
}
.control a.btn-fcb{
	position: relative;
    margin-top: 50px;
}
.control form input[type="text"],
.control form input[type="email"],
.control form input[type="date"]{
    width: calc(100% - 75px);
}
.control form input[type="submit"]{
	position: relative;
}
.control form{
    height: calc(100% - 107px);
}
.control .graciasform{
	height: calc(100% - 107px);
}

.owl-carousel{
    width: calc(100% - 74px);
	max-height: 230px;
    margin: 0px 26px 20px 26px;
	border: 1px solid #CCCCCC;
	background: #ffffff;
	position: relative;
	padding: 10px;
}
.owl-carousel .owl-prev{
	width: 40px;
	height: 67px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -11px;
	margin: auto;
	background: url(/img/arrow-left.svg);
    text-indent: -9999px;
}
.owl-carousel .owl-next{
	width: 40px;
	height: 67px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -11px;
	margin: auto;
	background: url(/img/arrow-right.svg);
    text-indent: -9999px;
}

.owl-carousel .owl-item,
.owl-carousel .owl-item div,
.owl-carousel .owl-item div img{
	max-height: 230px;
}
.owl-carousel .owl-item div img{
	width: inherit;
    margin: auto;
}


@media (max-width: 1440px), (max-height: 885px){
	.container-messi {
    	transform: scale(0.9)!important;
	}
	body.principal:before {
		width: 360px;
		height: 358px;
	}
	body.principal:after {
		top: 105px;
    	left: 107px;
		width: 189px;
		height: 272px;
		background-size: contain;
		background-position: bottom;
	}
	.escut {
		right: 30px;
		top: 30px;
		width: 75px;
	}
	.container-messi:before{
		background-size: contain;
		background-position: bottom;
		width: 283px;
		height: 277px;
		right: -330px;
		top: 32px;
	}
	.container-messi:after{
		background-size: contain;
		background-position: bottom;
		width: 350px;
		height: 288px;
		right: -381px;
		bottom: -6px;
	}
}

@media (min-width: 1367px) and (max-width: 1440px){
	.container-messi {
    	transform: scale(1);
	}
}

@media (max-width: 1023px){
	body.principal:before,
	body.principal:after,
	.container-messi:before,
	.container-messi:after,
	.escut{
		display: none;
	}
}

@media (min-width: 801px) and (max-width: 1366px), (max-height: 850px){
}