/* Custom CSS 
/* HELLOWWW STUDIO */

* { box-sizing: border-box; animation-fill-mode: forwards !important; }

/* ANIMATIONS */
@keyframes elementLoading {
	from { opacity: .5; }
	50% { opacity: 1; }
	to { opacity: .5; }
}

/* HEADER */
.elementor-location-header .elementor-top-section.menu-head > .elementor-container { border-bottom: 1px solid #d9d8d8; }

/* MAX WIDTH */
body > .container > .container_inner { max-width: 75vw; width: 100%; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 75vw; }

/* BREADCRUMB */
.rank-math-breadcrumb { color: #000000; font-family: "Open Sans", Sans-serif; font-size: 0.785em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
.rank-math-breadcrumb .separator { display: inline; background: unset; color: inherit; }

/* FILTER POSTS */
.subcategories { display: flex; border: 1px solid #afacac; padding: .5em 1em; margin-bottom: 3em; }
.subcategories .subcategories-title p { color: #000000; font-family: "Cormorant Garamond", Sans-serif; font-size: 1em; font-weight: 300; font-style: italic; }
.subcategories .filters .radio-element { display: inline-flex; align-items: center; color: #000000; font-family: "Open Sans", Sans-serif; font-size: 0.785em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
.subcategories .filters .radio-element input.hidden { display: none; }
.subcategories .filters .radio-element input.hidden + label.chk { display: flex; width: 1em; height: 1em; border: 1px solid #000000; margin: 0 .6em 0 1em; position: relative; }
.subcategories .filters .radio-element input.hidden + label.chk:before,
.subcategories .filters .radio-element input.hidden + label.chk:after { content: ""; display: block; width: 1px; height: 1.25em; position: absolute; top: 50%; left: 50%; transform-origin: center; background: #000000; opacity: 0; transition: .3s; }
.subcategories .filters .radio-element input.hidden + label.chk:before { transform: translate(-50%,-50%) rotate(45deg); }
.subcategories .filters .radio-element input.hidden + label.chk:after { transform: translate(-50%,-50%) rotate(-45deg); }
.subcategories .filters .radio-element input.hidden:checked + label.chk:before,
.subcategories .filters .radio-element input.hidden:checked + label.chk:after { opacity: 1; transition: .3s; }
/* POSTS GRID MASONRY */
#otherposts .elementor-post.elementor-grid-item { display: flex; flex-wrap: wrap; justify-content: center; word-break: initial; }
#otherposts .elementor-post.elementor-grid-item .elementor-post__text { display: flex; flex-wrap: wrap; justify-content: center; padding: 1em 2em; }
#otherposts .elementor-post.elementor-grid-item .elementor-post__text .elementor-post__title { order: 1; display: block; width: 100%; padding: 0 1em 1em; }
#otherposts .elementor-post.elementor-grid-item .elementor-post__text .elementor-post__meta-data { order: 3; }
#otherposts .elementor-post.elementor-grid-item .elementor-post__text .elementor-post__meta-data .elementor-post-date { text-transform: uppercase; padding-top: 2em; }
#otherposts .elementor-post.elementor-grid-item .elementor-post__text .elementor-post__excerpt { order: 2; }
#otherposts .elementor-post.elementor-grid-item .elementor-post__thumbnail img { position: absolute; object-fit: cover; height: 100%; }
#otherposts .elementor-post.elementor-grid-item:nth-child(odd) .elementor-post__thumbnail { padding-bottom: calc( 1.28 * 100% ); }
#otherposts .elementor-post.elementor-grid-item:nth-child(even) .elementor-post__thumbnail { padding-bottom: calc( 1 * 100% ); }

#otherposts .elementor-post.elementor-grid-item.loading { background: #eee; animation: elementLoading 1.6s ease-in-out infinite 0s; }
#otherposts .elementor-post.elementor-grid-item.loading span { display: block; width: 100%; }
#otherposts .elementor-post.elementor-grid-item.loading:nth-child(odd) span { padding-bottom: calc( calc( 1.28 * 100% ) + calc( 0.47 * 100%) ); }
#otherposts .elementor-post.elementor-grid-item.loading:nth-child(even) span { padding-bottom: calc( calc( 1 * 100% ) + calc( 0.47 * 100%) ); }

.griottesposts .elementor-post.elementor-grid-item .elementor-post__thumbnail img { position: absolute; object-fit: cover; height: 100%; }

.home #firstpost .elementor-post.elementor-grid-item .elementor-post__thumbnail img { position: absolute; }
.home #firstpost .elementor-post.elementor-grid-item .elementor-post__text { display: flex; flex-wrap: wrap; align-content: center; padding-left: 45px; }
.home #firstpost .elementor-post.elementor-grid-item .elementor-post__text .elementor-post__meta-data { display: block; width: 100%; }
.home #firstpost .elementor-post.elementor-grid-item .elementor-post__text .elementor-post__title { order: 2; padding-bottom: 1em; }
.home #firstpost .elementor-post.elementor-grid-item .elementor-post__text .elementor-post__excerpt { order: 3; }
.home #firstpost .elementor-post.elementor-grid-item .elementor-post__text .elementor-post-date { order: 1; }
.home #firstpost .elementor-post.elementor-grid-item .elementor-post__text .elementor-post-author { order: 4; padding-top: 2em; }
.home #firstpost .elementor-post.elementor-grid-item .elementor-post__text .elementor-post-author:before { content: ""; display: inline-block; width: 3.75em; height: 1px; background: currentColor; transform: translateY(-.3em); margin-right: 1em; }

#postslist .elementor-posts-nothing-found { padding: 2em; border: 1px dashed #eee; margin-top: 2em; }

.elementor-widget-hws_portfolio.elementor-posts--align-left .elementor-portfolio-item__overlay { text-align: left; }
.elementor-widget-hws_portfolio.elementor-posts--align-right .elementor-portfolio-item__overlay { text-align: right; }
.elementor-widget-hws_portfolio.elementor-posts--align-center .elementor-portfolio-item__overlay { text-align: center; }

#comments { max-width: 66%; }
#comments .comments-header .nb_comments { color: #000000; font-family: "Open Sans", Sans-serif; font-size: 0.785em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
#comments .comments-header .respond_link { display: none; }
#comments li.comment { display: grid; grid-template-areas: "aa ab ac" "ba bb bc" "ca cb cc"; grid-template-columns: 120px 1fr 200px; }
#comments li.comment .avatar-author { grid-row: aa-start / ca-end; grid-column: aa-start / aa-end; justify-self: center; align-self: center; }
#comments li.comment .avatar-author img { width: 60px; height: 60px; border-radius: 30px; overflow: hidden; }
#comments li.comment .comment-author { grid-row: aa-start / aa-end; grid-column: ab-start / ab-end; }
#comments li.comment .date { grid-row: ba-start / ba-end; grid-column: ab-start / ab-end; color: #000000; font-family: "Open Sans", Sans-serif; font-size: 0.785em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
#comments li.comment .comment { grid-row: ca-start / ca-end; grid-column: ab-start / ac-end; }
#comments li.comment .reply { grid-row: aa-start / aa-end; grid-column: ac-start / ac-end; justify-self: flex-end; }
#comments #respond { margin: 4em 0; }
#comments #respond #response_form { color: #000000; font-family: "Cormorant Garamond", Sans-serif; font-size: 1.4228em; font-weight: 500; text-transform: uppercase; }
#comments #respond p.obligatoire { font-family: "Cormorant Garamond", Sans-serif; font-size: 1em; font-weight: 300; font-style: italic; }
#comments #respond #commentform label { display: none; }
#comments #respond #commentform .message .comment textarea { border: 1px solid #bfbebc; }
#comments #respond #commentform input[type="text"] { border: 1px solid #bfbebc; }
#comments #respond #commentform .message { grid-row: aa-start / ac-end; grid-column: aa-start / ac-end; }
#comments #respond #commentform .userinfos { display: grid; grid-template-areas: "aa ab ac" "ba bb bc"; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 15px; }
#comments #respond #commentform .userinfos .author { grid-row: ba-start / ba-end; grid-column: ba-start / ba-end; }
#comments #respond #commentform .userinfos .email { grid-row: bb-start / bb-end; grid-column: bb-start / bb-end; }
#comments #respond #commentform .userinfos .url { grid-row: bc-start / bc-end; grid-column: bc-start / bc-end; }
#comments #respond #commentform .submit { text-align: right; }
#comments #respond #commentform .submit #submit { border: 1px solid #bfbebc; padding: 1em 2em; background: transparent; text-transform: uppercase; }

.elementor-gallery__container { display: grid; grid-template-areas: "aa ab"; grid-template-columns: 1fr 1fr; grid-column-gap: 45px; grid-row-gap: 45px; }
.elementor-gallery__container .elementor-gallery-item .e-gallery-image { height: 100%; }
.elementor-gallery__container .elementor-gallery-item img { display: block; }
.elementor-gallery__container[data-items="1"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="3"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="5"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="7"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="9"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="11"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="13"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="15"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="17"] .elementor-gallery-item:last-child ,
.elementor-gallery__container[data-items="19"] .elementor-gallery-item:last-child { grid-column: aa-start / ab-end;  }
.elementor-gallery__container[data-columns-ratio="first-third"] { grid-template-columns: calc( 33.334% - (45px / 2)) calc( 66.666% - (45px / 2)); }
.elementor-gallery__container[data-columns-ratio="last-third"] { grid-template-columns: calc( 66.666% - (45px / 2)) calc( 33.334% - (45px / 2)); }

#sb_instagram { overflow-x: scroll; }
#sb_instagram #sbi_images { display: grid; grid-auto-flow: column; overflow: auto; grid-template-columns: repeat(6,1fr); }
#sb_instagram.sbi_col_6 #sbi_images .sbi_item { width: auto; min-width: calc(100vw / 6.66); }

@media (max-width:1023px) {
	/* MAX WIDTH */
	body > .container > .container_inner { max-width: 85vw; width: 100%; }
	.elementor-section.elementor-section-boxed > .elementor-container { max-width: 85vw; }

	.elementor-search-form .elementor-search-form__toggle { vertical-align: super; }

	.elementor-15423 .elementor-element.elementor-element-951433d .elementor-posts-container .elementor-post__thumbnail { padding-bottom: unset; }

	.home #firstpost .elementor-post.elementor-grid-item { flex-wrap: wrap; }
	.home #firstpost .elementor-post.elementor-grid-item .elementor-post__thumbnail__link { flex-basis: 100%; }
	.home #firstpost .elementor-post.elementor-grid-item .elementor-post__thumbnail img { position: initial; }
	.home #firstpost .elementor-post.elementor-grid-item .elementor-post__text { padding: 20px; }

	#otherposts .elementor-post.elementor-grid-item .elementor-post__text { padding: 0; }
	#otherposts .elementor-post.elementor-grid-item .elementor-post__text .elementor-post__title { padding: 0 0 1em; }

	.elementor-widget-hws_portfolio.elementor-posts--align-left .elementor-portfolio-item__overlay,
	.elementor-widget-hws_portfolio.elementor-posts--align-right .elementor-portfolio-item__overlay,
	.elementor-widget-hws_portfolio.elementor-posts--align-center .elementor-portfolio-item__overlay { text-align: center; }
	.elementor-widget-hws_portfolio .elementor-portfolio-item__overlay { position: initial; background-color: inherit !important; opacity: 1; }
	.elementor-widget-hws_portfolio .elementor-portfolio-item__overlay .elementor-portfolio-item__title { color: inherit !important; }
	.elementor-widget-hws_portfolio .elementor-portfolio-item__overlay .elementor-portfolio-item__meta-data { color: inherit !important; }

	#comments { max-width: 100%; }

	#sb_instagram #sbi_images { grid-template-columns: repeat(4,1fr); }
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item { min-width: calc(100vw / 4.8); }
}

@media (max-width:767px) {

	.elementor-gallery__container { grid-template-areas: unset; grid-template-columns: 100%; grid-template-areas: unset; grid-column-gap: 0; }
	.elementor-gallery__container .elementor-gallery-item { grid-column: 1; }
	.elementor-gallery__container[data-items="1"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="3"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="5"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="7"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="9"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="11"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="13"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="15"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="17"] .elementor-gallery-item:last-child ,
	.elementor-gallery__container[data-items="19"] .elementor-gallery-item:last-child { grid-column: 1;  }
	.elementor-gallery__container[data-columns-ratio="first-third"] { grid-template-columns: 100%; }
	.elementor-gallery__container[data-columns-ratio="last-third"] { grid-template-columns: 100%; }

	#comments li.comment {  grid-template-areas: "aa ab ac" "ba bb bc" "ca cb cc" "da db dc"; grid-template-columns: 1fr 1fr 1fr; }
	#comments li.comment .avatar-author { grid-row: aa-start / ba-end; }
	#comments li.comment .comment-author { grid-row: ba-start / ba-end; grid-column: ab-start / ac-end; }
	#comments li.comment .date { grid-row: aa-start / aa-end; grid-column: ab-start / ac-end; }
	#comments li.comment .comment { grid-row: ca-start / ca-end; grid-column: aa-start / ac-end; }
	#comments li.comment .reply { grid-row: da-start / da-end; grid-column: aa-start / ac-end; }
	#comments #respond #commentform .userinfos { display: grid; grid-template-areas: unset; grid-template-columns: 1fr; grid-column-gap: 0; }
	#comments #respond #commentform .userinfos .author { grid-row: auto; grid-column: 1; }
	#comments #respond #commentform .userinfos .email { grid-row: auto; grid-column: 1; }
	#comments #respond #commentform .userinfos .url { grid-row: auto; grid-column: 1; }

	.elementor-40 .elementor-element.elementor-element-66aa222b .elementor-posts-container .elementor-post__thumbnail {
	    padding-bottom: calc( 0.66 * 100% );
	}

	#sb_instagram #sbi_images { grid-template-columns: repeat(2,1fr); }
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item { min-width: calc(100vw / 2.8); }
}