@charset "UTF-8";

/* Palette used: http://www.colourlovers.com/palette/871636/A_Dream_in_Color */
/* Palette used: http://www.colourlovers.com/palette/4445126/Blossom_Dearie */
/* Palette used: http://www.colourlovers.com/palette/443995/i_demand_a_pancake */

@font-face {
    font-family: "Om Telolet Om";
    src: url("../fonts/Om Telolet Om.otf") format('opentype');
}
@font-face {
    font-family: "Om Telolet Om";
    src: url("../fonts/Om Telolet Om.ttf") format('truetype');
}

@-webkit-keyframes appears {
    0% { opacity: 0; top: -20px; }
    100% { opacity: 1.0; top: 0px; };
}
@-moz-keyframes appears {
    0% { opacity: 0; top: -20px; }
    100% { opacity: 1.0; top: 0; };
}
keyframes appears {
    0% { opacity: 0; top: -20px; }
    100% { opacity: 1.0; top: 0; };
}

body {
    background: #f8f9fa;
}

p {
    text-indent: 1.33em;
}

nav.navbar {
    border-bottom-width: 3px !important;
}
footer.navbar {
    border-top-width: 2px !important;
}
nav.navbar .navbar-brand {
    font-family: "Om Telolet Om";
    line-height: 75%;
    font-size: 250%;
}
nav.navbar a, footer a {
    color: white;
}
nav.navbar a:hover, footer a:hover {
    color: #E5FCC2;
}

.hero, .hero-alone {
    background-size: cover;
    background-position: center;
}
.hero#a-propos {
    background-image: url('../img/header.webp');
}
.hero-inner {
    color: white;
    height: 100%;
    width: 100%;
}
#a-propos .hero-inner {
    padding-top: 3vh;
}
.carte {
    height: 70vh;
    width: 100%;
}
#a-propos .hero-inner,
#l-osteopathie .hero-inner,
#formation .hero-inner {
    //background-color: rgba(0,115,75,0.1);
}
#l-osteopathie div.row {
    margin: 15px 0;
}
h1, h2, h3 {
    font-family: "Om Telolet Om";
    position: relative;
}
.hero .hero-inner h1 {
    animation: appears 1s ease-in both;
    -moz-animation: appears 1s ease-in both;
    -webkit-animation: appears 1s ease-in both;
    opacity: 0;
}
.hero .hero-inner h2 {
    color: #eee;
    animation: appears 1s ease-in .5s both;
    -moz-animation: appears 1s ease-in .5s both;
    -webkit-animation: appears 1s ease-in .5s both;
}
.hero .hero-inner h3 {
    color: #ddd;
    animation: appears 1s ease-in .75s both;
    -moz-animation: appears 1s ease-in .75s both;
    -webkit-animation: appears 1s ease-in .75s both;
}
.hero .hero-inner a {
    animation: appears 1s ease-in 1s both;
    -moz-animation: appears 1s ease-in .75s both;
    -webkit-animation: appears 1s ease-in .75s both;
}
.hero .hero-inner h4 {
    animation: appears 1s ease-in 1s both;
    -moz-animation: appears 1s ease-in 1s both;
    -webkit-animation: appears 1s ease-in 1s both;
}

.hero .card {
    animation: appears 1s ease-in 1s both;
    -moz-animation: appears 1s ease-in 1s both;
    -webkit-animation: appears 1s ease-in 1s both;
}

.d-md-block h1 {
    position: relative;
    top: 30%;
}
#horaires table,
#tarifs table {
    margin: auto;
}
#horaires table {
    max-width: 450px;
}
#tarifs table {
    max-width: 450px;
}

#address {
    background-color: #547980;
    position: absolute;
    right: 0px;
    padding: 7px 10px;
    border-radius: 0 0 0 15px;
    opacity: 0.85;
}
#address h2 {
    margin-bottom: 0px;
    text-align: center;
}
#address div {
    font-size: 120%;
    margin-bottom: 5px;
}
#address small {
    font-style: italic;
}