/* Custom Stylesheet */


/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

.icon-block {
    padding: 0 15px;
}

.icon-block .material-icons {
    font-size: inherit;
}


/********
NAV - Header
*********/

.logo {
    width: 40px;
    float: left;
    margin-top: 4%;
}

.blue {
    background-color: #4C76B6 !important;
}

nav {
    height: 65px;
    line-height: 70px;
}

nav h1 {
    font-size: 0.6em;
    margin: 0.7em 1.68em 0em 3em;
}

.sous-titre {
    font-size: 0.7em;
}

div#index-banner.section.no-pad-bot {
    background-image: url(https://mathiasmiltenberger-osteopathe.fr/images/hero2.jpg);
    background-repeat: no-repeat;
    background-size: cover;

}

@media screen and (max-width:480px) {
    nav h1 {
        font-size: 0.7em;
        margin: 0.6em 0 0 3em;
    }
    .logo {
        width: 11%;
        margin-top: 5%;
        margin-left: 8%
    }
}

@media only screen and (max-width: 600px) {
    nav,
    nav .nav-wrapper i,S
    nav a.button-collapse,
    nav a.button-collapse i {
        height: 68px;
        line-height: 71px;
    }
}

@media screen and (max-width:372px) {
    nav h1 {
        font-size: 0.6em;
        margin: 0.8em 0 0 3em;
    }
}

.tel {
    color: #efae4f;
    font-weight: bold;
}


/*********
HERO - Presentation
************/

h2 {
    font-size:3rem;
}
.portrait {
    margin: 15% auto;
    width: 80%;
    border: 1px solid #000000;
    display: block;
}

.texte-intro {
    font-size: 1.3em
}

    .texte {
    font-size: 1.2em;
}

/*
.orange {
    color: #efae4f !important;
}
*/

#download-button {
    background-color: #efae4f !important;
}

/**************
Contenu - Texte
****************/


h3 {
    font-size: 2em;
    margin: 5% 0 3% 0;
}

.btn.rdv {
    background-color: #e2ad42;
}


.two-col-special {
    overflow: auto;
    margin: 0;
    padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top; /* In case multi-word categories form two lines */
    font-size: 1.2em;
}
.two-col-special li:before {
    content: '+';
    padding: 5px;
    margin-right: 5px; /* you can tweak the gap */
    color: orange;
    background-color: white; /* in case you want a color... */
    display: inline-block;
}
@media screen and (max-width:1708px) {
    .texte-intro {
        font-size: 1.1em;
    }
     .portrait {
        margin-top: 20%;
    }
    
    .texte{
        font-size: 1.1em;
    }
    
    .two-col-special li {
        font-size: 1.1em;
    }

}

@media screen and (max-width:1387px) {
    .texte-intro {
        font-size: 1em;
    }
    
    .portrait {
        margin-top: 25%;
    }
     .texte {
        font-size: 1em;
    }
    
      .two-col-special li {
        font-size: 1em;
    }
}

@media screen and (max-width:1200px) {
    .texte-intro {
        font-size: 1em;
    }
    .portrait {
        margin-top: 35%;
    }
    .texte {
        font-size: 1em;
    }
}

@media screen and (max-width:1010px) {
    .portrait {
        margin-top: 50%;
    }
}

@media screen and (max-width:992px) {
    .portrait {
        margin-top: 25%;
        width: 100%;
    }
}

@media screen and (max-width:740px) {
    .two-col-special li {
        font-size: 0.9em;
    }
    li:nth-child(2), li:nth-child(4), li:nth-child(6), li:nth-child(8), li:nth-child(10),li:nth-child(12)  {
        padding-left: 5%;
    }
}

@media screen and (max-width:680px) {
    li:nth-child(2), li:nth-child(4), li:nth-child(6), li:nth-child(8), li:nth-child(10),li:nth-child(12)  {
        padding-left: 0%;
    }

}

@media screen and (max-width:654px) {
    .portrait {
        width: 80%;
    }
}


}

@media screen and (max-width:640px) {
    .two-col-special li {
    display: inline;
    }
    
    .two-col-special li:before {
    content: '+';
    padding: 0;
    margin-right: 5px; /* you can tweak the gap */
}


}
/*********
Footer
************/

footer.page-footer {
    padding-top: 0px; /* Override d'une classe materialize */
}