a, abbr, acronym, address, applet, big, blockquote, body, button, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, iframe, img, input, ins, kbd, label, legend, li, menu, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline
}

main {
    display: block
}

:focus {
    outline: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption, td, th {
    text-align: left;
    font-weight: 400
}

fieldset, img {
    border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: 400
}

menu, ol, ul {
    list-style: none
}

h1, h2, h4, h5, h6 {
    font-size: 100%;
    font-weight: 400
}

h3
 {
    font-size: 75%;
    font-weight: 400;
	margin-top: 15px

}

input::-moz-focus-inner {
    border: 0;
    padding: 0
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

*, :after, :before {
    box-sizing: border-box
}

html {
    font: 400 14px/1.2 'Proxima Nova Alt', sans-serif;
    color: #0c323e;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    min-height: 100vh
}
html.gay {
   background: url(bg_gay.jpg) top center;
}

html.is-not-homepage {
    background: #000;
}

html.main-menu-open {
    overflow: hidden
}

@media (min-width: 768px) {
    html {
        font-size: 18px
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 22px
    }
}

.logo {
    width: 75%;
    display: block;
    margin: 0.5em auto 1em;
}

.step-ctn {
    padding: 2em 3em;
    border-radius: 10px;
    box-shadow: 0 0 1em rgba(0, 0, 0, .3);
    text-align: center;
    width: 90%;
    max-width: 700px;
    background-color: #f6f6f6;
}

@media (max-width: 767px) {
    .step-ctn {
        padding: 2em 1.5em;
    }
}

@media (min-height: 501px) {
    .step-ctn {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}

.step-ctn .step {
    display: none
}

.step-ctn .step.show {
    display: block
}

.step-ctn .text {
    font-weight: 700
}

.step-ctn .question {
    margin: 1em 0
}

.step-ctn .btn {
    text-transform: uppercase;
    padding: .65em 1em;
    border-radius: 1em;
    font-weight: 700;
    cursor: pointer;
    margin: 0 .25em;
    transition: background-color .3s;
    text-decoration: none
}

.step-ctn .btn.btn-1 {
    color: #fff;
    background-color: #0c729c
}

.step-ctn .btn.btn-1:hover {
    background-color: #0a6388
}

.step-ctn .btn.btn-2 {
    color: #fff;
    background-color: #4e9937;
}

.step-ctn .btn.btn-2:hover {
    background-color: #448330
}

.step-1 .title {
    font-size: 1.2em;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #dddce8
}

.step-1 .question,
.step-1 select {
    font-size: 0.875em;
}

.step-2 .title {
    color: #ff76a7;
    font-weight: 700
}

.step-2 .text {
    margin-bottom: 1em
}

.step-2 ul {
    display: inline-block;
    counter-reset: rules
}

.step-2 ul li {
    text-align: left;
    position: relative;
    margin-bottom: .75em;
    padding-left: 2em
}

.step-2 ul li:before {
    text-align: center;
    color: #fff;
    content: counter(rules);
    counter-increment: rules;
    background-color: #0c729c;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: -.25em
}

.step-2 .btn {
    margin-top: 1em;
    display: inline-block
}

#robot {
    display: inline-block;
    position: relative;
    font-size: .4em
}

.progress {
    margin-top: 1em;
}

.progress li {
    border-radius: 100%;
    background-color: #c7c7c7;
    display: inline-block;
    width: .5em;
    height: .5em
}

.progress li.done {
    background-color: #ff76a7
}

.progress li.selected {
    background-color: #08323e
}

.cr-aff-link {
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase;
}

.cam-picture {
    border-radius: 50%;
    width: 100%;
    max-width: 185px;
    border: 10px solid #18d4e8;
    margin: 15px auto;
}

@media (max-width: 992px) {
    .cam-picture {
        max-width: 125px;
        border: 5px solid #18d4e8;
        margin: 15px auto;
    }
}

.age-verification label {
    display: none;
}

.age-verification select {
    background: #f2f2f2;
    padding: 10px 20px;
    border: none;
    border-radius: 15px;
}

.age-verification select:active,
.age-verification select:focus,
.age-verification select:visited {
   outline: none;
}

.age-verification.not-logged {
    visibility: visible;
    opacity: 1;

}

.age-verification .btn {
    background: rgb(12 114 156);
    color: white;
    min-width: 12em;
    display: block;
    margin: 1em auto 0 auto;
}

.age-verification fieldset {
    border: none;
    padding: 0;
    text-align: center;
}

.age-verification img {
    width: 100%;
    margin: 0 0 1.5em 0;
}

@media (max-width: 767px) {
    .ve-inner {
        width: 90%;
        text-align: center;
    }

    .age-verification img {
        max-width: 300px;
    }

}

.alert-age {
    background: red;
    color: white;
    margin: 1em 0;
    padding: 10px 0;
    text-align: center;
    display: none;
    width: 100%;
}

.alert-age  p {
    margin: 0;
}

.alert-age.show {
   display: block;
}

.select-css {
    font-size: 16px;
    display:block;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 50%;
	max-width: 50%;
    box-sizing: border-box;
    margin-left:auto;
    margin-right:auto;
    margin-top:0.35em;
    margin-bottom:0.35em;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}

/* Step Check list */

.step-3 ul li {
    text-align: left;
    position: relative;
    margin-bottom: .75em;
    padding-left: 3.1em
}

.step-3 ul li:nth-child(1){
    -webkit-animation: 1s ease 0s normal forwards 1 fadein;
    animation: 1s ease 0s normal forwards 1 fadein;
}
.step-3 ul li:nth-child(2){
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
}

.step-3 ul li:nth-child(3){
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}

.step .list-ctn {
    padding: 0 0 0 3em;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.step-4 .title{
    margin-bottom: 1em;
}