/* Custom CSS Styles for Daang Matuwid Page */

/* GENERAL STYLES
================================================== */

.edsa-day #main {
	padding:0;
}

.edsa-day #main section {
	padding: 40px 0;
}

.section-title {
	font-family: 'Roboto Condensed', sans-serif;
	color: #303030;
	text-align: center;
	margin-bottom: 60px;
}

.row.full-row {
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {

}

a {
	-webkit-transition: all .4s; /* Safari */
    transition: all .4s;
}

.hidden {
    visibility: hidden;
}

.visible {
	visibility: visible;
}

.backtop {
	position: absolute;
	z-index: 100;
	padding: 16px 22px;
	cursor: pointer;
    background-color: #FFE12F;
    color: white;
	bottom: 20px;
	right: 40px;
	font-size: 30px;
}

.og-masthead {
    width: 100%;
    text-align: center;
    padding-top: 40px;
    margin-bottom: 60px;
}

.og-masthead img {
	width: 300px;
}

.backtop:hover {
	background: #000!important;
	color: white;
}

.bottom-menu {
	min-height: 100%!important;
	z-index: 1!important;
	visibility: hidden;
}

.overlay {
	z-index: 98!important;
}

.timeline-wrap .slick-dots li button:before {
	font-size: 14px!important;
	color: #0F749B!important;
}

.timeline-wrap .slick-dots {
    bottom: -72px!important;
}

.banner-icon {
	-webkit-animation-duration: .2s;
}

.intro-text-wrapper {
	-webkit-animation-duration: .2s;
}

.livestream-wrapper {
	-webkit-animation-delay: .4s;
	-webkit-animation-duration: .2s;
}

.banner-text a {
	-webkit-animation-delay: .6s!important;
	-webkit-animation-duration: .4s;
}

.button-count-7 {
	-webkit-animation-delay: .2s!important;
}

.button-count-5 {
	-webkit-animation-delay: .4s!important;
}

.button-count-4 {
	-webkit-animation-delay: .6s!important;
}

.button-count-1 {
	-webkit-animation-delay: .8s!important;
}

.button-count-3 {
	-webkit-animation-delay: 1s!important;
}

.button-count-8 {
	-webkit-animation-delay: 1.2s!important;
}

.button-count-6 {
	-webkit-animation-delay: 1.4s!important;
}

/* BANNER STYLES
================================================== */

.edsa-day #masthead-full {
	height: calc(100vh - 60px);
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: fixed;
	background-color: #FFD615;
}

.edsa-day .banner-text {
	margin-top: 2%;
	text-align: center;
}

.banner-text .fa{
  font-size: 60px;
  color: #FFD615;
}

.banner-text .fa:hover{
	-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}

.edsa-day #masthead-full-content{
	width: 100%;
}


/* RESOURCES
================================================== */

#section-second {
	padding: 80px 0 50px 0!important;
}

.image-button {
	margin-bottom: 30px;
}

.image-button-wrap {
	background: black;
	overflow: hidden;
	position: relative;
}

.image-wrap {
	/*overflow: hidden;*/
}

.image-button-wrap .image-wrap:hover img {
	transform: scale(1.1);
	opacity: 1;
}

.image-button-wrap .image-wrap:hover .image-button-title {
	top: -51px;
}

.image-button-wrap .image-wrap:hover .image-button-title.five-line {
	top: -195px;
}

.image-button-wrap .image-wrap:hover .image-button-title.three-line {
	top: -123px;
}

.image-button-bg {
    opacity: .5;
    -webkit-transition: transform 3s, opacity .5s ease-in;
    width: 100%;
}

.image-button-title {
    position: absolute;
    top: 0;
    left: 0px;
    color: white;
    font-size: 64px;
    opacity: 1;
    z-index: 5;
    -webkit-transition: top .5s;
    padding: 15px;
    text-align: center;
    width: 100%;
    top: calc(50% - 25px);
}

.image-button-title.five-line {
    top: calc(50% - 105px);
}

.image-button-title.three-line {
    top: calc(50% - 69px);
}

.image-button-title h4 {
	margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
	color: white;
	font-size: 40px;
}



/* Introduction
================================================== */

#section-first {
	background-color: #ffd415;
	padding: 40px 0px!important;
}

#section-first .intro-text-wrapper {
	
}

#section-first .intro-text h2, #section-first .livestream h2 {
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	margin-bottom: 20px;
}

#section-first .intro-text p, .livestream p {
	color: #666;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}

.livestream-wrapper img {
	width: 80%;
}


/* Acknowledgement
================================================== */

#section-third {
	background: #ffd415;
}

#section-third h2 {
	margin-bottom: 20px;
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
}

#section-third p {
	color: #666;
	font-family: 'Roboto', sans-serif;
}

/* Related Readings
================================================== */

#section-fourth {
	background: #231f20;
}

#section-fourth h2 {
	margin-bottom: 20px;
}

#section-fourth h2 {
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
}

#section-fourth ul li {
	font-family: 'Roboto', sans-serif;
	color: white;
}


/* ANIMATION STYLES
================================================== */

.iblock-2 {
	-webkit-transition-delay: .05s!important;

}

.iblock-3 {
	-webkit-transition-delay: .10s!important;

}

.iblock-4 {
	-webkit-transition-delay: .15s!important;

}

.iblock-5 {
	-webkit-transition-delay: .20s!important;

}

.iblock-6 {
	-webkit-transition-delay: .25s!important;

}

.iblock-7 {
	-webkit-transition-delay: .30s!important;

}

.iblock-8 {
	-webkit-transition-delay: .35s!important;

}

.iblock-9 {
	-webkit-transition-delay: .40s!important;

}

/* INNER PAGE STYLE */

.innerpage-banner {
    height: 70vh!important;
}

.innerpage-banner img.edsa-logo {
    width: 40%!important;
    margin-bottom: 32px!important;
}

.innerpage-banner h2{
    font-size: 40px!important;
    font-family: 'Roboto Condensed', sans-serif;
}

.edsa-inner-page {
	padding: 40px 0;
}

/* SUBPAGE 1 */

.subpage1 .innerpage-title {
	font-size: 60px!important;
}


.subpage1 #section-main .large-7 {
	margin-bottom: 20px;
}

.subpage1 .image-title-text h4 {
	font-family: 'Roboto Condensed', sans-serif;
	color: white;
	font-size: 38px;
}

.subpage1 .image-title-text p {
	font-family: 'Roboto', sans-serif;
	color: white;
	margin-bottom: 0;
}

.subpage1 .image-container {
    background: black;
    overflow: hidden;
    position: relative;
}

.subpage1 .image-container .image-wrapper:hover img{
	transform: scale(1.1);
	opacity: 1;
}

.subpage1 .image-container .image-wrapper:hover .text-wrap{
	transform: scale(.5);
	opacity: 0;
}

.subpage1 .image-title-text {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;	
    color: white;
    font-size: 64px;
    opacity: 1;
    z-index: 5;
    -webkit-transition: top .5s;
    padding: 15px 20px;
    text-align: center;
    width: 100%;
    height: 280px;
    line-height: 280px;
}

.subpage1 .text-wrap {
	display: inline-block;
	-webkit-transition: transform 1s, opacity .5s ease-in;
}

.subpage1 .image-src{
    opacity: .5;
    -webkit-transition: transform 2s, opacity .5s ease-in;
    width: 100%;
}

/* SUBPAGE 2 */

.subpage2 .innerpage-title, .edsa-gallery .innerpage-title {
	font-size: 60px!important;
}


.subpage2 #section-main .large-6 {
	padding: 20px;
}

.subpage2 .image-title-text h4 {
	font-family: 'Roboto Condensed', sans-serif;
	color: white;
	font-size: 38px;
}

.subpage2 .image-title-text p {
	font-family: 'Roboto', sans-serif;
	color: white;
	margin-bottom: 0;
}

.subpage2 .image-container {
    background: black;
    overflow: hidden;
    position: relative;
}

.subpage2 .image-container .image-wrapper:hover img{
	transform: scale(1.1);
	opacity: 1;
}

.subpage2 .image-container .image-wrapper:hover .text-wrap{
	transform: scale(.5);
	opacity: 0;
}

.subpage2 .image-title-text {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;	
    color: white;
    font-size: 64px;
    opacity: 1;
    z-index: 5;
    -webkit-transition: top .5s;
    padding: 15px 20px;
    text-align: center;
    width: 100%;
    height: 280px;
    line-height: 280px;
}

.subpage2 .text-wrap {
	display: inline-block;
	-webkit-transition: transform 1s, opacity .5s ease-in;
}

.subpage2 .image-src{
    opacity: .5;
    -webkit-transition: transform 2s, opacity .5s ease-in;
    width: 100%;
}


/* TABS SMOOTH EFFECTS */

.tabs-content {
	*zoom: 1;
	margin-bottom: 1.5rem; 

	/* Customized */
	display:block:important!
	opacity: 0;
}
  /* Customized */
  @-webkit-keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  @keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  
.tabs-content:before, .tabs-content:after {
	content: " ";
	display: table;
}

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

.tabs-content > .content {
	display: none;
	float: left;
	padding: 0.9375rem 0;
}

.tabs-content > .content.active {
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
	opacity: 1;
	display: block;
}

/* MENU STYLES
================================================== */

.menuclick p {
	color: white;
	font-family: 'Montserrat', sans-serif;
}

.menuclick img {
	width: 50%;
	margin-top: 20%;
}

.nav-toggle:hover {
	background: #174377!important;
}

/* BANNER STYLES
================================================== */

/*// Small screens*/
@media only screen { } /* Define mobile styles */

@media (max-height: 480px) {

}

@media (max-height: 40.063em) {

}

@media (max-height: 48em) {

}

@media only screen and (max-width: 40em) {

		.og-masthead {
			padding-top: 20px;
			margin-bottom: 20px;
		}

		.og-masthead img {
			width: 70%;
		}

		.edsa-day .banner-text p {
			font-size: 14px;
			line-height: 16px;
			margin-bottom: 10px!important;
			letter-spacing: 0px;
		}

		.subpage1 .banner-text h2.innerpage-title, .subpage2 .banner-text h2.innerpage-title, .edsa-gallery .banner-text h2.innerpage-title {
		    font-family: 'Roboto Condensed', sans-serif;
		    font-size: 34px!important;
		}

		.subpage1 .image-title-text {
			height: 140px;
			line-height: 100px;
		}

		.subpage1 .image-title-text h4 {
			font-size: 24px;
		}

		.subpage1 .image-title-text p {
			display: none;
		}

		.edsa-day .banner-text a {
		    display: block;
    		padding: 8px;
			margin-top: 10px;
    		font-size: 14px;
    		margin-right: 0;
    		text-align: center;
		}

		.edsa-day-message h1 {
			font-size: 40px;
		}

		.edsa-day-message h4 {
			font-size: 26px;
			line-height: 30px;
		}

		.edsa-day-message p {
			font-size: 24px;
			line-height: 34px;
		}

		#section-first {
			padding: 0!important;
		}

		#section-first .intro-text-wrapper {
		    padding: 40px 10px;
		}

		#section-second {
			padding: 40px 0!important;
		}
	
	    .overlay-link {
	        width: 50%!important;
	        margin-bottom: 40px;
	        padding: 0;
	    }

	    .menuclick {
	        width: 136px!important;
	        height: 136px!important;
	    }

	    .menuclick .fa {
	        line-height: 136px!important;
	        font-size: 40px!important;
	    }

	    .social-icons a {
	        margin-right: 4px;
	    }

	    .nav-toggle {
	        top: 12px!important;
	        right: 13px!important;
	    }

	   	.backtop {
	        bottom: 12px!important;
	        right: 13px!important;
	        padding: 8px 14px;
	        background: #fedf44;
	    }

	} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/*// Medium screens*/
@media only screen and (min-width: 40.063em) {

		.edsa-day .banner-text, .subpage1 .banner-text {
		    margin-top: 3%;
		}

		.edsa-day .edsa-logo {
			width: 40%;
		}

		.edsa-gallery .banner-text .edsa-logo, .subpage1 .banner-text .edsa-logo, .subpage2 .banner-text .edsa-logo {
			width: 32%!important;
		}

		.subpage1 #section-main, .subpage2 #section-main {
			padding: 40px 50px!important;
		}

		.edsa-day .banner-text a {
		    display: block;
		}

		.edsa-day .livestream img {
			width: 100%;
		}

		.og-masthead {
		    padding-top: 30px;
		    margin-bottom: 30px;
		}

		.edsa-day .image-wrap img {
			width: 100%;
		}

		@media screen and (orientation:portrait) {
			
			.edsa-day .banner-text {
			    margin-top: 20%;
			}

			.subpage1 .banner-text, .subpage2 .banner-text, .edsa-gallery .banner-text {
				margin-top: 10%;
			}

			.subpage1 #section-main {
				padding: 40px 50px!important;
			}

			.edsa-gallery .innerpage-title, .subpage2 .innerpage-title {
				font-size: 60px!important;
			}

			.edsa-day .edsa-logo {
				width: 60%;
			}

			.edsa-day .banner-text a {
			    display: block;
			}

			.edsa-day .livestream img {
				width: 100%;
			}

		}



	} /* min-width 641px, medium screens */



@media only screen and (min-width: 40.063em) and (max-width: 64em) {


		@media screen and (orientation:portrait) {
			
			.og-masthead img {
				width: 300px;
			}

			.edsa-day .banner-text p {
				font-size: 26px!important;
				line-height: 32px!important;
			}

		}

	} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/*// Large screens*/
@media only screen and (min-width: 64.063em) {


		.edsa-day .banner-text {
			margin: 0;
		}

		.subpage1 .banner-text, .subpage2 .banner-text, .edsa-gallery .banner-text {
			margin-top: 6%;
		}

		.edsa-day .og-masthead img {
			width: 240px;
		}

		.edsa-day .banner-text .fa {
		    font-size: 50px;
		}

		.edsa-day .og-masthead {
		    padding-top: 20px;
		    margin-bottom: 20px;
		}
		
		.edsa-day .edsa-logo {
			width: 100%;
		}


	} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {



	} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/*// XLarge screens*/
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {

		.og-masthead {
		    padding-top: 40px!important;
		    margin-bottom: 60px!important;
		}

	}

	} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/*// XXLarge screens*/
@media only screen and (min-width: 120.063em) {} /* min-width 1921px, xxlarge screens */


/*Media Query for height*/

@media screen and (max-height: 720px) {

	h2 {
	    margin-bottom: 20px!important;
	    font-size: 30px!important;
	    -webkit-font-smoothing: antialiased;
	}

	.edsa-day #section-second .row, #masthead-full-content .row, .edsa-inner-page .row {
		max-width: 60rem;
	}

	.edsa-day .banner-text {
		margin-top: 20px!important;
	}

	.edsa-day #section-first p {
		font-weight: 300;
		-webkit-font-smoothing: antialiased;
	}

	.edsa-day .og-masthead {
		padding-top: 22px!important;
	}

	.edsa-day .og-masthead img {
	    width: 220px!important;
	}

	.edsa-day .edsa-logo {
	    width: 90%;
	    display: block!important;
    	margin: 0 auto!important;
	}

	.edsa-day .banner-text .fa {
	    font-size: 50px!important;
	}

	.image-button-title.five-line {
	    top: calc(50% - 72.5px);
	}

	.image-button-title.three-line {
	    top: calc(50% - 49.5px);
	}

	.image-button-title h4 {
		font-size: 26px;
	}

}