/*
Theme Name:		Procliam St
Theme URI:		
Author:			Lei Ma
Author URI:		
Version:		1.0
*/

/*-----------------------------------------------------------------------------------
	= Table of Contents

	1. = Fonts
	2. = Body, Typography and some main Elements
	3. = Structure
	4. = Header styling
	5. = Home Page styling
	6. = Page styling
	7. = Blog Page styling
	8. = Videos Page styling
	9. = Calendar Page styling
	
	
	
/*-----------------------------------------------------------------------------------*/
/* 1. = Fonts
/*-----------------------------------------------------------------------------------*/

@import url(css/font-awesome.min.css);
@import url(css/fonts.css);



/*-----------------------------------------------------------------------------------*/
/* 2. = Body, Typography and some main Elements
/*-----------------------------------------------------------------------------------*/

html * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
body { font-size:14px; color:#333; font-family:'GothamBook', Arial, Helvetica, sans-serif; overflow-x:hidden; }
input[type=text], textarea { -webkit-appearance:none; border-radius:0; }
input, textarea, select, label { font-family:Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { padding:0; line-height:1.2; margin:0; font-family:'GothamBlack', Arial, Helvetica, sans-serif; }
h1 { font-size:30px; }
h2 { font-size:30px; }
h3 { font-size:20px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
img { display:block; max-width:100%; height:auto; }
ul,ol { margin:0; padding:0; list-style:none; }
a, a:visited, a:active { color:#333; text-decoration:none; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out; }
a:focus, a:hover { color:#333; text-decoration:none; outline:0; }
p { margin:0 0 15px 0; line-height:1.5;}
.animate { transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
.button { text-align:center; font-size:17px; color:#333; background:rgba(255,255,255,0.8); width:215px; padding:7px 0; border-radius:20px; display:inline-block; text-shadow:none; }
.button.dark { background:#524A48; color:#FFF; }
.button:hover { opacity:0.8; }



/*-----------------------------------------------------------------------------------*/
/* 3. = Structure
/*-----------------------------------------------------------------------------------*/

.container { width:950px; margin:0 auto; padding-left:0; padding-right:0; }
.parallax { background-position:center top; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; }
.view-mobile { display:none; }


/*-----------------------------------------------------------------------------------*/
/* 4. = Header styling
/*-----------------------------------------------------------------------------------*/

#header { height:680px; position:relative; }
#header .header-top { background:rgba(255,255,255,0.5); position:relative; z-index:1000; }
#header .header-top nav { float:left; padding:23px 0 22px 0; }
#header .header-top nav li { float:left; padding-right:5px; margin-right:5px; border-right:1px solid #333; line-height:1; }
#header .header-top nav li a { color:#333; font-size:14px; text-transform:uppercase; letter-spacing:-1px; font-family:'GothamBook', Arial, Helvetica, sans-serif; }
#header .header-top nav li:last-child { margin-right:0; padding-right:0; border:none; }
#header .header-top nav li a:hover, #header .header-top nav li.current_page_item a { color:#999; }
#header .header-top .arrow { float:right; position:relative; background:rgba(255,255,255,0.8); width:48px; height:60px; display:block; }
#header .header-top .arrow i { position:absolute; background:url(images/nav-arrow.png) no-repeat; width:25px; height:14px; display:block; left:50%; top:50%; margin:-6px 0 0 -12.5px; }

#header .sub-nav { position:absolute; left:0; top:60px; display:none; background:rgba(255,255,255,0.8); z-index:100; width:100%; padding:15px 0 30px 0; }
#header .sub-nav .one-fourth { width:25%; float:left; padding-right:20px; }
#header .sub-nav h3 { font-family:'GothamBold', Arial, Helvetica, sans-serif; font-size:14px; text-transform:uppercase; margin:0; }
#header .sub-nav li.current_page_item a, #header .sub-nav li a:hover { color:#999; }

#header .header-content { padding-top:30px; position:relative; z-index:10; }
#header .header-content .social-links { float:left; }
#header .header-content .social-links li { float:left; margin-right:12px; }
#header .header-content .social-links li a:hover { opacity:0.8; }
#header .header-content .social-links li img { height:40px; width:auto; }
#header .header-content .home-content img { margin:105px auto 50px auto; }
#header .header-news { float:right; background:rgba(255,255,255,0.8); }
#header .header-news img { float:left; }
#header .header-news .header-news-content { float:left; width:170px; padding:10px; text-align:center; }
#header .header-news .header-news-content p { margin:0; }
#header .header-news .header-news-content strong { text-transform:uppercase; }

#header .sections-content { font-size:22px; z-index:100; position:relative; color:#FFF; text-align:center; margin:240px auto 0 auto; vertical-align:middle; }
#header .sections-content h1 { margin:0; }
#header h1 { color:#FFF; text-align:center; margin:0; font-size:80px; }
#header .event-title { margin:240px 0 0 0; }

#home-instagram .loading { margin:50px auto 0 auto; opacity:0; width:64px; height:64px; background:url(images/loading-light.svg) no-repeat; background-size:100% 100%; }
#home-instagram .loading.active { opacity:1; }

body.tax-event-category #header { background-image:url(images/header-bg.jpg) !important; }
body.tax-vodep-category #header { background-image:url(images/header-bg.jpg) !important; }

body.page-id-9 #blog-wrapper h1 { text-align:center; }
body.page-id-9 .entry p { font-size:22px; text-align:center; }



/*-----------------------------------------------------------------------------------*/
/* 5. = Home Page styling
/*-----------------------------------------------------------------------------------*/

.section { padding:80px 0 60px 0; text-align:center; }
.section p { font-size:22px; max-width:780px; margin:0 auto 30px auto; }
.section h2 { text-transform:uppercase; max-width:780px; margin-left:auto; margin-right:auto; }
.section.background-image { color:#FFF; background-position:center top; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; }
.section.street-retreat { padding:150px 0 110px 0; text-shadow:0 2px 3px #333; }
.section.video { padding:90px 0; }
.section iframe { max-width:100%; margin:20px auto 0 auto; }
.section.instagram { padding:100px; background-attachment:fixed; }
.section.instagram h2 { margin-bottom:30px; }
.section.instagram ul { max-width:650px; margin:0 auto; }
.section.instagram li { display:inline-block; margin:0 8px 17px 8px; width:140px; }
.section.instagram li img { width:100%; height:auto; margin:0; }

.section .light { color:#FFF; }

.section img { margin:0 auto 60px auto; }
.section .small { font-size:16px; padding:30px 80px; line-height:1.5; max-width:780px; margin:0 auto 30px auto; }

.post-list { margin:70px 0 0 0; text-align:center; }
.post-list article { margin:0 38px 80px 38px; display:inline-block; }
.post-list article img { margin:0 auto 30px auto; }
.post-list article .button { width:100%; font-size:17px; background:#524A48; color:#FFF; }
.post-list article h3 { font-size:17px; font-family:'GothamBold', Arial, Helvetica, sans-serif; line-height:1.7; }
.post-list article p { font-size:17px; line-height:1.7; }

.section.background-image .post-list article .button { color:#333; background:rgba(255,255,255,0.8); }

.video-bg { position:absolute !important; top:0; left:0; z-index:2; height:680px; overflow:hidden; }
.video-bg video { position:absolute; top:0; left:0; overflow:hidden; min-height:100%; min-width:100%; background-size:cover; }

#big-video-wrap { position:absolute; top:0; left:0; z-index:2; height:680px; overflow:hidden; width:100%; }
#big-video-vid { top:0 !important; }

#section-form { background-image:url(images/event-form.jpg); }
.wpcf7-form { max-width:600px; margin:0 auto; }
.wpcf7-form h2 { text-align:center; color:#FFF; margin:0 0 40px 0; }
.wpcf7-form .field { margin:0 0 30px 0; }
.wpcf7-form .field label { display:block; float:left; color:#FFF; font-weight:400; width:48%; text-align:right; margin:3px 0 0 0; font-size:18px; }
.wpcf7-form .field input[type=text],
.wpcf7-form .field input[type=email] { font-family:'GothamBook', Arial, Helvetica, sans-serif; border:none; background:rgba(255,255,255,0.7); color:#333; font-size:18px; width:48%; height:30px; line-height:30px; padding:0 10px; float:right; }
.wpcf7-form .field textarea { font-family:'GothamBook', Arial, Helvetica, sans-serif; resize:none; border:none; background:rgba(255,255,255,0.7); color:#333; font-size:18px; width:48%; height:150px; padding:5px 10px; float:right; }
.wpcf7-form .text-field { margin-top:-20px; }
.wpcf7-form .text-field p { font-size:16px; margin:0; text-align:right; }
.wpcf7-form .field input[type=submit] { text-align:center; font-size:17px; border:none; font-size:18px; cursor:pointer; color:#333; background:rgba(255,255,255,0.8); width:215px; margin:0 auto; padding:7px 0; border-radius:20px; display:inline-block; text-shadow:none; }
.wpcf7-form .field input[type=submit]:hover { opacity:0.8; }
.wpcf7-form .wpcf7-response-output { padding:20px 30px; max-width:600px; }
.wpcf7-form .wpcf7-response-output a { color:#FFF; text-decoration:underline; }

#section-event { background:#383838; color:#FFF; }
#section-event h2 { margin:0 0 30px 0; max-width:none; }
#section-event a { color:#FFF; text-decoration:underline; }




/*-----------------------------------------------------------------------------------*/
/* 6. = Page styling
/*-----------------------------------------------------------------------------------*/

body.page #header { background:url(images/header-bg.jpg) no-repeat center top / cover; background-attachment:fixed; height:auto; height:680px; }

body.error404 #header { background:url(images/header-bg.jpg) no-repeat center top / cover; background-attachment:fixed; height:900px; }
.page404-content { padding:100px 0; text-align:center; }
.page404-content h1 { margin:0 0 50px 0; }

.page-content { padding:30px 0 50px 0; }



/*-----------------------------------------------------------------------------------*/
/* 7. = Blog Page styling
/*-----------------------------------------------------------------------------------*/

.blog-featured { text-align:center; color:#FFF; padding:120px 0 0 0; }
.blog-featured h2 { margin:0 0 15px 0; }
.blog-featured .date { font-size:17px; }
.blog-featured .date a { color:#FFF; }
.blog-featured .date a:hover { text-decoration:underline; }

#blog-wrapper { padding-top:50px; padding-bottom:50px; }
#blog-wrapper .main { float:left; width:610px; }
#blog-wrapper .main article { font-size:17px; margin-bottom:50px; }
#blog-wrapper .main .post-thumbnail { margin:0 0 20px 0; max-width:100%; display:block; }
#blog-wrapper .main article .date { margin:0 0 10px 0; color:#666; }
#blog-wrapper .main article .date a { color:#666; }
#blog-wrapper .main article .date a:hover { text-decoration:underline; }
#blog-wrapper .main article p { margin:0 0 30px 0; }
#blog-wrapper > h1 { text-align:center; }


.wp-pagenavi span, .wp-pagenavi a { display:inline-block; vertical-align:top; margin-right:10px; }
.wp-pagenavi .current { color:#999; }

#blog-wrapper aside { float:right; width:300px; }
#blog-wrapper aside .sidebar-widget { margin:0 0 70px 0; }
#blog-wrapper aside .sidebar-widget .widget-title { margin:0 0 10px 0; }
#blog-wrapper aside .widget-social-buttons li { margin:0 0 20px 0; }
#blog-wrapper aside .widget-social-buttons a { color:#666; display:block; padding-left:60px; line-height:40px; }
#blog-wrapper aside .widget-social-buttons li.twitter a { background:url(images/icon-twitter-dark.png) no-repeat left center; }
#blog-wrapper aside .widget-social-buttons li.facebook a { background:url(images/icon-facebook-dark.png) no-repeat left center; }
#blog-wrapper aside .widget-social-buttons li.instagram a { background:url(images/icon-instagram-dark.png) no-repeat left center; }
#blog-wrapper aside .widget-social-buttons li.youtube a { background:url(images/icon-youtube-dark.png) no-repeat left center; }
#blog-wrapper aside .widget-social-buttons li:last-child { margin:0; }
#blog-wrapper aside .widget-recent-posts .thumb img { float:left; width:80px; }
#blog-wrapper aside .widget-recent-posts .text { margin-left:95px; }
#blog-wrapper aside .widget-recent-posts li { margin:0 0 15px 0; }
#blog-wrapper aside .widget-recent-posts li:last-child { margin:0; }
#blog-wrapper aside .widget-recent-posts .date { margin:0; color:#666; }
#blog-wrapper aside .widget-recent-posts .date a { color:#666; }
#blog-wrapper aside .widget-recent-posts .date a:hover { text-decoration:underline; }

.entry p a { color:#FF0000; }



/*-----------------------------------------------------------------------------------*/
/* 8. = Videos Page styling
/*-----------------------------------------------------------------------------------*/

body.page-template-page_videos #header { min-height:680px; }
#video-wrapper { margin:50px auto 0 auto; text-align:center;  }
.video-list { margin:0; }
.video-list article { width:250px; vertical-align:top; display:inline-block; margin:0 25px 50px 25px; }
.video-list article .video-thumbnail { display:block; margin:0 0 15px 0; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.video-list article h3 { margin:0 0 10px 0; }
.video-list article .category { margin:0; }
.video-list article:nth-child(3n) { clear:both; }
.video-list article a { display:block; }
#video-wrapper .more { margin:0 0 80px 0; }
#video-wrapper .loading { margin:10px auto 40px auto; opacity:0; width:64px; height:64px; background:url(images/loading-dark.svg) no-repeat; background-size:100% 100%; }
#video-wrapper .loading.active { opacity:1; }


#video-wrapper h1 { margin:0 0 50px 0; }
body.tax-video-category #header { background:url(images/header-bg.jpg) no-repeat center top / cover; background-attachment:fixed; height:auto; min-height:680px; }



/*-----------------------------------------------------------------------------------*/
/* 9. = Calendar Page styling
/*-----------------------------------------------------------------------------------*/

#section-calendar { background-position:center center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; padding:70px 0 200px 0; }
#section-calendar .title { margin:0 0 20px 0; }
#section-calendar .title h1 { font-size:60px; letter-spacing:15px; margin:0 0 5px 0; }
#section-calendar .title h2 { margin:0; max-width:none; }

#section-calendar .calendar-item { max-width:450px; margin:0 auto 20px auto;; }
#section-calendar .calendar-item h3 { font-family:'GothamBold', Arial, Helvetica, sans-serif; margin:0 0 2px 0; }
#section-calendar .calendar-item p { background:#000; color:#FFF; width:100%; margin:0 0 15px 0; padding:3px 20px 4px 20px; font-size:16px; }

#sb_instagram .sbi_info p { color:#FFF; }
#sb_instagram .sbi_more { color:#FFF; }