:root{

--width_head: 100%;
--width_foot: 100%;
--width_page: 100%;

--black : #000000;
--blacky: #4f463f;  
--yellow: #ffcc00;
--white : #FFFFFF;

--grey   : #333335;
--light  : #D1D1D1;
--lighter: #f6f6f6;
--lite   : #e0e0e0;

--red    : #ff0000;
--social : #c1c1c1;  /* grey social */

--device-large : 1280px;
--device-normal: 1024px;
--device-tablet: 860px;
--device-mobile: 580px;

}


/* - - - - layout - - - - */ 

body,
html{ overflow-x: hidden;  scroll-behavior: smooth; }
body { margin:0; padding:0; position: relative; background: black; color: white; }


/* - - - - etm layout - - - - */ 
	
.header { position: relative; padding: 0; margin:0 auto; width:var(--width_head); height: auto; }
.page   { position: relative; padding: 0; margin:0 auto; width:var(--width_page); height: auto; min-height: 80vh; }
.footer { position: relative; padding: 0; margin:0 auto; width:var(--width_foot); height: auto; }

.section{ position: relative; padding: 0; margin:0; width:100%; max-width:100%; height: auto; }
.content{ position: relative; padding: 0 30px; margin:0 auto; width:100%; max-width:1100px; height: auto; }

.page{  width:100%; }

.main{ position: relative; }

.sidebar{ position: relative; padding:20px; } 


.sidebar .widget{ margin-bottom: 40px; }
.sidebar .widget_recent_entries li{ display:block; margin-bottom:16px; }
.sidebar .widget_recent_entries li span{ display:block; color:var(--yellow); }


/*--------------------------------------------------------------
# Display Table
--------------------------------------------------------------*/

.display-table{ display: table; width:100%; position: relative; border-collapse: separate; border-spacing:0; }
.display-row  { display: table-row; width:100%; position: relative; }
.display-cell { display: table-cell; position: relative; }


/*--------------------------------------------------------------
# text columns
--------------------------------------------------------------*/

.flex-row { display: flex; justify-content: space-between; position: relative; }
.flex-column { flex: 1; position: relative;  }

.flex-column-1 { max-width: calc(100%); }
.flex-column-2 { max-width: calc(50% - 20px); }
.flex-column-3 { max-width: calc(33.3% - 26.6px); }
.flex-column-4 { max-width: calc(25% - 30px); }

.flex-col-33 { max-width: calc(33.3% - 20px); }
.flex-col-66 { max-width: calc(66.7% - 20px); }

.flex-col-25 { max-width: calc(25% - 20px); }
.flex-col-75 { max-width: calc(75% - 20px); }



@media ( max-width: 600px ) {
	.flex-row { display:block; margin:0; }
	.flex-column { max-width: 100%; margin: 15px 0; }
}



/*--------------------------------------------------------------
# Classes public use
--------------------------------------------------------------*/


.text-shadow { text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.63); }


.color-yellow { color:var(--yellow); }
.color-white  { color:var(--white); }
.color-black  { color:var(--black); }
.color-blacky { color:var(--blacky); }
.color-grey   { color:var(--grey); }
.color-light  { color:var(--light); }
.color-lighter{ color:var(--lighter); }
.color-lite   { color:var(--lite); }
.color-social { color:var(--social); }


.bg-black   { background-color:var(--black); }
.bg-blacky  { background-color:var(--blacky); }
.bg-grey    { background-color:var(--grey); }
.bg-light   { background-color:var(--light); }
.bg-lighter { background-color:var(--lighter); }
.bg-lite    { background-color:var(--lite); }
.bg-social  { background-color:var(--social); }
.bg-yellow  { background-color:var(--yellow); }

.hover-bg-black:hover  { background-color:var(--black);   transition: background-color 300ms  ease-in-out; }
.hover-bg-light:hover  { background-color:var(--light);   transition: background-color 300ms  ease-in-out; }
.hover-bg-lighter:hover{ background-color:var(--lighter); transition: background-color 300ms  ease-in-out; }
.hover-bg-lite:hover   { background-color:var(--lite);    transition: background-color 300ms  ease-in-out; }
.hover-bg-social:hover { background-color:var(--social);  transition: background-color 300ms  ease-in-out; }
.hover-bg-yellow:hover { background-color:var(--yellow);  transition: background-color 300ms  ease-in-out; }
.hover-bg-white:hover  { background-color:var(--white);   transition: background-color 300ms  ease-in-out; }

.is-style-back-line,
.back-line{ position: relative; width: 100%; overflow: hidden;  }
.is-style-back-line::after,
.back-line::after{ display:inline-block; position: absolute;  width:100%; top:0;  margin: 0 0 0 10px; padding: 0; content: "."; color:transparent; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3e%3cpath d='m0,0v1h1V0' fill='%23ffcc00' /%3e%3c/svg%3e"); background-size: 2px 2px; background-repeat: repeat-x;  background-position: left 55%;
}

@media ( max-width: 600px ) {
	.back-line::after{ display:none)); }
}


.uppercase{ text-transform: uppercase; }
.lowercase{ text-transform: lowercase; }
.capitalize{ text-transform: capitalize; }


/* - - - -  buttons - - - - - */

.acf-button,
.btn-yellow{ display:inline-block ; text-align: center; font-weight:600; padding:10px 20px ; background: var(--yellow ); color: black; border:0; }

.acf-button:hover,
.btn-yellow:hover{ color:white; background:var(--grey ); }

.wp-block-search__button {  border: 0;  background: var(--yellow);  }


.flip-180{ transform: scaleX(-1); }	

/* - - - -  responsive - - - - */

.responsive,
.image-responsive{ width:100% !important; height: auto !important; }

.responsive-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}