/* juxtapose customization for computec
 * Copyright (c) 2021 Ali Adlah
 */
body {
  margin:0;
}
.logobar {
  height: 80px;
  position:relative;
}
.logobar img {
  left:15px;
  margin:auto;
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: 60px; 
  max-width: 345px;      
}
.juxtaposeSlider{
  margin-bottom: 20px;
  padding: 0 15px;
  clear: both;
}

.article .juxtaposeSlider{
  padding: 0;
}
.juxtaposeSlider:after {
  display:table;
  content: '';
  clear:both;
}
.sliderCompWraperBig {    
   max-width:100%;
}
.sliderCompContainerBig{
  position:relative;
  overflow:hidden;   
}

.sliderCompContainer{
	position: relative;
}

.sliderCompContainer img{
	height: 100%;width: auto;z-index: 5;position: absolute;
}
.sliderCompContainerBig img{
  height: auto ;width: auto;z-index: 5;position: absolute;
  max-width:100%;
}
.jx-slider a {
	display: none;
}

.compareBalinks{
	text-align: center;
}

.article .compareBalinks{
  padding: 5px 0 0;
}
.compareBalinks:after {
  display:table;
  content: '';
  clear:both; 
}
div.compareBalinks a {
    text-decoration: none;
    cursor: pointer;
    padding: 0 13px;
    position: relative;
    font-weight:400;
}
div.compareBalinks a:nth-child(2) {
    padding-left:2rem;
    position: relative;
}
div.compareBalinks a:nth-child(2):before {
    font-family: "Fontello";
    content: "\e825";
    position: absolute;
    font-size: 1.5rem;
    line-height: 1.5rem;
    top: 0; 
    left: 0;
}
.balinkLeft{
	float: left;
}

.balinkRight{
	float: right;
}
.juxtaposeSlider + .compareBalinks{
  margin-bottom:15px;
}.juxtaposeSlider + .compareBalinks .compareBalinksInner {
  width:600px;
  margin: 0 auto;
}
.juxtaposeSlider + .compareBalinks .balinkLeft{
  margin-left: 1rem;
}
.juxtaposeSlider + .compareBalinks .balinkRight{
   margin-right: 1rem;
}
.featured .juxtaposeSlider.center { 
  margin-left: -275px;
}


.compTitle,
.juxtaposeSlider h1 { 
  font-size: 1.8rem;
  line-height: 3rem; 
  font-weight: 700;
  margin-bottom:.8rem;
}

.balinkLeft > a::before {
    content: "\e812";
    font-size: 20px;
    font-family: "fontello";
    width: 9px;
    height: 8px;
    left: 0;
    top: 4px;
    position: absolute !important;
    line-height: 8px;
}    
.balinkRight > a::before{
    content: "\e811";
    font-size: 20px;
    font-family: "fontello";
    width: 9px;
    height: 8px;
    right: 0;
    top: 4px;
    position: absolute !important;
    line-height: 8px;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Lato Regular"), local("Lato-Regular"), url(/commoncfm/fonts/lato-v16-latin-ext-400.woff) format("woff"); }

@font-face {
  font-family: 'fontello';
  font-style: normal;
  font-display: swap;
  src: local("fontello"), local("fontello"), url(/commoncfm/fonts/fontello.woff) format("woff"); }