@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


:root {
    font-size:1.1em;
    font-family: 'Rajdhani', Arial, sans-sarif;
    font-weight: normal;
    word-break: break-word;
    --def-text:#343434;
    --def-href: rgb(var(--col1));
    --def-bg:#fff;
    --def-green:#81bd4a;
    --def-yellow:#f9ff77;
    --def-orange:#FF8C00;
    --def-red:#D40D12;

    --col1:99, 119, 221;
    --col2:73, 91, 182;
   color:var(--def-text); 
}

* {
    z-index: 2;
	box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body{
	background: linear-gradient(#B4C2D3,#fff 60vh);
	color:var(--def-text);
	margin:0;
}
p{
    margin:1.2em 0;
    line-height: 1.6em;
}
a, .likeA{
	color: var(--def-href);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    max-width: unset;
    display: inline;
    margin:0;
}
a:hover, .likeA:hover{
	color: var(--hov-href);
	text-decoration-style: dotted;
}
a:visited{
	opacity:.8;
}
a div,
a p{
    color:var(--def-text);
    font-weight: initial;
}
a:hover>div{
    background:linear-gradient(307deg, var(--trans-bg),var(--trans-bg2) 70%);
    color: var(--def-white);
}
button, .btn{
    background: linear-gradient(280deg, rgb(var(--col1)) 10%, rgb(var(--col2)) 79%, rgb(var(--col2)) 100%, hsl(230, 43%, 40%) 100%);
    border-radius: 1em 3em;
    padding: 1em 3em;
    border: 0;
    font-weight: bold;
    color: #fff;
    font-size: .9em;
    cursor: pointer;
    transition: .3s;
    border:1px solid transparent;
}
button:hover, .btn:hover{
    background: linear-gradient(274.79deg, rgb(var(--col1)) 0%, rgb(var(--col2)) 0%, rgb(var(--col2)) 0%, hsl(230, 43%, 40%) 30%);
    border-color: #fff;
}
.no-disp{ display: none !important;}
.disp-il-bl{ display: inline-block;}
.disp-flex { display: flex;  justify-content: space-between;}
.flex-end { align-items: end; }
.flex-middle { align-items: center; }
.flex-stretch { align-items: stretch; }
.flex-center {justify-content: center;}
.flex-rev-direction {flex-direction: row-reverse;}
.flex-wrap {flex-wrap: wrap;}
.centerBox{	margin: 0 auto; }
.floatRight{ float: right; }
.floatLeft{ float: left; }
.contain { position: relative; overflow: hidden;}
.clear{ clear: both;}
.center{ text-align: center; }
.left{ text-align: left; }
.right{ text-align: right; }
.xbigFont{ font-size: 120%; }
.bigFont{ font-size: 110%; }
.smallFont{ font-size: 90%; }
.xsmallFont{ font-size: 80%; }
.sticky-top{ position: sticky; top:0;z-index: 3;}
.padw3pc {padding-left: 3%; padding-right: 3%;}
.padw5pc {padding-left: min(5%, 35px); padding-right: min(5%, 35px);}
.padh10px {padding-top: 10px; padding-bottom: 10px;}
.padh20px {padding-top: 20px; padding-bottom: 20px;}
.mart3rem {margin-top:3rem;}
.mart5rem {margin-top:5rem;}
.white {color:#fff !important;}
.rounded {border-radius: 5px;}
.scroll-mart60px {scroll-margin-top: 100px;}

.w20{ width: 20%;}
.w25{ width: 25%;}
.w33{ width: 33%;}
.w50{ width: 50%;}
.w66{ width: 66%;}
.h6px {height:6px;}
.maxw-300px {max-width: 300px;}
.maxw-500px {max-width: 500px;}
.maxw-800px {max-width: 800px;}
.maxw-1200px {max-width: 1200px;}
.minw-6em {min-width: 6em;}
.minw-300px {min-width: 300px;}
.blured{ 
    background: #ffffffaa; 
}
@supports (backdrop-filter: blur(1em)){
    .blured{ 
        backdrop-filter: blur(10px);
        background: #ffffffaa; }
}
.visuallyhidden{
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}
.desktop-only-visible{
    display: initial;
}
.mobile-only-visible{
    display: none;
}
.mobile-hide{
    display: initial;
}
.bg1{background-color: rgba(var(--col1),20%);}
.bg1v2{background-color: rgba(var(--col1),40%);}
.bg2{background-color: rgb(var(--col2));}
.darkBg{
    background: linear-gradient(111.65deg, #1F264E 27.69%, #293368 74.72%);
    color:#fff;
}
.whiteBg{background-color: #fff;}

img{
    max-width:100%;
}
.navbar{
    background-color: #ffffffaa;
    position: sticky;
    top:0;
    z-index: 13;
}
nav{
	transition: .3s;
}
nav ul{
	margin: 10px;
    padding:0;
}
nav ul li{
	list-style: none;
	display: inline-block;
	padding:5px;
}
nav ul li ul li{
	display:block;
}

nav ul li ul::before{
    content: " ";
    position: absolute;
    top: -18px;

    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}
nav ul li ul{
	background: #fff;
	position: absolute;
    left: -9999em;
    margin: -5px;
    width: 0;
    z-index: 99999992;
    transition: .2s opacity;
    opacity: 0;
    transition-delay: .3s;
    display: none;
}

.navbar a{
    color: var(--def-menu-a-color);
    text-decoration: none;
    font-weight: bold;
    padding: 0 14px;
    display: inline-block;
    line-height: 42px;
}
nav li.selected ul{
    left: auto;
    top: auto;
    margin-top: 5px;
    width: auto;
    min-width: auto;
    border-radius: 3px;
    text-align: center;
    opacity: 1;
    display: block;
}

nav>ul{
    display: flex;
    justify-content: space-evenly;
    margin:0;
}
#mainmenu_items .menu_home a{
    height: 36px;
    overflow: hidden;
}
#mainmenu_items .menu_home.sticky a{
    line-height: inherit;
}
#mainmenu_items .menu_home img{
    height: 0;
    opacity: 0;
    transition: .2s;
    margin-top:4px;
}
#mainmenu_items .menu_home .fa-home{
    font-size:inherit;
    opacity: 1;
}

#mainmenu_items .menu_home.sticky img{
    height: 42px;
    opacity: 1;
    margin: -3px;
}
#mainmenu_items .menu_home.sticky .fa-home{
    font-size: 0;
    opacity: 0;
    transition: .1s;
}
header{
    max-width: 1400px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
}
header #headerBg{
    background-image: url('../imgs/dentists-treat-patients-teeth.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 0px 39% 22% 25%;
    width:60%;
    aspect-ratio: 6/4.2;
    margin: 20px 30px;
    float:left;
}

header #headerSlogan{
    background: linear-gradient(312.23deg, #1F264E 9.73%, #293368 84.8%);
    border-radius: 16% 48%;
    width: 40%;
    aspect-ratio: 6/4.2;
    position: absolute;
    margin-top: 8vh;
    right: 20px;
    padding: 2% 5%;
    text-align: center;
}
header #headerSlogan h2{
    font-weight: normal;
    color: #fff;
    font-size: min(3vw, 2.4em);
}
header.subpage{
    width: 100%;
    max-width: 100%;
}
header.subpage #headerBg{
    width: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
    height:280px;
    filter: blur(3px);
    }
header.subpage #headerSlogan{
    width: 100%;
    margin: 0;
    background: linear-gradient(312.23deg, #1f264ed9 9.73%, #293368cc 84.8%);
    border-radius: 0;
    right: 0;
    aspect-ratio: auto;
    bottom: 0;
    top: 0;
    padding: 0;
}
header.subpage #headerSlogan h2{
    font-size: 2em;
}

main{
	width: 100%;
    min-height:85vh;
    z-index: 0;
    overflow: hidden;
}
main *{
    z-index: auto;
    line-height: 1.3em;
}

main section{
    width:100%;
    padding:30px 3%;
    position: relative;
    overflow: hidden;
}
.container{
    width: 100%;
    max-width: 1400px;
    margin:0 auto;
}
#offer-home{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}
#offer-home div{
    min-width: 300px;
}
main section>.container>h2{
    display: inline-block;
    width: 50%;
    min-width: 320px;
    text-align: center;
    font-size: 2.2em;
}
#bio-orto-team{
    margin-bottom:-40px;
}
.offer {
    position: relative;
    overflow: hidden;
}
.offer img{
    max-width: 120px;
    margin:20px 0;
    transition: .8s cubic-bezier(0.19, 1, 0.22, 1);
}
.offer .btn{
    margin-top: 1em;
    opacity: 0;
    display: inline-block;
    transition: .3s ease-in;
}
.offer::before{
    content: "";
    display: block;
    width: 10%;
    aspect-ratio: 3/2.2;
    opacity: 0;
    background-color: rgb(var(--col1));
    position: absolute;
    left:-300px;
    top: -140px;
    transition: .3s ease-in-out;
    border-radius: 31% 57%;
    top: 140px;
    left:10px;
}
.offer:hover::before{
    opacity: .2;
    width: 50%;
}
.offer:hover a img{
    max-width: 140px;
    margin:10px 0;
}
.offer:hover .btn{
    opacity: 1;
}

.aparaty img{
    width: 100%;
    display: block;
    margin: 0 auto;
    max-width: 400px;
}
section .imgMask{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 120%;
    border-radius: 0px 39% 22% 25%;
    aspect-ratio: 6/5;
    filter: saturate(0.5);
    transition: 1s;
    width:100%;
}
section .floatLeft>.imgMask{
    border-radius: 22% 25% 0px 39%;
}
section:hover .imgMask{
    filter: saturate(1);
    background-size: 100%;
}
.stepContainer>div{
    flex-grow: 1;
    flex-basis: auto;
}
.step{
    display: inline-block;
    height: 100px;
    text-align:center;
    min-width: 100px;
    background: url('../imgs/bio-orto-step.png') no-repeat center center;
    padding-top: 11px;
    font-size: 2.4em;
    font-weight: bold;
    color: rgb(var(--col2));
    background-size: 70px;
}
.light{
    background-color: #ecf2f9;
}
#staff,
.light2{ 
    background: #B4C2D3; 
}
#staff,
.light2>div.container{
    background: radial-gradient(50% 52.55% at 50% 50.05%, #FFFFFF 0%, #B4C2D3 100%);   
    position:relative;
    overflow: hidden;
}
#staff>div.container::before{
    content: "";
position:absolute;
top:0;
bottom:0;
left:0;
width:5%;
background: linear-gradient(90deg, #B4C2D3 10%, transparent);
z-index: 3;
}
#staff>div.container::after{
    content: "";
position:absolute;
top:0;
bottom:0;
right:0;
width:5%;
background: linear-gradient(-90deg, #B4C2D3 10%, transparent);
z-index: 3;
}
#staff h2,
.light h2,
.light2 h2{
    color: #293368;
}
.profilBox{
    min-height: 360px;
    position: relative;
    overflow: hidden;
    border-radius: 2em 5em 2em 3em;
    width:240px;
    margin: 0 auto;
}
.profilBox img{
    margin: 0 15px;
    position: absolute;
    bottom:-1px;
    z-index: 4;
    width:200px;
    transition: .4s ease-in-out;
}
.profilBox::after{
    background: linear-gradient(312deg, #1F264E 10%, #293368 85%);
    border-radius: 2em 5em 2em 3em;
    content: "";
    width: 100%;
    height: 130px;
    display: block;
    margin: 0 auto;
    position: absolute;
    bottom:0;
    z-index: 3;
    transition: .3s ease-in;
}
/*.profilBox:hover img*/
div:hover>div>.profilBox img,
div:hover>a>.profilBox img{
    margin: 0 10px;
    width:210px;
}
/*.profilBox:hover::after*/
div:hover>div>.profilBox::after,
div:hover>a>.profilBox::after{
    height:260px;
    background: linear-gradient(312.23deg, rgb(var(--col1)) 9.73%, rgb(var(--col2)) 84.8%);
}
.table .tr{
    margin-top:1px;
    border-radius: 2px;
    transition: .3s;
}
.table .tr:nth-child(odd){
    background-color: rgba(var(--col1),20%);
}
.table .tr:hover{
    font-weight: bold;
    background-color: rgba(var(--col1),40%);
}
/* 
FOR 6 PERSON
@keyframes scroll {
    0% { transform: translateX(0);opacity:0; }
    1% { transform: translateX(0);opacity:1; }
	20% { transform: translateX(calc(-33% * 1)); opacity:1}
	30% { transform: translateX(calc(-33% * 1)); opacity:1}
	50% { transform: translateX(calc(-33% * 2)); opacity:1}
	60% { transform: translateX(calc(-33% * 2)); opacity:1}
	80% { transform: translateX(calc(-33% * 3)); opacity:1}
	99% { transform: translateX(calc(-33% * 3)); opacity:1}
	100% { transform: translateX(calc(-33% * 3)); opacity:0}
} */
/* FOR 5 PERSON */
@keyframes scroll {
    0% { transform: translateX(0);opacity:0; }
    1% { transform: translateX(0);opacity:1; }
	20% { transform: translateX(calc(-33% * 1)); opacity:1}
	45% { transform: translateX(calc(-33% * 1)); opacity:1}
	70% { transform: translateX(calc(-33% * 2)); opacity:1}
	99% { transform: translateX(calc(-33% * 2)); opacity:1}
	100% { transform: translateX(calc(-33% * 2)); opacity:0}
}
/* FOR 5 PERSON */
@keyframes scroll {
    0% { transform: translateX(0);opacity:1; }
    30% { transform: translateX(0);opacity:1; }
	45% { transform: translateX(calc(-33% * 1)); opacity:1}
	85% { transform: translateX(calc(-33% * 1)); opacity:1}
	99% { transform: translateX(calc(-33% * 0)); opacity:1}
	100% { transform: translateX(calc(-33% * 0)); opacity:1}
}
@media (hover: hover) {
    .slider {
        animation: scroll 10s ease-in-out infinite;
    }
}
  
@media (prefers-reduced-motion: reduce) {
    .slider>div {
        animation-name: none;
    }
}

.slider:hover,.slider:focus-within {
animation-play-state: paused;
}

.slider{
    position: relative;
    width: auto;
    max-width: none;
    white-space: nowrap;
}
dialog{
position: fixed;
max-width: 60em;
border-radius: 10px;
padding: 2%;
border:1px solid rgb(var(--col1));
}
dialog::backdrop{
  background: linear-gradient(312.23deg, #1f264ed9 9.73%, #293368cc 84.8%);
  backdrop-filter: blur(3px);
}
.maps iframe{
    border: 0;
    border-radius: 0px 39% 8% 25%;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 6/3.4;
    min-height: 300px;
    max-height: 400px;
    filter: saturate(0.5) grayscale(0.3);
    transition: .5s;
    border: 0;
}
section:hover .maps iframe{
    filter: saturate(1) grayscale(0);
    border-radius: 10px;
}
label{
    display: block;
    padding: 10px;
}
label input[type="text"],
label input[type="email"],
label textarea{
    width:100%;
    max-width: 500px;
    border:0;
    border-bottom:2px solid rgb(var(--col2));
    padding:10px;
    color: rgb(var(--col1));
    font-weight: bold;
    font-size: .9em;
    font-family: 'Rajdhani', Arial, sans-sarif;
}
input::placeholder,
textarea::placeholder{
    font-weight: normal;
}
label input:valid,
label textarea:valid{
    border-color: #81bd4a;
}
footer{
    background-color: #1E1E1E;
    color: #fff;
}
#address{
    background: linear-gradient(360deg, #161C38 9.76%, #191C29 88.13%);
    position: relative;
    overflow: hidden;
    color: #fff;
}
footer #address img{
    width: 17vw;
    max-width:250px;
    min-width: 200px;
    margin-top:2em;
}
@media screen and (max-width: 1200px) {
    
    .w20{ width: 50%;}
    .w25{ width: 50%;}
    .w25:nth-of-type(3){clear: both;}
    .w66{ width: 100%;}
    .btw66, .bmw66{ width: 66%;}
    .btw100{ width: 100%;}
}
@media screen and (max-width: 800px) {
    .mobile-only-visible{
        display: inherit;
    }
    .desktop-only-visible{
        display: none !important;
    }
    .w33{ width: 100%;}
    .btw66{ width: 100%;}
    .bmw33{ width:33%;}
    .tw50{ width: 50%;}
    .btw50{ width: 100%;}

    #mainmenu_btn{
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 60px;
    min-height: 60px;
    background: var(--def-menu-a-color);
    color: var(--def-menu-bg);
    font-size: 22px;
    border: 0;
    z-index:22;
    }
    #mainmenu_btn:hover .fas,
    #mainmenu_btn:focus .fas{
        color: var(--hov-href);
    }
    .navbar{
        position: fixed;
        bottom:0;
        top:auto;
        width:100%;
        z-index: 21;
        padding-bottom: 70px;
    }
    .navbar ul{
        float: none;
        padding:0;
    }
    .navbar ul li{
        text-align: center;
    }
    #mainmenu_items{
        display: none;
    }
    #mainmenu_items.opened{
        display: block;
    }
    #mainmenu_items li{
        display: block;
    }
    #mainmenu_items li ul{
        display: block;
        text-align: center;
        position: static;
        margin: 0;
        height: 0;
        transition: none;
        overflow: hidden;
    }
    #mainmenu_items li.selected ul{
        height:auto;
    }

    #menuitem_lang, #menuitem_account{
        width:50%;
        float:left;
    }

    @keyframes scroll {
        0% { transform: translateX(0);opacity:0; }
        1% { transform: translateX(0);opacity:1; }
        20% { transform: translateX(calc(-100% * 1)); opacity:1}
        30% { transform: translateX(calc(-100% * 1)); opacity:1}
        50% { transform: translateX(calc(-100% * 2)); opacity:1}
        60% { transform: translateX(calc(-100% * 2)); opacity:1}
        80% { transform: translateX(calc(-100% * 3)); opacity:1}
        99% { transform: translateX(calc(-100% * 3)); opacity:1}
        100% { transform: translateX(calc(-100% * 3)); opacity:0}
    }
    main section>.container>h2{
        width: 100%;
        text-align: left;
    }
    footer{
        padding-bottom:60px;
    }
}
@media screen and (max-width: 600px) {

    header #headerBg{
        width: 100%;
        margin: 0;
        border-radius: 0;
        }
    header #headerSlogan{
        width: 100%;
        margin: 0;
        background: linear-gradient(312.23deg, #1f264ed9 9.73%, #293368cc 84.8%);
        border-radius: 0;
        right: 0;
        aspect-ratio: auto;
        bottom: 0;
        top: 0;
    }
    header #headerSlogan h2{
        font-size: 1.2em;
    }
    
    .mobile-hide{
        display: none;
    }
    .w25, .w33, .w50, .w66
    .tw50, .bmw66, .bmw33{
        width: 100%;
    }
    .disp-flex{
        display: initial;
    }
    .mobile-disp-flex{
        display: flex;
    }
}
@media screen and (max-width:410px) {
    header{
        min-height: auto;
        text-align: center;
    }

}