* {
  	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: #FFFFFF;
}

@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: 1170px; 
}
#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*/
}
#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*/

}
#profile-pic{
		
	width: 50px;
	height: 50px;
	position: relative;
	cursor: pointer;
	border: 2px solid #9013FE;
	border-radius: 25px;
	color: #9013FE;
}

#profile-pic:hover
{
	background: #9013FE;
	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);
}

/* CONTENEDOR*/

#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: 1170px; 
	height: 100%;
	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: 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;
	margin-bottom: 100px;

}

#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: 50px;
	font-family: 'Lato',"HelveticaNeue-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 50px;
	color: #4A4A4A;
}

#subtitle-container{
	width: 100%;
	margin-top: 10px;
	position: relative;
	float: left;
	
	font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
	font-size: 16px;
	color: #4A4A4A;
}

#subtitle-text{
	width: 50%;
	position: relative;
 
	font-family: 'Open Sans','MyFutura', Avenir-Light, Helvetica, Arial;
	font-size: 16px;
	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;
}

/* BUTTONS */

.button-filled
	{

	min-width: 110px;
	max-width: 200px;
	height: 40px;
	
	line-height: 2.5;
	text-align: center;

	cursor: pointer;
	/* Rectangle 2: */
	background: #9013FE;
	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:hover
{
	background: #50E3C2;
}
.button-filled:active
{
	background: #50E3C2;
	/*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-mobile /* LA DIFERENCIA ES QUE ESTE SE CENTRA EN MOBIL AL REDUCIR LA PANTALLA*/
{	
	width: 110px;
	max-width: 200px;
	height: 40px;

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

	cursor: pointer;
	/* Rectangle 2: */
	background: #9013FE;
	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-mobile:hover
{
	background: #50E3C2;
}
.button-filled-mobile:active
{
	background: #50E3C2;
	/*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: #4A4A4A;
	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: #50E3C2;
}
.button-filled-darkgrey:active
{
	background: #50E3C2;
	/*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-grey{
		
	width: 110px;
	height: 40px;

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

	cursor: pointer;
	/* Rectangle 2: */
	background: #9B9B9B;
	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-grey:hover
{
	background: #50E3C2;
}
.button-filled-grey:active
{
	background: #50E3C2;
	/*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 #9013FE;
	border-radius: 4px;
	/* Sign up: */
	font-family: AvenirNext-Regular;
	font-size: 16px;
	color: #9013FE;
}

#button-empty:hover
{
	background: #9013FE;
	color: #ffffff;
	/*Show little Shadow*/
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}
#button-empty:active
{
	background: #9013FE;
	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);
}



/* 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;
}

/* 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-Bold",Helvetica, Avenir-Light, Helvetica, Arial;
	font-size: 50px;
	padding-bottom: 5px;
	color: #4A4A4A;
}

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

/* DASHBOARD */

#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;
	
}
#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
{
	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 .project-data-box /* Contains the analytic data*/
{
	position: relative;
	margin-right: 10px;
	height: 100px;
	min-width: 100px; /*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: 74px;
	text-align: center;
	line-height: 100px;
	color:#606060;
}
.content .lighter /*Just a color label for the content*/
{
	color:#8b8b8b;
}
.content .red /*Just a color label for the content*/
{
	color:#ff5471;
}
.content .green /*Just a color label for the content*/
{
	color:#5cffa8;
}
.project-data-box .project-data-box-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: 11px;
	text-align: center;
	color:#939393;
}
#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 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-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;
}

/* 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: 1170px; 
}
#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; /* Para que el titulo lo ignore y no paddee hacia abajo*/
	height: 70px;
	width: 100%;
	top: -35px;

}
#landing-project-pic-container .pic
{	
	width: 70px;
	height: 70px;
	border: 2px solid #9013FE;
	border-radius: 35px;
	box-shadow: 4px 2px 8px 0 rgba(44,44,44,0.4);
	color: #9013FE;
	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: 2px 2px 4px 0 rgba(0,0,0,0.15);
	border-radius: 5px;
}

.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;
}

/* 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: 1077px ) /*No tendria ni por que poner un min-device, porq abarca todo lo humano...*/
{

	#principal{
		padding-top: 20vh;
	}

	#title{
		padding-top: 35px;
		font-size: 45px;  
	}
	#subtitle-text{
		width: 100%;
	}
	
	#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;
	}
	
	/* 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;
	}
	#dashboard-left .menuelement
	{
		margin-top: 10px;
		margin-bottom: 10px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #fcfcfc;
		box-shadow: 4px 2px 8px 0 rgba(44,44,44,0.10);

	}
	#dashboard-left .menuelement:active
	{
		background: #9013FE;
		color: white;
		box-shadow: 4px 2px 8px 0 rgba(44,44,44,0);
	}
	.content .project-data-box /* Contains the analytic data*/
	{
		font-size: 44px;
		min-width: 80px; /*En el caso de las cifras de dinero, se hace mas grande, pero minimo 100, cuadrado*/
	}
	/* 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: 376px ) /*A partir de iPhone 7 o menor, mas pequeño el texto*/
	{
		
		#title{
			padding-top: 35px;
			font-size: 42px;  
		}
		#subtitle-text{
			font-size: 15px;
		}
	}
	
	@media screen and ( max-width: 321px ) /*El iPhone SE tiene 320 de ancho */
	{
	
		#title{
			font-size: 40px;  
		}
		#subtitle-text{
			font-size: 13px;
		}
	}
}