﻿.hiro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(/Images/event/resume_180608/FiD96NQ5yvlq3Sf1QOdQ__DSC0183_01.jpg);
    background-size: cover;
	background-color:#ccc;
    background-position: center;
	padding:0;
	text-align:center;
	text-shadow:1px 1px #333;
	margin-top:-4px !important;
	height:500px;
	background-origin:content-box;
}

.hiro .main-title{
	width:100%;
	margin-top:11%;

}

.hiro .main-title p.lead{
	width:300px;
	height:34px;
	background:#f0bd09;
	margin:0 auto;
	border:1px solid #8f6813;
	border-radius:30px;
	padding:14px;
	color:#fff;
	font-size:22px;
	font-weight:bold;
	line-height:4px;
	text-shadow:none;
}

.hiro .main-title h2{
	font-size:34px;
	font-weight:500;
	margin-top:40px;
	line-height:36px;
	color:#fff;
	text-shadow:1px 1px #001d28;
}

.hiro .main-title h1{
	font-size:60px;
	font-weight:600;
	margin-top:0;
	color:#ffd83b;
	text-shadow:1px 1px #001d28;
}

.resume-icon{
	width:100%;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
}

.icon-box{
	float:left;
	width:30%;
	margin-right:5%;
}


.icon-box:last-child{
	margin-right:0;
}

.icon-box .resume-icon-box{
	width:40%;
	margin:0 auto;
}

.icon-box .resume-icon-box img{
	width:100%;
}

.icon-box .resume-text-box{
	width:100%;
}

.icon-box .resume-text-box h4.resume-account{
	font-size:19px;
	font-weight:600;
}

.icon-box .resume-text-box p.resume-icon-account{
	font-size:15px;
	font-weight:500;
}

.icon-box .resume-text-box p.resume-icon-account span{
	font-weight:600;
}

.mobile-resume-icon{
	display:none;
}

.resume-bottom{
	width:100%;
	text-align:center;
	margin-top:49px;
}

.resume-bottom .resume-btn{
	width:315px;
	height:70px;
	margin:0 auto;
	background:#0073b0;
	border:1px solid #0073b0;
	border-radius:50px;
	color:#fff;
	font-size:24px;
	font-weight:500;
}

.resume-bottom .resume-botn-txt{
	margin-top:8px;
	font-size:16px;
	font-weight:500;
	color:#000200;
}

.product1{
	width:80%;
	margin:0 auto;
	margin-top:30px;
}

#tickets1{
	width:70%;
	margin:0 auto;
	border-left:1px solid #020100;
	border-right: 1px solid #020100;
}

#tickets1 tr {
	border-top:1px solid #020100;
}

#tickets1 tr:last-child{
	border-bottom:1px solid #020100;
}

#tickets1 th,
#tickets1 td {
	border-top: none;
	border-bottom: none;
	text-align:left;
	background-color:#fff;
}

#tickets1 th {
	background:#fff;
	border-right:1px solid #020100;
	text-align:center;
	font-size:15px;
}

#tickets1 span.ot-text{
	line-height:40px;
}

#tickets1 span.ot-text2{
	line-height:70px;
}

#tickets1 td{
	line-height:18px;
	font-size:14px;
	background-color:#fff;
}

#tickets1 td span.additional-explanation{
	font-size:12px;
	line-height:10px;
}

#tickets1 span.event-giveaway{
	line-height:59px;
}

#tickets1 td.inner-event-givaway{
	padding-top:16px;
}

#tickets1 td.inner-event-givaway span.additional-explanation{
	font-size:12px;
	color:#546bb2;
}

.step-circle { 
	display:inline-block;
	width:30%;
	padding:5px;
	margin:0 auto;
}

.step-circle:last-child{
	margin-left:0;
}

.step-circle .item {
	padding-top:0;
	border-radius: 5px;
	border: 1px solid #0073b0 ;
	min-height:120px !important;
	max-height:120px !important;
	overflow:hidden;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	margin:0 auto;
	width:70%;
}

.step-circle .item h1 { 
	font-weight:500;
	color:#0073b0;
	font-size:3em;
	margin-top:16px;
}

.step-circle .item h4 {
	font-weight: 700;
	color: #0073b0 ;
}

.step-circle .item p {
	margin: 0px;
	color: #d86666 ;
	min-height:50px;
}

/*media query*/
@media( max-width: 1190px) {
	.hiro .main-title {
		margin-top: 15%;
	}
}

@media( max-width: 991px ) {
	.hiro .main-title {
		margin-top: 17%;
	}

	#tickets1,
	#tickets1 thead,
	#tickets1 tbody,
	#tickets1 tr,
	#tickets1 th,
	#tickets1 td {
		display: block;
		text-align:center;
		width:100%;
	}

	#tickets1 th {
		border-right:0;
		border-bottom:1px solid #020100;
	}

	#tickets1 td .win-reason-btn{
	display:block;
	margin:4px auto 1px;
	}

	#tickets1 span.ot-text{
		line-height:0;
	}

	#tickets1 span.ot-text2{
		line-height:0;
	}

	#tickets1 span.event-giveaway{
		line-height:0;
	}

	#tickets1 td.inner-event-givaway{
		padding-top:0;
	}

	.step-circle {
	width:100%;
	}
}

@media( max-width: 960px ) {
	.hiro .main-title {
		margin-top: 19%;
	}
}

@media( max-width: 800px){
	.resume-icon{display:none;}
	.mobile-resume-icon{
		display:block;
		width:80%;
		margin:0 auto;
		overflow:hidden;
	}
	.mobile-icon-box{
		float:left;
		width:100%;
		border:1px solid #8ec8e7;
		border-radius:20px;
		margin-bottom:10px;
		padding:4%;
	}


	.mobile-icon-box:last-child{
		margin-right:0;
	}

	.mobile-icon-box .mobile-resume-icon-box{
		width:20%;
		float:left;
	}

	.mobile-icon-box .mobile-resume-icon-box img{
		width:100%;
		margin-top:7px;
	}

	.mobile-icon-box .mobile-resume-text-box{
		float:right;
		width:77%;
		text-align:left;
		margin-top:10px;
	}

	.mobile-icon-box .mobile-resume-text-box h4.resume-account{
		font-size:20px;
		font-weight:600;
	}

	.mobile-icon-box .mobile-resume-text-box p.resume-icon-account{
		font-size:16px;
		font-weight:500;
		margin-top:-1%;
	}

	.mobile-icon-box .mobile-resume-text-box p.resume-icon-account span{
		font-weight:600;
	}

	.mobile-resume-icon .down-arrow{
		margin-bottom:10px;
		font-size:20px;
		font-weight:bold;
		color:#4191bb;
	}

	#tickets1 td.inner-event-givaway{
		padding-top:6px;
	}
}

@media( max-width: 768px){
	#tickets1 th{
		height:38px;
	}

	#tickets1 span.ot-text{
		line-height:23px;
	}
}

@media( max-width: 740px) {
	.hiro .main-title {
		margin-top: 19%;
	}
}

@media( max-width: 700px) {
	.hiro .main-title {
		margin-top: 17%;
	}
}

@media( max-width: 660px){
	.hiro .main-title {
		margin-top: 20%;
	}
	
	.hiro .main-title p.lead{
		font-size:20px;
	}

	.hiro .main-title h2{
		font-size:29px;
	}
	
	.hiro .main-title h1{
		font-size:56px;
	}
}

@media( max-width: 640px){
	.mobile-icon-box .mobile-resume-text-box{
		margin-top:4px;
	}
}

@media( max-width: 600px){
	.hiro .main-title {
		margin-top: 23%;
	}

	.hiro .main-title h1{
		font-size:54px;
	}
}

@media( max-width: 540px){
	.mobile-icon-box{
		width:100%;
		border:1px solid #8ec8e7;
		border-radius:20px;
		margin-bottom:10px;
		padding:4%;
	}

	.mobile-icon-box .mobile-resume-icon-box{
		width:100%;
		margin:0 auto;
	}

	.mobile-icon-box .mobile-resume-icon-box img{
		width:27%;
	}

	.mobile-icon-box .mobile-resume-text-box{
		width:100%;
		text-align:center;
	}

	.mobile-icon-box .mobile-resume-text-box h4.resume-account{
		font-size:20px;
		font-weight:600;
	}

	.mobile-icon-box .mobile-resume-text-box p.resume-icon-account{
		font-size:16px;
		font-weight:500;
		margin-top:-1%;
	}

	.mobile-icon-box .mobile-resume-text-box p.resume-icon-account span{
		font-weight:600;
	}

	.mobile-resume-icon .down-arrow{
		margin-bottom:10px;
		font-size:20px;
		font-weight:bold;
		color:#4191bb;
	}
}