@import url('https://fonts.googleapis.com/css2?family=Passion+One&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');

@font-face {font-family: 'DKLemon'; src: url('../fonts/LemonYellowSun.otf');}
@font-face {font-family: 'Cardenio'; src: url('../fonts/cardenioModern-bold.otf');}
@font-face {font-family: 'Letters'; src: url('../fonts/lettersForLearners.ttf');}
@font-face {font-family: 'Muara'; src: url('../fonts/MUARA DEMO .ttf');}
                                                                                                   /*==================  GENERALE ==================*/
body,html {
    background-color: #fffffa;
    color: #444;
    font-family: 'Roboto', sans-serif;
}

h1 {font-family: 'Passion One', cursive;}
h2 {font-family: 'Passion One', cursive; font-size: calc(1.5rem + 1.5vw);}
h3 {font-family: 'Cabin', sans-serif;}
a:hover, a:focus, a:visited {text-decoration: none;}

    /*==================  GENERALE ==================*/

.navbar {
    background: #EB976B;
    color: #fffffa;
    font-family: 'Cabin', sans-serif;
    font-size: 1.2rem;
}

.navbar a {color: #fffffa; transition: 0.6s 0s all;}
.navbar a:hover, .navbar a:focus, .navbar a:visited {
    background: #ea6d2b;
    text-decoration: none;
}

.navbar .material-icons {line-height: 1.2; color: #fffffa;}
.collapsed .close {display: none;}
.collapsed .open {display: block;}
.open {display: none;}
.close {display: block;}

/*================== ACCUEIL ==================*/
#accueil {
    background-image: url("../assets/img/accueil.png");
    background-size: auto 100%;
    background-position: bottom;
    min-height: 60vh;
    padding-top: 60px;
    color: #fffffa;
    font-family: 'Passion One';
}

#accueil .info {background: #5C9EAD; color: #fffffa;}
#accueil .info h3 {font-size: calc(18px + 0.5vw);}

.mySousTitre {font-size: calc(20px + 3vw);}
.mySousTitre a, .mySousTitre a:focus, .mySousTitre a:hover, .mySousTitre a:active {color: #fffffa; text-decoration: none;}

.parallelogramme{
    width: auto;
    height: calc(29px + 4vw);
    color: #fffffa;
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
    -o-transform:skew(20deg);
    tranform:skew(20deg);
    overflow: hidden;
}

.myTitreBorder {
    border-right: 4px solid #5c9ead;
    animation: 0.5s 2s myTitre-erase forwards;
}

.myCadre {
    position: absolute;
    width: 0;
    height: calc(29px + 4vw);
    animation: myTitre-apparition 1s 2s forwards;
    border-bottom: 4px solid #5c9ead;
    border-top: 4px solid #5c9ead;
    overflow: hidden;
}

.myCadreLeft {right: 50%;}
.myCadreRight {left: 50%;}

.myCadreLeft::before {
    display: block;
    position: absolute;
    top: -100%;
    content: "";
    height: 100%;
    width: 4px;
    background: #5c9ead;
    animation: myTitre-verticalTop 1s 3s forwards;
}

.myCadreRight::after {
    display: block;
    position: absolute;
    bottom: -100%;
    right: 0;
    content: "";
    height: 100%;
    width: 4px;
    background: #5c9ead;
    animation: myTitre-verticalBottom 1s 3s forwards;
}

.straight {
    position: absolute;
    top: 0;
    -webkit-transform:skew(-20deg);
    -moz-transform:skew(-20deg);
    -o-transform:skew(-20deg);
    tranform:skew(-20deg);
}

.logo-convention {
    position: relative;
    bottom: 0;
    width: calc(100px + 2vw);
}
.transparant {color: transparent;}
.parallelogramme .left {right: -100%; animation: myTitre-left 2s 0s forwards;}
.parallelogramme .right {left: -100%; animation: myTitre-right 2s 0s forwards;}
.parallelogramme  p {font-size: calc(20px + 5vw); line-height: 1; margin: 0;}

@keyframes myTitre-erase { 0%{ border-right: 4px solid #326273;} 100% {border-right: 4px solid transparent;}}
@keyframes myTitre-left { 0% {right: -100%;} 100% {right: 0%;}}
@keyframes myTitre-right { 0% {left: -100%;} 100% {left: 0%;}}
@keyframes myTitre-apparition { 0%{width: 0px;} 100% {width: 50%;}}
@keyframes myTitre-verticalTop { 0%{top: -100%;} 100% {top: 0;}}
@keyframes myTitre-verticalBottom { 0%{bottom: -100%;} 100% {bottom: 0;}}

/*================== PRESENTATION ==================*/

#contact .rond {
    border: 2px solid #444;
    border-radius: 100px;
    line-height: 2;
    height: calc(4rem + 2vw);
    width: calc(4rem + 2vw);
}

.accueilPicto {font-family: 'Cabin', sans-serif; font-size: calc(2rem + 1vw)}
#contact .services p {font-size: calc(0.6rem + 0.3vw); margin-top: 6px;}
/*================== SEPARATION ==================*/

.mySeparation hr {width: 100%; border-top: none;}
.mySeparation hr:nth-child(1) {margin: 0; height: 2px; background-color: #5C9EAD;}
.mySeparation hr:nth-child(2) {margin: 5px 0 0; height: 5px; background-color: #eb976b;}
.mySeparation hr:nth-child(3) {margin: 0; height: 10px; background-color: #326273}
.mySeparation hr:nth-child(4) {margin: 5px 0 0; height: 2px; background-color: #8F725A}

/*================== RESA ==================*/
.resa a {color: #444;}
.phone {font-family: 'Cabin', sans-serif; font-size: calc(2rem + 2vw)}
.phone span {font-size: calc(1.5rem + 2vw);}
.phone a {color: #5C9EAD; transition: 0.2s 0s all;}
.phone a:hover, .phone a:visited, .phone a:focus, .phone a:active {text-decoration: none; color: #EB976B;}

/*================== PRESTATION ==================*/
.myPrestation {
    overflow: hidden;
    border: 4px solid #fffffa;
}

.myPrestation img, .myMiniPrestation img {
    filter: blur(0px) brightness(100%);
    transition: 0.5s 0s all;
}

.myPrestation i {
    position: absolute;
    top:15%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fffff7;
    font-size: calc(60px + 4vw);
    text-shadow: 0px 2px 2px #444;
}



.myMiniPrestation a, .myMiniPrestation a:hover, .myMiniPrestation a:focus, .myMiniPrestation a:visited { color: #444;}

.myMiniPrestation i {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fffff7;
    font-size: 5rem;
    text-shadow: 0px 2px 2px #444;
}


.myPrestation .titre {
    position: absolute;
    bottom: 0;
    height: 30%;
    width: 100%;
    opacity: 1;
    /*background: #251d1a;*/
    text-align: center;
    color: #fffff7;
    transition: 0.6s 0s all;
}

.myPrestation .myBandeau {background: #5C9EAD; height: auto; padding: 5px;}
.myPrestation .myBandeauTaxi {border: 2px solid #fffffa; border-radius: 10px;}
.myPrestation h3 {font-size: calc(1rem + 0.5vw); text-transform: uppercase;}
.myPrestation .info {opacity: 0; transition: 0.4s 0.3s all; color: #fffff7; }
.myPrestation:hover img {filter: blur(2px) brightness(60%);}
.myMiniPrestation:hover img {filter: brightness(60%);}
.myPrestation:hover .titre {bottom: 10%;}
.myPrestation:hover .info {opacity: 1;}

/*================== AVIS ==================*/
.avis, .control-prev, .control-next {color: #EB976B;}
.carousel-indicators li {background-color:  #EB976B;}
.avis img {position: absolute; width: calc(20px + 0.5vw);}

.avis .top-left {top: 0; left:0}
.avis .top-right {top: 0; right:0; transform: rotate(90deg)}
.avis .bottom-left {bottom: 0; left:0; transform: rotate(-90deg)}
.avis .bottom-right {bottom: 0; right:0; transform: rotate(180deg)}

.carousel-caption {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding-top: 20px;
    margin-bottom: 60px;
    text-align: center;
}
/*================== FOOTER ==================*/

footer {background: #326273; color: #fffff7;}
footer a {color: #5C9EAD; transition: 0.3s 0s all;}
footer a:hover, a:active, a:focus {color: #EB976B; text-decoration: none;}

footer ul {list-style: none; padding: 0;}
footer hr {background: #fffffa;}
footer img {width: 40px;}

footer h2 {font-size: 2rem}

.road {overflow: hidden}

.myMiniTaxi {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    animation: 8s 0s drive infinite;
}

.myMiniPerson {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    opacity: 1;
    animation: 8s 0s person infinite;
}

@keyframes drive {
    0% {left: -5%}
    40% {left: 50%}
    45% {left: 50%}
    77% {left: 85%}
    82% {left: 85%}
    100% {left: 100%}
}

@keyframes person {
    0% {opacity: 1; left: 51%}
    40% {opacity: 1; left: 51%}
    41% {opacity: 0; left: 51%}
    79% {opacity: 0; left: 85%}
    100% {opacity: 1; left: 85%}
}

.myhover {
    color: #fffffa;
    text-decoration: none;
    display: inline-block;
    padding: 0px 0px 15px 0px;
    position: relative;
}

.myhover:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 6px;
    left: 50%;
    position: absolute;
    background: #fffffa;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.myhover:hover:after {width: 100%; left: 0;}

/*================== LA PRESTATION ==================*/

#laPrestation .myText {
    text-align: justify;
    font-size: calc(1rem + 0.5vw);
}


.myButton {
    margin: auto;
    padding: 10px 10px;
    width: max-content;
    border-radius: 20px;
    background-color: #5C9EAD;
    color: #fffffa;
    transition: 0.2s 0s all;
}

.myButton:hover {background: #EB976B;}