

.nav-top i:hover
{
	color: #1a99d6;
}

.content
{
    font-weight: 400;
    color: #464646;
    width: 36%;
    text-align: center;
    margin-bottom: 2vw
}

.box
{
	box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%), 0 4px 4px 0 rgb(0 0 0 / 0%);
    width: 57.5vw;
    height: 25.5vw;
    display: flex;
	padding: 1.9vw;
    margin-right: 2vw;
}

.seperator
{
	margin-bottom: 3%;
	width: 14.5vw;
}


/* INTRO USE */
.intro__container
{
  	/* Stores everything in the "title" area */
  	overflow: hidden;
  	position: relative;
  	width: 100%; 
}

.intro-text__container
{
	/* Container for text */
    position: absolute;
    top: 25%;
    left: 13%;
    font-weight: 700;
    color: #FFFFFF;
}
.intro-text--small
{
    font-size: 0.9vw;
    font-weight: 400;
    margin-bottom: 3%;
}
.intro-text--medium
{
	font-size: 2vw;
    color: #1a99d6;
    font-weight: 700;
}
.intro-text--large
{   
    font-size: 2.5vw;
    font-weight: 700;
    width: 60%;
    line-height: 1.3;
}

/* PROVIDER LIST USE */
.provider-list
{
    display: flex;
    width: 100%
}

.provider-list__background
{
    background-color: #e3e3e3 !important;
    display: flex;
    padding: 2vw 0vw;
	overflow:hidden;
	overflow-x:auto;
	max-width: 100%; 
  	animation: scroll 10s linear 1s infinite;
}

.provider-list img
{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	width: 12vw;
    display: flex;
    float: left;
    margin: 0vw 1vw;
}

/* INTEGRATED GAMES USE */
.integrated-content 
{
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    margin: 2% 5% 0% 5%;
}

.integrated-content__item
{
    position: absolute;
    top: 87%;
    margin: 0% 2%;
}

.integrated-content__item img
{
    display: inline;
    width: 12%;
    margin: 2% 5% 8% 5%;
}

.integrated-content__title
{
	text-transform: uppercase;
    font-weight: 600;
    font-size: 1vw;
    color: #FFFFFF;
    display: inline;
    float: right;
    position: inherit;
    padding-top: 2%
}

.integrated-content__subtitle
{
    font-weight: 400;
    font-size: 0.7vw;
    color: #FFFFFF;
    display: contents;
    float: right;
    position: inherit;
    line-height: 6.5;
}

.integrated-content--animation
{
    background-repeat: no-repeat;
    background-size: auto 100%;
    width: 100%;
    height: 0;
    padding-top: 33.60%;
    position: relative;
	transition: transform 1s; /* Animation */
	margin: 0 auto;
	z-index: 0;
	margin: 1px;
	border: none;
	filter: brightness(0.7);

}
.popup
{
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 8px 30px 0 rgba(0, 0, 0, 0.19);
	transform: scale(1.1);
  	filter: brightness(1);
  	z-index: 1;
}
.active
{
		box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 8px 30px 0 rgba(0, 0, 0, 0.19);
		transform: scale(1.1);
  	filter: brightness(1);
  	z-index: 1;
}

/* KEY FEATURES USE */
.features__container
{
	background-color: #FFFFFF;
	position: relative;

}

.soccer__image
{
    height: 42vw;
    width: 25vw;
    display: flex;
	position: absolute;
}

.soccer__image-container
{
	width: 100%;
	display: flex;
	position: absolute;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
}


.features__title
{
	color: #FFFFFF;
	position: absolute;
    top: 0%;
    left: 12%;
}

.features__subtitle
{
	color: #FFFFFF;
    position: absolute;
	top: 17%;
    left: 12.1%;
    font-size: 0.75vw;
    width: 24%;
    font-weight: 400;
}

.features-list--left
{
	color: #FFFFFF;
	list-style: none;
    position: absolute;
	top: 37%;
    left: 10%;
    width: 27%;
}

.features-list--right
{
	color: #FFFFFF;
	list-style: none;
    position: absolute;
	top: 37%;
    right: 10%;
    width: 27%;
}

.features-list--left li, .features-list--right li
{
	display: flex;
	margin-bottom: 2vw;
}

.features-list__img
{
    height: 5.5vw;
    width: 5.5vw;
	padding: 1.2vw;
    background: linear-gradient(45deg, #379bff 0%,#b4feff 100%); 
	border-radius: 0.6vw;
}

.features-list__text
{
    font-weight: 400;
    float: right;
    width: 71%;
	padding-top: 0.7vw;
	padding-left: 0.8vw
}

.features-list__title
{
    color: #1a99d6;
    font-weight: bold;
    margin: unset;
}

/* OUR SERVICES USE */
.box div
{

    font-weight: 400;
    float: right;
    width: 71%;
    padding-top: 0.7vw;
    margin: 0vw 2vw;
    padding-left: 0.8vw;
}

.service__title
{
	font-weight: bold;
	font-size: 1vw;
	padding-bottom: 1.5vw;
}
.service__title--small
{
    font-size: 0.6vw;
    margin: unset;
}

.service__content
{
    line-height: 1.8vw;
    font-size: 0.7vw;
}

.service-banner 
{
    background-repeat: no-repeat;
    background-size: auto 100%;
    width: 100%;
    height: 0;
    padding-top: 27%;
    margin: auto;
    border: none;
    position: relative;
}

.service-container
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 81%;
    align-items: center;

}

.service-container--right
{
	position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-text
{
	width: 33%;
    position: absolute;
    top: 22%;
    left: 5%;
    color: #FFFFFF;
}

.service-text--blue
{
    color: #1a99d6;
	font-size: 0.7vw;
	font-weight: bold;
	margin: unset;
}

.service-text--white
{
	line-height: 1.2vw;
    font-size: 1vw;
    font-weight: 700;
	margin: unset;
}



/* DEMO GAMES USE */
.demo-games__background
{
    height: 75vw;
    width: 100vw;
    background-size: cover;
}

.provider-carousel
{
    width: 100%
}

.carousel-cell img
{
    padding: 1vw;
    width: 80%
}

.carousel-cell a
{
    display: flex;
    justify-content: center;
}

.carousel-cell
{
	width: 40%
	height: 28vw;
    display: flex;
    justify-content: center;
}

.carousel-button
{
	color: #FFFFFF;
	text-transform: uppercase;
    font-weight: 600;
    font-family: 'Poppins';

}

.carousel-button-row
{
    display: flex;
    justify-content: space-between;
    margin: 0.5vw 27vw;
}


.is-selected  
{
    z-index: 9999;
}

.main-carousel .is-selected img 
{
    transform: scale(1.2) translateX(0);
	transition: transform 0.8s; 
	width: 85%;
}

@keyframes scroll {
	100% { left: -360px; }  /* top is the number of spans (in this case 8) multiplied by span height (45px as described above)*/
}

iframe
{
	display: flex;
	width: 30vw;
	height: 20vw;
}

/* VIDEO USE */
.video
{
	display: flex;
	justify-content: center;
	margin-top: 20vw;
}

/* LIVE USE */
.live--big
{
    font-size: 19vw;
    font-weight: 700;
    font-family: 'Poppins';
    display: flex;
    z-index: 0;
    color: #dbf1fb;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.soccer-match
{ 
    display: flex;
    width: 100%;
    position: absolute;
    top: 291vw;
    height: 5;
    align-items: center;
    flex-wrap: wrap;
}

.live__time
{
	    
    font-family: 'Poppins';
    font-weight: 700;
    z-index: 5;
    font-size: 1.6vw;
    display: flex;
    align-items: flex-end;
    position: absolute;
    text-align: center;
}

.team-name--1
{
    font-family: "Poppins";
    color: white;
    font-size: 2vw;
    font-weight: 700;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    background-color: #14243e;
    width: fit-content;
}

.team-name--1 i
{
    font-size: 1vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}

.team-name--1 p
{
    color: white;
    font-size: 2vw;
    font-weight: 700;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}

.soccer-text
{
    display: inline-flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 7vw;
    align-items: center;
    margin: 7vw 9vw 0vw 11vw;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.soccer-img
{
    display: flex;
    width: 100%;
    position: absolute;
    bottom: -6vw;
    justify-content: center;
}

.soccer-spacer
{
	width: 47vw;
}

.soccer-team
{
	z-index: 7;
}

.soccer-dots
{
    display: flex;
    position: absolute;
    width: 100%;
    bottom: -4vw;
    justify-content: center;
}


