* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background-color:#f3f3f3; font-family: 'Nunito', sans-serif;}
h1 { margin-bottom: 10px; color: #111111;}
h2 { font-size: 1.2em; margin-bottom: 10px; color: #cf0007;}
a, img { outline: none; border:none; color: #000; font-weight: bold;}
article, aside, aside-2column, aside-3column, details, figcaption, figure,
footer, header, footer, hgroup, menu, nav, section {display: block;	}

p {
	font-family: 'Nunito', sans-serif;
	line-height: 1.4em;
	font-size: 1.1em;
	color: #000000;
	text-align: justify;
	margin: .1em 0 .7em 0;
	text-indent: 0px;
	}

.read-more {
	font-size: 1em;
	float: right;
	text-decoration: underline;
	color: #000000;
	}

a:link {
	text-decoration: none;
	color: #cf0007;
	}

a span { text-decoration: underline; color: #000000; }
.red-text {color: #CF0007;}

.titlu {
	font-family: 'Nunito', sans-serif;
	font-size: 1.2em;
	color: #cf0007;
	margin: 1% 0;
	}

.titlu-tangram-categories {
	font-family: 'Nunito', sans-serif;
	font-size: 1.2em;
	color: #cf0007;
	margin: 1% 0;
	text-align: center;
	margin-bottom: 5%;
}

.subtitlu {
	font-family: 'Nunito', sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #000000;
	margin: 3% 0 0 0;
}
	
#wrapper {
	width: 96%;
	max-width: 1200px;
	margin: auto;
	padding: 2%;
	}

header {
	background-color: #ffffff;
	overflow: hidden;
	padding: 1%;
	margin-bottom: 1%;
	}

#logo {
	width: 163px;
	height: 125px;	
	float: left;
	padding-left: 1%;
	display: block;	
	}

#header-inside {
	width: calc(100% - 200px);
	height: 125px;
	float: right;
	}

#social-logo {
	margin-top: 2%;
	margin-bottom: 2%;
	}

#menu {
	width: 645px;
	left: 200px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	}

#main {
	width: 71%;
	/*min-height: 100%;
	min-height: inherit;*/
	float: left;
	background-color: #ffffff;
	overflow: auto; /* pentru a fi background alb sub tot continutul */
	padding: 2%;
	}

#main ul {
	list-style-image: url('../images/sageata_neagra.png');
	font-size: 1.1em;	
	line-height: 1.4em; 
	margin: 3% 0 0 7%;
	}

#main ul li:hover { list-style-image: url('../images/sageata_rosie.png'); }

#main ul.negru {
	list-style-image: url('../images/sageata_rosie.png');
	margin: 1% 0 0 10%;
	text-indent:15px;
	line-height:150%;
	}

.main-image img {
	width: 100%;
	height: auto;
	margin-bottom: 3%;
	}
	
aside, aside-2column, aside-3column {
	width: 20%;
	float: right;
	background-color:#ffffff;
	overflow: auto; /* pentru a fi background alb sub tot continutul */	
	padding: 2%;
	margin-bottom: 1%;		
	}

aside img { width: 100%; }
aside-2column img { width: 100%; }
aside-3column img { width: 100%; }

aside:hover img, aside-2column:hover img, aside-3column:hover img { opacity: 0.7; }
	
footer {
	width: 100%;
	float: left;
	clear: both;
	padding: 1% 0;
	text-align: center;
	margin-top: 1%;
	color: #ffffff;
	background-color: #3a3b44;
	font-family: 'Nunito', sans-serif;
	font-size: 0.9em;	
	}

.row {margin-bottom: 30px;}
.row:after {
	content: "";
	display: grid;
	clear: both;
	}

.column-image {
	float: right;
	width: 40%;
	padding: 0;
	text-align: right;
	margin: 10px 0 10px 20px;
	}

.book-pages {
	float: right;
	width: 50%;
	padding: 0;
	text-align: right;
	margin: 10px 0 10px 20px;
	}

.column-image img, .book-pages img {
	width: 100%;
	float: right;
}

.column-left {
	float: left;
	width: 48%;
	height: auto;
	text-align: center;
	margin-top: 30px;
	}

.column-right {
	float: right;
	width: 48%;
	height: auto;
	text-align: left;
	margin-top: 30px;
	}

#center-content{
	width: 98%;
	text-align: center;
	padding: 10% 0;
	}

.column-right h2 { text-align: center; }
.column-right a h2 { text-align: left; }

iframe {
	width: 267px;
	height: 555px;
}

/* ---------------------------------------------------------------------- BEGIN page numbering */

#pagini {
	width: 97%;
	float: right;
	margin: 1% 1% 1% 0;
	font-size: 1em;
	text-align: center;
	}		
	
ul.pagini {
    display: inline-block;
    padding: 0;
    margin: 0;
	}

ul.pagini li {
	display: inline;
	}

ul.pagini li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
	}

ul.pagini li a.active {
    background-color: #cf0007;
    color: #fff;
	}

ul.pagini li a:hover:not(.active) {	color: #fff; background-color: #3a3b44;	}

.liSpan {
	font-size: 2em;
	vertical-align: middle;
	}

/* ---------------------------------------------------------------------- END page numbering */



/* ---------------------------------------------------------------------- BEGIN Blog Cards */
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1200px;
	gap: 2rem;
}

img {
	max-width: 100%;
	object-fit: cover;
	}

.card {
	display: flex;
	flex-direction: column;
	width: 30%;
	overflow: hidden;
	border: 1px solid #ccc;
	box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
	}

.card-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	}

.tag {
	align-self: flex-start;
	padding: .25em .75em;
	font-size: .75rem;
	}

.tag-green {
	background: #94BF19;
	color: #fff;
	}

.tag-red {
	background: #CF0007;
	color: #fff;
}

.tag-blue {
	background: #2C4871;
	color: #fff;
}

.card-body h4 {  font-size: 1.3rem; color: #000000 }

.card-footer {
	display: flex;
	padding: 1rem;
	margin-top: auto;
	}

.user {
	display: flex;
	gap: .5rem;
	}

.user img {
	width: 35px;
	height: 35px;
	}


/* ---------------------------------------------------------------------- END Blog Cards */



/* ---------------------------------------------------------------------- BEGIN pure CSS slideshow */

.fling-minislide {width:100%; float: left; height: auto; padding-bottom: 135%; overflow:hidden; position:relative;}
.fling-minislide img{ position:absolute; animation:fling-minislide 20s infinite; opacity:0; width: 100%; height: auto;}

@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(1){animation-delay:0s;}
.fling-minislide img:nth-child(2){animation-delay:5s;}
.fling-minislide img:nth-child(3){animation-delay:10s;}
.fling-minislide img:nth-child(4){animation-delay:15s;}

/* ---------------------------------------------------------------------- END pure CSS slideshow */



/* ---------------------------------------------------------------------- BEGIN Modal Image */

input[type="checkbox"] {
	display:none;
	}

input[type="checkbox"]:checked ~ .modal, 
input[type="checkbox"]:checked ~ .modal-background {
	display: block;
	}

.modal-background {
	width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 9998;
	}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: none;
	width: fit-content;
	height: fit-content;
	background-color: #fff;
	z-index: 9999;
	}

.modal-header label { cursor: pointer; }
.modal-header label:hover img { }
.label { cursor: pointer; }
.label:hover { opacity: 0.7; }

/* ---------------------------------------------------------------------- END Modal Image */



/* ---------------------------------------------------------------------- BEGIN Sudoku solver */

.puzzle {
	margin: 0 auto;
	position: relative;
	width: 570px;
	text-align: center;
	}

.puzzle p {text-align: center;}

#SolvedText {
	text-align: center;
	font-weight: bold;
	color: #cf0007;
	font-size: 24px;
	margin-top: 25px;
	}

input[type="text"] {
	font-size: 24px;
	text-align: center;
	width: 100%;
	height: 100%;
	background: transparent;
	border: transparent;
	color: #cf0007;
	}

#borderRow { border-bottom: 4px solid black; }
#borderColumn { border-right: 4px solid black; }

#borderRowColumn {
	border-bottom: 4px solid black;
	border-right: 4px solid black;
	}

.divSudoku {
	display: table;
	padding: 0 50px;
	}

.divSudokuRow {display: table-row;}

.divSudokuCell {
	display: table-cell;
	align-items: center;
	border: 1px solid black;
	justify-content: center;
	height: 50px;
	width: 50px;
	padding: 0 1%;
}

.divSudokuBody {display: table-row-group;}

button {
	font-size: 1.2em;
	font-weight: bold;
	font-family: 'Nunito', sans-serif;
	padding: 10px 15px;
	color: white;
	cursor: pointer;
	}

#SolveButton, #ResetButton {	
	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	}

/* ---------------------------------------------------------------------- END Sudoku solver */



/* ---------------------------------------------------------------------- BEGIN Category */

.objects {
	background-color: #EFF6DC;
	border-left: 6px solid #94BF19;
	margin-top: 0px;
}

.animal {
	background-color: #FFFCD8;
	border-left: 6px solid #EDD900;
	}

.boats {
	background-color: #FDECD8;
	border-left: 6px solid #EE8000;	
	}

.people {
	background-color: #FBDCDA;
	border-left: 6px solid #E31A0E;	
	}

.characters {
	background-color: #FBD8EB;
	border-left: 6px solid #E4007B;	
	}

.shapes {
	background-color: #EBE1F1;
	border-left: 6px solid #7939A3;	
	}

.objects:hover { background-color: #94BF19; }
.animal:hover { background-color: #EDD900; }
.boats:hover { background-color: #EE8000; }
.people:hover { background-color: #E31A0E; }
.characters:hover { background-color: #E4007B; }
.shapes:hover { background-color: #7939A3; }

.sudoku-techniques {
	background-color: #F7F6CD;
	border-left: 6px solid #ABA60A;
	padding: 4px 12px;
	margin-bottom: 10px;
	}

.lista {
	/*padding-bottom: 2%;
	border-bottom: 1px solid #909090;*/
	}

 .lista-aside {
	padding-bottom: 2%;
	}

.lista a, .lista-aside a { color: #000; }

.lista ul {
	list-style-image: url('../images/sageata_neagra.png');
	font-size: 1.1em;
	line-height: 1.5em;
	margin: 3% 0 0 7%;
	column-count: 3;
	}

.lista-aside ul {
	list-style-image: url('../images/sageata_neagra.png');
	font-size: 1.1em;
	line-height: 1.5em;
	margin: 3% 0 0 7%;
	}

.lista ul li:hover, .lista-aside ul li:hover { list-style-image: url('../images/sageata_rosie.png'); }
.objects h2, .animal h2, .boats h2, .people h2, .characters h2, .shapes h2, .sudoku-techniques h2 { padding: 15px; }
.objects h2:hover, .animal h2:hover, .boats h2:hover, .people h2:hover, .characters h2:hover, .shapes h2:hover { color: #ffffff; }
.objects a, .animal a, .boats a, .people a, .characters a, .shapes a { display: block; }


/* ---------------------------------------------------------------------- END Category */


	
/* ....................................................................... BEGIN slideshow Home page*/
#slideshow {
	float: left;
	margin-bottom: 15px;
	width: 75%;	
	}
	
#slider {
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	text-align: center;
	}

#slider input[type=radio] { display: none; }

#slider label {
	cursor: pointer;
	text-decoration: none;
	}

#slides {
	position: relative;
	z-index: 1;
	}

#slides img { width: 100%; }

#overflow {
	width: 100%;
	overflow: hidden;
	}

#slide1:checked ~ #slides .inner { margin-left: 0; }
#slide2:checked ~ #slides .inner { margin-left: -100%; }
#slide3:checked ~ #slides .inner { margin-left: -200%; }
#slide4:checked ~ #slides .inner { margin-left: -300%; }
#slide5:checked ~ #slides .inner { margin-left: -400%; }

#slides .inner {
	transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
	width: 500%;
	line-height: 0;
	}

#slides .slide {
	width: 20%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: #fff;
	}

#bullets {
	margin: 10px 0 0 0;
	text-align: center;
	}

#bullets label {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius:100%;
	background: #a5a5a5;
	margin: 0 10px;
	}

#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4),
#slide5:checked ~ #bullets label:nth-child(5) {
	background: #2C4871;
}

@media screen and (max-width: 900px) {
#slides {
	max-width: 100%;
	margin: 0 auto;
	}
}

/* ....................................................................... END slideshow Home page */



/* ---------------------------------------------------------------------- BEGIN Social Media Buttons */

.social { text-align: center; }

a.fa {
	padding: 7px 5px;
	font-size: 30px;
	width: 50px;
	text-align: center;
	text-decoration: none;
	margin: 0 5px;
	}

a.fa:hover { opacity: 0.7; }

a.fa-facebook {
	background: #3B5998;
	color: white;
	}

a.fa-youtube {
	background: #bb0000;
	color: white;
	}

a.fa-instagram {
	background: #125688;
	color: white;
	}

a.fa-pinterest {
	background: #cb2027;
	color: white;
	}

a.fa-android {
	background: #a4c639;
	color: white;
	}

/* ---------------------------------------------------------------------- END Social Media Buttons */


	
/* ....................................................................... BEGIN Menu */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	line-height: 1;
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

#cssmenu:after,
#cssmenu > ul:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}

#cssmenu #menu-button { display: none;	}

#cssmenu {
	width: 645px;
	z-index: 50;
	border-radius: 5px;
	font-family: 'Nunito', sans-serif;
	background: #4c4e5a;  
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	}

#cssmenu.align-center > ul {
	font-size: 0;
	text-align: center;
	}

#cssmenu.align-center ul ul {
	text-align: left;
	}
#cssmenu.align-center > ul > li {
	display: inline-block;
	float: none;
	}
#cssmenu.align-right > ul > li {
	float: right;
	}
#cssmenu.align-right ul ul {
	text-align: right;
	}
#cssmenu > ul > li {
	float: left;
	}
#cssmenu > ul > li > a {
	padding: 12px 25px;
	font-size: 15px;
	color: #ffffff;  
	letter-spacing: 1px;
	font-weight: 700;
	text-decoration: none;
	}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
	color: #ffb3b3;
	}
#cssmenu > ul > li.has-sub > a {
	padding-right: 40px;
	}
#cssmenu ul > li.has-sub > a:after {
	content: '';
	position: absolute;
	right: 5px;
	top: 10px;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background: #4c4e5a;  
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background-size: 36px 36px;
	background-position: 0 0;
	background-repeat: no-repeat;
	}
#cssmenu ul > li.has-sub:hover > a:after {
	background-position: 0 -18px;
	}
#cssmenu ul > li.has-sub > a:before {
	content: '';
	position: absolute;
	right: 11px;
	top: 18px;
	display: block;
	width: 0;
	height: 0;
	border: 3px solid transparent;
	border-top-color: #ffffff;
	z-index: 20;
	}
#cssmenu ul > li.has-sub:hover > a:before {
	border-top-color: #ffb3b3;
	}
#cssmenu ul ul {
	position: absolute;
	left: -9999px;
	opacity: 0;
	}
#cssmenu > ul > li > ul {
	top: 91px;
	padding-top: 8px;
	border-radius: 5px;
	}
#cssmenu > ul > li:hover > ul {
	left: auto;
	top: 33px;  
	opacity: 1;
	}
#cssmenu.align-right > ul > li:hover > ul {
	right: 0;
	}
#cssmenu ul ul ul {
	top: 40px;
	}
#cssmenu ul ul > li:hover > ul {
	top: 0;
	left: 325px;
	padding-left: 10px;
	opacity: 1;
	}
#cssmenu.align-right ul ul > li:hover > ul {
	left: auto;
	right: 178px;
	padding-left: 0;
	padding-right: 10px;
	opacity: 1;
	}
#cssmenu ul ul li a {
	width: 220px;
	padding: 12px 25px;
	font-size: 15px;
	font-weight: 700;  
	color: #ffffff;
	text-decoration: none;
	background: #1f2024;
	border-bottom: 1px solid #353539;
	}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li > a:hover,
#cssmenu ul ul li.active > a {
	color: #ffb3b3;
	}
#cssmenu ul ul li:first-child > a {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;  
	}
#cssmenu ul ul li:last-child > a {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;  
	}
#cssmenu ul ul > li.has-sub > a:after {
	right: 12px;
	top: 9.5px;
	background: #4c4e5a;  
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background-size: 36px 36px;
	background-position: 0 0;
	background-repeat: no-repeat;
	}
#cssmenu.align-right ul ul > li.has-sub > a:after {
	right: auto;
	left: 12px;
	}
#cssmenu ul ul > li.has-sub:hover > a:after {
	background-position: 0 -18px;
	}
#cssmenu ul ul > li.has-sub > a:before {
	top: 15.5px;
	right: 16px;
	border-top-color: transparent;
	border-left-color: #ffffff;
	}
#cssmenu.align-right ul ul > li.has-sub > a:before {
	top: 15.5px;
	right: auto;
	left: 16px;
	border-top-color: transparent;
	border-right-color: #ffffff;
	border-left-color: transparent;
	}
#cssmenu ul ul > li.has-sub:hover > a:before {
	border-top-color: transparent;
	border-left-color: #ffb3b3;
	}
#cssmenu.align-right ul ul > li.has-sub:hover > a:before {
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: #ffb3b3;
	}


@media all and (max-width: 785px), 
	only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), 
	only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), 
	only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), 
	only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), 
	only screen and (min-resolution: 192dpi) and (max-width: 1024px), 
	only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

#cssmenu { width: 87%; }

#cssmenu ul,
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu > ul,
#cssmenu.align-center > ul,
#cssmenu > ul > li > ul,
#cssmenu > ul > li:hover > ul,
#cssmenu ul ul li:hover > ul,
#cssmenu ul ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul ul li:hover > ul,
#cssmenu.align-right ul ul ul li:hover > ul {
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    display: none;
    padding: 0;
    opacity: 1;
    text-align: left;
	}
#cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
	}
#cssmenu > ul > li > a,
#cssmenu ul ul li a,
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
	}
#cssmenu ul li a {
    padding-left: 12.5px;
	}
#cssmenu ul ul li a {
    padding: 14px 25px 14px 27.5px;
	}
#cssmenu ul ul ul li a {
    padding-left: 42.5px;
	}
#cssmenu ul ul ul ul li a {
    padding-left: 57.5px;
	}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul li.has-sub > a:after,
#cssmenu ul ul li.has-sub > a:before {
    display: none;
	}
#cssmenu #menu-button {
    position: relative;
    display: block;
    padding: 20px;
    padding-left: 12.5px;
    cursor: pointer;
    font-size: 15px;
    color: #ffffff;    
    font-weight: 700;
    letter-spacing: 1px;    
	}
#cssmenu .submenu-button {
    position: absolute;
    right: 0;
    display: block;
    width: 53px;
    height: 53px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    z-index: 30;
    cursor: pointer;
	}
#cssmenu ul ul .submenu-button {
    height: 41px;
	}
#cssmenu ul .submenu-button:after,
#cssmenu #menu-button:after {
    content: '';
    position: absolute;
    right: 12.5px;
    top: 12.5px;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 15px;
    background: #4c4e5a;  
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background-size: 56px 56px;
    background-position: 0 0;
    background-repeat: no-repeat;
	}
#cssmenu ul .submenu-button.submenu-opened:after,
#cssmenu #menu-button.menu-opened:after { background-position: 0 -28px; }
#cssmenu ul ul .submenu-button:after { top: 6.5px; }
#cssmenu #menu-button:before,
#cssmenu .submenu-button:before {
	content: '';
    position: absolute;
    right: 22.5px;
    top: 25.5px;
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    z-index: 40;
	}

#cssmenu ul ul .submenu-button:before { top: 19.5px; }
#cssmenu #menu-button.menu-opened:before,
#cssmenu .submenu-button.submenu-opened:before { border-top-color: #ffb3b3; }

	}

/* ....................................................................... END Menu */

	
/* ....................................................................... BEGIN Gallery */

div.gallery {
	border: 1px solid #ccc;
	box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
	}

div.gallery:hover {
	border: 1px solid #777;
	}

div.gallery {
	max-width: 200px;
	height: auto;
	}

div.gallery img {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #ccc;
	}

div.name {
	text-align: center;
	background: #fff;
	min-height: 50px;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
}

.name a {
	display: block;
	/*padding: 15px 5px 15px 5px;*/
	color: #000000;
	font-size: 0.9em;
	}

.responsive {
	float: left;
	width: 21%;
	padding: 2%;
	}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
	}

/* ....................................................................... END Gallery */


/* ---------------------------------------------------------------------- BEGIN TOP button */
#topBtn {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: #4c4e5a;
	color: white;
	cursor: pointer;
	padding: 10px;
	border: 1px solid #4c4e5a;
	border-radius: 10px;
	font-size: 18px;
}

	#topBtn:hover {
		color: #4c4e5a;
		background-color: #ccc;
		border: 1px solid #4c4e5a;
	}
/* ---------------------------------------------------------------------- END TOP button */


/* ---------------------------------------------------------------------- BEGIN Tooltip */
.tooltip {
	position: relative;
	border-bottom: 2px solid #cf0007;
	cursor: pointer;
	}

.tooltip span {
	visibility: hidden;
	width: 10em;
	background-color: #2c2d33;
	color: #fff;
	text-align: center;
	line-height: 1.2em;
	font-size: 0.9em;
	border-radius: 6px;
	padding: 5px 7px;
	position: absolute;
	z-index: 1;
	top: 150%;
	left: 50%;
	margin-left: -5em;
	opacity: 0;
	transition: opacity 1s;
	}

.tooltip span::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent black transparent;
	}

.tooltip input { display:none; }

.tooltip input:checked+span {
	visibility: visible;
	opacity: 1;
	}

/* ---------------------------------------------------------------------- END Tooltip */


/* ....................................................................... BEGIN 1250px Media Queries */
@media screen and (max-width: 1250px) {
#logo { /* border: 1px solid #000000; */ }
.card {	width: 47%;	}
#hide {	display: none; /* visibility: hidden; */ }
}

/* ....................................................................... END 1250px Media Queries */


/* ....................................................................... BEGIN 960px Media Queries */
@media screen and (max-width: 960px) {	
#logo { /* border: 1px solid #000000; */ }

#wrapper { width: 96%; 	}

#main {
	float: left;
	clear: left;		
	width: 96%;
	}

aside {
	width: 96%;
	float: left;
	display: inline;
	}

aside-2column {
	width: 42%;
	float: left;
	display: inline;
	margin: 0 2%;
	}

aside-3column {
	width: 25%;
	float: left;
	display: inline;
	margin: 0 2%;
	}

#header-inside {	
	width: 100%;
	height: 110px;	
	}

#social-logo {
	left: 0;
	margin-top: 2%;
	margin-bottom: 2%;
	float: left;
	clear: left;
	width: 100%;
	min-height: 30px;
	}

#menu {	
	width: 100%;
	left: 0;
	margin-top: 70px;
	margin-bottom: 2%;
	float: left;
	clear: left;
	min-height: 30px;
	}

#cssmenu, #social-logo {
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	}
	
#logo {	
	text-align: center;
	margin-top: 1%;
	margin-bottom: 1%;
	padding-left: 0;
	}
	
#logo img { max-width: 163px; }
	
#logo, #slideshow { width: 100%; }
	
#social-logo { /* display: none; */ min-height: 55px; }
	
aside, aside-2column, aside-3column {
	margin-top: 3%;
	margin-bottom: 3%;
	}
}

/* ....................................................................... END 960px Media Queries */


/* ....................................................................... BEGIN 785px Media Queries */
@media screen and (max-width: 785px) {
#logo { /* border: 1px solid #000000; */ }

#header-inside {	
	width: 100%;
	height: 130px;
	}

.column-image, .book-pages {
	width: 96%;
	float: left;
	}

img.google-logo { width: 120px;	}

footer { font-size: 0.8em; }

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;	
    width: 96%;
	block-size: fit-content;
    background-color: #fff;
    z-index: 9999;
	}

.row { position: relative; }

.tooltip span {
	max-width: 20rem;
	position: fixed;
	bottom: auto; top: 50%;
	left: 50%;
	}

.tooltip span::after {
	border-color: transparent transparent transparent transparent;
	}
}

/* ....................................................................... END 785px Media Queries */



/* ....................................................................... BEGIN 700px Media Queries */
@media screen and (max-width: 700px) {
#logo { /* border: 1px solid #000000; */ }

.responsive {    
	width: 29%;
	padding: 2%;
	}

.card {	
	margin-top: 2%;
	width: 45%;
	}
}

/* ....................................................................... END 700px Media Queries */



/* ....................................................................... BEGIN 635px Media Queries */
@media screen and (max-width: 635px) {
#logo { /* border: 1px solid #000000; */ }

.column-left {
	float: left;
	width: 100%;
	}

.column-right {
	float: left;
	width: 100%;
	margin-top: 5%;
	}

.puzzle { width: 100%; }

.divSudokuCell {	
	width: 10vmin;
	height: 10vmin;
	/*width: calc(100% / 9);*/
	/*height: 40px;*/
	/*aspect-ratio : 1 / 1;*/
	}

#borderRow { border-bottom: 3px solid black; }
#borderColumn { border-right: 3px solid black; }

#borderRowColumn {
	border-bottom: 3px solid black;
	border-right: 3px solid black;
	}

.divSudoku { padding: 0 1%; }
}

/* ....................................................................... END 635px Media Queries */



/* ....................................................................... BEGIN 575px Media Queries */
@media screen and (max-width: 575px) {
.lista ul { column-count: 2; }
.column-image, .book-pages {	
	width: 100%;
	padding: 0;
	text-align: center;
	margin: 10px 0;
	}

.card {	
	margin-top: 2%;
	width: 96%;
	}
}

/* ....................................................................... END 575px Media Queries */



/* ---------------------------------------------------------------------- BEGIN Animatie pe text */

.text_gradient_animation {
	font-family: 'Nunito', sans-serif;
	font-size: 1.2em;
	color: #cf0007;
	margin: 1% 0 0 0;
	background: linear-gradient(to right, rgba(255, 215, 255, 0) 0%, rgba(225, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 61%), linear-gradient(rgb(207, 0, 7) 52%, rgb(231, 98, 12) 60%, rgb(255, 196, 17) 61%); /* you can change the colors based on your preference */
	background-clip: text; /*it defines how far the background should extend within an element, here we set it to text */
	-webkit-background-clip: text; /*for browsers compatibility */
	-webkit-text-fill-color: transparent; /* specifies the fill color of text characters. We use transparent to use the background as our text fill  */
	animation: wave 2000ms ease alternate infinite;
	transition: all 0.4s ease;
	}

@keyframes wave {
0% { background-position: 0 0; }
100% { background-position: 50vw 10px; }
	}

/* ---------------------------------------------------------------------- END Animatie pe text */




/* ---------------------------------------------------------------------- BEGIN  */
/* ---------------------------------------------------------------------- END  */