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

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. large desktop
	5. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (max-width:767px) {
	h1{ font-size:32px; line-height:34px;}
	h2{ font-size:26px; line-height:30px; margin:0 0 10px;}
	h2 span{ font-size:18px;}
	h3{ font-size:26px; line-height:30px; padding:0 0 10px; margin:0 0 20px;}
	h3::before{ height:3px;}
	h4{ font-size:24px; line-height:28px;}
	h5{ font-size:18px; line-height:22px;}
	h6{ font-size:16px; line-height:20px;}
	
	form h3{ margin:0 0 20px;}
	form ul li{ margin:10px 0 0;}
	form .form-left{ margin:0 0 10px;}
	form .form-right, form .form-left{ width:100%;}
	
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{ padding:11px 15px; font-size:14px;}
	textarea{ padding:11px 15px; font-size:14px; height:120xp;}
	input[type="submit"], input[type="button"], input[type="reset"]{ padding:12px 20px 10px; font-size:13px;}
	button, .black-btn-small, .button{ padding:9px 15px; font-size:14px;}
	label.checkbox{ margin-bottom:10px; padding:0 0 0 35px;}
	
	.select-box .customSelect{ padding:11px 15px; font-size:14px;}
	.select-box .customSelect::after{ right:20px; top:13px;}
	
	td{ padding:5px 6px 5px 8px; font-size:12px; line-height:16px;}
	td a{ font-size:12px; line-height:16px;}
	table .edit-party, table a.edit-delete{ font-size: 12px; height: 12px; width:12px; margin:2px 7px 0 0; line-height:12px;}
	table a.edit-delete{ margin-right:0;}
	
	hr{ margin:15px 0 20px;}
	
	label.title{ font-size: 17px; line-height: 20px; margin: 0 0 5px 15px;}
	label.calendar{ font-size:16px; line-height:16px;}
	label.calendar::after{ right:20px; top:14px;}
	label.time{ font-size:16px; line-height:16px;}
	label.time::after{ right:20px; top:14px;}
	
	p{ margin:0 0 15px; line-height:23px; font-size:14px;}
	
	.black-btn{ padding:12px 20px 10px; font-size:13px;}
	
	.container{ padding:25px 0; padding-left:10px !important; padding-right:10px !important;}
	.container-left{ width:100%; margin:0 0 20px;}
	.container-right{ width:100%;}
	
	/* header */
	header{ padding:10px;}
	.logo{ width:140px;}
	header.active .logo { height: 36px; width: 37px;}
	.login-btn{ padding:5px 10px; margin:10px 0 0 15px; font-size:14px;}
	.navigation{ margin:10px 0 0 0;  display:none;}
	.navigation li a{ padding:7px 12px; font-size:14px;}
	
	#video{ position:absolute;}
	
	.my-account-menu{ margin-left:0; max-width:90px;}
	.my-account-menu ul{ top:56px; width:130px; padding:5px 0;}
	header.active .my-account-menu ul{ top:46px;}
	.my-account-menu ul li a{ font-size:13px; line-height:16px; padding:5px 10px;}
	
	.banner-text{ width:94%;}
	.banner-text p{ margin:0 0 15px; font-size:14px; line-height:18px;}
	.banner-text form{ max-width:500px;}
	.banner-text form div{ padding:7px 10px 7px 81px; margin:0 0 20px;}
	.banner-text form div label{ font-size:14px; line-height:18px; left:15px; top:11px; padding:4px 10px 4px 0;}
	.banner-text form input[type="text"]{ padding:6px 10px 6px 5px;}
	.banner-text form input[type="submit"]{ font-size:14px; line-height:18px; max-width: 200px; padding: 10px;}
	
	.mouse-icon{ bottom:90px; display:none;}
	.link-button a{ font-size:12px; line-height:14px; padding:12px 10px 9px; width:100%;}
	
	/* mobile-nav */
	#wrapper{ background:#fff; position:relative; z-index:9; left:0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;     box-shadow: 0 0 10px #ccc; overflow: hidden;}
	#wrapper.current{ left:-60%;}
	header.current{ left:-60%;}
	
	header .navigation{ display:none;}	
	.menu-icon{ display:block; margin:12px 0 0 10px;}
	header.active .menu-icon{ margin:3px 0 0 10px;}
	.mobile-nav{ position:absolute; right:0; top:0; width:60%; display: block;}
	.mobile-nav .title{ padding:10px 20px; display:block; color:#000; font-size:18px; line-height:22px; font-family: 'bree_ebextrabold';}
	.mobile-nav ul.mobile-menu{ padding:0 0 20px; margin:0;}
	.mobile-nav ul.mobile-menu li{ padding:0; margin:0; background:none; border-bottom:1px solid #fff; position:relative;}
	.mobile-nav ul.mobile-menu li a{ padding:8px 20px; display:block; font-size:15px; line-height:20px; color:#000; position:relative;}
	.mobile-nav ul.mobile-menu li ul{ display:none; margin:0 0 0 20px;}
	.mobile-nav ul.mobile-menu li ul li{ border:0; border-top: 1px solid #fff;}
	.mobile-nav ul.mobile-menu li ul li a{ padding:6px 20px 6px 10px; font-size:14px;}
	.mobile-nav ul.mobile-menu li em{ width:30px; height:36px; text-align:center; line-height:36px; position:absolute; right:10px; top:0; font-style:normal; color:#000; font-size:20px; cursor:pointer; text-align:center;}
	.mobile-nav ul.mobile-menu li em:before{ content:'+'; position:absolute; line-height:36px; left:0; top:0; height:100%; width:100%;}
	.mobile-nav ul.mobile-menu li.current em:before{ content:'-';}
	.mobile-nav ul.mobile-menu li.active{ background:rgba(246,236,102,0.6);}
	.mobile-nav ul.mobile-menu li.current, .mobile-nav ul.mobile-menu li.active.current{ background:rgba(246,236,102,0.8);}
	
	/* welcome-block */
	.welcome-block{ margin:0 0 25px;}
	.welcome-block-left{ width:100%;}
	.welcome-block-left .image-desc{ background-size:40px !important; padding:6px 0 6px 50px; left:10px; bottom:5px;}
	.welcome-block-left .image-desc p{ font-size:20px; line-height:24px;}
	.welcome-block-left .image-desc p br{ display:none;}
	.welcome-block-left .image-desc p span{ display:block; margin:0; font-size:13px; line-height:16px;}
	.welcome-block-right{ width:100%; padding:15px 10px 20px 10px}
	.welcome-block-right .black-btn{ margin:0;}
	
	/* how it works */
	.how-it-works h2{ text-align: center;}
	.how-it-works .container { padding:0 20px 0;}
	.how-it-works-box::before{ right:0; border-radius:0; border-right:0; top:70px; display:none;}
	.how-it-works-box ul.container { margin: 0 auto; padding: 0 0 25px;}
	.how-it-works-box ul li{ width:100%; padding:0 20px; margin:20px 0 0;}
	.how-it-works-box ul li:first-child{ margin:0;}
	.how-it-works-box ul li .image{ height:120px; width:120px; margin:0 auto 20px;}
	.how-it-works-box ul li .image span{ height:120px; width:120px;}
	.how-it-works-box ul li .image strong{ height:40px; width:40px; line-height:36px; font-size:18px; margin-top:-20px; margin-left:-20px;}
	
	/* video */
	.video{ height:240px;}
	.video a{ width:70px; height:46px; margin:-23px 0 0 -35px;}
	
	/* inner-banner */
	.inner-banner{ height:200px;}
	.inner-banner h1 { bottom: -4px; line-height: 26px; position: relative;}
	
	/* sub title */
	.sub-title{ font-size: 22px; line-height: 28px; margin: 0 0 25px; padding: 0 0 20px; }
	
	/* about-content */
	.about-content-left{ width:100%; height:auto !important;}
	.about-content-left-inner{ padding:15px 15px;}
	.about-content-left .our-mission{ padding:0 0 0 0;}
	.about-content-left .image-desc{ background-size:40px; padding:0 0 6px 50px; margin:0 0 15px;}
	.about-content-left .image-desc p{ font-size:20px; line-height:20px;}
	.about-content-left .image-desc br{ display:none;}
	.about-content-left .image-desc p span{ font-size:12px; line-height:14px; margin:0; display:block;}
	.about-content-right{ width:100%; height:auto !important;}
	.about-content-right .our-mission{ padding:15px;}
	.about-content-right .values{ padding:15px;}
	.about-content-right .values p { font-size: 14px; line-height: 23px;}
	
	/* category */
	.category li a{ font-size:15px; line-height:18px; padding:15px 0 13px;}
	.listing-box li{ margin:0 0 10px !important; width:48%;}
	.listing-box li:nth-child(2n+2){ float:right;}
	.listing-box li .black-btn{ padding:7px 15px 5px; font-size:12px;}
	.listing-box li .listing-box-popup .listing-box-popup-inner div br + a{ margin-top:8px;}
	
	/* pagination */
	.pagination li a{ height:24px; width:24px; line-height:24px; font-size:13px;}
	.pagination li a.next::before{ font-size:10px; margin:-7px 0 0 -4px;}
	.pagination li a.prev::before{ font-size:10px; margin:-7px 0 0 -6px;}
	
	/* breadcrumbs */
	.breadcrumbs{ top:1px; position:static; margin:0 0 20px;}
	.breadcrumbs li{ font-size:12px; line-height:14px; margin:0 20px 0 0;}
	.breadcrumbs li::before{ left:-12px;}
	.breadcrumbs li a{ font-size:12px; line-height:14px; }
	.breadcrumbs li:first-child a{ padding:0 0 0 20px;}
	.breadcrumbs li:first-child a::before{ font-size:14px; line-height:16px; top:-2px;}
	
	/* party-bar */
	.party-bar{ background:#e70d85;}
	.party-bar ul { margin: 0 auto; max-width: 700px; width: 100%;}
	.party-bar .container{ padding-left:20px !important; padding-right:20px !important;}
	.party-bar ul li{ display:none; text-align:center;}
	.party-bar ul li.active{ display:block; width:100%;}
	.party-bar ul li:before{ display: none !important;}
	.party-bar ul li span{ font-size:14px; padding:8px 25px 10px; line-height:18px;}
	.party-bar ul li span::after{ margin:0 0 0 13px;}
	
	.create-account{ width:100%; padding:0; border:0; margin:0 0 30px;}
	.sign-in{ width:100%; padding:0; border:0;}
	
	.recipients ul.invite-addfields{ margin:0 0 10px;}
	.recipients .add_person_button{ margin:0 0 20px;}
	
	/* event-detail */
	.event-detail-left{ width:100%; margin:0 0 30px; padding:0; border:0;}
	.event-detail-right{ width:100%; padding:0; border:0;}
	
	/* range-percentage */
	.charity-block { margin: 0 auto 50px; max-width: 400px;}
	.charity-block-left{ width:100%;}
	.charity-block-center{ width:100%; margin:30px 0 40px;}
	.charity-block-right{ width:100%;}
	.charity-block .image{ max-width:350px; margin:0 auto 17px;}
	
	.range-percentage { margin: 10px 0 4px;}
	.limit{ margin:25px 0 15px;}
	.final-percentage .percentage{ max-width:90px; padding:10px 10px 8px 15px; border-radius:24px; margin-right:25px;}
	.final-percentage .percentage *{ font-size:22px; line-height:22px;}
	.final-percentage .percentage::after{ background-size:15px; right:-14px;}
	.final-percentage .percentage-txt{ max-width:180px;}
	.final-percentage .percentage-txt span{ font-size:14px; line-height:17px;}
	.final-percentage .percentage-txt span strong{ font-size:26px; line-height:20px;}
	
	.rangeSlider, .rangeSlider__fill{ height:30px;}
	.rangeSlider__handle{ margin:0 0 0 -13px; top: 6px; height:18px; width:18px;}
	
	form ul li .input{ width:100%; margin:0 0 10px;}
	form ul li .input.last{ width:100%; margin:0 0 10px;}
	form ul li .input.last a{ margin:0 0 0 10px; font-size: 16px; height: 16px; width:16px;}
	
	/* template category */
	.template-category li a{ font-size:16px; line-height:20px; padding:12px 30px 12px 0;}
	.template-category li.sub > a::after{ top:11px; right:5px;}
	.template-category li ul{ padding:10px 0 10px 15px;}
	.template-category li ul li a { font-size: 14px; line-height: 16px; padding: 7px 0 5px;}
	
	/* footer */
	footer{ padding:10px 0 0;}
	.footer-logo{ max-width:150px; margin:0 auto 10px;}
	.footer-menu ul{ padding:10px 0;}
	.footer-menu ul li{ margin:0 10px;}
	.footer-menu ul li a{ font-size:14px;}
	footer p{ padding:10px 0; font-size:12px; line-height:14px;}
	
	.back-top{ height:40px; width:40px; right:10px; bottom:10px;}
	.back-top::before{ font-size:16px; margin:-7px 0 0 -8px;}
	
	.testimonials-list li{ padding:0 0 15px 30px; margin:15px 0 0;}
	.testimonials-list li:before{ font-size:22px; line-height:22px;}
	.testimonials-list li .author{ font-size:14px; line-height:18px;}
	
	.help li{ padding:15px 0 15px 0;}
	.help li .help-desc{ padding:0;}
	
	/* people */
	.people ul li{ width:100%; margin:20px 0 0 !important;}
	.people ul li:first-child{ margin:0 !important;}
	
	.some-fun{ width:250px;}
	
	.top-section{ margin:0 0 20px; padding:0 0 10px;}
	.top-section h4 { font-size: 16px; line-height: 18px; margin: 0 0 10px;}
	
	.loader{ width:20px;}
	
	.some-fun{ width:280px;}
	
	.listing-box li a span em strong{ font-size: 15px; line-height: 18px; padding: 0 10px 15px;}
}

/* 2. Large Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (min-width:641px) and (max-width:767px) {

}

/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {
	h1{ font-size:60px; line-height:50px;}
	h2{ font-size:30px; line-height:32px; margin:0 0 15px;}
	h2 span{ font-size:24px;}
	h3{ font-size:26px; line-height:30px; padding:0 0 10px; margin:0 0 25px;}
	h4{ font-size:22px; line-height:26px;}
	h5{ font-size:20px; line-height:24px;}
	h6{ font-size:18px; line-height:22px;}
	
	form h3{ margin:0 0 20px;}
	form ul li{ margin:12px 0 0;}
	
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{ padding:11px 15px; font-size:14px;}
	textarea{ padding:11px 15px; font-size:14px; height:130px;}
	input[type="submit"], input[type="button"], input[type="reset"]{ padding:15px 25px 12px; font-size:14px;}
	button, .black-btn-small, .button{ padding:11px 25px 10px; font-size:14px;}
	label.checkbox{ margin-bottom:10px; padding:0 0 0 38px;}
	
	.select-box .customSelect{ padding:11px 15px; font-size:14px;}
	.select-box .customSelect::after{ right:20px; top:13px;}
	
	label.title{ font-size: 17px; line-height: 20px; margin: 0 0 5px 15px;}
	label.calendar{ font-size:16px; line-height:16px;}
	label.calendar::after{ right:15px; top:14px;}
	label.time{ font-size:16px; line-height:16px;}
	label.time::after{ right:15px; top:14px;}
	
	.recipients ul.invite-addfields{ margin:0 0 12px;}
	.recipients .add_person_button{ margin:0 0 24px;}
	
	hr{ margin: 15px 0 30px;}
	
	p{ margin:0 0 15px; line-height:23px;}
	.black-btn{ padding:15px 25px 12px; font-size:14px;}
	
	.container{ padding:40px 0; padding-left:10px !important; padding-right:10px !important;}
	#video{ position:absolute;}
	
	/* header */
	header{ padding:10px;}
	.logo{ width:150px;}
	header.active .logo { height: 36px; width: 37px;}
	.login-btn{ padding:5px 10px; margin:10px 0 0 15px; font-size:14px;}
	.navigation{ margin:10px 0 0 0;}
	.navigation li a{ padding:7px 12px; font-size:14px;}
	
	.my-account-menu{ margin-left:15px; max-width:110px;}
	.my-account-menu ul{ top:56px; width:150px;}
	header.active .my-account-menu ul{ top:46px;}
	.my-account-menu ul li a{ font-size:13px; line-height:16px; padding:8px 13px;}
	
	.banner-text form{ max-width:500px;}
	.banner-text p{ font-size:16px;}
	
	.mouse-icon{ bottom:90px;}
	.link-button a{ font-size:16px; line-height:20px; padding:20px 10px 17px;}
	
	/* welcome-block */
	.welcome-block{ margin:0 0 40px;}
	.welcome-block-left{ width:100%;}
	.welcome-block-right{ width:100%; padding:15px 10px 20px 10px;}
	.welcome-block-right .black-btn{ margin:10px 0 0;}
	
	/* how it works */
	.how-it-works h2{ text-align: center;}
	.how-it-works .container { padding: 0 20px 0;}
	.how-it-works-box::before{ right:0; border-radius:0; border-right:0; top:70px; display:none;}
	.how-it-works-box ul.container { margin: 0 auto; padding: 0 0 40px;}
	.how-it-works-box ul li{ width:50%; padding:0 20px; margin:0 0 30px;}
	.how-it-works-box ul li:first-child{ margin:0 0 30px;}
	/*.how-it-works-box ul li:nth-child(1n+3){ margin:0;}*/
	.how-it-works-box ul li:nth-child(2n+1){ clear: both;}
	.how-it-works-box ul li .image{ height:120px; width:120px; margin:0 auto 20px;}
	.how-it-works-box ul li .image span{ height:120px; width:120px;}
	.how-it-works-box ul li .image strong{ height:40px; width:40px; line-height:36px; font-size:18px; margin-top:-20px; margin-left:-20px;}
	
	/* video */
	.video{ height:300px;}
	.video a{ width:90px; height:56px; margin:-28px 0 0 -45px;}
	
	/* inner-banner */
	.inner-banner{ height:300px;}
	.inner-banner h1 { bottom: -10px; line-height: 54px; position: relative;}
	
	/* sub title */
	.sub-title{ font-size: 26px; line-height: 30px; margin: 0 0 30px; padding: 0 0 25px; }
	
	/* about-content */
	.about-content-left{ width:100%; height:auto !important;}
	.about-content-left-inner{ padding:15px 15px;}
	.about-content-left .our-mission{ padding:0 0 0 0;}
	.about-content-left .image-desc{ background-size:50px; padding:6px 0 6px 65px; margin:0 0 15px;}
	.about-content-left .image-desc p{ font-size:24px; line-height:24px;}
	.about-content-left .image-desc br{ display:none;}
	.about-content-left .image-desc p span{ font-size:14px; line-height:24px; margin:0; display:block;}
	.about-content-right{ width:100%; height:auto !important;}
	.about-content-right .our-mission{ padding:15px;}
	.about-content-right .values{ padding:15px;}
	.about-content-right .values p { font-size: 15px; line-height: 26px;}
	
	/* category */
	.category li a{ font-size:17px; line-height:20px; padding:18px 0 16px;}
	.listing-box li{ margin-bottom:15px;}
	.listing-box li .black-btn{ padding:9px 18px 7px; font-size:12px;}
	.listing-box li .listing-box-popup .listing-box-popup-inner div br + a{ margin-top:10px;}
	
	/* pagination */
	.pagination li a{ height:30px; width:30px; line-height:30px; font-size:14px;}
	.pagination li a.next::before{ font-size:12px; margin:-7px 0 0 -4px;}
	.pagination li a.prev::before{ font-size:12px; margin:-7px 0 0 -7px;}
	
	/* breadcrumbs */
	.breadcrumbs{ top:1px; position:static; margin:0 0 20px;}
	.breadcrumbs li{ font-size:13px; line-height:15px; margin:0 28px 0 0;}
	.breadcrumbs li::before{ left:-17px;}
	.breadcrumbs li a{ font-size:13px; line-height:15px; }
	.breadcrumbs li:first-child a{ padding:0 0 0 25px;}
	.breadcrumbs li:first-child a::before{ font-size:16px; line-height:16px;}
	
	/* party-bar */
	.party-bar ul { margin: 0 auto; max-width: 700px; width: 100%;}
	.party-bar .container{ padding-left:20px !important; padding-right:20px !important;}
	.party-bar ul li{}
	.party-bar ul li span{ font-size:14px; padding:10px 25px 12px;}
	.party-bar ul li span::after{ margin:0 0 0 13px;}
	
	/* template category */
	.template-category li a{ font-size:16px; line-height:20px; padding:12px 30px 10px 0;}
	.template-category li.sub > a::after{ top:11px; right:5px;}
	.template-category li ul{ padding:10px 0 10px 15px;}
	.template-category li ul li a { font-size: 14px; line-height: 16px; padding: 7px 0 5px;}
	
	/* login */
	.create-account{ padding:0 2% 0 0;}
	.sign-in{ padding:0 0 0 2%;}
	
	/* event-detail */
	.event-detail-left{ padding:0 2% 0 0;}
	.event-detail-right{ padding:0 0 0 2%;}
	
	/* range-percentage */
	.charity-block { margin: 0 auto 50px; max-width: 400px;}
	.charity-block-left{ width:100%;}
	.charity-block-center{ width:100%; margin:30px 0 40px;}
	.charity-block-right{ width:100%;}
	.charity-block .image{ max-width:350px; margin:0 auto 17px;}
	
	form ul li .input.last a{ margin:12px 0 0 10px; font-size: 16px; height: 16px; line-height: 16px;}
	
	.listing-box li a span em strong{ font-size: 15px; line-height: 18px; padding: 0 10px 15px;}
	
	/* footer */
	footer{ padding:20px 0 0;}
	.footer-logo{ max-width:170px;}
	.footer-menu ul{ padding:10px 0;}
	.footer-menu ul li{ margin:0 14px;}
	.footer-menu ul li a{ font-size:14px;}
	footer p{ padding:10px 0;}
	
	.back-top{ height:40px; width:40px; right:30px;}
	.back-top::before{ font-size:16px; margin:-7px 0 0 -8px;}
	
	.some-fun{ width:600px;}
	
	.loader{ width:27px;}
}
@media (min-width:768px) and (max-width:1024px) {
	#wrapper{ background:#fff; position:relative; z-index:9; left:0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; overflow: hidden;}
	#wrapper.current{ left:-60%;}
	header.current{ left:-60%;}
	#video{ position: absolute;}
	
	header .navigation{ display:none;}	
	.menu-icon{ display:block; margin:12px 0 0 10px;}
	header.active .menu-icon{ margin:3px 0 0 10px;}
	.mobile-nav{ position:absolute; right:0; top:0; width:60%; display: block;}
	.mobile-nav .title{ padding:10px 20px; display:block; color:#000; font-size:18px; line-height:22px; font-family: 'bree_ebextrabold';}
	.mobile-nav ul.mobile-menu{ padding:0 0 20px; margin:0;}
	.mobile-nav ul.mobile-menu li{ padding:0; margin:0; background:none; border-bottom:1px solid #fff; position:relative;}
	.mobile-nav ul.mobile-menu li a{ padding:8px 20px; display:block; font-size:15px; line-height:20px; color:#000; position:relative;}
	.mobile-nav ul.mobile-menu li ul{ display:none; margin:0 0 0 20px;}
	.mobile-nav ul.mobile-menu li ul li{ border:0; border-top: 1px solid #fff;}
	.mobile-nav ul.mobile-menu li ul li a{ padding:6px 20px 6px 10px; font-size:14px;}
	.mobile-nav ul.mobile-menu li em{ width:30px; height:36px; text-align:center; line-height:36px; position:absolute; right:10px; top:0; font-style:normal; color:#000; font-size:20px; cursor:pointer; text-align:center;}
	.mobile-nav ul.mobile-menu li em:before{ content:'+'; position:absolute; line-height:36px; left:0; top:0; height:100%; width:100%;}
	.mobile-nav ul.mobile-menu li.current em:before{ content:'-';}
	.mobile-nav ul.mobile-menu li.active{ background:rgba(246,236,102,0.6);}
	.mobile-nav ul.mobile-menu li.current, .mobile-nav ul.mobile-menu li.active.current{ background:rgba(246,236,102,0.8);}
}

/* 4. large desktop responsive css 1024px to 1199px
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1199px) {	
	h1{ font-size:60px; line-height:50px;}
	h2{ font-size:34px; line-height:38px; margin:0 0 10px;}
	h2 span{ font-size:28px;}
	h3{ font-size:30px; line-height:34px; margin:0 0 30px; padding:0 0 10px;}
	h4{ font-size:24px; line-height:26px; margin:0 0 15px;}
	
	form h3{ margin:0 0 30px;}
	form ul li{ margin:18px 0 0;}
	
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{ padding:14px 20px;}
	textarea{ padding:14px 20px;}
	input[type="submit"], input[type="button"], input[type="reset"]{ padding:18px 30px 16px;}
	label.checkbox{ margin-bottom:10px;}
	button, .black-btn-small, .button{ padding:12px 30px 14px;}
	
	.select-box .customSelect{ padding:14px 20px;}
	.select-box .customSelect::after{ right:20px; top:16px;}
	
	label.title{ font-size: 20px; line-height: 24px; margin: 0 0 10px 15px;}
	label.calendar{ font-size:16px; line-height:16px;}
	label.calendar::after{ right:20px; top:15px;}
	label.time{ font-size:16px; line-height:16px;}
	label.time::after{ right:20px; top:15px;}
	
	.black-btn{ padding:18px 30px 16px;}
	
	.recipients ul.invite-addfields{ margin:0 0 18px;}
	.recipients .add_person_button{ margin:0 0 36px;}
	
	.container{ padding:50px 0; padding-left:10px !important; padding-right:10px !important;}
	
	/* header */
	header{ padding:10px;}
	.logo{ width:150px;}
	header.active .logo { height: 36px; width: 37px;}
	.login-btn{ padding:5px 10px; margin:10px 0 0 15px; font-size:14px;}
	.navigation{ margin:10px 0 0 0;}
	.navigation li a{ padding:7px 12px; font-size:14px;}
	
	.my-account-menu{ margin-left:15px; max-width:118px;}
	.my-account-menu ul{ top:56px;}
	header.active .my-account-menu ul{ top:46px;}
	
	.banner-text form{ max-width:500px;}
	.banner-text p{ font-size:16px;}
	
	
	.mouse-icon{ bottom:90px;}
	.link-button a{ font-size:16px; line-height:20px; padding:20px 10px 17px;}
	
	/* welcome-block */
	.welcome-block{ margin:0 0 50px;}
	.welcome-block-right{ padding:35px 30px 20px;}
	.welcome-block-right .black-btn{ margin:10px 0 0;}
	
	/* how it works */
	.how-it-works .container { padding: 0 20px 0;}
	.how-it-works-box::before{ right:0; border-radius:0; border-right:0; top:70px; display: none;}
	.how-it-works-box ul.container { margin: 0 auto; padding: 0 0 50px;}
	/*.how-it-works-box ul li .image span{ height:140px; width:140px;}
	.how-it-works-box ul li .image strong{ height:50px; width:50px; line-height:46px; font-size:22px; margin-top:-25px;}*/
	
	.how-it-works h2{ text-align: center;}
	.how-it-works-box ul li{ width:33.33%; padding:0 20px; margin:0 0 30px;}
	.how-it-works-box ul li:first-child{ margin:0 0 30px;}
	/*.how-it-works-box ul li:nth-child(1n+3){ margin:0;}*/
	.how-it-works-box ul li:nth-child(3n+1){ clear: both;}
	.how-it-works-box ul li .image{ height:120px; width:120px; margin:0 auto 20px;}
	.how-it-works-box ul li .image span{ height:120px; width:120px;}
	.how-it-works-box ul li .image strong{ height:40px; width:40px; line-height:36px; font-size:18px; margin-top:-20px; margin-left:-20px;}
	
	/* video */
	.video{ height:390px;}
	
	/* inner banner */
	.inner-banner{ height:300px;}
	.inner-banner h1{ bottom: -11px; line-height: 54px; position: relative;}
	
	/* about-content */
	.about-content-left-inner{ padding:20px 25px;}
	.about-content-left .our-mission{ padding:0 0 0 10px;}
	.about-content-left .image-desc{ background-size:50px; padding:6px 0 6px 65px; margin:0 0 15px;}
	.about-content-left .image-desc p{ font-size:24px; line-height:24px;}
	.about-content-left .image-desc br{ display:none;}
	.about-content-left .image-desc p span{ font-size:14px; line-height:24px; margin:0; display:block;}
	.about-content-right .our-mission{ padding:30px;}
	.about-content-right .values{ padding:30px;}
	
	/* category */
	.category li a{ font-size:18px; line-height:22px; padding:20px 0 18px;}
	.listing-box li .black-btn{ padding:11px 20px 9px;}
	
	/* party-bar */
	.party-bar ul { margin: 0 auto; max-width: 940px; width: 100%;}
	.party-bar .container{ padding-left:20px !important; padding-right:20px !important;}
	.party-bar ul li{}
	.party-bar ul li span{ font-size:16px; padding:17px 40px;}
	
	/* breadcrumbs */
	.breadcrumbs{ top:1px;}
	.breadcrumbs li{ font-size:13px; line-height:15px; margin:0 28px 0 0;}
	.breadcrumbs li::before{ left:-17px;}
	.breadcrumbs li a{ font-size:13px; line-height:15px; }
	.breadcrumbs li:first-child a{ padding:0 0 0 25px;}
	.breadcrumbs li:first-child a::before{ font-size:16px; line-height:16px;}
	
	/* template category */
	.template-category li a{ font-size:16px; line-height:20px; padding:15px 30px 13px 0;}
	.template-category li.sub > a::after{ top:15px; right:7px;}
	
	/* login */
	.create-account{ padding:0 2% 0 0;}
	.sign-in{ padding:0 0 0 2%;}
	
	/* event-detail */
	.event-detail-left{ padding:0 3% 0 0;}
	.event-detail-right{ padding:0 0 0 3%;}
	
	/* range-percentage */
	.charity-block { margin: 0 0 70px;}
	.range-percentage { margin: 10px 0 4px;}
	.limit{ margin:25px 0 15px;}
	.final-percentage .percentage{ max-width:100px; padding:10px 10px 8px 15px; border-radius:24px;}
	.final-percentage .percentage *{ font-size:26px; line-height:26px;}
	.final-percentage .percentage::after{ background-size:15px; right:-14px;}
	.final-percentage .percentage-txt span{ font-size:14px; line-height:17px;}
	.final-percentage .percentage-txt span strong{ font-size:26px; line-height:20px;}
	
	.rangeSlider, .rangeSlider__fill{ height:30px;}
	.rangeSlider__handle{ margin:0 0 0 -13px; top: 6px; height:18px; width:18px;}
	
	.listing-box li a span em strong{ font-size: 18px; line-height: 20px; padding: 0 15px 25px;}
	
	/* footer */
	footer{ padding:25px 0 0;}
	.footer-menu ul{ padding:15px 0;}
	.footer-menu ul li{ margin:0 20px;}
}

/* 5. Other media-query
------------------------------------------------------------------------------*/
@media (min-width:1200px) and (max-width:1300px) {
	.container{ padding-left:20px !important; padding-right:20px !important;}
	.party-bar .container{ padding-left:20px !important; padding-right:20px !important;}
	.party-bar ul li span{ font-size:18px;}
}
@media (min-width:1200px) and (max-width:1399px) {
	h2{ font-size:40px; line-height:42px;}
	
	/* header */
	.logo{ width:190px;}
	header.active .logo { height: 40px; width: 41px;}
	.login-btn{ padding:7px 10px; margin:10px 0 0 15px;}
	.navigation{ margin:10px 0 0 0;}
	.navigation li a{ padding:9px 15px;}
	
	.my-account-menu{ margin-left:15px; max-width:118px;}
	.my-account-menu ul{ top:60px;}
	header.active .my-account-menu ul{ top:50px;}
	
	/* welcome-block */
	.welcome-block{ margin:0 0 50px;}
	.welcome-block-right{ padding:35px 30px 20px;}
	.welcome-block-right .black-btn{ margin:15px 0 0;}
	
	/* how it works */
	.how-it-works .container { padding: 0 20px 0;}
	.how-it-works-box::before{ right:0; border-radius:0; border-right:0;}
	.how-it-works-box ul.container { margin: 0 auto; padding: 0 0 50px;}
	
	/* video */
	.video{ height:490px;}
	
	/* about-content */
	.about-content-left-inner{ padding:40px 30px;}
	.about-content-left .our-mission{ padding:0 0 0 65px;}
	.about-content-left .image-desc{ background-size:50px; padding:6px 0 6px 65px; margin:0 0 15px;}
	.about-content-left .image-desc p{ font-size:24px; line-height:24px;}
	.about-content-left .image-desc p span{ font-size:14px; line-height:24px;}
	.about-content-right .our-mission{ padding:40px;}
	.about-content-right .values{ padding:40px;}
}

@media (min-width:1400px) and (max-width:1650px) {	
	h2{ font-size:46px; line-height:48px;}
	
	/* header */
	.logo{ width:220px;}
	header.active .logo { height: 44px; width: 46px;}
	.login-btn{ padding:9px 10px;}
	.navigation li a{ padding:11px 25px;}
	
	.my-account-menu{ max-width:118px;}
	.my-account-menu ul{ top:75px;}
	header.active .my-account-menu ul{ top:55px;}
	
	/* welcome-block */
	.welcome-block{ margin:0 0 70px;}
	.welcome-block-right{ padding:35px 40px 10px}
	
	/* how it works */
	.how-it-works .container { padding: 0 0 0;}
	.how-it-works-box::before{ right:4%;}
	
	/* video */
	.video{ height:490px;}
}