/*
--------------------------------------------------------
(c) 2021 VIEVEX Stefan Altenhofen - all rights reserved
--------------------------------------------------------
*/

/************************************************/
/********************  FONT  ********************/
/************************************************/

/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.fonts.com
*/

@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=c3a17d98-f3db-409b-a10c-571b91fa3879");
    @font-face{
        font-family:"Gilroy W05 Thin";
        src:url("/assets/fonts/84f4f17d-9786-4c9a-a0b8-3dee0e4dfdae.woff2") format("woff2"),url("Fonts/2f1cfe4e-e0a8-4527-9476-b841ff9bc45b.woff") format("woff");
    }
    @font-face{
        font-family:"Gilroy W05 Light";
        src:url("/assets/fonts/a6096205-61ed-4c16-b76c-a56dd651ad33.woff2") format("woff2"),url("Fonts/18f98fc7-4ddd-4d5e-94c0-c9b74a2325bd.woff") format("woff");
    }
    @font-face{
        font-family:"Gilroy W05 Regular";
        src:url("/assets/fonts/b261487c-2966-4089-8551-6555085406ad.woff2") format("woff2"),url("Fonts/bf190033-35ff-42cf-b90c-f5321a94a3df.woff") format("woff");
    }
    @font-face{
        font-family:"Gilroy W05 Medium";
        src:url("/assets/fonts/94b9ba0e-1690-4966-8af8-7d8a1c22c221.woff2") format("woff2"),url("Fonts/fd4654af-3e2f-4601-bb81-d6b08f68d9f0.woff") format("woff");
    }
    @font-face{
        font-family:"Gilroy W05 Bold";
        src:url("/assets/fonts/e62d07e6-5c21-45b8-8427-79c95511907d.woff2") format("woff2"),url("Fonts/e667d70b-2326-4c62-8f38-200c31c3b08c.woff") format("woff");
    }
    @font-face{
        font-family:"Gilroy W05 Heavy";
        src:url("/assets/fonts/83cf0941-dd13-44b9-8dc0-b9161de3268e.woff2") format("woff2"),url("Fonts/fae2b2de-865c-4574-8d42-33a62836725d.woff") format("woff");
    }

/*******************************************************/
/********************  HTML / BODY  ********************/
/*******************************************************/

* 
{
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none,
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-size-adjust: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

html
{
width: auto;
min-width: 100%;
height: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
}

body
{
background: rgba(51,53,59,1);
background-image: -webkit-radial-gradient(rgba(51,53,59,1), rgba(14,15,17,1));
background-image: -moz-radial-gradient(rgba(51,53,59,1), rgba(14,15,17,1));
background-image: -o-radial-gradient(rgba(51,53,59,1), rgba(14,15,17,1));
background-image: radial-gradient(rgba(51,53,59,1), rgba(14,15,17,1));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(37,40,43,1)', endColorstr='rgba(39,43,47,1)',GradientType=0 ); 
width: auto;
min-width: 100%;
height: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
color: rgba(255,255,255,1);
font-size: calc(10px + .35vw);
font-family: 'Gilroy W05 Medium', sans-serif;
line-height: calc(15px + 0.35vw);
-webkit-font-smoothing: antialiased;
}

a,
a:active
{
color: rgba(255,255,255,1);
text-decoration: none;
}

a:hover
{
color: rgba(255,255,255,1);
text-decoration: none;
}

ul 
{
list-style-type: none;
}

::-moz-selection { background: rgba(0,0,0,1); }
::selection { background: rgba(0,0,0,1); }


/******************************************************/
/********************  VVX GLOBAL  ********************/
/******************************************************/

.w5
{
width: 5%);
}
.w10
{
width: 10%;
}
.w15
{
width: 15%;
}
.w20
{
width: 20%;
}
.w30
{
width: 30%;
}
.w33
{
width: 33.333%;
} 
.w40
{
width: 40%;
}
.w50
{
width: 50%;
}
.w60
{
width: 60%;
}
.w66
{
width: 66.666%;
} 
.w70
{
width: 70%;
}
.w80
{
width: 80%;
}
.w90
{
width: 90%;
}
.w100
{
width: 100%;
}

.mg
{
margin: auto;
}

.mg15
{
margin: 7.5px 15px 7.5px 15px;
}

h1
{
font-family: 'Gilroy W05 Heavy', sans-serif;
}

h2
{
font-family: 'Gilroy W05 Heavy', sans-serif;
}

h3
{
font-family: 'Gilroy W05 Heavy', sans-serif;
}

h10
{
display: block;
font-size: calc(40px + .35vw);
font-family: 'Gilroy W05 Heavy', sans-serif;
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
}

.center
{
text-align: center;
}

.bgblur
{
backdrop-filter: blur(20px);
}

/****************************************************/
/********************  VVX FLEX  ********************/
/****************************************************/

.flex 
{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 90%; 
height: auto;
margin: auto;
transition: all .75s ease;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-content: flex-start;
flex-wrap: wrap;
align-items: stretch
}


@media (max-width: 1280px) 
{
.flex
	{
	width: 100%;
	height: auto;
	flex-direction: column;
	transition: all .75s ease;
	}
}

.flexColumn
{
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flexVcenter
{
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.flexStretch
{
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}

.flexContainer
{
background: rgba(0,0,0,.5); 
border-radius: 15px; 
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
padding: 30px;  
margin: 7.5px 15px 7.5px 15px;
flex: 0 1 auto;

  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

}

@media (max-width: 1280px) 
{
.flexContainer
	{
	min-width: calc(100% - 30px); 
	flex-direction: column;
	flex-wrap: wrap;
	}
}

/* Inserting a collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row */
.break {
  flex-basis: 100%;
  height: 0px;
}

/* Use a collapsed column to break to a new column */
.break-column {
  flex-basis: 100%;
  width: 0;
}
/**************************************************************/
/********************  VVX CONTAINER FADE  ********************/
/**************************************************************/


.flexFade
 {
  height: 0px;
  width: 0px;
  opacity: 0;
 transition: all .5s ease;
  padding: 0;
  margin: 0;
}

.flexFade.show
{
height: auto;
width: auto;
padding: 30px;  
margin: 7.5px 15px 7.5px 15px;
opacity: 1;
}

/**************************************************************/
/********************  VVX FLEX CONTAINER  ********************/
/**************************************************************/

.stream
{
position: relative; 
width: calc(100% - 30px);
background: rgba(0,0,0,.5); 
border-radius: 15px; 
padding: 0;
margin: 7.5px 15px 7.5px 15px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.stream iframe
{
top: 0; 
left: 0; 
width: 100%;
height: 100%; 
}

.stream:after
{
padding-top: 56.25%;
/* 16:9 ratio */ 
display: block; 
content: ''; 
}


















/*****************************************************/
/********************  VVX LOGIN  ********************/
/*****************************************************/

.login input[type=text],
.login input[type=email],
.login input[type=password]
{
position: relative;
width: 80%;
height: calc(50px + .35vh);
border: 0px;
outline: none;
border: 1px solid rgba(255,255,2555,.5);
border-radius: 12px;
font-family:"Gilroy W05 Light";
font-size: calc(12px + .35vw);
color: rgba(255,255,255,0.5);
background: rgba(0,0,0,.2);
padding: 0px 0px 0px 10px;
margin: 10px 0 10px 10px;
-webkit-appearance: none; /* Webkit */
-moz-appearance: none; /* FF */
-ms-appearance: none; /* Edge */
appearance: none; /* Future */
-webkit-box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);
}

.login input[type=text]:hover,
.login input[type=email]:hover,
.login input[type=password]:hover,
.login input[type=text]:focus,
.login input[type=email]:focus,
.login input[type=password]:focus
{
border: 0px;
background: rgba(255,255,255,0.1);
}

input:-webkit-autofill::first-line,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus 
{
-webkit-text-fill-color: #fff;
transition: background-color 5000s ease-in-out 1s;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(255, 255, 255, 0.3);
}
::-moz-placeholder { /* Firefox 19+ */
color: rgba(255, 255, 255, 0.3); 
}
:-ms-input-placeholder { /* IE 10+ */
color: rgba(255, 255, 255, 0.3); 
}
:-moz-placeholder { /* Firefox 18- */
color: rgba(255, 255, 255, 0.3); 
}

.loginError
{
position: relative;
z-index: 99;
top: 5px;
color: rgba(201,74,67,1);
text-align: center;
}

/***********************************************************/
/********************  VVX WIDGET CHAT  ********************/
/***********************************************************/


.widgetChatOutput li
{
width: 100%;
background: rgba(0,0,0,.3); 
border-radius: 0 15px 15px 15px; 
padding: calc(20px + .35vw);
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
margin: 0 0 10px 0;
overflow: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 3;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 3;
-ms-hyphenate-limit-lines: 4;
word-break: break-word;
}























.navigation
{
height: 80px; width: 100%;
background: rgba(0,0,0,.2); 
margin-bottom:30px;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);

}

@media (max-width: 1280px) 
{
.navigation
	{
	width: 100%;	
	}
}

.subNavigation
{
position: fixed;
z-index: 99;
bottom: 1.5vw;
right: 1.2vw;
}











.subNavigation > .button
{
width: 3.5vw;
height: 3.5vw;
border-radius: 50%;
display: block;
background: rgba(0,0,0,.5);
transition: all .5s ease;
margin-bottom: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.subNavigation > .button:hover
{
background: rgba(255,255,255,.1);
}

@media (max-width: 1024px) 
and (orientation: landscape)
{
.subNavigation > .button
	{
	width: 8vh;
	height: 8vh;
	}
}

@media (max-width: 1024px) 
and (orientation: portrait)
{
.subNavigation > .button
	{
	width: 8vw;
	height: 8vw;
	}
}

.slide
{
position: relative;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
display: block;
background: rgba(255,255,255,.5);
transition: all .5s ease;
color: #fff;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

.slide.show
{
background: rgba(255,255,255,.8);
}

.slide:hover
{
background: rgba(255,255,255,1);
}

.svg-user
{
-webkit-mask:  url(/assets/gfx/icons/user-circle-light.svg) no-repeat 50% 50%;
mask: url(/assets/gfx/user-circle-light.svg) no-repeat 50% 50%;
}
.svg-qaa
{
-webkit-mask:  url(/assets/gfx/icons/question-light.svg) no-repeat 50% 50%;
mask: url(/assets/gfx/uquestion-light.svg) no-repeat 50% 50%;
}
.svg-chat
{
-webkit-mask:  url(/assets/gfx/icons/comments-light.svg) no-repeat 50% 50%;
mask: url(/assets/gfx/comments-light.svg) no-repeat 50% 50%;
}
.svg-like
{
-webkit-mask:  url(/assets/gfx/icons/thumbs-up-light.svg) no-repeat 50% 50%;
mask: url(/assets/gfx/thumbs-up-light.svg) no-repeat 50% 50%;
}
.svg-vote
{
-webkit-mask:  url(/assets/gfx/icons/person-booth-light.svg) no-repeat 50% 50%;
mask: url(/assets/gfx/person-booth-light.svg) no-repeat 50% 50%;
}