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

/********************** FONTS **********************/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,700,700italic');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900');
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i');
@import url('https://use.fontawesome.com/releases/v5.4.2/css/all.css');


.roboto-slab {
	font-family:'Roboto Slab';
}
.roboto {
	font-family: 'Roboto';
}
.roboto-condensed{
	font-family: 'Roboto Condensed';
}
.raleway {
	font-family: 'Raleway';
}
.playfair {
	font-family: 'Playfair Display';
}
.oswald {
	font-family: 'Oswald';
}
.baskerville {
	font-family: 'Libre Baskerville';
}


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


/** Link tag fix **/

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

a.underline {
	text-decoration: underline;
}


/** List **/

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

ul.list {
  	list-style: none;
  	padding: 0;
}
ul.list li {
  	padding-left: 1.2em;
}
ul.list li:before {
	content: "\f0da"; /* FontAwesome Unicode */
	font-family: 'FontAwesome';
	display: inline-block;
	margin-left: -0.6em; /* half of padding-left set on li */
	width: 1.2em; /* same as padding-left set on li */
	text-rendering: optimizeLegibility;
}
ul.list.ico-check li:before  {
	content: "\f00c"; /* FontAwesome Unicode */
}
ul.list.ico-caret-right li:before  {
	content: "\f0da"; /* FontAwesome Unicode */
}

/** Headline **/

#headline {
	border-bottom: thin dotted;
	margin-bottom:20px;
}
#headline h3 a {
    font-size: 12px;
    float: right;
    margin-top: 10px;
}

/** 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:22px;
}
.xxlarge {
	font-size:28px;
}
.xxxlarge {
	font-size:36px;
	line-height: 1.2em;
}

/** Font Styles **/

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

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

.italic {
	font-style:italic;
}

/** 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;
}

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

.table {
	display: table;
}
.table .tr {
	display: table-row;
}
.table .td {
	display: table-cell;
}
.table .td .td-25 {
	width: 25%;
}
.table .td .td-50 {
	width: 50%;
}
.table .td .td-75 {
	width: 75%;
}


/********************** 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: 0 0.5em 0 0;
    text-align:left;
    float:none;
}
.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;
}

.center {
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	padding:20px;
}

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


/** CENTER HORIZONTALLY ELEMENTS TO FIT WIDTH **/

/** Fit all the width aligning 2 elements
	
	<div class="inline-container">
        <input class="inline-right" type="button" value="Submit"/>
        <div class="inline-left"><input class="inline-inside" type="text" /></div>
	</div>
	
**/

.inline-container { 
	list-style: none; 
	padding: 0;
}
.inline-right {
	float: right;
}
.inline-left { 
	padding: 0 5px 0 0;
}
.inline-left .inline-inside { 
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



/** 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:after {
	content: '';
	display: block;
	clear: both;
}


/** 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%;
}


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

.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;
}

/* margin left-right */

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

/* margin bottom */

.mb-5 {
	margin-bottom:5px;
}
.mb-10 {
	margin-bottom:10px!important;
}
.mb-20 {
	margin-bottom:20px;
}
.mb-30 {
	margin-bottom:30px;
}

/* margin top */

.mt-5 {
	margin-top:5px;
}
.mt-10 {
	margin-top:10px;
}
.mt-20 {
	margin-top:20px;
}
.mt-30 {
	margin-top:30px;
}

/* 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-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 */

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

/** 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:block-inline;
	clear:both;
	width:100%;
	margin:0;
	border:none;
}

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

.line {
	border-top: thin solid #999a9b;
	padding: 0;
	margin: 10px 0;
}

.noborder {
	border:none!important;
}

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

/** line with title at center 

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

**/

.section-heading {
	display: table;
	white-space: nowrap;
	/*font-size: 30px;*/
	margin: 10px 15px 40px 15px;
	width:100%;
}

.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 / 100% 1px;
}

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

}

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

.bordertop {
	border-top:thin solid #bdbdbd;
}
.borderbottom {
	border-bottom:thin solid #bdbdbd;
}
.dottedtop {
	border-top:thin dotted #000;
}
.dottedbottom {
	border-bottom:thin dotted #000;
}

/********************** SOCIAL BUTTONS **********************/

/**
	Usage: <a href="#" class="fa fa-facebook"></a>
**/

/** #ILTK - conflict with footer elements menu & social

.fa {
	padding: 15px;
    font-size: 30px!important;
    width: 60px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}

.fa.small {
	padding: 7px;
	width: 30px;
	font-size: 15px!important;
	text-decoration: none;
	border-radius: 50%;
	margin: 0;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-whatsapp {
  background: #46c456;
  color: white;
}

.fa-envelope {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}

**/

/********************** 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 {
	-o-transition: all .5s;/*Opera*/
	-moz-transition: all .5s;/*Mozilla*/
	-webkit-transition:all .5s; /*Chrome*/
  	transition:all .5s;
}

.border-white {
	border: 1px solid white;
}

/* TRANSPARENT */

.transparent-tx, a.transparent-tx {
	color: #fff;
}
button.transparent-tx:hover,
a.transparent-tx:hover {
	color: rgba(255,255,255,0.7);
}
.transparent-bg {
	background: none;
}
button.transparent-bg,
btn.transparent-bg,
a.transparent-bg {
	border: 1px solid #fff;
}
button.transparent-bg:hover,
.btn.transparent-bg:hover,
.bt.transparent-bg:hover {
	background-color: rgba(255,255,255,0.2);
	color: white;
}


/* WHITE */

.white-tx, a.white-tx {
	color: #fff;
}
button.white-tx:hover,
a.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;
}

/* BRICK RED */

.brickred-tx, a.brickred-tx {
	color: #BA3531;
}
a.brickred-tx:hover, .bt.brickred-tx:hover {
	color: #DB5147;
}
.brickred-bg {
	background-color: #BA3531!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: #fdd066;
}
.goldyellow-bg {
	background-color: #FABB21;
}
.bt.goldyellow-bg:hover {
	background-color: #FCCF64;
	color:#BA3531;
}

/* DARK YELLOW */

.darkyellow-tx, a.ochre-tx {
	color: #eaab1f;
}
a.darkyellow-tx:hover, .bt.darkyellow-tx:hover {
	color: #FCCF64;
}
.darkyellow-bg {
	background-color: #eaab1f;
}
.bt.darkyellow-bg:hover {
	background-color: #FCCF64;
	color:#BA3531;
}

/* 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;
}

/* GREEN */

.green-tx, a.green-tx {
	color: #339966;
}
a.green-tx:hover, .bt.green-tx:hover {
	color: #41c483;
}
button.green-bg:active,
button.green-bg:focus,
.green-bg {
	background-color: #339966;
}
button.green-bg:hover,
.bt.green-bg:hover {
	background-color: #41c483;
}
button.green-bg:active,
button.green-bg:focus,
button.green-bg:hover,
.bt.green-bg:hover {
	color:#ffffff;
}


/* ACID GREEN */

.acidgreen-tx, a.acidgreen-tx {
	color: #9eb947;
}
a.acidgreen-tx:hover, .bt.acidgreen-tx:hover {
	color: #afcc4e;
}
button.acidgreen-bg:active,
button.acidgreen-bg:focus,
.acidgreen-bg {
	background-color: #9eb947;
}
button.acidgreen-bg:hover,
.bt.acidgreen-bg:hover {
	background-color: #afcc4e;
}
button.acidgreen-bg:active,
button.acidgreen-bg:focus,
button.acidgreen-bg:hover,
.bt.acidgreen-bg:hover {
	color:#ffffff;
}

/* ACID PALE GREEN */

.acidpalegreen-tx, a.acidpalegreen-tx {
	color: #A9CC8E;
}
a.acidpalegreen-tx:hover, .bt.acidpalegreen-tx:hover {
	color: #BFD9AB;
}
.acidpalegreen-bg {
	background-color: #A9CC8E;
}
.bt.acidpalegreen-bg:hover {
	background-color: #BFD9AB;
	color:#BA3531;
}

/* DARK TURQUOISE */

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

/* DEEP OCEAN #1e7180 */

.deepocean-tx, a.deepocean-tx {
	color: #217c93;
}
a.deepocean-tx:hover, .bt.deepocean-tx:hover {
	color: #2FABC0;
}
.deepocean-bg {
	background-color: #217c93;
}
.bt.deepocean-bg:hover {
	background-color: #2FABC0;
	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;
}

/* 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;
}

/* PALE GRAY LIGHT */

.palegraylight-tx, a.palegraylight-tx {
	color: #EAE9E5;
}
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 */

.palegraydark-tx, a.palegraydark-tx {
	color: #555552;
}
a.palegraydark-tx:hover, .bt.palegraydark-tx:hover {
	color: #7F7F7C;
}
button.palegraydark-bg:active,
button.palegraydark-bg:focus,
.palegraydark-bg {
	background-color: #555552;
}
button.palegraydark-bg:hover,
.bt.palegraydark-bg:hover {
	background-color: #666768;
}
button.palegraydark-bg:active,
button.palegraydark-bg:focus,
button.palegraydark-bg:hover,
.bt.palegraydark-bg:hover {
	color:#fff;
}


/* GRAY */

.gray-tx, a.gray-tx {
	color: #797979;
}
a.gray-tx:hover, .bt.gray-tx:hover {
	color: #A4A4A4;
}
.gray-bg {
	background-color: #797979;
}
.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;
}

/* CARROT ORANGE */

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

/* PLATINUM */

.platinum-tx, a.platinum-tx {
	color: #E3E1DD;
}
a.platinum-tx:hover, .bt.platinum-tx:hover {
	color: #C7C2BA;
}
.platinum-bg {
	background-color: #E3E1DD;
}
.bt.platinum-bg:hover {
	background-color: #C7C2BA;
	color:#9F9F9C;
}

/********************* 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:8px 16px;
}

/* 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;
	}

*/

/********************** FIX BROWSER CSS **********************/

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

.form-control,
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,
textarea,
select,
button,
textarea:hover,  
textarea:active, 
textarea:focus, 
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn:focus,
.btn.active {
    outline:0px !important;
    -webkit-appearance:none!important; 	/*chrome and safari */
    -moz-appearance:none; 		/*firefox*/
    appearance:none;
    box-shadow: none !important;
}

button:focus,
.btn:focus {
	color:inherit;
}

/** add down arrow to select **/

select {
	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;
}

textarea {
	min-height: 150px;
}

select.flatpickr-monthDropdown-months {
	background-image: none !important;
	-webkit-appearance: menulist !important;
}

/****************** FIX BOOTSTRAP CSS ******************/


/*.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:active,
.bootstrap-select .dropdown-toggle:hover {
	text-decoration: none;
	outline: 0 !important;
    outline-offset:0 !important;
}*/


/* --- goo.js file input override class --- */

.upload-group {
	white-space: nowrap;
}
.upload-group input[type="file"] {
	display: none;
}
.upload-group label {
	display: inline-block;
	vertical-align:top;
}
.upload-group .filename {
	display: inline-block;
	vertical-align:top;
	width: 70%;
	white-space: normal;
	margin: 0 15px;
}
.upload-group label:hover {
	background-color: rgba(255, 255, 255, .2);
}

/* - Basic style - change nested in new #element in style.css */

.upload-group .dashicons {
	color:#555552;
}
.upload-group label {
	border:#555552 solid thin;
}
.upload-group .filename {
	font-size: small;
	color:#555552;
	line-height:1em;
}

/********************** BS 3 CAROUSEL FADE CSS CLASS **********************/

/*
	Insert class 'carousel-fade' on carousel element, p.e.
	<div id="my-slider" class="carousel slide carousel-fade">...</div>
	
	Works with Bootstrap 3.4
	'carousel-fade' already exists in Bootstrap 4.0
*/

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}


@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}



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

/** BOX **

	Case div positioned vertically inside single box:

	<div class="col-xs-12">
		<div class="box" style="height:120px;">
			<div class="box-inner bottom dustgray-bg">Box1</div>
		</div>
	</div>
	
	.box-inner = centered vertically
	.boxinner.bottom = positioned at bottom
	.boxinner.top = positioned at top
 
	Case 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; /* disturb bs grid */
	width:100%;
    height: 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;
}
.box-inner.top {
	vertical-align: top;
}
.box-inner.bottom {
	vertical-align: bottom;
}

.block{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
}
.absolute {
	position:absolute;
}
.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-tx {
	text-shadow: 2px 2px 4px #000000;
}

/********************** 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-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;
}

.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%);
}


/********************** FORMS **********************/

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

/********************** 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 {
	object-fit:cover;
	width:100%;
}
.thumbnail img.thumbnail-xs {
	height:100px;
}
.thumbnail img.thumbnail-sm {
	height:121px;
}
.thumbnail img.thumbnail-md {
	height:140px;
}
.thumbnail img.thumbnail-lg {
	height:200px;
}
.thumbnail img.thumbnail-xl {
	height:300px;
}
.thumbnail img.thumbnail-xxl {
	height:500px;
}
.thumbnail img.thumbnail-xxxl {
	height:600px;
}

/********************** 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 {
	-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 {
	-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=50);
    opacity: 0.5;
    index-z:-1;
}


/********************** IMAGE CAPTION EFFECT **********************/

.fx-reveal {
	position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
    float:left;
    /*margin-right:20px*/
}
.fx-reveal figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    /*margin-left:-50px*/
}
.fx-reveal figure img {
    display:block;
    position:relative;
    z-index:10;
    /*margin:-15px 0*/
}
.fx-reveal figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*padding:20px;*/
    /*background-color:rgba(26,76,110,0.5);*/
    text-align:center;
    backface-visibility:hidden;
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.fx-reveal figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.fx-reveal figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.fx-reveal figure:hover figcaption,figure.hover figcaption {
    -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;
 }


/****** SCROLLING LIST ******/

/** usage: 
	
	<div id="scrolling-books" class="scrolling-list">
		<button class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<div class="wrapper">
			<div class="nav nav-tabs itemslist">
				<div class="item active"><a href="#home">Home</a></div>
				<div class="item"><a href="#profile">Profile</a></div>
				<!-- others -->
			</div>
		</div>
	</div>

**/
	
.wrapper {
    position:relative;
    margin:0 auto;
    overflow:hidden;
}

.itemslist {
    position:absolute;
    left:0px;
    top:0px;
    margin-top:0px;
}

.itemslist .item{
	display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
    padding: 0 5px;
}

.scroller {
  text-align:center;
  cursor:pointer;
  padding:7px;
  padding-top:11px;
  white-space:no-wrap;
  vertical-align:middle;
  background: none;
}

.scroller,
.scroller:hover,
.scroller:active:enabled {
	border: none;
	outline: none;
	box-shadow:none;
	font-size: 2em;
	background:none;
}

.scroller-right{
  float:right;
  background:none;
}

.scroller-left {
  float:left;
  background:none;
}

/**** READMORE SNIPPET ****/

.readmore {
	padding-top:10px;
	margin-top: 15px;
	border-top: #555555 dotted thin;
}

.readmore .link,
.readmore .social {
	display: inline-block;
}

.readmore .social {
	float:right;
}

.readmore .message {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 26px;
}
.readmore .message a {
	color: #315AA4;
}


/****** 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; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    margin: 0 auto;
    pointer-events:all;
}
	




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

/* Breakpoint Tablet */

@media (max-width: 900px) {
	/* TIP: 64% original height */	
	.normal {
		font-size:18px;
	}
	.xxlarge{
		font-size:26px;
	}
	.small{
		font-size:18px;
	}
}

/* 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 {
		height:320px;
	}
	.thumbnail img.thumbnail-sm,
	.thumbnail img.thumbnail-md {
		height:200px;
	}
	/* oogo */
	.normal,
	.xlarge {
		font-size:20px;
	}
	/* oogo */
	/*.xsmall {
		font-size: 18px!important;
	}*/
 }