/*
--blue: #0303FFff;
--xanthic: #F1F10Dff;
--middle-grey: #888877ff;
--cornflower-blue: #9393FFff;
--white: #FFFFFFff;


--blue: hsla(240, 100%, 51%, 1);
--xanthic: hsla(60, 90%, 50%, 1);
--middle-grey: hsla(60, 7%, 50%, 1);
--cornflower-blue: hsla(240, 100%, 79%, 1);
--white: hsla(0, 0%, 100%, 1);


$blue: #0303FFff;
$xanthic: #F1F10Dff;
$middle-grey: #888877ff;
$cornflower-blue: #9393FFff;
$white: #FFFFFFff;


$blue: hsla(240, 100%, 51%, 1);
$xanthic: hsla(60, 90%, 50%, 1);
$middle-grey: hsla(60, 7%, 50%, 1);
$cornflower-blue: hsla(240, 100%, 79%, 1);
$white: hsla(0, 0%, 100%, 1);


$blue: rgba(3, 3, 255, 1);
$xanthic: rgba(241, 241, 13, 1);
$middle-grey: rgba(136, 136, 119, 1);
$cornflower-blue: rgba(147, 147, 255, 1);
$white: rgba(255, 255, 255, 1);


$gradient-top: linear-gradient(0deg, #0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
$gradient-right: linear-gradient(90deg, #0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
$gradient-bottom: linear-gradient(180deg, #0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
$gradient-left: linear-gradient(270deg, #0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
$gradient-top-right: linear-gradient(45deg, #0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
$gradient-bottom-right: linear-gradient(135deg, #0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
$gradient-top-left: linear-gradient(225deg, #0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
$gradient-bottom-left: linear-gradient(315deg, #0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
$gradient-radial: radial-gradient(#0303FFff, #F1F10Dff, #888877ff, #9393FFff, #FFFFFFff);
*/
html {
  scroll-behavior: smooth;
}

#branding{
	position:relative;
	width:100%;
	padding:10px 0;
	margin:0;
	background:#000000;
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;	
}
#logo{
	margin:0;
	border:1px solid #FFFFFF;
}
#longdistance{
	color:#ffff00;
	background:#0000ff;
	font-size:2.25em;
	line-height:100%;
	font-weight:bold;
	letter-spacing:0;
	word-spacing:0;
	padding:5px 10px 5px 10px;
	margin:0;
	
}
#communications{
	color:#0000ff;
	background:#FFFFFF;
	font-size:1.5em;
	line-height:100%;
	font-weight:bold;
	letter-spacing:0;
	padding:0 0 0 10px;
	margin:0;	
}
#slogan{
	color:#FFFFFF;
	font-size:1.25em;
	line-height:100%;
	font-weight:normal;
	letter-spacing:0;
	padding:10px;
	margin:0;
	text-align:center;
	font-style:italic;
}
#phone{
	color:#FFFFFF;
	font-size:1.0em;
	line-height:100%;
	font-weight:normal;
	letter-spacing:0;
	padding:10px;
	margin:0;
	text-align:center;
}
#abn{
	color:#FFFFFF;
	font-size:1.0em;
	line-height:100%;
	font-weight:normal;
	letter-spacing:0;
	padding:10px;
	margin:0;
	text-align:center;
	text-transform:uppercase;
}
#page-name{
	margin:0 auto;
	padding:10px 0;
	width:100%;
	background:rgba(241, 241, 13, 1);
}
#footer{
	position:relative;
	width:100%;
	padding:0;
	margin:0;
}
#footer p, #footer a, #footer a:hover{

}
#widgets{
	position:relative;
	width:100%;
	padding:25px 0;
	margin:0;	
}
#copyright{
	border-top:2px solid #000000;
}

/* review */
.customer, .service{
	line-height:100%;
	padding:0 10px;
}
.border-radius-circle{
	border-radius: 50%;
}

.white{
	color:#FFFFFF;
}

.bg_white{
	background:#FFFFFF;
	padding:25px 0;
}
.bg_transparent_white{
	background:rgb(255,255,255,0.7);
	padding:25px 0;
}
.blue{
	color:#0000ff;
}

.bg_blue{
	background:#0000ff;
	padding:25px 0;
}

.yellow{
	color:#ffff00;
}

.bg_yellow{
	background:#ffff00;
	padding:25px 0;
}

.bg_middle-grey{
	background:rgba(136, 136, 119, 1);
	padding:25px 0;
}

.parallax-1 {
	position:relative;
	padding:5% 0;
	background-image: url("../images/parallax-1.webp");
	background-image: url("../images/parallax-1.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.parallax-2 {
	position:relative;
	padding:5% 0;
	background-image: url("../images/parallax-2.webp");
	background-image: url("../images/parallax-2.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
	
.circle {
    position: relative;
    background:rgba(3, 3, 255, 0.5);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    position: relative;
    border: 2px solid #000000;
    margin:0;
    vertical-align: middle;
    margin: 0 auto;
}


.center{
	text-align:center;
}
.justify{
	text-align:justify;
}

.scale-with-grid{
	max-width:100%;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.box-shadow{
	box-shadow:5px 5px 20px #000000;
}

.icon-box{
	position:relative;
	width:50%;
	margin:0 auto;
}


.image-box{
	position:relative;
}
.image-box-footer{
	position:relative;
	width:50%;
}
.centered {
	position:absolute;
	top:100%;
	left:50%;
	transform:translate(-50%, -100%);
	background:rgb(255,255,255,0.7);
	z-index:1000;
	text-align:center;
	color:#00000;
	font-size:2em;
	padding:10px 0;
}
.centered a{
	color:#000000;
}

.text-centered:before {
    content:""; /* Adding Extra Space Above Element */
    display:inline-block;
    height:100%;
    margin-top:25%;
    vertical-align: middle;
}
.text-centered {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
}



.button{
	padding:10px 15px;
	margin:0;
	margin-bottom:5px;
	border:none;
	border-radius:10px;
	cursor: pointer;
	text-decoration:none;	
}

.primary-0{
	background:rgb(26, 115, 232);
	color:#FFFFFF;
}
.primary-0:hover{
	background:rgb(26, 115, 232, .75);
	color:#FFFFFF;
}
.primary-1{
	background:rgb(51, 122, 183);
	color:#FFFFFF;
}
.primary-1:hover{
	background:rgb(51, 122, 183, .75);
	color:#FFFFFF;
}
.primary-2{
	background:rgb(91, 182, 222);
	color:#000000;
}
.primary-2:hover{
	background:rgb(91, 182, 222, .75);
	color:#000000;
}
.warning{
	background:rgb(240, 173, 78);
	color:#000000;
}
.warning:hover{
	background:rgb(240, 173, 78, .75);
	color:#000000;
}
.danger{
	background:rgb(217, 83, 79);
	color:#000000;
}
.danger:hover{
	background:rgb(217, 83, 79, .75);
	color:#000000;
}
.full-width{
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center;
}


/* #Media Queries */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1024px) {
	#longdistance{
		font-size:2em;
	}
	#slogan, #phone, #abn{
		font-size:1.25em;
	}
	.hide-mobile{
		display:none;
	}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/