/*  ----------------------------------------------------------------------------------------------------------------------

	LAYOUT

*/

body {
	top: 0;
	bottom: 0; 
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	border: none;
	background-color: #444;
	background-position: 0 0;
}
img {
	border: none;
	max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
	vertical-align: middle;
}

.wrapper {
	max-width: 1200px; 
	margin: auto;
}



/*  ----------------------------------------------------------------------------------------------------------------------

	COLOUR

*/

.colb {
	color: #36c;
}
.colg {
	color: #080;
}
.colr {
	color: #c00;
}

.bkb {
	background-color: #d9ecff;
}
.bkg {
	background-color: #dfffd9;
}
.bkr {
	background-color: #ffebeb;
}

.greybk {
	background-color: #eee;
}
.whitebk {
	background-color: #fff;
}
.blackbk {
	background-color: #222;
}
.boxshadow {
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
}


/* GENERAL */

.alilef {
	text-align: left;
}
.alicen {
	text-align: center;
}
.alirig {
	text-align: right;
}
.alijus {
	text-align: justify;
}
.valtop {
	vertical-align: top;
}
.valmid {
	vertical-align: middle;
}
.valbot {
	vertical-align: baseline;
}

.valmidout { 
    width: 100%;
    height: 100%;
    text-align: center;
}
.valmidout:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.valmidin {
    display: inline-block;
    vertical-align: middle;
}

.wide {
	width: 100%;
}

.padcell {
	padding: 6px 10px;
}
.pad {
	padding: 12px 25px;
}
.padtop {
	padding: 25px 0 0 0;
}
.padbot {
	padding: 0 0 25px 0;
}
.padtopbot {
	padding: 25px 0;
}

.dblock {
	display: block;
}
.iblock {
	display: inline-block;
}

.round10 {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.round5 {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

/* MARGIN */

.marnon {
	margin: 0px;
}
.marcen {
	margin-left: auto;
	margin-right: auto;
}
.martop {
	margin-top: 20px;
}
.martop10 { 
	margin-top: 10px;
}
.marbot {
	margin-bottom: 20px;
}
.marlef {
	margin-left: 20px; 
}
.marlef10 {
	margin-left: 10px; 
}

.heightanim {
	max-height:9999px;
	-moz-transition: all 3s;
	-ms-transition: all 3s;
	-o-transition: all 3s;
	-webkit-transition: all 3s;
	transition: all 3s;
}
.heightanim.pre-animation {
	opacity:0;
	max-height: 0;
}











/*  ----------------------------------------------------------------------------------------------------------------------

	DATE PICKER

*/

.dpDiv {
background-color: #FFFFFF;
border: 1px solid #845B4E;
	}
.dpTable {
text-align: center;
font-style: normal;
border: solid 0px #FFFFFF;
border-collapse: collapse;
	}
.dpTR {
	}
.dpTitleTR {
	}
.dpDayTR {
	}
.dpTodayButtonTR {
	}
.dpTD { /* all cells on the calendar except current */
font-size: 12px;
font-weight: normal;
padding: 4px 8px;
color: #1122CC;
text-decoration: none;
background-color: #FFFFFF;
	}
.dpDayHighlightTD { /* which day cell is the current value */
font-size: 12px;
font-weight: normal;
background-color: #DDDDDD;
color: #1122CC;
text-decoration: none;
	}
.dpTDHover { /* hover style of date cells */
font-size: 12px;
font-weight: normal;
background-color: #DDDDDD;
color: #ad1f5d;
text-decoration: none;
cursor: pointer;
cursor: hand;
	}
.dpTDBlank { /* leading or trailing blank grid squares */
padding: 4px 8px;
background-color: #FFFFFF;
color: #FFFFFF;
	}
.dpTitleTD { /* cell that holds the title */
background-color: #FFFFFF;
	}
.dpButtonTD { /* cells that hold buttons */
background-color: #FFFFFF;
	}
.dpTodayButtonTD {
	}
.dpDayTD { /* 2 letter column headers for each week day */
background-color: #FFFFFF;
font-size: 12px;
color: #333333;
font-weight: bold;
padding: 8px;
	}
.dpTitleText { /* full text of the current month at the top */
font-size: 16px;
background-color: #FFFFFF;
color: #333333;
font-weight: bold;
	}
.dpDayHighlight { /* which day square is the current value */
	}
.dpButton { /* previous / next month buttons */
font-family: 'Open Sans', arial, helvetica, sans serif;
font-size: 16pt;
font-weight: normal;
font-style: normal;
text-align: center;
color: #1122CC;
margin: 0px;
padding: 4px 8px;
background-color: #FFFFFF;
border: 0px solid #FFFFFF;
cursor: pointer;
cursor: hand;
	}
.dpButton:hover { /* previous / next month buttons */
color: #ad1f5d;
background-color: #DDDDDD;
	}

.dpTodayButton {
	}







/*  ----------------------------------------------------------------------------------------------------------------------

	FORM

*/
 
.div-form, .div-form-public {
	position: relative;
}
.div-form {
	padding: 20px;
	display: inline-block; 
	background-color: #fff4e5;
}
.div-form-public {
	padding: 0;
	display: block; 
}

.form-data {
	text-align: left;
	display: block;
	padding: 0 0 0 5px;
}

.div-form-public input[type="text"], .div-form-public textarea,  
.div-form-public select, .div-form-public select.address, .div-form-public input[type="password"],
.div-form-public-wrapper, .fakeinput {
	display: block; 
	width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;  
}
.div-form-wrapper {
	display: inline-block; 
}
.div-form-public-wrapper, .div-form-wrapper {
	padding: 0;
	position: relative;
	z-index: 0;
}
.div-form-counter {
	padding: 0 6px;
	height: 22px;
	line-height: 22px;
	font-size: 10px;
	border: 1px solid #666;
	border-bottom: none;
	color: #222;
	background-color: #ffffeb;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	position: absolute;
	top: -22px;
	right: 0;
	z-index: 1;
}

form {
	margin: 0px;
	padding: 0px;
}

input[type="text"], textarea, select, select.address, input[type="password"], .datebutton, .fakeinput {
	border: 1px solid #666;
	color: #666;
	background-color: #ffffeb;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 120%;
}
input[type="text"], select, input[type="password"], textarea, .datebutton, .fakeinput {
	padding: 8px 14px;
}
label {
	color: #666;
	cursor: pointer;
}
.datebutton {
	cursor: pointer;
}

.inputbutton, .buybuttonlink, .servicebutton {
	cursor: pointer;
	padding: 10px 22px;
	font-family: 'Nunito Sans', sans-serif;
	text-decoration: none;
}
#getaddress_button {
	cursor: pointer;
	padding: 8px 16px;
	font-family: 'Nunito Sans', sans-serif;
	text-decoration: none;
	margin-left: 10px; 
}
#getaddress_dropdown {
	display: block;
    margin-top: 10px;
}
.inputbutton, .buybuttonlink, .loadingbutton, .servicebutton {
	font-weight: 700;
	font-size: 16px;
	background-color: #ff0;
	border: 1px solid rgb(207,207,0);
	color: #000;
	-webkit-box-shadow: 1px 1px 0 1px rgba(158,158,0,1);
	-moz-box-shadow: 1px 1px 0 1px rgba(158,158,0,1);
	box-shadow: 1px 1px 0 1px rgba(158,158,0,1);
}
#getaddress_button {
	font-weight: 700;
	font-size: 14px;
	background-color: #ff0;
	border: 1px solid rgb(207,207,0);
	color: #000;
	-webkit-box-shadow: 1px 1px 0 1px rgba(158,158,0,1);
	-moz-box-shadow: 1px 1px 0 1px rgba(158,158,0,1);
	box-shadow: 1px 1px 0 1px rgba(158,158,0,1);
}
.inputbutton, .buybuttonlink, .loadingbutton, #getaddress_button {
	display: inline-block;
}
.servicebutton {
	display: block;
}
.loadingbutton {
	vertical-align: top;
	padding: 10px 30px;
}

.inputbutton:hover, .buybuttonlink:hover, .servicebutton:hover, #getaddress_button:hover {
	background-color: #fff;
}

.buyspanlink {
	text-decoration: none;
	cursor: pointer;
	display: block;
	background-color: #000;
	text-align: left;
	padding: 25px; 
}
.buyspanlink:hover {
	background-color: #222;
}
.buyspanlinkbutton {
	display: block;
	text-align: center;
	font-weight: 700;
	color: #000;
	background-color: #ff0;
	padding: 8px; 
}
.buyspanlink:hover .buyspanlinkbutton {
	background-color: #fff;
}



/* Form Label */

.label-inblock, .label-block {
	text-align: left;
	font-size: 80%;
	font-weight: 700;
	color: #fff;
	background-color: #999;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}
.label-inblock {
	margin-right: 15px;
}
.label-block {
	display: block;
	padding: 3px 10px;
}
.label-required {
	display: inline-block;
    margin-left: 15px;
    font-size: 11px;
    line-height: 11px;
    padding: 3px 6px;
    vertical-align: text-top;
    color: #c00;
}






/*  ----------------------------------------------------------------------------------------------------------------------

	TABLE

*/

table {
	border: none;
	border-collapse: collapse;
	border-spacing: 0px;
}

/* FORM TABLE */

.table-form th .table-form td {
	white-space: nowrap;
	font-size: 14px;
}
.table-form th {
	padding: 10px 8px 6px 15px;
	color: #666;
	font-weight: 400;
	vertical-align: top;
	border: none;
}
.table-form td {
	padding: 4px 15px 6px 8px;
	color: #666;
	vertical-align: top;
	border: none;
}

/*  DATA TABLE  */

.table-data th {
	background-color: #bbb;
	border: 1px solid #bbb;
	padding: 6px 10px;
	color: #fff;
	font-weight: 400;
	font-size: 90%;
	vertical-align: top;
}
.table-data td {
	border: 1px solid #999;
	background-color: #f7f7f7;
	padding: 6px 10px;
	color: #333;
	vertical-align: top;
}

/*  DATA 2 TABLE  */

.table-data-2 th {
	border: none;
	padding: 6px 15px 6px 0;
	color: #888;
	font-weight: 400;
	font-size: 90%;
	vertical-align: top;
}
.table-data-2 td {
	border: none;
	padding: 6px 15px;
	color: #444;
	background-color: #f7f7f7;
	vertical-align: top;
}







/*  ----------------------------------------------------------------------------------------------------------------------

	TEXT

*/

li {
	margin-bottom: 0.5em;
	margin-top: 0;
}

body {	
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	font-size: 16px; 
	line-height: 140%; 
	color: #444;
	z-index: 0;
}

h1, h2, h3, p {
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0; 
	-webkit-margin-end: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

h1 {
	font-weight: 800;
	font-size: 28px; 
	line-height: 110%; 
	color: #222;
	display: inline-block;
}

h2 {
	font-weight: 800;
	font-size: 28px; 
	line-height: 110%; 
	color: #222;
	display: inline-block;
}

h3 {
	font-size: 22px;
	line-height: 120%; 
	padding-bottom: 12px;
}

@media only screen and (max-width: 640px) {
	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	h3 { font-size: 18px; }
}

p {
	padding-bottom: 25px;
}

.bold {
	font-weight: 700; 
}

.italic {
	font-style: italic;
}

.nowrap {
	white-space: nowrap;
}

.textlabel {
	font-style: italic;
	color: #777;
}

.breaklongwords {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

/* LINKS */

a, .mainlink, .mainlink:link, .mainlink:visited, 
.fakelink, 
.closelink, .closelink:link, .closelink:visited
.whitelink, .whitelink:link, .whitelink:visited {
	cursor: pointer;
	font-weight: 700;
}
a, a:link, a:visited, .mainlink, .mainlink:link, .mainlink:visited, .fakelink, .fakelink:link, .fakelink:visited {
	color: #05f;
	text-decoration: none;
}
a:hover, .mainlink:hover, .fakelink:hover, .fakelinkh2:hover {
	color: #09f;
	text-decoration: none;
}
.whitelink, .whitelink:link, .whitelink:visited {
	color: #fff;
	text-decoration: none;
}
.whitelink:hover {
	color: #ff0;
	text-decoration: none;
}
.closelink, .closelink:link, .closelink:visited {
	text-decoration: none;
}
.closelink:hover {
	text-decoration: none;
}

.footerlink, .footerlink:link, .footerlink:visited {
	cursor: pointer;
	color: #ddd;
	text-decoration: none;
}
.footerlink:hover {
	color: #eee;
	text-decoration: none;
}

.logolink {
	display: inline-block;
	width: 130px;
  	border: none;
	cursor: pointer;
	text-decoration: none;
	margin: 12px 12px 12px 0;
	
}
.logolink:hover {
	text-decoration: none;
}
@media (min-width: 640px) {
	.logolink {
		width: 187px;
		margin: 0 25px 0 0;
	}
}

.invoicelink {
	display: block;
	border: none;
	cursor: pointer;
	text-decoration: none;
	color: #444;
}
.invoicelink:hover {
	text-decoration: none;
	color: #111;
	background-color: #eee;
}
.home-service-button-link {
	cursor: pointer;
	display: block;
	padding: 25px 0;
	background-color: #ccc;
	background-repeat: no-repeat;
    background-position: center center;
	background-size: cover;
}
.home-service-button-text {
	background-color: #ff0;
}
.home-service-button-link:hover .home-service-button-text {
	background-color: #fff;
}

.blog-thumb-link {
	cursor: pointer;
	display: block;
	padding: 25px;
	background-color: #fff;
	/* border: 4px solid #ff0; */
	color: #444;
	text-decoration: none;
}
.blog-thumb-link:hover {
	background-color: #eee;
	color: #444;
}	

.todo-link:link,
.todo-link:hover,
.todo-link:visited {
	text-decoration: none;
	font-weight: 400;
	display: block;
    padding: 20px;
	cursor: pointer;

}
.gr-link-menu-active {
	color: #444;
	background-color: #fff;
}
.gr-label {
	color: #888;
	margin-right: 10px;
}

	








/*  ----------------------------------------------------------------------------------------------------------------------

	YOUTUBE

*/

.videowrapper {
	position: relative;
	padding-top: 25px;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
}

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

.videothumb {
	position: relative;
}
.videothumb img {
	width: 100%;
	height: auto;
}
.videothumbtext { 
	position: absolute;
    height: 100%;
}
a.videolink {
	float: left;
	position: relative;
	color: #ff0;
	text-decoration: none;
}
a.videolink:hover {
	color: #fff;
	text-decoration: none;
}
a.videolink span {
	width: 100%;
}

.link-block {
	cursor: pointer;
	font-weight: 300;
	padding: 9px 18px; 
	text-decoration: none;
	color: #05f;
}
.link-block:hover {
	text-decoration: none;
	color: #09f;
}

#youtubelightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #222;
	z-index: 50;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}



.messageholder {
	padding: 0 25px;
	overflow-y: hidden;
	max-height: 80vh;
}
.messageholder:hover {
     overflow-y: auto;
     cursor: pointer;
}

.messagelinkholderhide, .messagelinkholdershow {
	position: absolute; 
	top: -25px; 
	left: 50%;
}

.messagelinkholderhide .messagelinkhide { display: inline-block; }
.messagelinkholderhide .messagelinkshow { display: none; }
.messagelinkholdershow .messagelinkhide { display: none; }
.messagelinkholdershow .messagelinkshow { display: inline-block; }

.messageholderwrapshow, .messageholderwraphide {
	position: fixed;
	left: -1px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.05);
	/*background: linear-gradient(300deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 11%, rgba(255, 255, 255, 0.09) 15%,rgba(255, 255, 255, 0.05) 20%,rgba(255, 255, 255, 0.08) 21%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.06) 47%, rgba(255, 255, 255, 0.01) 53%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.03) 68%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.08) 80%, rgba(255, 255, 255, 0.06) 88%, rgba(255, 255, 255, 0.03) 89%, rgba(255, 255, 255, 0.15) 100% );*/
	background: linear-gradient(300deg, 
		rgba(68, 68, 68, 0.8) 0%, 
		rgba(47, 47, 47, 0.7) 11%, 
		rgba(20, 20, 20, 0.6) 15%,
		rgba(68, 68, 68, 0.8) 20%,
		rgba(47, 47, 47, 0.7) 21%, 
		rgba(68, 68, 68, 0.8) 30%, 
		rgba(20, 20, 20, 0.6) 47%, 
		rgba(47, 47, 47, 0.7) 53%, 
		rgba(68, 68, 68, 0.8) 55%, 
		rgba(20, 20, 20, 0.6) 68%, 
		rgba(47, 47, 47, 0.7) 75%, 
		rgba(68, 68, 68, 0.8) 80%, 
		rgba(20, 20, 20, 0.6) 88%, 
		rgba(47, 47, 47, 0.7) 89%, 
		rgba(68, 68, 68, 0.8) 100% 
	);
	border-top: 1px solid #888;
	border-right: 1px solid #bbb;
	-moz-border-radius: 0 10px 0 0;
	-webkit-border-radius: 0 10px 0 0;
	border-radius: 0 10px 0 0;
	text-align: center;
	-ms-overflow-style: none;
	scrollbar-width: none;
	z-index: 30;
	bottom: -1px;
	transition: 1s ease;
}
.messageholderwrapshow::-webkit-scrollbar, .messageholderwraphide::-webkit-scrollbar {
	display: none;
}

.messageholderwrapshow {
	transform: translateY(0);
}
.messageholderwraphide {
	transform: translateY(100%);
}

.messagehidelink {
	background-color: #dd0;
	position: relative; 
	left: -50%; 
	font-size: 20px; 
	line-height: 20px; 
	color: #000; 
	padding: 2px 18px 0 18px; 
	-moz-border-radius: 15px 15px 0 0; 
	-webkit-border-radius: 15px 15px 0 0; 
	border-radius: 15px 15px 0 0;
}
.messagehidelink:hover {
	background-color: #ff0;
}





a.dos-photo-thumbnail, .dos-photo-thumbnail {
	position: relative;
	display: inline-block;
	width: 150px;
	height: 150px;
	font-size: 60px;
	line-height: 1px;
	vertical-align: middle;
	background-color: #ccc; 
	color: #aaa;
	text-align: center;
	margin: 0 6px 6px 0;
}

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

.photo-icon {
	position: absolute;
	right: 6px;
	top: 6px;
	font-size: 24px;
	line-height: 24px;
	text-shadow: 0 0 2px #fff, 
				 0 0 2px #fff, 
				 0 0 2px #fff, 
				 0 0 2px #fff, 
				 0 0 2px #fff;
				 
	opacity: 0.7; 
}

.dos-photo-thumbnail img {
	width: 100%;
}

.dos-photo-large {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	z-index: 100;
}