/**
 *
 * goo.css
 * Description: CSS Oogo design styles
 * Version: 1.1.0 (07-05-2019)
 * Author: Ugo Guidolin (aka Oogo)
 * Author URI: http://www.oogo.io
 *
 */

/********************** IMPORT **********************/

@import url('https://use.fontawesome.com/releases/v5.4.2/css/all.css');

/********************** TYPOGRAPHY **********************/

/** Link tag correction **/

a,
a:visited,
a:link,
a:active,
a:hover,
a:focus {
	text-decoration: none;
	outline: 0;
    outline-offset:0;
}


/** List **/

/* Usage: <ul class="list"><li>...</li></ul> */

ul.list {
  	list-style: none;
  	padding: 0;
}
ul.list li {
  	padding-left: 1.3em;
}
ul.list li.section-title {
  	padding-left: 0;
  	margin-bottom: 1em;
}
ul.list li:before {
	content: "\f345";
	font-family: 'dashicons';
	display: inline-block;
	margin: 0 0.5em 0 -1.5em;
	width: 1em;
	text-rendering: optimizeLegibility;
	font-size: 0.7em;
}
ul.list li.section-title:before {
	content: '';
	margin: 0;
	width:0;
}
ul.list.ico-check li:before  {
	content: "\f00c"; /* FontAwesome Unicode */
}
ul.list.ico-caret-right li:before  {
	content: "\f0da"; /* FontAwesome Unicode */
}

.headline {
	margin-bottom:20px;
}
.headline.dashed {
	border-bottom: thin dashed;
}
.headline h2 a {
    font-size: 12px;
    float: right;
    margin-top: 10px;
}

p.has-drop-cap:not(:focus):first-letter {
   float:left;
   line-height:.68;
   font-weight:100;
   margin:.05em .1em 0 0;
   text-transform:uppercase;
   font-style:normal;
}

.lead-page {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2em;
    color: #999a9b;
    margin-bottom: 20px;
}

/** Blockquote **/

blockquote {
	line-height:1.3em;
	border-left: 1px solid #315AA4;
}

/** Font Sizes **/

.xxsmall {
	font-size:10px!important;
}
.xsmall {
	font-size:12px!important;
}
.small {
	font-size:14px;
}
.normal {
	font-size:16px;
}
.large {
	font-size:18px;
}
.xlarge {
	font-size:24px;
}
.xxlarge {
	font-size:30px;
}
.xxxlarge {
	font-size:36px;
	line-height: 1.2em;
}

/** Font Styles **/

.light {
	font-weight:300;
}
.regular {
	font-weight:400;
}
.medium {
	font-weight:500;
}
.bold {
	font-weight:600;
}
.semibold {
	font-weight:700;
}
.extrabold {
	font-weight:900;
}

.uppercase {
	text-transform:uppercase;
}
.lowercase {
	text-transform:lowercase;
}
.capitalize {
	text-transform:capitalize;
}
.italic {
	font-style:italic;
}
.smallcaps {
	font-variant: small-caps;
}

/** Letter spacing **/

.spaced {
	letter-spacing:0.1em;
}
.spaced-02 {
	letter-spacing:0.2em;
}
.spaced-03 {
	letter-spacing:0.3em;
}

/** Line height **/

.lineheight {
	line-height:1em;
}
.lineheight-08 {
	line-height:0.8em;
}
.lineheight-09 {
	line-height:0.9em;
}
.lineheight-11 {
	line-height:1.1em;
}
.lineheight-12 {
	line-height:1.2em;
}
.lineheight-13 {
	line-height:1.3em;
}
.lineheight-14 {
	line-height:1.4em;
}
.lineheight-15 {
	line-height:1.5em;
}



/********************** ALIGNMENTS **********************/

/* align text elements */

.center-tx {
	text-align:center;
}
.left-tx {
	text-align:left;
}
.right-tx {
	text-align:right;
}

/** ALIGN **/

/** TIP: To align 2 element to the left and to the right

	<div class="alignleft" style="width:60%;">
		<div class="alignleft">Item 1</div>
		<div class="alignleft">Item 1</div>
	</div>
	<div class="alignright" style="width:30%;">
		<div class="alignright">Item 1</div>
		<div class="alignright">Item 1</div>
	</div>

**/

.alignleft {
	display: inline-block;
    margin-right: 0.5em;
    text-align:left;
}
.alignright {
	display: inline-block;
	margin-left: 0.5em;
	text-align:right;
}
.aligncenter {
	display: inline-block;
	text-align:center;
}
.aligntop {
	position:absolute;
	top:0;
}
.alignbottom {
	position:absolute;
	bottom:0;
}

.inline {
	display: inline-block;
}

.inline.middle{
	display: inline-block;
	vertical-align:middle;
}

.centerY {
	position:absolute;
	top:50%;
	transform: translateY(-50%);
}

.centerX {
	position:absolute;
	left:50%;
	transform: translateX(-50%);
}

.floatr {
	display: inline;
	float: right;
	margin-left: 0.5em;
}
.floatl {
	display: inline;
	float: left;
	margin-left: 0.5em;
}

/** CENTERING **/

/*** TIP: To center a DIV element:

	<div class="center-tx">
		<div class="inline">Element</div>
	</div>

	TIP: Force center a DIV element:

	<div style="position:relative;">
		<div class="center">Element</div>
	</div>

**/

/** Align Bootstrap column as table cell **/

.row.table-row {
    display: table-row;
}

.row.table-row > div {
    display: table-cell;
    vertical-align: top;
    float:none;
}

/** Break **/

.clear {
	clear: both;
}

/*************** TABLE ***************/

.table {
	display: table;
}
.table-row {
	display: table-row;
}
.table-cell {
	display: table-cell;
}


/** CENTER DIV VERTICALLY **/

/** Usage:

<div class="center-container">
  <div class="center-content">I am vertically and horizontally centered.</div>
</div>

**/

.center-container {
	min-height:200px;
  	position: relative;
}

.center-content {
  	margin: 0;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	width:100%;
}

/********************** ICONS **********************/

/** Usage: <span class="glyph-ok xlarge darkturquoise-tx"></span> **/

.glyph-ok::before {
	content: '\f058';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
	line-height: 1em;
}

.glyph-alert::before {
	content: '\f071';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}
/*.glyph-ok:hover:before {
	content: '\f111';
}*/
.glyph-circle::before{
	content: '\f111';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-lock::before{
	content: '\f023';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-next::before{
	content: '\f0a9';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-prev::before{
	content: '\f0a8';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-cal::before{
	content: '\f073';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-display::before{
	content: '\f26c';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-users::before{
	content: '\f0c0';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-location::before{
	content: '\f3c5';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-time::before{
	content: '\f017';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-speech::before{
	content: '\f086';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-contact::before{
	content: '\f2b9';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-call::before{
	content: '\f095';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-call-outline::before{
	content: '\f075';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 400; /* solid icon (fas) */
}

.glyph-mail::before{
	content: '\f0e0';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-mail-outline::before{
	content: '\f0e0';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 400; /* solid icon (fas) */
}

.glyph-web::before{
	content: '\f57d';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 900; /* solid icon (fas) */
}

.glyph-web-outline::before{
	content: '\f14e';
	font-family: 'Font Awesome 5 Free';
	margin-right: 5px;
	font-weight: 400; /* solid icon (fas) */
}


/********************** MARGINS **********************/

.toptitle {
	margin-top: 0
}

.nomargin {
	margin:0;
}

/* margin top-bottom */

.my-5 {
	margin: 5px 0;
}
.my-10 {
	margin: 10px 0;
}
.my-15 {
	margin: 15px 0;
}
.my-20 {
	margin: 20px 0;
}
.my-40 {
	margin: 40px 0;
}

/* margin left-right */

.mx-6 {
	margin: 0 6px;
}
.mx-10 {
	margin: 0 10px;
}
.mx-15 {
	margin: 0 15px;
}
.mx-20 {
	margin: 0 20px;
}
.mx-40 {
	margin: 0 40px;
}

/* margin bottom */

.mb-5 {
	margin-bottom:5px;
}
.mb-10 {
	margin-bottom:10px;
}
.mb-20 {
	margin-bottom:20px;
}
.mb-30 {
	margin-bottom:30px;
}
.mb-40 {
	margin-bottom:40px;
}
.mb-50 {
	margin-bottom:50px;
}
.mb-60 {
	margin-bottom:60px;
}

/* margin top */

.mt-5 {
	margin-top:5px;
}
.mt-10 {
	margin-top:10px;
}
.mt-20 {
	margin-top:30px;
}
.mt-30 {
	margin-top:15px;
}
.mt-40 {
	margin-top:20px;
}
.mt-50 {
	margin-top:25px;
}

/* margin right */

.mr-5 {
	margin-right:5px;
}
.mr-10 {
	margin-right:10px;
}
.mr-20 {
	margin-right:20px;
}

/* margin left */

.ml-5 {
	margin-left:5px;
}
.ml-10 {
	margin-left:10px;
}
.ml-20 {
	margin-left:20px;
}

/* lineheight */

.lineheight-10 {
	line-height:1em;
}
.lineheight-20 {
	line-height:2em;
}

/********************** WIDTHS **********************/

.w10 { width:10%; }
.w20 { width:20%; }
.w30 { width:30%; }
.w40 { width:40%; }
.w50 { width:50%; }
.w60 { width:60%; }
.w70 { width:70%; }
.w80 { width:80%; }
.w90 { width:90%; }
.w100 { width:100%; }


/********************** PADDINGS **********************/

.padding-5{
	padding: 5px;
}
.padding-10{
	padding: 10px;
}
.padding-20{
	padding: 20px;
}

.nopadding {
	padding:0;
}
.nopadding-left {
	padding-left:0;
}
.nopadding-right {
	padding-right:0;
}
.padding-left {
	padding-left:15px;
}
.padding-right {
	padding-right:15px;
}
.overflow {
	overflow:hidden;
}

/* padding top-bottom */

.py-5 {
	padding: 5px 0;
}
.py-10 {
	padding: 10px 0;
}
.py-20 {
	padding: 20px 0;
}

.px-5 {
	padding: 0 5px;
}
.px-10 {
	padding: 0 10px;
}
.px-20 {
	padding: 0 20px;
}

/** NO GUTTERS BS COLUMNS
	Usage: <div class="row no-gutters">
**/

/*.row.no-gutters {
   margin-right: 0;
   margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
   padding-right: 0;
   padding-left: 0;
}*/

/********************** SEPARATORS **********************/

hr {
	display:inline-block;
	clear:both;
	width:100%;
	margin:0;
	border:none;
	background:none; /* disable bg color BS */
}

.hr6 {
	padding:3px 0;
}
.hr10 {
	padding:5px 0;
}
.hr20 {
	padding:10px 0;
}
.hr30 {
	padding:15px 0;
}
.hr40 {
	padding:20px 0;
}
.hr60 {
	padding:30px 0;
}
.hr80 {
	padding:40px 0;
}

.hrline {
	border-top: thin solid #999a9b;
	padding: 0;
	margin: 10px 0;
	width: 100%;
	display:block;
}
.hrline.dotted {
	border-top: thin dotted #999a9b;
}
.hrline.dashed {
	border-top: thin dashed #999a9b;
}

/********************** SECTION HEADING **********************/

/** line with title at center

	Usage: <div class="section-heading">Something</div>

**/

.section-heading {
	display: table;
	white-space: nowrap;
	margin: 10px 0 40px 0;
	width:100%;
	line-height: 1em;
}

.section-heading img {
	max-width: none;
}

.section-heading.top {
	margin-top: 0;
}

.section-heading.bottom {
	margin-bottom: 0;
}

.section-heading:before { /* left */
	content: "";
	display: table-cell;
	width: 50%;
	background: linear-gradient(to bottom, #656565, #656565) no-repeat left center / 95% 1px;
}

.section-heading:after { /* right */
	content: "";
	display: table-cell;
	width: 50%;
	background: linear-gradient(to bottom, #656565, #656565) no-repeat right center / 95% 1px;

}

/****************** PAGE INDEX NAVIGATION ******************/

/** list_pages_menu() in goo-funcs **/

#page-index h2 {
	font-family:'Roboto Slab';
	color: #4682B4;
	font-weight:300;
	margin: 0 0 20px 0;
	font-size:24px;
	padding-bottom:8px;
}

#page-index ul {
	list-style-type: none;
	padding-left:0;
}

#page-index ul li {
	font-family: 'Raleway';
	padding: 8px 0 8px 1.2em;
	font-weight: 400;
	margin-right:40px;
	font-size: 14px;
	line-height: 1.3em;
	border-bottom: thin dotted;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

#page-index ul li a {
	color: #4682B4;
	margin-left: 0.2em;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
  	transition:all .3s;
}

#page-index ul li:hover a {
	color: #61b3f9;
}

#page-index ul li::before {
    font-family: 'FontAwesome';
    content: '\f105';
    margin-right: 5px;
    margin-left: -1em;
    color: #bc3533;
}


/****************** WIDGET CLASS ******************/

.widget h2 {
	font-family:'Roboto Slab';
	color: #4682B4;
	font-weight:300;
	margin: 0 0 20px 0;
	font-size:24px;
	border-bottom: thin dotted;
	padding-bottom:8px;
}

.widget ul {
	padding:0 0 0 1em;
	list-style-type: none;
}

.widget ul li {
	font-family: 'Raleway';
	padding: 4px 0;
	font-weight: 400;
	margin-right:40px;
	font-size: 14px;
	line-height: 1.3em;
}

.widget ul li a {
	color: #4682B4;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
  	transition:all .3s;
}

.widget ul li:hover a {
	color: #61b3f9;
}

.widget ul li::before {
    font-family: 'FontAwesome';
    content: '\f105';
    margin: 0 5px 0 -1em;
    color: #bc3533;
}


/********************** BORDERS **********************/

.bordertop {
	border-top:thin solid #bdbdbd;
}
.borderbottom {
	border-bottom:thin solid #bdbdbd;
}
.noborder {
	border: none;
}


/********************* FIXHEIGHT *********************/

/**
	 set bootstrap column at the same height
	 Usage: <div class="row fixheight">

	 NB: display some text or stuff inside columns to get result
**/

.row.fixheight{
  overflow: hidden;
}

.row.fixheight [class*="col-"]{
  margin-bottom: -2000px;
  padding-bottom: 2000px;
}

/********************** BUTTONS **********************/

/* rect buttons */

.bt {
	padding: 10px 15px;
	display: inline-block;
}

.rounded {
	border-radius: 5px;
}
.rounded-top {
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
.rounded-bottom {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.rounded-left {
	border-top-left-radius: 5px!important;
	border-bottom-left-radius: 5px!important;
}
.rounded-right {
	border-top-right-radius: 5px!important;
	border-bottom-right-radius: 5px!important;
}

.rounded-12 {
	border-radius: 12px;
}
.rounded-top-12 {
	border-top-right-radius: 12px;
	border-top-left-radius: 20px;
}
.rounded-bottom-12 {
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
}

.rounded-20 {
	border-radius: 20px;
}
.rounded-top-20 {
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
}
.rounded-bottom-20 {
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
.rounded-left-20 {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
.rounded-right-20 {
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.rounded-30 {
	border-radius: 30px;
}

.rounded-circle {
	border-radius: 50%;
}

.not-rounded {
	border-radius: 0;
}
.not-rounded-left {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.not-rounded-right {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.bt.bt-outline {
  background-color: rgba(255,255,255,0.01);
  border: thin solid #fff;
  color: white;
}
.bt.bt-outline:hover {
  background-color: rgba(255,255,255,0.2);
}

/* circle & squared icon buttons */

.bt-circle {
	border-radius:50%;
	text-align:center;
}

.bt-sm {
	width:28px;
	height:28px;
	padding:3px;
	font-size:12pt;
}

.bt-md {
	width:32px;
	height:32px;
	padding:3px;
	font-size:14pt;
}

.bt-lg {
	width:40px;
	height:40px;
	padding:3px;
	font-size:15pt;
}

/* 	enable social button classes in style.css: bt-fb, bt-in, bt.tw changing padding to fit:

	.bt-in {
		padding:2px!important;
	}

*/

/********************** PLAY BUTTON **********************/

/* Use it with font awesome

<div class="playbtn">
	<i class="fas fa-play"></i>
</div>

 */

.playbtn {
	border-radius:50%;
	text-align:center;
	width:36px;
	height:36px;
	padding:3px;
	font-size:15pt;
	background-color: gray;
}
.playbtn .fas {
	color:white;
	font-weight: 800;
	line-height:30px;
	font-size:14px;
}
.playbtn .fas.fa-play {
	margin-left: 3px;
}


/********************** FIX BS FORM CSS **********************/

/**
	disable blue outline border when click on inputs & buttons
	due to browser
**/

.form-control,
.form-control:focus,
input[type='text'],
input[type='text']:hover,
input[type='text']:active,
input[type='text']:focus,
input[type='email'],
input[type='email']:hover,
input[type='email']:active,
input[type='email']:focus,
input[type='password'],
input[type='password']:hover,
input[type='password']:active,
input[type='password']:focus,
input[type='file'],
input[type='file']:hover,
input[type='file']:active,
input[type='file']:focus,
input[type='submit'],
input[type='submit']:hover,
input[type='submit']:active,
input[type='submit']:focus,
input[type='checkbox'],
input[type='checkbox']:hover,
input[type='checkbox']:active,
input[type='checkbox']:focus,
textarea,
select,
button,
textarea:hover,
textarea:active,
textarea:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn:focus,
.btn.active,
.dropdown-toggle,
.dropdown-toggle:focus {
    outline:0px !important;
    -webkit-appearance:none!important; 	/*chrome and safari */
    -moz-appearance:none!important; 		/*firefox*/
    appearance:none!important;
    box-shadow: none !important;
    outline-offset: 0 !important;
		box-sizing: border-box;
}

button,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn:focus,
.btn.active,
.dropdown-toggle,
.dropdown-toggle:focus {
	/*border: 0;*/
}

/* input fields */

select:not([multiple]) {
	background-image:url('data:image/png;base64,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')!important;
	background-size: auto 15%;
	background-position: center right;
	background-repeat: no-repeat;
	background-color: #fff;
	width: 100%;
}

textarea {
	min-height: 150px;
}

select, input, textarea {
	border: #ccc solid 1px;
	padding: 0.3em 0.6em;
	border-radius: 0.2em;
	flex: 1 1 0%;
}

.form-group {
	position:relative;
}

.form-group input[type="text"],
.form-group input[type='email'],
.form-group input[type='password'],
textarea, select {
	width: 100%;
}

/* label */

label {
	display: block;
	font-size: 0.8em;
	margin-bottom: .2rem;
	line-height: 1.3em;
}

/* checkbox */

.checkbox label {
	margin-left:30px;
	line-height: 1.1em;
}
input[type='checkbox'],
input[type='checkbox']:hover,
input[type='checkbox']:active,
input[type='checkbox']:focus {
	position: absolute;
  height: 15px;
  width: 15px;
  background-color: #fff;
	top: -3px;
}
input[type='checkbox']:hover {
	background-color: #f8fffb;
}
input[type='checkbox']:checked {
}
input[type='checkbox']:checked:after {
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 800;
	font-size: 10px;
	color: #495057;
	position: absolute;
	bottom: 0;
	top: -3px;
	left: 2px;
}


/* nav tabs */

ul li.nav-item::before {
	content: '';
	float: left;
  }

  ul li.nav-item {
	margin-right: 0;
	padding: 0;
  }

  .nav-tabs {
	border-bottom: 1px solid #cdcec9;
	/*#dee2e6*/
  }

  .nav-tabs .nav-link {
	background-color: transparent;
	margin-right: 4px;
	border-bottom: 1px solid #cdcec9;
  }

  .nav-tabs .nav-link:hover {
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
	border-bottom: 1px solid #cdcec9;
  }

  .nav-tabs .nav-link.active,
  .nav-tabs .nav-link.active:hover {
	border-top: 1px solid #cdcec9;
	border-right: 1px solid #cdcec9;
	border-left: 1px solid #cdcec9;
	border-bottom: 1px solid transparent;
  }


/********************** WD ADMIN COLUMNS **********************/

.wd {
	display: inline-block;
	padding: 0 5px 5px 0;
	box-sizing: border-box;
	width: 100%!important;
	vertical-align:top;
}
.wd-half {
	box-sizing: border-box;
	width: 49.5%!important;
}
.wd-one-third {
	width: 33.33%!important;
}
.wd-two-third {
	width: 66.66%!important;
}

@media (max-width: 768px) { /* Applica le regole per schermi larghi fino a 768px */
    .wd, 
    .wd-half, 
    .wd-one-third, 
    .wd-two-third {
        width: 100%!important; /* Imposta la larghezza al 100% */
        display: block; /* Cambia il comportamento in blocco per occupare tutta la larghezza */
    }
    .wd {
        padding: 0 0 5px 0; /* Modifica padding se necessario */
    }
}



/** MODAL FOOTER **/

.modal-footer {
	display:block;
}

/**** MODAL MEDIA ****/

#popup-modal,
#modalimage,
#modalvideo {
	background:rgb(0,0,0,.7);
}

#modalimage .modal-dialog {
	max-width: 600px;
	max-height: auto;
}
#popup-modal .modal-dialog,
#modalvideo .modal-dialog {
	max-width: 800px;
	margin: 30px auto;
}

#popup-modal .modal-body,
#modalimage .modal-body,
#modalvideo .modal-body {
	position:relative;
	padding:0px;
}
#popup-modal .close,
#modalimage .close,
#modalvideo .close {
	position:absolute;
	right:-30px;
	top:0;
	z-index:999;
	font-size:2rem;
	font-weight: normal;
	color:#fff;
	opacity:1;
}
#popup-modal .modal-content,
#modalimage .modal-content,
#modalvideo .modal-content {
   background-color: black;
}

#popup-modal .carousel {

}

/********************** COLORS & HOVERS **********************/

/* Sample usage:
 	Assign color to text: 			<div class="brickred-tx">Element</div>
 	Assign color to background:		<div class="brickred-bg">Element</div>
 	Text with tag <a> hover: 		<a href="#" class="brickred-tx">Element</a>
 	Text with hover (no <a> tag): 	<div class="bt brickred-tx">Element</a>
 */

 /* FX TRANSITION EFFECTS ON HOVER
 	Sample usage:
 	<a href="#" class="bt fx brickred-bg white-tx">Element</a>
 */

.fx,
.fx:hover {
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
  	transition:all .5s;
}

/* WHITE */

.white-tx,
.white-tx a,
white-tx a:visited,
white-tx a:focus,
a.white-tx:focus,
a.white-tx:visited {
	color: #fff;
}
a.white-tx:hover, .bt.white-tx:hover {
	color: rgba(255,255,255,0.7);
}
.white-bg {
	background-color: #fff;
}
.bt.white-bg:hover {
	background-color: rgba(255,255,255,0.7);
}

/* BLACK */

.black-tx, a.black-tx {
	color: #000;
}
a.black-tx:hover, .bt.black-tx:hover {
	color: #BA3531;
}
.black-bg {
	background-color: #000;
}
.bt.black-bg:hover {
	background-color: #BA3531;
	color:#fff;
}

/* BLACK GRAY */

.blackgray-tx,
.blackgray-tx a,
blackgray-tx a:visited,
blackgray-tx a:focus,
a.blackgray-tx:focus,
a.blackgray-tx:visited {
	color: #343432;
}
a.blackgray-tx:hover, .bt.blackgray-tx:hover {
	color: #50504e;
}
.blackgray-bg {
	background-color: #343432;
}
.bt.blackgray-bg:hover {
	background-color: #50504e;
	color:#fff;
}

/* BRICK RED */

.brickred-tx, a.brickred-tx {
	color: #C93F21;
}
a.brickred-tx:hover, .bt.brickred-tx:hover {
	color: #DB5147;
}
.brickred-bg {
	background-color: #C93F21!important;
}
.bt.brickred-bg:hover {
	background-color: #DB5147!important;
	color:#fff;
}

/* BALTIC BLUE */

.balticblue-tx, a.balticblue-tx {
	color: #315AA4;
}
a.balticblue-tx:hover, .bt.balticblue-tx:hover {
	color: #5982D2;
}
.balticblue-bg {
	background-color: #315AA4;
}
.bt.balticblue-bg:hover {
	background-color: #5982D2;
	color:#fff;
}

/* YELLOW */

.yellow-tx, a.yellow-tx {
	color: #FEDE00;
}
a.yellow-tx:hover, .bt.yellow-tx:hover {
	color: #FEF876;
}
.yellow-bg {
	background-color: #FEDE00;
}
.bt.yellow-bg:hover {
	background-color: #FEF876;
	color:#000;
}

/* GOLD YELLOW */

.goldyellow-tx, a.goldyellow-tx {
	color: #FABB21;
}
a.goldyellow-tx:hover, .bt.goldyellow-tx:hover {
	color: #FCCF64;
}
.goldyellow-bg {
	background-color: #FABB21;
}
.bt.goldyellow-bg:hover {
	background-color: #FCCF64;
	color:#BA3531;
}

/* BANANA YELLOW */

.bananayellow-tx, a.bananayellow-tx {
	color: #fdd46c;
}
a.bananayellow-tx:hover, .bt.bananayellow-tx:hover {
	color: #fff19f;
}
.bananayellow-bg {
	background-color: #fdd46c;
}
.bt.bananayellow-bg:hover {
	background-color: #fff19f;
	color:#000;
}

/* JADE GREEN */

.jadegreen-tx, a.jadegreen-tx {
	color: #49B6A0;
}
a.jadegreen-tx:hover, .bt.jadegreen-tx:hover {
	color: #6DC5B3;
}
.jadegreen-bg {
	background-color: #49B6A0;
}
.bt.jadegreen-bg:hover {
	background-color: #6DC5B3;
	color:#fff;
}

/* TURQUOISE */

.turquoise-tx, a.turquoise-tx {
	color: ##25c9e5;
}
a.turquoise-tx:hover, .bt.turquoise-tx:hover {
	color: #5be0f5;
}
.turquoise-bg {
	background-color: #25c9e5;
}
.bt.turquoise-bg:hover {
	background-color: #5be0f5;
	color:#fff;
}

/* DARK TURQUOISE */

.darkturquoise-tx, a.darkturquoise-tx {
	color: #2FABC0;
}
a.darkturquoise-tx:hover, .bt.darkturquoise-tx:hover {
	color: #34bdd5;
}
.darkturquoise-bg {
	background-color: #2FABC0;
}
.bt.darkturquoise-bg:hover {
	background-color: #34bdd5;
	color:#fff;
}

/* ACID GREEN */

.acidgreen-tx, a.acidgreen-tx {
	color: #9eb947;
}
a.acidgreen-tx:hover, .bt.acidgreen-tx:hover {
	color: #c0d37a;
}
.acidgreen-bg {
	background-color: #9eb947;
}
.bt.acidgreen-bg:hover {
	background-color: #c0d37a;
	color:#fff;
}

/* VIOLET RED */

.violetred-tx, a.violetred-tx {
	color: #A35ABE;
}
a.violetred-tx:hover, .bt.violetred-tx:hover  {
	color: #B079C6;
}
.violetred-bg {
	background-color: #A35ABE;
}
.bt.violetred-bg:hover {
	background-color: #B079C6;
	color:#fff;
}

/* BURNT SIENNA */

.burntsienna-tx, a.burntsienna-tx {
	color: #E76E51;
}
a.burntsienna-tx:hover, .bt.burntsienna-tx:hover  {
	color: #eeb165;
}
.burntsienna-bg {
	background-color: #E76E51;
}
.bt.burntsienna-bg:hover {
	background-color: #eeb165;
	color:#fff;
}

/* STEEL BLUE */

.steelblue-tx, a.steelblue-tx {
	color: #4682B4;
}
a.steelblue-tx:hover, .bt.steelblue-tx:hover {
	color: #B0C4DE;
}
.steelblue-bg {
	background-color: #4682B4;
}
.bt.steelblue-bg:hover {
	background-color: #B0C4DE;
	color:#fff;
}

/* VIOLET BLUE */

.violetblue-tx, .violetblue-tx a {
	color: #325aa4;
}
.violetblue-tx a:hover {
	color: #4076D7;
}
.violetblue-bg {
	background-color: #325aa4;
}
.bt.violetblue-bg:hover {
	background-color: #4076D7;
	color:#fff;
}

/* POWDER BLUE */

.powderblue-tx, .powderblue-tx a {
	color: #82ccda;
}
.powderblue-tx a:hover {
	color: #acdfe8;
}
.powderblue-bg {
	background-color: #82ccda;
}
a .powderblue-bg:hover,
.bt.powderblue-bg:hover {
	background-color: #acdfe8;
	color:#fff;
}

/* PALE GRAY LIGHT */

.palegraylight-tx, a.palegraylight-tx {
	color: #ebeae6;
}
a.palegraylight-tx:hover, .bt.palegraylight-tx:hover {
	color: #F6F6F7;
}
.palegraylight-bg {
	background-color: #EAE9E5;
}
.bt.palegraylight-bg:hover {
	background-color: #F6F6F7;
	color:#BA3531;
}

/* PALE GRAY DARK */

.graydark-tx, a.graydark-tx {
	color: #555552;
}
a.graydark-tx:hover, .bt.graydark-tx:hover {
	color: #7F7F7C;
}
.graydark-bg {
	background-color: #555552;
}
.bt.graydark-bg:hover {
	background-color: #7F7F7C;
	color:#BA3531;
}


/* GRAY */

.gray-tx, a.gray-tx {
	color: #807f7c;
}
a.gray-tx:hover, .bt.gray-tx:hover {
	color: #A4A4A4;
}
.gray-bg {
	background-color: #807f7c;
}
.bt.gray-bg:hover {
	background-color: #A4A4A4;
	color:#fff;
}

/* LIGHT GRAY */

.lightgray-tx, a.lightgray-tx {
	color: #bdbdbd;
}
a.lightgray-tx:hover, .bt.lightgray-tx:hover {
	color: #959595;
}
.lightgray-bg {
	background-color: #bdbdbd;
}
.bt.lightgray-bg:hover {
	background-color: #959595;
	color:#9f9f9c;
}

/* DUST GRAY */

.dustgray-tx, a.dustgray-tx {
	color: #9F9F9C;
}
a.dustgray-tx:hover, .bt.dustgray-tx:hover {
	color: #BDBDBD;
}
.dustgray-bg {
	background-color: #9F9F9C;
}
.bt.dustgray-bg:hover {
	background-color: #BDBDBD;
	color:#fff;
}

/* WARM GRAY */

.warmgray-tx, a.warmgray-tx {
	color: #DBD8D2;
}
a.warmgray-tx:hover, .bt.warmgray-tx:hover {
	color: #e9e7e3;
}
.warmgray-bg {
	background-color: #DBD8D2;
}
.bt.warmgray-bg:hover {
	background-color: #e9e7e3;
	color:#9f9f9c;
}

/* CARROT ORANGE */

.carrotorange-tx, a.carrotorange-tx {
	color: #f17918;
}
a.carrotorange-tx:hover, .bt.carrotorange-tx:hover {
	color: #f7a53f;
}
.carrotorange-bg {
	background-color: #f17918;
}
.bt.carrotorange-bg:hover {
	background-color: #f7a53f;
	color:#fff;
}

/* CINNAMON */

.cinnamon-tx, a.cinnamon-tx {
	color: #C65B7C;
}
a.cinnamon-tx:hover, .bt.cinnamon-tx:hover {
	color: #db8ca7;
}
.cinnamon-bg {
	background-color: #C65B7C;
}
.bt.cinnamon-bg:hover {
	background-color: #db8ca7;
	color:#fff;
}




/********************** CONTAINERS **********************/

/** BOX **

	#1 Text centered vertically inside box:

	<div class="col-xs-12">
		<div class="box" style="height:120px;">
			<div class="box-inner bottom dustgray-bg">Box1</div>
		</div>
	</div>

	#2 DIV element centered vertically inside box:

	<div class="col-xs-12">
		<div class="box" style="height:120px;">
			<div class="box-inner bottom dustgray-bg">
				<div class="inline">Box2</div>
			</div>
		</div>
	</div>


	#3 Text or element in the top/center/bottom of box:

	<div class="col-xs-12">
		<div class="box" style="height:120px;">
			<div class="box-inner bottom dustgray-bg">Box3</div>
		</div>
	</div>

	#4 Multiple boxes aligned horizontally

	<div class="row no-gutters" style="height:120px;"> <!-- no BS columns gutters -->
		<div class="col-md-3 col-xs-12 fullheight">
			<div class="box first">
				<div class="box-inner dustgray-bg">Box1</div>
			</div>
		</div>
		<div class="col-md-3 col-xs-12 fullheight">
			<div class="box middle">
				<div class="box-inner dustgray-bg">Box2</div>
			</div>
		</div>
		<div class="col-md-3 col-xs-12 fullheight">
			<div class="box middle">
				<div class="box-inner dustgray-bg">Box3</div>
			</div>
		</div>
		<div class="col-md-3 col-xs-12 fullheight">
			<div class="box last">
				<div class="box-inner dustgray-bg">Box4</div>
			</div>
		</div>
	</div>

**/

.box{
	display: table;
	position:relative;
	width:100%;
  /*overflow:hidden;*/
  padding:20px;
}

.box.first {
	padding:0 0.5em 0 0;
}
.box.middle {
	padding:0 0.5em;
}
.box.last {
	padding:0 0 0 0.5em;
}

.box-inner {
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}
.box-inner.top {
	vertical-align: top;
}
.box-inner.bottom {
	vertical-align: bottom;
}

.block{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
}
.absolute {
	position:absolute;
}
.absolute.topleft {
	top: 0;
	left:0;
}
.absolute.bottomright {
	bottom: 0;
	right:0;
}
.relative {
	position:relative;
}

.shadow {
	-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.2);
	-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.2);
	box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.2);
}
.shadow-txt {
	text-shadow: 0 0 8px #000000;
}


/********************** FLEX VERTICAL ALIGN **********************/

/** Usage

	<div class="valign valign-left">
		<div class="valign-item">...</div>
		<div class="valign-item valign-item-end">...</div>
	</div>

**/

.valign {
  display: flex;
  align-items: center;
  justify-content: center;
}

.valign-left{
	display: flex;
	align-items: flex-start;
	justify-content:flex-start;
}
.valign-right{
	display: flex;
	align-items: flex-end;
	justify-content:flex-end;
}

.valign-item-start {
  align-self: flex-start;
}

.valign-item-end {
  align-self: flex-end;
}

/*********** FLEX  ***********/

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.flex-start {
  justify-content: flex-start;
}
.flex-end {
  justify-content: flex-end;
}
.flex-center {
  justify-content: center;
}
.space-between {
  justify-content: space-between;
}

.flex-item-center {
	align-self: center;
}
.flex-item-bottom {
	align-self: end;
}

/********************** FULLBOX **********************/

.fullbox {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.fullbox-bottom {
	position:relative;
	bottom:30px;
	width:100%;
}

.fullbox-top {
	position:relative;
	top:30px;
	width:100%;
}

.fullbox-center {
	position:relative;
	top:50%;
	-ms-transform: translate(0, -50%); /* IE 9 */
    -webkit-transform: translate(0, -50%); /* Safari */
    transform: translate(0, -50%);
	width:100%;
}

/********************** OPACITY **********************/

.transparent {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.transparent-20 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	-moz-opacity: 0.2;
	opacity: 0.2;
}

.transparent-30 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	opacity: 0.3;
}

.transparent-40 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	filter: alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
}

.transparent-50 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

.transparent-60 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

.transparent-70 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

.transparent-80 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.bg-opaque-30 {
	background-color: rgba(0,0,0,0.3);
}
.bg-opaque-40 {
	background-color: rgba(0,0,0,0.4);
}
.bg-opaque-50 {
	background-color: rgba(0,0,0,0.5);
}
.bg-opaque-60 {
	background-color: rgba(0,0,0,0.6);
}
.bg-opaque-70 {
	background-color: rgba(0,0,0,0.7);
}
.bg-opaque-80 {
	background-color: rgba(0,0,0,0.8);
}
.bg-opaque-90 {
	background-color: rgba(0,0,0,0.9);
}

.gradient-blue {
	/* https://cssgradient.io/ */
	background: linear-gradient(180deg, rgba(11,68,119,0.3) 0%, rgba(11,68,119,0.15) 30%, rgba(255,255,255,0.5) 100%);
}

/* OVERLAY - create an absolute overlay DIV with full width & height */

.overlay {
	position: absolute;
	width: 100%;
	height:100%;
	top:0;
	left:0;
}

/* OVERLAY GRADIENT

use with mix-blend-mode css:

<div class="overlay-gradient transparent-70">
	<img style="mix-blend-mode: multiply;" src="..." />
</div>

*/

.overlay-gradient {
	background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0));
	background-size: 100% 100%;
	background-position: left top;
	background-repeat: no-repeat;
	top:0;
	left:0;
}
.overlay-gradient.bottom {
	background-position: left bottom;
}
.overlay-gradient.half {
	background-size: 100% 70%;
}

/********************** IMAGE FILTERS **********************/

/* Convert image to grayscale. Usage: <div class="grayscale" style ="background-image:url('...')"></div> */

.grayscale {
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray;
	filter: grayscale(1);
}


/********************** THUMBNAILS **********************/

/**

Usage: define class of img

	<div class="thumbnail">
		<img class="thumbnail-md" src="https://static.pexels.com/photos/459225/pexels-photo-459225.jpeg" />
	</div>

or set specific height:

	<div class="thumbnail">
		<img style="height:200px;" src="https://static.pexels.com/photos/459225/pexels-photo-459225.jpeg" />
	</div>

**/

.thumbnail {
	border:none!important;
	padding:0!important;
	margin-bottom:0!important;
	overflow:hidden;
	position: relative;
}

.thumbnail img,
.thumbnail img.center {
	object-fit:cover;
	width:100%;
}
.thumbnail img.top {
	object-position: 50% 0;
}
.thumbnail img.bottom {
	object-position: 50% 100%;
}
.thumbnail img.topleft {
	object-position: 0 0;
}
.thumbnail img.bottomright {
	object-position: 100% 100%;
}
.thumbnail img.centerleft {
	object-position: 0 50%;
}
.thumbnail img.centerright {
	object-position: 100% 50%;
}

.thumbnail img.thumbnail-xs {
	height:100px;
}
.thumbnail img.thumbnail-sm {
	height:140px;
}
.thumbnail img.thumbnail-md {
	height:150px;
}
.thumbnail img.thumbnail-lg {
	height:200px;
}
.thumbnail img.thumbnail-xl {
	height:350px;
}
.thumbnail img.thumbnail-xxl {
	height:500px;
}


/*************** MASONRY GALLERY ****************/

/** Usage:

	<div class="masonry-wrapper">
		<div class="masonry">

			<div class="masonry-item"> <img src="..." class="masonry-content" /></div>
			<div class="masonry-item"> <img src="..." class="masonry-content" /></div>
			<div class="masonry-item"> <img src="..." class="masonry-content" /></div>

		</div>
	</div>

**/

.masonry-wrapper {
	padding: 0;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.masonry {
	columns: 2;
	column-gap: 10px;
}
.masonry-item {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 10px;
}

.masonry-item, .masonry-content {
	border-radius: 4px;
	overflow: hidden;
}
.masonry-item {
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .3));
	transition: filter .25s ease-in-out;
}
.masonry-item:hover {
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, .3));
}


/*************** PODCAST PLAYER ****************/

/*
WP 3.6 Native Audio Player styling
Isolated new istance of oogo-mejs-container in oogo-admin.php
*/

/* change the color of the background */
.oogo-mejs-container .mejs-controls,
.oogo-mejs-container .mejs-mediaelement,
.oogo-mejs-container .mejs-container {
	background-color: #C8E1FA !important;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

/* change the color of the lettering */
.oogo-mejs-container .mejs-currenttime,
.oogo-mejs-container .mejs-duration {
	color: black !important;
}

/* eliminate the yellow border around the play button during playback */
.oogo-mejs-container .mejs-controls .mejs-button button:focus {
	outline: none !important;
}

/* use a sprite file with darker transport icons */
.oogo-mejs-container .mejs-controls .mejs-button button {
	background-image: url('res/mejs-controls-gray.svg') !important;
}

/* change the color of the progress bar */
.oogo-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
	background: #AAC7E3 !important;
}

/* change the color of the current time bar */
.oogo-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
	background: #aa4038 !important;
}

/* change the color of the file loading bar */
.oogo-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: #ccc !important;
}

.oogo-mejs-container .mejs-controls .mejs-volume-button .mejs-volume-slider {
    display: none !important;
}

/* hide browser player */
audio {
	/*display:none;*/
}



/********************** ZOOM & DISSOLVE IMAGE FX **********************/

/*Usage:

	<a class="zoom" href="#">
		<img class="thumbnail-lg" src="https://static.pexels.com/photos/459225/pexels-photo-459225.jpeg" />
	</a>;

**/

.zoom > img, .zoom > div {
	-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.zoom > img:hover, .zoom > div:hover {
	-webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  -ms-transform:scale(1.1);
  -o-transform:scale(1.1);
   transform:scale(1.1);
}

.dissolve,
.dissolve img {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.dissolve:hover,
.dissolve img:hover {
  filter: alpha(opacity=90);
  opacity: 0.9;
	/*z-index:-1;*/
}

/********* COVER UP *********/

.coverup {
	width: 100%;
	height:100%;
	position: absolute;
	top: 0;
	left: 0;
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
	z-index:-1;
}

/* only background */

.cover-bg {
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
}


/********************** CARD FLIP EFFECT **********************/

/** Usage

	<div class="fx-reveal">
		<div class="reveal-group" style="height:200px;">
			<div class="front" style="background-color:#218394;">
				<div class="uppercase raleway extrabold white-tx xlarge">Lorem ipsum sit amet</div>
			</div>
			<div class="back" style="background-color:#ed6d6c;">
				<div class="roboto-slab regular white-tx lineheight-13">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, augue at dictum hendrerit, lorem massa pulvinar leo, at commodo enim elit eget arcu.</div>
			</div>
		</div>
	</div>

**/

.fx-reveal {
	position:relative;
    width:100%;
    height:auto;
    /*overflow:hidden;*/
    float:left;
    /*margin-right:20px*/
}
.fx-reveal .reveal-group {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    display: flex;
	align-items: center;
	justify-content: center;
}
.fx-reveal .reveal-group .front {
    position:relative;
    z-index:10;
}
.fx-reveal .reveal-group .back {
    backface-visibility:hidden;
    -webkit-backface-visibility: hidden;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
		padding:20px;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

.fx-reveal .reveal-group .front,
.fx-reveal .reveal-group .back {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align:center;
	width:100%;
	height:100%;
	/*padding:20px;*/
}

.fx-reveal .reveal-group .front {
    backface-visibility:hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    transition:all .3s
}
.fx-reveal .reveal-group:hover .front,.reveal-group.hover .front {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.fx-reveal .reveal-group:hover .back,.reveal-group.hover .back {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

/********************** FIT WIDTH & HEIGHT **********************/

.fullwidth {
	width: 100%;
}
.fullheight {
	height: 100%;
}

/********************** COPY TO CLIPBOARD **********************/

/** function in goo.js **/

.copy-to-clipboard {
	background-color:none;
}

.copied {
	color: black!important;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
	margin-left: 0;
}

.copied:hover{
	margin-left: 6px;
}

.copied:before{
	font-family: 'FontAwesome';
	content: '\f0ea';
	display: inline-block;
	margin-right:4px;
 }

 .tooltip {
 	text-transform:none;
 }

 /**** ERRORS IN PAYMENT FORM *****/

 label.error {
	position:absolute;
	padding:6px 12px;
	background-color:#FABB21;
	top:0;
	right:15px;
	color:#000;
	font-family: 'Roboto',helvetica, arial, sans-serif;
	text-indent: 0;
}

label span {
	color:red;
	margin-left: 3px;
	font-weight: 400;
}



/**************** UI DEFAULT GOO STYLE ****************/


/*--- NAVIGATION MENUS ---*/

#page {
	width:100%;
}

@media screen and (max-width: 768px) {
	#page {
		margin-top: 0;
	}
}

/*--- SIDE MENU ---*/

.admin-bar .sidemenu {
	padding-top:42px;
}

.sidemenu {
	height: 100%;
	width: 250px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: -250px;
	background-color: #262626;
	overflow-x: hidden;
}

.sidemenu .closebtn {
	font-size: 36px;
	margin: 0 30px 20px 30px;
	color: #545553;
}

.sidemenu a {
	color: #c3c4c7!important;
	text-decoration: none;
	color: #ccc;
	display: block;
}

.sidemenu a:hover {
	color: #fff!important;
	text-decoration: none;
}

.sidemenu ul li.menu-item-has-children > a:after {
	content: "\f347";
	font-family: 'dashicons';
	padding-left: 4px;
	display: inline-block;
	vertical-align:top;
}

.sidemenu ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.sidemenu ul li {
	margin: 0 30px;
	border-top: solid thin #545553;
	padding: 8px 0;
}
.sidemenu ul li:first-child {
	border: none;
}
.sidemenu ul.sub-menu {
	margin:12px 0;
}
.sidemenu ul.sub-menu li {
	border-top: none;
	margin: 0;
	padding: 6px;
}

.sidemenu ul ul {
	display: none;
	text-transform: none;
}

/* toggle side menu */

#openmenu {
  position: absolute;
  right: 0;
  top:0;
  padding: 20px;
	cursor:pointer;
}

/*--- MAIN MENU ---*/

/** main wrapper **/

.mainmenu {
  position:absolute;
  right: 0;
  bottom:0;
  z-index: 20;
}

.mainmenu a:hover {
	text-decoration: none;
}

/* align menu containers,
p.e. #menu-main-menu-container & #menu-access-menu-container
to separate display: block */

.mainmenu div {
  display: inline-block;
  vertical-align: middle;
	margin-left: 10px;
}

/** first level ul (menus) **/

.mainmenu > ul {
	position: relative;
	display:inline-block;
	margin-bottom:0;
}

/* all levels ul (menus & submenus) */

.mainmenu ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/** menus li items **/

.mainmenu li {
	display: inline-block;
	position: relative;
	line-height: 1.3em;
}
.mainmenu li.menu-item-has-children > a:after {
	content: none;
	font-family: 'dashicons';
	padding-left: 4px;
	display: inline-block;
	vertical-align:top;
}
.mainmenu li a {
  text-transform: uppercase;
  padding: 8px 10px;
  font-size: 14px;
	color: #343432;
	width: 100%;
	display: block;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
  transition:all .5s;
}
.mainmenu li a:hover {
	background-color: #e9ecef;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
  transition:all .5s;
}

/* submenus */

.mainmenu ul ul {
	margin-top: 8px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
	background-color: #fff;
	font-weight:500;
	overflow:hidden;
	max-height: 0px;
	min-width: 120px;
	-ms-transition: max-height 0.3s ease-in;
	-moz-transition: max-height 0.3s ease-in;
	-webkit-transition: max-height 0.3s ease-in;
  transition: max-height 0.3s ease-in;
}
.mainmenu ul li:hover > ul,
.mainmenu ul li.focus > ul {
	left: auto;
	max-height: 900px;
	-ms-transition: max-height 0.3s ease-in;
	-moz-transition: max-height 0.3s ease-in;
	-webkit-transition: max-height 0.3s ease-in;
  transition: max-height 0.3s ease-in;
}

/* submenus items */

.mainmenu ul ul li {
	text-transform: none;
	border-top: thin solid #ccc;
  white-space: nowrap;
	width: 100%;
	margin: 0;
}
.mainmenu ul ul li:first-child {
	border: none;
}

.mainmenu ul ul li:hover {
	border-bottom: none;
}

/* --- ACCESS MENU --- */

ul#access-menu li.menu-login,
ul#access-menu li.menu-logout {
	/* to change appareance of different statuses */
}

.sidemenu ul#access-menu {
	margin-bottom: 20px;
}

ul#access-menu > li > a {
  padding: 8px 10px;
  background-color:#C93F21; /* brickred */
  color: #fff!important;
  border-radius: 5px;
  display: inline-block;
  box-sizing: border-box;
}
ul#access-menu > li > a:hover {
	background-color: #DB5147; /* brickred hover */
}

/* fix inusual border BS */

.dropdown-toggle::after {
	border: none;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: inherit;
}

/* --- MENU BREAKPOINTS --- */

@media screen and (max-width: 900px) {
  	#openmenu {
		display:none;
	}
	#primary-menu ul:first-child {
		display: flex;
	}
}

@media screen and (max-width: 768px) {
  	#primary-menu {
		display: none;
	}
	#openmenu {
		display:block;
	}
}


/*--- BODY PAGE ---*/

/*html, body {
    max-width: 100%;
    overflow-x: hidden;
    background: #fff;
}*/

#page {
	width:100%;
}

@media screen and (max-width: 768px) {
	#page {
		margin-top: 0;
	}
}


/*---SLIDER ---*/


a.toslide {
	position:absolute;
	margin:20px;
	bottom:0;
	right: 0;
	display:block;
}
a.toslide .glyphicon {
	font-size: 28px;
	color:#fff;
	opacity:0.7;
}
a.toslide .glyphicon:hover {
	opacity:1;
}
#slider-box{
	min-height:270px;
}
#slider-box a h1 {
	opacity:0.7;
}
#slider-box a h1:hover {
	opacity:1;
}


/* ------ COMMENTS TEMPLATE ------ */


.comments-title {
	color: #4682b4;
	font-size: 18px;
	text-transform: uppercase;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	margin-bottom: 20px;
}

.comment-list {
	margin: 0;
	padding: 0;
}

.comments-before,
.logged-in-as {
	margin: 10px;
	font-family: 'Raleway', Times, serif;
	font-style: italic;
	color:#797979;
}

.title-reply{
	margin: 10px;
	font-family: 'Raleway',Helvetica, Arial, sans-serif;
	font-weight: 800;
	color: #4682b4;
	font-size: 24px;
}

.comments-area{
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3em;
}

.comment-form-message {
	margin: 10px;
}

.comment-form-author, .comment-form-email {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	padding: 10px;
	margin:0;
	width: 50%;
}

.comment-form-cookies-consent {
	padding: 10px;
	font-size: 14px;
}

#commentsubmit {
	background-color: #4682b4;
	color: white;
	text-transform: uppercase;
	font-family: 'Raleway',Helvetica, Arial, sans-serif;
	font-weight: 700;
	margin:10px;
	float: right;
}
#commentsubmit:hover {
	background-color: #B0C4DE;
}

.comment {
	list-style: none;
}

.comment-respond {
	background-color: #eff1f3;
	padding: 10px;
	border-radius:0.5em;
	overflow: hidden;
	margin-bottom: 20px;
}

.comment-respond,
.comment-respond h3 {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

.comment-body {
	margin-bottom:20px;
}

.comment-post {
	width:80%;
}

.comment-author{
	margin-right:8px;
}

.comment-container {
	padding:10px;
	background-color:#eff1f3;
	border-radius:0.5em;
}

.comment-reply {
	font-size:12px;
	margin-top:4px;
}

.cancel-reply {
	float:right;
}

.avatar {
	border-radius: 50%;
}

/****** CENTER MODAL VERTICALLY ******/

/** Usage:

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="vertical-alignment-helper">
	        <div class="modal-dialog vertical-align-center">
	            <div class="modal-content">
	                <div class="modal-header">
	                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

	                    </button>
	                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

	                </div>
	                <div class="modal-body">...</div>
	                <div class="modal-footer">
	                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	                    <button type="button" class="btn btn-primary">Save changes</button>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>

**/


.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    width:inherit;
		max-width:inherit;
    height:inherit;
    margin: 0 auto;
    pointer-events:all;
}


/*----- WOW.js -----*/

.wow {
	/*visibility:hidden;*/
}




/********************** MEDIA **********************/

/* Breakpoint Tablet */

@media (max-width: 900px) {

	/* Gutenberg setup responsive columns */

  	.wp-block-columns {
	    display: initial;
	}
	.wp-block-columns .wp-block-column {
		margin: 0 0 40px;
	}
}

/* Brakpoint Smartphone */

@media (max-width: 600px) {
 	.row.table-row {
	    display: block;
	}
	.row.table-row > div {
	    display: block;
	}
	.thumbnail img.thumbnail-lg,
	.thumbnail img.thumbnail-xl,
	.thumbnail img.thumbnail-xxl,
	.thumbnail img.thumbnail-sm,
	.thumbnail img.thumbnail-md {
		height:200px;
	}


	.section-heading {
		display: table;
		white-space: normal;
		margin: 0;
		width:100%;
	}

	.section-heading:after,
	.section-heading:before { /* left */
		content: "";
		display: block;
		width: 100;
		background: none;
	}
 }