@charset "UTF-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,hr,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,hgroup,menu,footer,header,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}p{margin:0}h1{font-size:2.5em;line-height:1;font-weight:700}h2{font-size:1.8em}h3{font-size:1.3em;line-height:1}a{outline:0}

body {
    background: #edf0f5;
    width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #333;
    background: #edf0f5;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: #fffe9c;
}

::selection {
    background: #fffe9c;
    color: rgba(255, 255, 255, 0.85)
}

::-moz-selection {
    background: #fffe9c;
    color: rgba(255, 255, 255, 0.85)
}

img::selection {
    background: transparent
}

img::-moz-selection {
    background: transparent
}

@media only screen and (max-width: 479px) {
    body {
        font-size: 80%
    }
    body #landingWrapper {
        width: 100%
    }
    /* body #landingWrapper .landingWrapperContainer .content .topDiv .image {
        width: 100%
    } */
    body #landingWrapper .landingWrapperContainer .content .topDiv .image .like-chat-btn .smallBtn {
        background-size: 48px 48px !important;
        width: 48px;
        height: 48px
    }
    body #landingWrapper .landingWrapperContainer .content .bottomDiv {
        width: 100%
    }
    body #landingWrapper .landingWrapperContainer .content .bottomDiv .arrows {
        height: 17px
    }
    body #landingWrapper .landingWrapperContainer .content .bottomDiv .arrows .arrow {
        background-size: 15px 17px !important;
        width: 15px;
        height: 17px
    }
}

@media only screen and (min-width: 480px) and (max-width: 639px) {
    body {
        font-size: 90%
    }
    body #landingWrapper {
        width: 480px
    }
    body #landingWrapper .landingWrapperContainer .content .topDiv .image {
        /* width: 480px */
    }
    body #landingWrapper .landingWrapperContainer .content .bottomDiv {
        width: 480px
    }
    body #landingWrapper .landingWrapperContainer .content .bottomDiv .arrows {
        height: 26px
    }
    body #landingWrapper .landingWrapperContainer .content .bottomDiv .arrows .arrow {
        background-size: 23px 26px !important;
        width: 23px;
        height: 26px
    }
}

@media only screen and (min-width: 640px) and (max-width: 719px) {
    body {
        font-size: 100%
    }
    body #landingWrapper {
        width: 640px
    }
    body #landingWrapper .landingWrapperContainer .content .bottomDiv {
        width: 640px
    }
    body #landingWrapper .landingWrapperContainer .content .bottomDiv .arrow {
        background-size: 31px 35px !important;
        width: 31px;
        height: 35px
    }
}

@media only screen and (min-width: 720px) and (max-width: 767px) {
    body {
        font-size: 100%
    }
    body #landingWrapper {
        width: 720px
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    body {
        font-size: 100%
    }
    body #landingWrapper {
        width: 768px
    }
}

@media only screen and (min-width: 992px) {
    body {
        font-size: 100%
    }
    body #landingWrapper {
        width: 992px
    }
}

#landingWrapper {
    width: 100%;
    background: #edf0f5;
    margin: 0 auto
}

#landingWrapper .landingWrapperContainer .headerContainer {
    width: 100%;
    background: #4c66a4
}

#landingWrapper .landingWrapperContainer .headerContainer .header {
    padding: 0 0.5em;
    overflow: hidden
}

#landingWrapper .landingWrapperContainer .headerContainer .header .logo {
    font-family: 'Lucida Sans', Tahoma, Verdana, Arial, sans-serif;
    font-size: calc(10px + 2vh);
    line-height: 1.4em;
    font-weight: bold;
    color: #fff;
    float: left;
    width: 100%;
    text-align: center;
    padding: 0.25em 0;
}

#landingWrapper .landingWrapperContainer .headerContainer .header .btnContainer {
    width: 20%;
    float: left
}


#landingWrapper .landingWrapperContainer .headerContainer .header .btnContainer .button.loginBtn {
    float: left
}

#landingWrapper .landingWrapperContainer .headerContainer .header .btnContainer .button.registerBtn {
    float: right
}

#landingWrapper .landingWrapperContainer .content {
    width: 100%;
    padding-top: 0.3em
}

#landingWrapper .landingWrapperContainer .content h1 img {
	max-height: calc(10px + 1.8vh);
}
#landingWrapper .landingWrapperContainer .content h1 {
    font-family: 'Lucida Sans Unicode', Tahoma, Verdana, Arial, sans-serif;
    font-size: calc(10px + 1.8vh);
    color: #000000;
    line-height: 1.2em;
    margin-bottom: 0.4em;
    text-align: center
}

#landingWrapper .landingWrapperContainer .content .topDiv {
    padding: 0.2em 0 0
}

#landingWrapper .landingWrapperContainer .content .topDiv .image {
    margin: 0 auto;
    position: relative
}

#landingWrapper .landingWrapperContainer .content .topDiv .image .profilePreview {
    display: block;
    margin: 0
}

/* #landingWrapper .landingWrapperContainer .content .topDiv .image .profilePreview img {
    display: block;
    width: 100%
} */

#landingWrapper .landingWrapperContainer .content .topDiv .image .overImage {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.85em 0.85em 0.85em 0.4em;
    width: 100%;
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
#landingWrapper .landingWrapperContainer .content .topDiv .image.imageFinal .overImage {
	top: 0;
	right: 0;
	padding: 3vh 1vw;
}


#landingWrapper .landingWrapperContainer .content .topDiv .image .overImage .details {
    font-size: calc(10px + 2vh);
}





/*  ==========================================================================
	V2 
	========================================================================== */
.red {
	color: #f00;
}
	.question.final .red {
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
	}

.header {
	position: relative;
}
	.header .icons {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		max-width: 22.5%;
	}
		.header .icons img,
		.header .icons a {
			display: block;
			height: 100%;
		}


.topDiv .image {

}

.overImage {
	position: relative;
	text-align: center;
}
	.overImage .details {
		display: inline-block;
	}

	.profilePreview {
		display: block;
	}
	.profilePreview img {
		min-height: 50vh;
		max-height: 70vh;
	}

	.thumbs img,
	.thumbs {
		display: block;
	}
	.btn,
	.thumbs a {
		-webkit-border-radius: 1em;
		-moz-border-radius: 1em;
		border-radius: 1em;
		bottom: 22%;
		border: 2px solid #46ba49;
		cursor: pointer;
		display: inline-block;
		position: absolute;
		padding: 1vh;
		background: #46ba49;
		background: rgba(70, 186, 73, 0.3);
		-webkit-transition: -webkit-transform 0.15s ease-out, background-color 0.15s ease-out;
		-moz-transition: -moz-transform 0.15s ease-out, background-color 0.15s ease-out;
		-ms-transition: -ms-transform 0.15s ease-out, background-color 0.15s ease-out;
		-o-transition: -o-transform 0.15s ease-out, background-color 0.15s ease-out;
		transition: transform 0.15s ease-out, background-color 0.15s ease-out;
	}
	.thumbs a:hover {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
		background: rgba(70, 186, 73, 0.6);
	}
	.thumbs a.thumbLeft {
		border-color: #d55150;
		background: #d55150;
		background: rgba(213, 81, 80, 0.3);
		left: 2vw;
		-webkit-transform-origin: left bottom;
		-moz-transform-origin: left bottom;
		-ms-transform-origin: left bottom;
		-o-transform-origin: left bottom;
		transform-origin: left bottom;
	}
	.thumbs a.thumbLeft:hover {
		background: rgba(213, 81, 80, 0.6);
	}
	.thumbs a.thumbRight {
		right: 2vw;
		-webkit-transform-origin: right bottom;
		-moz-transform-origin: right bottom;
		-ms-transform-origin: right bottom;
		-o-transform-origin: right bottom;
		transform-origin: right bottom;
	}
		.thumbs img {
			height: auto;
			width: auto;
			max-width: calc(24px + 5vw);
			max-height: calc(24px + 5vh);
		}


	.topDiv.images {
		text-align: center;
	}
	.topDiv .image,
	.question {
	  color: #fff;
	  display: none;
	  -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out;
	  -moz-transition: -moz-transform 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out;
	  -ms-transition: -ms-transform 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out;
	  -o-transition: -o-transform 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out;
	  transition: transform 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out;
	  text-align: center;
	  opacity: 0;
	  visibility: hidden;
	  /* padding: 2vh 2vw; */
	}
		.topDiv .image.active,
	  .question.active {
	    display: inline-block;
	    visibility: visible;
	    opacity: 1;
	  }
	  .topDiv .image.done,
	  .question.done {
	    -webkit-transform: scale3d(0.33, 0.2, 0.33) translateX(-150%);
	    -moz-transform: scale3d(0.33, 0.2, 0.33) translateX(-150%);
	    -ms-transform: scale3d(0.33, 0.2, 0.33) translateX(-150%);
	    -o-transform: scale3d(0.33, 0.2, 0.33) translateX(-150%);
	    transform: scale3d(0.33, 0.2, 0.33) translateX(-150%);
	  }

	  .questionTitle {
	  	font-size: calc(10px + 1.8vh);
	  	line-height: 1.1;
	  	margin-bottom: 1em;
	  }
	  	.questionTitle small {
	  		font-size: 0.85em;
	  		display: block;
	  		line-height: 1;
	  		letter-spacing: -0.25px;
	  		letter-spacing: -0.025em;
	  	}

	  .buttons {
	  	clear: both;
	  	text-align: center;
	  }
	  	.btn {
	  		color: #fff;
	  		font-size: calc(10px + 1.7vh);
	  		font-weight: bold;
	  		position: relative;
	  		z-index: 1;
	  		text-decoration: none;
	  	}
	  		.btn,
	  		.btn::before {
	  			-webkit-border-radius: 0.5em;
	  			-moz-border-radius: 0.5em;
	  			border-radius: 0.5em;
	  		}
	  		.btn::before {
	  			display: block;
	  		  content: '';
	  		  position: absolute;
	  		  top: 0;
	  		  left: 0;
	  		  width: 100%;
	  		  height: 100%;
	  		  background: rgba(255,255,255,0.33);
	  		  z-index: -1;
	  		  opacity: 0;
	  		  -webkit-transform: scale3d(0.35, 1, 1);
	  		  transform: scale3d(0.35, 1, 1);
	  		  -webkit-transition: -webkit-transform 0.4s, opacity .4s;
	  		  transition: transform 0.4s, opacity .4s;
	  		  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	  		  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	  		}
	  		.btn:hover::before {
	  		  opacity: 1;
	  		  -webkit-transform: translate3d(0, 0, 0);
	  		  transform: translate3d(0, 0, 0);
	  		}
	  		.btn:active {
	  		  -webkit-transition: transform 0.1s linear;
	  		  -moz-transition: transform 0.1s linear;
	  		  -ms-transition: transform 0.1s linear;
	  		  -o-transition: transform 0.1s linear;
	  		  transition: transform 0.1s linear;
	  			-webkit-transform: translateY(1px);
	  			-ms-transform: translateY(1px);
	  			-o-transform: translateY(1px);
	  			transform: translateY(1px);
	  		}

	  		.btn.active,
	  		.btn.btnYes,
	  		.btn.btnNo {
					border: 2px solid #46ba49;
					background: rgba(70, 186, 73, 0.8);
					color: #000;
	  		}
	  		.btn.btnNo {
					border-color: #d55150;
					background: rgba(213, 81, 80, 0.8);
					color: #cacaca;
	  		}


	  .buttons.buttons4 a {
	    width: auto;
	  }
		  .buttons.buttons4 a {
		    margin: 0 0 1em;
		  }
	    .buttons.buttons4 a + a + a,
	    .buttons.buttons4 a + a {
	       margin-left: 4%;
	    }
	    .buttons.buttons4 a + a + a + a {
	    	margin-left: 0;
	    }

	  	
.rules {
  clear: both;
  display: block;
  padding: 0;
  text-align: left;
  max-width: 450px;
  margin: 0 auto 1vh;
}
	.rules li {
		font-size: calc(9px + 1.2vh);
	  display: block;
	  margin-bottom: 1.25vh;
	  text-align: left;
	  line-height: 1;
	}

	  		
.processing img {
	max-width: 92%;
	display: block;
	margin: auto;
	padding: 0;
}

.secure {
	text-align: center;
}
	.secure img {
		display: inline-block;
		max-width: calc(24px + 10vw);
		max-height: calc(24px + 10vh);
	}



@media only screen and (max-width:579px){
  #landingWrapper .landingWrapperContainer .headerContainer .header {
  	text-align: left;
  }
  #landingWrapper .landingWrapperContainer .headerContainer .header .logo {
  	display: inline-block;
  	float: none;
  	font-size: calc(10px + 1.1vh);
  	text-align: left;
  }
  #landingWrapper .landingWrapperContainer .content h1 {
  	font-size: calc(10px + 0.9vh);
  }
  .header .icons {
  	max-width: none;
  }
}