* {
  	font-family:  'MyFutura', Avenir-Light, Futura, Helvetica, Arial;
	font-size: 18px;
	color: #000000;
   	margin: 0;
   	padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}


body{
   background-color: #f9f9f9;
}


@font-face {
  font-family: 'MyFutura';
  src:  url('/css/35CA24_0_0.woff2') format('woff2'),
        url('/css/35CA24_0_0.woff') format('woff');
}


/* HEADER STYLES */
#header-container
{
	position: fixed;
	width: 100%;
	height: 75px;
	padding-top: 10px;
	top: 0px;
	z-index: 100;
	background: white;
}
#header-centered
{
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:90%;/*81.25%;*/
	height: 100%;
	max-width: 1110px;
}
#logo{
	position: relative;
	cursor: pointer;
	width: 140px;
	height: 26px;
	background-image: url('../images/logo.svg');
	top: 50%;
	background-repeat: no-repeat;
  	transform: translateY(-50%); /*http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/*/
	z-index: 101; /*Para que no lo tape nada*/
}
#header-button-container
{
	position: absolute;
	right: 0;
	top: 0;
	float: right;
	top: 50%;
  	transform: translateY(-50%); /*http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/*/
	z-index: 101; /*Para que no lo tape nada*/
	display: flex; /* So when I add more elements, such as bell, they stay in a row*/
	align-items: center;
	justify-content: flex-end;

}
#profile-pic{

	width: 50px;
	height: 50px;
	position: relative;
	cursor: pointer;
	border: 2px solid #ff8b8b;
	border-radius: 25px;
	color: #ff8b8b;
}

#profile-pic:hover
{
	background: #ff8b8b;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}
#profile-pic:active
{
	/*Move it down a little bit*/
	position: relative;
	top: 1px;
	/*RemoveShadow*/
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0,0);
}

.button-burger{
	width: 40px;
	height: 40px;
	position: relative;
	cursor: pointer;
	border: 0px solid #ff8b8b;
	border-radius: 20px;
	color: #ff8b8b;
}

/* FOOTER */
#footer-floating-container
{
	position:fixed;
	bottom: 0;
	z-index: 100;
	width: 100%;
	height: 60px;

}
#footer-button
{
	position:absolute;
	bottom: -4px;
	z-index: 101;
	background: #6d6d6d;
	height: 45px;
	min-width: 80px;
	
	line-height: 2;
	text-align: center;

	cursor: pointer;
	
	padding-left: 8px;
	padding-right: 8px;
	/* Rectangle 2: */
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
	border-radius: 4px;
	/* Sign up: */
	font-family: AvenirNext-Medium, 'MyFutura', Futura, Helvetica;
	font-size: 14px;
	color: #FFFFFF;

}
#footer-button:hover
{
	background-color: #454545;
}
#footer-button:active
{
	background-color: #ff8181;
}
/* CONTENEDOR*/
#macro-container
{
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:100%;
	height: auto;
	background-color: white;
}
#macro-container-clear
{
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:100%;
	height: 400px;
	padding-top: 50px;
}
#macro-container-yellow
{
	position: relative;
	left: 0;
    right: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
	width:100%;
	height: 70vh;
	background-color: #FFF1B3;
	background-color: #e3e9ea;
	z-index: -1;
}
#general-centrado{ /*Este es el que queria que fuera absolute para usar scrolls de pagina, pero no lo uso aun */
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:90%;/*81.25%;*/
	max-width: 1110px;
	height: auto;
	/*overflow: hidden; Esto hacia que se redisemsionara todo bien, pero tapaba sombras*/
	/*min-height: 100vh;*/ /*Como minimo, la altura tiene que ser el 100% vertical, para que no se vea el blog (en caso de haberlo)*/
	/*padding-bottom: 100px;*/
}

#principal{
	position:relative;
	float: right; /* POR ALGUN MOTIVO sin esto no se redimensiona con sus children*/
	width: 100%;
	/*min-height: 90vh;*/
	padding-top: 50px;
	/*padding-top: 100px;*/ /*Mejor padding que margin, para q asi arriba este tocando. Si uso top: los siguientes ignoran ese cambio y se solapan.*/
	text-align: left;

	padding-bottom: 60px;

	/* Intentos de que el footer se mantenga abajo sin estorbar*/
	/*padding-bottom: 20vh;*/

}

#principal-left-plegable /* Si en vez de un solo principal quiero que dos se puedan montar. Usado en pricing*/
{
	position: relative;
	min-width: 380px; /*En mobile quito esta restricction porq sino se desalinea*/
	max-width: 400px;
	float: left;
	width: 35%;
}
#principal-right-plegable /* Si en vez de un solo principal quiero que dos se puedan montar. Usado en pricing*/
{
	position: relative;
	float: left;
	width: 60%;
	padding-top: 20px;
}

/* INDEX.PHP */

#title{
	position: relative;
 	padding-top: 35px;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 45px;
	color: #4A4A4A;
	margin-bottom: 16px;
}

#subtitle-container{
	width: 100%;
	position: relative;
	float: left;

	font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
	font-size: 16px;
	color: #4A4A4A;
	margin-bottom: 16px;
}

#subtitle-text{
	width: 50%;
	position: relative;

	font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
	font-size: 18px;
	line-height: 28px;
	color: #4A4A4A;
}
#principal-button-container
{
	position: relative;
	float: left;
	margin-top: 20px;
	margin-right: 20px;
}
#principal-button-container-mobile /* Permite que un boton dentro de el, se centre al reducir pantalla*/
{
	position: relative;
	width: 100%;
	float: left;
	margin-top: 20px;
	margin-right: 20px;
}

#principal-windows-image
{
	position: absolute;
	float: right;
	width: 360px;
	height: 270px;
	right: 23px;
	top: 50%;
  	transform: translateY(-46%) rotate(9deg);

	background-image: url('https://subbbs.com/images/window.svg');
	background-size: 358px 268px;
	background-repeat: no-repeat;
	z-index: -1;

}

#logos-bottomof-principal
{
	position:absolute;
	width: 100%;
	float: right;
	height: 40px;
	text-align: left;
	bottom: 0;
}
#logos-bottomof-principal .bitcoin
{
	position:relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	background: url('https://subbbs.com/images/bitcoin.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 55px;
	z-index: -1;
}
#logos-bottomof-principal .stripe
{
	position:relative;
	display: inline-block;
	width: 60px;
	height: 40px;
	background: url('https://subbbs.com/images/stripe.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}

#index-explanation-container /*Usado para la explicacion en index*/
{	
	position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:90%;/*81.25%;*/
	max-width: 1110px;
	margin-top: 5vh;
}
#index-explanation-container-element
{
	position: relative;
	float: left;
	width: 100%;
	text-align: left;
	
	font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
	font-size: 14px;
	color: #181818;
	margin-top: 20px;
	margin-bottom: 40px;
	
	text-align: center;
	
	
	padding-left: 20%;
	padding-right: 20%;
	
	
}
#index-explanation-container-element .title
{
	font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	margin-bottom: 10px;
	color: #181818;
	font-weight: bold;
}

/* BUTTONS */

.button-empty
	{

	min-width: 110px;
	max-width: 200px;
	height: 40px;

	line-height: 2.5;
	text-align: center;

	cursor: pointer;
	/* Rectangle 2: */
	/* Sign up: */
	font-family: AvenirNext-Medium, 'MyFutura', Futura, Helvetica;
	font-size: 16px;
	color: #3c3c3c;

}
.button-filled
	{

	min-width: 110px;
	max-width: 200px;
	height: 40px;

	line-height: 2.5;
	text-align: center;

	cursor: pointer;
	/* Rectangle 2: */
	background: #ff8b8b;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
	border-radius: 4px;
	/* Sign up: */
	font-family: AvenirNext-Medium, 'MyFutura', Futura, Helvetica;
	font-size: 16px;
	color: #FFFFFF;

}
.button-filled:hover
{
	background:#868686;
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0,0);
	/*Move it down a little bit*/
	position: relative;
	top: 2px;
}
.button-filled:active
{
	background: #ff8b8b;
	/*Move it down a little bit*/
	position: relative;
	top: 2px;
	/*RemoveShadow*/
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0,0);
}


.button-filled-darkgrey{

	width: 110px;
	height: 40px;


	line-height: 2.5;
	text-align: center;

	cursor: pointer;
	/* Rectangle 2: */
	background: #363a3d;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
	border-radius: 4px;
	/* Sign up: */
	font-family: AvenirNext-Medium;
	font-size: 16px;
	color: #FFFFFF;

}
.button-filled-darkgrey:hover
{
	background: #575757;
}
.button-filled-darkgrey:active
{
	background: #363a3d;
	/*Move it down a little bit*/
	position: relative;
	top: 2px;
	/*RemoveShadow*/
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0,0);
}

#button-empty{

	width: 100px;
	height: 38px;

	position: relative;
	float: left;

	line-height: 2.3;
	text-align: center;

	cursor: pointer;
	border: 2px solid #ff8b8b/*#FDA4A4*/;
	border-radius: 4px;
	/* Sign up: */
	font-family: AvenirNext-Regular;
	font-size: 16px;
	color: #ff8b8b;
}

#button-empty:hover
{
	background: #ff8b8b;
	color: #ffffff;
	/*Show little Shadow*/
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}
#button-empty:active
{
	background: #ff8b8b;
	color: #ffffff;
	/*Move it down a little bit*/
	position: relative;
	top: 2px;
	/*RemoveShadow*/
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0,0);
}


/* For Send.php*/
.button-rounded
	{
	
	max-width: 150px;
	height: 40px;

	line-height: 40px;
	text-align: center;

	cursor: pointer;
	/* Rectangle 2: */
	background: #FF827E/*#ff8b8b and older #f9ed8c*/;
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.20);
	border-radius: 20px;
	/* Sign up: */
	font-family: AvenirNext-Medium, 'MyFutura', Futura, Helvetica;
	font-size: 14px;
	color: #545454;

}
.button-rounded:hover
{
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0,0);
	/*Move it down a little bit*/
	position: relative;
	top: 2px;
}
.button-rounded:active
{
	background: #ff8b8b;
	/*Move it down a little bit*/
	position: relative;
	top: 2px;
	/*RemoveShadow*/
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.20);
}

#qrcode-darker {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
    opacity: .0;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

#qrcode-darker:hover {
    opacity: 1;
}

/* LABELS */

.label-reward
{
	text-align: center;
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 14px;
	font-weight: 700;
	color: #525252;
	text-decoration: none;
}
.label-reward:hover
{
	color: #FF8B8B;
}
.label-reward-mobile
{
	text-decoration: none;
}
.label-reward-mobile:hover
{
	color: white;
}

/* USEFUL to center stuff */
.centered /* assign this class to anybutton to be centered*/
{
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    float:  none;
}


/* INDEX.php DETAIL zone */

#detail-container
{
	/* Rectangle 3: */
	position: relative;
	float: left;
	background: #D9D9D9;
	box-shadow: 0 4px 0 70px #C9C9C9;
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:100%;
	height: 33vh;
	min-height: 300px;
	max-height: 350px;
}

#detail-centrado
{
	/* Una vez ocupado todo el ancho, ahora ya el contenido centrado */
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:81.25%;
	height: 100%;
}

#detail-right
{
	position: relative;
	width: 44%;
	float: right;
	height: 85%;
	top: 50%;
  	transform: translateY(-50%);
  	padding-top 50px;

}
#detail-right-feature
{
	display: inline-block;
	float: left;
	width: 100%;
	padding-left: 100px;
	height: 28px;
	font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
	font-size: 14px;
	margin-top: 20px;
	line-height: 28px;
	color: #575757;

}
.feature-landing
{
	background: url('https://subbbs.com/images/EmojiGroup-landing.png');
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
}
.feature-reminders
{
	background: url('https://subbbs.com/images/EmojiGroup-reminders.png');
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
}
.feature-dashboard
{
	background: url('https://subbbs.com/images/EmojiGroup-dashboard.png');
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
}
.feature-directpayments
{
	background: url('https://subbbs.com/images/EmojiGroup-directpayments.png');
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
}

/* GENERIC GREY STRIPE AT THE BOTTOM */

#detail-fake-container
{
	/* Rectangle 3: */
	position: relative;
	float: left;
	background: #d9d9d9;
	box-shadow: 0 4px 0 70px #C9C9C9;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:100%;
	height: 10px;
	z-index: -1;
}

/* PRICING BOXES */

.box-pricing-frame
{
	float: right;
	margin-left: 40px;
	width: 250px;
    background-color: #E9E9E9;
	border-radius: 8px;
	margin-top: 40px;
	padding-bottom: 1px;
}
.box-pricing-frame .title
{
	font-family: 'Lato';
	font-size: 10px;
	margin-left: 20px;
	color: #4A4A4A;
}

.box-pricing-inside
{
	position: relative;
	margin-top: 5px;
	width: 246px;
    left: 0;
    right: 0;
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    margin-bottom: 1px;
	border-radius: 6px;
}
.box-pricing-inside .feature
{
	display: inline-block;
	font-family: 'Open Sans';
	font-size: 11px;
	margin-left: 20px;
	margin-bottom: 10px;
	color: #4A4A4A;
	text-align: left;
}
.box-pricing-inside .pricing
{
	display: inline-block;
	width: 100%;
	font-family: 'Open Sans';
	font-size: 12px;
	margin-top: 30px;

	margin-bottom: 30px;
	color: #4A4A4A;
	text-align: left;
}
.box-pricing-pro-button .small
{
	font-size: 8px;
	color: #4A4A4A;
}
#box-pricing-free-button, #box-pricing-pro-button
{
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.box-pricing-inside .footer
{
	width: 100%;
	font-family: 'Open Sans';
	font-size: 11px;
	bottom: 0;
	color: #848484;
	text-align: center;
	padding-bottom: 15px;
}

#box-pricing-free-fakebutton, #box-pricing-pro-fakebutton /* Pricing texts when user is not logged in yet on pricing.php*/
{
	width: 100%;
	line-height: 0.5;
	text-align: center;
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

	/* Sign up: */
	font-family: 'Lato', 'MyFutura', AvenirNext-Medium;
	font-size: 40px;
	margin-bottom: 10px;
	color: #aeaeae;
}
/* SIGNUP STYLES */

#box-signup-main
{
	width: 80%;
	max-width: 400px;
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#box-signup-main .title
{
	font-family: 'Lato',"HelveticaNeue-Light",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 30px;
	padding-bottom: 5px;
	color: #4A4A4A;
}

#box-signup-main-box
{
	width: 100%;
	min-height: 140px;
  padding-top: 40px;
  padding-bottom: 0px;/*padding-bottom: 20px;*/
}

#box-signup-main-box .content
{
	width: 90%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;

}
#box-signup-main-box .details
{
	width: 90%;
	bottom: 20px;
  margin-top: 20px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
    line-height: 30px;
	font-size: 13px;
	color: #9B9B9B;
}
#box-signup-twitter
{
	width: 90%;
	height: 40px;
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#signup-warning /* use this as id, and apply class for color*/
{
	position: relative;
	margin-bottom: 20px;
	padding: 8px 8px 8px 8px;
	width: 100%;
	float: right;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	text-align: left;
	border-radius: 10px;
	min-height: 30px;
	line-height: 13px;
}

.signup-warning-red
{
	background-color: #ffa6a6;
}
.signup-warning-yellow
{
	background-color: #FFF1B3;
}
.signup-warning-green
{
	background-color: #a6ffd6;
}
a.redish
{
	cursor:pointer;
	color:#ff6969;
	cursor: pointer;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
}
a.redish:hover
{
	cursor: pointer;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
	color: #5f5e5e;
}
a.softy:hover
{
	cursor: pointer;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
	color: #333333;
}
a.softy:link
{
	cursor: pointer;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
	color: #333333;
}
a.softy:hover
{
	cursor: pointer;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
	color: #ff6969;
}
/* SEND STYLES */

#box-send-main
{
	width: 100%;
	max-width: 400px;
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /*padding-top: 30px;*/
}

#box-send-main .title
{
	font-family: 'Lato',"HelveticaNeue-Light",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 30px;
	padding-bottom: 5px;
	color: #4A4A4A;
	font-weight: 500;
}

#box-send-main-box
{
	width: 100%;
	min-height: 140px;
  padding-top: 40px;
  padding-bottom: 20px;
  
}

#box-send-main-box .content
{
	width: 90%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  
  font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;

}

#box-send-main-box .content-noconfetti /* same than content but no confetti at the end*/
{
	width: 90%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  
  font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
}

#box-send-main-box .details
{
	width: 90%;
	bottom: 20px;
	margin-top: 20px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
    line-height: 40px;
	font-size: 13px;
	color: #7f7f7f;
}
#box-send-main-copyln
{
	width: 90%;
	height: 40px;
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.box-generic-inner-message-yellow
{
	position: relative;
	width: 100%;
	text-align: center;
	padding: 8px 8px 8px 8px;
	width: 100%;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	border-radius: 10px;
	min-height: 30px;
	line-height: 13px;
	background-color: #FFF1B3;
}

/* DASHBOARD */

.dot{
	margin-left: 4px;
	display: inline-block;
	width: 8px;
	height: 8px;
	position: relative;
	border-radius: 8px;
	background-color: #ff8b8b;
}

#dashboard-title
{
	position: relative;
	float: left;
	width: 100%;
	text-align: left;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 40px;
	color: #4A4A4A;
}

#dashboard-warning /* use this as id, and apply class for color*/
{
	display: none;
	position: relative;
	margin-bottom: 20px;
	padding: 5px 5px 5px 5px;
	width: 100%;
	float: right;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 12px;
	text-align: center;
	border-radius: 10px;
	height: 30px;
	line-height: 20px;
}
.dashboard-warning-red
{
	background-color: #ffa6a6;
}
.dashboard-warning-yellow
{
	background-color: #fff5a6;
}
.dashboard-warning-green
{
	background-color: #a6ffd6;
}

#dashboard-left
{
	position: relative;
	float: left;
	width: 25%;
	min-width: 200px;
	min-height: 100px;
	padding-top: 25px;
	padding-left: 10px; /*To match new header padding logo*/

}
#dashboard-right
{
	position: relative;
	float: left;
	width: 75%;
	min-height: 200px;
	padding-top: 25px;

}
#dashboard-left .menuelement
{
	width: 100%;
	cursor: pointer;
	height: 30px;
	margin-bottom: 5px;
	float: left;
	text-align: left;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	color: #4A4A4A;
}
#dashboard-left .menuelement:hover
{
	color: #7e7e7e;
}

#dashboard-right-bigboxes-nopadding
{
	position: relative;
	width: 100%;
	float: right;
}


#dashboard-right-bigboxes
{
	position: relative;
	margin-bottom: 20px;
	padding: 20px 20px 10px 20px;
	width: 100%;
	float: right;
}
#dashboard-right-genericbox
{
	position: relative;
	float: right;
	min-height: 20px;
	margin-top: 10px;
	width: 100%;
}
#dashboard-right-bigboxes .top
{
	position: relative;
	width: 100%;
	height: 30px;
	float: right;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 14px;
	color: #4A4A4A;
}
#dashboard-right-bigboxes .content
{
	position: relative;
	width: 100%;
	min-height:100px;/*Con que haya una caja de data, ya se hace mas grande*/
	/*padding-bottom: 20px;Para que respire con respecto a los botones de abajo*/
	float: right;
}

.content .balance /* Main Balance*/
{
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	height: 100px;
	min-width: 100px; /*En el caso de las cifras de dinero, se hace mas grande, pero minimo 100, cuadrado*/
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 80px;
	font-weight: 700;
	text-align: center;
	line-height: 100px;
	color:#606060;
}
.content .balance-secondary /* Main Balance*/
{
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
	min-width: 100px; /*En el caso de las cifras de dinero, se hace mas grande, pero minimo 100, cuadrado*/
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 28px;
	text-align: center;
	line-height: 40px;
	font-weight: 300;
	color:#606060;
}


.content .infoblock /* Contains the analytic resizable block of data*/
{
	position: relative;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	height: 50px;
	min-width: 20px; /*En el caso de las cifras de dinero, se hace mas grande, pero minimo 100, cuadrado*/
	float: left;
	font-family: 'Open Sans',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 40px;
	text-align: center;
	line-height: 30px;
	color:#606060;
}
.infoblock .label /* Contains the label for analytic data*/
{
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 12px;
	line-height: 12px;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	text-align: center;
	color:#939393;
}

.content .lighter /*Just a color label for the content*/
{
	color:#8b8b8b;
}
.content .red /*Just a color label for the content*/
{
	color:#ff6982;
}
.content .green /*Just a color label for the content*/
{
	color:#5cffa8;
}



.balance .project-data-box-label /* Contains the label for analytic data*/ /* Is this even used? maybe by units: "satoshis" under amount*/
{
	position: relative;
	width: 100%;
	height: 12px;
	line-height: 12px;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 14px;
	text-align: center;
	color:#555555;
}




#dashboard-right-bigboxes .bottom
{
	position: relative;
	width: 100%;
	height: 30px;

	float: right;
}
.bottom .button
{
	position: relative;
	cursor: pointer;
	padding-right: 10px;
	margin-right: 10px;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 12px;
	color: #828282;
}
.bottom .button:hover
{
	color: #9013FE;
}

/* DASHBOARD History Log.*/
#dashboard-history-item
{
	width: 100%;
    height: 80px;
    background-Color: #ffffff;
    margin-Bottom:20px;
    border-radius: 20px;
    border-Width: 0;
    border-Color: #d9d9d9;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.twitter-clickable{
	cursor: pointer;
}
.twitter-clickable:hover{
	background: #90d4ff;
}
.genericurl-clickable{
	cursor: pointer;
}
.genericurl-clickable:hover{
	background: #fdff91;
}

#dashboard-history-item-kind
{
	display: flex;
	width: 80px;
	height: 80px;
	align-items: center;
	justify-content: center;
}
#dashboard-history-item-kind .twitter
{
	width: 44px;
	height: 44px;
	background: #82b9e9;
	border-radius: 22px;
	background: url('../images/twitter-icon.png') center;
	background-size: 44px 44px;
}

#dashboard-history-item-kind .generic-url
{
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: url('../images/generic-url-icon.png') center no-repeat;
	background-color: #43d4b0;
	background-size: 28px 28px;
}

#dashboard-history-item-kind .ln-in
{
	width: 44px;
	height: 44px;
	border: solid;
	border-width: 1px;
	border-color: #43d4b0;
	border-radius: 22px;
}
#dashboard-history-item-kind .ln-out
{
	width: 44px;
	height: 44px;
	border: solid;
	border-width: 1px;
	border-color: #ff7686;
	border-radius: 22px;
}
#dashboard-history-item-kind .onchain-in
{
	width: 44px;
	height: 44px;
	border: solid;
	border-width: 1px;
	border-color: #d4b743;
	border-radius: 22px;
}

#dashboard-history-item-datemsg-containter
{
	display: flex;
	flex: 2;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}


#dashboard-history-item-datemsg-containter .message
{
	display: flex;
	flex: 1;
	width: 100%;
	/* Subscription title:: */
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	color: #525252;
	text-overflow: ellipsis;

}
#dashboard-history-item-datemsg-containter .message-mobile 
{
	display: none; /* Then, on mobile, flex */
	flex: 1;
	width: 100%;
	/* Subscription title:: */
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	color: #525252;
	text-overflow: ellipsis;
}
#dashboard-history-item-datemsg-containter .date
{
	flex: 1;
	/* Subscription title:: */
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 13px;
	color: #555555;
	font-weight: 300;
}
#dashboard-history-item-amount-container
{
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	padding-right: 20px;
}
#dashboard-history-item-amount-container .amount
{
	display: flex;
	flex: 1;
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 12px;
	font-weight: 700;
	color: #888888;
}
#dashboard-history-item-amount-container .amountusd
{
	display: flex;
	flex: 1;
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 12px;
	font-weight: 300;
	color: #555555;
}
#dashboard-history-item-amount-container .red
{
	color: #fa7171;
}
#dashboard-history-item-amount-container .green
{
	color: #4cb2a1;
}
#dashboard-history-item-separator
{
	position: relative;
	width: 100%;
	height: 1px;
	border-bottom: 1px dotted #919191;
}
#dashboard-history-item-showall
{
	position: relative;
	cursor: pointer;
	width: 100%;
	height: 14px;
	font-size: 14px;
	text-align: center;
	font-family: 'lato',"HelveticaNeue-Bold";
	color: #a0a0a0;
	margin-top: 10px;
	margin-bottom: 10px;
}
#dashboard-history-item-showall:hover
{
	color: #d1d1d1;
}
/* DASHBOARD Payments */
#dashboard-right-bigboxes-equalpad /* padding: 20px 20px 20px 20px; */
{
	position: relative;
	margin-bottom: 20px;
	padding: 20px 20px 20px 20px;
	width: 100%;
	float: right;
}

#dashboard-right-bigboxes-equalpad .payments-text
{
	font-family: 'Lato';
	font-size: 16px;
}
#dashboard-right-bigboxes-equalpad .payments-subtext
{
	font-family: 'Open Sans',Helvetica, Avenir-Light, Arial;
	font-size: 13px;

}
#dashboard-right-bigboxes-equalpad .left-half
{
	position: relative;
	float: left;
	height: 35px;
	line-height: 35px;
	width: 50%;
}
#dashboard-right-bigboxes-equalpad .right-half
{
	position: relative;
	float: left;
	text-align: right;
	width: 50%;
	height: 35px;
	line-height: 35px;
}
#dashboard-right-bigboxes-equalpad .fullrow
{
	position: relative;
	float: left;
	text-align: left;
	width: 100%;
	padding-top: 20px;

}

a.generic:link
{
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
}
/* DASHBOARD NEW PROJECT */
#box-newproject-main
{
	width: 80%;
	max-width: 400px;
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}
#box-newproject-main .title
{
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 40px;
	padding-bottom: 5px;
	color: #4A4A4A;
}

#box-newproject-main-box
{
	position: relative;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	float: right;				/* Por algun motivo que no alcanzo a comprender, si quito esto, se hace pequeño y no absorve el redimensionado que le hacen sus children*/
}
.form-text-container
{
	position: relative;
	width: 100%;
	float: right;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 20px;
	margin-bottom:4px;
	height: 10px;
	line-height: 10px;
	/* Subscription title:: */
	font-family: 'lato',"HelveticaNeue-Bold";
	font-size: 12px;

	color: #9B9B9B;
}
.form-text-container .important
{
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	color: rgb(41, 41, 41);
}
.form-field-container
{
	position: relative;
	float: right;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;

}
.form-input
{
	position: relative;
	width: 100%;
	height: 34px;
	padding-left: 10px;
	padding-right: 10px;
	/* Rectangle 4: */
	background: #FBFBFB;
	border: 1px solid #E6E6E6;
	box-shadow: 4px 2px 8px 0 rgba(44,44,44,0.03);
	border-radius: 2px;
	font-family: 'Open Sans', 'lato';
	font-size: 12px;
	color: #a0a0a0;
}

.form-input-file {
	position: relative;
	width: 100%;
	height: 52px;
	padding-left: 10px;
	padding-right: 10px;
	/* Rectangle 4: */
	background: #FBFBFB;
	border: 1px solid #E6E6E6;
	box-shadow: 4px 2px 8px 0 rgba(44,44,44,0.03);
	border-radius: 2px;
	font-family: 'Open Sans', 'lato';
	font-size: 12px;
	padding-top: 18px;
	line-height: 12px;
	color: #a0a0a0;


}

/* SEND.PHP */

#tip-container
{
	height: 90px;
	width: 100%;
	top: 0px;
	margin-bottom: 20px;
}
#tip-container .pic
{
	width: 90px;
	opacity: 0.8;
	height: 90px;
	border: 0px solid #e6e6e6;
	border-radius: 45px;
	color: #9013FE;
	background-color: white;
	background-size: cover;
	background-repeat: no-repeat;
}

/* LANDING PAGES */

#landing-header-container
{
	position: fixed;
	width: 100%;
	height: 75px;
	padding-top: 10px;
	top: 0px;
	z-index: 100;
}
#landing-header-centered
{
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:90%;/*81.25%;*/
	height: 100%;
	max-width: 1110px;
}
#landing-logo{
	position: relative;
	cursor: pointer;
	width: 75px;
	height: 17px;
	background-image: url('https://subbbs.com/images/logo.svg');
	top: 50%;
  	transform: translateY(-50%); /*http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/*/
	z-index: 101; /*Para que no lo tape nada*/
}
#landing-header-button-container
{
	position: absolute;
	right: 0;
	top: 0;
	float: right;
	top: 50%;
  	transform: translateY(-50%); /*http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/*/
	z-index: 101; /*Para que no lo tape nada*/

}
#principal-landing{
	position:relative;
	float: right; /* POR ALGUN MOTIVO sin esto no se redimensiona con sus children*/
	width: 100%;
	min-height: 90vh;
	padding-top: 150px; /*Mejor padding que margin, para q asi arriba este tocando. Si uso top: los siguientes ignoran ese cambio y se solapan.*/
	text-align: left;
}
#landing-project-main
{
	width: 80%;
	max-width: 400px;
	padding-top: 100px;
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}
#landing-project-title
{
	position: relative;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 40px;
	text-align: left;
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	color: #4A4A4A;
}

#landing-project-pic-container
{
	position: absolute;
	height: 80px;
	width: 100%;
	top: 0px;
	margin-bottom: 40px;
}
#landing-project-pic-container .pic
{
	width: 80px;
	height: 80px;
	border: 2px solid #e6e6e6;
	border-radius: 40px;
	color: #9013FE;
	background-color: white;
	background-size: cover;
	background-repeat: no-repeat;
}
#landing-project-description
{
	position: relative;
	width: 100%;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 20px;
	/* Subscription title:: */
	font-family: 'Open Sans',"HelveticaNeue-Bold";
	font-size: 13px;
	color: #434343;
}
#landing-project-price
{
	position: relative;
	width: 100%;
	text-align: left;
	padding-left: 20px;
	margin-top: 20px;
	font-family: 'Lato',"HelveticaNeue-Bold";
	margin-bottom: 30px;
	font-size: 13px;
	color: #b1b1b1;
}
#landing-unsplash-credits
{
	position:  absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	height: 20px;
}
#landing-unsplash-credits .text
{
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
	background-color: rgba(255, 255, 255, 0.35);
	padding-left: 5px;
	padding-right: 5px;
}

a.landing-unsplash-link:link
{
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
}

/* GENERIC STYLES */
.signup-twitter
{
	/* Rectangle 4: */
	position: relative;
	background: #4A90E2;
	box-shadow: 4px 2px 8px 0 rgba(44,44,44,0.38);
	border-radius: 2px;
	color: white;
	/* Access with Twitter: */
	font-family:'My Futura',"HelveticaNeue-Medium",Helvetica, Avenir-Light, Arial;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	color: #FFFFFF;
	cursor: pointer;
}
.signup-twitter:hover
{
	/* Rectangle 4: */
	top: 1px;
	box-shadow: 4px 2px 8px 0 rgba(44,44,44,0.0);
}
.box-rounded-white-generic /* White slightly shadowed*/
{
	background: #FFFFFF;
	border: 1px solid #F2F2F2;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
	border-radius: 20px;
}

.box-rounded-white-generic .question /* Used for Q and A*/
{
	padding-left: 20px; 
	padding-right: 20px;
	font-family: 'lato',"HelveticaNeue-Bold";
	font-size: 18px;
	color: #404040;
}
.box-rounded-white-generic .answer /* Used for Q and A*/
{
	font-family: 'OpenSans', 'My Futura',"HelveticaNeue-Medium",Helvetica, Avenir-Light, Arial;
	color:#6a6a6a;
	padding-left: 20px; 
	padding-right: 20px;
	font-size: 15px;
	margin-bottom: 20px;
	margin-top: 10px;
}

.message-red
{
	display: none;
	float: right;
	position: relative;
	width: 100%;
	margin-top: 20px;
	margin-left: 20px;
	padding: 4px;
	background: #ff9a9b;
	min-height: 20px;
	line-height: 20px;
	font-family: 'Open Sans', 'My Futura',"HelveticaNeue-Medium",Helvetica, Avenir-Light, Arial;
	font-size: 12px;
	color: #4d4d4d;
	text-align: center;
	border-radius: 5px;
}

/* HELPERS */
.hide-on-mobile {
	display: inherit;
}
.hide-on-desktop {
	display: none;
}

/* LOADING ANIMATION */

.spinner {

  width: 40px;
  height: 40px;

  position: relative;
  margin: 10px auto;
}
.hidden
{
	display: none;
}
.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #9013FE;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


/* CIES */

@media screen and (min-device-width: 160px) and ( max-width: 899px ) /*No tendria ni por que poner un min-device, porq abarca todo lo humano...*/
{
	/* Esto fuerca que aparezca el menu mobile, aunque en este tamañoi, es un ipad...*/
	.hide-on-mobile {
		display: none;
	}
	.hide-on-desktop {
		display: inherit;
	}
	#dashboard-left{
		display: none;
	}

	#principal{
		padding-top: 0px; 
	}
	/**/

	#title{
		padding-top: 32px;
		font-size: 40px;
	}
	#subtitle-text{
		width: 100%;
		font-size: 15px;
	}

	#principal-windows-image
	{
		display: none;
	}

	#detail-right
	{
		float: left;
		width: 100%;
		max-width: 300px; /*To force double lines*/
	}
	#detail-right-feature
	{
		margin-bottom: 10px;
		padding-left: 95px;
		line-height: 14px;
	}
	
	/* INDEX eXPLANATION*/
	#index-explanation-container
	{
		margin-top: 0px;
	}
	
	#index-explanation-container-element
	{
	
	padding-left: 20px;
	padding-right: 20px;
	}

	/* SIGN UP SELECTION*/
	#box-signup-main
	{
		width: 100%;
		position: relative;
	}

	/* PRICING */
	#principal-left-plegable /* Si en vez de un solo principal quiero que dos se puedan montar. Usado en pricing*/
	{
		text-align: left;
		min-width: 0; /* Para evitar que se deforme todo, ya que en desktop si tiene un minimo*/
		width: 100%;
		max-width: 100%; /* Para evitar que se deforme todo, ya que en desktop si tiene un maximo*/

	}
	#principal-right-plegable /* Si en vez de un solo principal quiero que dos se puedan montar. Usado en pricing*/
	{
		width: 100%;
	}
	.box-pricing-frame{
		float:none;
	    left: 0;
	    right: 0;
	    margin-left: auto;
	    margin-right: auto;
    }

	.button-filled-mobile /* LA DIFERENCIA ES QUE ESTE SE CENTRA EN MOBIL AL REDUCIR LA PANTALLA*/
	{
		margin: 0 auto;
		width: 110px;
	}
	/* DASHBOARD*/

	#dashboard-left
	{
		width: 100%;
		padding-top: 0;
	}
	#dashboard-right
	{
		width: 100%;
		float: left;
	}
	#dashboard-right-bigboxes
	{
		width: 100%;
		float: left;
	}
	#dashboard-title
	{
		text-align: center;
		font-size: 40px;
		top: -30px;
	}

	.content .balance
	{
		font-size: 52px;
		line-height: 70px;
	}
	
	.content .infoblock /* Contains the analytic resizable block of data*/
	{
		margin-right: 0px;
		margin-top: 20px;
		margin-bottom: 30px;
		height: 50px;
		width: 50%;
		font-size: 40px;
		line-height: 30px;
	}

	/* History of transactions */
	#dashboard-history-item-datemsg-containter
	{
		line-height: 15px;
	}
	
	#dashboard-history-item-datemsg-containter .date
	{
		line-height: 15px;

	}
	#dashboard-history-item-datemsg-containter .message
	{
		display: none;
	}
	#dashboard-history-item .amount
	{
		line-height: 15px;

	}
	#dashboard-history-item-datemsg-containter .message-mobile /*Shown on a new line*/
	{
		display: flex;
	}

	/* NEW PROJECT */
	#box-newproject-main
	{
		width: 95%;
	}

	/* Landing */
	#principal-landing{
		padding-top: 50px; /*Mejor padding que margin, para q asi arriba este tocando. Si uso top: los siguientes ignoran ese cambio y se solapan.*/
	}
	#landing-project-main
	{
		width: 95%;
		max-width: 500px;
	}
	#landing-project-title
	{
		font-size: 30px;
	}
	

}


@media screen and ( max-width: 414px ) /*A partir de iPhone 7 o menor, mas pequeño el texto*/ /* ANTES ERA 376 que es el iphone creo, pero a medias fallaba en otras pantallas.*/
{

	#title{
		padding-top: 30px;
		font-size: 30px;
	}
	#subtitle-text{
		font-size: 15px;
	}
	
	#box-send-main-box .content
	{
		font-size: 17px;
	
	}
	#box-send-main-box .content-noconfetti
	{
		font-size: 17px;
	}
	
}

@media screen and ( max-width: 321px ) /*El iPhone SE tiene 320 de ancho */
{

	#title{
		font-size: 30px;
	}
	#subtitle-text{
		font-size: 12px;
	}
	#box-send-main-box .content
	{
		font-size: 14px;
	
	}
	#box-send-main-box .content-noconfetti
	{
		font-size: 14px;
	}
}