@charset "utf-8";
/* CSS Document */


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


body {margin:0; padding:0 0 20px; background-color:#fff; font-family: 'Roboto', sans-serif; font-weight:400;}
h1,h2,p {margin:0; padding:0; line-height:normal;}
img {display:inline-block; vertical-align:middle; border:0;}
input {font-family: 'Roboto', sans-serif;}



.cf:before, .cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

.outer {max-width:1060px; margin:0 auto; padding:0 20px; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

header {background-color:#ff8c50; color:#fff;}
header h1 {font-style:italic; background-color:#ff610f; padding:15px 0; font-size:40px;}
.shadow {
	-webkit-box-shadow: 0 1px 2px 2px rgba(0,0,0,0.3);
	-moz-box-shadow:    0 1px 2px 2px rgba(0,0,0,0.3);
	box-shadow:         0 1px 2px 2px rgba(0,0,0,0.3);
}
header h1 .logo {display:inline-block; vertical-align:middle;}
header h1 .logo img {width:100%;}
header .menu {padding:30px 0; position:relative;}
header .menu .button {background:url(images/button.png) left center no-repeat; background-size:contain; height:41px; padding:0 0 0 60px; display:block; color:#fff; text-decoration:none; line-height:41px; font-size:3em;}
header .menu .search {height:56px; display:block; position:absolute; right:0; top:50%; margin:-28px 0 0 0;}
header .menu .search img {height:100%;}

h2 {font-size:3.2em; line-height:1.4em; font-weight:400; padding:0.2em 0 0.1em 0;}
h2 strong {color:#ff610f; font-family: 'Oswald', sans-serif; font-weight:700;}

.thumbs a {position:relative; float:left; display:block; color:#fff; text-decoration:none; border-top:10px solid #fff; margin:0 20px 15px 0;}
.thumbs a img {width:100%;}
.thumbs a:nth-child(4n+4) {margin-right:0;}
.thumbs a:focus {border-top:10px solid #ff610f;}
.thumbs .name {display:block; position:absolute; bottom:5px; left:8px; font-size:1.2em;}
.thumbs .online {width:10px; height:10px; display:block; background-color:#39b54a; border:2px solid #fff; position:absolute; top:10px; right:7px; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px;}

.bot_button {display:block; background-color:#ff8c50; color:#fff; font-size:60px; text-align:center; text-decoration:none; padding:15px 0; margin-top:10px;}
.bot_button:hover {background-color:#ff610f;}

/* popups */
.popup {background-color:#fff; max-width:600px; position:relative; overflow:hidden; color:#000;}
.popup_close {position:absolute; right:0; top:0; display:block; width:20px; height:20px; line-height:20px; text-align:center; color:#000; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:18px; z-index: 1;}
.popup .popup_logo {background-color:#ff610f; text-align:center; padding:10px 0;}
.popup .popup_logo img {width:40%;}
.popup_title {text-align:center; font-size:28px; line-height:32px; padding:15px 0 0 0;}
.popup_title strong {color:#639c06;}
.popup_title small {font-size:17px; line-height:22px; display:block;}
.popup_form label {width:100%; font-size:15px; line-height:16px; display:block; margin-bottom:4px;}
.popup_form input {width:100%; padding:8px 2%; font-size:18px; border:none; background:#f8c8af; margin-bottom:10px;}
.popup_form .button {display:block; margin-left:32%; color:#fff; text-decoration:none; padding:8px 0; text-align:center; width:36%; background-color:#ff610f; font-size:18px; font-weight:bold; border: 0px;}
.add_info {background-color:#fcf5a7; padding:8px; text-align:center; font-size:12px; margin-bottom:8px;}

.popup_form .button.blink {background-color:#ff8c50;}
.popup_form .button:hover {background-color:#ff8c50;}

.popup-content {position: relative;	padding: 15px 20px 20px 20px;}

.popup-content:before,
.popup-content:after {
content: "";
display: table;
}

.popup-content:after {
clear: both;
}


.pop_photo {float: left; width: 32%; position:relative;}
.pop_photo img {width:100%;}
.pop_photo span {position:absolute; left:5px; bottom:5px; color:#fff; font-size:13px; right:0;}

.popup-content--image .popup_form {
	float: right;
	width: 65%;
}

.popup-content--image .popup_form label {
	text-align: left;
	display: block;
	width: auto;
}

.popup-content--image .popup_form input {
	width: 100%;
}

.thumbs a, #formRegister button, .download button
{
    cursor: pointer;
}

.errormsg
{
	color: red;
	font-size: 12px;
}

.city
{
	position: absolute;
	right: 25px;
	top: 2px;
	background: #39b54a none repeat scroll 0 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
    padding: 3px;
}

.name_back
{
	background: gray;
	position: absolute;
	bottom: 5px;
	width: 100%;
	font-size: 1.2em;
	opacity: 0.5;
	color: gray;
}

#download-popup .popup-content--image .popup_form
{
	position: relative;
	width: 100%;
}

#pop-name-age span
{
	position: relative;
	display: inline;
}

.download {background:#fbfcb8 url(../smiley.png) center 10px no-repeat; padding:120px 10px 20px; font-size:18px; min-height:256px;}
.download p {margin-bottom:25px; text-align: center;}
.download .button {position:relative;}
.download  .button:before {background:url(../arrow-orange.png); width:47px; height:62px; display:block; position:absolute; bottom:0; left:-55px; content:"";}
.green {color:#639a00; text-transform:uppercase;}

@media all and (max-width: 1200px) {
	.thumbs a {width:24%; margin:0 1.33% 8px 0;}
	h2 {font-size:2.6em; line-height:1.4em;}
}
@media all and (max-width: 900px) {
  .thumbs a {border-top:5px solid #fff;}
  .thumbs a:focus {border-top:5px solid #ff610f;}
  h2 {font-size:2em;}
  .thumbs .name {left:5px; font-size:1em;}
}
@media all and (max-width: 700px) {
	.outer {padding:0 10px;}
	header h1 {padding:5px 0;}
	header h1 .logo {width:40%;}
	h2 {font-size:1.4em;}
	header .menu {padding:16px 0;}
	header .menu .button {height:36px; padding:0 0 0 55px; line-height:36px; font-size:2.4em;}
	header .menu .search {height:42px; margin-top:-21px;}	
	.thumbs a:nth-child(4n+4) {margin-right:1.25%;}
	.thumbs a:nth-child(3n+3) {margin-right:0;}
	.thumbs a {width:32.5%; margin:0 1.25% 5px 0;}
	.bot_button {font-size:40px;}
	#download_form button { width: 54%; }
}

@media all and (max-width: 600px) {
	#download-popup .popup_title { font-size: 24px; }
}

@media all and (max-width: 500px) {
	body {padding:0 0 10px;}
	header h1 {padding:0;}
	header h1 .logo {width:50%;}
	header .menu {padding:10px 0;}
	.thumbs a:nth-child(4n+4) {margin-right:0;}
	.thumbs a:nth-child(3n+3) {margin-right:2%;}
	.thumbs a:nth-child(2n+2) {margin-right:0;}
	.thumbs a {width:49%; margin:0 2% 5px 0;}
	header .menu .button {height:26px; padding:0 0 0 50px; line-height:26px; font-size:1.8em;}
	header .menu .search {height:30px; margin-top:-15px;}
	h2 {font-size:1.2em; line-height:1.4em;}
	.bot_button {font-size:30px; margin-top:5px;}
	
	.popup-content {padding: 10px;}
	.popup_title {font-size:26px; line-height:30px; position:relative;}
	.pop_photo {width: 140px;}
	#pop-image .popup-content--image .popup_form {width:auto; float:none; margin:0 0 0 150px;}
	.popup_form {padding:0 0 10px;}
	.popup_form label {width:100%; margin-right:0; text-align:left; margin-bottom:4px;}
	.popup_form input {width:100%; margin-bottom:10px;}
	.popup_form .button {margin-left:0; width:100%;}
	.popup_title {font-size:22px; line-height:26px; padding:8px 2%;}
	.popup_title small {font-size:14px; line-height:20px;}
	#download_form button
	{
		width: 54%;
		margin: 0 auto;
	}
}

@media all and (max-width: 400px) {
    span.age { display: none !important; }
    #download_form button
	{
		width: 78%;
		margin: 0 auto;
		margin-left: 23%;
	}
}

@media all and (max-width: 340px) {
	.popup-content {padding: 10px;}
	.popup_title {font-size:20px; line-height:28px;}
	.pop_photo {width: 100%;}
	.popup-content--image .popup_form {width:100%; clear:left; float:none; margin:0; padding-top:10px;}
	#popup-pic { display: none; }
	#pop-image .popup-content--image .popup_form
	{
		margin-left: 10px;
		margin-right: 10px;
		width: auto;
	}
	
	#download_form button
	{
		width: 60%;
		margin: 0 auto;
	}
}



/* popup DEFAULTS */


.overlay {
	z-index: 9000;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,.8);
	display: none;
}


.popup {
	z-index: 10000;
	position: fixed;
	display: none;
	left: 5px;
	right: 5px;
	top: 5px;
	overflow-y: auto;
	max-height: calc(100% - 20px);
	max-width: none;
}

.popup-active-overlay .overlay {
	display: block;
}

.popup-active {
	display: block;

	/*show from top*/

	-webkit-animation-duration: .4s; 
	animation-duration: .4s; 
	-webkit-animation-fill-mode: both; 
	animation-fill-mode: both; 
	-webkit-animation-name: fromTop; 
	animation-name: fromTop; 
}


/* after it's centered */

@media screen and (min-width:768px) and (orientation: landscape){
	.popup {
		left: 50%;
		right: auto;
		top: 50%;
		width: 640px;
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform: translate3d(-50%, -50%, 0);
		-ms-transform: translate(-50%, -50%);
	}
	
	.popup-active {
		-webkit-animation-duration: .4s; 
		animation-duration: .4s; 
		-webkit-animation-fill-mode: both; 
		animation-fill-mode: both; 
		-webkit-animation-name: fadeInBottom; 
		animation-name: fadeInBottom; 
	}

}


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

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@-webkit-keyframes fadeInBottom {
    0% {
        opacity: 0;
        top: 52%;
    }
    100% {
        opacity: 1;
        top: 50%;
    }
}

@keyframes fadeInBottom {
    0% {
        opacity: 0;
        top: 52%;
    }
    100% {
        opacity: 1;
        top: 50%;
    }
}


@-webkit-keyframes fromTop {
    0% {
        -webkit-transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes fromTop {
    0% {
        transform: translateY(-100%);
    }
    100% {
       transform: translateY(0);
    }
}