/** styles.css **/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+3:200,300,400,700);


/******************************* GLOBALS *******************************/

@fontFamily: 		'Source Sans 3', sans-serif;

@homeColor: 		#c54242;
@homeForeColor:		#fff;

@addedColor:		#357f9e;
@removeColor:		#c52a2a;

@sideBackground: 	#2a2a2c;
@sideForeground: 	#e0e0e0;

@contentBackground:	#deddda;
@contentForeground: #444;

@staticBackground:  rgba(50,50,50,0.95);
@staticForeground:  #ccc;

@linkColor:			#79A3C8; 

@lightFontWeight:   300;

@largedesktop:  ~"only screen and (min-width: 1600px)";
@desktop:   	~"only screen and (min-width: 960px) and (max-width: 1599px)";
@tablet:    	~"only screen and (min-width: 720px) and (max-width: 959px )";
@mobile:		~"only screen and (min-width: 240px) and (max-width: 719px )";

@storeCategoriesWidth: 220px;


/******************************* MIXINS *******************************/

.rounded-corners (@radius: 5px) 
{
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.radial-gradient ( @fromColor, @toColor )
{
	background: -moz-radial-gradient(center, ellipse cover,  @fromColor 0%, @toColor 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@fromColor), color-stop(100%,@toColor)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  @fromColor 0%,@toColor 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  @fromColor 0%,@toColor 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  @fromColor 0%,@toColor 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  @fromColor 0%,@toColor 100%); /* W3C */
}

.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}

.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 3px, @alpha: 0.15) {
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}

.mid-input
{
	.rounded-corners(3px);
	.gradient( #f0f0f0, #fafafa );
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);

	padding: 1px 5px;

	font-family: @fontFamily;
	font-weight: @lightFontWeight;
}


/******************************* RULES *******************************/

body, html
{
	height: 100%;
}

body 
{
	background-color: #333;
}

*
{
	font-family: @fontFamily;
}

a
{
	text-decoration: none;
	color: @linkColor;

	i
	{
		margin-right: 7px !important;
	}	
}

input
{
	border: solid 1px #ccc;

	&.invalid, &.error
	{
		color: #fff !important;
		border: solid 1px lighten(#CF2B2B, 20%);
		.gradient( darken(#CF2B2B, 5%), #CF2B2B );		
	}

	&[disabled]
	{
		opacity: 0.75;
	}
}
.abcRioButtonContents{
font-weight: @lightFontWeight !important;
text-transform: uppercase !important;
}
.fb-login, .google-login{
	font-weight: @lightFontWeight !important;
	text-transform: uppercase !important;
}
input[type="submit"], input[type="button"], button, a.button
{
	padding: 7px 14px 5px;
	background: transparent;

	border: solid 1px #fff;
	color: #fff;
	margin: 0 5px;
	font-size: 0.85em;

	font-family: @fontFamily;
	font-weight: @lightFontWeight;

	text-transform: uppercase;

	i
	{
		margin-right: 7px;
	}

	&:hover
	{
		background: @homeColor;	
		border: solid 1px @homeColor;
	}

	&.noBorder
	{
		border-color: transparent;
	}
}

hr
{
	border-top: 0 none;
	border-bottom: 3px solid rgba(0,0,0,0.25);
}

a.button
{
	display: inline-block;
}

.followMultiButton, .siteMultiButton
{
	button
	{
		width: 100%;
	}
}


.followMultiButton
{
	&.following
	{
		.followingUser 	
		{ 
			display: inline; 
			background: lighten(@addedColor, 5%);
			border-color: lighten(@addedColor, 5%);
		}
		.follow			{ display: none; }
		.unfollow 		{ display: none; }
	}

	&.following:hover
	{
		.unfollow 		
		{ 
			display: inline; 
			background: lighten(@removeColor, 5%);
			border-color: lighten(@removeColor, 5%);
		}
		.follow			{ display: none; }
		.followingUser 	{ display: none; }
	}	

	&.notfollowing
	{
		.follow			
		{ 
			display: inline; 
			background: lighten(@homeColor, 5%);
			border-color: lighten(@homeColor, 5%);			
		}
		.followingUser 	{ display: none; }
		.unfollow 		{ display: none; }
	}
}

.siteMultiButton
{
	&.pinned
	{
		.pinnedsite 
		{ 
			display: inline; 
			background: lighten(@addedColor, 5%);
			border-color: lighten(@addedColor, 5%);

			i {
				display: none;
				margin: -2px;

				@media @mobile {
					display: inline-block;
				}
			}

			span {
				@media @mobile {
					display: none;
				}
			}
		}
		.pinsite	{ display: none; }
		.unpinsite 	{ display: none; }
	}

	&.pinned:hover
	{
		.unpinsite 	
		{ 
			display: inline; 
			background: lighten(@removeColor, 5%);
			border-color: lighten(@removeColor, 5%);

			i {
				display: none;

				@media @mobile {
					display: inline-block;
				}
			}

			span {
				@media @mobile {
					display: none;	
				}
			}
		}
		.pinsite	{ display: none; }
		.pinnedsite { display: none; }
	}	

	&.notpinned
	{
		.pinsite	
		{ 
			display: inline; 

			span {
				@media @mobile {
					display: none;	
				}
			}
		}
		.pinnedsite { display: none; }
		.unpinsite 	{ display: none; }
	}
}

#discovery, #friendsBox, #chromePopup
{
	.notpinned, .notfollowing
	{
		.pinsite, .follow
		{ 
			background: @homeColor;
			border-color: @homeColor;
			color: #fff;
		}
	}

	.addsite
	{
		background: @homeColor;
		border-color: @homeColor;
		color: #fff;	
			
	}
	.addsite > span
	{

		@media @mobile 
		{
		display:none;
			
		}	
	}
}

/*************************** GENERAL *************************/

.topNotifier
{
	width: 600px;
	background: lighten(@addedColor, 5%);
	padding: 5px 30px;
	position: fixed;
	top: 5px;
	z-index: 1000;
	left: 50%;
	margin-left: -300px;
	color: #DBDBDB;
	border-radius: 5px;
	.drop-shadow(0,3px,5px,0.5);

	a
	{
		color: #fff;
	}

	.dismissLink
	{
		float: right;
		font-size: 0.75em;
		text-transform: uppercase;
		color: #DBDBDB;
		position: relative;
		top: 4px;
		right: -16px;		
	}
}

/*************************** LANDING *************************/

body.landing
{
	background-color: #000;
	background-position: top left, top center;
	background-repeat: repeat, repeat;
	background-attachment: fixed, fixed;
	background-size: auto, cover;

	&.street {
		background-image: 
			url(../img/stripe.png), 
			url(../img/home/street_blurred.jpg);
	}

	&.city {
		background-image: 
			url(../img/stripe.png), 
			url(../img/home/city_blurred.jpg);
	}

	&.glass {
		background-image: 
			url(../img/stripe.png), 
			url(../img/home/glass_blurred.jpg);
	}

	&.sky {
		background-image: 
			url(../img/stripe.png), 
			url(../img/home/sky_blurred.jpg);
	}
}


#landing
{
	padding-top: 90px;
	padding-bottom: 90px;
 
	section
	{
		text-align: center;
		color: #fff;
		font-weight: @lightFontWeight;

		&.topSection
		{

			button
			{
				margin: 30px 0;
			}

			img
			{
				width: 90%;
				max-width: 986px;
			}
			
			span
			{
				display: none;
				@media @mobile { display: inline; }
			}
		}

		&.opaque
		{
			.gradient( rgba(0,0,0,0.9), rgba(0,0,0,0.4) );
			box-shadow: 0 0 30px #000;
			position: relative;
			z-index: 100;
		}

		h1, h2, h3
		{
			margin: 0;
			font-weight: @lightFontWeight;

			strong
			{
				font-weight: 500;
			}
		}

		h1
		{
			font-size: 3em;
			color: rgba(255, 255, 255, 0.95);
			@media @mobile { font-size: 2.5em; }	
		}

		h2
		{
			font-size: 1.25em;
			color: rgba(255, 255, 255, 0.75);
			@media @mobile { font-size: 1.4em; }				
		}

		.iconCircle
		{
			padding: 30px;
			.rounded-corners ( 100% );
			background: rgba(0,0,0,0.5);
			width: 50px;
			display: inline-block;
			background-image: url(../img/stripe.png);

			.fa-external-link
			{
				position: relative;
				left: 4px;
				top: 3px;
			}
		}

		.homeBox
		{
			display: inline-block;
			width: 260px;
			margin: 15px 20px 0;
			padding: 40px;
			@media @mobile { width: 240px; }

			p
			{
				font-size: 1.1em;
				font-weight: @lightFontWeight;
				color: #eee;				
			}

			.fb-like
			{
				margin: 6px 0;
			}
		}

		&.clear 
		{
			margin-top: 50px;

			.homeBox
			{
				background: rgba(255,255,255,0.1);
			}

			h2
			{
				margin-top: 15px;
			}
		}
	}

}

#signUpButton
{
	background: #fff;
	color: #0a0a0a;

	&:hover
	{
		background: @homeColor !important; 
		color: #fff;
	}	
}

.landing
{
	button
	{
		&#signUpButton
		{
			font-size: 1.25em;
			padding: 8px 50px;	
			margin-left: 0;		
		}

		&#signInButton
		{
			background: rgba(0,0,0,0.1);
			color: #fff;
		}					

		&:hover
		{
			border-color: @homeColor; 
		} 
	}
}

/*************************** WRAPPER *************************/

#wrapper {
	padding-bottom: 1px;
}	

/*************************** TOP BAR *************************/

header
{
	position: fixed;
	width: 100%;
	z-index: 999;
	top: 0;

	&.anonym
	{
		.gradient( rgba(0,0,0,0.8), rgba(0,0,0,0) );
	}

	#mainbar
	{
		background: rgba(0,0,0,0.2);
		width: 100%;		
		position: absolute;
		top: 0;
		left: 0;		
	}

	#logo
	{
		float: left;
		overflow: hidden;
		width: 170px;
		position: relative;
		top: 7px;
		left: 10px;

		@media @tablet { width: 18px; }
		@media @mobile { width: 18px; }		
	}

	#bigLogo
	{
		float: left;
		overflow: hidden;
		width: 205px;
		position: relative;
		top: 20px;
		left: 20px;

		@media @tablet { width: 64px; }
		@media @mobile { width: 64px; }		
	}

	#login
	{
		float: right;
		color: #fff;
		margin: 30px 20px;

		button
		{
			padding: 7px 30px;
			@media @mobile { padding: 7px 15px; }
		}
		
		span
		{
			@media @mobile { display: none; }
		}
	}


	#logged
	{
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0.75;

		text-align: right;

		-webkit-transition-property: opacity;
		-webkit-transition-duration: 0.35s; 
		-webkit-transition-timing-function: ease;		

		a:focus
		{
			outline: 0;
		}

		img
		{
			margin: 10px 0;
			width: 35px;
			border-radius: 100%;

			position: relative;
			z-index: 1000;
		}

		&:hover
		{
			opacity: 1;

			-webkit-transition-property: opacity;
			-webkit-transition-duration: 0.35s; 
			-webkit-transition-timing-function: ease;	
		}

		#notifications
		{
			display: inline-block;
			border-radius: 100%;
			font-size: 0.8em;
			text-align: center;
			width: 20px;
			height: 20px;
			position: relative;
			right: 10px;
			z-index: 1000;
			top: 8px;

			&.none
			{
				background: gray;
				color: #FFF;

				span { display: none; }
			}

			&.unseen
			{
				background: @homeColor;
    			color: #fff;

				i { display: none; }
			}			

			i
			{
				margin: 0 !important;
			}	
		}

		#userPopup
		{
			position: absolute;
			top: 0;
			right: 0;
			padding: 60px 16px 16px 24px;
			background: rgba(0,0,0,0.8);
			width: 200px;
			margin: 0;

			a
			{
				display: block;
				margin: 6px 0;
				font-weight: @lightFontWeight;
				color: rgba(255,255,255,0.7);

				-webkit-transition-property: color;
				-webkit-transition-duration: 0.2s; 
				-webkit-transition-timing-function: ease;				

				&:hover
				{
					-webkit-transition-property: color;
					-webkit-transition-duration: 0.2s; 
					-webkit-transition-timing-function: ease;	
									
					color: rgba(255,255,255,0.95);
				}
			}

			ul
			{
				border-top: solid 1px rgba(255,255,255,0.25);
			}

			.nonotifications
			{
				font-weight: @lightFontWeight;
				color: rgba(255,255,255,0.5);
				font-style: italic;
			}

			.notif
			{
				color: #f0f0f0;
				font-size: 0.7em;
				margin: 0;
				padding: 7px 59px 7px 2px;
				position: relative;
				min-height: 30px;

				a
				{
					display: inline;
				    font-weight: bold;
				    color: @linkColor;
				}

				img
				{
					width: 24px !important;
					margin: 0 !important;
					position: absolute !important;
					right: 26px;
    				top: 10px;
				}

				.followMultiButton 
				{
					display: inline-block;
					position: absolute;
					right: 6px;
					z-index: 1001;
					top: 10px;

					button 
					{
						padding: 0px;
						text-align: center;
						border-radius: 100%;
						height: 24px;
						width: 24px;
						border: 0 none !important;
						margin: 0;

						i { margin: 0 !important; }
					}
				}

				&.unseen
				{
					background: rgba(255,255,255,0.1);
				}
			}
		}
	}

	#searchbox
	{
		margin: 0 171px;
		background: rgba(0, 0, 0, 0.35);

		overflow: hidden;
		white-space: nowrap;


		@media @tablet { margin: 0 38px; }	
		@media @mobile { margin: 0 38px; }		

		i
		{
			color: rgba(255, 255, 255, 0.65);
			margin: 10px 13px;
			position: relative;
			top: -1px;
		}

		input
		{
			font-family: @fontFamily;
			font-size: 1.25em;
			font-weight: @lightFontWeight;
			color: rgba(255, 255, 255, 0.75);
			border: 0 none;
			background: transparent;
			width: 100%;
			padding: 8px 0;
			text-shadow: 0 1px 1px rgba(0,0,0,0.25);
			outline: none;
		}
	}

	#suggestbox
	{
		color: #fff;
		background: rgba(0,0,0,0.35);
		padding: 50px 0 20px;

		margin: 0;

		.results 
		{
			margin-bottom: 10px;
		}

		.sugitem
		{
			padding: 5px 182px;
			@media @tablet { padding: 3px 35px 3px 42px; }	
			@media @mobile { padding: 3px 35px 3px 42px; }

			display: block;

			font-size: 1.25em;
			font-weight: @lightFontWeight;			

			i
			{
				margin-right: 16px;
			}

			em
			{
				float: right;
				color: rgba(255,255,255,0.5);
				font-size: 0.75em;
			}

			&:hover, &.selected
			{
				cursor: pointer;
				background: rgba(255,255,255,0.2);
			}

			img
			{
				margin-right: 10px;
				width: 24px;
				height: 24px;
				border-radius: 100%;
				position: relative;
				top: -1px;
				left: -3px;
			}			
		}

		.loader
		{
			text-align: center;
			padding: 10px;

			img
			{
				background-color: @staticBackground;
				padding: 20px;
				.rounded-corners(100%);
			}
		}		
	}
}

/*************************** BOARD ***************************/

.boardwp
{
	background-position: top left, top center;
	background-repeat: repeat, repeat;
	background-attachment: fixed, fixed;
	background-size: auto, cover;
	background-color: transparent, transparent;
}

.bwp-01
{
background-image: url(../img/tvstripes.png), url(../img/wp/01-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/01-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/01-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/01-1200x675.jpg); }
}

.bwp-02
{
background-image: url(../img/tvstripes.png), url(../img/wp/02-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/02-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/02-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/02-1200x675.jpg); }
}

.bwp-03
{
background-image: url(../img/tvstripes.png), url(../img/wp/03-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/03-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/03-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/03-1200x675.jpg); }
}

.bwp-04
{
background-image: url(../img/tvstripes.png), url(../img/wp/04-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/04-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/04-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/04-1200x675.jpg); }
}

.bwp-05
{
background-image: url(../img/tvstripes.png), url(../img/wp/05-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/05-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/05-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/05-1200x675.jpg); }
}

.bwp-06
{
background-image: url(../img/tvstripes.png), url(../img/wp/06-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/06-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/06-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/06-1200x675.jpg); }
}

.bwp-07
{
background-image: url(../img/tvstripes.png), url(../img/wp/07-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/07-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/07-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/07-1200x675.jpg); }
}

.bwp-08
{
background-image: url(../img/tvstripes.png), url(../img/wp/08-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/08-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/08-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/08-1200x675.jpg); }
}

.bwp-09
{
background-image: url(../img/tvstripes.png), url(../img/wp/09-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/09-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/09-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/09-1200x675.jpg); }
}

.bwp-10
{
background-image: url(../img/tvstripes.png), url(../img/wp/10-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/10-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/10-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/10-1200x675.jpg); }
}

.bwp-11
{
background-image: url(../img/tvstripes.png), url(../img/wp/11-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/11-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/11-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/11-1200x675.jpg); }
}

.bwp-12
{
background-image: url(../img/tvstripes.png), url(../img/wp/12-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/12-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/12-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/12-1200x675.jpg); }
}

.bwp-13
{
background-image: url(../img/tvstripes.png), url(../img/wp/13-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/13-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/13-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/13-1200x675.jpg); }
}

.bwp-14
{
background-image: url(../img/tvstripes.png), url(../img/wp/14-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/14-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/14-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/14-1200x675.jpg); }
}

.bwp-15
{
background-image: url(../img/tvstripes.png), url(../img/wp/15-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/15-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/15-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/15-1200x675.jpg); }
}

.bwp-16
{
background-image: url(../img/tvstripes.png), url(../img/wp/16-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/16-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/16-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/16-1200x675.jpg); }
}

.bwp-17
{
background-image: url(../img/tvstripes.png), url(../img/wp/17-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/17-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/17-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/17-1200x675.jpg); }
}

.bwp-18
{
background-image: url(../img/tvstripes.png), url(../img/wp/18-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/18-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/18-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/18-1200x675.jpg); }
}

.bwp-19
{
background-image: url(../img/tvstripes.png), url(../img/wp/19-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/19-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/19-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/19-1200x675.jpg); }
}

.bwp-20
{
background-image: url(../img/tvstripes.png), url(../img/wp/20-1920x1080.jpg);
@media @desktop { background-image: url(../img/tvstripes.png), url(../img/wp/20-1600x900.jpg); }
@media @tablet { background-image: url(../img/tvstripes.png), url(../img/wp/20-1200x675.jpg); }
@media @mobile { background-image: url(../img/tvstripes.png), url(../img/wp/20-1200x675.jpg); }
}



#home:not(:has(#chromePopup))
{
	padding-top: 50px;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
}

#boards {
	border: 4px solid #333;
	border-left: none;
	border-radius: 0 15px 15px 0;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	position: absolute;
	left: -86px;
	width: 96px;
	height: 570px;
	transition: left 0.3s ease-in-out;
	margin-top: 2em;

	&:hover{
		left: 0;
	}

	.board-list {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			height: 76px;
			cursor: pointer;
			opacity: 0.3;
			transition: opacity 0.3s ease;
			margin: 2em 0;
			padding: 0;

			&.highlighted {
				opacity: 1;
			}

			.board {
				width: 48px;
				height: 48px;
				border-radius: 2px;
				background-color: grey;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25px;
				color: white;

				&.new {
					border: 1px dashed white;
					background-color: transparent;
				}
				&.fa-trash::before {
					content: "\f1f8";
				}
			} 

			p {
				margin: 10% 0 0;
				font-size: 11px;
				max-width: 48px;
				text-align: center;
				color: white;
				overflow: auto;
    			text-overflow: ellipsis;
			}
			&:hover {
				opacity: 0.8; 
			}
		}
	}
}

/* Botón para activar los boards. Solo se ve en mobile */
.mobile-show-boards {
	display: none;
}

@media @mobile {
	#boards {
		left: 0.6em;
		top: auto;
		height: fit-content;
		width: 3.5em;
		padding: .4rem 0 .1rem;
		border: 2px solid #555;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		position: fixed;
		bottom: 4em;
		transform-origin: 0 100%;
		transition: transform 0s, opacity 0.2s ease-in-out;
		transform: scaleY(0);
		opacity: 0;

		&:hover{
			left: 0.6em;
		}

		&.stay-visible {
			transform: scaleY(1);
			opacity: 1;
		}

		.board-list {
			li {
				height: auto; 
				margin: .8em 0;
				.board {
					width: 2rem;
					height: 2rem;    
					font-size: 1.2rem;
				}
				p {
					font-size: .6rem;
				}
			}					
		}
	}	

	.mobile-show-boards {
		position: fixed;
		bottom: 1em;
		background-color: #666;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		left: 1em;
		padding: 0.8em;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.5;

		button.floating-button {
			border: none;
			padding: 0;
			font-size: medium;	
			background: inherit;
			i{
				margin: 0;
			}
		}
	}
}

#icons
{
    text-align: center;
	padding: 0 12% 50px;

	@media @desktop 
	{
		padding: 0 12% 100px;
	}

	@media @tablet 
	{
		padding: 0 7% 50px;
	}

	@media @mobile 
	{
		padding: 0 2% 50px 8%;
	}

	&.modeEdit
	{
		padding: 0 12% 200px;
		.shortcut:hover
		{
			cursor: move;

		    -webkit-animation-duration: 0.2s;
		    -moz-animation-duration: 0.2s;
		    -webkit-transform: rotate(-1deg);
		    -moz-transform: rotate(-1deg);			
		}

		.iconPlaceholder
		{
			background-color: rgba(0,0,0,0.05);
		}
	}
}

.shortcut
{
	width: 96px;
	height: 96px;
	background-size: 96px 96px;
	margin: 40px 50px;

	@media @desktop 
	{
		width: 82px;
		height: 82px;
		background-size: 82px 82px;
		margin: 30px 40px;
		font-size: 0.85em;
	}

	@media @tablet 
	{
		width: 64px;
		height: 64px;
		background-size: 64px 64px;
		margin: 20px 30px;
		font-size: 0.8em;
	}

	@media @mobile 
	{
		width: 48px;
		height: 48px;
		background-size: 48px 48px;
		margin: 20px 20px;
		font-size: 0.75em;
	}	

	display: inline-block;
	background-color: rgba(0,0,0,0.1);
	position: relative;
	.drop-shadow( 0, 3px, 7px, 0.25 );
	.rounded-corners(5px);
	-webkit-transition-property: opacity, box-shadow;
	-webkit-transition-duration: 0.35s; 
	-webkit-transition-timing-function: ease;
	opacity: 0.9;

	background-position: center center;
	background-repeat: no-repeat;

	span {
		display: block;
		position: absolute;
		top: 116%;
		width: 120%;
		text-align: center;
		left: -20%;
		color: #f0f0f0;
		font-size: 0.8em;
		text-shadow: 0 0 5px rgba(0,0,0,0.75);
		background-color: rgba(0,0,0,0.35);
		.rounded-corners(10px);
		padding: 4px 10%;
		line-height: 1.1em;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 400;
	}

	&.addShortcut
	{
		background: url(../img/add.png) no-repeat;
		background-size: contain;	
		opacity: 0.5;	
	}

	.actionIcons
	{
		display: none;

		i
		{
			position: absolute;
			color: #eee;
			text-shadow: 0 1px 2px rgba(0,0,0,0.75);
			font-size: 1.1em;
			cursor: pointer;

			background: rgba(0, 0, 0, 0.25);
			padding: 7px 9px;
			border-radius: 0 50px 50px 0;

			&.remove
			{
				top: 6px;
				right: -39px;

				@media @desktop { right: -37px; }
				@media @tablet  { right: -36px; }
				@media @mobile  { right: -36px; }	
			}
		}		
	}

	&:hover
	{
		opacity: 1;
		.drop-shadow( 0, 7px, 15px, 0.35 );
		-webkit-transition-property: opacity, box-shadow;
		-webkit-transition-duration: 0.35s;
		-webkit-transition-timing-function: ease;
		cursor: pointer;
	}

	.addedTick
	{
		display: none;
		padding: 0 !important;

		position: absolute;
		top: 0;
		left: 0;
		width: 96px;
		height: 96px;

		@media @desktop 
		{
			width: 82px;
			height: 82px;			
		}

		@media @tablet 
		{
			width: 64px;
			height: 64px;			
		}

		@media @mobile 
		{
			width: 48px;
			height: 48px;	

			i
			{
				font-size: 2.5em !important;
			}		
		}


		background: rgba(0,0,0,0.5);
		text-align: center;
		.rounded-corners;

		i
		{
			font-size: 4em;
			color: #fff;
			position: relative;
			top: 14px;
			left: 3px;
			text-shadow: 0 5px 15px rgba(0,0,0,0.5);
		}
	}

	&.added .addedTick
	{
		display: block;
	}

	&:focus
	{
		outline: 0;
	}	

	&::before{
		position: absolute;
		font-size: 3em;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;

		@media @mobile  { font-size: 2rem; }	
	}
}

#boardFooter
{
	position: fixed;
	bottom: 0;
	left: 0;

	#settings
	{
		@media @tablet  { display: none; }
		@media @mobile  { display: none; }	

		padding: 10px;
		background: rgba(0, 0, 0, 0.8);
		margin: 0 10px;

		#editButton
		{
			font-size: 1.5em;

			i
			{
				margin: 0 !important;
			}		
		}

		#editButtons
		{
			padding: 0 10px;

			button, a
			{
				margin: 0 10px;
			}
		}

		a
		{
			color: rgba(255, 255, 255, 0.75);

			&:hover
			{
				color: #fff;
			}
		}
	}

	&.modeEdit
	{
		width: 100%;
		text-align: center;
	}

	#backgrounds
	{
		margin: 0 0 30px;
	}
}

section.homeFooter
{
	text-align: center;
    font-weight: @lightFontWeight;
    margin: 10px 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75em;
    position: absolute;
    bottom: 0px;
    width: 300px;
    left: 50%;
    margin-left: -150px;

	a
	{
		margin: 0 10px;
		color: rgba(255, 255, 255, 0.45);
	}
}

/*************************** CARROUSEL ****************************/

ul.carrousel
{
	list-style: none;
	padding: 0 0 0 50%;
	white-space: nowrap;
	text-align: left;

	-webkit-mask: -webkit-gradient(linear, left top, right top, 
		from(rgba(0, 0, 0, 0)), 
		color-stop(0.05, rgba(0, 0, 0, 1)), 
		color-stop(0.95, rgba(0, 0, 0, 1)), 
		to(rgba(0, 0, 0, 0)));	

	li 
	{
		display: inline-block;
		margin: 0 10px;
		border: solid 5px rgba(255, 255, 255, 0.1);
		cursor: pointer;

		&:hover
		{
			border-color: rgba(255, 255, 255, 0.3);
		}

		&.selected 
		{
			border-color: #fff;
		}
	}
}


/*************************** MODALS: LOGIN, ADD BOARD PART, ADD GENERIC ICON ***************************/

#overlayForm
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 1000;
}

#loginBox, .modalFormContainer
{
	width: 480px;
	background: #323232;
	box-shadow: 0 5px 30px #000;
	margin: 100px auto;
	text-align: center;
	color: white;
	padding: 40px 0;
	position: relative;
	@media @mobile { width: 100%; height: 100%; margin: auto; }

	&>div>span
	{
		margin: 6px 0;
		display: block;
		font-weight: @lightFontWeight;
		color: #888;
	}

	h1
	{
		margin: 0 0 20px;
  		font-weight: @lightFontWeight;
	}

	button, input[type="submit"]
	{
		width: 330px;
	}

	input[type="text"], input[type="password"]
	{
		display: inline-block;
		width: 330px;
		padding: 10px 0 8px;
		background: rgb(69, 69, 69);
		margin: 2px 0;
		text-align: center;
		color: #fff;
		border: 0 none;
		font-family: @fontFamily;
		font-weight: @lightFontWeight;
	}

	form a
	{
		display: block;
		font-size: 0.75em;
		color: #aaa;
	}

	.closePanel
	{
		position: absolute;
		top: 5px;
		right: 5px;
		color: #888;
		width: fit-content;
		border: none;
		padding: initial;
		margin: auto;
		font-size: 1em;

		&:hover
		{
			color: #ddd;
			background: none;
		}
	}

	.selectPanel, .closePanel
	{
		&:focus
		{
			outline: 0;
		}
	}

	.selectPanel
	{		
		display: block;
		float: left;
		width: 240px;
		padding: 30px 0;
		background: #252525;
		margin: 30px 0 0;
		color: #fff;

		small
		{
			display: block;
			font-weight: @lightFontWeight;
		}

		&.selected
		{
			background: #323232;
			color: #6C6C6C;
			cursor: default;			
		}
	}

	.fb-login, .google-login, #createAccount, input[type="submit"]
	{
		border: 0 none;
		padding: 12px 0;
		margin: 5px 0; 
	}

	.fb-login
	{
		background-color: #3b5998;
	}
	
	.google-login{
		background-color: #1b73e8;
	}

	.abcRioButtonContents {
        margin-right: 40px !important;
    }
	#createAccount, input[type="submit"]
	{
		background-color: @homeColor;
	}

	#createAccount
	{
		margin-bottom: 20px;
	}

	.errorMessage
	{
		position: absolute;
		
		width: 330px;
		text-align: left;

		i
		{
			color: #A67D22;
		}

		span
		{
			display: inline-block;
			padding: 5px 10px;
			background-color: #A67D22;
			color: #fff;
			position: relative;
  			left: -4px;
		}

		&#wrongFirstname
		{
			top: 188px;
			right: -255px;
		}

		&#wrongLastname
		{
			top: 230px;
			right: -255px;
		}

		&#wrongEmail
		{
			top: 274px;
			right: -255px;
		}
		
		&#wrongPass
		{
			top: 314px;
			right: -255px;
		}
	}
}

.modalFormContainer {
	display: flex;
    flex-direction: column;
    align-items: center;

	.modalForm {
		display: flex;
		flex-direction: column;
		width: 330px;

		.form-group {
			display: flex;
			flex-direction: column;
			margin: 0 0 1.5em;

			label {
				text-align: left; 
				padding: 5px 0;
				color: #999;
			}		
		
			input {
				width: 100%;
			}
			
			&:has(label[for="color"] + input#color) {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			label[for=color] {
				margin-right: 20%;
			}

			input#color {
				width: 15%;
			}

			.extension-button {
				display: none;
			}

			.icon-container {
				max-height: 180px;
				overflow: auto;
				color: #999;
				background: rgb(69, 69, 69);
				scrollbar-width: thin;
				scrollbar-color: #5b5b5b #474747;

				&::-webkit-scrollbar {
					width: 6px;
				}				  
				&::-webkit-scrollbar-thumb {
					background-color: #5b5b5b;
				}				  
				&::-webkit-scrollbar-track {
					background-color: #474747;
				}
		
				.icon-selector {
					width: 320px;
					display: grid;
					grid-template-columns: repeat(9, minmax(0, 1fr));
				}
				.icon-option {
					margin: 5px;
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;
					border: 2px solid transparent;
					transition: border-color 0.3s;
					padding: 5px 15px 0;
					
					&.selected {
					  border-color: @homeColor;
					  color: @homeColor;
					}
					i {
					   margin-bottom: 5px;
					   font-size: 24px;
				   }
				}
			}
		}
		@media @mobile { 
			.icon-selector {
				grid-template-columns: repeat(7, minmax(0, 1fr));
			} 
		}
	}
}

#addGenericIcon {
	input[type="button"]
	{
		border: 0 none;
		padding: 12px 0;
		margin: 5px 0; 
		background-color: @homeColor;
	}
}

#chromePopup #overlayForm {
    padding: 0 0 100px;
	width: 800px;
    height: 400px;
}

#chromePopup .modalFormContainer { 

	width: 800px;
	height: auto;
	margin: 0;
    padding: 0;

	button.closePanel {
		display: none;
	}
	.modalForm {
		display: grid; 
		grid-auto-columns: 1fr; 
		grid-auto-rows: 1fr; 
		grid-template-columns: 1fr 1fr 1fr; 
		grid-template-rows: 0.5fr 0.5fr; 
		gap: 0px 0px; 
		grid-template-areas: 
		  "form-group1 form-group1 form-group1"
		  "form-group2 form-group2 form-group3"; 
		width: auto;
		margin: 0;
		align-content: space-evenly;

		.form-group {
			display: flex;
			align-items: center;
			flex-direction: row;
			margin: 0px;
			justify-content: space-between;

			.icon-container {
				height: 100px;
				width: 500px;
				overflow-x: auto;
				overflow-y: hidden;
				padding: 5px 10px 0;

				.icon-selector {
					width: auto;
					display: grid;
					grid-template-columns: repeat(auto-fill, 30px); 
					gap: 5px; 
					grid-template-rows: 1fr 1fr;
					grid-auto-flow: column;

					.icon-option {
						width: 30px; 
  						height: 30px; 
						margin: auto;
						padding: 5px 0px 0px;

						i {
							font-size: 20px;
						}
					}
				}
			}	
			
			label {
				width: 110px;
			}

			.extension-button {
				display: block;
				
				i{
					display: inline;
					padding: 5px;
					cursor: pointer;
					border: 1px solid #888;
					color: #888;

					&.closePanel {
						position: initial;
					}
				}
			}
			input[type="button"][value="Done"] {
				display: none;
			}
		}

		.form-group:has(label[for="color"] + input#color){
			margin: 0px;
			display: flex;
			justify-content: flex-start;
			flex-direction: row;

			label {
				margin-right: 0px;
			}
		}

		.form-group:nth-child(1) { 
			grid-area: form-group1; 
		}
		.form-group:nth-child(2) { grid-area: form-group2; }
		.form-group:nth-child(3) { 
			grid-area: form-group3; 
			justify-content: flex-end;
		}
	}
}



/*************************** ERROR PAGE ***************************/

#errorPage
{
	margin: 200px auto;
	min-width: 600px;
	width: 70%;

	h1, h2
	{
		margin: 0;
		text-transform: uppercase;
		color: #fff;
	}

	h1
	{
		font-size: 8em;
	}

	
	h2
	{
		font-size: 3em;
	}

	
	a
	{
		display: block;
		margin-top: 100px;
		font-weight: bold;
		font-size: 1.5em;
		color: @linkColor;
	}


}


/*** *****************************************/




/*** Store **************************************************************/

#connections
{
	padding-bottom: 30px;
	position: relative;
}

.titleRow {
	
	.title {
		margin-left: 30px; 
		margin-top: 20px; 
		font-size: 1.2em;
    	color: #fff;
	}
}

@media @mobile {
	
	.titleRow {
		justify-content: center;
		margin: 10px;
		
		.title { 
			margin-left: 10px; 
		}
	}
}
#discovery {
	display: grid;
    grid-template-columns: 15% 1fr;
    gap: 10px 0;
    padding: 10px;
	margin: 0 20px;
	
	.box-1 {
		color: #fff;
		
		.formContainer {
			width: 95%;
			position: relative;

			&::after {
				content: ""; 
				position: absolute;
				top: 50%;
				right: 10px; 
				transform: translateY(-50%) rotate(-45deg) translateX(2px);
				pointer-events: none;
				width: 5px; 
				height: 5px; 
				border-left: 1px solid darken(@contentBackground, 5%); 
				border-bottom: 1px solid darken(@contentBackground, 5%); 
			}

			select {
				border: solid 1px #666;
				width: 100%;
				text-align: left;
				color: darken(@contentBackground, 5%);
				background-color: #111;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				margin: 0; 
			}
		}
	}
	.box-2 {
		color: #fff;
		display: grid;
		grid-template-columns: 70% 30%;
		justify-content: space-between;

		#searchSection {
			color: #fff;		

			@media @mobile {
				padding: 0;
			}

			input[type="text"] {
				border: solid 1px darken(@contentBackground, 5%);
				font-weight: 500;
				width: 70%;

				&::placeholder {
					color: darken(@contentBackground, 30%);
				}
				@media @mobile {
					margin: 0;
					width: 60%;
				}
			}
			
			input.suggest{
				color: #bbb;
			}	
		
			#searchSites, {
				padding: 6px 5px 5px 10px;
				font-size: 1em;
				height: 37px;
				width: 37px;
			}
			
			.searchContainer {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
		.newCustomSite{
			opacity: 0.4;
			display: flex;
			justify-content: flex-end;

			&:hover{
				opacity: 1;
			}
			#newCustomSite {
				padding: 7px 30px;
				margin: 0;
			}
			i {
				display: none;
			}
		}
	}
	.box-3 {
		position: relative;
		overflow: hidden;
		min-height: 600px;

		.categoriesListWrapper	{	
			a, li{
				display: block;
				padding: 5px 20px;
				font-size: 0.8em;
				color: #fff;
				text-align: left;
				cursor: pointer;
			}
			
			a:hover, li:hover, li.sub-active
			{
				background-color: lighten(@homeColor, 7%);
				color: @homeForeColor;
			}

			a.active, li.active {
				background-color: lighten(@homeColor, 10%);
				color: @homeForeColor;	
				outline: 0;		
				font-size: 1em;
			}

			hr {
				border: 0 none;
				margin: 5px 0;
			}

			.hmenu {
				position: absolute;
				will-change: transform;
				visibility: hidden;
				overflow: scroll;
				background-color: rgba(255,255,255,0.2);
				padding: 10px 0;
				border-radius: 5px 0 0 5px;
				min-inline-size: min-content;
				min-inline-size: -webkit-fill-available;
				min-width: 100%;

			}
			
			.hmenu-visible {
				visibility: visible;
				overflow: hidden;
			}
			
			.hmenu-translateX-left.hmenu-transition,
			.hmenu-translateX-right.hmenu-transition,
			.hmenu-translateX.hmenu-transition{
				-webkit-transition:transform 250ms ease-in-out;
				-moz-transition:transform 250ms ease-in-out;
				-ms-transition:transform 250ms ease-in-out;
				-o-transition:transform 250ms ease-in-out;
				transition:transform 250ms ease-in-out
			}
			
			.hmenu-translateX{
				-webkit-transform:translateX(0);
				-moz-transform:translateX(0);
				-ms-transform:translateX(0);
				-o-transform:translateX(0);
				transform:translateX(0)
			}
			
			.hmenu-translateX-left{
				-webkit-transform:translateX(-100%);
				-moz-transform:translateX(-100%);
				-ms-transform:translateX(-100%);
				-o-transform:translateX(-100%);
				transform:translateX(-100%)
			}
			
			.hmenu-translateX-right{
				-webkit-transform:translateX(100%);
				-moz-transform:translateX(100%);
				-ms-transform:translateX(100%);
				-o-transform:translateX(100%);
				transform:translateX(100%)
			}

			nav {
				.categoriesList{
					padding-left: 0px;
					
					.main-category {
						position: relative;
						padding-right: 20px; 

						&::before {
							content: "";
							position: absolute;
							top: 50%;
							right: 10px;
							transform: translateY(-50%) rotate(-135deg) translateX(0px);
							pointer-events: none;
							width: 4px;
							height: 4px;
							border-left: 2px solid #fff;
							border-bottom: 2px solid #fff;
						}
					}
					
				}
			}
		}

		.subCategoriesList {
			.category-name {
				&::before {
					content: "";
					position: relative;
					display: inline-block;
    				left: -10px;
					transform: rotate(45deg) translate(-3px, 0px);
					pointer-events: none;
					width: 4px;
					height: 4px;
					border-left: 2px solid #fff;
					border-bottom: 2px solid #fff;
				}
			}
		}
		.nested-category {
			visibility: hidden;
			margin: 0px;
		}
	}
	.box-4 {
		#sitesBox {
			#results {
				#items {
					position: relative;
				}
				
				.genericIcon {
					justify-self: center;
				}

				background-color: rgba(255,255,255,0.9);
				border-radius: 0 5px 5px 5px;
				padding-bottom: 50px;				
				text-align: left;
			}

			#categories {
				display: none;
			}	
		}
	}

	input[type="text"], select {
		font-family: 'Source Sans 3';
		font-size: 1.1em;
		font-weight: 300;
		padding: 5px;
		outline:none;
	}

	@media @tablet {
		.box-4 {
			#sitesBox {
				#results {
					.container-item {
						grid-template-columns: 110px auto auto;
						.summary {
							flex-wrap: wrap;
						}
						.description {
							margin-right: 0;
						}
						.pinButtons {
							padding-top: 0px;
						}
					}
				}
			}	
		}	
	}
	
	@media @mobile {
		display: grid;
		grid-template-columns: 1fr;
		padding: 0px;

		.box-1 {
			font-size: 1.35em;
			padding: 0%;
			grid-template-rows: auto;
	
			.formContainer {
				width: 100%;
				select {
					font-size: 0.8em;
				}
			}
		}
		.box-2 {
			display: flex;    
			justify-content: space-between;
			align-items: stretch;
			padding: 0%;

			#searchSection {
				padding: 0;
				width: 100%;
				.searchContainer {
					width: inherit;
					input[type="text"]{
						margin: 0;
						width: inherit;
					}
				}
			}
			.newCustomSite {
				span {
					display: none;
				}
				i {
					display: block;
				}
				#newCustomSite {
					padding: 9px 5px 7px 12px;
					margin: 0;
				}
			}
		}
		.box-3 {
			min-height: auto;
			.categoriesListWrapper	{
				display: none;
			}
		}
		.box-4 {
			#sitesBox {
				#results {
					margin-left: 0px;
					border-radius: 0 0 5px 5px;

					#items {
						.container-item {
							display: grid; 
							grid-template-columns: 20% 1fr 85px; 
							grid-template-rows: 25px auto 1fr; 
							gap: 0px 0px; 
							padding: 15px 15px 15px 0;
							grid-template-areas: 
								"item site-name pinButtons"
								"item summary pinButtons"
								"description description description"; 
							
							.item { 
								grid-area: item; 
								width: 40px;
								height: 40px;
								background-size: 40px 40px;
							}
							.site-name { 
								grid-area: site-name; 
								justify-self: left;
								align-self: end;
								margin-bottom: 2px;
							}
							.description { 
								grid-area: description; 
								justify-self: left;
								padding: 0 0 0 5%;
								margin-right: 0px;
								min-width: auto;
							}
							.summary { 
								grid-area: summary; 						
								display: block;
								overflow: hidden;
								justify-self: left;
								span:not(.site-count) {
									display: none;
								}
								a, i, span {
									margin-right: 2%;
								}
								i {
									margin-left: 2%;
								}
								div {
									display: block;
								}
							}
							
							.pinButtons { 
								grid-area: pinButtons; 
								padding-top: 0px;
								button {
									margin: 0px;
									i {
										margin: 0px;
									}
								}
							} 
	
							.container-description {
								display: contents;
							}	
							.genericIcon {
								width: 40px;
								height: 40px;
								font-size: x-large;
							}
						}
					}					
				}
				#categories {
					display: block;
					background-color: transparent;
					border-radius: none;
					margin-left: 0px;
					padding-bottom: 0px;
					text-align: center;
				}
			}
		}
	}
}



.box-4 .container-item, 
#chromePopup .container-item {
	display: grid;
	grid-template-columns: 110px 1fr 150px;
	justify-items: center;
	padding: 10px 25px 10px 0;

	.item {
		background-repeat: no-repeat;
		width: 64px;
		height: 64px;
		border-radius: 5px;
		background-size: 64px 64px;

		img {
			width: 64px;
			border-radius: 5px;
		}
	}

	h3 {
		font-size: 1.15em;
		margin: 0;
	}

	.description {
		font-size: 0.8em;
		line-height: 1.25em;
		margin-right: 50px;
	}

	.summary{
		font-size: 0.7em;
		color: #999;
		margin-bottom: 5px;
		display: flex;
		div {
			display: contents;
		}
		a, i, span {
			margin-right: 5px;
		}
		i {
			margin-left: 5px;
			line-height: normal;
		}
	}
	.container-description {
		justify-self: start;
	}	

	.pinButtons{
		padding-top: 10px;
		justify-self: right;
		.siteMultiButton {
			display: inline-block;
			width: 80px;

			@media @tablet {
				margin-top: 7px !important;
			}
		}
	}
	.selectIcon {
		cursor: pointer;
		text-align: center;
		
		p {
			font-size: .8em;
			margin-top: auto;
		}
	}
	.dataCustomSite {
		justify-self: left;
	}
}

.box-4 .container-item:hover{
	background: rgba(255,255,255,0.5);
}

#chromePopup .container-item .genericIcon {
	margin-top: 23%;
}
#chromePopup .container-item .selectIcon .genericIcon, 
#chromePopup .container-item .logoSite {
	margin-top: 40%;
}
#chromePopup #board_select_extension {
	position: fixed;
    top: 10px;
    left: 42px;
    width: 64px;
    z-index: 1000;
    border: solid 1px #ccc;
    color: #999;
    font-family: 'Source Sans 3';
    font-weight: 300;
    text-align: left;
    font-size: 0.8em;
	border-style: none;
}

#chromePopup .container-item .genericIcon, 
.box-4 #results .genericIcon { 
	width: 64px;
	height: 64px;
	.rounded-corners(5px);
	background-color: @homeColor;
	color: #fff;    
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: xx-large;
}

#friendsBox
{
	margin: 20px;
	

	nav
	{
		float: left;
		width: @storeCategoriesWidth;
		background-color: rgba(255,255,255,0.2);
		padding: 10px 0;
		
		position: relative;
		z-index: 190;		

		border-radius: 5px 0 0 5px;

		@media @mobile {
			display: none;
		}
		
		a
		{
			display: block;
			padding: 5px 20px;
			font-size: 0.8em;
			margin: -1px 0;
			color: #fff;
			text-align: left;
		}
		
		a:hover
		{
			background-color: lighten(@homeColor, 7%);
			color: @homeForeColor;
		}
		
		a.active
		{
			font-size: 1em;
			background-color: lighten(@homeColor, 10%);
			color: @homeForeColor;	
			outline: 0;		
		}

		hr
		{
			border: 0 none;
			margin: 5px 0;
		}
	}
	
	> div
	{
		background-color: rgba(255,255,255,0.9);
		border-radius: 0 5px 5px 5px;

		margin-left: @storeCategoriesWidth;
		padding-bottom: 50px;
		
		text-align: left;
	}

	#results {
		@media @mobile { 
			background-color: rgba(255,255,255,0.9);
			border-radius: 0 5px 5px 5px;

			margin-left: 0px;
			/*padding: 15px; */
			
			text-align: left;
		}
	}

	#categories {
		display: none;

		@media @mobile { 
			display: block;

			background-color: transparent;
			border-radius: none;

			margin-left: 0px;
			padding-bottom: 0px;
			
			text-align: center;
		}
	}	
}

#chromePopup
{
	padding: 0 20px 100px;
	background: #f0f0f0;
	color: #999;
	text-align: left;
	box-shadow: inset 0 -5px 100px rgba(0, 0, 0, 0.05);
	max-height: 400px;
    width: 800px;

	input[type="text"]
	{
		padding: 5px 9px;
		border-radius: 0;
		border: 0 none;
		background-color: rgba(255, 255, 255, 0.5);
		color: #999;
		font-family: @fontFamily;
	}

	&.extended
	{
		padding: 10px 20px 100px;
	}

	#customSite
	{
		border: 0 none;
		background: transparent;
	}

	#popupBottom
	{
		text-align: center;
		font-size: 0.8em;
		background: rgba(0, 0, 0, 0.05);
		padding: 5px 5px 50px;
		color: #777;
		position: fixed;
		top: 132px;
		left: 0;
		width: 800px;		
	}

	h3, h4
	{
		font-weight: @lightFontWeight;
		margin: 0;
	}	

	h3
	{
		margin-top: 1em;
		font-size: 2em;
	}


}
input[type="color"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: none;
	width: 28px;
	height: 28px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}




#showMore
{
	text-align: center !important;
	background-color: transparent !important;
	padding: 20px 0 50px 0;

	button
	{
		padding: 10px 30px;	
	}
}

#results .noResults
{
	text-align: center;
	font-size: 2em;
	font-weight: @lightFontWeight;
	color: #aaa;
	padding: 50px 0;
	margin: 0 20px 10px;
	border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

#results .account
{
	padding: 15px 2%;
	width: 40%;
	margin: 10px 2%;
	border-bottom: solid 1px #ddd;
	position: relative;	
	display: inline-block;
	line-height: 1em;

	overflow: hidden;
	white-space: nowrap;

	img
	{
		float: left;
		width: 42px;
		height: 42px;
		.rounded-corners;
		margin-right: 16px;
	}

	.followMultiButton
	{
		z-index: 1;
		position: absolute;
		right: 10px;
		height: 300px;
		padding-left: 20px;
	}


	& > a
	{
		font-size: 1.1em;
		color: @contentForeground;
		line-height: 1em;
	}


	span, a
	{
		position: relative;
		overflow: hidden;
	}

	span
	{
		font-size: 0.75em;
		color: #888;
		white-space: nowrap;
		top: -1px;
		line-height: 0.6em;

		&.country
		{
			font-size: 0.65em;
			text-transform: uppercase;
			top: -5px;
			color: #999;
		}
	}

	a
	{
		top: -2px;
	}
}

#resultsLoader
{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	background-color: fade( @contentBackground, 50% );
	text-align: center;

	img
	{
		background-color: @contentBackground;
		padding: 20px;
		margin-top: 200px;
		.rounded-corners(100%);
	}
}
#results:has(#customSite)  {
	padding-top: 5px;
}
#customSite
{
	position: relative;

	table th
	{
		padding: 5px 20px 5px 0;
		font-weight: normal;
	}

	input[type="text"]
	{
		padding: 2px 7px;
		width: 250px;
		@media @mobile 
		{
			width: 170px !important;
		}
	}

	input[type="checkbox"]
	{
		margin-right: 6px;
		position: relative;
		top: 2px;
	}
}



/**** PROFILE ********************************************/

#profile
{
	.head
	{
		text-align: center;
		padding-top: 100px;
		position: relative;
		z-index: 10;

		.avatar
		{
			width: 256px;
			height: 256px;
			background-size: 256px;
			border-radius: 128px;
			display: inline-block;

			a
			{
				background-color: rgba(0, 0, 0, 0.82);
				border-radius: 100%;
				display: block;
				height: 55%;
				padding-top: 45%;

				span
				{
					font-size: 0.85em;
					font-weight: @lightFontWeight;
					color: #fff;
					border: solid 1px #fff;
					padding: 2px 10px;
					display: inline-block;
				}

				&:hover span
				{
					border: solid 1px @homeColor;
					background: @homeColor;
				}			
			}
		}

		.followMultiButton
		{
			width: 120px;
			display: inline-block;
		}

		h1, h2
		{
			color: #fff;
			font-weight: @lightFontWeight;
			margin: 0;
		}

		h1
		{
			font-size: 3em;
		}

		h2
		{
			font-size: 1em;
			text-transform: uppercase;
		}

		button
		{
			margin: 20px 0;
		}
	}
	

	.body
	{
		position: relative;
		height: 441px;
		margin-top: -200px;
		padding-top: 200px;
		background: rgba(0,0,0,0.35);

		text-align: center;
		@media @tablet 
			{
				
				height: 551px;
			}
			@media @mobile 
			{
				
				height: 320px;
			}

		.profileIcons .shortcut
		{
			width: 128px;
			height: 128px;
			background-size: 128px 128px;
			margin: 40px;

			@media @desktop 
			{
				width: 96px;
				height: 96px;
				background-size: 96px 96px;
				margin: 30px;
			}

			@media @tablet 
			{
				width: 84px;
				height: 84px;
				background-size: 84px 84px;
				margin: 20px;
			}

			@media @mobile 
			{
				width: 64px;
				height: 64px;
				background-size: 64px 64px;
				margin: 20px;
			}
		}

		.boardIcons
		{
			margin-top: 30px;

			padding: 1px 140px 100px;
			@media @desktop { padding: 1px 100px 100px; }
			@media @tablet 	{ padding: 1px 50px 50px; }
			@media @mobile 	{ padding: 1px 20px 40px; }

			/*background: rgba(0,0,0,0.25); */

			h2
			{
				color: #fff;
				font-weight: @lightFontWeight;
			}	
		}

		.profileSite 
		{
			width: 500px;
			text-align: left;
			display: inline-block;
			margin: 10px 100px;
			background: #fff;
			color: #666;
			border-radius: 3px;
			height: 32px;
			overflow: hidden;
			white-space: nowrap;

			img 
			{
				margin-right: 15px;
				border-radius: 3px 0 0 3px;
			}

			input 
			{
				border: 0 none;
				padding: 6px 10px 8px;
				width: 150px;
				font-weight: bold;
				color: #444;

				&:focus
				{
					outline: 0;
					border-bottom: solid 3px @linkColor;
					padding-bottom: 5px;
				}
			}
		}
	}

}



/*** Wizard *******************************/


.wiz-progress
{
	font-size: 0.9em;
	padding: 50px 0 30px 0;
	background: rgba(0,0,0,0.2);
	border-bottom: 3px solid rgba(0,0,0,0.25);	

	table
	{
		margin: 0 auto;
	}

	thead tr hr
	{
		position: relative;
	}

	thead tr.pback hr
	{
		border-bottom: solid 4px #555;
		border-top: 0 none;
		z-index: -2;
		top: 78px;
	}

	thead tr.pfore hr
	{
		border-bottom: solid 4px #fff; 
		border-top: 0 none;
		z-index: -1;
		top: 42px;
	}	

	td
	{
		text-align: center;
	}

	.titles
	{
		font-weight: @lightFontWeight;
		color: rgba(255,255,255,0.5);
	}

	.titles .active
	{
		font-size: 1.5em;
		position: relative;
		top: -3px;
		color: #fff;
	}
	
	.numbers td
	{
		padding: 10px 70px;
		@media @mobile 	{ padding: 10px 30px; }

		b
		{
			.rounded-corners(100%);
			background: #555;
			color: #383838;
			padding: 6px 14px;
			font-size: 1.5em;
		}
	}

	.numbers .active b
	{
		background: #fff;
		color: #222;
	}

	.numbers .done b
	{
		background: #fff;
	}	

}

.wiz-steps, #account
{
	padding: 40px 0;
	background: rgba(0,0,0,0.65);

	h1
	{
		font-weight: @lightFontWeight;
	}

	p
	{
		margin: 0 auto 30px;
		width: 60%;
		color: #999;
		@media @mobile { width: 75%; }	
	}

	h2
	{
		margin: 0;
		font-weight: @lightFontWeight;
		color: #eee;
	}


	.profileInput
	{
		margin: 70px 0;
	}

	#shortname
	{
		font-size: 2em;
		margin: 0 5px;
		padding: 2px 5px;
	}

	.shortcut span
	{
		font-size: 0.9em; 
	}

	#icons
	{
		padding: 0 12% 0;

		@media @desktop 
		{
			padding: 0 12% 0;
		}

		@media @tablet 
		{
			padding: 0 7% 0;
		}

		@media @mobile 
		{
			padding: 0 2% 0;
		}
	}
}

.wiz-finish
{
	font-size: 1.1em;
	padding: 12px 35px;
}

#account
{
	padding-top: 35px; 
	position: relative;

	background: none;

	.accountSection
	{
		background: @staticBackground;
		color: @staticForeground;		
		text-align: justify;
		box-shadow: 0 5px 25px rgba(0,0,0,0.75);
		min-width: 600px;
		width: 70%;
		padding: 20px 20px 40px;
		margin: 50px auto 0;
	}

	*
	{
		text-align: left;
	}

	h1
	{
		margin: 30px 20px 5px;
		color: #fff;
	}

	table, p
	{
		margin: 5px 40px 0;
	}

	input + i
	{
		color: #c00;
	}

	#shortname
	{
		font-size: 1.5em !important;
	}

	#profileName span
	{
		font-size: 1.5em !important;
		margin-left: 40px;
		color: #fafafa;
	}

	#profileName p
	{
		margin-bottom: 20px;
	}

	#buttons
	{
		text-align: center;
		padding: 50px !important;
		border-bottom: 0 none !important;

		i
		{
			color: #c00;
		}

		small
		{
			display: block;
			text-align: center;
			margin-top: 30px;
			color: #777;
		}

		.error
		{
			text-align: center;
			width: 100%;
			margin: 30px 0;			
		}
	}	
}

.wiz-steps
{
	>div
	{
		text-align: center;
	}
}

.wiz-buttons
{
	text-align: center;
	padding: 30px 0;
	padding-bottom: 60px;
	border-top: solid 3px rgba(0,0,0,0.25);

	button
	{
		padding: 8px 25px;
	}
}

.wiz-skip
{
	font-size: 1em;
	color: #aaa;
}

.wiz-skip:hover
{
	color: @homeColor;
}



/** NEW ACCOUNT ************************************************/

#newAccount {
	width: 100%;
	position: relative;
	margin: auto;
	
	#userData {
		width: 700px;
		position: relative;
		margin: auto;
		@media @mobile { width: 100%; }
	}
	
	.errorMessage
	{
		position: absolute;
		

		i
		{
			color: #A67D22;
		}

		span
		{
			display: inline-block;
			padding: 5px 10px;
			background-color: #A67D22;
			color: #fff;
			position: relative;
  			left: -4px;
		}

		&#wrongFirstname
		{
			top: 119px;
			right: -55px;
		}

		&#wrongLastname
		{
			top: 174px;
			right: -49px;
		}

		&#wrongEmail
		{
			top: 230px;
			right: -15px;
		}

		&#wrongGender
		{
			top: 286px;
			right: -26px;
		}

		&#wrongBirthdate
		{
			top: 341px;
			right: -45px;
		}
	}
}

#newAccount table
{
	margin: 0 auto;
	@media @mobile { margin-left: 10px; margin-right: 10px; }
}

#newAccount table, #account table
{
	th {
		font-weight: @lightFontWeight;
		color: #eee;
		text-align: left;
		padding: 7px 0;
		width: 130px;
	}

	td {
		padding: 7px;
	}

	input[type="text"], select {
		border: solid 1px #222;
		padding: 7px 16px;
		font-size: 1.25em;
		font-weight: normal;
		font-family: @fontFamily;
		color: #444;
		width: 271px;
		@media @mobile { width: 250px; }
	}

	select {
		padding: 7px 12px;
		width: 305px;
		@media @mobile { width: 284px; }
	}

	#birthMonth { width: 110px; @media @mobile { width: 106px; } }
	#birthDate  { width: 88px; @media @mobile { width: 82px; } }
	#birthYear  { width: 100px; @media @mobile { width: 88px; } }
}



/** NOTIFIER ***************************************************/

.screenBlocker
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	.radial-gradient ( rgba(0,0,0,0.7), rgba(0,0,0,0.9) );

	z-index: 1003;

	.message
	{
		width: 200px;
		margin: 20% auto;
		padding: 25px 50px;
		.rounded-corners(5px);
		color: #fafafa;
		font-weight: bold;
		text-shadow: 0 1px 0 #000;
		text-align: center;
		background: #111;
		opacity: 0.9;
		box-shadow: 0 2px 5px #000;
	}
}

/*** Help, Privacy, etc... ****************/

.outsideContent
{
	background: @staticBackground;
	color: @staticForeground;
	margin: 100px auto;
	margin-bottom: 60px;
	padding: 30px 50px;
	text-align: justify;
	box-shadow: 0 5px 25px rgba(0,0,0,0.75);
	min-width: 600px;
	width: 70%;
	@media @mobile { padding: 30px 30px; min-width: 200px; width: 80%; }

	h1, h2, h3
	{
		font-weight: @lightFontWeight;
		color: #fff;
	}

	p, ul
	{
		font-size: 0.85em;
	}
}

#help
{
	header
	{
		margin-top: 0.2em;
		position: static;
		color: @linkColor;
		cursor: pointer;
		display: inline-block;
		width: auto;

		i
		{
			margin-right: 10px;
		}
	}

	h2
	{
		margin-bottom: 0.2em;
	}

	p
	{
		margin: 5px 0 20px 0;
		padding-left: 25px;
	}
}

#recoverEmail, .outsideContent input[type="password"]
{
	border: solid 1px darken(@contentBackground, 5%);
	padding: 6px 10px 5px;
	width: 40%;	
	margin-bottom: 16px;
}

#recoverPassword[disabled]
{
	border: solid 1px #777;
	background-color: transparent;
	color: #777;
	cursor: default;
}

/*** Admin Page ***************************/


body.admin
{
	background-image: none !important;
	text-align: center;

	section
	{
		display: none;
		margin-top: 70px;
	}

	header
	{
		background: #000;
		top: 0;
		text-align: center;

		li
		{
			display: inline-block;
		}

		a
		{
			background: #000;
			color: #fff;
			border: solid 1px #fff;
			padding: 5px 20px;
			margin: 0 10px;
			text-transform: uppercase;

			&:hover
			{
				border: solid 1px @homeColor;
			}
		}
	}

	table
	{
		display: inline-table;
	}

	form
	{
		width: 500px;
		display: inline-block;
		text-align: left;

		label
		{
			display: block;
			margin-top: 20px;
			font-size: 1.25em;
			font-weight: @lightFontWeight;
		}

		input[type="text"], select, textarea
		{
			border: solid 1px #777;
			border-radius: 3px;
			background: #f0f0f0;
			box-shadow: inner 0 2px 5px rgba(0,0,0,0.5);
			font-size: 1.35em;
			font-family: @fontFamily;
			font-weight: @lightFontWeight;
			width: 100%;
		}
	}

	.formBottom
	{
		margin: 20px auto 50px;
		padding: 20px;
		background: rgba(0,0,0,0.1);
		width: 500px;
		display: block;

		strong
		{
			display: block;
			font-size: 1.25em;
			margin-bottom: 20px;
		}
	}
}

/*** JQuery UI Style Overrides ************************/

.custom-combobox {
	position: relative;
	display: inline-block;
}

.custom-combobox-toggle {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: -1px;
	padding: 0;
	/* support: IE7 */
	*height: 1.7em;
	*top: 0.1em;
}

.custom-combobox-input {
	margin: 0;
	padding: 0.3em;
}

#mainContainer {
	min-height: 100%;
    position: relative;
}

#g-signin2{
	width: 100%;
}
  
#g-signin2 > div{
	margin: 0 auto;
}
#g-signin3{
	width: 100%;
}
  
#g-signin3 > div{
	margin: 0 auto;
}
.g_id_signin{
text-align: -moz-center !important;
text-align: -webkit-center !important;
}
@media only screen and (min-width: 240px) and (max-width: 719px ) {
	#loginBox .abcRioButtonBlue {
		/* width: 290px !important; */
	}
}
.abcRioButton{
height: 37px !important;
width: 330px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#icon-image{
	display: flex;
}
#icon-image  .dropdawn_icon{
	position: absolute;
height: 27px;
margin-top: 10px;
padding-left: 11px;
}
#searchSection{
@media @tablet 
{
	margin: 0px !important
}

}
#newCustomSite{
@media @tablet 
		{
			padding-left: 7px !important;
			padding-right: 7px !important;
		}

}
.g_id_signin > span{
font-family: 'Source Sans 3', sans-serif !important;
} 

.searchSection  input{
outline: 0;
}

#container span{
font-family: 'Source Sans 3', sans-serif !important;
}
.g_id_signin #document html body #container span {
	font-family: 'Source Sans 3', sans-serif !important;
	font-size : 64px;
}
.nsm7Bb-HzV7m-LgbsSe-BPrWId{
display:none !important
}