/* - lipsa "height: 100%;" de aici afecteaza inaltimea containerului video de la pornire webpage - preluat din new.css */ html,body{ height: 100%; } body { font-family: 'Lato'; /* Proprietatea overflow-x specifică ce trebuie să facă cu marginile stânga / dreapta ale conținutului - dacă depășește zona de conținut a elementului. */ overflow-x: hidden; } /* start - proprietati in sectiuni */ /* proprietati in sectiuni - se regleaza individual pe fiecare domeniu de latimi de ecrane - in interogarile de mai jos*/ section { /* distanta in px dintre marginea superioara a ecranului (se pare ca de la partea de jos a barei de meniu)si partea superioara a fiecarei sectiuni de pagina web - pentru ecrane late */ /* padding: 5px 0; */ } section h2 { margin: 0; font-size: 2.5em; } /* fondul si culoarea fonturilor in sectiunea success - fara sectiunea header*/ section.success { background: white; color: black; } /* linie orizontala de demarcatie - modificare fata de bootstrap*/ hr { margin-top: 1px; margin-bottom: 3px; border: 0; border-top: 1px solid blue; } /* start - BUTONUL provizoriu pe perioada sarbatorilor de iarna 2023-2024 - vezi si partea de html in index.html */ /* SANTA CLOSE */ /* SANTA CLOSE */ /* final - BUTONUL provizoriu pe perioada sarbatorilor de iarna 2023-2024 - vezi si partea de html in index.html */ /* start - proprietati generale header */ /* final - proprietati generale header */ /* border pentru playerul video */ /* start - date de contact - adresa - nr de telefon - etc*/ .adresa_praxis { color: #708090; /* slategray - specific color */ font-weight: 700; font-size: 1.2em; letter-spacing:1.5px; } .adresa_praxis h3{ color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ font-weight: 700; font-size: 1.3em; letter-spacing:1.5px; } .adresa_praxis_footer { color: red; /* nefolosit - Blau - website specific color */ font-weight: 700; font-size: 1.2em; letter-spacing:1.5px; } .nr_tel_contact { color: #708090; /* slategray - specific color */ font-weight: 700; font-size: 1.2em; letter-spacing:1.5px; padding-bottom: 5px; padding-top: 10px; } .nr_tel_contact_xs { color: #708090; /* slategray - specific color */ font-weight: 700; font-size: 1.4em; letter-spacing:1.5px; padding-bottom: 5px; } .email_praxis a { color: #708090; /* slategray - specific color */ font-weight: 700; font-size: 1.2em; letter-spacing:1.5px; padding-bottom: 10px; text-decoration:none; } /* linie orizontala de demarcatie intre nr de telefon - */ .linie_demarcatie_gri{ width: 240px; padding-top:5px; padding-bottom:5px; border-bottom: 1px solid #E5E4E2; margin: auto; } /* setari text - anfahrt - */ .anfahrt-text { text-align: justify; color: #708090; /* slategray - specific color */ padding: 0px 0px; font-size: 1.2em; letter-spacing: 2px; } .anfahrt-text h3 { text-align: center; color: #708090; /* slategray - specific color */ font-size: 1.3em; font-weight: 700; } /* start - subsol pagina si butoane link - footer */ .subsol-continut { background-color:#233140; /* culoarea de fond a subsolului */ padding-top:10px; } /* banda copyright din footer-below = subsol mai jos */ .subsol-bara-jos { padding: 20px 0; margin-top:20px; background-color: #2554C7; /* Saphire Blue */ } .text-subsol-bara-jos { color: white; letter-spacing:6px; font-size:1.2em; } .page-top-btn{ padding-top:-10px; margin-bottom:-10px; } .page-top-btn a{ color: #e2cd80; /* Beige pe albastru - website specific color */ text-align: center; } .page-top-btn a:hover{ color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } /* textul propriuzis al butonului link */ h2 a { color: #e2cd80; /* Beige pe albastru - website specific color */ font-size: 0.75em; letter-spacing:2px; text-decoration: none; display: inline-block; position: relative; } /* efectul mouseover pe textul butonului link */ h2 a:hover{ color: #6495ed; /* Blau - website specific color */ text-decoration: none; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } /* start - underline link effect */ a.link-effect-underline:after { color: #e2cd80; /* Beige pe albastru - website specific color */ content: ''; position: absolute; left: 0; display: inline-block; height: 0.8em; width: 100%; border-bottom: 1px solid; margin-top: 10px; opacity: 0; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(0,1); transform: scale(0,1); } a.link-effect-underline:hover:after { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } /* setari imagine iconite link-uri subsol - */ .link-img-subsol{ margin-bottom:5px; } /* final - underline link effect */ /* final - subsol pagina si butoane link - footer */ /* start - setari text - impressum page - */ /* start - bara demarcatie titlu impressum - datenschutz - quellen */ .pmd-bara_sectiuni_fond { background-color: #6495ed; /* Blau - website specific color */ width: 100%; /* position: fixed; */ bottom: 0; padding: 4px 0; text-align: center; max-width: 100%; z-index:1000; } .pmd-bara_sectiuni_continut { margin: 0 auto; width: 100%; color:#e2cd80; /* Beige pe albastru - website specific color */ /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Black */ font-size:1.8em; font-weight:bold; letter-spacing:6px; vertical-align:middle; display:inline; } /* final - bara demarcatie titlu impressum - datenschutz - quellen */ .impressum-text h3 { text-align: left; color: #6495ed; /* Blau - website specific color */ font-size: 1.4em; } .impressum-text p { text-align: left; color: grey; /* grey */ padding: 5px 0px; font-size: 1.2em; } .impressum-text strong { text-align: left; color: #6495ed; /* specific color blau */ padding: 5px 0px; font-size: 1.2em; letter-spacing: 2px; } .link_impressum_datenschutz ul li { text-align: left; padding-bottom:20px; font-size: 1.6em; font-weight:bold; letter-spacing: 3px; } /* final - setari text - impressum page - */ /* start - setari text - quellen (sursa de inspiratie) page - */ .quellen-text h3 { text-align: left; color: grey; /* grey */ padding-bottom:10px; font-size: 1.4em; font-weight:bold; } .quellen-text h4{ text-align: left; color: #6495ed; /* specific color blau */ padding-top:10px; font-size: 1.3em; font-weight:bold; letter-spacing: 2px; } .quellen-text p { text-align: left; color: grey; /* grey */ padding: 0px 0px; font-size: 1.2em; } /* final - setari text - quellen (sursa de inspiratie) page - */ /* start - afisare bara scroll la casetele modal */ .modal-dialog, .modal-content{ /* 90% of window height */ height: 91%; color:grey; } /* Necesar pt o mentine colturile rotunde - se foloseste css-ul de mai jos personalizat pentru a inlocui bootstrap css */ .modal-header { background-color: #6495ed; /* specific color blau */ -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } /* Necesar pt o mentine colturile rotunde - se foloseste css-ul de mai jos personalizat pentru a inlocui bootstrap css */ .modal-footer { background-color: white; /* white */ -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .modal-title { color:white; font-size:1.4em; } /* start - modal body - ecrane cu latime mai mari de 360 px - corpul este mai putin inalt deoarece textele din corp au mai putine randuri */ .modal-body { /* 100% = dialog height, 120px = header + footer */ height: calc(100% - 120px); overflow-y: scroll; font-size:1.1em; } /* final - modal body - ecrane cu latime mai mari de 360 px - corpul este mai putin inalt deoarece textele din corp au mai putine randuri */ /* start - modal body - ecrane cu latime mai mica de 360 px - corpul este mai inalt deoarece textele din corp au mai multe randuri */ /* start - Custom, iPhone Retina ; screen < 360 px */ @media only screen and (max-width : 360px) { /* titlul - program de lucru - Behandlungszeiten */ .modal-body { /* 100% = dialog height, 100px = header + footer */ height: calc(100% - 100px); overflow-y: scroll; font-size:1.1em; } } /* final - modal body - ecrane cu latime mai mica de 360 px*/ /* final - afisare bara scroll la casetele modal */ /* setarile specifice pentru butonul btn_qr_code - s-au modificat fata de btn din bootstrap pt ca padding-ul era prea mare - */ /* final - date de contact - adresa - nr de telefon - etc*/ /* start - tabelul cu programul de lucru - din modal si de pe webpage */ /* titlul - program de lucru - Behandlungszeiten */ .table_prg_lucru > tbody > tr > td > h3{ letter-spacing:1.5px; text-align: center; font-size: 1.3em; color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ font-weight: 700; } /* zilele saptamanii */ .table_prg_lucru > tbody > tr > th{ letter-spacing:1.1px; text-align: left; font-size: 1.2em; color: #708090; /* slategray - specific color*/ font-weight: 700; } /* orele programului de lucru, titlul si nota de jos */ .table_prg_lucru > tbody > tr > td { letter-spacing:1.1px; text-align: center; font-size: 1.2em; color: #708090; /* slategray - specific color*/ font-weight: 700; } .font-modal-maps-from-modal-orar { letter-spacing:1.1px; text-align: center; font-size: 1em; color: #708090; /* slategray - specific color*/ font-weight: 700; text-decoration:none !important; } /* final - tabelul cu programul de lucru*/ /* start - tabelul cu programul de lucru - ecrane cu latime mai mica de 360 px*/ /* start - Custom, iPhone Retina ; screen < 360 px */ @media only screen and (max-width : 360px) { /* titlul - program de lucru - Behandlungszeiten */ .table_prg_lucru > tbody > tr > td > h3{ letter-spacing:1.5px; text-align: center; font-size: 1.2em; color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ font-weight: 700; } /* zilele saptamanii */ .table_prg_lucru > tbody > tr > th{ letter-spacing:1.1px; text-align: left; font-size: 0.8em; color: #708090; /* slategray - specific color*/ font-weight: 700; } /* orele programului de lucru, titlul si nota de jos */ .table_prg_lucru > tbody > tr > td { letter-spacing:1.1px; text-align: center; font-size: 0.7em; color: #708090; /* slategray - specific color*/ font-weight: 700; } .font-modal-maps-from-modal-orar { letter-spacing:1.1px; text-align: center; font-size: 0.9em; color: #708090; /* slategray - specific color*/ font-weight: 700; } } /* final - tabelul cu programul de lucru - ecrane cu latime mai mica de 360 px*/ /* final - tabelul cu programul de lucru - din modal si de pe webpage */ /* cutia cu imaginea logo din bara de meniu - se modifica la anumite interogari media */ .box_cu_logo_pe_navbar { position: absolute; /*left: 20px; /* se modifica la anumite interogari media */ top: 0px; /* background: rgba(100, 149, 237,1); culoarea se stabileste la fiecare interogare media -/* Blau - website specific color - cu posibilitate de transparenta la dimensiuni mai mici de 640px*/ /* stvuire - sa fie deasupra barei de meniu */ z-index: 3000; } /* imaginea logo din cutia de mai sus din bara de meniu - atentie: trebuie sa ramana la 50px pt ca altfel, la ecrane de telefon apare un mic salt deranjant*/ /* bara de navigatie are o inaltime de 56 px */ /* bara de navigatie are o inaltime de 56 px - Atentie: setare identica pt inaltime si in index.html*/ .logo_in_box_pe_navbar { height:56px; } /* cutia cu imagini icon de pe zona imgfade */ .box_icon_pe_imgfade { position: absolute; left: 20px; top: 200px; background: rgba(21, 137, 255,0); /* Dodger Blue cu transparenta maxima- */ /* stvuire - sa fie deasupra barei de meniu */ z-index: 3000; } /* imaginea logo din cutia de mai sus din bara de meniu */ .icon_in_box_pe_imgfade { height:40px; padding-left:20px; } /* start - efecte imagini LEISTUNGEN*/ /* final - efecte imagini LEISTUNGEN */ /* start - efecte imagini TEAM */ /* final - efecte imagini TEAM */ /* start - bara demarcatie sectiuni webpage */ /* start - bara demarcatie sectiuni webpage */ /* start - bara sub imagini TEAM */ /* final - bara sub imagini TEAM */ /* start - bara sub imagini Leistungen */ /* final - bara sub imagini Leistungen */ /* start - bara sub imagini STRASSE-FIRMA */ /* final - bara sub imagini STRASSE-FIRMA */ /*bara de meniu inclusiv butonul toggle pentru ecrane cu latime mica */ /* start - adaugat in oct 2022 pentru a face meniul colapsabil la o inaltime de 100% pt a evita aparitia barei scroll - la ecrane inguste */ /* Meniu mobil Bootstrap 3 80% înălțime */ /* https://stackoverflow.com/questions/26660549/bootstrap-3-mobile-menu-100-height */ /* ATENTIE! - trebuie ca inaltimea afisata "height: 260 px;" sa fie modificata manual in functie de numarul de linkuri (randuri daca se colapseaza) din navbar pt a afisa fondul corect si pentru a se potrivi corect inaltimea navbar-collapse*/ .navbar-collapse.collapse.in { max-height: none; height: 270px; } /* final - adaugat in oct 2022 si corectat de la 260px la 270 px in 10.10.2023 pentru a face meniul colapsabil la o inaltime de 100% pt a evita aparitia barei scroll - la ecrane inguste */ /* start - proprietati generale - bara de meniu ------------------------------------------------------------------------------------------------- */ .navbar-custom { /* culoare barei de meniu */ background: #6495ed; /* Blau - website specific color */ /* font-size: 1.3em; font size este diferit pentru fiecare latime de ecran - vezi mai jos*/ border: none; /* daca se doreste cu border se inscrie " border: 2px solid blue;" */ min-height:56px; /* este important sa ramana la 56px exact cat aste si la HOVER */ /* border-radius: 4px; /* rotunjire bordura bara de navigatie - pentru toate dimensiunile de ecran - */ } /* final - proprietati generale - bara de meniu */ /* start - proprietati culori link-uri - bara de meniu */ /* efectuat modificari - se individualizeaza situatiile - s-a modificat ordinea setarilor 1-7 */ .navbar-custom .navbar-nav li a { /* 1. culoare initiala text buton link din bara de meniu */ color: white; /* white */ /* adaugat pmd - oct 2022 - pt a putea scrie cu litere mici iar prima litera sa fie mare */ text-transform: capitalize; /* bordura - conturul textului din navbar */ /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px red; /* Black */ } .navbar-custom .navbar-nav li a:focus, .navbar-custom .navbar-nav li a:active { /* 2. culoare text buton link din bara de meniu dupa press si pana se deplaseaza pagina la sectiunea comandata*/ /* 2. culoare text buton link din bara de meniu dupa press - in cazul folosirii scroll spre alte sectiuni - deci se memoreaza ultima apasare*/ color:white; /* Beige pe albastru - website specific color */ /* fost cyan */ } .navbar-custom .navbar-nav li.active a { /* 3. culoare text si fond buton link din bara de meniu atunci cand sectiunea respectiva paginii web se gaseste in zona de afisare a ecranului*/ color:#e2cd80; /* Beige pe albastru - website specific color */ /* de analizat */ /* ATENTIE - culoarea de fond trebuie lasata aici pt ca altfel vine din bootstrap culoarea gri - mostenita */ /* se va alege o culoare identica cu fondul barei de meniu */ background: #6495ed; /* Blau - website specific color */ } .navbar-custom .navbar-nav li.active a:focus { /* 4. culoare text din bara de meniu - atunci cand sectiunea respectiva paginii web se gaseste in zona de afisare a ecranului - ca urmare a unei comenzi (s-a dat un click pe linkul respectiv deci nu la scroll)*/ color:#e2cd80; /* Beige pe albastru - website specific color */ /* de analizat */ /* ATENTIE - culoarea de fond trebuie lasata aici */ background: #6495ed; /* Blau - website specific color */ } .navbar-custom .navbar-nav li a:hover { /* 5. culoare text buton link din bara de meniu la mouseover*/ color:#e2cd80; /* Beige pe albastru - website specific color */ /* de analizat */ /* tranzitia la culoarea Beige la mouseover*/ -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .navbar-custom .navbar-nav li.active a:hover { /* 6. culoare text bara de meniu - atunci cand sectiunea respectiva paginii web se gaseste in zona de afisare a ecranului - ca urmare a scroll-ului (nu s-a dat un click pe linkul respectiv deci deplasarea s-a efectuat cu scroll)*/ color:#F2BB66; /* Macaroni and Cheese - culoarea putin diferita de Beige pe albastru pentru a se putea diferentia mouseover*/ /* ATENTIE - culoarea de fond trebuie lasata aici */ background: #6495ed; /* Blau - website specific color */ } .navbar-custom .navbar-nav li.active a:active { /* 7. culoare text din bara de meniu - la clik pe link atunci cand sectiunea respectiva paginii web se gaseste in zona de afisare a ecranului */ color:cyan; /* Beige pe albastru - website specific color */ /* fost cyan */ /* ATENTIE - culoarea de fond trebuie lasata aici */ background: #6495ed; /* Blau - website specific color */ } /* final - proprietati culori link-uri - bara de meniu */ /* butonul de colapse menu pt ecrane de telefon - proprietati initiale inainte de prima apasare*/ .navbar-custom .navbar-toggle { border-color: transparent; /* culoarea de fond a butonului MENU - foarte putin diferita de fondul barei de menu*/ background: #157DEC !important; /* Coobalt Blue - si dupa prima apasare - nota: culoarea - gri- vine din bootstrap dar daca se inscrie !important se poate stabili aici culoarea dorita pt fond*/ height:36px; margin-top:10px; } /* butonul de colapse menu pt ecrane de telefon - proprietati la mouseover - au efect doar pana la prima apasare dar efectul revine dupa ce s-a selectat un link*/ .navbar-custom .navbar-toggle:hover { border-color: transparent; /* culoarea de fond a butonului MENU - foarte putin diferita de fondul barei de menu*/ background-color:#82CAFA !important; /* Light Sky Blue - nota: culoarea - gri- vine din bootstrap dar daca se inscrie !important se poate stabili aici culoarea dorita pt fond la hover*/ } /* butonul de colapse menu pt ecrane de telefon - proprietati dupa prima apasare */ .navbar-custom .navbar-toggle:focus { border-color: transparent; /* culoarea de fond a butonului MENU - foarte putin diferita de fondul barei de menu*/ background-color:#157DEC !important; /* Coobalt Blue - si dupa prima apasare - nota: culoarea - gri- vine din bootstrap dar daca se inscrie !important se poate stabili aici culoarea dorita pt fond*/ } /* final - SETARI GENERALE pentru toate latimile de ecran - casetele de sigla si de meniu suprapuse pe imagefade din header - */ /* ======================================================================================================================================================= */ /* start - pentru ecrane xs <= 359 px - reglajul precis se face pt 320px pt ca e mai uzual - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu =============== */ @media (max-width: 359px) { /* cutia cu imaginea logo din bara de meniu - cu setari diferite de background pt ecrane mai mici de 640 px*/ .box_cu_logo_pe_navbar { background: rgba(100, 149, 237,0.2); /* Blau - website specific color - cu posibilitate de transparenta la dimensiuni mai mici de 640px*/ left: 1px; /* se modifica la anumite interogari media */ } /* 01 a - setari pentru meniu nederulat - starea la deschiderea paginii web - cu meniul mai jos - */ .navbar-custom { /* pozitionarea initiala pe verticala (la deschiderea paginii web) a barei de meniu si durata tranzitiei*/ /* pozitia JOS a barei de meniu */ margin-top: 50px; font-size: 1em; /*font size este diferit pentru fiecare latime de ecran - vezi mai jos*/ /* culoare barei de meniu in pozitia JOS */ background: rgba(100, 149, 237,0.1); /* Blau - website specific color - cu transparenta - pt ca initial bara de meniu se gaseste mai jos cu 50px suprapusa peste imgfade */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 01 b - pozitionarea normala pe verticala(dupa derularea in jos a sectiuniilor paginii web) a barei de meniu - de fapt se deplaseaza in sus si face sa dispara imaginea combinata cu logo-ul si motto-ul firmei*/ .navbar-custom.affix { /* pozitia SUS a barei de meniu */ margin-top: 0px; /* variabila cu domeniul interogarii media */ /* culoare barei de meniu in pozitia SUS */ background: #6495ed; /* Blau - website specific color - fara transparenta - pt ca initial bara de meniu a fost mai jos cu 50px suprapusa peste imgfade - acum se ridica la normal */ } /* 01 - setari de font - butoanele link din bara de meniu - fara affix - */ .navbar-custom .navbar-nav { font-size: 1.4em; /* marimea literelor */ font-weight: bold; /* grosimea literelor */ letter-spacing: 5px; /* distanta dintre litere */ } /* acest grup foloseste aceasta culoare pentru background la text btn menu pentru a avea contrast - bara de meniu este jos si altfel background-ul ar fi transparent */ .navbar-custom .navbar-nav li a:hover { background: #157DEC; /* Coobalt Blue */ } /* 02 a - starea initiala text buton link din bara de meniu - cu meniul mai jos - */ .navbar-custom .navbar-nav li a { padding-top:10px; /* pozitionarea pe verticala a textului din butoanele link - si distanta pe verticala la meniul colapsat dintre linkuri -*/ padding-left:10px; /* distanta pe orizontala dintre butoanele link - si distanta din stanga si butoanele link la meniul colapsat -*/ /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */ background: #6495ed; /* se foloseste aceasta culoare pentru background la text pentru a avea contrast - bara de meniu este jos si altfel background-ul ar fi transparent */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 02 b - starea text buton link din bara de meniu - cu meniul in pozitie normala - */ .navbar-custom.affix .navbar-nav li a { text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Black */ } /* start - text anunt mesaj deschidere praxis - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ /* start - text filozofie - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ } /* final - pentru ecrane xs <= 359 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu =============== */ /* ======================================================================================================================================================= */ /* ======================================================================================================================================================= */ /* start - pentru ecrane xs => 360 and <= 639 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu ============ */ @media only screen and (min-width:360px) and (max-width:639px) { /* cutia cu imaginea logo din bara de meniu - cu setari diferite de background pt ecrane mai mici de 640 px*/ .box_cu_logo_pe_navbar { background: rgba(100, 149, 237,0.2); /* Blau - website specific color - cu posibilitate de transparenta la dimensiuni mai mici de 640px*/ left: 2px; /* se modifica la anumite interogari media */ } /* 01 a - setari pentru meniu nederulat - starea la deschiderea paginii web - cu meniul mai jos - */ .navbar-custom { /* pozitionarea initiala pe verticala (la deschiderea paginii web) a barei de meniu si durata tranzitiei*/ /* pozitia JOS a barei de meniu */ margin-top: 50px; font-size: 1em; /*font size este diferit pentru fiecare latime de ecran - vezi mai jos*/ /* culoare barei de meniu in pozitia JOS */ background: rgba(100, 149, 237,0.1); /* Blau - website specific color - cu transparenta - pt ca initial bara de meniu se gaseste mai jos cu 50px suprapusa peste imgfade */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 01 b - pozitionarea normala pe verticala(dupa derularea in jos a sectiuniilor paginii web) a barei de meniu - de fapt se deplaseaza in sus si face sa dispara imaginea combinata cu logo-ul si motto-ul firmei*/ .navbar-custom.affix { /* pozitia SUS a barei de meniu */ margin-top: 0px; /* variabila cu domeniul interogarii media */ /* culoare barei de meniu in pozitia SUS */ background: #6495ed; /* Blau - website specific color - fara transparenta - pt ca initial bara de meniu a fost mai jos cu 50px suprapusa peste imgfade - acum se ridica la normal */ } /* 01 - setari de font - butoanele link din bara de meniu - fara affix - */ .navbar-custom .navbar-nav { font-size: 1.4em; /* marimea literelor */ font-weight: bold; /* grosimea literelor */ letter-spacing: 5px; /* distanta dintre litere */ } /* acest grup foloseste aceasta culoare pentru background la text btn menu pentru a avea contrast - bara de meniu este jos si altfel background-ul ar fi transparent */ .navbar-custom .navbar-nav li a:hover { background: #157DEC; /* Coobalt Blue */ } /* 02 a - starea initiala text buton link din bara de meniu - cu meniul mai jos - */ .navbar-custom .navbar-nav li a { padding-top:10px; /* pozitionarea pe verticala a textului din butoanele link - si distanta pe verticala la meniul colapsat dintre linkuri -*/ padding-left:10px; /* distanta pe orizontala dintre butoanele link - si distanta din stanga si butoanele link la meniul colapsat -*/ /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */ background: #6495ed; /* se foloseste aceasta culoare pentru background la text btn menu pentru a avea contrast - bara de meniu este jos si altfel background-ul ar fi transparent */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 02 b - starea text buton link din bara de meniu - cu meniul in pozitie normala - */ .navbar-custom.affix .navbar-nav li a { /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Black */ } /* start - text anunt mesaj deschidere praxis - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ /* start - text filozofie - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ } /* final - pentru ecrane xs => 360 and <= 639 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu ============ */ /* ======================================================================================================================================================= */ /* ======================================================================================================================================================= */ /* start - pentru ecrane xs => 640 and <= 767 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu =============== */ @media only screen and (min-width:640px) and (max-width:767px) { /* cutia cu imaginea logo din bara de meniu - cu setari diferite de background pt ecrane mai mici de 640 px*/ .box_cu_logo_pe_navbar { background: rgba(100, 149, 237,0.9); /* Blau - website specific color - cu posibilitate de transparenta la dimensiuni mai mici de 640px*/ left: 10px; /* se modifica la anumite interogari media */ } /* 01 a - setari pentru meniu nederulat - starea la deschiderea paginii web - cu meniul mai jos - */ .navbar-custom { /* pozitionarea initiala pe verticala (la deschiderea paginii web) a barei de meniu si durata tranzitiei*/ /* pozitia JOS a barei de meniu */ margin-top: 50px; font-size: 1em; /*font size este diferit pentru fiecare latime de ecran - vezi mai jos*/ /* culoare barei de meniu in pozitia JOS */ background: rgba(100, 149, 237,0.1); /* Blau - website specific color - cu transparenta - pt ca initial bara de meniu se gaseste mai jos cu 50px suprapusa peste imgfade */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 01 b - pozitionarea normala pe verticala(dupa derularea in jos a sectiuniilor paginii web) a barei de meniu - de fapt se deplaseaza in sus si face sa dispara imaginea combinata cu logo-ul si motto-ul firmei*/ .navbar-custom.affix { /* pozitia SUS a barei de meniu */ margin-top: 0px; /* variabila cu domeniul interogarii media */ /* culoare barei de meniu in pozitia SUS */ background: #6495ed; /* Blau - website specific color - fara transparenta - pt ca initial bara de meniu a fost mai jos cu 50px suprapusa peste imgfade - acum se ridica la normal */ } /* 01 - setari de font - butoanele link din bara de meniu - fara affix - */ .navbar-custom .navbar-nav { font-size: 1.4em; /* marimea literelor */ font-weight: bold; /* grosimea literelor */ letter-spacing: 5px; /* distanta dintre litere */ } /* acest grup foloseste aceasta culoare pentru background la text btn menu pentru a avea contrast - bara de meniu este jos si altfel background-ul ar fi transparent */ .navbar-custom .navbar-nav li a:hover { background: #157DEC; /* Coobalt Blue */ } /* 02 a - starea initiala text buton link din bara de meniu - cu meniul mai jos - */ .navbar-custom .navbar-nav li a { padding-top:10px; /* pozitionarea pe verticala a textului din butoanele link - si distanta pe verticala la meniul colapsat dintre linkuri -*/ padding-left:10px; /* distanta pe orizontala dintre butoanele link - si distanta din stanga si butoanele link la meniul colapsat -*/ /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Black */ background: #6495ed; /* se foloseste aceasta culoare pentru background la text pentru a avea contrast - bara de meniu este jos si altfel background-ul ar fi transparent */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 02 b - starea text buton link din bara de meniu - cu meniul in pozitie normala - */ .navbar-custom.affix .navbar-nav li a { /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Black */ } /* start - text anunt mesaj deschidere praxis - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ /* start - text filozofie - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ } /* final - pentru ecrane xs => 640 and <= 767 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu ============= */ /* ======================================================================================================================================================= */ /* ======================================================================================================================================================= */ /* start - pentru ecrane sm => 768 and <= 991 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu ============ */ @media only screen and (min-width:768px) and (max-width:991px) { /* cutia cu imaginea logo din bara de meniu - cu setari diferite de background pt ecrane mai mici de 640 px*/ .box_cu_logo_pe_navbar { background: rgba(100, 149, 237,0.8); /* Blau - website specific color - cu posibilitate de transparenta la dimensiuni mai mici de 640px*/ left: 20px; /* se modifica la anumite interogari media */ } /* 01 a - setari pentru meniu nederulat - starea la deschiderea paginii web - cu meniul mai jos - */ .navbar-custom { /* pozitionarea initiala pe verticala (la deschiderea paginii web) a barei de meniu si durata tranzitiei*/ /* pozitia JOS a barei de meniu */ margin-top: 50px; font-size: 1em; /*font size este diferit pentru fiecare latime de ecran - vezi mai jos*/ /* culoare barei de meniu in pozitia JOS */ background: rgba(100, 149, 237,0.1); /* Blau - website specific color - cu transparenta - pt ca initial bara de meniu se gaseste mai jos cu 50px suprapusa peste imgfade */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 01 b - pozitionarea normala pe verticala(dupa derularea in jos a sectiuniilor paginii web) a barei de meniu - de fapt se deplaseaza in sus si face sa dispara imaginea combinata cu logo-ul si motto-ul firmei*/ .navbar-custom.affix { /* pozitia SUS a barei de meniu */ margin-top: 0px; /* variabila cu domeniul interogarii media */ /* culoare barei de meniu in pozitia SUS */ background: #6495ed; /* Blau - website specific color - fara transparenta - pt ca initial bara de meniu a fost mai jos cu 50px suprapusa peste imgfade - acum se ridica la normal */ } /* 01 - setari de font - butoanele link din bara de meniu - fara affix - */ .navbar-custom .navbar-nav { font-size: 1.4em; /* marimea literelor */ font-weight: bold; /* grosimea literelor */ letter-spacing: 5px; /* distanta dintre litere */ } /* acest grup foloseste aceasta culoare pentru background la text btn menu pentru a avea contrast - bara de meniu este jos si altfel background-ul ar fi transparent */ .navbar-custom .navbar-nav li a:hover { background: #157DEC; /* Coobalt Blue */ } /* 02 a - starea initiala text buton link din bara de meniu - cu meniul mai jos - */ .navbar-custom .navbar-nav li a { padding-top:10px; /* pozitionarea pe verticala a textului din butoanele link - si distanta pe verticala la meniul colapsat dintre linkuri -*/ padding-left:10px; /* distanta pe orizontala dintre butoanele link - si distanta din stanga si butoanele link la meniul colapsat -*/ /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Black */ background: #6495ed; /* se foloseste aceasta culoare pentru background la text pentru a avea contrast - bara de meniu este jos si altfel background-ul ar fi transparent */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 02 b - starea text buton link din bara de meniu - cu meniul in pozitie normala - */ .navbar-custom.affix .navbar-nav li a { /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Black */ } /* start - text filozofie - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ } /* final - pentru ecrane sm => 768 and <= 991 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu =========== */ /* ======================================================================================================================================================= */ /* ======================================================================================================================================================= */ /* start - pentru ecrane md => 992 and <= 1199 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu ============ */ @media only screen and (min-width:992px) and (max-width:1199px) { /* cutia cu imaginea logo din bara de meniu - cu setari diferite de background pt ecrane mai mici de 640 px*/ .box_cu_logo_pe_navbar { background: rgba(100, 149, 237,0.8); /* Blau - website specific color - cu posibilitate de transparenta la dimensiuni mai mici de 640px*/ left: 20px; /* se modifica la anumite interogari media */ } /* 01 a - setari pentru meniu nederulat - starea la deschiderea paginii web - cu meniul mai jos - */ .navbar-custom { /* pozitionarea initiala pe verticala (la deschiderea paginii web) a barei de meniu si durata tranzitiei*/ /* pozitia JOS a barei de meniu */ margin-top: 50px; font-size: 1.2em; /*font size este diferit pentru fiecare latime de ecran - vezi mai jos*/ /* culoare barei de meniu in pozitia JOS */ background: rgba(100, 149, 237,0.4); /* Blau - website specific color - cu transparenta - pt ca initial bara de meniu se gaseste mai jos cu 50px suprapusa peste imgfade */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 01 b - pozitionarea normala pe verticala(dupa derularea in jos a sectiuniilor paginii web) a barei de meniu - de fapt se deplaseaza in sus si face sa dispara imaginea combinata cu logo-ul si motto-ul firmei*/ .navbar-custom.affix { /* pozitia SUS a barei de meniu */ margin-top: 0px; /* variabila cu domeniul interogarii media */ /* culoare barei de meniu in pozitia SUS */ background: #6495ed; /* Blau - website specific color - fara transparenta - pt ca initial bara de meniu a fost mai jos cu 50px suprapusa peste imgfade - acum se ridica la normal */ } /* 01 - setari de font - butoanele link din bara de meniu - fara affix - */ .navbar-custom .navbar-nav { font-size: 1.1em; /* marimea literelor */ font-weight: bold; /* grosimea literelor */ letter-spacing: 3px; /* distanta dintre litere */ } /* 02 - setari de spatiere intre textele link din navbar */ .navbar-custom .navbar-nav li a { padding-top:20px; /* pozitionarea pe verticala a textului din butoanele link - si distanta pe verticala la meniul colapsat dintre linkuri -*/ padding-left:10px; /* distanta pe orizontala dintre butoanele link - si distanta din stanga si butoanele link la meniul colapsat -*/ } /* start - text anunt mesaj deschidere praxis - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ /* start - text filozofie - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ } /* final - pentru ecrane md => 992 and <= 1199 px - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu =========== */ /* ======================================================================================================================================================= */ /* ======================================================================================================================================================= */ /* start - pentru ecrane lg => 1200 - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu ============ */ @media only screen and (min-width:1200px) { /* cutia cu imaginea logo din bara de meniu - cu setari diferite de background pt ecrane mai mici de 640 px*/ .box_cu_logo_pe_navbar { background: rgba(100, 149, 237,0.8); /* Blau - website specific color - cu posibilitate de transparenta la dimensiuni mai mici de 640px*/ left: 20px; /* se modifica la anumite interogari media */ } /* 01 a - setari pentru meniu nederulat - starea la deschiderea paginii web - cu meniul mai jos - */ .navbar-custom { /* pozitionarea initiala pe verticala (la deschiderea paginii web) a barei de meniu si durata tranzitiei*/ /* pozitia JOS a barei de meniu */ margin-top: 50px; font-size: 1.3em; /*font size este diferit pentru fiecare latime de ecran - vezi mai jos*/ /* culoare barei de meniu in pozitia JOS */ background: rgba(100, 149, 237,0.4); /* Blau - website specific color - cu transparenta - pt ca initial bara de meniu se gaseste mai jos cu 50px suprapusa peste imgfade */ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } /* 01 b - pozitionarea normala pe verticala(dupa derularea in jos a sectiuniilor paginii web) a barei de meniu - de fapt se deplaseaza in sus si face sa dispara imaginea combinata cu logo-ul si motto-ul firmei*/ .navbar-custom.affix { /* pozitia SUS a barei de meniu */ margin-top: 0px; /* variabila cu domeniul interogarii media */ /* culoare barei de meniu in pozitia SUS */ background: #6495ed; /* Blau - website specific color - fara transparenta - pt ca initial bara de meniu a fost mai jos cu 50px suprapusa peste imgfade - acum se ridica la normal */ } /* 01 - setari de font - butoanele link din bara de meniu - fara affix - */ .navbar-custom .navbar-nav { font-size: 1.1em; /* marimea literelor */ font-weight: bold; /* grosimea literelor */ letter-spacing: 3px; /* distanta dintre litere */ } /* 02 - setari de spatiere intre textele link din navbar */ .navbar-custom .navbar-nav li a { padding-top:20px; /* pozitionarea pe verticala a textului din butoanele link - si distanta pe verticala la meniul colapsat dintre linkuri -*/ padding-left:10px; /* distanta pe orizontala dintre butoanele link - si distanta din stanga si butoanele link la meniul colapsat -*/ } /* start - text anunt mesaj deschidere praxis - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ /* start - text filozofie - vezi font-size si text-align diferite pt diferite dimensiuni de ecran */ } /* final - pentru ecrane lg => 1200 and - tranzitia efecte bara de meniu si pozitionare verticala corecta header sub bara de meniu =========== */ /* ======================================================================================================================================================= */ /* final - adaugate suplimentar de pm */ /* stilul initial al butoanelor de tip facebook */ /* start btn-success - este butonul "send mesage" din pagina CONTACT de clarificat daca se va mai folosi */ /*========== start - css style adaugat pentru noua webpage combinata ==========*/ /* ===================================================================================================================================================================== */ /* ===================================================================================================================================================================== */ /*========== start - Media Query Non-Mobile First Method ==========*/ /* start - centreaza orizontal si vertical coloanele si continutul acestora in boostrap 3 */ [class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; } /* start - centreaza orizontal si vertical coloanele si continutul acestora in boostrap 3 */ /* start - flag button - change language ----------------------------------------------------------------------------------------------------------- */ /* necesar pentru alinierea flags din navbar - adus din new.css */ .navbar-right li a { padding-left:10px; padding-right:10px; padding-bottom:10px; padding-top:10px; } .flags { margin-top:12px; float: left; } .flags ul { list-style-type: none; padding: 0; margin: 0; } .flags ul li { display: inline; } /* efect la mouse over pe stegulete */ .pic { background-color: transparent; } .pic img { transition: 300ms; } .pic:hover img { opacity: 0.6; } /* final - flag button - change language ----------------------------------------------------------------------------------------------------------- */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 1. start - randul header din top page cu date rapide de contact ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ header-up-pmd { display: block; background-color:ghostwhite; height:45px; } header-up-pmd .row { margin: 12px 0 8px; padding-bottom: 8px; } header-up-pmd .col-header-contact-left { float: left; margin-left: 50px; margin-top:-10px; } header-up-pmd .col-header-contact-right { float: right; margin-right: 50px; margin-top:-10px; } /* primul rand cu date de contact */ .font-header-up-pmd { color: #157DEC !important; /* Coobalt Blue - si dupa prima apasare - nota: culoarea - gri- vine din bootstrap dar daca se inscrie !important se poate stabili aici /* #6495ed; /* Blau - website specific color */ font-weight: 700; font-size: 1.1em; letter-spacing:1.8px; padding-bottom: 5px; padding-top: 10px; } header-up-pmd .col-header-contact-left a:hover, header-up-pmd .col-header-contact-left a:focus { text-decoration: none; color: #0000CD !important; /* medium blue */ } header-up-pmd .col-header-contact-right a:hover, header-up-pmd .col-header-contact-right a:focus { text-decoration: none; color: #0000CD !important; /* medium blue */ } /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { header-up-pmd .col-header-contact-right { display: none; } .font-header-up-pmd { font-size: 1.1em; } } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { header-up-pmd .col-header-contact-right { display: none; } .left-termine { display: none; } /* primul rand cu date de contact */ .font-header-up-pmd { font-size: 1em; } } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { header-up-pmd .col-header-contact-right { display: none; } .left-address { display: none; } .left-termine { display: none; } .font-header-up-pmd { font-size: 1.1em; } } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { header-up-pmd .col-header-contact-right { display: none; } header-up-pmd .col-header-contact-left { float: left; margin-left: 30px; margin-top:-10px; } .left-address { display: none; } .left-termine { display: none; } .font-header-up-pmd { font-size: 0.9em; } } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { header-up-pmd .col-header-contact-right { display: none; } .left-address { display: none; } .left-termine { display: none; } /* primul rand cu date de contact */ .font-header-up-pmd { font-size: 0.7em; } } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 1. final - randul header din top page cu date rapide de contact ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 2. start - container video - pornire webpage ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* necesar pt ca partea de sus a containerului sa fie exact la acelas nivel cu partea de sus a navbar */ .pozitie-container-video { margin-top: -11px; } .container-start-video { height: calc(82% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ /* 56px reprezinta inaltimea header-up (egala si cu inaltimea navbar) */ /* 82% este inaltimea eficientizata a containerului video pentru un laptop cu w=1536px si h=722px */ width: 100%; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; background-color:rgba(10,10,10,0.4); border: 1px solid #fff; /* Blau - website specific color */ border-radius: 0 0 0px 0px; /* nu se mai rotunjeste fereastra de vizualizare video - stanga jos si dreapta jos cu cate 10px*/ } /* incadrarea clipului video in fereastra de vizualizare */ .start-video { position: absolute; top: 10%; left: 40%; width: auto; height: auto; z-index: -1; transform: translateX(-40%) translateY(-10%); min-width: 100%; min-height: 100%; } /* final - butonul deschidere modal cu video si auto-play de pe sectiunea video-start - de pe codepen */ /* start - containerul video din modalul video */ .container-modal-video { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .modal-video-title { font-size: 1.2em; font-weight: 700; letter-spacing: 3px; color: white; } /* Then style the iframe to fit in the container div with full height and width */ .responsive-video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /* final - containerul video din modalul video */ /* final - butonul deschidere modal cu video si auto-play de pe sectiunea video-start - de pe codepen */ /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { .container-start-video { height: calc(76% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ /* 56px reprezinta inaltimea header-up (egala si cu inaltimea navbar) */ /* 76% este inaltimea eficientizata a containerului video pentru o tableta (landscape) cu w=...px si h=...px */ } /* incadrarea clipului video in fereastra de vizualizare */ .start-video { height: auto; } } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { .container-start-video { height: calc(84% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ /* 56px reprezinta inaltimea header-up (egala si cu inaltimea navbar) */ /* 72% este inaltimea eficientizata a containerului video pentru o tableta (landscape) cu w=...px si h=...px */ } /* incadrarea clipului video in fereastra de vizualizare */ .start-video { height: calc(84% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ } } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { .container-start-video { height: calc(67% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ /* 56px reprezinta inaltimea header-up (egala si cu inaltimea navbar) */ /* 65% este inaltimea eficientizata a containerului video pentru o tableta (portrait) cu w=534px si h=726px */ } /* incadrarea clipului video in fereastra de vizualizare */ .start-video { height: calc(67% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ } } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { .container-start-video { height: calc(62% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ /* 56px reprezinta inaltimea header-up (egala si cu inaltimea navbar) */ /* 62% este inaltimea eficientizata a containerului video pentru un smartphone (portrait) cu w=412px si h=750px */ } /* incadrarea clipului video in fereastra de vizualizare */ .start-video { height: calc(62% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ } } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { .container-start-video { height: calc(62% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ /* 56px reprezinta inaltimea header-up (egala si cu inaltimea navbar) */ /* 62% este inaltimea eficientizata a containerului video pentru un smartphone (portrait) cu w=347px si h=649px */ } /* incadrarea clipului video in fereastra de vizualizare */ .start-video { height: calc(62% - 56px); /* variabil cu dimensiunea ecranului - inaltimea ferestrei de vizualizare (container-video) video */ } } /* final - Custom, iPhone Retina ; screen < 360px*/ /* start - exceptii - Dacă fereastra browserului este de 480px (se ia in considerare in afisare cu telefonul in portrait) sau mai mică dar telefonul este pozitionat in landscape*/ /* de exemplu: Galaxy S21 Media Query for landscape orientation: */ /* final - exceptii - Dacă fereastra browserului este de 480px (se ia in considerare in afisare cu telefonul in portrait) sau mai mică dar telefonul este pozitionat in landscape*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 2. final - container video - pornire webpage ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 3. start - text si btn-play peste container video - pornire webpage ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - butonul deschidere modal cu video si auto-play de pe sectiunea video-start - de pe codepen */ .btn-play { /* corpul butonului si culoarea textului interior */ box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 1px solid #e74c3c; /* border in partea de jos a btn */ border-radius: 0.5em; padding: 6px 6px; /* padding intre text si marginea btn */ text-decoration: none; border-color: #fff; color: #fff; /* culoarea textului si a iconului play*/ box-shadow: 0 0 1px 0 #fff inset, 0 0 4px 1px #fff; /* se poate elimina pt evitarea afisarii gradient border */ margin:0 auto 0px; /* centrarea butonului */ transition: box-shadow 600ms ease-in-out, color 600ms ease-in-out;/* tranzitia hover si la revenire hover */ opacity:0.9; font-size:1em; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); /* contur pentru text */ letter-spacing:3px; } .btn-play:hover { box-shadow: 0 0 40px 40px #3498db inset; color: #fff; /* culoarea textului si a iconului play la hover*/ opacity:0.6; } /* final - butonul deschidere modal cu video si auto-play de pe sectiunea video-start - de pe codepen */ /* adaugat pmd - salutul conditionat de timpul zilei*/ #buna-conditionat { font-size:2em; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); letter-spacing:1.7px; } .text-over-video-start { justify-content: center; text-align: center; /* pozitia finala (dupa animatia slidefade a text-over-video-start (btn-play + text) */ padding-bottom:30px; padding-left:10px; padding-right:10px; } .text-over-video-start-content-area { margin-bottom: 70px; /* pozitia initiala (inainte de animatia slidefade a text-over-video-start */ left: 5%; z-index: 200; color:white; opacity: 0; animation: 1.3s slidefade 1.3s forwards; } .btn-play-over-video-start-content-area { margin-bottom: 100px; /* pozitia initiala (inainte de animatia slidefade a text-over-video-start */ left: 5%; z-index: 200; color:white; opacity: 0; animation: 2s slidefade 2s forwards; } @keyframes slidefade { 100% { opacity: 1; margin: 0; } } /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { font-size-one { font-size:1.2em; } font-size-two { font-size:1.4em; } /* adaugat pmd - salutul conditionat de timpul zilei: Guten Morgen, Guten Tag, Guten Abend, Gute Nacht - vezi scriptul aferent in js */ #buna-conditionat { font-size:1.8em; } } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 3. final - text si btn-play peste container video - pornire webpage ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ========================================================================================================================================================================= */ /* ========================================================================================================================================================================= */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 4. start - section webpage - general style - la fiecare inceput de sectiune ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ .section-padding{ padding: 10px 0; } /* titlul sectiunii - text mare - culoare prima parte - de ex: Unsere Leistungen*/ .section-header{ margin-bottom: 10px; text-align: center; color: #708090; /* slategray */ letter-spacing:1.5px; } /* titlul sectiunii - text mare - prima parte */ .section-header h2 { margin-top: -12px; margin-bottom: 12px; font-size: 2.5em; font-weight: 600; } /* titlul sectiunii - text mare - culoare partea a doua */ .section-header h2 span { color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ } /* comentariul sectiunii - text mic - */ .section-header p { text-align:justify; font-size: 18px !important; font-weight: 500; color: #708090; /* slategray - specific color*/ letter-spacing:1.3px; } /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { /* comentariul sectiunii - text mic - */ .section-header p { text-align:justify; letter-spacing:1.2px; } } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { /* comentariul sectiunii - text mic - */ .section-header p { text-align:justify; letter-spacing:1.2px; } } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { /* comentariul sectiunii - text mic - */ .section-header p { text-align:justify; letter-spacing:1.2px; } } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 4. final - section webpage - general style - la fiecare inceput de sectiune ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ===================================================================================================================================================================== */ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 5. start - box-text-one - text imediat sub container video - pornire webpage - de la "Herzlich Willkommen" pana la "Unsere Praxis" ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ .box-text-one .box-text { padding: 15px; position: relative; overflow: hidden; margin: 0 0 40px 0; background: #1E90FF; /* royalblue - pt diferentiere daca fondul navbar-colapse (fond Blau - website specific color) se suprapune peste acest fond - de analizat */ box-shadow: 0 5px 26px 0 rgba(68, 88, 144, 0.14); transition: all 0.3s ease-in-out; text-align: center; border: 1px solid #fff; border-radius: 10px 10px 0 0; } .box-text-one .title { font-weight: 500; margin-bottom: 15px; font-size: 1.4em; color: white; letter-spacing:1.9px; } .box-text-one .box-text-blue:hover { border-color: #e2cd80; /* Beige pe albastru - website specific color */ } /* start - box-one - box text 1 - adaptat svg dupa modelul recenzii */ .box-one{ /* style box box-one */ /* border-right: 4px solid #6495ed; /* Blau - website specific color - bara verticala partea dreapta*/ padding: 30px 30px 30px 30px; /* 230px este padding left */ margin: 0; overflow: hidden; position: relative; text-align: center; } .box-one-description{/* textul pentru descriere */ /*text-indent: 30px; */ font-size: 1.2em; letter-spacing: 1.2px; color: #708090; /* slategray - specific color*/ line-height: 25px; margin-bottom: 5px; padding-right:10px; text-align: left; /* aici nu se doreste inaltime fixa - nu se mai adauga - adaugat pmd - pt scroll-y si pt a trece description over svg */ /* position: relative; /* Proprietatea z-index este aplicată doar pe elementele poziționate. Adăugarea position: relative;etichetei de paragraf o va aplica corect. */ /* overflow-y: auto; */ /* height: 150px; */ text-align:justify; z-index:99; } .box-one-description-language{/* textul pentru informarea cu limbile vorbite */ /*text-indent: 30px; */ font-size: 1.3em; letter-spacing: 1.3px; color: #2F4F4F; /* new color: darkslategray - */ line-height: 25px; margin-bottom: 10px; padding-right:10px; text-align: left; z-index:99; } .box-one-title{/* titlul */ display: inline-block; font-size: 1.5em; font-weight: 700; letter-spacing: 1px; color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ margin: 0; margin-bottom: 10px; letter-spacing:3px; z-index:99; } /* start - adaugat suplimentar pentru shape-curves la partea de sus a boxului box-one */ .box-one-shape-curves-sus { position: absolute; top: -2px; /* aici se stabileste pozitia pe verticala imediat dupa video-start */ left: 0; line-height: 0; width: 100%; } .box-one-shape-curves-sus svg.curves { position: relative; display: block; width: 100%; height: 250px; } .box-one-shape-curves-sus .curba-a-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; z-index:1; } .box-one-shape-curves-sus .curba-b-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; z-index:1; } /* final - adaugat suplimentar pentru shape-curves la partea de sus a boxului box-one */ /* start - adaugat suplimentar pentru shape-curves la partea de jos a boxului box-one */ .box-one-shape-curves-jos { position: absolute; min-height: 200px; bottom: 0; left: 0; line-height: 0; transform: rotate(180deg); width: 100%; } .box-one-shape-curves-jos svg.curves { position: relative; display: block; width: 100%; height: 300px; transform: rotateY(180deg); } .box-one-shape-curves-jos .curba-a-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; } .box-one-shape-curves-jos .curba-b-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; } /* final - adaugat suplimentar pentru shape-curves la partea de jos a boxului box-one */ /* start - rand cu doua imagini - din sectiunea box-text-one - lor si and */ .two-columns-for-lorand-img { box-sizing: border-box; float: left; width: 40%; /* sub latime de 1200px se vor afisa pe un rand doar coloanele cu foto lor si and pt a evita sa se afiseze foto foarte mari la peste 1200px" */ display: inline-block; } ul{ padding-left: 4%; padding-right: 4%; } /* final - rand cu doua imagini - din sectiunea box-text-one - lor si and */ /*start - underline animated - link Lorena si Andor pt deschidere modal CV --------------------------*/ .lorand-link-cv { display: inline; position: relative; font-weight:600; color: dodgerblue; text-decoration:none !important; font-size:1.1em; letter-spacing:2px; } .lorand-link-cv:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -3px; left: 0px; background-color: white; transform-origin: center; transition: transform 0.4s ease-in; color:yellow !important; text-decoration:none !important; } .lorand-link-cv:hover { transform: scaleX(1.05); transform-origin: center; color:#FF9800 !important;/* new color: caramiziu portocaliu - website specific color */ text-decoration:none !important; } /*start - underline animated - link Lorena si Andor pt deschidere modal CV --------------------------*/ /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { /* start - rand cu doua imagini - din sectiunea box-text-one - lor si and */ .two-columns-for-lorand-img { box-sizing: border-box; float: left; width: 50%; /* sub latime de 1200px se vor afisa pe un rand doar coloanele cu foto lor si and pt a evita sa se afiseze foto foarte mari la peste 1200px" */ display: inline-block; } ul{ padding-left: 4%; padding-right: 4%; } /* final - rand cu doua imagini - din sectiunea box-text-one - lor si and */ } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { .box-text-one .box-text { padding: 15px; position: relative; overflow: hidden; margin: 0 0 40px 0; background: #4169E1; /* royalblue - pt diferentiere daca fondul navbar-colapse (fond Blau - website specific color) se suprapune peste acest fond - de analizat */ box-shadow: 0 5px 26px 0 rgba(68, 88, 144, 0.14); transition: all 0.3s ease-in-out; text-align: center; border: 1px solid #fff; border-radius: 10px 0 10px 0; } .box-text-one .title { font-weight: 500; margin-bottom: 15px; font-size: 1.1em; color: white; letter-spacing:1.9px; } .box-text-one .box-text-blue:hover { border-color: #e2cd80; /* Beige pe albastru - website specific color */ } } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { .box-text-one .box-text { padding: 15px; position: relative; overflow: hidden; margin: 0 0 40px 0; background: #4169E1; /* royalblue - pt diferentiere daca fondul navbar-colapse (fond Blau - website specific color) se suprapune peste acest fond - de analizat */ box-shadow: 0 5px 26px 0 rgba(68, 88, 144, 0.14); transition: all 0.3s ease-in-out; text-align: center; border: 1px solid #fff; border-radius: 10px 0 10px 0; } .box-text-one .title { font-weight: 500; margin-bottom: 15px; font-size: 1em; color: white; /*#6495ed; /* Blau - website specific color */ letter-spacing:1.9px; } .box-text-one .box-text-blue:hover { border-color: #e2cd80; /* Beige pe albastru - website specific color */ } } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 5. final - box-text-one - text imediat sub container video - pornire webpage - de la "Herzlich Willkommen" pana la "Unsere Praxis" ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- start sectiunea: parallax-one - nu se mai foloseste ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- final start sectiunea: parallax-one - nu se mai foloseste ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ========================================================================================================================================================================= */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 6. start sectiunea: praxis-technik ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ .praxis-technik{ /* style box praxis-technik */ /* border-right: 4px solid #6495ed; /* Blau - website specific color - bara verticala partea dreapta*/ /* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); */ -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -o-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); padding: 10px 10px 10px 10px; margin: 0 15px 30px 15px; overflow: hidden; position: relative; text-align: center; /* height: auto; - mai bine nu se adauga niciun height - la descriere trebuie inserat un text mai mare de 8 randuri (pentru orice latime de ecran) pentru a avea carduri cu inaltimi egale */ background-color: rgb(240,248,255,0.6); /* aliceblue cu transparenta */ } .praxis-technik .box-img{/* box pentru imagine */ display: block; position: static; margin: 0 auto 15px; } .praxis-technik .box-img img{/* imaginea */ width: 100%; height: auto; border-radius: 20px 5px 50px 0px; } .praxis-technik .description{/* textul pentru descriere */ /*text-indent: 30px;*/ font-size: 1.2em; letter-spacing: 1.2px; color: gray; line-height: 25px; margin: 0px; padding-right:10px; /* adaugat pmd - pt scroll-y si pt a trece description over svg */ position: relative; /* Proprietatea z-index este aplicată doar pe elementele poziționate. Adăugarea position: relative;etichetei de paragraf o va aplica corect. */ overflow-y: scroll; height: auto; text-align:justify; } .praxis-technik .title{/* titlul - numele praxis-technik */ display: inline-block; font-size: 1.5em; /*font-weight: 700;*/ letter-spacing: 1.5px; color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ margin: 0; padding-bottom:10px; } .owl-theme .owl-controls .owl-page span{/* butoanele de jos - fondul butonului inactiv - Blau - website specific color*/ display: inline-block; height: 7px !important; width: 20px !important; background-color: #262626 !important; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; margin: 0 5px; -webkit-transition: .2s; transition: .2s; border-radius: 5px; margin-top: 30px; } .owl-theme .owl-controls .owl-page.active span{/* butoanele de jos - conturul si fondul butonului activ */ background-color: #6495ed !important; /* butoanele de jos - fondul butonului activ - Blau - website specific color */ width: 30px !important; } .owl-theme .owl-controls .owl-page:hover span{/* butoanele de jos - conturul si fondul butonului activ */ background-color: #FF9800 !important; /* new color: caramiziu portocaliu - website specific color */ } /* start - adaugat suplimentar pentru shape-curves la baza boxului praxis-techniks */ .praxis-technik-shape-curves { position: absolute; min-height: 200px; bottom: 0; left: 0; line-height: 0; transform: rotate(180deg); width: 100%; } .praxis-technik-shape-curves svg.curves { position: relative; display: block; width: 100%; height: 300px; transform: rotateY(180deg); } .praxis-technik-shape-curves .curba-a-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.2; } .praxis-technik-shape-curves .curba-b-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.2; } /* pmd - reducere lungime text la latimea cardului astfel incat sa existe un numar definit de randuri - apoi se adauga trei puncte */ #limit-lenght-praxis-technik-name{ /* nefolosit pentru moment */ overflow: hidden; width:auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } #limit-lenght-praxis-technik-description{ overflow: hidden; width:auto; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; } /* start - linkul pentru "Mehr" din praxis-technik si din leistungen =============================================================================*/ .card-link {/* pozitia pentru textul descriere "Mehr" */ padding-top:5px; padding-bottom:5px; text-align:right; padding-right:10px; width: -webkit-fill-available; } .card-link a { /* textul pentru "Mehr" */ text-decoration: none; position: relative; padding: 10px 0; font-size:1.3em; letter-spacing:1.2px; color: #CD853F; /* peru */ } .card-link a:after { top: 33px; content: ""; display: block; height: 2px; /* grosimea liniutei ce sublineaza "Mehr" */ left: 50%; position: absolute; width: 0; -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s; -moz-transition: width 0.3s ease 0s, left 0.3s ease 0s; -o-transition: width 0.3s ease 0s, left 0.3s ease 0s; transition: width 0.3s ease 0s, left 0.3s ease 0s; background: #CD853F; /* peru - liniuta pentru subliniere */ } .card-link a:hover:after { width: 100%; left: 0; } /* final - linkul pentru "Mehr" din praxis-technik si din leistungen =============================================================================*/ /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { .praxis-technik .description{/* textul pentru descriere */ font-size: 1.2em; letter-spacing: 1.1px; } .card-link a { /* textul pentru "Mehr" */ font-size:1.3em; letter-spacing:1.1px; } } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { .praxis-technik .description{/* textul pentru descriere */ font-size: 1.2em; letter-spacing: 1.1px; } .card-link a { /* textul pentru "Mehr" */ font-size:1.3em; letter-spacing:1.1px; } } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { .praxis-technik .description{/* textul pentru descriere */ font-size: 1.2em; letter-spacing: 1.1px; } .card-link a { /* textul pentru "Mehr" */ font-size:1.3em; letter-spacing:1.1px; } } /* final - Custom, iPhone Retina ; screen < 360px*/ /* final - adaugat suplimentar pentru shape-curves la baza boxului praxis-techniks */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 6. final sectiunea: praxis-technik ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 7. start sectiunea: Team ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start restrangere imagine de tip a - cu maxim 3 randuri de text pt descrierea functiei/meseriei */ .team-img-tip-a { position: relative; overflow: hidden; /* min-width: 230px; */ /* max-width: 315px; */ width: 100%; color: #141414; text-align: center; line-height: 1vi; /*font-size: 16px;*/ font-size:1vi; border-radius: 20px 5px 5px 5px; } .team-img-tip-a * { /* *înseamnă TOATE. " * " Înseamnă să aplici acele stiluri tuturor elementelor. - animatia de ridicare a scrisului peste imagine*/ -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 1.4s ease; transition: all 1.4s ease; } .team-img-tip-a img { max-width: 100%; vertical-align: top; } .team-img-tip-a figcaption { position: absolute; top: calc(89%); width: 100%; background-color: #ffffff; padding: 15px 2px 65px; /* top padding is 15px - right and left paddings are 2px - bottom padding is 65px */ } .team-img-tip-a figcaption:before { position: absolute; content: ''; z-index: 2; bottom: 100%; left: 0; width: 100%; height: 10px; background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%); background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%); } /* textul pentru nume */ .team-img-tip-a h3 { font-weight: 500; font-size: 1.4em; line-height: 1.2em; text-align: center; color: gray; margin-top:-5px; margin-bottom:0px; letter-spacing:1.4px; } /* textul pentru functie/meserie */ .team-img-tip-a p { font-size: 1.1em; letter-spacing: 1.1px; color: gray; margin-top:10px; margin-bottom:5px; } .team-img-tip-a:hover figcaption, /* trebuie ambele hover */ .team-img-tip-a.hover figcaption { top: calc(65%); /* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */ } /* final restrangere imagine de tip a - cu maxim 3 randuri de text pt descrierea functiei/meseriei */ /* start restrangere imagine de tip b - cu maxim 2 randuri de text pt descrierea functiei/meseriei */ .team-img-tip-b { position: relative; overflow: hidden; /* min-width: 230px; */ /* max-width: 315px; */ width: 100%; color: #141414; text-align: center; line-height: 1vi; /*font-size: 16px;*/ font-size:1vi; border-radius: 20px 5px 5px 5px; } .team-img-tip-b * { /* *înseamnă TOATE. " * " Înseamnă să aplici acele stiluri tuturor elementelor. - animatia de ridicare a scrisului peste imagine*/ -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 1.4s ease; transition: all 1.4s ease; } .team-img-tip-b img { max-width: 100%; vertical-align: top; } .team-img-tip-b figcaption { position: absolute; top: calc(89%); width: 100%; background-color: #ffffff; padding: 15px 2px 65px; /* top padding is 15px - right and left paddings are 2px - bottom padding is 65px */ } .team-img-tip-b figcaption:before { position: absolute; content: ''; z-index: 2; bottom: 100%; left: 0; width: 100%; height: 10px; background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%); background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%); } /* textul pentru nume */ .team-img-tip-b h3 { font-weight: 500; font-size: 1.4em; line-height: 1.2em; text-align: center; color: gray; margin-top:-5px; margin-bottom:0px; letter-spacing:1.4px; } /* textul pentru functie/meserie */ .team-img-tip-b p { font-size: 1.1em; letter-spacing: 1.1px; color: gray; margin-top:10px; margin-bottom:5px; } .team-img-tip-b:hover figcaption, /* trebuie ambele hover */ .team-img-tip-b.hover figcaption { top: calc(70%); /* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */ } /* final restrangere imagine de tip b - cu maxim 2 randuri de text pt descrierea functiei/meseriei */ /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { .team-img-tip-a { position: relative; overflow: hidden; /* min-width: 230px; */ /* max-width: 315px; */ width: 100%; color: #141414; text-align: center; line-height: 2vi; /*font-size: 16px;*/ font-size:2vi; border-radius: 20px 5px 5px 5px; } .team-img-tip-b { position: relative; overflow: hidden; /* min-width: 230px; */ /* max-width: 315px; */ width: 100%; color: #141414; text-align: center; line-height: 2vi; /*font-size: 16px;*/ font-size:2vi; border-radius: 20px 5px 5px 5px; } } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ .team-img-tip-a { position: relative; overflow: hidden; /* min-width: 230px; */ /* max-width: 315px; */ width: 100%; color: #141414; text-align: center; line-height: 6.5vi; /*font-size: 16px;*/ font-size:3.5vi; border-radius: 20px 5px 5px 5px; } .team-img-tip-a:hover figcaption, /* trebuie ambele hover */ .team-img-tip-a.hover figcaption { top: calc(63%); /* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */ } .team-img-tip-b { position: relative; overflow: hidden; /* min-width: 230px; */ /* max-width: 315px; */ width: 100%; color: #141414; text-align: center; line-height: 6.5vi; /*font-size: 16px;*/ font-size:3.5vi; border-radius: 20px 5px 5px 5px; } .team-img-tip-b:hover figcaption, /* trebuie ambele hover */ .team-img-tip-b.hover figcaption { top: calc(74%); /* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */ } /* final - Custom, iPhone Retina ; screen < 360px*/ } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { .team-img-tip-a { position: relative; overflow: hidden; /* min-width: 230px; */ /* max-width: 315px; */ width: 100%; color: #141414; text-align: center; line-height: 6.5vi; /*font-size: 16px;*/ font-size:4.5vi; border-radius: 20px 5px 5px 5px; } .team-img-tip-a:hover figcaption, /* trebuie ambele hover */ .team-img-tip-a.hover figcaption { top: calc(63%); /* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */ } .team-img-tip-b { position: relative; overflow: hidden; /* min-width: 230px; */ /* max-width: 315px; */ width: 100%; color: #141414; text-align: center; line-height: 6.5vi; /*font-size: 16px;*/ font-size:4.5vi; border-radius: 20px 5px 5px 5px; } .team-img-tip-b:hover figcaption, /* trebuie ambele hover */ .team-img-tip-b.hover figcaption { top: calc(70%); /* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */ } } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { .team-img-tip-a:hover figcaption, /* trebuie ambele hover */ .team-img-tip-a.hover figcaption { top: calc(63%); /* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */ } .team-img-tip-b:hover figcaption, /* trebuie ambele hover */ .team-img-tip-b.hover figcaption { top: calc(63%); /* cat mai ramane din imagine ca sa se vada toate randurile ce contin functia/meseria persoanei */ } } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 7. final sectiunea: Team ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 8. start sectiunea: Leistungen ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* am eliminat clasa card-category - nu functiona corect pe ios apple .card-category { margin-bottom: 10px; } .card-category div { display:inline-block; } .card-category > div:not(:last-child) { margin: 10px 5px; text-align: left; } /* am eliminat clasa card-category - nu functiona corect pe ios apple */ /* Basic Card */ /* start - image doar pentru card lorena si andor =============================================================================*/*/ .img-card-lorand {/* aspectul cardului - per total */ width:100%; height: 100%; /* pmd - important pentru mentinerea corecta a inaltimmi cardului */ position: relative; border-radius: 20px 5px 5px 5px; text-align: left; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -o-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); background-color: rgb(240,248,255,0.6) /* aliceblue cu transparenta */ } .img-card-lorand .card-image-lorand {/* aspectul cutiei in care se afiseaza imaginii din card */ position: relative; margin: auto; overflow: hidden; border-radius: 20px 5px 30px 10px; height: auto; } .img-card-lorand .card-image-lorand img {/* aspectul imaginii din card */ width:100%; border-radius: 20px 5px 30px 10px; -webkit-transition: all 3s; -moz-transition: all 3s; -o-transition: all 3s; transition: all 3s; } .img-card-lorand .card-image-lorand:hover img {/* animatia imaginii la mouse over */ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /* final - image doar pentru card lorena si andor =============================================================================*/*/ /* start - numele de pe cardul cu imagini lorena si andor =============================================================================*/ .card-nume-img-lorand {/* pozitia pentru textul nume */ /* trebuie obligatoriu sa ramana aici chiar daca nu contine niciun stil - ia un stil mostenit... */ } .card-nume-img-lorand span { /* textul pentru nume */ text-decoration: none; position: relative; font-size:1.3em; letter-spacing:1.2px; color: #CD853F; /* peru */ } /* final - numele de pe cardul cu imagini lorena si andor =============================================================================*/ /* Image Card */ .img-card {/* aspectul cardului - per total */ width:100%; height: auto; /* pmd - important pentru mentinerea corecta a inaltimmi cardului */ position: relative; border-radius: 20px 5px 5px 5px; text-align: left; -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -o-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); background-color: rgb(240,248,255,0.6) /* aliceblue cu transparenta */ } .img-card .card-image {/* aspectul cutiei in care se afiseaza imaginii din card */ position: relative; margin: auto; overflow: hidden; border-radius: 20px 5px 50px 0px; height: auto; } .img-card .card-image img {/* aspectul imaginii din card */ width:100%; border-radius: 20px 5px 50px 0px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; } .img-card .card-image:hover img {/* animatia imaginii la mouse over */ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .img-card .card-text { /* pozitia pentru textul descriere leistungen */ padding-top:10px; padding-bottom:0px; padding-left:10px; padding-right:10px; line-height: 1.5; /* distanta dintre randuri */ } .card-title-services{ /* textul pentru nume titlu leistungen */ color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ font-size:1.5em; letter-spacing:1.5px; } .card-text p{ /* textul pentru descriere leistungen */ /*text-indent: 30px;*/ font-size: 1.2em; letter-spacing: 1.2px; color: gray; line-height: 25px; margin: 0px; padding-right:10px; /* adaugat pmd - pt scroll-y si pt a trece description over svg */ position: relative; /* Proprietatea z-index este aplicată doar pe elementele poziționate. Adăugarea position: relative;etichetei de paragraf o va aplica corect. */ overflow-y: scroll; height: auto; text-align:justify; } .img-card.iCard-style .card-text { color: #795548; } /* pmd - reducere lungime text la latimea cardului astfel incat sa existe un numar definit de randuri - apoi se adauga trei puncte */ #limit-lenght-service-name{ overflow: hidden; width:auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } #limit-lenght-service-description{ overflow: hidden; width:auto; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 8. final sectiunea: Leistungen ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 9. start sectiunea: Kontakt ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 9. final sectiunea: Kontakt ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* aici - Kontakt */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 10. start sectiunea: recenzie-pmd ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - recenzii - de pe codepen */ .recenzie-pmd{ /* style box recenzie-pmd */ /* border-right: 4px solid #6495ed; /* Blau - website specific color - bara verticala partea dreapta*/ -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -o-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); padding: 30px 10px 30px 10px; margin: 0 15px 30px 15px; overflow: hidden; position: relative; text-align: center; margin-top: -20px; background-color: rgb(240,248,255,0.6) /* aliceblue cu transparenta */ } .recenzie-pmd-description{/* textul pentru descriere */ /*text-indent: 30px;*/ font-size: 1.2em; letter-spacing: 1.2px; color: gray; line-height: 25px; margin-bottom: 15px; padding-right:10px; text-align: left; /* adaugat pmd - pt a trece description over svg */ position: relative; /* Proprietatea z-index este aplicată doar pe elementele poziționate. Adăugarea position: relative;etichetei de paragraf o va aplica corect. */ min-height: 220px; text-align:justify; } .recenzie-pmd-title{/* titlul review-ului */ /* display: inline-block; */ font-size: 1.4em; font-weight: 700; letter-spacing: 1.5px; color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ margin: 0; margin-bottom: 10px; margin-top:-10px; } .recenzie-pmd-name{/* numele celul ce adauga review-ul */ display: inline-block; font-size: 20px; font-weight: 500; letter-spacing: 1px; color: blue; /* new color: caramiziu portocaliu - website specific color */ margin: 0; font-style:italic; /* adaugat pmd - pt a trece name over svg */ position: relative; /* Proprietatea z-index este aplicată doar pe elementele poziționate. Adăugarea position: relative;etichetei de paragraf o va aplica corect. */ } .owl-theme .owl-controls .owl-page span{/* butoanele de jos - fondul butonului inactiv - Blau - website specific color*/ display: inline-block; height: 7px !important; width: 20px !important; background-color: #262626 !important; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; margin: 0 5px; -webkit-transition: .2s; transition: .2s; border-radius: 5px; margin-top: 30px; } .owl-theme .owl-controls .owl-page.active span{/* butoanele de jos - conturul si fondul butonului activ */ background-color: #6495ed !important; /* butoanele de jos - fondul butonului activ - Blau - website specific color */ width: 30px !important; } .owl-theme .owl-controls .owl-page:hover span{/* butoanele de jos - conturul si fondul butonului activ */ background-color: #FF9800 !important; /* new color: caramiziu portocaliu - website specific color */ } .recenzie-pmd-stars-off { color: gray; } .recenzie-pmd-stars-on { color: #FF9800; } /* start - adaugat suplimentar pentru shape-curves la baza boxului recenzii */ .recenzie-pmd-shape-curves { position: absolute; min-height: 200px; bottom: 0; left: 0; line-height: 0; transform: rotate(180deg); width: 100%; } .recenzie-pmd-shape-curves svg.curves { position: relative; display: block; width: 100%; height: 300px; transform: rotateY(180deg); } .recenzie-pmd-shape-curves .curba-a-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; } .recenzie-pmd-shape-curves .curba-b-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; } /* final - adaugat suplimentar pentru shape-curves la baza boxului recenzii */ /* pmd - reducere lungime text la latimea cardului astfel incat sa existe un numar definit de randuri - apoi se adauga trei puncte */ #limit-lenght-recenzie-pmd-title{ /* nefolosit pentru moment */ overflow: hidden; width:auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } #limit-lenght-recenzie-pmd-description{ overflow: hidden; width:auto; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } /* start - recenzie-pmd-row-two */ .recenzie-pmd-row-two { /* style box recenzie-pmd - randul 2 - fara slide orizontal */ /* border-right: 4px solid #6495ed; /* Blau - website specific color - bara verticala partea dreapta*/ -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); -o-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); padding: 10px 10px 30px 10px; margin: 0; overflow: hidden; position: relative; text-align: center; margin-top: -20px; background-color: rgb(240,248,255,0.2) /* aliceblue cu transparenta */ } .recenzie-pmd-row-two .description{/* textul pentru descriere */ font-size: 1.2em; letter-spacing: 1.2px; color: gray; line-height: 25px; margin-bottom: 15px; padding-right:10px; text-align: left; /* aici nu se doreste inaltime fixa - nu se mai adauga - adaugat pmd - pt scroll-y si pt a trece description over svg */ /* position: relative; /* Proprietatea z-index este aplicată doar pe elementele poziționate. Adăugarea position: relative;etichetei de paragraf o va aplica corect. */ /* overflow-y: auto; */ /* height: 150px; */ text-align:justify; } .recenzie-pmd-row-two .title{/* titlul review-ului */ display: inline-block; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ margin: 0; margin-bottom: 10px; } .recenzie-pmd-row-two .name{/* numele celul ce adauga review-ul */ display: inline-block; font-size: 20px; font-weight: 500; letter-spacing: 1px; color: blue; /* new color: caramiziu portocaliu - website specific color */ margin: 0; font-style:italic; /* adaugat pmd - pt a trece name over svg */ position: relative; /* Proprietatea z-index este aplicată doar pe elementele poziționate. Adăugarea position: relative;etichetei de paragraf o va aplica corect. */ } /* final - recenzie-pmd-row-two */ /* final - recenzii - de pe codepen */ /* start - adaugat suplimentar pentru shape-curves la baza boxului recenzii */ .recenzie-pmd-shape-curves { position: absolute; min-height: 200px; bottom: 0; left: 0; line-height: 0; transform: rotate(180deg); width: 100%; } .recenzie-pmd-shape-curves svg.curves { position: relative; display: block; width: 100%; height: 300px; transform: rotateY(180deg); } .recenzie-pmd-shape-curves .curba-a-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; } .recenzie-pmd-shape-curves .curba-b-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; } /* final - adaugat suplimentar pentru shape-curves la baza boxului recenzii */ /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 10. final sectiunea: recenzie-pmd ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 11. start sectiunea: Footer Webpage ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* start - Footer Top - cu parallax efect pastrat - merge cu toate browserele dar nu cu IOS - e OK totusi - se vede fondul estompat dar nu deranjeaza tare*/ /* start - acest stil trebuie pastrat in radacina webpage - parallax-style.css - doar asa functioneaza efectul parallax */ /* .subsol-part-sus-area { background: url(https://www.laechelland.de/new/img/parallax/footer-img.jpg); -webkit-background-size: cover; background-size: cover; background-position: center center; background-attachment: fixed; position: relative; padding: 50px 0; } */ /* final - acest stil trebuie pastrat in radacina webpage - parallax-style.css - doar asa functioneaza efectul parallax */ .subsol-part-sus-area:before{ /* fondul transparent peste imaginea parallax */ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(30,144,255,0.7); /* dpdgerblue - fondul transparent*/ } .subsol-part-sus-area-logo { /* sigla centrata */ display: block; margin-left: auto; margin-right: auto; } .subsol-part-sus-area h4 { color: #fff; /* alb - titlu coloane - leistungen si parxis*/ text-shadow: 1px 1px rgba(0, 0, 0, 0.4); letter-spacing: 1.8px; text-transform: uppercase; font-weight: 900; margin-bottom: 15px; } .subsol-part-sus-area h6 { text-transform: none; font-weight: 400; font-size: 13px; } .subsol-part-sus-area h6 a { color: #d4d4d4; font-weight: 700; } .subsol-part-sus-area-telef-nr { /* afisare nr telefon pentru ecrane mai mari ca xs */ color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); font-size:1.2em; letter-spacing: 1.3px; font-weight: 600; margin-bottom: -10px; text-align:center; } .subsol-part-sus-area-telef-nr a { /* afisare nr telefon pentru ecrane xs */ color: #fff; font-size:1.2em; letter-spacing: 1.8px; font-weight: 600; text-align:center; text-decoration:none; } .subsol-part-sus-area-email { /* adresa email */ color: #fff; font-size:1.1em; letter-spacing: 1.3px; font-weight: 600; margin-bottom: 0px; text-align:center; } .subsol-part-sus-area-email a { /* adresa email */ color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); font-size:1.1em; letter-spacing: 1.8px; font-weight: 600; text-align:center; text-decoration:none; } .subsol-part-sus-area-email a:hover { /* adresa email */ color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ } .subsol-part-sus-area i { /* afisare iconuri nr telef si socials font awesome in footer */ color: #fff; font-size:1.2em; letter-spacing: 1.3px; margin-bottom: 30px; text-align:center; } .subsol-part-sus-area i:hover { /* afisare iconuri font awesome in footer la mouse over */ color: white; /* ramane neschimbata culoarea iconului */ } .subsol-part-sus-area p { color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); font-size:1.2em; letter-spacing: 1.3px; font-weight: 600; margin-bottom: 30px; text-align:center; } .single-subsol-part-sus h4 i { color: #ffffff; } .single-subsol-part-sus h4 span { color: #006838; font-weight: 900; font-size: 25px; text-transform: uppercase; } .single-subsol-part-sus .socials { /* aliniere la centru pentru socials */ text-align:center; } .single-subsol-part-sus .socials a { text-decoration: none; color: #fff; font-size: 20px; margin-right: 15px; } .subsol-navs { list-style: none; } .subsol-navs li { margin: 10px 0; } .subsol-navs li a { /* textul pentru linkurile din footer top */ text-decoration: none; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); font-weight: 600; letter-spacing:1.8px; font-size:1.2em; } .subsol-navs li a:hover { /* textul pentru linkurile din footer top la mouse over*/ color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ } /*--------------------------*/ .subsol-navs-legal { /* textul pentru linkurile de tip IMPRESSUM din footer top */ list-style: none; padding-bottom:10px; padding-top:30px; } .subsol-navs-legal li { /* textul pentru linkurile de tip IMPRESSUM din footer top */ margin: 10px 0; } .subsol-navs-legal li a { /* textul pentru linkurile de tip IMPRESSUM din footer top */ text-decoration: none; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); font-weight: 600; letter-spacing:1.8px; font-size:1.1em; } .subsol-navs-legal li a:hover { /* textul hover pentru linkurile impressum datenschutz quellen karierre etc din footer top */ color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ } /* final - Footer Top */ /* start - text lang - change language ----------------------------------------------------------------------------------------------------------- */ .single-subsol-part-sus .lang { /* aliniere la stanga pentru lang */ text-align:left; margin-left:16px; } .single-subsol-part-sus .lang a { text-decoration: none; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); font-weight: 600; letter-spacing:1.8px; font-size:1.2em; margin-right: 15px; } .single-subsol-part-sus .lang a:hover { color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ } /* final - text lang - change language ----------------------------------------------------------------------------------------------------------- */ /* start - Footer Bottom */ .footer-area { background: #6495ed; /* Blau - website specific color */ color: #ffffff; padding: 10px 0; font-size:1.1em; letter-spacing:1.5px; } .footer-area a { text-decoration: none; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); font-weight: 700; font-size:1.1em; letter-spacing:1.5px; } /* final - Footer Bottom */ /*start - underline animated - footer - reverse --------------------------*/ .nav-text-hover-subsol-reverse { display: inline; position: relative; color: blue; /* nu conteaza */ } .nav-text-hover-subsol-reverse:after { content: ''; position: absolute; width: 100%; transform: scaleX(1.1); height: 1px; bottom: -3px; left: 0px; background-color: white; transform-origin: center; transition: transform 0.4s ease-in; } .nav-text-hover-subsol-reverse:hover:after { transform: scaleX(0); transform-origin: center; } /* final - underline animated - footer - reverse --------------------------*/ /* start - underline animated - footer - text - eng - change language --------------------------*/ .nav-text-hover-subsol-lang-eng { display: inline; position: relative; } .nav-text-hover-subsol-lang-eng:after { content: 'English language'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: 0px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; color: #fff; } .nav-text-hover-subsol-lang-eng:hover:after { transform: scaleX(1.05); transform-origin: bottom left; } /* final - underline animated - footer - text - eng - change language --------------------------*/ /* start - underline animated - footer - text - rom - change language --------------------------*/ .nav-text-hover-subsol-lang-rom { display: inline; position: relative; } .nav-text-hover-subsol-lang-rom:after { content: 'Limba romana'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: 0px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; color: #fff; } .nav-text-hover-subsol-lang-rom:hover:after { transform: scaleX(1.05); transform-origin: bottom left;; } /* final - underline animated - footer - text - rom - change language --------------------------*/ /* start - underline animated - footer - text - hun - change language --------------------------*/ .nav-text-hover-subsol-lang-hun { display: inline; position: relative; } .nav-text-hover-subsol-lang-hun:after { content: 'Magyar nyelv'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: 0px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; color: #fff; } .nav-text-hover-subsol-lang-hun:hover:after { transform: scaleX(1.05); transform-origin: bottom left;; } /* final - underline animated - footer - text - rom - change language --------------------------*/ /* start - underline animated - footer - text - deu - change language --------------------------*/ .nav-text-hover-subsol-lang-deu { display: inline; position: relative; } .nav-text-hover-subsol-lang-deu:after { content: 'Magyar nyelv'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: 0px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; color: #fff; } .nav-text-hover-subsol-lang-deu:hover:after { transform: scaleX(1.05); transform-origin: bottom left; } /* final - underline animated - footer - text - deu - change language --------------------------*/ /* start - underline animated - footer - facebook - socials --------------------------*/ .nav-text-hover-subsol-facebook { display: inline; position: relative; color: blue; /* nu conteaza */ } .nav-text-hover-subsol-facebook:after { content: 'facebook'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: -5px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; } .nav-text-hover-subsol-facebook:hover:after { transform: scaleX(1.05); transform-origin: bottom left; } /* final - underline animated - footer - facebook - socials --------------------------*/ /* start - underline animated - footer - twitter - socials --------------------------*/ .nav-text-hover-subsol-twitter { display: inline; position: relative; color: blue; /* nu conteaza */ } .nav-text-hover-subsol-twitter:after { content: 'twitter'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: -5px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; } .nav-text-hover-subsol-twitter:hover:after { transform: scaleX(1.05); transform-origin: bottom left; } /* final - underline animated - footer - twitter - socials --------------------------*/ /* start - underline animated - footer - instagram - socials --------------------------*/ .nav-text-hover-subsol-instagram { display: inline; position: relative; color: blue; /* nu conteaza */ } .nav-text-hover-subsol-instagram:after { content: 'instagram'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: -5px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; } .nav-text-hover-subsol-instagram:hover:after { transform: scaleX(1.05); transform-origin: bottom left; } /* final - underline animated - footer - instagram - socials --------------------------*/ /* start - underline animated - footer - youtube - socials --------------------------*/ .nav-text-hover-subsol-youtube { display: inline; position: relative; color: blue; /* nu conteaza */ } .nav-text-hover-subsol-youtube:after { content: 'youtube'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: -5px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; } .nav-text-hover-subsol-youtube:hover:after { transform: scaleX(1.05); transform-origin: bottom left; } /* final - underline animated - footer - youtube - socials --------------------------*/ /* start - underline animated - footer - feed - socials --------------------------*/ .nav-text-hover-subsol-feed { display: inline; position: relative; color: blue; /* nu conteaza */ } .nav-text-hover-subsol-feed:after { content: 'feed'; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -8px; left: -5px; background-color: white; transform-origin: bottom right; transition: transform 0.4s ease-in; } .nav-text-hover-subsol-feed:hover:after { transform: scaleX(1.05); transform-origin: bottom left; } /* final - underline animated - footer - feed - socials --------------------------*/ /* start teste - new modal window --------------------------*/ /* final teste - new modal window --------------------------*/ /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- /*-------------------------------------------------------------------------------------------------------------------------------------------------- 11. final sectiunea: Footer Webpage ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 12. start sectiunea: Modal extended ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* start - modal extended detalii - praxis-technik, leistungen, recenzii etc...*/ /* start - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - adaugat suplimentar pentru shape-curves la baza modal extended detalii */ .modal-extended-shape-curves { position: absolute; min-height: 200px; bottom: 0; left: 0; line-height: 0; transform: rotate(180deg); width: 100%; } .modal-extended-shape-curves svg.curves { position: relative; display: block; width: 100%; height: 300px; transform: rotateY(180deg); } .modal-extended-shape-curves .curba-a-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; } .modal-extended-shape-curves .curba-b-shape-fill { /* culoarea de umplere pentru valuri - svg */ fill: #00b7ff; /* color description : Pure (or mostly pure) blue */ opacity:0.25; } /* final - adaugat suplimentar pentru shape-curves la baza modal extended detalii */ /* start - text modal extended detalii */ .modal-extended-title { font-size: 1.4em; font-weight: 700; letter-spacing: 3px; color:white; text-align:center; } .modal-extended-subtitle { /* subtitlu in modal-extended */ font-size: 1.1em; font-weight: 700; letter-spacing: 1.5px; color: darkslategray; /* Gri inchis */ margin-top:20px; margin-bottom:5px; text-align:center; } .modal-extended-text-row-description { /* descriere in modal-extended */ text-indent: 30px; font-size: 1.1em; font-weight: 500; letter-spacing: 1.5px; color: gray; text-align:justify; } .modal-extended-close-btn { /* buton inchidere in footer in modal-extended */ border: 2px solid dodgerblue; border-radius: 5px; background-color: white; cursor: pointer; display: inline-block; font-size: 1.1em; font-weight: 700; letter-spacing: 1.5px; color: dodgerblue; margin-top:25px; margin-bottom:5px; padding:3px; padding-left:10px; padding-right:10px; float:right; opacity: 0.7; transition: 0.3s; } .modal-extended-close-btn:hover {/* buton inchidere in footer in modal-extended */ opacity: 1 } /*start - butonul close din modal header --------------------------*/ button.close { background: dodgerblue; border: 0 none !important; color: #fff7cc; display: inline-block; float: right; font-size: 34px; height: 40px; line-height: 1; margin: 0px 1px; opacity: 1; text-align: center; text-shadow: none; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; vertical-align: top; width: 46px; } /*final - butonul close din modal header --------------------------*/ /* start - buton general "open" modal - google maps, termine, etc */ .btn-modal-open { /* corpul butonului si culoarea textului interior */ box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #6495ed; /* Blau - website specific color */ border: 1px solid #e74c3c; /* ascunde un border mostenit in partea de jos a btn - trebuie pastrat aici */ border-radius: 0.5em; padding: 6px 10px; /* padding intre text si marginea btn */ text-decoration: none; color: #fff; /* culoarea textului si a iconului play*/ font-size:1.1em; letter-spacing:2px; margin:0 auto 0px; /* centrarea butonului */ border-color: #fff; /* box-shadow: 0 0 0px 0 #fff inset; /* varianta 1 de animatie - culoarea gradientului de animatie hover */ box-shadow: #fff inset; /* varianta 2 de animatie - culoarea gradientului de animatie hover */ transition: box-shadow 600ms ease-in-out;/* tranzitia hover si la revenire hover */ margin-top:-15px; /* corectie de pastrare a distantelor egale fata de linile de demarcatie pe verticala - se ridica putin butonul */ } .btn-modal-open:hover { box-shadow: 0 0 40px 40px deepskyblue inset;/* tranzitia hover la culoarea de fond a btn alocata pt "open" - nuanta de bleu */ color: #fff; /* culoarea textului la hover*/ } /* final - buton general "open" modal - google maps, termine, etc */ /* start - butoane in subsolul modal */ /* start - buton "refuse" in subsolul modal */ .btn-modal-refuse { /* corpul butonului si culoarea textului interior */ box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #6495ed; /* Blau - website specific color */ border: 1px solid #e74c3c; /* ascunde un border mostenit in partea de jos a btn - trebuie pastrat aici */ border-radius: 0.5em; padding: 6px 10px; /* padding intre text si marginea btn */ text-decoration: none; color: #fff; /* culoarea textului si a iconului play*/ font-size:1.1em; letter-spacing:3px; margin:0 auto 0px; /* centrarea butonului */ border-color: #fff; /* box-shadow: 0 0 0px 0 #fff inset; /* varianta 1 de animatie - culoarea gradientului de animatie hover */ box-shadow: #fff inset; /* varianta 2 de animatie - culoarea gradientului de animatie hover */ transition: box-shadow 600ms ease-in-out;/* tranzitia hover si la revenire hover */ } .btn-modal-refuse:hover { box-shadow: 0 0 40px 40px orangered inset;/* tranzitia hover lo culoarea de fond a btn alocata pt "refuse" - nuanta de red */ color: #fff; /* culoarea textului la hover*/ } /* final - buton "refuse" in subsolul modal */ /* start - buton "accept" in subsolul modal */ .btn-modal-accept { /* corpul butonului si culoarea textului interior */ box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #6495ed; /* Blau - website specific color */ border: 1px solid #e74c3c; /* ascunde un border mostenit in partea de jos a btn - trebuie pastrat aici */ border-radius: 0.5em; padding: 6px 10px; /* padding intre text si marginea btn */ text-decoration: none; color: #fff; /* culoarea textului si a iconului play*/ font-size:1.1em; letter-spacing:3px; margin:0 auto 0px; /* centrarea butonului */ border-color: #fff; /* box-shadow: 0 0 0px 0 #fff inset; /* varianta 1 de animatie - culoarea gradientului de animatie hover */ box-shadow: #fff inset; /* varianta 2 de animatie - culoarea gradientului de animatie hover */ transition: box-shadow 600ms ease-in-out;/* tranzitia hover si la revenire hover */ } .btn-modal-accept:hover { box-shadow: 0 0 40px 40px limegreen inset;/* tranzitia hover lo culoarea de fond a btn alocata pt "accept" - nuanta de green */ color: #fff; /* culoarea textului la hover*/ } /* final - buton "accept" in subsolul modal */ /* start - Add Space Between Buttons in HTML */ .space-between-buttons { width: 14px; height: auto; display: inline-block; } /* final - Add Space Between Buttons in HTML */ /* final - butoane in subsolul modal */ /* final - text modal extended detalii */ /* final - modal extended detalii - praxis-technik, leistungen, recenzii etc... - setari general valabile */ /* final - style general valabil - pentru diferite dimensiuni de vizualizare se customizeaza mai jos in @media only screen */ /* start - Large Devices, Wide Screens; screen < 1200px and > 992px -: Dacă fereastra browserului este de 1200px sau mai mică */ /* deci: Dacă fereastra browserului este de 1200px sau mai mică */ @media only screen and (max-width : 1200px) { } /* start - Large Devices, Wide Screens; screen < 1200px and > 992px */ /* start - Medium Devices, Desktops ; screen < 992px and > 768px -: Dacă fereastra browserului este de 992px sau mai mică */ @media only screen and (max-width : 992px) { } /* final - Medium Devices, Desktops ; screen < 992px and > 768px */ /* start - Small Devices, Tablets ; screen < 768px and > 480px -: Dacă fereastra browserului este de 768px sau mai mică */ @media only screen and (max-width : 768px) { } /* final - Small Devices, Tablets ; screen < 768px and > 480px */ /* start - Extra Small Devices, Phones; screen < 480px and > 360p -: Dacă fereastra browserului este de 480px sau mai mică */ @media only screen and (max-width : 480px) { } /* final - Extra Small Devices, Phones; screen < 480px and > 360px */ /* start - Custom, iPhone Retina ; screen < 360px -: Dacă fereastra browserului este de 360px sau mai mică */ @media only screen and (max-width : 360px) { } /* final - Custom, iPhone Retina ; screen < 360px*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------- /*-------- final - modal extended detalii - praxis-technik, leistungen, recenzii etc... -----------*/ /* ========================================================================================================================================================================= */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 12. final sectiunea: Modal extended ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* ===================================================================================================================================================================== */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 12. start - diverse ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* start - modal cv */ .modal-cv-title { font-size: 1.4em; font-weight: 700; letter-spacing: 3px; color: white; text-align:center; } .nume-prenume-cv { font-size: 1.1em; font-weight: 600; letter-spacing:1.5px; color:darkslategray; /* Gri inchis */ } .email-cv { font-size: 1em; letter-spacing:1.2px; color:darkslategray; /* Gri inchis */ } /* linie orizontala de demarcatie intre sectiuni cv - */ .cv-linie_demarcatie_gri{ width: 300px; padding-top:5px; padding-bottom:5px; border-bottom: 1px solid #E5E4E2; } .cv-nume-sectiuni { color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ font-size: 1.1em; font-weight: 600; letter-spacing:1.5px; margin-bottom:0px; } .cv-perioada-ani { color:darkslategray; /* Gri inchis */ font-size: 0.9em; font-weight: 600; letter-spacing:1.5px; margin-bottom:5px; margin-top:20px; } .cv-text-one { color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; } .cv-text-one-specific { /* distantiere supliomentara fata de sectiune in situatia: fara perioada - ani - deasupra */ color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; margin-top:10px; } .cv-text-aliniat-nou { color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; margin-top:-12px; } .cv-text-two { color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; margin-top:0px; } .cv-text-one-lang-interessen { /* limba si interese */ color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; margin-top:10px; } .cv-text-two-lang-interessen { /* limba si interese */ color:grey; /* Gri - website specific color */ font-size: 1em; font-weight: 500; letter-spacing:1.4px; margin-top:-8px; } /* final - modal cv */ /* start - modal leistungen - servicii */ .modal-servicii-title { font-size: 1.4em; font-weight: 700; letter-spacing: 3px; color: white; text-align:center; } .servicii-nume-sectiuni { color: #FF9800; /* new color: caramiziu portocaliu - website specific color */ font-size: 1.1em; font-weight: 600; letter-spacing:1.5px; margin-bottom:0px; text-align:center; } .servicii-text-one { color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; padding-left:5px; margin-bottom:0px; text-indent: 20px; } .servicii-text-one span { color:grey; /* Gri - website specific color */ font-size: 0.9em; font-weight: 600; letter-spacing:1.4px; padding-left:5px; margin-bottom:0px; } .servicii-text-two-ident { color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; padding-left:30px; margin-bottom:0px; text-indent: -20px; } .servicii-text-two-ident span { color:grey; /* Gri - website specific color */ font-size: 0.9em; font-weight: 600; letter-spacing:1.4px; margin-bottom:0px; } /* de aici in jos stilurile pentru modalul de servicii inca nu sunt folosite */ .nume-prenume-servicii { font-size: 1.1em; font-weight: 600; letter-spacing:1.5px; color:darkslategray; /* Gri inchis */ } .email-servicii { font-size: 1em; letter-spacing:1.2px; color:darkslategray; /* Gri inchis */ } /* linie orizontala de demarcatie intre sectiuni cv - */ .cv-linie_demarcatie_gri{ width: 300px; padding-top:5px; padding-bottom:5px; border-bottom: 1px solid #E5E4E2; } .servicii-perioada-ani { color:darkslategray; /* Gri inchis */ font-size: 0.9em; font-weight: 600; letter-spacing:1.5px; margin-bottom:5px; margin-top:20px; } .servicii-text-one-specific { /* distantiere supliomentara fata de sectiune in situatia: fara perioada - ani - deasupra */ color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; margin-top:10px; } .servicii-text-aliniat-nou { color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; margin-top:-12px; } .servicii-text-two { color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; margin-top:0px; } .servicii-text-one-lang-interessen { /* limba si interese */ color:grey; /* Gri - website specific color */ font-size: 1.1em; font-weight: 500; letter-spacing:1.4px; margin-top:10px; } .servicii-text-two-lang-interessen { /* limba si interese */ color:grey; /* Gri - website specific color */ font-size: 1em; font-weight: 500; letter-spacing:1.4px; margin-top:-8px; } /* final - modal leistungen - servicii */ /*-------------------------------------------------------------------------------------------------------------------------------------------------- 12. final - Diverse ---------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ========================================================================================================================================================================= */ /* start - modal leistungen - detalii la apasarea butonului mehr - 2025 */ .modal-leistungen-title { font-size: 1.4em; font-weight: 700; letter-spacing: 3px; color: white; text-align:center; } /* ordonare h1, h2, p - pentru optimizare SEO */ .modal-leistungen h1 { /* identic cu clasa .sectiune-titlu */ max-width: auto; /* initial: max-width: 900px; */ text-align: center; margin: 0 auto; color: darkblue; margin-bottom:20px; letter-spacing:1.4px; font-size:24px; } .modal-leistungen h2 { letter-spacing:1px; font-size:18px; font-weight:700; padding-left:20px; } .modal-leistungen li { list-style: none; color: darkblue; padding-bottom: 10px; font-size: 17px; text-align:left; } .modal-leistungen p { list-style: none; color: darkblue; padding-bottom: 10px; font-size: 18px; text-align:left; } .text-col-caramiziu { color:#DB3800; } .text-col-darkblue { color: darkblue; } .letter-spacing-pmd-a { letter-spacing:1px; } .letter-spacing-pmd-b { letter-spacing:1.4px; } .vertical-bar-caramiziu { position: relative; } .vertical-bar-caramiziu::after { content: ""; width: 4px; height: 80%; position: absolute; top: 1px; left: 2px; background: #DB3800; /* caramiziu portocaliu - website specific color */ } .ident-stanga { padding-left:10px; } /* final - modal leistungen - detalii la apasarea butonului mehr - 2025 */ /* ===================================================================================================================================================================== */ /* ===================================================================================================================================================================== */ /*========== final - css style adaugat pentru noua webpage combinata ==========*/