@charset "utf-8";
:root {
	--baza:#000;
	--invers:#fff;
	--up:#212121;
	--accent:#FFEB3B;
	--border:#BDBDBD;
	--fad:#616161;
	--gri_200:#EEE;
	--gri_300:#E0E0E0;
	--gri_400:#BDBDBD;
	--gri_500:#9E9E9E;
	--gri_600:#757575;
	--gri_700:#616161;
	--gri_800:#424242;
	--lni:"LineIcons";
}
* {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
body {
	background:var(--baza);
	color:var(--invers);
	font-family:'Roboto', sans-serif;;
	font-size:100%;
	font-weight:300;
	height:100%;
	margin:0;
	position:relative;
}
h1, h2, h3, h4, h5, h6 {font-weight:300}
header {align-items:center;justify-content:space-between;margin:0 auto;width:74%}
h1, .titlu {
	font-size:1.2rem;
	margin:.75rem;
	text-transform:lowercase
}
h1 a {
	color:var(--invers) !important;
	font-family:'Barlow Condensed', 'Trebuchet MS', sans-serif;
	font-size:1.5rem;
	line-height:1
}
h2 {
	color:var(--gri_400);
	font-size:1.2rem;
	margin:1rem 0 2rem 0;
	text-transform:uppercase;
}
a:link, a:visited, a:active {
	text-decoration:none;
	color:var(--accent);
}
a:hover {
	text-decoration:none;
	color:var(--invers);
}
i, .lnr {color:var(--accent)}
img {border:0;width:100%;height:auto}
td {vertical-align:top}
hr {color:var(--fad)}
.flex{display:flex}
.wrap{flex-wrap:wrap}
.col{flex-direction:column}
.content::before, .content::after, .main::before, .main::after, footer::before, footer::after {
	content:"";
	display:table;
	clear:both;
}
.content {
	background:var(--up);
	margin:0 auto;
	padding:1rem 2rem;
	width:74%
}
.main {
	background:url(../images/ronin.png) no-repeat right bottom;
	font-size:1rem;
	margin:0 auto;
	min-height:20rem;
	padding:0 110px 2rem 0;
}
.main p {
	margin:15px 5px auto 5px;
	text-align:justify;
	text-indent:1cm;
}
.menu-wrap a:link, .menu-wrap a:visited, .menu-wrap a:active, footer a:link, footer a:visited, footer a:active {color:var(--invers);font-weight:300}
.menu-wrap a:hover, footer a:hover {
	color:var(--accent);
	font-weight:300;
	text-decoration:none;
}
.text {
	justify-content:center;
	padding:2rem;
}
.text2 {text-align:center}
.autor {
	color:#ccc;color: var(--border);
	font-style:italic;
	margin:0 auto;
	text-align:right;
	width:50%
}
.face {margin:4rem}
.avatar,.avatarmeniu {
	background-size:100% auto !important;
	background:var(--baza) url('https://graph.facebook.com/1952662491679054/picture?type=large') no-repeat scroll top center;
	-webkit-box-shadow:0 0 5px 3px rgba(0, 0, 0, .2) ;
	-moz-box-shadow:0 0 5px 3px rgba(0, 0, 0, .2);
	box-shadow:0 0 5px 3px rgba(0, 0, 0, .2);
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-khtml-border-radius:50%;
	border-radius:50%;
}
.avatar {
	border:1px solid var(--baza);
	display:block;
	height:7rem;
	line-height:initial;
	margin:0 0 2rem 0;
	position:relative;
	width:7rem;
}
.avatar::after {
	font-family:var(--lni) ;
	content:"\eab2" ;
	color:var(--accent);
	position:absolute;
	right:0;
	top:0;
}
.avatar:hover {
	transform:scale(1.1);
	transition:all .3s ease-in-out 0s;
}
.avatarmeniu {
	border:2px solid var(--baza);
	display:inline-block;
	height:2.7rem;
	padding:1px;
	width:2.7rem;
}
.contact {padding:0}
footer {
	color:var(--gri_500);
	font-size:.75rem;
	line-height:initial;
	margin:1rem 0 1rem 2rem
}
#dreapta {float:right}
.style1 {
	color:#f00;
	font-size:9px;
	text-align:right
}
.style2 {font-size:10px}
.style3 {font-size:12px}
.style4 {font-size:8px;color:var(--gri_500)}
.style5 {text-align:center}
.cell {
	padding:0 .5rem 1rem;
	text-align:center;
	width:25%;
}
.cellb {
	height:auto;
	padding:.5em;
	width:20%;
}
.thumb img {
	border:1px solid var(--border);
	border-radius:3px;
	height:auto;
	padding:1px;
	width:100%;
}
.fa-ul {margin-left:0!important}
.mail::before {
	color:var(--gri_500);
	content:"\eaab";
	font-family:var(--lni);
	font-size:1.4rem;
	margin:0 .5rem 0 0;
}
.meniu {
	font-size:.875rem;
	padding:1.5rem .5rem;
	text-transform:uppercase
}
.meniu a:link {
	color:#fff;color:var(--invers);
	min-height:50px;
	line-height:50px;
	font-size:1rem;
	font-weight:normal;
	margin:0 2px;
	padding:1rem;
	position:relative;
	text-align:center;
	text-decoration:none;
	width:100%
}
.meniu a:active, .meniu a:visited {
	color:#fff;color:var(--invers);
	text-decoration:none
}
.meniu > a {
	color:rgba(0,0,0,.4);
	text-decoration:none;
	z-index:1
}
.meniu>a.activ:before {transform: scaleX(1);visibility: visible}
.meniu>a:before {
	background:#ffee58;
	border-radius:5px;
	bottom:0;
	content:"";
	height:1px;
	left:0;
	position:absolute;
	transform:scaleX(0);
	transition:.25s linear;
	visibility:hidden;
	width:100%
}
.meniu > a:hover:before,.meniu > a:focus:before {
	transform:scaleX(1);
	visibility:visible;
}
.meniu2 {
	color:#f44336;
	background:var(--invers);
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
	padding:1px 0 1px 15px;
	text-align:right;
	margin-top:1px;
}
.menu-button, .menu-wrap {display:none}
.menu-button {
	color:var(--accent);
	font-family:var(--fa);
	font-weight:700;
}
.menu-button .lnr-menu {
	-webkit-box-shadow:0 0 8px 1px var(--baza) ;
	-moz-box-shadow:0 0 8px 1px var(--baza);
	box-shadow:0 0 8px 1px var(--baza);
}
.menu-wrap a:hover,.menu-wrap a:focus {
	color:var(--invers);
	background:var(--gri_800)
}
.menu-side a {	border-bottom:1px solid var(--baza)}
.menu-side a:first-child {border-top:1px solid var(--up)}

@media only screen and (max-width:750px) {
	header{justify-content:flex-end;width:100%}
	h1 {margin:1rem;text-align:right}
	h2 {margin:0 0 2rem 0}
	header h2 {margin:.5rem 0 1rem 0}
	footer {padding:1rem 0 .5rem 2rem}
	.menu-button, .menu-wrap {display:initial;z-index:1}
	.meniu {display:none}
	.content {margin:0 17px 1rem 17px;padding:0 0 1rem 0;width:calc(100% - 34px);font-size:.875rem;border-radius:4px}
	.main {background:url(../images/ronin_mic.png) no-repeat right bottom;background-position:95% 100%;width:100%;padding:2rem 2rem 6rem 2rem;margin:0;overflow:hidden}
	.text {padding:0}
	.nume {text-align:right;font-size:2rem}
	.icon-list a {margin:0 0 0 1rem!important}
}
@media only screen and (max-width:620px) {
	.contact {width:100%;float:left;margin:0 0 1rem 0}	
	.thumb {float:left;width:100%}
}
@media only screen and (max-width:420px) {
	.nume {width:90%}	
	.autor {width:100%}	
	.text {width:100%}	
	.cellb {width:50%}
	.cell {
		padding:0 .5rem 1rem;
		width:50%;
	}
	.nume {text-align:right;font-size:1.8rem;line-height:1.7rem}
}