* {
   	margin: 0;
   	padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


body{
   background-color: #F9f9f9;
   color: #454545;
}



/* HEADER STYLES */
#header-container
{
	position: fixed;
	width: 100%;
	height: 80px;
	top: 0px;
	z-index: 100;
	background-color: #F9f9f9;
}

#header-container-fakespace
{
	position: relative;
	width: 100%;
	height: 80px;
	top: 0px;
	z-index: 100;
}
#header-centered
{
	position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:90%;
	height: 100%;
	max-width: 1100px;
	
	/*Hack to avoid side shadows being hidden by the overflow:auto. If no overflow, containers don't resize properly*/	
	padding-left: 10px;
	padding-right: 10px;
}
#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;
	text-align: 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;

}
#header-button-container-mobile
{
	position: absolute;
	display: none;
	right: 0;
	top: 0;
	float: right;
	text-align: 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 #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);
}


/* MENU COLLAPSIBLE INDEX*/
#menu-mobile-container
{
	display: none;
}
#menu-mobile-toggle {
  display: none;
}
#menu-mobile {
  background-color: #f2f2f2;
  width: 100%;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  margin: 0 auto;
  -webkit-transition: all 0.3s ease;
}
#menu-mobile-toggle:checked + #menu-mobile {
  max-height: 390px;
}
.menu-mobile-row
{
	text-align: center;
	text-decoration: none;
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
	height: 80px;
	line-height: 80px;
	text-align: center;

	cursor: pointer;
	/* Sign up: */
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	font-size: 14px;
	color: #545454;
}

/* MENU COLLAPSIBLE DASHBOARD*/
#menu-dash-mobile-container
{
	display: none;
}
#menu-dash-mobile-toggle {
  display: none;
}
#menu-dash-mobile {
  background-color: #f2f2f2;
  width: 100%;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  margin: 0 auto;
  -webkit-transition: all 0.3s ease;
}
#menu-dash-mobile-toggle:checked + #menu-dash-mobile {
  max-height: 470px;
}
.menu-dash-mobile-row
{
	text-align: center;
	text-decoration: none;
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
	height: 80px;
	line-height: 80px;
	text-align: center;

	cursor: pointer;
	/* Sign up: */
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';
	
	font-size: 14px;
	color: #545454;
}

.menu-dash-mobile-row-text{
	font-family: 'Lato','HelveticaNeue-Bold', 'Helvetica', 'Arial';

}

/* GENERIC  MARGINS */
.topmargin10
{
	margin-top: 10px;
}
.topmargin20
{
	margin-top: 20px;
}
.topmargin40
{
	margin-top: 40px;
}
.topmargin100
{
	margin-top: 100px;
}
.leftmargin10
{
	margin-left: 10px;
}
.leftmargin20
{
	margin-left: 20px;
}
.leftmargin40
{
	margin-left: 40px;
}
.leftmargin100
{
	margin-left: 100px;
}
.rightmargin10
{
	margin-right: 10px;
}
.rightmargin20
{
	margin-right: 20px;
}
.rightmargin40
{
	margin-right: 40px;
}
.rightmargin100
{
	margin-right: 100px;
}

/* Generic TEXT styles*/
.underline-dotted-pink{
	color: #ff8b8b;
	border-bottom: 1px dashed #ff8b8b; 
}
.cursor-pointer{
	cursor: pointer;
}

/* GENERIC BUTTONS */

.button-rounded
{	
	
	height: 40px;
	line-height: 40px;
	text-align: center;

	cursor: pointer;
	/* Rectangle 2: */
	background: #ff8b8b/*#FD8E8D*/;
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.20);
	border-radius: 20px;
	/* Sign up: */
	font-family: AvenirNext-Medium, OpenSans, 'MyFutura', Futura, Helvetica;
	font-size: 14px;
	color: white; /*#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: 1px;
}
.button-rounded:active
{
	background: #ff8b8b;
	/*Move it down a little bit*/
	position: relative;
	top: 1px;
	/*RemoveShadow*/
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.0);
}


.button-rounded-border
{
	text-decoration: none;
	position: relative;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	
	height: 40px;
	line-height: 38px;
	text-align: center;

	cursor: pointer;
	border: 2px solid #ff8b8b;
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.20);
	border-radius: 20px;
	/* Sign up: */
	font-family: AvenirNext-Medium, OpenSans, 'MyFutura', Futura, Helvetica;
	font-size: 14px;
	color: #545454;
}
.button-rounded-border:hover
{
	text-decoration: none;
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0,0);
	/*Move it down a little bit*/
	position: relative;
	top: 1px;
}
.button-rounded-border:active
{
	text-decoration: none;
	background: #ff8b8b;
	/*Move it down a little bit*/
	position: relative;
	top: 1px;
	/*RemoveShadow*/
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0,0);
}

.button-rounded-border-shadowless
{
	text-decoration: none;
	position: relative;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	
	height: 40px;
	line-height: 38px;
	text-align: center;

	cursor: pointer;
	border: 2px solid #ff8b8b;
	border-radius: 20px;
	/* Sign up: */
	font-family: AvenirNext-Medium, OpenSans, 'MyFutura', Futura, Helvetica;
	font-size: 14px;
	color: #545454;
}
.button-rounded-border-shadowless:hover
{
	text-decoration: none;
	/*Move it down a little bit*/
	position: relative;
	top: 1px;
}
.button-rounded-border-shadowless:active
{
	text-decoration: none;
	background: #ff8b8b;
	/*Move it down a little bit*/
	position: relative;
	top: 1px;
}


.button-plain
{
	text-decoration: none;
	position: relative;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 20px;
	height: 40px;
	line-height: 40px;
	text-align: center;

	cursor: pointer;
	/* Sign up: */
	font-family: AvenirNext-Medium, OpenSans, 'MyFutura', Futura, Helvetica;
	font-size: 14px;
	color: #545454;
}
.button-plain:hover
{
	text-decoration: none;
	box-shadow: inset 0px 0px 62px rgba(255, 96, 96, 0.37);

}
.button-plain:active
{
	text-decoration: none;
}

/* GENERIC BODY STRUCTURE */
#macro-container
{
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:100%;
}

#macro-container-content{
	overflow: auto;
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:90%;
	max-width: 1100px;
	
	/*Hack to avoid side shadows being hidden by the overflow:auto. If no overflow, containers don't resize properly*/	
	padding-left: 10px;
	padding-right: 10px;
}


#macro-container-content-leftbox
{
	position: relative;
	float: left;
	width: 50%;
}
#macro-container-content-rightbox
{
	position: relative;
	float: left;
	width: 50%;
}


/* SPECIFIC CLASSES: CONTAINER ATTRIBUTES */
.index-join-container
{
	min-height: 400px;
	padding-top: 50px;
	padding-bottom: 50px;
}
.index-join-container-content-left
{
	padding-top: 60px;
	padding-bottom: 20px;
}
.index-join-container-content-right
{	
}
.index-join-login-button-mobile
{
	display: none;
}
.index-extension-container
{
	min-height: 400px;
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #F7F7F7;
}
.index-extension-container-content-left
{	
	/* Hack to fix the window shadow due to its overflow*/
	padding-top: 20px;
	padding-bottom: 20px;
}
.index-extension-container-content-right
{	
	/* Hack to fix the window shadow due to its overflow*/
	padding-top: 20px;
	padding-bottom: 20px;
	
	/* Separate from left window*/
	padding-left: 40px;	
}

/* SPECIFIC CLASSES: CONTENT ELEMENTS */
.index-join-title{
	width: 100%;
	position: relative;
	float: left;
	font-family: 'Open Sans', sans-serif, Helvetica, Arial;
	font-size: 32px;
	font-weight: 700;
}
.index-join-subtitle{
	width: 100%;
	position: relative;
	float: left;
	font-family: 'Open Sans', sans-serif, Helvetica, Arial;
	font-size: 16px;
	font-weight: 400;
}
.index-join-image{
	display:inline-block;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	display: block;
	width: 100%;
	min-width: 250px;
	max-width: 500px;
	float: left;
	margin-right: 30px;
	
}

.index-join-button-attrbts{
	/*Needed to be aligned under text. Otherwise, it's broken*/	
	position: relative;
	float: left;
	padding-left: 20px;
	padding-right: 20px;

}

.index-extension-title{
	position: relative;
	float: left;
	font-family: 'Open Sans', sans-serif, Helvetica, Arial;
	font-size: 22px;
	font-weight: 700;
}
.index-extension-subtitle{
	position: relative;
	float: left;
	font-family: 'Open Sans', sans-serif, Helvetica, Arial;
	font-size: 16px;
	font-weight: 400;
}
.index-extension-image{
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	display: block;
	width: 100%;
	float: left;
	box-shadow: 10px 10px 4px 0 #D9D9D9;
}

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

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


/* SMALLER DESKTOP SCREENS */
@media screen and (min-device-width: 800px) and ( max-width: 960px ) 
{
	.index-extension-container-content-right
	{	
		padding-top: 0px;
	}
}

/* MOBILE START */
@media screen and (min-device-width: 160px) and ( max-width: 899px )
{
		
	.hide-on-mobile {
		display: none;
	}
	.hide-on-desktop {
		display: inherit;
	}
	
	#header-container
	{
		position: fixed;
	}
	
	#macro-container-content-leftbox
	{
		margin-top: 0px;
		width: 100%;
	}
	
	#macro-container-content-rightbox
	{
		min-width: 340px;
		width: 100%;
	}
	
	.index-join-container-content-left
	{
		padding-top: 10px;
	}
	
	.index-join-container-content-right
	{
		position: relative;
		margin-top: 80px;
	}
	
	.index-join-image{
		float: none;
		margin: 0 auto;
		width: 90%;
	}
	
	.index-extension-container-content-right
	{	
		padding-top: 0px;
		padding-left: 0px;	
	}

	.index-extension-image{
		width: 90%;
		min-width: 0px;
		float: none;
		margin: 0 auto;
	}

	
	/*UPDATE:: Brought from old (< max-width: 540px) */
	#header-button-container
	{
		display: none;
	}
	#header-button-container-mobile{
		display: flex;
	}
	.index-join-login-button-mobile
	{
		display: block;
	}

	#menu-mobile-container
	{
		display: block;
	}
	#menu-dash-mobile-container
	{
		display: block;
	}

}

/* REAL MOBILE: REPLACE HEADER FOR MOBILE MENU BUTTON Starting on <540px screens */
/* DUPLICATE AND USELESS, this is already called on max-width<800 with the rest of mobile stuff. here crearted a limbo state between 540 and 799, with half mobile half desktop*/
@media screen and (min-device-width: 160px) and ( max-width: 540px ){
	#header-button-container
	{
		display: none;
	}
	#header-button-container-mobile{
		display: flex;
	}
	.index-join-login-button-mobile
	{
		display: block;
	}

	#menu-mobile-container
	{
		display: block;
	}
	#menu-dash-mobile-container
	{
		display: block;
	}

}

/* MOBILE SMALLER SCREENS: Remove min-heights and smaller typeface, starting on 414px, iPhone 8+ */

@media screen and (min-device-width: 160px) and ( max-width: 412px ){
	#macro-container-content-leftbox
	{
		min-width: 0px;
	}
	
	#macro-container-content-rightbox
	{
		min-width: 0px;
	}
	.index-join-title{
		font-size: 26px;
	}
	.index-join-subtitle{
		font-size: 14px;
	}
	.index-join-image{
		min-width: 0px;
	}
	.index-extension-title{
		font-size: 18px;
	}
	.index-extension-subtitle{
		font-size: 14px;
	}


}