/*
Theme Name: Infime Infini
Theme URI: https://infimeinfini.fr
Author: Black Hive
Author URI: https://blackhive.fr
Description: Tout l'univers de Amandine H.
Version: 2.0
*/

/*--------------------------------------------------------------

>>> TABLE OF CONTENTS:

----------------------------------------------------------------



	1. Document Setup

    2. Header Section

	3. Nav Section

    4. Blog Section
    
        4.a. Page Navi

	5. Comment Section

    6. Post Section

    7. Portfolio Section

    8. Portfolio Post Section

    9. Footer Section

    10. Contact page

    11. Template page

        11.a. Link tree page
    
    12. Commande personnalisée page

        12.a. Commande personnalisé setup

        12.b. Accordéons

        12.c. Formulaire
    

----------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */


/* 1. 	Document Setup */


/* -------------------------------------------------------------------------- */

*{
    font-family: 'Raleway', sans-serif;
    scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6{
    font-family: "Playfair Display", serif;
    font-weight: bolder;
}
.bold{
    font-weight: bolder;
}
figure.wp-block-image > img,
figure.wp-block-media-text__media > img{
    height: auto;
}
body{
    background: url('https://infimeinfini.fr/wp-content/uploads/2021/11/fond-2.jpg');
}
a{
    color:#ff9900;
    text-decoration: none;
}
a:hover{
  color:#a36201;
}
.current_page_item{
    font-weight: bold;
}
/* -------------------------------------------------------------------------- */


/* 2. Header Section */


/* -------------------------------------------------------------------------- */

.InstagramFeed{
    font-size: 2.5em;
    color: #8224e3;
}
.LogoInfimeInfini{
    width: 300px;
    min-width: 200px;
    fill: #c470e2;
}
.HeaderSection{
    margin: auto auto 75px auto;
}


/* -------------------------------------------------------------------------- */


/* 3. Nav Section */


/* -------------------------------------------------------------------------- */
#primary_menu>li>a {
    color: #c470e2 !important;
}
.nav{
    padding: 3px 0px;
}
.NavSpace{
    margin-bottom: 60px;
}
.nav-link{
    color: #c470e2 !important;
}

/* -------------------------------------------------------------------------- */


/* 4. Blog  Section */


/* -------------------------------------------------------------------------- */

.PostArticle{
    margin: 15px 0;
}
.PostArticle a{
    text-decoration: none !important;
}
.PostArticle h3{
    color: white;
    position: relative;
    top: 40%;
}
.post-thumbnail > img{
    width: 100%;
    height: 100%;
}
.PostDesc{
    position: absolute;
    z-index: 5;
    top: 30px;
    right: 45px;
    bottom: 30px;
    left: 45px;
    padding: 15px;
    text-align: center;
    background-color: rgba(130, 36, 227, 0.75);
    overflow: hidden;
    opacity: 0;
}
.PostDesc:hover{
    animation: showblock 1s forwards;
    -webkit-animation: showblock 1s forwards;
}
.PostDesc:active {
    animation: showblock 1s forwards;
    -webkit-animation: showblock 1s forwards;
}
.PostDesc p{
    color: white;
}
@keyframes showblock{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes showblock {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@media (max-width: 768px){
    .PostDesc{
        opacity: 1;
        background-color: rgba(130, 36, 227, 0.75);
    }
    .PostDesc h3{
        color: black;
    }
    .PostDesc p {
        display: none;
    }
}
.FilterBtn {
    margin: 0 20px;
}

/* -------------------------------------------------------------------------- */


    /* 4.a. Page Navi */


/* -------------------------------------------------------------------------- */

.wp-pagenavi{
    margin:auto;
}

/* -------------------------------------------------------------------------- */


/* 5. Comment Section */


/* -------------------------------------------------------------------------- */

.comments-title{
    margin: 0;
    padding: 30px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
    font-size: 24px;
}
.comments-area ol {
    list-style: none;
    padding: 0;
}
.comment-body {
    margin-bottom: 15px;
    padding: 30px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
}
.comment-respond {
    margin-top: 60px;
}
.comments-area label{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}
.comments-area textarea {
    overflow: auto;
    width: 100%;
    padding-left: 8px;
    vertical-align: top;
}
.comments-area button,
.comments-area input,
.comments-area optgroup,
.comments-area select,
.comments-area textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area input[type="password"],
.comments-area input[type="search"],
.comments-area textarea {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    color: #666;
}
.comment-form .form-submit {
    margin-top: 30px;
}
.comments-area input[type="submit"] {
    margin-top: 5px;
}
.comments-area button,
.comments-area .button,
.comments-area input[type="button"],
.comments-area input[type="reset"],
.comments-area input[type="submit"] {
    padding: 15px;
    border: 0;
    color: #fff;
    background-color: #618eba;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-appearance: button;
}
.comments-area button:hover,
.comments-area .button:hover,
.comments-area input[type="button"]:hover,
.comments-area input[type="reset"]:hover,
.comments-area input[type="submit"]:hover {
    color: #fff;
    background-color: #17191b;
    text-decoration: none;
}
cite.fn{
    font-style: normal;
}

/* -------------------------------------------------------------------------- */


/* 6. Post Section */


/* -------------------------------------------------------------------------- */

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}


/* -------------------------------------------------------------------------- */


/* 7. Portfolio Section */


/* -------------------------------------------------------------------------- */

#portfolio_menu li a img{
    width: 100%;
    height: auto;
}
.BigContainer{
    max-width: 1600px;
}
.BigContainer .col-sm-4{
    margin-bottom: 30px;
}
.BigContainer .col-sm-4:hover{
    filter:grayscale(60%);
}


/* -------------------------------------------------------------------------- */


/* 8. Portfolio Post Section */


/* -------------------------------------------------------------------------- */

#PortfolioPost .col-sm-4 {
    margin-bottom: 30px;
}
#PortfolioPost .col-sm-4:hover {
    filter: grayscale(60%);
}


/* -------------------------------------------------------------------------- */


/* 9. Footer Section */


/* -------------------------------------------------------------------------- */
footer,
footer > a,
footer > .nav-link {
    color:#c470e2 !important;
}
.PostArticle{
    overflow: hidden;
    position: relative;
}
.site-footer {
    position: relative;
    padding: 40px 0 30px;
    font-size: 14px;
    text-align: center;
}
.scroll-container:hover{
    cursor: pointer;
}
.scroll-container a {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 10px;
    border: 1px solid #1c1c1c;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    margin: 0 0 20px 0;
}
.scroll-container a:hover {
    color: #fff;
    background-color: #a36201;
}
.Social-Footer {
    list-style-type: none;
    font-size: 1.5em;
}

/* -------------------------------------------------------------------------- */


/* 10. Contact page */


/* -------------------------------------------------------------------------- */

.wpcf7-form label{
    width: 100%;
}
.LabelText{
    text-align: left;
}
.wpcf7-form-control-wrap,
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea
{
    width: 100%;
}
.wpcf7-submit{
    padding: 15px;
    border: 0;
    color: #fff;
    background-color: #618eba;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-appearance: button;
}
span.wpcf7-list-item > input{
    width: 12.667px;
}

/* -------------------------------------------------------------------------- */


/* 11. Template page */


/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */


/* 11.a. Link tree page */


/* -------------------------------------------------------------------------- */

.linktree-header > div.row > a{
    margin:40px auto;
	-webkit-margin: 40px auto;
}
.SizePageLinktree {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* -------------------------------------------------------------------------- */


/* 11. Commande personalisée page */


/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */


/* 12.a. Commande personalisée setup */


/* -------------------------------------------------------------------------- */
.IlluPerso > h2{
    margin: 40px;
}
.IlluPerso>h3 {
    margin: 40px;
}
.IlluPerso>h4 {
    margin: 40px;
}
.IlluPerso>h5 {
    margin: 40px;
}
.IlluPerso > .wp-block-buttons{
    margin: 50px auto;
}
.CmdButtonForm > a{
    padding: 20px 50px;
    border-radius: 50px;
}
.CmdButtonForm > a:hover {
    text-decoration: none;
    background-color: #ff9d1e !important;
}
.IlluPerso > .has-large-font-size{
    margin: 50px auto 70px auto;
}
.story{
 margin: 20px;
}
.Author{
    background-color: thistle;
    padding: 25px;
}

/* -------------------------------------------------------------------------- */


/* 12.b. Accordéon */


/* -------------------------------------------------------------------------- */
/* The accordion item container */
.c-accordion__item {
    margin: 15px auto;
}

/* An accordion item title */
.c-accordion__title {
    font-size: 1.4em;
    font-weight: normal;
}

/* An accordion item content container */
.c-accordion__content {
    padding-top: 10px;
}

/* is-open is added to open accordion items
.c-accordion__item.is-open {}*/

/* is-read is added to accordion items that have been opened at least once 
.c-accordion__item.is-read {}*/

/* An accordion item title that is using a `<button>` tag 
.c-accordion__title--button {}*/

/* To modify the style when hovering over an accordion item title 
.c-accordion__title:hover {}*/

/* To modify the style when an accordion item title currently has broswer focus 
.c-accordion__title:focus {}*/

/* -------------------------------------------------------------------------- */


/* 12.c. Formulaire */


/* -------------------------------------------------------------------------- */
.SubmitCmd {
    font-weight: bold !important;
}
#happyforms-1878_radio_5-part > div > div > div > label.option-label,
#happyforms-1878_radio_3-part > div > div > div > label.option-label {
    display: flex;
    flex-direction: column;
}
.happyforms-radio-circle{
border: 5px solid #dd9933;
background-color: transparent !important;
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50%;
}
/* Style d'illu */

/* sur photo */
#radio_3_option_1611683684424 > label > span.checkmark{
    background-image: url(https://infimeinfini.fr/wp-content/uploads/2020/08/photo-illu.jpg) !important;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
}

/* au trait */
#radio_3_option_1611683694325 > label > span.checkmark{
    background-image: url(https://infimeinfini.fr/wp-content/uploads/2020/08/illu-trait.jpg) !important;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
}

/* couleur */
#radio_3_option_1611683700206 > label > span.checkmark{
    background-image: url(https://infimeinfini.fr/wp-content/uploads/2020/08/illu-couleur.jpg) !important;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
}

/* décor */
#radio_3_option_1611683704636 > label > span.checkmark{
    background-image: url(https://infimeinfini.fr/wp-content/uploads/2020/08/illu-deco.jpg) !important;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
}

/* IMAGE STYLES */

/* numérique */
#radio_5_option_1611683838882 > label > span.checkmark{
    background-image: url(https://infimeinfini.fr/wp-content/uploads/2021/04/fond-decran-scaled.jpg) !important;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
}

/* a5 */
#radio_5_option_1611683864860 > label > span.checkmark{
    background-image: url(https://infimeinfini.fr/wp-content/uploads/2021/04/mockup-illustrations.jpg) !important;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
}

/* a4 */
#radio_5_option_1611683868261 > label > span.checkmark{
    background-image: url(https://infimeinfini.fr/wp-content/uploads/2021/04/mockup-flyer-scaled.jpg) !important;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
}

/* a3 */
#radio_5_option_1611683872479 > label > span.checkmark{
    background-image: url(https://infimeinfini.fr/wp-content/uploads/2021/04/mockup-affiche-1.jpg) !important;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
}