@import url(https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700,700italic,500italic,500,400italic,300italic,300,100italic,100);

@font-face {
    font-family: 'MonotypeCorsiva';
    src: url('../fonts/MonotypeCorsiva.eot');
    src: url('../fonts/MonotypeCorsiva.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MonotypeCorsiva.woff2') format('woff2'),
         url('../fonts/MonotypeCorsiva.woff') format('woff'),
         url('../fonts/MonotypeCorsiva.ttf') format('truetype'),
         url('../fonts/MonotypeCorsiva.svg#MonotypeCorsiva') format('svg');
    font-weight: normal;
    font-style: normal;
}

body,html {
	height: 100%;
	font-family: 'Roboto', sans-serif;
}

body {
	background: url(../img/home1.jpg) no-repeat center bottom fixed; 
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
}

.mb-gealogo {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1000;
}

.mb-body {
	height:100%; 
	width:100%; 
	overflow-y: auto; 
	position:fixed; 
	top: 0; 
	left:0;
	z-index:101

}

.mb-body-contents {
	padding-bottom: 40px;
}

.mb-ciudad {
	background: url(../img/ciudad.png) center bottom repeat-x;
	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.mb-lineas {
	background: url(../img/lineas.png) no-repeat top center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	width: 100%;
	position: absolute;
	z-index: 100;
	height: 84%;
}

.mb-carritos {
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	overflow: hidden;
}

#mb-carrito1 {
	background: url(../img/spritesheet2.png) -5px -5px;
	display: block;
    width: 70px;
    height: 33px;
	position: absolute;
	right: 0px;
	bottom: 62px;
	visibility: hidden
}

#mb-carrito2 {
	background: url(../img/spritesheet2.png) -85px -5px;
	display: block;
    width: 102px;
    height: 44px;
	position: absolute;
	left: 0px;
	bottom: 22px;	
	z-index: 100;
	visibility: hidden	
}

#mb-carrito3 {
	background: url(../img/spritesheet2.png) -5px -59px;
	display: block;
    width: 71px;
    height: 37px;
	position: absolute;
	right: 0px;
	bottom: 22px;		
	z-index: 100;
	visibility: hidden
}

#mb-carrito4 {
	background: url(../img/spritesheet2.png) -86px -59px;
	display: block;
	width: 78px;
    height: 39px;
	position: absolute;
	right: 0px;
	bottom: 62px;	
	visibility: hidden
}

#mb-carrito5 {
	background: url(../img/spritesheet2.png) -5px -108px;
	display: block;
    width: 69px;
    height: 34px;
	position: absolute;
	left: 0px;
	bottom: 22px;
	z-index: 100;
	visibility: hidden
}

#mblogo {
	margin-top: 20px;
	display: none;
}

#glt {
	margin-top: 60px;
}

#mnd {
	color: #fff;
	font-weight: 200;
	font-size: 1.2em;
	margin-top: 20px;
	z-index: 1000;
}

#cnt {
	margin-top: 10px;
}

.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 5s;	
	-webkit-animation-duration: 5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;

}

@keyframes slideRight {
	0% {
		left: -120px;
	}
	100% {
		left: 105%;
	}
}

@-webkit-keyframes slideRight {
	0% {
		left: -120px;
	}
	100% {
		left: 105%;
	}
}

.slideLeft {

	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 5s;	
	-webkit-animation-duration: 5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;

}

@keyframes slideLeft {
	0% {
		right: -120px;
	}		
	100% {
		right: 105%;
	}
}

@-webkit-keyframes slideLeft {
	0% {
		right: -120px;
	}		
	100% {
		right: 105%;
	}
}

#mb-page2,
#mb-shared {
	background: rgba(0, 0, 0, 0.50);
	display: none;
	overflow-x: hidden !important;	
}

#mb-shared {
	background: rgba(0, 0, 0, 0.90);
}

#mb-shared {
	display: block;
	z-index: 1000;
}

#mb-personaliza {
	margin-top: 40px;
}

#mb-slideroutput {
	background:rgba(255, 255, 255, 0.80); 
	max-width:720px; 
	margin:0 auto;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.mb-imgcont {
	position:relative; 
	max-width:400px; 
	margin:0 auto
}

.effect2 {
	position: relative;
	opacity: 0.70;
}

.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 12px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #222;
  -webkit-box-shadow: 0 15px 10px #222;
  -moz-box-shadow: 0 15px 10px #222;
  box-shadow: 0 15px 10px #222;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.effect2:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.mb-crd {
	position:absolute; 
	top:0; 
	left:0
}

.bx-viewport {
	box-sizing: content-box !important;
	-webkit-box-sizing: content-box !important
}

.bx-wrapper .bx-controls-direction a {
	width: 26px !important;
	height: 26px !important;
	margin-top: -13px !important;
}

.bx-prev {
	background: url(../img/arrows.png) -5px -5px no-repeat !important;
	left: -32px !important;
}

.bx-next {
	background: url(../img/arrows.png) -41px -5px no-repeat !important;
	right: -32px !important;
}

.bx-wrapper .bx-viewport {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	border-color: rgba(0, 0, 0, 0) !important;
	background: none !important
}

.slide.active a img {
	border: 1px solid #fff;
}

.mb-siguiente,
.mb-siguiente2,
.mb-anterior2 {
	position: absolute;
	right: 30px;
	top:50%;
	margin-top: -19px;
	z-index: 1000;
}

.mb-sig,
.mb-sig2 {
	background: url(../img/spritesheet.png) -367px -88px;
	display: block;
	width: 113px;
	height: 38px;
}

.mb-ant,
.mb-ant2 {
	background: url(../img/spritesheet.png) -5px -5px;
	display: block;
	width: 113px;
    height: 38px;
}


.mb-anterior2 {
	width: 113px;
	left: 30px;
}

.mb-siguiente-mobile,
.mb-siguiente-mobile2
 {
	margin-top: 10px;	
	display: none;
}

.mb-siguiente-mobile a {
	display: block;
	max-width: 113px;
	margin: 0 auto
}

#mb-page2-wrap,
#mb-page3-wrap,
#mb-page4-wrap,
#mb-page5-wrap { 
	position: absolute;
	top: 0;
	right: 0;
	width:100%; 
}

#mb-page3-wrap,
#mb-page4-wrap,
#mb-page5-wrap {
	right: -100%;
	opacity: 0;
	display: none;
}

.mb-text {
	max-width: 468px;
	margin: 0 auto;
	background: rgba(153, 204, 255, 0.50);
	width: 100%;
	padding: 20px;
	position: relative;
}

.mb-text .form-control {
	border-radius: 0 !important;
	box-shadow: none !important;	
	background: none !important;
	color:#fff !important;
	border: none !important;
	font-size: 1.2em;
}

#editable {
	border: 15px solid #fff;
}

#mb-escribe {
	margin-top: 140px;
}

#mb-escr {
	background: url(../img/escribe.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    color: #fff;
    padding: 22px 0;
    text-align: center;
    max-width: 498px;
    margin: 0 auto;
	font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 10px;
}

.mb-sample {
	font-family: 'MonotypeCorsiva', sans-serif;	
	overflow: hidden;
	height: 0;
}

.form-control {
	border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(146, 149, 155, 0.70) !important;
	height: 40px;
    border: none;
    color: #fff;
    font-weight: 200;
}

#mb-correos {
	margin-bottom: 20px;
}

#mb-correos label {
	color: #fff !important;
	text-align: center !important;
	font-weight: 300 !important;
}

#conectate-text,
#mb-enviada {
	margin-top: 140px;
	margin-bottom: 20px;
}

#mb-error1 {
	margin-bottom: 60px;
}

.mb-input {
	margin-bottom: 12px;
}

#mb-cargando {
	background: rgba(0, 0, 0,0.80);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none
}

#mb-ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -60px;
	margin-left: -60px;
}

#mb-error1-text,
.error2 {
	color: red !important;
	display: none;
}

.error2 {
    font-size: 0.90em;
    margin-top: 3px;
}

#tarea {
	height: 200px;
}

.mb-remaining {
	position: absolute;
    right: 6px;
    bottom: 6px;
    color: #fff;
    background: rgba(0, 0, 0, 0.70);
    padding: 0 4px;
	width: 32px;
    text-align: center;
}

#mb-enviando {
	background: rgba(0, 0, 0, 0.80);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	color: #fff;
}

#mb-enviando {
	display: none
}

#mb-envco {
	background: rgba(153, 204, 255, 0.70);
	max-width: 320px;
	margin: 0 auto;
	top: 50%;
	padding: 20px 20px;
	margin-top: -60px;
	position: relative;
	font-size: 1.2em;
	font-weight: 300;
	text-align: center;
	display: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.loader {
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
  overflow: hidden;
  background-color: #ddd;
}

.loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #2980b9;
  animation: loading 2s linear infinite;
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.animated {
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

#mb-inicio {
	margin-bottom: 20px;
}

#mb-perbtn,
#mb-drgbtn {
	margin-top: 15px;
	margin-bottom: 15px;	
}

#mb-perbtn {
	margin-top: 30px;
}

#conectar {
	background: url(../img/spritesheet.png) -128px -5px;
	display: block;
	width: 162px;
	height: 52px;
}

#conectar:hover {
	background-position: -5px -67px;
}

#volverinicio {
	background: url(../img/spritesheet.png) -367px -136px;
	display: block;
	width: 248px;
	height: 88px;
}

#volverinicio:hover {
	background-position: -271px -234px;
}

#fb {
	background: url(../img/spritesheet.png) -5px -213px;
	display: block;
	width: 256px;
	height: 56px;
}

#fb:hover {
	background-position: -5px -279px;
}

#mb-perbtna {
	background: url(../img/spritesheet.png) -639px -120px;;
	display: block;
	width: 283px;
	height: 70px;
}

#mb-perbtna:hover {
	background-position: -639px -35px;
}

#mb-drgbtna {
	background: url(../img/spritesheet.png) -447px -354px;
	display: block;
	width: 162px;
	height: 54px;
}

#mb-drgbtna:hover {
	background-position: -267px -354px;
}


#enviarbtn {
	background: url(../img/spritesheet.png) -177px -67px;
	display: block;
	width: 180px;
	height: 63px;
	margin: 0 auto;
}

#enviarbtn:hover {
	background-position: -5px -140px;	
}

.mb-btns {
	max-width: 228px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 15px;
}

.mb-btns a {
	float: left
}

#mb-geam,
.mb-gealogo a {
	background: url(../img/spritesheet2.png) -197px -5px;
	display: block;
    width: 187px;
    height: 83px;
}

.dbutton {
	background: url(../img/spritesheet.png) -266px -347px;
	display: block;
	width: 162px;
	height: 54px;
}

.descargarimg {
	margin-top: 10px;
	margin-bottom: 20px;	
}

.dimage {
	position: relative;
	cursor: pointer;
	width:250px; 
	margin:0 auto
}

.dicon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -64px;
	margin-top: -64px;
}

.descargartxt {
	color:#ffffff; 
	font-size:10px; 
	width:100%; 
	background:#000; 
	text-align:center; 
	padding:2px; 
	position:absolute; 
	bottom:0
}

@media (max-width:1430px) {
	.mb-siguiente2,
	.mb-anterior2 {
		display: none
	}
	
	.mb-siguiente-mobile2 {
		display: block
	}	
}

@media (max-width:1028px) {
	.mb-siguiente {
		display: none
	}
	
	.mb-siguiente-mobile {
		display: block
	}
}

@media (max-width:991px) {
	#mb-escribe {
		margin-top: 25px;
	}

	#mb-trj {
		max-width: 498px;
		margin: 0 auto;
		margin-top: 20px;
	}
}

@media (max-width:879px) {

	#conectate-text,
	#mb-enviada {
		margin-top: 20px
	}
	
	.mb-gealogo {
		display: none;
	}

	#mblogo {
		display: block;
	}
	
	#glt {
		margin-top: 20px;
	}	
	
	#mb-error1 {
		margin-bottom: 20px;
	}
}

@media (max-width:827px) {
	.bx-prev {
		left: 0 !important;
	}
	
	.bx-next {
		right: 0 !important;
	}	
	
	#mb-escribe {
		margin-top: 40px;
	}
}

@media all and (max-height: 600px) {
	.mb-body {
		background: rgba(0, 0, 0, 0.80);
	}
}

@media all and (max-height: 480px) {
	#mb-personaliza {
		margin-top: 15px;
	}
}

@media all and (max-width:600px) {
	#tarea {
		height: 120px;
	}
	
	.mb-text {	
		padding: 10px;
	}
}

@media all and (max-width: 410px) {
	#mb-escr {
		font-size: 1.1em;
	}
	
	#mb-envco {
		max-width: 280px;
		font-size: 1em;
	}
	
}

@media all and (max-width: 336px) {
	#mb-error1-text {
		font-size: 0.90em
	}
}

@media all and (max-width: 320px) {
	#mb-escr {
		font-size: 1em;
	}
}