/************ TABLE OF CONTENTS ***************
Tweets Scroller
**********************************************/
/*** 
====================================================================
	Tweets Scroller Style
====================================================================
***/

.tweets-scroller{
	position:relative;
	min-height:440px;	
}

.tweets-scroller .tweets-slider-container{
	position:absolute;
	left:0px;
	top:0px;
	width:290px;
	height:440px;
	background:#6c1812;
	text-align:center;
	padding:60px 0px 0px 0px;
	color:#ffffff;
	z-index:99;
}

.tweets-scroller .tweets-slider-container:after{
	content:'';
	position:absolute;
	left:100%;
	top:0px;
	width: 0;
	height: 0;
	border-top: 440px solid #6c1812;
	border-right: 120px solid transparent;
	z-index:1;
	
}

.tweets-scroller .tweets-slider .slide-item .icon{
	position:relative;
	display:inline-block;
	margin-bottom:60px;
	font-size:26px;
	color:#ffffff;
}

.tweets-scroller .tweets-slider .slide-item .text{
	position:relative;
	margin-bottom:30px;
	font-size:22px;
	line-height:2.5em;
	font-weight: 700;
	margin-top: 20px;
}

.tweets-scroller .tweets-slider .slide-item .tweet-author{
	position:relative;
	font-size:13px;
	color:#8ce1fd;	
}

.tweets-scroller .image-scroller-container{
	position:relative;
	margin-left:0px;
	z-index:10;
}

.tweets-scroller .image-scroller-container .bx-viewport{
	/*overflow:visible !important;*/	
}

.tweets-scroller .image-scroller-container .slide-item{
	
	/*margin-left:-180px;*/
	width:800px;
	height:440px;
}

.tweets-scroller .image-scroller-container .slide-item .image{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	
}

/*Mobile version slider*/

.sliderre {
  overflow: hidden;
}
.sliderre .sliderre-row {
  width: 2956px;
  height: 389px;
  background-image: url(mobileversion.png);
  animation: slide 50s linear infinite;
}
@keyframes slide {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -2956px;
  }
}
/*end of mobile version slider*/


/*Counter*/
:root{
    --white: #fff;
    --black: #000;
    --light-gray: linear-gradient(to right,#FFFFFF,#E3E4E8);
    --color_1: linear-gradient(45deg,#8c221b,#6c1812);
    --color_2: linear-gradient(45deg,#F28705,#A68446);
    --color_3: linear-gradient(45deg,#C02026,#F04B55);
    --color_4: linear-gradient(45deg,#FBB249,#D46122);
}
.counter{
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    text-align: center;
    height: 200px;
    width: 200px;
    padding: 60px 35px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.counter:before,
.counter:after{
    content: '';
    background: var(--light-gray);
    height: 75%;
    width: 75%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 15px;
    transform: translateX(-50%) translateY(-50%) rotate(46deg);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transition: all 0.3s ease 0s;
}
.counter:after{
    background: var(--color_1);
    box-shadow: 0 0 5px transparent;
    transform:translateX(-50%) translateY(-50%) rotate(19deg);
}
.counter:hover:before{ transform:translateX(-50%) translateY(-50%) rotate(225deg); }
.counter:hover:after{ box-shadow: 0 0 10px rgba(0,0,0,0.5) inset; }
.counter .counter-value{
    font-size: 30px;
    font-weight: 600;
}
.counter h3{
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
}
.counter-content h3{color: white;}
.counter:hover h3{ transform: rotateX(360deg); }
.counter.red:after{ background: var(--color_2); }
.counter.purple:after{ background: var(--color_3); }
.counter.orange:after{ background: var(--color_4); }
@media screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}
/*end of counter*/