body{
	font-family: helvetica, sans-serif;
	overflow-x: hidden;
	margin: 0px;
	height: 100%;
}
a{
	color: white;
	text-decoration: none;
}
.bodyelement{
	position: relative;
	min-width: 100%;
	margin: 0px;
	margin-top: 9px;
	background: #ffffff;
	min-height: 200px;
	border-top: 1px solid #dddddd; 
	border-bottom: 1px solid #dddddd;
	color: #000000;
}
#spinnerwrapper{
	position: fixed;
    width: 200px;
    height: 200px;
    left: 50%;
    background: white;
    z-index: 9000;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: none;
}
.s_gif{
	margin-left: 79px;
	margin-top: 79px;
}
#shadow_s{
	display: none;
	background: #000;
	position: fixed;
	opacity: 0.25;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 8000;
	transition:all 0.5s cubic-bezier(0,.99,.49,.99);
	-webkit-transition:all 0.5s cubic-bezier(0,.99,.49,.99); /* Safari */
}
.bodyelement h1{
	margin-left: 25px;
}
.bodyelement p{
	margin-left: 25px;
}
.grey{
	font-size: 14px;
	color: #999999;
}
.menu{
	border-radius: 10px;
	margin: 20px;
	margin-top: 10px;
	margin-right: 0px;
	margin-left: 0px;
	margin-left: 5%;
	margin-bottom: 20px;
	background: rgb(255,255,255);
	float: left;
	height: 240px;
	text-align: center;
	color: #3F51B5;
	font-size: 14pt;
	-webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
}
.menu img{
	width: 20px;
}
.menu.big{
	transform: scale(1.6,1.6);
	margin-bottom: 60%;
}
.mwrap{
	margin-left: 50px;
	margin-right: 50px;
}
.jc_card_containor{
	display: grid;
    padding: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    grid-gap: 1rem;


}
.card-container {
    display: grid;
    padding: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 1rem;
    text-align: center;
    align-content: center;
}

.card {
    display: grid;
    justify-content: space-between;
    .button {
        align-self: end;
    }
}







/* Simple Card styles for prettying */

html {
    font-size: 16px;
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
}
* {
    box-sizing: border-box;
}
.card {
    box-shadow: 0px 1px 5px #555;
    background-color: white;
    border-radius: 7px;
    color: black;
   

	border-radius: 5px;
	background: white;
	border: 1px solid #eeeeee;
	position: relative;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
   color: #ABABAB;
   text-align: center;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
   transition: 0.3s!important;
}
.card:hover{
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
	transform: scale(1.02,1.02);
}

.card__title {
    font-size: 2rem;
    padding: .5rem;
}
.card__description {
    padding: .5rem;
    line-height: 1.6em;
}
.button {
    display: block;
    background-color: tomato;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    text-align: center;
    transition: .3s ease-out;
    &:hover {
        background-color: darken(tomato, 10%);
    }
}
img {
    max-width: 100%;
}
.jc_card{
	display: grid;
	width: 150px;
	height: 200px;
	border-radius: 5px;
	background: white;
	border: 1px solid #eeeeee;
	position: relative;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
   color: #ABABAB;
   text-align: center;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
   transition: 0.3s!important;
}
.jc_card:hover{
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
}
.jc_image_profil{
	width: 100%;
	margin: 0px!important;
}
.jc_profile_name{
	font-size: 11pt;
	color: black;
}
.jc_profile_text{
	font-size: 10pt;
	color: grey;
}
@media (max-width: 370px){
  .menu{
  	width: 90%;
  	margin-left: 5%;
  }
}
@media (min-width: 370px) and (max-width: 775px){
  .menu{
  	width: 45%;
  	margin-left: 2.5%;
  	margin-right: 2.5%;
  }
}
@media (min-width: 775px){
  .menu{
  	width: 30%;
  	margin-left: 1.66%;
  	margin-right: 1.66%;
  }
}
.mpic{
	width: 80%;
	margin: 0px;
	margin-top: 10px;
	height: 160px;
	width: 160px;
}
#f{
	width: 10px;
	height: 17px;
	background: url("images/navleft.png");
}
.matseperator{
	width: 265px;
	height: 1px;
	background: #dddddd;
	margin-top: 50px;
}
.matseperator:first-child{
	width: 265px;
	height: 1px;
	background: #dddddd;
	margin-top: 129px;
}
#matmenutitle{
	position: fixed;
	z-index: 300004;
	font-size: 24px;
	top: 0;
	padding: 0 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color: #3F51B5;
	font-style: normal;
	font-variant-caps: normal;
	font-weight: normal;
	line-height: 80px;
	text-align: left;
	margin-left: 20px;
}
#matmenubar{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 265px;
	height: 80px;
	background: #3F51B5;
	z-index: 300003;
}
#matmenu{
	position: fixed;
	left: -265px;
	top: 0px;
	width: 265px;
	background: #fff;
	border-right: 1px solid #dddddd;
	min-height: 100%;
	z-index: 200000;
	color: #283593;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
#matmenu.in{
	left: 0px;
}
.matmenuitem{
	border-bottom: 1px solid #dddddd;
	height: 40px;
	width: 265px;
}

.matmenutext{
	margin-top: 14px;
	margin-left: 20px;
}
.matpic{
	width: 25px;
	margin-right: 10px;
}
.view{
	left: 265px;
	right: 0px;
	min-height: 100%;
	position: absolute;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	background: rgba(85,117,145, 0.6);
	top: 0px;
	z-index: 2;
	color: white;
}
.view.home{
	background: rgba(0,0,0,0);
}
.view.small{
	transform: scale(0,0);
	position: fixed;
	opacity: 0;
}
.view.big{
	transform: scale(1.6,1.6);
	overflow: hidden;
	opacity: 0;
	position: fixed;
}
.view.sbig{
	transform: scale(0.8,0.8);
	opacity: 0;
	overflow: hidden;
	position: fixed;
}
.view.op{
	opacity: 0!important;
}
.view.of{
	overflow: hidden;
	position: fixed;
}
.view.right{
	margin-left: 100%;
	overflow: hidden;
	position: fixed;
	right: -100%;
}
.view.left{
	margin-left: -100%;
	right: 100%;
	overflow: hidden;
	position: fixed;
}
#topbar{
	position: fixed;
	z-index: 300000;
	right: 0px;
	left: 0px;
	font-size: 20px;
	text-align: center;
	background: #383f49;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	top: -50px;
	height: 80px;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
#topbar.in{
	top: 0px;
}
#seperator{
	position: absolute;
	height: 80px;
	width: 1px;
	background: #000000;
	top: 0px;
	left: 265px;
	z-index: 30001;
}
#title{
	font-size: 24px;
	position: absolute;
	top: 0;
	left: 265px;
	right: 0;
	padding: 0 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color: white;
	font-style: normal;
	font-variant-caps: normal;
	font-weight: normal;
	line-height: 80px;
	text-align: left;
	margin-left: 50px;
}
#menutitle{
	font-size: 24px;
	position: absolute;
	top: 0;
	left: 20px;
	right: 0;
	padding: 0 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color: white;
	font-style: normal;
	font-variant-caps: normal;
	font-weight: normal;
	line-height: 80px;
	text-align: left;
}
#leftnav, #leftbutton, #blueleftbutton {
	position: absolute;
	left: 285px;
}
#leftnav a, #rightnav a, #leftbutton a, #rightbutton a, #blueleftbutton a, #bluerightbutton a {
	display: block;
	color: #007AFF;
	text-decoration: none;
	margin-top: 26px;
}

#imgwrapper{
	display: none;
}
#content{
	position: absolute;
	min-height: 99%;
	margin: 0px;
	left: 0px;
	top: 0px;
	width: 100%;
	transform: scale(0.1,0.1);
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.linie{
	width: 90%;
	left: 5%;
	position: absolute;
	height: 1px;
	background: rgba(255, 255, 255, 0.8);
}
.untrans{
	z-index: 50!important;
	transform: scale(1,1)!important;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
#imgwrapper{
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.none{
	opacity: 0;
	display: none;
}
#tint{
	background-color: #29284E;
	opacity: 0.7;
	z-index: 1;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
#statusbar{
	height: 20px;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0,0,0, 0.5);
	z-index: 3000;
	display: none;
}
#fanzahl{
	color: white;
	position: fixed;
	top: 20px;
	right: 0px;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	z-index: 100;
	font-weight: lighter;
	background-color: rgba(0,0,0, 0.5);
}
.circle{
		width: 200px;
		height: 200px;
		border-radius: 100px;
		text-align: center;
		position: absolute;
		left: 50%;
		opacity: 0.8;
		z-index: 5;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	}
	div#m1.m{
		margin-left: -100px;
		top: 200px;
		background-color: #FF3A2D;
	}
	div#m2.m{
		margin-left: -150px;
		top: 300px;
		background-color: #FF9500;
	}
	div#m3.m{
		margin-left: -50px;
		top: 300px;
		background-color: #F9BA20;
	}
	.small{
		margin: 0px!important;
	}
	div#m1.m.small{
		height: 40px;
		width: 40px;
		top: 24px!important;
		left: 30px!important;
		z-index: 50;
	}
	div#m2.m.small{
		height: 40px;
		width: 40px;
		top: 44px!important;
		left: 20px!important;
		z-index: 50;
	}
	div#m3.m.small{
		height: 40px;
		width: 40px;
		top: 44px!important;
		left: 40px!important;
		z-index: 50;
	}
	div#m1.m.logo{
		width: 30px;
		height: 30px;
		position: absolute;
		z-index: 6; 
		margin-top: -77px;
		left: 50%; 
		margin-left: -140px;
		opacity: 1;
		
	}
	div#m2.m.logo{
		width: 30px;
		height: 30px;
		position: absolute;
		z-index: 5; 
		margin-top: -153px;
		left: 50%; 
		margin-left: -140px;
		opacity: 1;
		
	}
	div#m3.m.logo{
		width: 30px;
		height: 30px;
		position: absolute;
		z-index: 5; 
		margin-top: -165px;
		left: 50%; 
		margin-left: -120px;
		opacity: 1;
		
	}
	#imgcover{
		position: absolute;
		width: 97px;
		height: 89px;
		z-index: 200;
		top: 314px;
		left: 50%;
		margin-left: -48.5px;
		opacity: 0.85;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
		display: none;
	}
	#img{
		position: absolute;
		width: 97px;
		top: 314px;
		left: 50%;
		margin-left: -48.5px;
		opacity: 0.85;
		z-index: 40;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	}
	#img.small{
		width: 19px;
		top: 46.5px;
		left: 41px;
	}
	.graytitle {
	font-weight: lighter;
	margin-left: 15px;
	font-size: 17px;
	right: 20px;
	color: #4C4C4C;
	text-shadow: #FFF 0 1px 0;
	
}
	.full{
		position: fixed;
		margin: 0px!important;
		top: 0px!important;
		left: 0px!important;
		right: 0px!important;
		bottom: 0px!important;
		width: 100%!important;
		height: 100%!important;
		border-radius: 0px!important;
		opacity: 0.55;
	}
	#bg{
		background: #f6f9fb;
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100%;
		z-index: 0;
		width: 100%;
	}
	.blur{
		transform: scale(1.2, 1.2);
		-webkit-filter: blur(20px);
		filter: blur(20px);
	}
	.near{
		transform: scale(1.2, 1.2);
	}
	#back{
		position: absolute;
		top: 24px;
		left: 20px;
		height: 60px;
		width: 60px;
		opacity: 0;
		z-index: 99;
	}
	#backprof{
		position: absolute;
		top: 24px;
		left: 20px;
		height: 60px;
		width: 60px;
		opacity: 0;
		z-index: 100;
		display: none;
	}
	#qback{
		position: absolute;
		top: 24px;
		left: 20px;
		height: 60px;
		width: 60px;
		opacity: 0;
		z-index: 100;
		display: none;
	}
	#cback{
		position: absolute;
		top: 24px;
		left: 20px;
		height: 60px;
		width: 60px;
		opacity: 0;
		z-index: 100;
		display: none;
	}
	#chatback{
		position: absolute;
		top: 24px;
		left: 20px;
		height: 60px;
		width: 60px;
		opacity: 0;
		z-index: 100;
		display: none;
	}
	#profilcontent{
		position: absolute;
		top: 64px;
		width: 100%;
		left: 0px;
		opacity: 0;
		color: white;
		display: none;
	}
	#loccontent{
		position: absolute;
		top: 64px;
		width: 100%;
		left: 0px;
		opacity: 0;
		color: white;
	}
	
	.m1{
		padding-top: 27px;
		text-align: center;
		font-family: sans-serif;
		font-size: 22pt;
		height: 55px;
		border-bottom: 1px solid #ffffff;
		opacity: 0.85;
		color: white;
	}
	#chatcontent{
	position: absolute;
	top: 72px;
	min-height: 600px;
	width: 100%;
	left: 0px;
	opacity: 0;
	color: white;
	z-index: 0;
	display: none;
}
#allsettingscontent{
	position: absolute;
	top: 164px;
	width: 100%;
	left: 0px;
	opacity: 0;
	color: white;
	z-index: 0;
	text-align: center;
	display: none;
}
.badge{
	background-color: #FF3B30;
	width: 74px;
	height: 74px;
	border-radius: 50px;
	margin-left: 10px;
	margin-top: 30px;
}
.chat{
	background-color: #ffffff;
	height: 74px;
	border-radius: 37px;
	opacity: 0.75;
	color: black;
	width: 280px;
	float: right;
	margin-right: 20px;
}
.badgetext{
	margin-left: 20px;
    padding-top: 0px;
    font-size: 64px;
    color: white;
}
.intext{

	margin-left: 25px; 
	padding-top: 18px;

}
#profilpic{
	left: 50%; 
	margin-left: -100px; 
	position: absolute; 
	border-radius: 100px; 
	top: 40px;
	z-index: 101;
}
.profilpic{
	left: 50%; 
	margin-left: 0px; 
	border-radius: 100px; 
	top: 0px;
	z-index: 101;
}
#profilpiccontainor{
	z-index: 90;
}
input[type=range] {
    -webkit-appearance: none;
    background-color: rgba(0,0,0,0);
    border: 1px solid #fff;
    border-radius: 15px;
    width: 200px;
    height:30px;
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #fff;
    opacity: 1;
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    border-radius: 15px;
}
.heading{
	font-size: 20pt;
	text-align: center;
	color: white;
	margin-top: 10px;
	margin-bottom: 0px;
}
#rangeval{
	margin-left: 10px;
	font-size: 16pt;
	text-align: right;
	padding-bottom: 20px;
}
#ageval{
	margin-left: 10px;
	font-size: 16pt;
	text-align: right;
	padding-bottom: 20px;
}
#message{
	z-index: 3001;
	position: fixed;
	background-color: rgba(76, 217, 100, 0.9);
	left: 0px;
	right: 0px;
	top: 20px;
	text-align: center;
	display: none;
}
#messagecontainor{
	margin-top: 10px;
	font-size: 20px;
	color: white;
	padding-bottom: 10px;
}
.duobutton{
	-webkit-appearance: none;
    background-color: rgba(0,0,0,0);
    border: 1px solid #fff;
    border-radius: 15px;
    width: 301px;
    height:30px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    font-size: 18pt;
    font-weight: lighter;
}
.triobutton{
	text-align: center;
	color: rgba(255,59,45,0.8);
	-webkit-appearance: none;
    background-color: rgba(0,0,0,0);
    border: 1px solid rgb(255,59,45);
    border-radius: 15px;
    width: 302px;
    height:30px;
    position: absolute;
    left: 50%;
    margin-left: -151px;
    font-size: 15pt;
    font-weight: lighter;
    vertical-align: middle;
}
.b1{
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
	height:30px;
	width: 150px;
	float: right;
	border-right: 1px solid #ffffff;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.b2{
	border-top-right-radius: 14px;
	border-bottom-right-radius: 14px;
	height:30px;
	width: 150px;
	float: right;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.b3{
	height:30px;
	width: 150px;
	float: right;
	border-right: 1px solid #ffffff;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.active{
	background-color: rgba(255,255,255,0.35);
	color: rgba(255,255,255,1)!important;
}

.triobutton .b1{
	width: 100px;
	border-right: 1px solid rgba(255,59,45,1);
}
.triobutton .b2{
	width: 100px;
}
.triobutton .b3{
	width: 100px;
	border-right: 1px solid rgba(255,59,45,1);
}
.triobutton .active{
	background-color: rgba(255,59,45,0.7);
	color: rgba(255,255,255,1)!important;
}
.triobutton .text{
	margin-top: 2px;
}
#fbcontent{
	z-index: 200;
}
#fbbutton{
	height: 200px;
	width: 200px;
	position: absolute;
	left: 50%;
	margin-left: -100px;
	text-align: center;
	top: 50%;
	margin-top: -100px;
}
#location{
	width: 0px;
	height: 0px;
	border-radius: 1px;
	background-color: white;
	opacity: 0.7;
	z-index: 10;
	top: 50%;
	left: 50%;
	position: absolute;
	display: none;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
#compass{
	-webkit-animation: moveabit 4s infinite;
}
@-webkit-keyframes moveabit {
        0% {
        	-webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        25% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
        50% {
            -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
        }
        75% {
            -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
        }
        100% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }
   .matchbutton{
	top: 100%!important;
   	margin-top: -120px!important;
   	display: block!important;
   }
  #questioncontent{
	position: absolute;
	width: 100%;
	top: 160px;
	left: 0px;
	border-top: 1px solid #ffffff;
	color: white;
	z-index: 500;
}
#fragencontent{
	position: absolute;
	width: 100%;
	height: 604px;
	top: 200px;
	left: 0px;
	color: white;
	opacity: 0;
	display: none;
}
#groupchatcontent{
	position: absolute;
	right: 0px;
	bottom: 0px;
	top: 200px;
	left: 0px;
	color: white;
	opacity: 0;
	display: none;
}
#groupchat{
	margin-top: 120px;
	top: 150px;
}
.logoimage{
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.out#imgsettings{
	display: none;
}
.out#imgmessage{
	margin: 0px!important;
	margin-top: 25px!important;
}
#a1b{
	position: absolute;
	width: 60px;
	height: 60px;
	top: 100px;
	border-radius: 50px;
	left: 35px;
	background-color: #FF5E3A;
}
#a1{
	position: absolute;
	left: 160px;
	right: 20px;
	height: 60px;
	top: 100px;
	border-radius: 50px;
	background-color: #ffffff;
}
#a2b{
	position: absolute;
	width: 60px;
	height: 60px;
	top: 475px;
	border-radius: 50px;
	left: 35px;
	background-color: #FF5E3A;
}
#a2{
	position: absolute;
	left: 160px;
	right: 20px;
	height: 60px;
	top: 475px;
	border-radius: 50px;
	background-color: #ffffff;
}
.category{
	padding-top: 27px;
	text-align: center;
	font-family: sans-serif;
	font-size: 22pt;
	height: 55px;
	border-bottom: 1px solid #ffffff;
	opacity: 0.85;
	background-color: #FF5E3A;
}
#supportcontent{
	text-align: center;
	position: absolute;
	top: 164px;
	width: 100%;
	left: 0px;
	opacity: 0;
	color: white;
	z-index: 0;
	display: none;
}
#feedbackcontent{
	text-align: center;
	position: absolute;
	top: 164px;
	width: 100%;
	left: 0px;
	opacity: 0;
	color: white;
	z-index: 0;
	display: none;
}
#aboutcontent{
	text-align: center;
	position: absolute;
	top: 164px;
	width: 100%;
	left: 0px;
	opacity: 0;
	color: white;
	z-index: 0;
	display: none;
}
#chatprofilcontent{
	text-align: center;
	position: absolute;
	top: 164px;
	width: 100%;
	left: 0px;
	opacity: 0;
	color: white;
	z-index: 0;
	display: none;
}
#frage{
	position: absolute;
	left: 0px;
	width: 100%;
	opacity: 0.8;
	text-align: center;
	font-size: 20pt;
	margin-top: 50px;
	background-color: #FF5E3A;
	color: white;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
#pers{
	z-index: 0;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
#draggable{
	left: 10%; 
	position: absolute;
	height: 44px;
	z-index: 0; 
	top: 50%; 
	text-align: center; 
	right: 10%; 
	border-radius: 10px;
}
#dwhite{
	opacity: 0;
	border-radius: 10px;
	background-color: #FF5E3A;
	left: 10%; 
	height: 44px;
	position: absolute;
	top: 50%; 
	width: 80%;
}
.answer{
	left: 10%; 
	position: absolute; 
	top: 50%; 
	text-align: center; 
	right: 10%; 
	border: 1px solid #fff; 
	border-radius: 10px;
	color: white!important;
	background-color: rgba(255, 94, 58, 0.5);
}
.answer.a1text{
	margin-top: -100px;
}
.answer.a2text{
	margin-top: 100px;
}

.ba1text{
	margin-top: -100px!important;
}
.ba2text{
	margin-top: -33.3px!important;
}
.ba3text{
	margin-top: 33.3px!important;
}
.ba4text{
	margin-top: 100px!important;
}

.ca1text{
	margin-top: -100px!important;
}
.ca2text{
	margin-top: -50px!important;
}
.ca3text{
	margin-top: 0px!important;
}
.ca4text{
	margin-top: 50px!important;
}
.ca5text{
	margin-top: 100px!important;
}

#a1text{
	margin-top: 12px;
	margin-bottom: 12px;
}
#a2text{
	margin-top: 12px;
	margin-bottom: 12px;
}
#a3text{
	margin-top: 12px;
	margin-bottom: 12px;
}
#a4text{
	margin-top: 12px;
	margin-bottom: 12px;
}
#a5text{
	margin-top: 12px;
	margin-bottom: 12px;
}
.neutral{
	margin-top: 12px;
	margin-bottom: 12px;
}
#facebook{
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 150%;
	margin-left: -150px;
	width: 300px;
	background-color: #3B5998;
	position: absolute;
	height: 50px;
	cursor: pointer;
	border-radius: 10px;
	text-align: center;
	color: white;
	font-size: 16pt;
}
#fblogo{
	position: absolute;
	left: 7px;
	height: 40px;
	margin-top: 5px;
}
#fbtext{
	font-size: 18pt;
	margin-top: 10px;
	margin-left: 40px;
}
#draggable1{
		top: 300px;
		left: 37.5px;
		width: 300px;
		height: 75px;
		background-color: white;
		position: fixed;
		border-radius: 10px;
		z-index: 50;
	}
	#bgdrgbl1{
		top: 300px;
		left: 37.5px;
		width: 300px;
		height: 75px;
		position: fixed;
		border-radius: 10px;
		background-color: red;
	}
	#draggable2{
		top: 400px;
		left: 37.5px;
		width: 300px;
		height: 75px;
		background-color: white;
		position: fixed;
		border-radius: 10px;
		z-index: 50;
	}
	#bgdrgbl2{
		top: 400px;
		left: 37.5px;
		width: 300px;
		height: 75px;
		position: fixed;
		border-radius: 10px;
		background-color: red;
	}
	#datepicker{
		margin-left: 33.5px;
		margin-top: 100px;
	}
	#newchat{
		position: fixed;
		height: 50px;
		width: 50px;
		z-index: 70;
		border-radius: 25px;
		margin-left: -25px;
		top: 570px;
		background-color: white;
		left: 50%;
		font-size: 50px;
		font-weight: lighter;
	}
	#skip{
		position: absolute;
		top: 530px;
		color: #dddddd;
		width: 100%;
		text-align: center;
	}
	#chatcontainor{
		border-top: 1px solid #dddddd;
		position: absolute;
		bottom: 48px;
		top: 160px;
		width: 100%;
		color: black;
		left: 0px;
		right: 0px;
		background-color: rgba(255,255,255,0.7);
		z-index: 50;
		font-family: Helvetica;
		overflow: scroll;
	}
	#inputbar{
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		height: 48px;
		background-color: #dddddd;
		z-index: 50;
	}
	#inputchat{
		width: 330px;
		margin-left: 12.5px;
		margin-top: 5px;
		height: 28px;
		border-radius: 10px;
		-webkit-appearance: none;
		border: 1px solid #ABABAB;
		font-size: 18px;
		text-align: center;
	}
	
	.leftchat{
		width: 60%;
		margin-left: 10px;
		margin-top: 5px;
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
		border-top-right-radius: 15px;
		margin-bottom: 8px;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	}
	.chattext{
		padding: 5px;
		padding-left: 10px;
	}
	.pers1{
		background-color: #50AAE5;
		opacity: 0.8;
		color: white;
	}
	.pers2{
		background-color: #E96A69;
		opacity: 0.8;
		color: white;
	}
	.pers3{
		background-color: #FF9600;
		opacity: 0.8;
		color: white;
	}
	.pers4{
		border: 2px solid #7AD936;
	}
	.me{
		background-color: #DDDDDD;
		opacity: 0.8;
		color: black;
		border: solid 1px black;
	}

	.pers1s{
		border: 2px solid #50AAE5;
	}
	.pers2s{
		border: 2px solid #E96A69;
	}
	.pers3s{
		border: 2px solid #FF9600;
	}
	.pers4s{
		border: 2px solid #7AD936;
	}
	.mes{
		border: 2px solid #DDDDDD;
	}
	.rightchat{
		float: right;
		width: 60%;
		margin-right: 10px;
		margin-top: 12px;
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
		border-top-left-radius: 15px;
		background-color: #dddddd;
		margin-bottom: 8px;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	}
	.chatimg{
		margin: 7px;
		width: 50px;
		height: 50px;
		border-radius: 50px;
	}
	.chatimg.pers1{
		border: 2px solid #50AAE5;
		opacity: 1;
	}
	.chatimg.pers2{
		border: 2px solid #E96A69;
		opacity: 1;
	}
	.chatimg.pers3{
		border: 2px solid #FF9600;
		opacity: 1;
	}
	.chatimg.pers4{
		border: 2px solid #7AD936;
		opacity: 1;
	}
	.chatimg.me{
		border: 2px solid #DDDDDD;
		opacity: 1;
	}

	#imagecontainor{
		text-align: center;
	}
	.show{
		opacity: 1!important;
	}
	#sessionblock{
		display: none;
		position: fixed;
		left: 50%;
		margin-left: -150px;
		top: 50%;
		margin-top: -150px;
		z-index: 4000;
		width: 300px;
		height: 300px;
		background-color: rgba(255,255,255,0.85);
		border-radius: 15px;
		text-align: center;
	}
.bubblingG {
	text-align: center;
	width:78px;
	height:49px;
	margin: auto;
	margin-top: 50px;
}

.bubblingG span {
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	margin: 24px auto;
	background: rgb(255,59,45);
	border-radius: 49px;
		-o-border-radius: 49px;
		-ms-border-radius: 49px;
		-webkit-border-radius: 49px;
		-moz-border-radius: 49px;
	animation: bubblingG 1.5s infinite alternate;
		-o-animation: bubblingG 1.5s infinite alternate;
		-ms-animation: bubblingG 1.5s infinite alternate;
		-webkit-animation: bubblingG 1.5s infinite alternate;
		-moz-animation: bubblingG 1.5s infinite alternate;
}

#bubblingG_1 {
	animation-delay: 0s;
		-o-animation-delay: 0s;
		-ms-animation-delay: 0s;
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
}

#bubblingG_2 {
	animation-delay: 0.45s;
		-o-animation-delay: 0.45s;
		-ms-animation-delay: 0.45s;
		-webkit-animation-delay: 0.45s;
		-moz-animation-delay: 0.45s;
}

#bubblingG_3 {
	animation-delay: 0.9s;
		-o-animation-delay: 0.9s;
		-ms-animation-delay: 0.9s;
		-webkit-animation-delay: 0.9s;
		-moz-animation-delay: 0.9s;
}



@keyframes bubblingG {
	0% {
		width: 10px;
		height: 10px;
		background-color:rgb(255,59,45);
		transform: translateY(0);
	}

	100% {
		width: 23px;
		height: 23px;
		background-color:rgb(249,188,32);
		transform: translateY(-20px);
	}
}

@-o-keyframes bubblingG {
	0% {
		width: 10px;
		height: 10px;
		background-color:rgb(255,59,45);
		-o-transform: translateY(0);
	}

	100% {
		width: 23px;
		height: 23px;
		background-color:rgb(249,188,32);
		-o-transform: translateY(-20px);
	}
}

@-ms-keyframes bubblingG {
	0% {
		width: 10px;
		height: 10px;
		background-color:rgb(255,59,45);
		-ms-transform: translateY(0);
	}

	100% {
		width: 23px;
		height: 23px;
		background-color:rgb(249,188,32);
		-ms-transform: translateY(-20px);
	}
}

@-webkit-keyframes bubblingG {
	0% {
		width: 10px;
		height: 10px;
		background-color:rgb(255,59,45);
		-webkit-transform: translateY(0);
	}

	100% {
		width: 23px;
		height: 23px;
		background-color:rgb(249,188,32);
		-webkit-transform: translateY(-20px);
	}
}

@-moz-keyframes bubblingG {
	0% {
		width: 10px;
		height: 10px;
		background-color:rgb(255,59,45);
		-moz-transform: translateY(0);
	}

	100% {
		width: 23px;
		height: 23px;
		background-color:rgb(249,188,32);
		-moz-transform: translateY(-20px);
	}
}