@import "media.less";

@black: #4b4b4b;
@blue: #18a8d6;
@dblue: #077294;
@pink: #ecc4b2;
@dpink: #dcaf9a;
@red: #f84d4f;
@white: #ffffff;

html{
	position: relative;
	height: 100%;
}
body{
	height: 100%;
	position: relative;
	background-image: url("../images/white_wall_hash.png");
}
.ideacloud{
	background-image: 	url("../images/romansa-watercolor-top.png"),
						url("../images/romansa-watercolor-bottom.png"),
						url("../images/romansa-flower-bottom.png");
	background-repeat: no-repeat;
	background-position: top center, bottom right, bottom left;
	background-size: auto;
	position: relative;
	min-height: 100%;
	.media-xs({

	});
	&-register{
		&-area{
			padding: 50px 20%;
			.media-xs({
				padding: 50px 10%;
			});
			&-title{
				margin-bottom: 50px;
				text-align: center;
				p{
					color: @blue;
					text-align: center;
					font-size: 60px;
					font-weight: bold;
					line-height: 1;
					.media-sm({
						font-size: 48px;
					});
					.media-xs({
						font-size: 40px;
					});
				}
				img{
					max-width: 275px;
					.media-xxs({
						max-width: 100%;
					});
				}
			}
			&-subtitle{
				margin-bottom: 30px;
				p{
					color: @black;
					text-align: center;
					font-size: 16px;
					&.romansa-opening{
						margin-bottom: 20px;
					}
					&.romansa-code{
						font-size: 18px;
						margin-top: 30px;
						margin-bottom: 0;
					}
					&.romansa-name{
						font-size: 20px;
						margin-bottom: 20px;
					}
				}
				img{
					max-width: 100%;
				}
			}
			&-form{
				&-title{
					p{
						font-size: 18px;
						color: @blue;
					}
				}
				table{
					border-collapse: collapse;
					&.form-area{
						border: none;
						tr{
							border: none;
							margin-bottom: 20px;
							&.ticket-title{
								margin-top: 40px;
								display: block;
								&:nth-child(1){
									margin-top: 0;
								}
								td{
									p{
										font-size: 18px;
										color: @black;
									}
								}
							}
							td{
								display: block;
								color: @black;
								font-size: 16px;
								border: none;
								padding-left: 0;
								padding-right: 0;
								border-bottom: none !important;
								&:nth-child(1){
									padding-bottom: 0;
								}
								&:nth-child(2){
									padding-top: 0;
									margin-bottom: 0;
								}
								button{
									background-color: @pink;
									border: none;
									display: block;
									font-size: 18px;
									margin-left: auto;
									margin-right: auto;
									margin-top: 40px;
									color: @white !important;
									padding: 8px 40px;
									border-radius: 0 !important;
									outline: none !important;
									&:hover{
										background-color: @dpink;
									}
								}
								input{
									color: @black;
									background-color: transparent;
									border: none;
									box-shadow: none;
									outline: none !important;
									border-radius: 0;
									height: 40px;
									font-size: 18px;
									border-bottom: 1px solid @black;
									&:focus{
										boder: none;
										outline: none;
										box-shadow: none;
										border-bottom: 1px solid @pink;
									}
									&.btn{
										background-color: @pink;
										border: none;
										display: block;
										margin-left: auto;
										margin-right: auto;
										padding: 0 40px;
										margin-top: 40px;
										color: white !important;
										&:hover{
											background-color: @dpink;
										}
									}

								}
							}
						}
					}
					&.ticket-information{
						border: none;
						tr{
							border: none;
							td{
								color: white;
								font-size: 16px;
								border: none;
								padding-left: 0;
								padding-right: 0;
								.media-xs({
									display: block;
								});
								&:nth-child(1){
									.media-xs({
										padding-bottom: 0;
									});
									span{
										display: none;
										.media-xs({
											display: inline-block;
										});
									}
								}
								&:nth-child(2){
									.media-xs({
										padding-top: 0;
										padding-bottom: 10px;
									});
									span{
										display: inline-block;
										.media-xs({
											display: none;
										});
									}
								}
							}
						}
					}
				}
			}
		}
		&-support{
			padding-bottom: 15px;
			&-text{
				p{
					color: #c3c3c3;
					font-size: 14px;
					text-align: center;
					font-style: italic;
				}
			}
			&-logo{
				text-align: center;
				a{
					outline: none !important;
					img{
						width: 200px;
					}
				}
			}
		}
		&-pentamoo{
			padding-bottom: 15px;
			text-align: center;
			&-text{
				display: inline-block;
				vertical-align: middle;
				p{
					color: #c3c3c3;
					font-size: 14px;
					text-align: center;
					font-style: italic;
					margin-bottom: 0;
				}
			}
			&-logo{
				display: inline-block;
				vertical-align: middle;
				margin-left: 10px;
				img{
					width: 200px;
				}
			}
		}
	}
}