Newer
Older
body ul {
margin: 0;
padding: 0;
list-style-type: none;
}
text-decoration: none;
}
body a:hover {
body emoji {
font-style: initial;
font-size: 25px;
}
body img.pixelated {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
main {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
main .warning-banner {
background: url("/assets/images/wallpaper_warning.svg");
width: 100%;
height: 40px;
padding: 20px 10%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main .warning-banner strong {
font-size: 18px;
color: #1c3db2;
}
main .image-carousel {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background-color: black;
position: relative;
}
main .image-carousel img {
position: absolute;
max-width: 100%;
max-height: 400px;
}
main .image-carousel .carousel-bullets {
position: absolute;
bottom: 0;
padding: 20px;
display: flex;
gap: 10px;
}
main .image-carousel .carousel-bullets .bullet {
cursor: pointer;
width: 8px;
height: 8px;
background-color: #6b7880;
border-radius: 100%;
box-shadow: 0 0 3px black;
}
main .image-carousel .carousel-bullets .bullet.active {
background-color: #d4d9dd;
}
@media screen and (max-width: 900px) {
main .image-carousel img {
max-height: 100%;
}
main .image-carousel .carousel-bullets {
}
main .image-carousel .carousel-bullets .bullet {
width: 12px;
height: 12px;
}
}
background-color: white;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 10;
main header nav {
display: flex;
align-items: center;
}
main header nav .home {
margin: 0 10px;
}
main header nav .home a {
display: flex;
align-items: center;
gap: 10px;
}
main header nav .home a img {
height: 40px;
width: auto;
}
main header nav .home a img.logo-text {
width: 120px;
height: auto;
main header nav ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
main header nav ul li:hover .submenu {
visibility: unset;
max-height: 1000px;
}
main header nav .burger {
display: none;
}
@media screen and (max-width: 560px) {
main header nav {
justify-content: space-between;
}
main header nav .burger {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
font-weight: bold;
border: 1px solid;
margin: 0 20px;
cursor: pointer;
border-radius: 100%;
}
main header nav ul {
display: none;
}
main header nav ul.responsive-show {
display: flex;
position: absolute;
right: 0;
max-width: 100vw;
min-width: 50vw;
background-color: white;
box-shadow: 0 4px 6px 2px #0000000a;
}
main header nav ul.responsive-show li.active a {
border: none;
}
main header nav ul.responsive-show li .submenu {
display: flex;
visibility: visible;
position: relative;
height: unset;
max-height: unset;
transition: max-height 0.6s;
top: unset;
left: unset;
margin-left: 20px;
}
main header nav ul.responsive-show li .submenu li a {
font-weight: 400;
color: #96a5ae;
}
}
main #page-container .page-header {
background-image: url("/assets/images/wallpaper_binary.png");
main #page-container .page-header .big-logo {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 20px;
padding: 20px;
}
main #page-container .page-header .big-logo img {
width: 200px;
max-width: 100%;
}
main #page-container .page-header .big-logo img.logo-text {
width: 300px;
max-width: 100%;
}
main #page-container .page-header .logo {
padding-left: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main #page-container .page-header .logo img {
@media screen and (max-width: 560px) {
main #page-container .page-header h1 {
padding: 15px 20px 0;
}
main #page-container .page-header p {
main #page-container .page-header .big-logo {
flex-direction: column;
}
}
main #page-container .page-header.logo-left .grid-wrapper {
display: grid;
main #page-container .page-header.logo-left .grid-wrapper h1 {
width: 100%;
}
main #page-container .page-header.logo-left .grid-wrapper .logo {
grid-column: 1;
main #page-container .page-header.logo-left .grid-wrapper p {
margin: 0;
main #page-container .page-header.logo-left .grid-wrapper h1 {
padding: 0 20px;
}
main #page-container .page-header.logo-left .grid-wrapper .logo {
padding: 0 20px;
}
}
main #page-container .page-philo {
background-image: url("/assets/images/wallpaper_binary.png");
padding: 120px 30px;
}
main #page-container .page-philo p {
width: 100%;
max-width: 600px;
font-size: 18px;
text-align: center;
font-style: italic;
font-weight: bold;
}
main #page-container .page-philo p * {
}
main #page-container .page-contents-center {
width: 1300px;
max-width: 100%;
@media screen and (max-width: 1300px) {
main #page-container .page-contents-center {
padding: 20px 20px 0;
}
}
main #page-container h2.page-section-title {
color: #4baabb;
padding: 20px 0 10px;
width: 1300px;
max-width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 1300px) {
main #page-container h2.page-section-title {
padding: 20px 20px 0;
}
}
main #page-container #home-page {
display: flex;
flex-direction: column;
}
main #page-container #home-page .section-title {
padding: 10px;
margin: 0;
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
main #page-container #home-page .page-header .philo-bubbles {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 40px;
margin: 30px 20px;
}
@media screen and (max-width: 780px) {
main #page-container #home-page .page-header .philo-bubbles {
gap: 20px;
}
}
main #page-container #home-page .page-header .philo-bubbles li {
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background-color: #d4d9dd;
width: 100px;
height: 100px;
}
main #page-container #home-page .page-header .philo-bubbles li * {
color: #6b7880;
}
@media screen and (max-width: 560px) {
main #page-container #home-page .page-header .philo-bubbles li {
width: 75px;
height: 75px;
}
main #page-container #home-page .page-header .philo-bubbles li * {
font-size: 12px;
}
}
main #page-container #home-page .page-header .philo-bubbles li:first-child {
background-color: #6b7880;
}
main #page-container #home-page .page-header .philo-bubbles li:first-child * {
color: white;
}
main #page-container #home-page .page-header .philo-bubbles li:last-child {
background-color: #35393c;
}
main #page-container #home-page .page-header .philo-bubbles li:last-child * {
color: #96a5ae;
}
main #page-container #home-page #news .articles-displayer {
main #page-container #home-page #news .articles-displayer .prev-next-buttons {
main #page-container #home-page #news .articles-displayer .prev-next-buttons .prev-btn,
main #page-container #home-page #news .articles-displayer .prev-next-buttons .next-btn {
background: none;
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0;
main #page-container #home-page #news .articles-displayer .prev-next-buttons .prev-btn.disabled,
main #page-container #home-page #news .articles-displayer .prev-next-buttons .next-btn.disabled {
main #page-container #home-page #news .articles-displayer .prev-next-buttons .prev-btn.active,
main #page-container #home-page #news .articles-displayer .prev-next-buttons .next-btn.active {
main #page-container #home-page #news .articles-displayer .prev-next-buttons .prev-btn.active:hover,
main #page-container #home-page #news .articles-displayer .prev-next-buttons .next-btn.active:hover {
main #page-container #home-page #news .articles-displayer .prev-next-buttons .next-btn.active::after {
border-width: 2px 2px 0 0;
width: 8px;
height: 8px;
transform: rotate(45deg);
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main #page-container #home-page #news .articles-displayer .prev-next-buttons .prev-btn.active::before {
border-width: 2px 2px 0 0;
width: 8px;
height: 8px;
transform: rotate(-135deg);
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main #page-container #home-page #news .articles-displayer article {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto 1fr;
position: relative;
padding-left: 20px;
}
main #page-container #home-page #news .articles-displayer article .date {
grid-column: 1;
grid-row: 1;
text-align: right;
}
main #page-container #home-page #news .articles-displayer article .date time {
color: #6b7880;
font-style: italic;
font-size: 12px;
}
main #page-container #home-page #news .articles-displayer article .title {
main #page-container #home-page #news .articles-displayer article .title h3 {
main #page-container #home-page #news .articles-displayer article .subtitle {
grid-column: 1;
grid-row: 3;
font-style: italic;
font-size: 15px;
}
main #page-container #home-page #news .articles-displayer article .body {
main #page-container #home-page #news .articles-displayer article .image-carousel {
main #page-container #home-page #news .articles-displayer article .image-carousel img {
main #page-container #home-page #news .articles-displayer article.article-placeholder {
main #page-container #home-page #news .articles-displayer article.article-placeholder * {
main #page-container #home-page #news .articles-displayer article.article-placeholder .date {
main #page-container #home-page #news .articles-displayer article.article-placeholder .title {
main #page-container #home-page #news .articles-displayer article.article-placeholder .subtitle {
main #page-container #home-page #news .articles-displayer article {
gap: 5px;
grid-template-columns: 1fr;
grid-template-rows: 300px auto auto auto 1fr;
padding: 0;
}
main #page-container #home-page #news .articles-displayer article .date {
main #page-container #home-page #news .articles-displayer article .title {
main #page-container #home-page #news .articles-displayer article .subtitle {
main #page-container #home-page #news .articles-displayer article .body {
main #page-container #home-page #news .articles-displayer article .image-carousel {
main #page-container #home-page .poles {
display: grid;
main #page-container #home-page .poles .theme-card {
display: flex;
flex-direction: column;
width: 100%;
cursor: pointer;
transition: transform 0.3s;
}
main #page-container #home-page .poles .theme-card .card-img {
width: 100%;
height: 240px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
position: relative;
}
main #page-container #home-page .poles .theme-card .card-img img {
main #page-container #home-page .poles .theme-card .card-title h2 {
margin: 0;
text-align: center;
padding: 10px 20px;
color: #4baabb;
main #page-container #home-page .poles .theme-card .card-description {
main #page-container #home-page .poles .theme-card .card-description p {
main #page-container #home-page .poles .theme-card:hover {
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
main #page-container #home-page .kuadrado-values {
background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 100px 0 120px;
}
main #page-container #home-page .kuadrado-values *:not(a, blue) {
color: #d4d9dd;
}
main #page-container #home-page .kuadrado-values h2 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 0 auto 60px;
width: 120px;
height: 120px;
background-image: url("/assets/images/wallpaper_binary.png");
border-radius: 100%;
color: #72e3f0;
}
main #page-container #home-page .kuadrado-values ul.values-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
main #page-container #home-page .kuadrado-values ul.values-list li {
background-image: url("/assets/images/wallpaper_binary.png");
padding: 30px 20px 40px;
}
main #page-container #home-page .kuadrado-values ul.values-list li h3 {
text-align: center;
}
main #page-container #home-page .kuadrado-values ul.values-list li p {
text-align: justify;
}
main #page-container #home-page #whoami .page-contents-center {
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
}
main #page-container #home-page #whoami .page-contents-center h2 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
width: 220px;
height: 220px;
border-radius: 100%;
padding: 30px;
main #page-container #home-page #whoami .page-contents-center .presentation-card .header {
display: grid;
grid-template-columns: auto 1fr;
gap: 30px;
main #page-container #home-page #whoami .page-contents-center .presentation-card .header .pic {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
}
main #page-container #home-page #whoami .page-contents-center .presentation-card .header .pic img {
width: 150px;
height: auto;
border-radius: 100%;
}
main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text h3 {
main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text h4 {
main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text strong,
main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text h4 {
main #page-container #home-page #whoami .page-contents-center .presentation-card .body p {
font-size: 18px;
font-style: italic;
font-family: serif;
color: #555d61;
}
main #page-container #home-page #whoami .page-contents-center .presentation-card .body p *:not(blue, a) {
@media screen and (max-width: 560px) {
main #page-container #home-page #whoami .page-contents-center .presentation-card .header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
}
main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text {
text-align: center;
}
}
main #page-container #home-page .poles {
grid-template-columns: 1fr;
gap: 40px;
}
main #page-container #home-page .poles .theme-card {
main #page-container #home-page .poles .theme-card .card-img {
main #page-container #home-page .poles .theme-card .card-img img {
main #page-container #home-page .poles .theme-card .card-title h2 {
main #page-container #home-page .poles .theme-card .card-description {
main #page-container #home-page .poles .theme-card:hover {
main #page-container #home-page .kuadrado-values ul.values-list {
grid-template-columns: 1fr;
}
main #page-container #home-page .poles {
main #page-container #home-page .articles-displayer {
padding: 0;
main #page-container #education-page h3.big {
font-size: 30px;
}
main #page-container #education-page .title-banner {
display: flex;
justify-content: flex-end;
flex-direction: column;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
main #page-container #education-page .title-banner.game-banner {
background-image: url("/assets/images/game_studio_banner.png");
}
main #page-container #education-page .title-banner.popu-banner {
background-image: url("/assets/images/popularization_banner.png");
main #page-container #education-page .title-banner h2 {
color: white;
font-size: 2.5em;
margin: 40px;
main #page-container #education-page .special-announcement {
background-color: #ffd000;
}
main #page-container #education-page .special-announcement .page-contents-center {
padding: 0 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100px;
}
main #page-container #education-page .special-announcement .page-contents-center p {
color: #555d61;
font-size: 20px;
font-weight: 600;
margin: 0;
}
main #page-container #education-page .section-contents {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
main #page-container #education-page .section-contents .full-row {
grid-column: 1/span 2;
}
main #page-container #education-page .section-contents .practical-infos {
grid-column: 2;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 40px;
background-image: url("/assets/images/wallpaper_binary_light.png");
}
main #page-container #education-page .section-contents .practical-infos .info-item {
display: flex;
flex-direction: column;
background-color: white;
padding: 20px;
}
main #page-container #education-page .section-contents .practical-infos .info-item strong {
margin-bottom: 10px;
}
main #page-container #education-page .section-contents .practical-infos .info-item span,
main #page-container #education-page .section-contents .practical-infos .info-item a {
font-size: 14px;
}
main #page-container #education-page .section-contents .list-wrapper {
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
display: flex;
flex-direction: column;
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .title {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme img {
width: 100%;
height: auto;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
width: 300px;
height: auto;
max-height: 0;
visibility: hidden;
z-index: 1;
transition: max-height 0.6s;
padding: 20px;
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment * {
color: #6b7880;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
list-style-type: disc;
font-size: 14px;
margin-left: 10px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul li {
color: #6b7880;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme:hover .details {
max-height: 1000px;
visibility: visible;
}
main #page-container #education-page .section-contents .infos-inscriptions {
display: flex;
gap: 40px;
background-image: url("/assets/images/wallpaper_binary_light.png");
}
main #page-container #education-page .section-contents .infos-inscriptions .groups,
main #page-container #education-page .section-contents .infos-inscriptions .pricing {
padding: 20px;
display: flex;
flex-direction: column;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups h3,
main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
border: 1px solid #dde;
border-collapse: collapse;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
border: 1px solid #dde;
padding: 10px 20px;
main #page-container #education-page .section-contents .infos-inscriptions .groups .documents,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents {
margin-top: 20px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links {
display: flex;
gap: 20px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links .download-link,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links .download-link {
border-radius: 4px;
}
main #page-container #education-page .section-contents .teacher {
grid-column: 1/span 2;
background: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
}
main #page-container #education-page .section-contents .teacher .teacher-card {
display: grid;
grid-template-columns: auto 1fr;
width: 100%;
gap: 20px;
padding: 20px;
}
main #page-container #education-page .section-contents .teacher .teacher-card h3 {
margin: 0;
width: 100%;
color: #96a5ae;
grid-column: 1/span 2;
}
main #page-container #education-page .section-contents .teacher .teacher-card .pic img {
width: 100px;
}
main #page-container #education-page .section-contents .teacher .teacher-card .infos-text {
padding: 0 20px;
}
main #page-container #education-page .section-contents .teacher .teacher-card .infos-text h4 {
margin: 0;
font-size: 18px;
}
main #page-container #education-page .section-contents .teacher .teacher-card .infos-text p {
color: #96a5ae;
display: block;
@media screen and (max-width: 900px) {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
width: 100%;