/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
  --img-margin-x: 0px;
  --img-margin-y: 0px;
  --img-width: 0px;
  --img-height: 0px;
}

#img-container {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

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

#compare-container {
  width: var(--img-width);
  max-width: var(--img-width);

  height: var(--img-height);
  max-height: var(--img-height);


  margin: auto !important;
  padding: unset !important;
  
}

#img-res {
  height: var(--img-height);
  max-height: var(--img-height);
}

#img-src {
  height: var(--img-height);
  max-height: var(--img-height);
}

#img-top {
  min-width: 30px;
  position: relative;
  max-width: var(--img-width);
  width: calc(var(--img-width) / 2);
}

#img-bt {
  min-width: 30px;
  max-width: var(--img-width);
  width: var(--img-width);
}

#drag {
  width: 3px;
  position: absolute;
  background: #b12f00;
  height: 100%;
  right: 0;
  top: 0;
  cursor: ew-resize;
}

#mask {
  overflow: hidden;
  width: 100%;
}

#arrows {
  width: 60px;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  margin-left: -28px;
}

#arrows .fa {
  line-height: 40px;
  text-align: center;
  width: 30px;
  height: 40px;
  background: #b12f00;
  float: left;
}

#arrows .fa-arrow-right { border-radius: 0px 5px 5px 0px; }

#arrows .fa-arrow-left { border-radius: 5px 0px 0px 5px; }

img {
    max-width: unset;
}



.line.line-sm {
    margin: 10px 0;
}


.irs--flat .irs-bar {
    background-color: #b12f00;
}

.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
    background-color: #b12f00;
}

.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
    border-top-color: #b12f00;
}



.heading-block:before {
    content: attr(data-heading);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: #F5F5F5;
    z-index: -1;
    font-family: 'poppins', sans-serif;
    font-weight: bold;
    font-size: 90px;
    line-height: .3;
}

.heading-block.center:before {
    right: 0;
    left: 0;
    margin: auto;
}

.section {
    margin: 0px;
}


.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
    background: #b12f00;
}


.btn-outline-danger {
    color: #b12f00;
    border-color: #b12f00;
}

.btn-outline-danger:hover {
    background-color: #b12f00;
    border-color: #b12f00;
}

a {
    color: #b12f00;
}

.button {
    background-color: #b12f00;
}


.divider:after, .divider.divider-center:before, .divider.divider-center.divider-short:before {
    border-top: 1px solid #b12f00;
}

.divider {
    color: #b12f00;
}

.portfolio-overlay a:hover {
    color: #b12f00;
}

.portfolio-desc h3 a:hover {
    color: #b12f00;
}

.portfolio-shuffle:hover {
    background-color: #b12f00;
}

.breadcrumb a:hover {
    color: #b12f00;
}

.feature-box .fbox-icon i, .feature-box .fbox-icon img {
    background-color: #b12f00;
}

.dark .big-video-button, .big-video-button.dark {
    background-color: #f5f5f5;
    color: #333!important;
    text-shadow: none;
}

.big-video-button:hover {
    opacity: .8;
}

.big-video-button {
    display: inline-block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    background-color: #333;
    color: #f5f5f5!important;
    font-size: 24px;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,.1);
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}


.owl-carousel .owl-dots .owl-dot {
    background-color: #b12f00;
}

.owl-carousel .owl-dots .owl-dot {
    margin: 10px 4px 10px 4px;
}

.fancy-title {
    margin-bottom: 10px;
}

body:not(.no-transition) #wrapper, .animsition-overlay {
    opacity: unset;
 }

::selection {
    background: #b12f00;
}

#primary-menu.sub-title > ul > li:hover > a, #primary-menu.sub-title > ul > li.current > a, #primary-menu.sub-title > div > ul > li:hover > a, #primary-menu.sub-title > div > ul > li.current > a {
    background-color: #b12f00;
}

#primary-menu ul li > a {
    font-weight: bold !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}

h1 > span:not(.nocolor):not(.badge), h2 > span:not(.nocolor):not(.badge), h3 > span:not(.nocolor):not(.badge), h4 > span:not(.nocolor):not(.badge), h5 > span:not(.nocolor):not(.badge), h6 > span:not(.nocolor):not(.badge) {
    color: #b12f00;
}

.color {
    color: #b12f00 !important;
}

.button.button-dark:hover {
    background-color: #b12f00;
}

.button.button-dark {
    background-color: #444;
}

.feature-box.media-box.fbox-bg .fbox-media {
    border: 1px solid #E5E5E5;
    border-bottom: 0;
}


.bgcolor, .bgcolor #header-wrap {
    background-color: #b12f00 !important;
}


#page-title h2 span {
    display: inline !important;
    margin-top: 10px !important; 
    font-weight: 600 !important; 
    color: #b12f00 !important; 
    font-size: 3.5rem !important;
}

.owl-carousel .owl-nav [class*=owl-]:hover {
    background-color: #b12f00 !important;
}

#footer.dark, .dark #footer {
	margin-top: 0px !important;
}

#copyrights .col_half:last-child {
    display: block !important;
}

.hotspot-img .hot-spot {
    background-color: #b12f00;
}

.hotspot-img .hot-spot .circle {
    background: #b12f00;
}


@media (max-width: 576px) {
	.solutions-text {
		margin-bottom: 400px;
	}
}

/* img-hover-wraps */
.img-hover-wrap {
	-webkit-transition: transform .3s ease;
	-o-transition: transform .3s ease;
	transition: transform .3s ease;
	-moz-transform-style: flat !important;
	-webkit-backface-visibility: hidden;
}

.img-hover-wrap:hover {
	-webkit-transform: scale(1.06);
	-ms-transform: scale(1.06);
	-o-transform: scale(1.06);
	transform: scale(1.06);
	z-index: 2;
}

.img-hover-card > a:after {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
    background-color: rgba(0, 0, 0, 0.3);
	z-index: 0;
	-webkit-transition: background-color .3s ease;
	-o-transition: background-color .3s ease;
	transition: background-color .3s ease;
}

.img-hover-card {
	position: relative;
	display: block;
	will-change: transform;
	transition: all .3s ease;
	box-shadow: 0 10px 40px transparent;
}

.img-hover-card a {
	width: 100%;
	max-width: 100%;
	display: block;
	z-index: 99;
}

.img-hover-card.hover-in {
	transition: -webkit-transform .2s ease-out;
	transition: transform .2s ease-out;
	transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}

.img-hover-card.hover-3d { z-index: 2; }

.img-hover-card.hover-out {
	transition: -webkit-transform .2s ease-in;
	transition: transform .2s ease-in;
	transition: transform .2s ease-in, -webkit-transform .2s ease-in;
}

.img-hover-wrap:hover .img-hover-card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }

.img-hover-wrap .img-hover-detail {
	position: absolute;
	top: auto;
	left: 40px;
	bottom: 40px;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1) translateY(40px) translateZ(50px);
	-ms-transform: scale(1) translateY(30px) translateZ(50px);
	-o-transform: scale(1) translateY(30px) translateZ(50px);
	transform: scale(1) translateY(30px) translateZ(50px);
	-webkit-transition: transform .2s ease;
	-o-transition: transform .2s ease;
	transition: transform .2s ease;
}

.img-hover-wrap:hover .img-hover-detail {
	opacity: 1;
	-webkit-transform: scale(1.06) translateY(-5px) translateZ(50px);
	-ms-transform: scale(1.06) translateY(-5px) translateZ(50px);
	-o-transform: scale(1.06) translateY(-5px) translateZ(50px);
	transform: scale(1.06) translateY(-5px) translateZ(50px);
}

.img-hover-wrap .img-hover-title {
	margin: 0 0 6px 0;
	font-size: 17px;
	font-weight: 600;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	z-index: 9;
}

.img-hover-wrap .img-link {
	opacity: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #FFF;
	border-radius: 50%;
	text-align: center;
	line-height: 18px;
	font-size: 11px;
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

.img-hover-wrap:hover .img-link { opacity: 1; }

.img-hover-detail a { color: #FFF; }

.img-hover-wrap:hover .img-hover-card > a:after {
    background-color: rgba(0, 0, 0, 0.6);
}

.img-hover-card img {
	max-width: 100%;
}


.mfp-close {
    color: #888;
}


.fancy-title.title-bottom-border h1, .fancy-title.title-bottom-border h2, .fancy-title.title-bottom-border h3, .fancy-title.title-bottom-border h4, .fancy-title.title-bottom-border h5, .fancy-title.title-bottom-border h6 {
    border-bottom: 2px solid #b12f00;
}

.feature-box.fbox-plain.fbox-small .fbox-icon {
    width: 34px;
}



.scw-switcher-wrap,
.scw-trigger-icon {
    position: fixed;
    left: auto;
    background-color: #fff
}

.scw-trigger-icon {
    width: 44px;
    height: 44px;
    top: 121px;
    right: 26px;
    border: 0;
    padding: 0;
    text-align: center;
    z-index: 5;
    cursor: pointer
}

/*
.scw-switcher-wrap,
.scw-trigger-icon {
    position: absolute;
    left: auto;
    background-color: #fff
}

.scw-trigger-icon {
    width: 44px;
    height: 44px;
    top: 0px;
    right: 0px;
    border: 0;
    padding: 0;
    text-align: center;
    z-index: 5;
    cursor: pointer
}
*/


.copyright-links {
	display: none;
}

.scw-trigger-icon i {
    font-size: 18px
}

.scw-switcher-wrap.scw-switcher-open i:nth-of-type(1),
.scw-switcher-wrap:not(.scw-switcher-open) i:nth-of-type(2) {
    display: none
}

.scw-switcher-wrap {
    top: 120px;
    right: 25px;
    padding: 23px;
    width: 0;
    height: 0;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 3px;
    box-shadow: 0 13px 42px 11px rgba(0, 0, 0, .05);
    z-index: 999;
    overflow: hidden;
    -webkit-transition: all .45s ease;
    -o-transition: all .45s ease;
    transition: all .45s ease
}

.scw-switcher-wrap.scw-switcher-open {
    width: 300px;
    height: calc(100vh - 140px);
    padding: 15px 15px;
    overflow-y: auto;
}

.scw-switcher-wrap .widget {
    margin: 0
}

.scw-switcher-wrap .line,
.scw-switcher-wrap .widget {
    opacity: 0;
    -webkit-transition: opacity 0s ease;
    -o-transition: opacity 0s ease;
    transition: opacity 0s ease
}

.scw-switcher-wrap.scw-switcher-open .line,
.scw-switcher-wrap.scw-switcher-open .widget {
    opacity: 1;
    -webkit-transition: opacity .3s .4s ease;
    -o-transition: opacity .3s .4s ease;
    transition: opacity .3s .4s ease
}

.scw-switcher-wrap .widget h4 {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 5px
}

.scw-switcher-wrap .btn-container {
    margin: 0 -5px -5px 0
}

.scw-switcher-wrap .btn {
    margin: 0 5px 5px 0
}

.scw-switcher-wrap .row {
    margin: 0 -3px
}

.scw-switcher-wrap .col-6 {
    padding: 3px
}

.scw-switcher-wrap .img-thumbnail {
    border-radius: 2px
}

@media (max-width: 576px) {
	.scw-switcher-wrap.scw-switcher-open {
		width: 100%;
		height: 100%;
	}
	.scw-switcher-wrap.scw-switcher-open {
		top: 0px;
		right: 0px;
    }
	.scw-switcher-open .scw-trigger-icon {
		top: 0px;
		right: 0px;
    }
}

.btn-danger {
    color: #fff;
    background-color: #b12f00;
    border-color: #b12f00;
}

.btn-danger:hover, .btn-danger.focus, .btn-danger:focus {
    color: #b12f00;
    background-color: #fff;
    border-color: #b12f00;
    box-shadow: none;
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle {
    color: #b12f00;
    background-color: #fff;
    border-color: #b12f00;
}

#side-panel-trigger-close a { display: block; }


.bg-overlay,
.bg-overlay-bg,
.bg-overlay-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

.bg-overlay [data-hover-animate]:not(.animated) {
	opacity: 0;
}

.bg-overlay {
	z-index: 5;
}

.bg-overlay-content {
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	padding: 20px;
}

.bg-overlay-bg {
	background-color: rgba(255,255,255,0.85);
}

.dark .bg-overlay-bg,
.bg-overlay-bg.dark {
	background-color: rgba(0,0,0,0.5);
}