/* hp kickass red */

@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic&subset=latin,latin-ext);

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

body {
	background-image: url(images/bgpattern.png);
	background-repeat: repeat;
	font-family: 'Ubuntu', sans-serif;
	color: #fff;}

#visual {
	position: relative;}
	#visual:after {
    	clear: both;}

/* header */

.signupWrap {
    display: none;}
#welcome .ask-user em {
    display: none;}
#welcome {
    margin-right: 10px;}
#welcome .login, #welcome #signInBtn {
	border-radius: 5px;
	background-color: #1a7a84;
	background-image: none;
	background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#1a7882), to(#2194a0));
	background-image: -webkit-linear-gradient(bottom, #1a7882, #2194a0);
	background-image: -moz-linear-gradient(bottom, #1a7882, #2194a0);
	background-image: -o-linear-gradient(bottom, #1a7882, #2194a0);
	background-image: linear-gradient(bottom, #1a7882, #2194a0);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    /* m.rancic */
    box-shadow: none; 
    padding: 0.5em 0.8em;
}
#welcome .login:hover, #welcome #signInBtn:hover {
	background-image: none;}
.dropdownContainer {
    background-color: #f3f4ec;}
#signinDropdownContainer {
    background-color: #152425;
}
#signinDropdownContainer FORM LEGEND {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;}
#signinDropdownContainer FORM LABEL {
    color: #fff;
    font-weight: normal;}
#signinDropdownContainer .account-tools A {
    color: #666;}
    #signinDropdownContainer .account-tools A:hover {
    	color: #a52b58;}
#signinDropdownContainer .account-tools LI, #signinDropdownContainer .account-tools LI:last-child {
    border-color: #e1e1e1;}
#signinDropdownContainer FORM .submitButton {
    font-size: 1.8em;
    margin: 0;
    color: #fff;
}

#signinDropdownContainer FORM .submitButton:hover { border-radius: 10px; }

/* custom Photo */

#customPhoto {
	position: relative;
	z-index: 2;
	width: 646px;height: 387px;
	background-image: url(images/clouod.png);
	background-repeat: no-repeat;
	background-position: right bottom;}
#imageHolder {
	width: 640px;
	height: 382px;
	background-position: 10000px center;
    background-repeat: no-repeat;}
#imageHolder svg {
	width: 100%;
	height: 100%;}
.real_user {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    bottom: 20px;
    display: inline-block;
    font-size: 1.2em;
    left: 30px;
    padding: 0.9em 1em;
    position: absolute;}

/* formular */

#formHolder {
	background-image: url(images/form-bg.png);
	background-size:100% 100%;
	background-repeat: no-repeat;
	width: 370px;
	min-height: 480px;
	position: absolute;
	z-index: 1;
	padding: 20px 40px 20px 60px;
	top: 30px;
	right: 0;}
	
#formHolder h3 {
    color: #A52B58;}

#formHolder form label {
    color: #666666;
    font-size: 13px;}
#formHolder form input[type=text],
#formHolder form input[type=password],
#formHolder form input[type="email"],
#formHolder form select,
#formHolder form input[type="text"]:focus, 
#formHolder form input[type="password"]:focus, 
#formHolder form input[type="email"]:focus,
#formHolder form textarea:focus  {
	width:100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-shadow: 1px 2px 0 #cecece inset;
	background-color: #fff;
	font-family: 'Ubuntu', sans-serif;
	padding: 0.6em;
    font-size: 1.2em;
    color: #000;
	border: none;}
#formHolder form select {
	line-height: 30px;}
.genderBox {
    float: left;
    width: 49%;}
.genderBox.menuIam {
    margin-right: 2%;}
#formHolder form .birthdayWrapper select {
    float: left;}
#formHolder form .birthdayWrapper .birthday_month {
    margin-right: 2%;
    width: 38%;}
#formHolder form .birthdayWrapper .birthday_day {
    margin-right: 2%;
    width: 28%;}
#formHolder form .birthdayWrapper .birthday_year {
    width: 30%;}
FORM .row {
    padding: 0.2em;}
.disclaimer {
    color: #666;
    font-style: italic;
    margin: 0.5em 0 1em;}
.disclaimer a {
    color: #ad3e67;}

FORM button[type="submit"],
button.next,
.regBtn {
	text-transform: uppercase;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	font-size: 27px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.3);
	border-radius: 10px;
	border-bottom: 2px solid #6aa4a7 !important;
	background-color: #1a7a84;
	width: 100%;
	padding: .5em 0.3em !important;
	background-image: none !important;
	background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#1a7882), to(#2194a0));
	background-image: -webkit-linear-gradient(bottom, #1a7882, #2194a0);
	background-image: -moz-linear-gradient(bottom, #1a7882, #2194a0);
	background-image: -o-linear-gradient(bottom, #1a7882, #2194a0);
	background-image: linear-gradient(bottom, #1a7882, #2194a0);
	white-space:normal;
	line-height:30px;}

FORM button[type="submit"]:hover,
button.next:hover,
.regBtn:hover {
	color: #fff;
	text-decoration: none;
}

/* Texts */

#saleText {
    padding-left: 30px;
    width: 600px;}
#saleText h1 {
    color: #F7D15E;
    font-weight: 700;}
#saleText p {
    font-size: 22px;
    line-height: 130%;}

#copyText {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    clear: both;
    margin: 4em 0;
    padding: 20px 30px;}
#copyText h2 {
    color: #F7D15E;}
#copyText p {
    font-size: 18px;
    line-height: 130%;}
#copyText a {
    color: #FFA7C7;
    text-decoration: underline;}
	#copyText a:hover {
    	text-decoration: none;}

/* profiles */

UL.profiles.short LI {
	width: 213px;
	background-image: url(images/prof-bg.png);
	background-repeat: no-repeat;
	background-position: center top;}
UL.profiles.short .thumbnail {
    border: 10px solid #FFFFFF;
    border-radius: 20px;
    margin: 5px;}
UL.profiles {
    text-align: center;}
UL.profiles .profileListThumbnail .owner-media-count {
	opacity:1; 
	border-radius:0 10px 0 0;
	box-shadow:none;}
UL.profiles.short LI .profileInfo {
    text-align: center;}
.username > a {
    color: #F7D15E;
    font-size: 18px;
    text-transform: uppercase;}
UL.profiles .username {
    margin: 10px 0 2px;}
UL.profiles.short LI .profileInfo P .location {
    font-size: 1.2em;
    font-style: italic;}

/* footer */

#footer {
	margin-top: 5em;
	background-color: #290b16;}
#footer a, #footer ul li a, #browse-links a,
#footer a:hover, #footer ul li a:hover, #browse-links a:hover {
	color: #ff5694;
	font-size: 14px;}
#footer p {
	font-size: 14px;
	color: #fff;}
#footer h2, #footer h3, #footer h4, #footer h5 {
	color: #fff;
	font-weight: 700;}
.not-logged #footer .links {
    border-color: #ccc;
}	

/* ie8 */

body.browser-internet-explorer-8 #imageHolder {
    background-position: 0 0;}
body.browser-internet-explorer-8 #imageHolder img {
	display: none;}
body.browser-internet-explorer-8 #customPhoto {
	background-image: none;}
body.browser-internet-explorer-8 UL.profiles.short LI {
	width: 213px;}
body.browser-internet-explorer-8 {
	background-image: url(images/bgpattern.png);
	background-repeat: repeat;}

/* mediaqueries */
body {overflow-x:hidden;}

@media screen and (max-width: 640px) {
	.wrapper {
		width:auto; max-width: 320px;}
	#c-Home .browse-links LI {
	    width: 50%;}
	#c-Home .browse-links LI:nth-child(2n) {
    	border-width: 0;}
    footer#footer {
    	padding: 0;}
	footer .wrapper {
    	padding: 2%;}
	#customPhoto {
	    background-image: none;
	    height: auto;
	    width: 100%;}
	#imageHolder {
	    height: auto;
	    width: 320px;}
	#saleText {
	    padding: 10px;
	    text-align: center;
	    width: 100%;}
	#formHolder {
	    background-color: #F3F4EC;
	    background-image: none;
	    border-radius: 30px;
	    height: auto;
	    padding: 20px;
	    position: relative;
	    width: 100%;}
	#saleText h1 {
	    font-size: 3em;}
	#saleText p {
	    font-size: 2em;}
	#copyText {
	    text-align: center;}
	    
	.not-logged #logo, #logoImage {
        max-width: 100%;
        width: auto;
    }
    
    .not-logged #logo, #logoImage { 
        float: none;
        margin: 0 auto;
    }
    
    #welcome { 
        float: none;
        text-align: center;
        margin: 1em 0;
    }

}
@media screen and (min-width: 640px) and (max-width: 980px) {
	.wrapper {
		width: 640px;}
	#customPhoto {
	    width: 640px;}
	#formHolder {
	    background-color: #F3F4EC;
	    background-image: none;
	    border-radius: 40px;
	    float: right;
	    height: auto;
	    padding: 20px 30px;
	    position: relative;
	    top: -70px;
	    width: 340px;
	    z-index: 10;}
	#saleText {
	    float: left;
	    margin-top: 30px;
	    padding: 0;
	    width: 280px;}
	#saleText h1 {
	    font-size: 3em;}
	#visual {
	    overflow: hidden;}
	#copyText {
	    margin-top: 0;}
}
@media screen and (min-width: 980px) {
	body {
		background-image: url(images/bgg.png), url(images/bgpattern.png);
		background-repeat: no-repeat, repeat;
		background-position: center 100px, 0 0;}
}

/* m.rancic,12.06.2014. */
#signinDropdownContainer input[type="text"], #signinDropdownContainer input[type="password"],
#signinDropdownContainer .blockLabels INPUT[type="text"], #signinDropdownContainer .blockLabels INPUT[type="password"] { border-radius: 0; box-shadow: none; border: 1px solid #fff; font-family: 'Ubuntu', sans-serif; }
@media screen and (min-width:2000px) { body { font-size: 10px; } }
.browser-internet-explorer-8 #footer ul li a { color: #ff5694; }
/* 19.06.2015. */
.regGeoLocationContainer #form_signup_city_name { font-size: 1.3em; }
#registerMultiStepContainer FORM #form_signup_cross_regs_sponsors input { float: none; }
#registerMultiStepContainer FORM #form_signup_cross_regs_sponsors label {
    font-size: 0.8em;
    margin-bottom: 0;
    font-style: italic;
    color: #666;
}
.browser-safari #registerMultiStepContainer FORM SELECT { line-height: 2em; }
UL.profiles.short LI:hover .thumbnail { box-shadow: none; }


/* CIS jan 2018. */
#footer P { color:rgba(255,255,255,.5); }
#footer .custom-footer p { color:#eee; }
#footer .custom-footer, .not-logged #footer .links { border-color:rgba(255,255,255,.35); }