@import '../components/Headers/headerSingleBlog.css';
@import './FasceBlog/intro-stripe.css';
@import './FasceBlog/media-text-stripe.css';
@import './FasceBlog/cta-stripe.css';
@import './FasceBlog/quote-stripe.css';
@import './FasceBlog/download-stripe.css';


/* Text Numbers
---------------------------------------------------------------*/
	.post-text h2,
	.with-counter {
	    position: relative;
	}
	.post-content h2:before,
	.with-counter:before {
	    content: attr(data-counter);
	    position: absolute;
	    top: 40%;
	    transform: translateY(-50%);
	    left: -3.125vw; /*60*/
	    width: 2.083vw; /*40*/
	    height: 2.083vw; /*40*/
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    background-color: var(--color-main-);
	    color: var(--color-pure-white);
	    border-radius: 100%;
	    line-height: 1;
	    font-size: 1.198vw; /*23*/
	    padding-top: 0.208vw; /*4*/
	    font-weight: 400 !important;
	    letter-spacing: 0;
	}
	.media-counter.with-counter {
	    padding-bottom: 1.042vw; /*20*/
	}	
	.media-counter.with-counter:before {
	    position: relative;
	    top: 0;
	    left: 0;
	    transform: unset;
	}

/* General rule
---------------------------------------------------------------*/
	.post-content a:not(.wp-block-button__link):not(.btn) {
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-word;
		hyphens: auto;
	    text-decoration: underline;
	    text-underline-offset: 2px;
	}
	.post-content a:hover {
		text-decoration: unset !important;
	}

	/* Button
	----------------------------------------------------------*/
		body .wp-block-button .wp-block-button__link {
		    color: var(--color-white);
		    background-color: var(--color-main-);
		    margin-top: 0;
		}
		body .wp-block-button .wp-block-button__link:hover {
			background-color: var(--color-main--);
		}
		.description-text a {
		    text-decoration: underline;
		}

    /* Liste
    --------------------------------------------*/
        .post-content ul,
        .post-content ol {
            padding-left: 0;
        }
        ul li,
        ol li {
            margin-left: 30px;
        }
		.post-content li:before {
			left: -27px;
		}


/* Single post start
----------------------------------------------------------------------------------------*/

	/* Wp divider
	---------------------------------------------------*/
		hr.wp-block-separator {
		    border-color: #c0c0c0;
		    margin: 3.333vw auto;
		}

/* Titling format
----------------------------------------------------------------------------------------*/
	.post-content h2,
	.post-content h3,
	.post-content h4 {
	    letter-spacing: -0.05em;
    	font-weight: 600;
	}
	.post-text h2 {
	    margin-top: 3.125vw;
	}
	.post-text h3,
	.post-text h4 {
	    margin-top: 2.083vw;
	}
	.post-content h2,
	.post-content h3 {
	    margin-bottom: 15px;
	}

/* Full HD
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 1920px) {
	}


/* Ok Until 1440px
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 1620px) {

	}

/* Ok Until 1280px
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 1440px) {
		.post-content h2:before, .with-counter:before {
		    width: 30px;
		    height: 30px;
		    font-size: 17px;
		    padding-top: 3px;
    		left: -3.125vw;
		}
	}

/* Ok until 1150px
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 1280px) {
		.post-content h2:before, .with-counter:before {
    		left: -35px;
		}		
	}

/* Ok Until 993px
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 1150px) {

	}

/* Tablet starts
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 992px) {
		.post-content h2,
		.post-content h3 {
		    margin-bottom: 10px;
		}
	}
			
/* Mobile 
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 767px) {
		#article-intro .stripe-container-inner,
		.stripe-with-video .stripe-container-inner,
		.text-stripe .post-content,
		.text-stripe .stripe-container-inner,
		.text-media-stripe .post-content,
		.text-media-stripe .stripe-container-inner,
		.cta-stripe .stripe-container-inner,
		.cta-stripe .stripe-container-inner > *,
		.quote-stripe .stripe-container-inner,
		.download-stripe .stripe-container-inner,
		.download-stripe .stripe-content {
		    padding-left: 0;
		    padding-right: 0;
		}

		.post-content h2:before, .with-counter:before {
		    display: none;
		}
		.post-text {
		    padding-left: 0;
		}	

		/* Horizontal Scrollbar
		-----------------------------------------*/
        	::-webkit-scrollbar{
		        height: 4px !important;
		    }
	}