/* RESET */
h1, h2, h3, h4, h5, h6, ul, ol, li , dl, dd, dt {margin: 0;padding: 0;}
ul, ul li, li {list-style: none;}
img {border: 0 none;}
a {text-decoration: none; transition: all 0.5s;}
a:hover {text-decoration: none !important;}
p {margin: 0;padding: 0;line-height: 20px;}
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;transition: all 0.5s;}
.clear {clear: both;}
/* end reset */

@font-face {font-family: "encode100"; src: url("../fonts/Encode_Sans/EncodeSans-Thin.ttf");}
@font-face {font-family: "encode200"; src: url("../fonts/Encode_Sans/EncodeSans-ExtraLight.ttf");}
@font-face {font-family: "encode300"; src: url("../fonts/Encode_Sans/EncodeSans-Light.ttf");}
@font-face {font-family: "encode400"; src: url("../fonts/Encode_Sans/EncodeSans-Regular.ttf");}
@font-face {font-family: "encode500"; src: url("../fonts/Encode_Sans/EncodeSans-Medium.ttf");}
@font-face {font-family: "encode600"; src: url("../fonts/Encode_Sans/EncodeSans-SemiBold.ttf");}
@font-face {font-family: "encode700"; src: url("../fonts/Encode_Sans/EncodeSans-Bold.ttf");}
@font-face {font-family: "encode800"; src: url("../fonts/Encode_Sans/EncodeSans-ExtraBold.ttf");}
@font-face {font-family: "encode900"; src: url("../fonts/Encode_Sans/EncodeSans-Black.ttf");}

@font-face {font-family: "oswald"; src: url("../fonts/Oswald/Oswald-VariableFont_wght.ttf");}

@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello/awesome-entypob3c1.eot?22577642');
    src: url('../fonts/fontello/awesome-entypob3c1.eot?22577642#iefix') format('embedded-opentype'),
         url('../fonts/fontello/awesome-entypob3c1.woff?22577642') format('woff'),
         url('../fonts/fontello/awesome-entypob3c1.ttf?22577642') format('truetype'),
         url('../fonts/fontello/awesome-entypob3c1.svg?22577642#awesome-entypo') format('svg');
    font-weight: normal;
    font-style: normal;
  }

/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(../fonts/material.woff2) format('woff2');
  }
  
  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

:root {
    --albastru: #0f466c; /* 15,70,108 */
    --bleu: #2a9dec; /* 42, 157, 236 */
    --verde: #5fbc4b; /* 95,188,75 */

    --mso: 'Material Symbols Outlined';
    }
   
.demo-icon {
  font-family: "fontello"; font-style: normal; font-weight: normal;
  display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none;
  /* fix buttons height, for twitter bootstrap */ line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */ margin-left: .2em;
  /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
.codesOn .i-name {display: none;}
.codesOn .i-code {display: inline;}
.i-code {display: none;}

* {
    box-sizing: border-box; transition: all 0.5s;
    margin: 0; padding: 0;
    }
button {cursor: pointer;}

/* luat din bootstrap */
@media (min-width: 576px) {
	.container {
		width: 100%; margin: auto;
		max-width: 540px; text-align: left;
	}
}
@media (min-width: 768px) {.container {max-width: 720px;}}
@media (min-width: 992px) {.container {max-width: 960px;}}
@media (min-width: 1200px) {.container {max-width: 1140px;}}
@media (min-width: 1400px) {.container {max-width: 1320px;}}

body {
    background: #fff; color: var(--albastru);
    font-family: "encode400"; 
    font-size: 16px; line-height: 20px;
    margin: 0; padding: 0;
    text-align: center;
    }
.header {
    position: relative;
    min-height: 180px;
    margin: 0 auto;
}
.sigla {
    position: absolute; top: 0; left: 0;
    width: 185px;
}
.sigla img {width: 100%;}

.header-tel {
    position: absolute; top: 19px; right: 250px;
    display: flex; align-items: center;
    font: 16px/18px encode400;
    color: var(--albastru);
}
.header-tel:before {
    content: "phone_callback";
    font: 200 30px/1.2 "Material Symbols Outlined";
    margin: 0 7px 0 0;
}
.header-email {
    position: absolute; top: 19px; right: 400px;
    display: flex; align-items: center;
    font: 16px/18px encode400;
    color: var(--albastru);
}
.header-email:before {
    content: "forward_to_inbox";
    font: 200 30px/1.2 "Material Symbols Outlined";
    margin: 0 7px 0 0;
}
.header-tel:hover, .header-email:hover {opacity: 0.6;}

#cautare {position: absolute; top: 20px; right: 0;}
#cautare form {
    position: relative;
    border-bottom: 1px solid var(--albastru);
    overflow: hidden;
}
#cautare form:after {
    content: ""; display: block; width: 30px; height: 30px;
    position: absolute; top: 0px; right: 0px;
    background: url(../assets/lupa.svg) no-repeat 0 0;
    background-size: 30px;
}
#cautare input {
    border: none; 
    padding: 4px 0;
    font: 14px/18px encode400;
    width: 200px;
}
#cautare input:hover,
#cautare input:focus {
    border: none; outline: 0;
}

#cautare_avans2 {
    position: absolute; top: 50px; right: 0; z-index: 10;
    width: 300px;
    background: #fff;
    box-shadow: 0px 15px 15px 0 rgba(15 70 108 / 30%);
    border-radius: 0 0 5px 5px;
}
#cautare_avans {padding: 10px;}
#cautare_avans2 h2 {
    font: 16px/1.2 encode600;
    margin: 30px 0 10px 0;
}
.cautare_txt {
    display: block;
    font: 14px/1.2 encode500;
    color: var(--albastru);
    padding: 7px 0 7px 18px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}
#cautare_vezi {
    display: block;
    background: var(--albastru); color: #fff;
    border-radius: 5px; border: 0;
    font: 12px/1 encode500;
    text-transform: uppercase;
    padding: 10px; margin: 30px auto 15px auto;
    cursor: pointer; transition: all 0.5s;
}
#cautare_vezi:hover {background: var(--bleu);}

.continut .cautare_txt {
    display: inline-block;
    padding: 7px 0;
    margin: 0 10px 0 0;
}
.continut .cautare_txt:last-child {margin: 0 0 30px 0;}


.but-meniu-mob {display: none;}
.meniu {
    position: absolute; top: 90px; right: 0;
    width: 80%;
    text-align: right;
    border-bottom: 1px solid var(--albastru);
}
.meniu li {
    display: inline-block; position: relative;
    margin: 0 0 0 2px; padding: 0 0 7px 0;
}
.meniu > ul > li > a {
    font: 16px/18px encode400;
    color: var(--albastru);
    border: 1px solid #eee; 
    border-bottom: 1px solid transparent;
    border-radius: 3px 3px 0 0;
    padding: 7px 10px;
}
.meniu > ul > li > a:hover {background: #f6f6f6; border-bottom: 1px solid var(--albastru);}
.meniu > ul > li.stop > a, 
.meniu > ul > li.active > a {
    border: 1px solid var(--albastru); 
    border-bottom: 1px solid #fff;
}

.meniu ul li:hover ul {display: block;}
.meniu ul ul {
    display: none; width: 200px;
    position: absolute; top: 26px; left: 0; z-index: 10;
    background: #fff;
    animation-name: apare;
    animation-duration: 0.3s;
    border: 1px solid var(--albastru); border-top: 1px solid #eee;
    border-radius: 0 0 4px 4px;
    padding: 10px 10px 0 10px;
    text-align: left;
}
.meniu li li {display: block;}
.meniu li li a {
    display: block;
    font: 14px/16px encode400;
    color: var(--albastru);
    border-bottom: 1px solid #eee;
    padding: 3px 0px;
}
.meniu li li:last-child a {border: none;}
.meniu li li a:hover {opacity: 0.6;}
@keyframes apare {
    0%  {opacity: 0;}
    100% {opacity: 1;}
}
.meniu li li.stop2 a {
    font: 15px/16px encode600; letter-spacing: -0.2px;
    border-bottom: 1px solid var(--albastru);
}

.continut {
    position: relative;
    min-height: 500px;
    margin: 0 auto;
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
}
.c-left {width: 71%; text-align: left;}



h1 {
    font: 34px/36px encode300;
    text-align: center;
    margin: 0 0 50px 0;
}
h1 span {color: var(--bleu);}
h1 span:before {
    content: "\f105"; font: 23px fontello;
    margin: 0 13px 0 10px;
}
h2 {
    font: 26px/32px encode300;
    text-align: left;
    margin: 20px 0; padding: 0 0 0 10px;
    border-left: 6px solid var(--bleu);
}

.swiper-container.slider-top {
    width: 100%;
    height: 530px;
    text-align: center;
    padding: 0; margin: 12px 0 0 0;
    background: #ddd;
}
.swiper-container.slider-top img {
    width: 100%; margin: -55px 0 0 0;
}
.swiper-slide {position: relative;}
.ss-text {
    position: absolute; top: 100px; left: 50%;
    display: block;
    text-align: left;
    margin: 0 5% 0 0;
    
}
.ss-text p {font: 24px/32px encode400;}
.ss-negru {
    transform: translateX(-550px); color: var(--albastru);
    /*background: rgba(255,255,255,0.5);
    padding: 20px 40px;
    border-radius: 5px;*/
}

.ss-alb,
.swiper-slide:nth-child(odd) .ss-text {transform: translateX(-50px); color: rgba(255,255,255, 0.8);}

.swiper-slide strong {
    display: block;
    font: 60px/60px encode400; letter-spacing: -2px;
    margin: 0 0 30px 0;
}
.swiper-slide a span {
    display: block; width: 200px; text-align: center;
    margin: 30px 0; padding: 5px 10px;
    border-radius: 5px;
}
.ss-negru span {border: 5px solid rgba(15,70,108, 0.2); background: rgba(255,255,255, 0.6);}

.ss-alb span,
.swiper-slide:nth-child(odd) .ss-text span {
    border: 5px solid rgba(255,255,255, 0.2);
    background: none;
}

.ss-negru:hover span {border: 5px solid rgba(15,70,108, 0.4);}

.ss-alb:hover span,
.swiper-slide:nth-child(odd) .ss-text:hover span {border: 5px solid rgba(255,255,255, 0.4);}

.swiper-button-next,
.swiper-button-prev {color: var(--albastru);}


.home-left {width: 35%; margin: 30px 0;}
.home-left p {font: 16px/24px encode400; text-align: justify; margin: 0 0 18px 0;}
.home-right {width: 62%; margin: 30px 0;}

.vezi {
    display: inline-block;
    border: 1px solid var(--albastru); border-radius: 3px;
    padding: 6px 20px;
    color: var(--albastru);
}
.vezi:hover {opacity: 0.6;}

.home-banner {
    position: relative;
    height: 300px; text-align: center; background: #bfcbdb;
    margin: 0 0 40px 0;
}
.home-banner img {
    height: 100%;
    animation: 1s ease-in-out 0.5s infinite alternate zgalt1;
}
@keyframes zgalt1 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(10px, 0px);}
  }

.home-banner h3 {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-500px, -50%);
    font: 45px/50px encode300; letter-spacing: -1.5px;
    text-align: center;
    display: inline-block; width: 400px;
}
.home-banner a {
    position: absolute; top: 50%; left: 50%;
    transform: translate(100px, -50%);
    font: 45px/50px encode300; letter-spacing: -1.5px;
    text-align: center;
    display: inline-block; width: 400px;
    color: #fff;
}
.home-banner a:hover {opacity: 0.6;}

.contact-linie {
    display: flex; align-items: center;
}
.contact-linie a {color: var(--albastru);}
.contact-linie:hover {color: var(--verde);}
.contact-linie:hover a {color: var(--verde);}
.contact-linie:before {
    font: 300 38px/1.2 "Material Symbols Outlined";
    width: 53px;
    margin: 0 10px 0 0;
}
.contact-adresa:before {content: "location_on";}
.contact-email:before {content: "outgoing_mail";}
.contact-tel:before {content: "call";}
.contact-bus:before {content: "directions_bus";}
.contact-orar:before {content: "calendar_month";}
.contact-director:before {content: "face";}

.citat {
    margin: 70px auto;
    border: 1px solid rgba(15,70,108, 0.2); border-radius: 4px;
    padding: 30px 130px;
}
.citat p {font: 25px/30px encode400; letter-spacing: -0.2px;}
.citat p:before {
    content: "\f10d"; font: 10px fontello;
    margin: 0 5px 0 0;
}
.citat p:after {
    content: "\f10e"; font: 10px fontello;
    margin: 0 0 0 5px;
}
.citat em {
    display: block; margin: 20px 0;
    font: italic 20px/20px encode400;
}

.continut h3 {
    font: 20px/1.2 encode600;
    border-left: 3px solid var(--bleu);
    padding: 0 0 0px 8px;
    margin: 0 0 10px 0;
}

.pdf {
    position: relative;
    padding: 0 0 0 35px;
    color: var(--albastru);
    font: 16px/1.2 encode400;
}
.pdf:before {
    position: absolute; top: -4px; left: 0;
    content: "picture_as_pdf";
    font: 300 30px/1 var(--mso);
}

.chapeau {
    margin: 0 0 40px 0;
    border: 1px solid var(--albastru); border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 10px 15px 0 15px;
    
}
.c-left .chapeau p {font: italic 18px/26px encode300; letter-spacing: 0.2px;}
.chapeau p strong {font: italic 18px/26px encode600; letter-spacing: -0.4px;}
.colu2 {/*column-count: 2; column-gap: 30px;*/ margin: 0 0 20px 0;}

.colu2 ul {padding: 0 0 20px 0;}
.colu2 li {
    display: block;
    position: relative;
    padding: 0 0 6px 13px;
}
.colu2 li:before {
    position: absolute; top: 3px; left: 0;
    content: "\e90a";
    font: 14px fontello;
}

.profesori2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.colu2 ol {padding: 0 0 30px 28px;}
.colu2 ol li {
    list-style: decimal; display: list-item;
    padding: 3px 0px; margin: 5px 0;
}
.colu2 ol li:before {display: none;}
ol li::marker {color: var(--bleu); font: 16px/1.2 encode600;}

.diriginti {column-count: 2; column-gap: 30px;}
.diriginti ol li {
    font: 16px/1.2 encode500;
    border-radius: 5px;
}
.diriginti li span {
    display: inline-block;
    width: 150px;
    background: #eee;
    text-align: center;
    padding: 5px 0;
    border-radius: 5px;
    margin: 0 10px;
    font-family: encode800;
}
.diriginti li:hover {background: antiquewhite;}
.diriginti li:hover span {background: antiquewhite;}
.diriginti li:hover::marker {color: var(--albastru);}

.diriginti-jos {margin: 50px 0;}
.c-left .diriginti-jos p {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 15px 0 15px 50px; margin: 0;
    min-height: 52px;
}
.diriginti-jos .mso {
    position: absolute; top: 4px; left: 0;
    font: 300 40px/1 var(--mso);
    color: var(--bleu);
}
.diriginti-jos strong {font: 16px/1.2 encode500;}
.diriginti-jos a {color: var(--albastru);}
.diriginti-jos a:hover {border-bottom: 1px solid;}

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 0 0 70px 0;
}
.galerie a img {
    width: 100%; height: 252px;
    object-fit: cover; object-position: top;
}
.galerie1 {grid-template-columns: repeat(1, 1fr);}
.galerie2 {grid-template-columns: repeat(2, 1fr);}
.galerie1 a img {height: 400px;}
.galerie2 a img {height: 350px;}

.c-right .galerie {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 0 30px 0;
}
.c-right .galerie a {display: none; margin: 0;}
.c-right .galerie a img {height: 100px;}
.c-right .galerie a:after {display: none;}

.c-right .galerie a:nth-of-type(2) {display: block;}
.c-right .galerie a:nth-of-type(3) {display: block;}

.c-left .noutati .galerie {
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
}
.c-left .noutati .galerie a {display: none;}
.c-left .noutati .galerie a:nth-of-type(1),
.c-left .noutati .galerie a:nth-of-type(2) {display: block;}
.c-left .noutati .noutate {
    border-bottom: 1px dashed;
    margin: 0 0 40px 0;
}


.banner {margin: 0 0 30px 0;}
.banner img {width: 100%; border-radius: 4px;}

.harta {
    width: 100%; height: 450px;
    margin: 0 0 30px 0;
}

.c-left p {
    font: 16px/26px encode400; 
    margin: 0 0 18px 0;
    /*text-align: justify;*/
}

.profi {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; 
    margin: 0 0 40px 0;
}
.prof {width: 24%;}
.prof img {
    width: 100%; height: 250px; object-fit: cover;
    border-radius: 4px;
}
.prof strong {
    display: block;
    font: 16px/18px encode400;
    margin: 7px 0;
}
.prof em {
    display: block;
    font: 14px/16px encode400;
    margin: 3px 0;
    opacity: 0.5;
}

/* Right */
.c-right {width: 25%; text-align: left;}
.c-right .sociale {margin: 0 0 40px 0;}

.sociale a span {display: none;}
.sociale a {display: inline-block; color: var(--albastru); margin: 0 15px 20px 0;}
.sociale a:before {font: 24px fontello;}
.fb:before {content: "\f230";}
.yt:before {content: "\f16a";}
.in:before {content: "\f16d";}
.sociale a:hover {opacity: 0.7;}

.noutati {
    background: rgba(42, 157, 236, 0.05);
    border-radius: 7px;
    padding: 20px 15px; margin: 19px 0 0px 0;
}
.c-left .noutati {margin: 19px 0 50px 0;}

.noutati a {
    position: relative;
    display: block;
    font: 14px/22px encode400; 
    color: var(--albastru);
    margin: 0 0 30px 0;
}
.noutati a.mm {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 20px;
    text-transform: uppercase;
    font: 13px/1.4 encode400;
}
.noutati a.mm:hover {
    background: var(--bleu); border-color: var(--bleu);
    color: #fff;
}
.noutati .noutate-titlu {
    font: 20px/1.4 encode600;
    margin: 0 0 20px 0;
}
/*
.noutati a:after {
    content: "";
    display: block; width: 30%; height: 1px;
    background: var(--albastru);
    margin: 20px 0 30px 0;
}*/
.noutati a strong {
    display: block;
    font: 18px/24px encode400; 
    letter-spacing: 0.2px;
    margin: 0 0 10px 0;
}
.noutati a em {
    display: block;
    font: 12px/14px encode500; 
    margin: 5px 0 10px 0;
    opacity: 0.5;
}

.noutati a em:before {
    content: "\e81f";
    font: 12px fontello;
    margin: 0 6px 0 0;
}
.noutati a p {
    font: 14px/22px encode400; 
}

.noutate-det h2 em {
    display: block;
    font: 12px/14px encode500; 
    margin: 5px 0 10px 0;
    opacity: 0.5;
}
.noutate-det h2 em:before {
    content: "\e81f";
    font: 12px fontello;
    margin: 0 6px 0 0;
}

.tabel-responsive{
    overflow-y: scroll;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th {
    border: 1px solid; padding: 7px;
    background: aliceblue;
    font: 12px/1.2 encode700;
    text-transform: uppercase;
}
td {
    border: 1px solid; padding: 7px;
    font: 12px/1.2 encode500;
}

.info a {
    display: block; position: relative;
    background: rgba(42, 157, 236, 0.8); color: #fff;
    border-radius: 7px;
    padding: 20px 90px 20px 15px; margin: 20px 0;
    font: 16px/20px encode500; 
}
.info a strong {
    display: block;
    font: 16px/20px encode700; 
    margin: 0 0 5px 0;
}
.info a:before {
    content: "school";
    font: 100 78px/1.2 "Material Symbols Outlined";
    position: absolute; top: 50%; right: 15px;
    transform: translateY(-50%);
}
.info a:hover {background: rgba(42, 157, 236, 1);}


.footer {
    position: relative;
    margin: 0 auto;
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    background: rgba(42, 157, 236, 0.2);
    border-radius: 4px;
    margin: 0 auto 40px auto;
}

.footer-meniu {width: 60%; text-align: left; padding: 20px 20px;}
.footer-meniu li {display: inline-block;}
.footer-meniu li:after {
    content: "|";
    padding: 0 5px 0 0;
}
.footer-meniu li a {
    display: inline-block;
    color: var(--albastru);
    text-transform: uppercase;
    font: 12px/14px encode400;
    margin: 0 10px 0 0;
}
.footer-meniu li:last-child:after {display: none;}
.footer-contact {width: 40%; text-align: right; padding: 20px 20px;}
.footer-contact h3 {
    font: 16px/18px encode500;
    margin: 0 0 7px 0;
}
.footer-contact p {
    font: 14px/18px encode400;
}
.footer-contact p a {
    font: 14px/18px encode400;
    color: var(--albastru);
}
.footer a:hover {opacity: 0.6;}