@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,600;0,900;1,400;1,600;1,900&family=Marcellus+SC:ital,wght@0,100;0,200;0,300;0,400;0,600;0,900;1,400;1,600;1,900&display=swap');
:root{
--fr-color-site : 11 56 99;
--fr-color-site-dark : 8 40 70;
--fr-color-site-acc : 44 43 46;
--fr-color-site-acc-dark : 27 26 28;
--fr-color-font : 85 85 85;

    --fr-font1 : Roboto Condensed;
    --fr-font2 : Marcellus SC;
}
body{
font-family:var(--fr-font1), sas-serif;
color:rgb(var(--fr-color-font));
background-color: rgb(var(--fr-color-site-acc));
}
.font1{
font-family:var(--fr-font1), sans-serif;
}
.font2{
font-family:var(--fr-font2), sans-serif;
}
.opacity-5{
--fr-opacity: 5% !important;
}
.opacity-10{
    --fr-opacity: 10% !important;
}
.opacity-20{
    --fr-opacity: 20% !important;
}
.opacity-30{
    --fr-opacity: 30% !important;
}
.opacity-40{
    --fr-opacity: 40% !important;
}
.opacity-50{
    --fr-opacity: 50% !important;
}
.opacity-60{
    --fr-opacity: 60% !important;
}
.opacity-70{
    --fr-opacity: 70% !important;
}
.opacity-80{
    --fr-opacity: 80% !important;
}
.opacity-90{
    --fr-opacity: 90% !important;
}
.opacity-100{
    --fr-opacity: 100% !important;
}
.bg-site{
--fr-opacity:100%;
background-color:rgb(var(--fr-color-site) / var(--fr-opacity)) !important;
}
.bg-site-dark{
background-color:rgb(var(--fr-color-site-dark)) !important;
}

.bg-site-5{
background-color:rgb(var(--fr-color-site) /5%) !important;
}
.bg-site-10{
background-color:rgb(var(--fr-color-site) /10%) !important;
}
.bg-site-20{
background-color:rgb(var(--fr-color-site) /20%) !important;
}
.bg-site-30{
background-color:rgb(var(--fr-color-site) /30%) !important;
}
.bg-site-40{
background-color:rgb(var(--fr-color-site) /40%) !important;
}
.bg-site-50{
background-color:rgb(var(--fr-color-site) /50%) !important;
}
.bg-site-60{
background-color:rgb(var(--fr-color-site) /60%) !important;
}
.bg-site-70{
background-color:rgb(var(--fr-color-site) /70%) !important;
}
.bg-site-80{
background-color:rgb(var(--fr-color-site) /80%) !important;
}
.bg-site-90{
background-color:rgb(var(--fr-color-site) /90%) !important;
}
.bg-site-dark-10{
background-color:rgb(var(--fr-color-site-dark) /10%) !important;
}
.bg-site-dark-20{
background-color:rgb(var(--fr-color-site-dark) /20%) !important;
}
.bg-site-dark-30{
background-color:rgb(var(--fr-color-site-dark) /30%) !important;
}
.bg-site-dark-40{
background-color:rgb(var(--fr-color-site-dark) /40%) !important;
}
.bg-site-dark-50{
background-color:rgb(var(--fr-color-site-dark) /50%) !important;
}
.bg-site-dark-60{
background-color:rgb(var(--fr-color-site-dark) /60%) !important;
}
.bg-site-dark-80{
background-color:rgb(var(--fr-color-site-dark) /80%) !important;
}
.bg-site-acc {
background-color: rgb(var(--fr-color-site-acc)) !important;
}
.bg-site-acc-10{
background-color: rgb(var(--fr-color-site-acc) /10%) !important;
}
.bg-site-acc-20{
background-color: rgb(var(--fr-color-site-acc) /20%) !important;
}
.bg-site-acc-30{
background-color: rgb(var(--fr-color-site-acc) /30%) !important;
}
.bg-site-acc-40{
background-color: rgb(var(--fr-color-site-acc) /40%) !important;
}
.bg-site-acc-50{
background-color: rgb(var(--fr-color-site-acc) /50%) !important;
}
.bg-site-acc-60{
background-color: rgb(var(--fr-color-site-acc) /60%) !important;
}
.bg-site-acc-70{
background-color: rgb(var(--fr-color-site-acc) /70%) !important;
}
.bg-site-acc-80{
background-color: rgb(var(--fr-color-site-acc) /80%) !important;
}
.bg-site-acc-90{
background-color: rgb(var(--fr-color-site-acc) /90%) !important;
}
.bg-site-acc-light {
background-color: rgb(var(--fr-color-site-acc-light));
}
.bg-site-light {
background-color: rgb(var(--fr-color-site-light));
}
.border-site {
border-color: rgb(var(--fr-color-site)) !important;
}
.border-acc{
border-color: rgb(var(--fr-color-site-acc)) !important;
}
.text-site{
color: rgb(var(--fr-color-site));
}
.text-site-light{
color: rgb(var(--fr-color-site) /50%);
}
.text-site-75{
color: rgb(var(--fr-color-site) /75%);
}
.text-site-dark{
color: rgb(var(--fr-color-site-dark));
}
.text-site-dark-50{
color: rgb(var(--fr-color-site-dark) /50%);
}
.text-site-acc {
color: rgb(var(--fr-color-site-acc));
}
.text-site-acc-light {
color: rgb(var(--fr-color-site-acc-light));
}
.bg-gradient-dark{
background-image:linear-gradient(180deg, rgb(var(--fr-color-site-dark)/100%), rgb(var(--fr-color-site-dark)/0%))
}
.bg-gradient-white{
background-image:linear-gradient(180deg, rgb(255 255 255 /40%),  rgb(255 255 255/0%))
}
.bg-gradient-white-120{
background-image:linear-gradient(120deg, rgb(255 255 255 /40%),  rgb(255 255 255/0%))
}
.btn-site-acc {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site-acc));
--bs-btn-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-acc-dark));
}
.btn-site {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site));
--bs-btn-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-dark));
}
.btn-site-light {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site-light));
--bs-btn-border-color: rgb(var(--fr-color-site));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-dark));
}
.lh-normal{
line-height:normal !important;
}
.vertical-center {
min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-)       */

display: flex;
align-items: center;
}
.spooler{
display:none;
}
.preview{
display:none;
z-index:10000 !important;
}
.ft-12 {
font-size: 12px;
}
.ft-14 {
font-size: 14px;
}
.ft-16 {
font-size: 16px;
}
.ft-18 {
font-size: 18px;
}
.ft-19 {
font-size: 19px;
}
.ft-24 {
font-size: 24px;
}
.ft-28 {
font-size: 28px;
}
.ft-32 {
font-size: 32px;
}
.ft-36 {
font-size: 36px;
}
.ft-40 {
font-size: 40px;
}
.ft-48 {
font-size: 48px;
}
.ft-52 {
font-size: 52px;
}

.ft-72 {
font-size: 72px;
}
@media (max-width: 768px){
.ft-sm-12{
font-size: 12px !important;
}
.ft-sm-14{
font-size: 14px !important;
}
.ft-sm-16{
font-size: 16px !important;
}
.ft-sm-18{
font-size: 18px !important;
}
.ft-sm-20{
font-size: 20px !important;
}
.ft-sm-24{
font-size: 24px !important;
}
.ft-sm-28{
font-size: 28px !important;
}
.ft-sm-32{
font-size: 32px !important;
}
.ft-sm-36{
font-size: 36px !important;
}
.ft-sm-48{
font-size: 48px !important;
}
.ft-sm-52{
font-size: 52px !important;
}
.ft-sm-58{
font-size: 58px !important;
}
}
::placeholder {
color: #999999 !important;
font-size:16px;
opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
color: #999999 !important;
font-size:16px;
}
header{
position: relative;
background-color: rgb(14, 51, 88);
overflow: hidden;
}
.rgpd input {
width: 20px;
height: 20px;
}
.header-bg {
background-image: url(https://www.culomaavocat.fr/culomaavocat/img/headerImg_1734454735_0.jpg);
background-repeat: no-repeat;
background-position: bottom right;
background-size: cover;
/* border-bottom: solid 10px rgba(201,39,39,1); */
position: relative;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .4;
}
.header-text{
position: absolute;
width: 100%;
}
.header-text h1 {
border-bottom: solid 1px #FFFFFF;
display: initial;
position: relative;
font-family: "Marcellus SC", Helvetica, sans-serif;
font-weight: 400;
text-transform: uppercase;
}
.header-text h1::before, .header-text h1::after {
content: '';
position: absolute;
width: 15px;
}
.description {
font-family: 'Roboto', sans-serif;
font-size: 1.5rem;
font-weight: 300;
font-style: italic;
}
.header-text h1::before {
background-color: rgb(31, 113, 195);
left: calc(50% - 7.5px);
height: 15.5px;
bottom: -16.5px;
}
.header-text h1::after {
background-color: rgba(201,39,39,1);
left: calc(50% + 8px);
height: 15px;
bottom: -16px;
}
.header-body h1 {
font-family: "Marcellus SC", Helvetica, sans-serif;
font-size: 6.5rem;
text-shadow: 0px 4px 10px rgba(1, 1, 3, .6);
font-weight: 400;
}
.header-text h3 {
margin-top: 2.5rem;
letter-spacing: 2px;
}
.header-top {
background-color: #000;
height: 50px;
}
.header-footer {
height: 4px;
background-color: rgba(201,39,39,1);
}
main {
margin-top: 0;
position: relative;
font-size: 1.2rem;
padding: 50px 0 75px;
}
main h3 {
font-family: 'Roboto', sans-serif;
font-size: 3rem;
font-weight: 800;
background-color: rgb(11, 56, 99);
padding: 1rem;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
position: relative;
box-shadow: 0 -7px 15px rgba(0,0,0,.6);
line-height: 100%;
}
.form-send {

}
.form-display {
position: relative;
margin-top: -9rem;
transform: rotate(3deg);
}
.form-body {
background-color: rgb(207, 207, 207);
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
box-shadow: 0 5px 15px rgba(0,0,0,1);
}
.specialites {
margin-top: 25px;
}
.specialites li {
margin-bottom: 1rem;
font-size: 19px;
color: #fff;
background-color: rgba(30, 113, 195, .5);
padding: .5rem 1rem;
letter-spacing: .2rem;
}
.specialites li:hover {
background-color: rgba(30, 113, 195, 1);
}
.form-control {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 1.2rem;
}

.bloc-title {
padding-top: 10%;
position: relative;
z-index: 10;
}
.specialites ul {
list-style: none;
margin: 0 !important;
}
.appel {
font-size: 21px;
line-height: 0.95em;
position: absolute;
width: 305px;
padding: 15px 15px 31px;
z-index: 1;
left: 50%;
background: rgb(255,252,252);
background: -moz-linear-gradient(top, rgba(255,252,252,1) 30%, rgb(171, 170, 170) 100%);
background: -webkit-linear-gradient(top, rgba(255,252,252,1) 30%,rgb(171, 170, 170) 100%);
background: linear-gradient(to bottom, rgba(255,252,252,1) 30%,rgb(171, 170, 170) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcfc', endColorstr='#abaaaa',GradientType=0 );
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
box-shadow: 0px 15px 15px rgba(0,0,0,0.6);
transform: translateX(100%) rotate(3deg);
top: -10px;
border: solid 3px rgba(255, 255, 255, 0.7);
}
.appel h3 {
font-weight: 900;
font-size: 36px;
line-height: 0.9em;
}
.appel .btn {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 200px;
}
.appel .btn-warning {
color: #ffffff;
background-color: #ff7707;
border-color: #ff7707;
}
footer{
background-color: #fff;
}
.name {
font-family: "Marcellus SC", Helvetica, sans-serif;
font-size: 1.4rem;
line-height: 100%;
margin-top: 2rem;
}
#mickael-culoma {
position: absolute;
top: 10px;
left: 3%;
bottom: 0;
z-index: 2;
background: url(https://www.culomaavocat.fr/culomaavocat/img/headerImgBg_1734454735_0.png) no-repeat top left;
background-size: contain;
width: 550px;
}
@media (max-width: 440px) {
#mickael-culoma {
left: -30% !important;
height: 505px;
top: 220px;
display: none;
}
.header-text {
top: 42% !important;
}
.form-display {
margin-top: 0 !important;
}
}
@media (max-width: 1024px){
.appel {
position: relative;
transform: none;
margin: 0px auto 25px;
width: 100%;
max-width: 300px;
left: 0;
}
#mickael-culoma {
left: -20%;
}
.form-display {
margin-top: -5rem;
transform: rotate(0deg);
}
main h3 {
font-size: 1.75rem;
}
.header-text {
top: 45%;
z-index: 100;
}
.header-bg{
height: 400px;
}
.header-text h3 {
font-size: 1.5rem;
padding: 0 1.5rem;
}
.description {
font-size: 1rem;
}
.specialites li {
margin-bottom: .3rem;
padding: .3rem 1rem;
line-height: 110%;
}
}
@media only screen and (min-width: 1280px) {
.header-bg {
min-height: 550px;
}
#mickael-culoma {
left: 10%;
width: 550px;
}
.header-text {
left: 50%;
top: 50%;
width: 100%;
transform: translate(-50%,-50%);
z-index: 10000;
}
.header-text h1 {
font-size: 5rem;
text-shadow: 0px 4px 10px rgba(1, 1, 3, .6);
letter-spacing: 1rem;
padding: 0 5rem;
}
.container {
max-width: 1380px;
}
}
@media only screen and (max-width: 1440px)
{
#mickael-culoma {
left: 0;
width: 550px;
}
}
@media only screen and (min-width: 2500px)
{
#mickael-culoma {
left: 15%;
}
}