@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;700&display=swap');

body{
	font-family: 'Barlow', sans-serif;
	color: #555555;
}

main > .container {
  	padding: 60px 15px 0;
}

footer p.small{
	font-size: .65rem;
}

.bg-epi{
	background-color: #084F75;
}

.hero{
	height: 450px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),url('template_images/template_c_hero/exatouch-in-use-2.jpg');
	background-size: cover;
	background-position: center;
}

.hero h1{
	color: #ffffff;
    	background-color: cadetblue;
    	padding: 0.5rem;
    	display: inline-block;
    	margin-top: 1rem;
}

.hero img{
	max-width:100%;
	height:80px;
}

.internal-hero{
	height:300px;
	background-size:cover;
}

ul.fa-ul li img {
	margin-left: -23px;
}



/* Dashboard */

.ck-powered-by-balloon{
	display:none !important;
}

.ck-editor__editable {
	min-height: 300px;
}

.cbox img{
        width: 100%;
        cursor: pointer;
        transition: transform 1s;
        object-fit: cover;
}
.cbox label{
        overflow: hidden;
        position: relative;
}
.imgbgchk:checked + label>.tick_container{
       opacity: 1;
}
.imgbgchk:checked + label>img{
       transform: scale(1.25);
       opacity: 0.3;
}
.tick_container {
       transition: .5s ease;
       opacity: 0;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       cursor: pointer;
       text-align: center;
}
.tick {
       background-color: #4CAF50;
       color: white;
       font-size: 16px;
       padding: 8px;
       height: 40px;
       width: 40px;
       border-radius: 100%;
}

.other_overlay{
	z-index: 9999;
    	position: fixed;
    	background: rgba(0,0,0,.75);
}

.spinner {
	/*position: absolute;*/
   	left: 50%;
   	top: 50%;
   	height:60px;
   	width:60px;
   	margin:0px auto;
   	-webkit-animation: rotation .6s infinite linear;
   	-moz-animation: rotation .6s infinite linear;
   	-o-animation: rotation .6s infinite linear;
   	animation: rotation .6s infinite linear;
   	border-left:6px solid rgba(0,174,239,.15);
   	border-right:6px solid rgba(0,174,239,.15);
   	border-bottom:6px solid rgba(0,174,239,.15);
   	border-top:6px solid rgba(0,174,239,.8);
   	border-radius:100%;
}

@-webkit-keyframes rotation {
   	from {-webkit-transform: rotate(0deg);}
   	to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   	from {-moz-transform: rotate(0deg);}
   	to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   	from {-o-transform: rotate(0deg);}
   	to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   	from {transform: rotate(0deg);}
   	to {transform: rotate(359deg);}
}




.loading {
	position: absolute;
    	left: 0;
    	right: 0;
    	top: 50%;
    	width: 100px;
    	color: #FFF;
    	margin: auto;
    	-webkit-transform: translateY(-50%);
    	-moz-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);
}
.loading span {
    	position: absolute;
    	height: 10px;
    	width: 84px;
    	top: 50px;
    	overflow: hidden;
}
.loading span > i {
    	position: absolute;
    	height: 4px;
    	width: 4px;
    	border-radius: 50%;
    	-webkit-animation: wait 4s infinite;
    	-moz-animation: wait 4s infinite;
    	-o-animation: wait 4s infinite;
    	animation: wait 4s infinite;
}
.loading span > i:nth-of-type(1) {
    	left: -28px;
    	background: yellow;
}
.loading span > i:nth-of-type(2) {
    	left: -21px;
    	-webkit-animation-delay: 0.8s;
    	animation-delay: 0.8s;
    	background: lightgreen;
}

@-webkit-keyframes wait {
    	0%   { left: -7px  }
    	30%  { left: 52px  }
    	60%  { left: 22px  }
    	100% { left: 100px }
}	
@-moz-keyframes wait {
    	0%   { left: -7px  }
    	30%  { left: 52px  }
    	60%  { left: 22px  }
    	100% { left: 100px }
}
@-o-keyframes wait {
    	0%   { left: -7px  }
    	30%  { left: 52px  }
    	60%  { left: 22px  }
    	100% { left: 100px }
}
@keyframes wait {
    	0%   { left: -7px  }
    	30%  { left: 52px  }
    	60%  { left: 22px  }
    	100% { left: 100px }
}


input[type=file]{
	width: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.fileName{
	padding-top: 10px;
	font-weight: 300;
}

.preview{
	position: relative;
	width: 100%;
	height: auto;
	background: #ffffff;
	overflow: hidden;
}

.preview-officeLogo img{
	height: 250px;
    	width: 250px;
    	object-fit: cover;
}

.agentpreview img{
	height: 195px;
    	width: 195px;
    	object-fit: cover;
}

img.agentpreview{
	height: 180px;
    	width: 180px;
    	object-fit: cover;
}

.triggerUpload{
	cursor: pointer;
	background-color:#ffffff;
	border: thin solid #0d6efd;
	color:#0d6efd;
}

.triggerUpload:hover{
	cursor: pointer;
	background-color:#0d6efd;
	border:thin solid #0d6efd;
	color:#ffffff;
}