html {
    height: 100%
}
body {
	font-family: 'SF Pro Text';
}
h5 {
	font-size: 18px;
	text-transform: uppercase;
	margin: 1px 1px -5px 10px;
	padding-top: 10px;
	color: #cbcbcb;
}
.main-container {
	margin: 0 auto;
	max-width: 1440px;
	background-color: #FCFCFC;
}
.mdl-layout__tab
{
	font-weight: 600;
}
.rcorners1 {
  margin-top: 8px;
  margin-left: 30px;
  border-radius: 18px;
  height: 26px;
  background: #766bea;
  background: linear-gradient(45deg, #ad80f4 , #766bea);
  padding-left: 13px;
  font-size: 16px;  
  color: white;
  width: 250px;
}
.backimage {
	margin-left: 20px;
}
.mdl-input-fullwidth{
	width: calc(100% - 32px); 
	margin: 0 16px;
}
.mdl-icon-check-subscript{
	position:relative;
	left:-30px;
	top:24px;
	font-size:18px;
	background-color:green;
	color:white;
	border-radius:10px;
	visibility:hidden;
	margin-right: -24px;
}

.mdl_lc_menu-bar {
	background-color: rgb(63,81,181);
}

.lc_arrow-back{
	color: white;
	font-size: 32px;
	margin-left: 16px;
	margin-top: 8px;
	cursor: pointer;
}
.mdc-list-group__subheader{
	padding-left: 16px;
}
.result-header {
	width:100%;
	position: relative;
}
.result-header img {
    max-width: 100%;
    height: auto;      
}

.mdl-layout__header--transparent {
	background-image: url("/images/top_menu.png");
	background-repeat: no-repeat;
    background-size: 100% 100%;
	max-height: 202px;
	min-width: 360px;
	background-color: transparent;
	box-shadow: none;
}
.mdl-layout__header_timer--transparent {
	background-image: url("/images/bg_timer.png");
	background-repeat: no-repeat;
	min-width: 300px;
	min-height: 300px; 
	background-size: cover;
	-moz-background-size: cover;  /* Firefox 3.6 */
	background-position: center;  /* Internet Explorer 7/8 */
	height: 90%;
	background-color: transparent;
	box-shadow: none;
}
.mdl-header-parent-full{
	width: 100%;
	height: 100%;
}

.mdl-layout__tab-bar {
	background-color: transparent;
}
.button_icon {
	width: 32px;
	height: 32px;
	position: absolute;
	top: 12px;
	left: 12px;
}
.mdl-button--floating-action-center {
	position: absolute;
	background-image: url("/images/icons/round_image.png");	
	background-color: transparent;
	background-size: 100%;
	width: 56px;
	height: 56px;
	z-index: 998;
	margin: auto;
	left: calc(50% - 28px);
	bottom: 15px;
}
.mdl-button--floating-action-right {
	position: absolute;
	background-color: transparent;
	background-size: 100%;
	z-index: 998;
	right: 2%;
	border: none;
	cursor:pointer;
}
.mdl-button--floating-action-right img {
	width: 46px;
	height: 46px;	
}
.result.left {
	margin-left: 2em;
	padding-left: 0px;
}
.result.left h4{
	padding-left: 0px;
	margin-top: 0px;
	margin-bottom: 8px;
}
.result.right {
	margin-right: 2em;
	padding-right: 0px;
	text-align: right;
}
.result.right h4{
	padding-right: 0px;
	margin-top: 0px;
	margin-bottom: 8px;
}
.mdl-button--floating-action {
	background-image: url("/images/icons/round_image.png");	
	background-color: transparent;
	background-size: 100%;
	width: 56px;
	height: 56px;
	position: absolute;
	right: 15px;
	bottom: 15px;
	z-index: 999;	
}
.mainimg{
	height: 45px;
}
.resultpage {
	margin: 1em;
}
.page-content {	
	position: relative;
	margin: 1em;	
	border-radius: 12px;
	min-width: 320px;
	-webkit-box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.75);
	min-height: calc(100vh - 237px);
}
.flex_parent {
  display: flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: center;
  width: 100%;
}
.card-container--2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;	
}
.card_flex {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;		
}
.card-content--2 {
	margin: 0px 2em 2em 2em;
	border-radius: 12px;
	-webkit-box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 34px 0px rgba(0,0,0,0.75);
	height: calc(100% - 48px);
	overflow: auto;
}
#drawings-default .page-content {
	min-height: calc(100vh - 230px); 
}
.drawingsInfoTitle {
	margin-top: 4vmin;
	margin-bottom: 3vmin;
	width: 100%;
	font-size: 5vmin;
	font-family: 'SF Pro Text';
	text-align: center;
}
.title {
	margin-left: 1em;
	margin-right: 1em;
	display: inline-block;
}
.titlefont {
	font-size: 26px;
	font-family: 'SF Pro Text';
    font-weight: bold;	
}
.subtitle {
	margin-left: 1em;
	font-family: 'SF Pro Text';
}
.mdl-layout__tab {
	line-height: 14px;
	height: 29px;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after
{
	background: white;
	max-width: 60px;
	position: relative;	
	margin: 0 auto;
	margin-top: 5px;
	height: 1px;
}
.owl-carousel .owl-wrapper {
	display: flex !important;
	width: calc(100% - 80px);
}
.owl-carousel .owl-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: initial;
}
.owl-item h3 {
	position: absolute;
	width: 100%;
	top: calc(5% + 2vh);
	font-size: calc(2px + 4vmin);
	line-height: calc(6px + 4vmin);
	margin: calc(3px + 2vmin) 0;	
}
.owl-carousel .item {
  text-align: center;
}
.owl-carousel .nav-btn{
  height: 47px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top: 100px !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}
.owl-carousel .prev-slide{
  background: url(/images/more.png) no-repeat scroll;
  width: 35px;
  left: -2vw;
  height: 55px;
  margin-left: 17px;
  top: calc(50% - 55px) !important;
  -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
  -moz-transform: rotate(180deg);        /* FF */
  -o-transform: rotate(180deg);          /* Opera */
  -ms-transform: rotate(180deg);         /* IE9 */
  transform: rotate(180deg);             /* W3C compliant browsers */
  opacity: 0.8;
}
.owl-carousel .next-slide{
  background: url(/images/more.png) no-repeat scroll;
  opacity: 0.8;
  width: 35px;
  height: 55px;
  right: -4px;
  top: calc(50% - 55px) !important;
}		
.owl-theme .owl-dots .owl-dot span {
  background: #fad2d3; 
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
	background: #b57df3;
}
.backimage {
  -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
  -moz-transform: rotate(180deg);        /* FF */
  -o-transform: rotate(180deg);          /* Opera */
  -ms-transform: rotate(180deg);         /* IE9 */
  transform: rotate(180deg);             /* W3C compliant browsers */
  cursor: pointer;
  height: 30px;
  width: 15px;
}

.checkbox_wrapper{
	position: relative;
	height: 28px;
    width: 28px;
	margin-right: 1%;
}

.page-content input[type="checkbox"] {
    opacity:0;
    height: 28px;
    width: 28px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.page-content input + label {
	display: inline-block;	
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
	width: 28px;
	height: 28px;
	cursor: pointer;	
	background-image: url(/images/checkbox_empty.png);
	margin-right: 6em;
}

.page-content input[type="checkbox"]:checked + label {
	background-image: url(/images/checkbox_checked.png);
}

.icon-contact {
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
}
.centerimage {	
  width: 20%;
}
.Aligner {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.centerImageSubTitle {
	color: #bbb
}
.sfProBold {
	font-family: 'SF Pro Text';
    font-weight: bold;		
}
.sfPro {
	font-family: 'SF Pro Text';
    font-weight: bold;	
}
.mdl-layout__tab.semibold {
	padding-top: 4px;
	font-family: 'SF Pro Text'; 
    font-size: 20px;
	font-weight: 600;
    font-style: normal;
	text-transform: none;
}
.buttonright {
	float:right;
	text-transform: none;
	min-width: 90px;
	margin-right: 4em;
}
@font-face {
    font-family: 'SF Pro Text';
    src: url('/fonts/SFProText-Bold.eot');
    src: local('SF Pro Text Bold'), local('SFProText-Bold'),
        url('/fonts/SFProText-Bold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/SFProText-Bold.woff2') format('woff2'),
        url('/fonts/SFProText-Bold.woff') format('woff'),
        url('/fonts/SFProText-Bold.ttf') format('truetype'),
        url('/fonts/SFProText-Bold.svg#SFProText-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('/fonts/SFProText-Regular.eot');
    src: local('SF Pro Text Regular'), local('SFProText-Regular'),
        url('/fonts/SFProText-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/SFProText-Regular.woff2') format('woff2'),
        url('/fonts/SFProText-Regular.woff') format('woff'),
        url('/fonts/SFProText-Regular.ttf') format('truetype'),
        url('/fonts/SFProText-Regular.svg#SFProText-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('/fonts/SFProText-Semibold.eot');
    src: local('SF Pro Text Semibold'), local('SFProText-Semibold'),
        url('/fonts/SFProText-Semibold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/SFProText-Semibold.woff2') format('woff2'),
        url('/fonts/SFProText-Semibold.woff') format('woff'),
        url('/fonts/SFProText-Semibold.ttf') format('truetype'),
        url('/fonts/SFProText-Semibold.svg#SFProText-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
}
#drawing-select-contacts-groups-full .page-content {
	min-height: 100px;
	height: calc(45vh - 106px);
	overflow-y: auto;
}
.result-header img{
	max-width: 100%;
	max-height: 100%;
}
.redrawbutton {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 2;
}
.resultsharebutton {
  position: absolute;
  top: 88%;
  left: 50%;
  padding-left: 8px;
  paading-right: 8px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 2;
}
.shadowdown {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  opacity: 0.5;
}
.loserlight {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);	
}
.winnercrown {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 7%;
  height: 7%;
  transform: translate(-50%, -0%);
  -ms-transform: translate(-50%, -0%);	
  z-index: 4;	
}
.loserhand {
  position: absolute;
  top: 19%;
  left: 55%;
  width: 4%;
  height: 4%;
  transform: translate(-60%, -30%);
  -ms-transform: translate(-60%, -30%);	
  z-index: 4;
}
.thumbsleft {
  position: absolute;
  top: 45%;
  left: 0%;
  transform: translate(0%, -40%);
  -ms-transform: translate(0%, -40%);
}
.thumbsright {
  position: absolute;
  top: 45%;
  float: right;
  right: 0px;
  transform: translate(0%, -40%);
  -ms-transform: translate(0%, -40%);
}
.winnerconfetti {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -25%);
  -ms-transform: translate(-50%, -25%);	  
}
.winnericon {
  position: absolute;
  top: 30%;
  left: 50%;
  height: 15%;
  width: 15%;
  transform: translate(-50%, -25%);
  -ms-transform: translate(-50%, -25%);	
  z-index: 2;  
}
.resulttext {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -25%);
  -ms-transform: translate(-50%, -25%);	
  font-size: calc(2px + 6vmin); 
  color: white;
  z-index: 2;  	  
}
.closebutton {
  cursor:pointer;
  position: absolute;
  top: 2%;
  float: right;
  right: 2%;
  font-size: calc(2px + 3vmin); 
  color: white;
  z-index: 2;  	
}
.resultmainimg{
	position: absolute;
	top: 20px;
	left: 20px;
	width:25%;
}
.resultsharebutton {
	text-transform: none;
	color: black !important;
	background-color: white !important;	
	height: 28px;
	line-height: 28px !important;
}
.redrawbutton {
	text-transform: none;
	height: 28px;
	line-height: 28px !important;
}
.buttonimage {
  width: 18px;
  height: 18px;
  display: inline-block;
}
.resultpage ul {
	padding: 0px;
}
#maindiv {
	display: flex;
	flex-flow: column;
	height: 100%;
}
#maindiv .drawing-result {
	 flex: 0 1 auto;
}
#maindiv .resultpage {
	flex: 1 1 auto;
	display: flex;
}
.d-inline {
	display: inline !important;
}
.button-h4-div {
	margin-top: 5px;
}
.mdl-layout__header-row{
	position: relative;
}
.waiting_message {
	display:flex;
	width: 100%;
	font-size: 2.5vmax;
	color: white;
	font-family: 'SF Pro Text';
	font-weight: bold;
	position: absolute;
	top: 45%;
	align-items: center;
	justify-content: center;	
	min-width: 300px;
}
.timer {
	position: absolute;
	top: calc(46% + 3vmax);
	display:flex;	
	flex-direction: row;
	min-width: 300px;
	font-size: 10vmax;
	font-weight: bold;
	width: 100%;
}
.timer-content.timer_center{
	flex-basis: content;
}
.timer_content.spacing {
	flex-grow: 1;
}
.timer_value {
	background-image: url("/images/timer_block.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	width: 9vmax;
	height: 12vmax;
	display: inline-block;
	margin-left: -2vmax;
}
.timertext{
	line-height: normal;
	width: 100%;
    left: 50%;
	color: #8c5cff;
	text-align: center;
}
.group_name {
	font-size: 2vmax;
	width: 100%;
	height: 2.6vmax;
	text-align: center;
}
.group_statistics {
	background-image: url("/images/statistics.png");
	background-repeat: no-repeat;
	background-size: auto;
	font-size: 1vmax;
	width: 30%;
	height: 100%;
	text-align: center;
	color: white;
}
.group_image {
	width: 100%;
	height: 120px;
	padding-bottom: .8vmax;
}
.rTable {
	margin-top: .8vmax;
	display: table;
	width: 100%;
}
.rTableRow {
	display: table-row;
}
.rTableHeading {
	display: table-header-group;
}
.rTableCell, .rTableHead {
	display: table-cell;
	padding: 3px 10px;
}
.rTableHeading {
	display: table-header-group;
}
.rTableFoot {
	display: table-footer-group;
	font-weight: bold;
	background-color: #ddd;
}
.rTableBody {
	display: table-row-group;
	font-weight: bold;
	
}
#groupinfo-drawings {
  display: flex;  
  overflow: auto;
}
.drawing_background {
	background-image: url("/images/drawing_info_background.png");
	background-repeat: no-repeat;
	background-size: auto;
	font-size: 1vmax;
	text-align: center;
	color: white;
	position: relative;
	margin: 5px;
}
.drawing_time {
	top: 10%;
	position: absolute;
}
.drawing_title {
	top: 30%;
	position: absolute;
}