/* 
color: var(--clr-lines); 
var(--clr-non-focused);
var(--clr-lines);
*/
:root {

	--clr-lines: rgb(177, 153, 21);
	--clr-lines: #47a3da;
	--clr-lines: purple;
	
	--clr-non-focused: #becbd2;
	
	--clr-input-table-th: rgb(216, 157, 243);
	--clr-input-table-th-hover: rgb(157, 233, 243);
	--clr-input-table-td-hover: rgb(239, 246, 255);
	--clr-input-table-th-hover: rgb(255, 212, 255);
	--clr-input-table-td-hover: rgb(255, 242, 255);
}


*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body, html { 
	font-size: 100%;
	padding: 0;
	margin: 0;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: var(--clr-lines);
}

textarea {


	border: 1px solid var(--clr-non-focused);
	transition: all ease-out 1s;
}

textarea:hover {
	border: 1px solid var(--clr-lines);
}


/***************************
****************************
			TABS
****************************
***************************/

.tabs {
	position: relative;
	width: 100%;
	margin: 3em 0 2em;
	
	overflow: hidden;
	font-weight: 300;
}

/* Nav */
.tabs nav {
	text-align: center;
}

.tabs nav span.icon {
	margin-right: 10px;
}


.tabs nav ul {
	display: inline-block;
	padding: 0;
	margin: 0;

	list-style: none;
}

.tabs nav ul li {
	display: block;
	position: relative;
	float: left;
	margin: 0 0.25em;

	border: 1px solid var(--clr-non-focused);
	border-bottom: none;
}

.tabs nav li.tab-current {
	border: 1px solid var(--clr-lines);
	border-bottom: none;

	box-shadow: inset 0 2px var(--clr-lines);
	z-index: 100;
}

.tabs nav li.tab-current a {
	filter: saturate(1);
	color: var(--clr-lines);
}

.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
	content: '';
	position: absolute;
	width: 1000px;
	height: 1px;
	right: 100%;
	bottom: 0;
	
	background: var(--clr-lines);
}

.tabs nav li.tab-current:after {
	right: auto;
	left: 100%;
	width: 4000px;
}

.tabs nav a {
	display: block;
	padding: 0 1.25em;

	filter: saturate(0);
	text-decoration: none;
	font-size: 1.45em;
	line-height: 2.5;
	white-space: nowrap;

	color: #ccc;
	outline: none;
	
}

.tabs nav a:hover {
	filter: saturate(1);
	color: #768e9d;
}


/***************************
****************************
		MISC
****************************
***************************/  

/* Content */
.content section {
	display: none;
	max-width: 1230px;
	width: 90%;
	padding: 3em 1em;
	margin: 0 auto;
	
	color: black;
}

.content section:before,
.content section:after {
	content: '';
	display: table;
}

.content section:after {
	clear: both;
}

.content section.content-current {
	display: block;
}


/* Example media queries */



@media screen and (max-width: 1000px) {
	.content section {
		font-size: 130%;
	}

	#grammar_input {
		font-size: 130%;
	}

	.tabs nav ul,
	.tabs nav ul li a {
		width: 100%;
		padding: 0;
	}

	.tabs nav ul li {
		width: 20%;
		width: calc(20% + 1px);
		margin: 0 0 0 -1px;
	}

	.tabs nav ul li:last-child {
		border-right: none;
	}

	.tabs nav ul li span.text{
		display: none;
	}
}


/***************************
****************************
		CONTENEDOR
****************************
***************************/


.container > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 2.875em 1.875em 1.875em;
}

.container > header > h2 {
	padding: 0 0 0.6em 0.1em;

	font-size: 0.5em;
	text-transform: uppercase;
	letter-spacing: 0.5em;
}

.container > header h1 {
	margin: 0;
	float: left;

	font-size: 2.125em;
	line-height: 1.3;
	font-weight: 400;
}

.container > header nav {
	float: right;
}

.container > header nav a {
	display: inline-block;
	position: relative;
	width: 2.5em;
	height: 2.5em;
	margin: 0 0.1em;

/*
	border: 4px solid var(--clr-lines);
	border-radius: 50%;
	/*
	font-size: 1em;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color:var(--clr-lines);
	background: #fff;
}


.container > header nav a:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
  }

.container > header nav a:hover:before {
	content: attr(data-info);
	position: absolute;
	width: 600%;
	top: 120%;
	right: 0;

	color: var(--clr-lines);
	text-align: right;
	pointer-events: none;
}

.container > header nav a:hover {
	background: var(--clr-lines);
	color:#fff;
}




@media screen and (max-width: 55em) {

	.container > header h1,
	.container > header nav {
		float: none;
	}

	.container > header > span,
	.container > header h1 {
		text-align: center;
	}

	.container > header nav {
		margin: 0 auto;
	}

	.container > header > span {
		text-indent: 30px;
	}

	
}