/*
	Theme Name: Goodbye Karelle
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */







*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* Styling Wide and Full-Width Gutenberg Blocks in WordPress */
body {
     overflow-x:  hidden;
}





@font-face {
	font-family: 'Lora', serif;
	src: url('alderroad-regular-webfont.woff2') format('woff2'),
		 url('alderroad-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}






@media only screen and (min-width : 680px) {
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-color: transparent;
}
}






body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	/* color: #FFFCDE; */
	color: #DED5B7;
	line-height: 1.5;
	background-color: #0E0D0D;

	
}







/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}


.sidenav li.nolink > a {
cursor: default;
}


@media screen and (min-width: 0px) {
   html{font-size: 16px;}
}


@media screen and (min-width: 600px) {
   html{font-size: 16px;}
}


.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
	height: auto;
}
a {
	color: #49507D;
	text-decoration:none;
}
a:hover {
	color: #393F6B;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}



/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/




/* wrapper */
.wrapper {
	max-width:1280px;
	width:95%;
	margin:0 auto;
	position:relative;
}

.wrapper-large {
	max-width:2400px;
	width:95%;
	margin:0 auto;
	position:relative;
}


/* header */
.header {

}
/* logo */
.logo {

}
.logo-img {

}



.socialtop{
}


.socialtop a{margin-left: 4px; margin-right: 4px; }

.socialtop a i{font-size: 18px;}

.socialtop a:link, 
.socialtop a:visited {
	color: #DED5B7;
	transition: color 0.3s ease; /* Smooth transition */
}

.socialtop a:hover {
	color: #ffffff; /* Hover color to white */
}


/* nav */







/* Styling Wide and Full-Width Gutenberg Blocks in WordPress */

@media screen and (min-width: 960px) {
     .alignwide, .alignfull {
          width:  100vw;
          max-width:  100vw;
          margin-left:  calc(50% - 50vw);
     }
}




hr.wp-block-separator
   {border-top: 1px solid rgba(205, 205, 205, 1) !important;
	height: 0px !important;
	overflow: hidden !important;
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
	width: 200px;
	padding-bottom: 20px;
}



nav{background-color: #0E0D0D}

nav ul a {
	font-weight: 400;
	/* color: #4C6321; */
	color: #DED5B7;
	text-transform: uppercase;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 0 15px;
	transition: color 0.3s ease; /* Smooth transition */
}

nav ul a:hover {
	color: #ffffff; /* Hover color to white */
}


nav ul a:hover{color: #FFFCDE}


nav ul a.dropdown-trigger {padding: 0 4px 0 12px}


nav ul a i.right{margin-left: 0;}




.navbar-fixed{margin-bottom: 8px;}



img.nav-logo{vertical-align: middle}

@media screen and (max-width: 600px) {
	
	img.nav-logo{vertical-align: middle;
		width: 60px
	}

}



a.sidenav-trigger{color: #DED5B7 !important;}


ul.topmenu{margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;}


.topmenu-extra a .fab{font-size: 18px;
	margin-left: 6px;
	margin-right: 6px;
}

nav i.material-icons.mysearch{
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	}

.topmenu-extra{color: #3b3c41; margin-left: 10px;}

.topmenu-extra a{color: #3b3c41;}



.nav-inner-wrapper{max-width: 1280px;
	width: 95%;
	margin: 0 auto;
}

.nav-sep{font-size: 19px;
	display: inline-block;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: 10px;
	margin-right: 10px;
}


/* Sous menu */



ul.dropdown-content{background-color: #FFFCDE;
	padding: 0;
	margin: 0;
}



.dropdown-content li > a, .dropdown-content li > span{ font-size: 14px;
	color: #3b3c41
}

/* Menu nav side responsive */

.sidenav li > a {
	font-size: 20px;
	padding: 0 0 0 0;
	text-transform: uppercase;
	height: 36px;
	line-height: 36px;
	color: #DED5B7;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	transition: color 0.3s ease; /* Smooth transition */
}

.sidenav li > a:hover {
	color: #FFFCDE; /* Hover color */
}


.sidenav li > a:hover{background-color: transparent;}


ul.children{margin-left: 10px;
	padding-left: 0;
}

.sidenav ul.children li > a{text-transform: none; padding-left: 10px;}

a.sidenav-close{color: #DED5B7; padding-left: 16px;}

a:hover.sidenav-close{color: #DED5B7;}



.sidenav{background-color: #010101;
	width: 100%;
	max-width: 320px;
}


@media only screen and (min-width:530px) {
	.sidenav{max-width: 480px;}
	
}


ul.sub-menu li > a{
/* 	padding-left: 70px; */
	text-transform: none;
	height: 36px;
	line-height: 36px;
	color: #FFFCDE;
	}


ul.sub-menu {margin-bottom: 20px;}

.wrapper-logo-menu{padding: 0px 0 16px 24px;}

.social-side{padding-left: 35px;
	margin-top: 10px;
}



.sidenav li.nolink > a{cursor: default}

.social-side.nopad{padding-left: 0;}



.social-side a:hover{background-color: initial;}

ul.social-sidemenu{padding-left: 4px;}

ul.social-sidemenu li > a > i {
	color: #DED5B7; /* Initial color */
	margin: 0 7px 0 0;
	transition: color 0.3s ease; /* Smooth transition */
}

ul.social-sidemenu li > a > i:hover {
	color: rgba(250, 250, 250, 0.90); /* Hover color */
}


ul.social-sidemenu{line-height: 12px;}


ul.social-sidemenu li{display: inline-block;
/* 	padding: inherit; */
	line-height: inherit;
	font-size: inherit;
}

.courriel-menu{ padding: 0 0 0 22px;}
.courriel-menu a:hover{background-color: initial;}
.courriel-menu a{color: ##fcfcfc; font-size: 12px;}
.courriel-menu a:hover{color: ##fcfcfc;}

a.icon-footer{font-size: 9px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: 4px;
}

i.fab.fa-facebook-f.fa-stack-1x{font-size: 0.95em;}
i.fab.fa-instagram.fa-stack-1x{font-size: 1.1em;}
i.fab.fa-twitter.fa-stack-1x{font-size: 95%;}
i.far.fa-envelope.fa-stack-1x{font-size: 1.1em;}
i.fas.fa-paper-plane.fa-stack-1x{font-size: 0.9em; margin-left: -1px;}
i.fab.fa-linkedin-in.fa-stack-1x{
	margin-top: -1px;
font-size: 1em;
}

a.icon-footer span.fa-stack.fa-2x{font-size: 1.9em}

.fa-stack{width: 2em !important}




nav {
    
    height: initial;
}


nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { 
	height: initial;
}





/* sidebar */
.sidebar {

}
/* footer */


.footer {
	background-color: #0E0D0D;
	color: #efecec;
	padding: 20px 0px;
	
}

.footer a{color: inherit;}


.social-footer{font-size: 18px;}
.social-footer a{margin-left: 4px;
	margin-right: 4px;
}


@media only screen and (min-width:680px) {
	.footer {padding: 0px 0px 30px 0px}
}



p.contact-footer{font-size: 12px;
	font-weight: 300;
	margin-top: 40px;
}


.btn-large:hover{color: #fff;}

/*------------------------------------*\
    Parallax
\*------------------------------------*/

 .parallax-container {
      height: 110px;
    }

@media only screen and (min-width:321px) {

  .parallax-container {
      height: 150px;
    }
    
}





@media only screen and (min-width:680px) {

  .parallax-container {
      height: 250px;
    }
    
}



@media only screen and (min-width:880px) {

  .parallax-container {
      height: 460px;
    }
    
}





.parallax-container {
	  min-height: 380px;
	  line-height: 0;
	  height: auto;
	  color: rgba(255,255,255,.9);
	}
	  .parallax-container .section {
		width: 100%;
	  }
	
	@media only screen and (max-width : 992px) {
	  .parallax-container .section {
		position: absolute;
		top: 40%;
	  }
	  #index-banner .section {
		top: 10%;
	  }
	}
	
	@media only screen and (max-width : 600px) {
	  #index-banner .section {
		top: 0;
	  }
	}
	
	.icon-block {
	  padding: 0 15px;
	}
	.icon-block .material-icons {
	  font-size: inherit;
	}
	
	footer.page-footer {
	  margin: 0;
	}
	
	
	.transparent-bg {
	  background-color: rgba(0,0,0,0);
	  border-bottom: 6px solid #000000;
	}
	
	.intro{min-height: 350px;}
	.intromobile{}
	



	/* .offwhite{background-color:  rgba(67, 109, 89, 0.92)} */
     /* .offwhite{background-color:  rgba(64, 124, 134, 0.886)} */
	 /* .offwhite{background-color:  rgba(250, 250, 250, 0.90)} */


.offwhite{
	
	/* background: #BDD88A; */
/* background: rgb(189,216,138);
background: linear-gradient(90deg, rgba(189,216,138,1) 0%, rgba(169,204,103,1) 22%, rgba(189,216,138,1) 100%); */
}




.myframe img{border: 3px solid rgba(0, 0, 0, 0.814)}




/* CSS HEX */
--beaver: #A1826E;
--yellow-green-crayola: #BDD88Aff;
--caput-mortuum: #552A21ff;
--army-green: #465516ff;
--yellow-green-crayola-2: #BDD88Aff;
--caput-mortuum-2: #552A21ff;
--beaver-2: #A1826Eff;

/* CSS HSL */
--beaver: hsla(24, 21%, 53%, 1);
--yellow-green-crayola: hsla(81, 50%, 69%, 1);
--caput-mortuum: hsla(10, 44%, 23%, 1);
--army-green: hsla(74, 59%, 21%, 1);
--yellow-green-crayola-2: hsla(81, 50%, 69%, 1);
--caput-mortuum-2: hsla(10, 44%, 23%, 1);
--beaver-2: hsla(24, 21%, 53%, 1);

/* SCSS HEX */
$beaver: #A1826Eff;
$yellow-green-crayola: #BDD88Aff;
$caput-mortuum: #552A21ff;
$army-green: #465516ff;
$yellow-green-crayola-2: #BDD88Aff;
$caput-mortuum-2: #552A21ff;
$beaver-2: #A1826Eff;

/* SCSS HSL */
$beaver: hsla(24, 21%, 53%, 1);
$yellow-green-crayola: hsla(81, 50%, 69%, 1);
$caput-mortuum: hsla(10, 44%, 23%, 1);
$army-green: hsla(74, 59%, 21%, 1);
$yellow-green-crayola-2: hsla(81, 50%, 69%, 1);
$caput-mortuum-2: hsla(10, 44%, 23%, 1);
$beaver-2: hsla(24, 21%, 53%, 1);

/* SCSS RGB */
$beaver: rgba(161, 130, 110, 1);
$yellow-green-crayola: rgba(189, 216, 138, 1);
$caput-mortuum: rgba(85, 42, 33, 1);
$army-green: rgba(70, 85, 22, 1);
$yellow-green-crayola-2: rgba(189, 216, 138, 1);
$caput-mortuum-2: rgba(85, 42, 33, 1);
$beaver-2: rgba(161, 130, 110, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);
$gradient-right: linear-gradient(90deg, #A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);
$gradient-bottom: linear-gradient(180deg, #A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);
$gradient-left: linear-gradient(270deg, #A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);
$gradient-top-right: linear-gradient(45deg, #A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);
$gradient-bottom-right: linear-gradient(135deg, #A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);
$gradient-top-left: linear-gradient(225deg, #A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);
$gradient-bottom-left: linear-gradient(315deg, #A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);
$gradient-radial: radial-gradient(#A1826Eff, #BDD88Aff, #552A21ff, #465516ff, #BDD88Aff, #552A21ff, #A1826Eff);



/*------------------------------------*\
    Materialize modifications
\*------------------------------------*/


input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]){
	border-bottom: 1px solid #2a2b30;
-webkit-box-shadow: 0 1px 0 0 #2a2b30;
box-shadow: 0 1px 0 0 #2a2b30;
}




.tg-search-holder input:not([type]):focus:not([readonly]), 
.tg-search-holder input[type=text]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=password]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=email]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=url]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=time]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=date]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=datetime]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=datetime-local]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=tel]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=number]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=search]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder textarea.materialize-textarea:focus:not([readonly]){
	border-bottom: 0px solid #2a2b30;
-webkit-box-shadow: 0 0px 0 0 #2a2b30;
box-shadow: 0 0px 0 0 #2a2b30;
}





/*------------------------------------*\
   collapsible
\*------------------------------------*/



ul.collapsible{list-style-type: none;
	padding-left: 0;
}


.collapsible {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin: 0.5rem 0 1rem 0;
}

.collapsible-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 1rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.collapsible-header:focus{outline: none;}

.collapsible-header i {
  width: 1.5rem;
  font-size: 24px;
  display: inline-block;
  text-align: center;
  margin-right: 1rem;
}

.collapsible-body {
  display: none;
  border-bottom: 1px solid #ddd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 2rem;
}


.collapsible {
border: none;
box-shadow: none;
-webkit-box-shadow: none;}


.collapsible-header {
font-size: 32px;
font-weight: 600 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: transparent;
color: #202124}





.collapsible-header.small {font-size: 24px;
	line-height: 1.2;
}


@media only screen and (max-width: 680px) { 
	.collapsible-header {font-size: 20px;
		padding: 1rem 0rem;
	}
	.collapsible-header i{margin-right: 0.8rem;}
	.collapsible-body img{display: none}
	.collapsible-body{padding: 1rem 0rem;}
	
}


.liens-ext a.btn{margin-bottom: 10px;}


.iconadd{
  display:inline-block ;
}
.iconremove{
  display:none !important;
}

li.active .collapsible-header .material-icons.iconadd{
  display: none;
}

li.active .collapsible-header .material-icons.iconremove{
  display: inline-block !important;
}


.collapsible li.disabled .collapsible-body {
    display: none !important; /*or using id of the app to avoid the use of !important*/
}

.collapsible li.disabled .collapsible-header {
    color: rgba(175, 175, 175, .7);
    
    pointer-events: none;
}




.collapsible li.disabled:hover{cursor: default;}

.collapsible-header small{font-size: 70%}


a.monplay{color: #faf8c7 !important}

.monintro .wp-block-cover__inner-container{margin-top: -15%}

/*------------------------------------*\
    

	
	
\*------------------------------------*/


@media only screen and (min-width: 993px), all{
	
	.container{width: 80%;}
}

/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/


.small{font-size: 80%}

p.lead{font-size: 24px;}








.tetx{color: rgba(255, 243, 238, 1)}


h1{
	color: #DED5B7;
	font-size: 42px;
	text-transform: none;
	font-weight: 400;
	font-family: 'Poppins', sans-serif;
	text-transform: none;
	letter-spacing: 0px;
	
}

@media only screen and (min-width:600px) {
	h1{font-size: 36px;}
}



h1 a, h1 a:hover {color: #FFFCDE}
h2 a, h2 a:hover {color: #FFFCDE}
h3 a, h3 a:hover {color: #FFFCDE}

h2{
	color: #DED5B7;
	font-size: 42px;
	text-transform: none;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0px;
	
	
}




@media only screen and (min-width:600px) {
	h2{font-size: 60px;
		margin-top: 4rem;
		margin-bottom: 2rem;
	}
}

@media only screen and (max-width:600px) {
	h2{margin-top: 1rem;}
}


@media only screen and (max-width:600px) {
   .wp-block-spacer{height: 20px !important}
}





h3{
	color: #DED5B7;
	font-family: 'Poppins', sans-serif;
	font-size: 28px;
/* 	text-transform: uppercase; */
	font-weight: 600;
	line-height: 130%;
}





#flex-hero {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}


.playbtnpos{position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -25%);}


.playbtnmob{position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);}



nav .brand-logo{
	padding-top: 10px;
	padding-left: 15px;
}


@media only screen and (min-width:1px) {
	nav img.brand-logo {width: 150px;}
}


@media only screen and (min-width:680px) {
	nav img.brand-logo {width: 190px;
		margin-top: 5px;
	}
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {

}
@media only screen and (min-width:480px) {

}
@media only screen and (min-width:768px) {

}
@media only screen and (min-width:1024px) {

}
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}


/*------------------------------------*\
Ajustement page Gutenburg
\*------------------------------------*/


.bandcamp-col{max-width: 800px; text-align: center;
	margin: 35px auto;
}



ul.liste-contacts li{list-style: none;}
ul.liste-contacts {list-style: none;}
/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}





/* Container for the image and play button */
.wp-block-group {
  position: relative;
  display: inline-block;
}

/* Style for the play button */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6); /* Black background color */
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 20px 20px; /* Adjust the padding as desired */
  z-index: 1;
}




.play-button .material-icons {
  font-size: 32px; /* Adjust the font size as desired */
  vertical-align: middle;
}

.play-button:hover {
  background-color: rgba(0, 0, 0, 1); /* Adjust the background color and opacity as desired */
}

.square-video {
    position: relative;
    padding-bottom: 100%; /* 1:1 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.square-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.responsive-square-video {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* This maintains a 1:1 aspect ratio */
    height: 0;
    overflow: hidden;
}

.responsive-square-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.maxwidth{width: 100%; max-width: 500px; margin: 0px auto; text-align: center}


.wp-block-embed-youtube {
	margin-bottom: 50px;
}