/*
		Theme Name: WP-PPEC  [ Widia ] 
		Author: AtulBhatS
		Author URI: https://atulbhats.com/
		Description: WP-PPUC Wordpress is a theme modified from Twenty Sixteen to suite the college webiste requirements. Not Available for download or purchase.
		Version: 1.0
		License: GNU General Public License v2 or later
		License URI: http://www.gnu.org/licenses/gpl-2.0.html
		Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
		Text Domain: twentysixteen

		This theme, like WordPress, is licensed under the GPL.
		Use it to make something cool, have fun, and share what you've learned with others.
		*/

		@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Kanit&display=swap');

		html,body{
			margin: 0;
			padding: 0;
			font-size: 18px;
		}

		body{
			background: #f5f5f5;
			color : #2c2c2c;
			position: relative;
			font-family: 'Montserrat', sans-serif;
			
		}

		*{
			outline:none;
			box-sizing: border-box;
			position: relative;
		}

		img{
			height: auto;
			max-width: 100%!important;
		}

		main table,main td{
			width: auto!important;
		}

		.home .page img,
		.page .page img{
			width: auto;
			max-height: 100%;
			max-width: 100%;
			height: auto;
		}

		h1,h2,h3,h4,h5,h6,
		.title,.post-title,.entry-title{
			font-family: 'Kanit', sans-serif;
			margin-top: 25px;
		}

		article.page,
		article.post{
			padding: 20px;
		}

		article hr{
			margin-top: 30px;
			margin-bottom: 40px;
		}

		article *{
			color: #111;
		}
		

		article ul,ol{
			padding-left: 40px!important;
		}

		article ul:not(.browser-default) li{
			list-style-type: disc;
		}

		article ol li{
			list-style-type: decimal;
		}

		.page-box{
			background: #fff;
		    border-radius: 10px;
		    border: 1px solid #eee;
		    padding: 25px 25px 25px 15px;
		}

		p{
			font-family: 'Montserrat', sans-serif;
			line-height: 1.8;	
			font-size: 18px;
		}

		.no-margin{
			margin:0!important;
		}

		.no-padding,.no-pad{
			padding:0!important;
		}

		.no-shadow{
			text-shadow: none!important;
			box-shadow: none!important;
		}

		@media (min-width: 768px){
			.container {
			    width: 750px;
			}
		}


		@media (min-width: 992px){
			.container {
			    width: 970px;
			}
		}

		@media (min-width: 1200px){
			.container {
			    width: 1170px;
			}
		}


		.container {
		    padding-right: 15px;
		    padding-left: 15px;
		    margin-right: auto;
		    margin-left: auto;
		}

		.block{
			display: block;
		}
		.inline-block{
			display: inline-block;
		}
		.inline{
			display: inline;
		}
		.small{
			font-size: 80%;
		}
		sups{
		    font-size: 50%;
		    position: relative;
		    top: -5px;
		    margin-left: 2px;
		}

		a:not(.btn):link:hover{
			color : #ff8400;
		}

		.btn{

		}

		.btn-rnd{
			border-radius: 50px;
		}

		.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}.text-justify{text-align:justify}@media only screen and (min-width:1200px){.text-lg-right{text-align:right}.text-lg-center{text-align:center}.text-lg-justify{text-align:justify}.text-lg-left{text-align:left}}@media only screen and (min-width:992px) and (max-width:1199px){.text-md-right{text-align:right}.text-md-center{text-align:center}.text-md-justify{text-align:justify}.text-md-left{text-align:left}}@media only screen and (min-width:600px) and (max-width:991px){.text-sm-right{text-align:right}.text-sm-center{text-align:center}.text-sm-justify{text-align:justify}.text-sm-left{text-align:left}}@media only screen and (max-width:767px){.text-xs-right{text-align:right}.text-xs-center{text-align:center}.text-xs-justify{text-align:justify}.text-xs-left{text-align:left}}

		.aligncenter{
			display: block;
		}
		
		.add-underline{
			position: relative;
			margin-bottom: 30px;
		}

		.add-underline:before{
			content:"";
		    position: absolute;
		    bottom: -15px;
		    left: 0;
		    background: #ddd;
		    height: 2px;
		    width: 100%;
		    max-width: 200px;
		}
		.add-underline:after {
		    content: "";
		    position: absolute;
		    bottom: -15px;
		    left: 0;
		    background: #74143b;
		    height: 4px;
		    width: 100%;
		    max-width: 200px;
		    width: 64px;
		}

		@media only screen and (max-width: 767px){
			.add-underline:before{
				max-width: 59%;
				left: 19%;
			}

			.add-underline:after{
				left: calc(50% - 32px);
			}

			footer img.logo.left{
				float: none!important;
				margin: 0 auto;
			}
		}

		/* Navigation */

		#page > header{
			border-top: 5px solid #f47435;
			background: linear-gradient(to bottom, #000000aa, #0000009a, #0000008a, #0000007a, #0000006a, #0000003a, #00000000);
			padding: 15px;
			position: absolute;
			/*top: 0;*/
			width: 100%;
			left: 0;
			z-index: 100000;
			transition: all 0.1s ease-in;
		}

		header nav{
			background: inherit;
			box-shadow: none;
			color: #000;
		}

		#site-navigation{

		}

		#site-navigation ul > li {
		    display: inline-block;
		}

		#site-navigation ul > li > a{
		    display: inline-block;
		    color:#fff;
		    font-size: 16px;
		    padding: 0 5px;
		}

		#site-navigation ul > li > a:hover,#site-navigation ul > li > a:active,#site-navigation ul > li > a:focus,#site-navigation ul > li > a:active:focus{
			color: #f47435;
			background:transparent;
		}

		ul#menu-navigation-menu > li.menu-item-has-children button {
		    display: none;
		}

		ul#menu-navigation-menu > li.menu-item-has-children .fa-chevron-down {
		    font-size: 8px;
		    padding: 5px;
		    display: inline;
		    position: relative;
		    top: -3px;
		}

		ul#menu-navigation-menu > li.menu-item-has-children > ul {
		    display: none;
		}

		ul#menu-navigation-menu > li.menu-item-has-children > ul li{
			text-align: left;
		}

		ul#menu-navigation-menu > li.menu-item-has-children:hover ul{
			display: inline-block;
		    position: absolute;
		    top: 64px;
		    left: 15px;
		    max-width: 20%;
		    min-width: 300px;
		    background: #ffffffee;
		    border-radius:5px;
		    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
		}

		ul#menu-navigation-menu > li.menu-item-has-children:hover ul > li {
		    display: block;
		    border-bottom: 1px solid #ccc;
		    width: 100%;
		    line-height: 2.5;
		}

		ul#menu-navigation-menu > li.menu-item-has-children:hover ul > li:first-child {
			border-radius: 15px 15px 0 0;
		}		

		ul#menu-navigation-menu > li.menu-item-has-children:hover ul > li:last-child {
			border-radius: 0 0 15px 15px;
			border:none;
		}

		ul#menu-navigation-menu > li.menu-item-has-children ul a{
			color: #2c2c2c;
			text-align: left!important;
		}		

		ul#menu-navigation-menu > li.menu-item-has-children ul a:hover{
			color: #f47435;
		}		

		.search-wrap{
			    position: fixed;
			    height: 100vh;
			    width: 100vw;
			    z-index: 100001;
			    top: 0;
			    left: 0;
			    background: rgba(0,0,0,0.95);
			    display: flex;
			    flex-direction: column;
			    justify-content: space-around;
			    align-items: center;
			    align-content: space-around;
			    vertical-align: middle;
			    transition: 0.3s display ease-in;
			}

		.search-btn{
			border-radius: 50%;
		}

		.search-btn:hover{
			background : transparent;
		}
		.search-wrap > .row {
		    padding: 40vh 10%;
		    display: block;
		    top: 0;
		    left: 0;
		    position: absolute;
		    width: 100%;
		}	

		.search-wrap > .row *{
			font-size: 2em;
		}

		.search-wrap .prefix,
		.search-wrap input{
			color :#aaa;
		}

		.search-wrap .prefix.active{
			cursor: pointer;
			color: #ff8400;
		}

		.search-wrap input:focus,
		.search-wrap input:active,
		.search-wrap input:active:focus,
		.search-wrap input:focus:active{
			color :#fff;
			border-bottom: 1px solid orange!important;
			box-shadow: none!important;
		}

		.search-wrap input {
		    margin: 0!important;
		    width: 100%!important;
		    font-size: 1.2em!important;
		    height: auto!important;
		    padding: 15px 0!important;
		}

		.search-wrap .close {
		    position: absolute;
		    font-size: 5em;
		    top: 1%;
		    right: 4%;
		    opacity: 0.8;
		    z-index: 1;
		    cursor: pointer;
		}

		.search-wrap .input-field .prefix {
		    right: 2%;
		    top: 40%;
		    font-size: 1em;
		}

		/* Footer */


		.site-footer{
			margin-top: 50px;
			margin-bottom: 0;
			padding: 50px 0 0;
			background :url('img/footerbg.svg');
			color: #1c1c1c;
			font-size: 15px;
		}

		footer footer{
			background: none;
			padding: 20px 0;
			margin: 5px 0 0;
			border: 0;
			color : #2c2c2c;
		}

		footer footer .row{
			margin: 0;
		}

		footer .address h6{
			margin-bottom: 2px;
		}

		footer .address p{
			margin: 2px 0 10px;
			font-size: 14px;
		}


		footer .info p,footer .links li{
			margin: 5px auto 20px;
			font-size: 14px;
		}

		footer a{
			color :#1c1c1c;
		}

				
		@keyframes spin{
		  0%   {transform: rotate(0deg);}
		  25%  {transform: rotate(90deg);}
		  50%  {transform: rotate(180deg);}
		  100% {transform: rotate(270deg);}
		}


		/* Landing */

		.landing{
			max-height: 90vh;
			overflow:hidden;
		}

		body:not(.home).page.singular .site-inner,
		body.single.singular .site-inner,
		body.blog .site-inner,
		body.error404 .site-inner,
		body.archive .site-inner,
		body.search .site-inner{
			padding-top: 150px;
		}

		body.page.singular header.main-nav{
			position: fixed;
			top:0;
		}

		.breadcrumbs{
			display: block;
		    display: table;
		    clear: both;
		    padding: 5px;
		    border-radius: 5px;
		    font-size: 10px;
		    margin-bottom: 15px;
		    opacity: 0.8;
		}
		.breadcrumb {
		    color: #555;
		    font-size: 12px;
		    text-transform: uppercase;
		}

		.breadcrumb:before {
		    content: "/";
		    color: #ccc;
		    font-size: 12px;
		}
		.breadcrumb:last-child{
		    color: #000;
		}

		.breadcrumb:before {
		    color: #2c2c2c;
		    font-family: FontAwesome Regular;
		    content: "›";
		    font-size: 10px;
		}


		.single-post nav {
		    background: transparent;
		    box-shadow: none;
		}

		.single-post nav .nav-links > div {
		    display: inline-block;
		}

		.single-post nav .nav-previous a, .single-post nav .nav-next a {
		    color: #fff;
		    display: inline-block;
		    border-radius: 15px;
		    font-size: 10px;
		    padding: 0px 25px;
		    line-height: 1.2;
		    color: #efefef;
		}

		.single-post nav .nav-previous a {
		    background: #e47b45;
		}

		.single-post nav .nav-next a {
		    background: #7d1d4e;
		}

		.single-post nav .nav-previous a p {
		    margin: 0;
		    font-size: 14px;
		    display: inline-block;
		    margin-right: 15px;
		    margin-bottom: 8px;
		}

		.single-post nav .nav-next a p {
		    margin: 0;
		    font-size: 14px;
		    display: inline-block;
		    margin-right: 15px;
		    margin-bottom: 8px;
		}

		.single-post nav .nav-previous a p svg {
		    top: 8px;
		}

		.single-post nav .nav-next a p {
		    margin: 0;
		    font-size: 14px;
		    display: inline-block;
		    margin-right: 15px;
		}

		.single-post nav .nav-next a p svg {
		    top: 8px;
		}

		.single-post nav .nav-links a:hover{
			color: #fff;
		}

		.comments-area .submit {
		    background: linear-gradient(rgb(240, 142, 27), rgb(244, 116, 53));
		    color: #fff;
		    border: none;
		    border-radius: 5px;
		    padding: 15px 25px;
		}

		.comments-area input[type=text], .comments-area textarea {
		    padding: 15px;
		    border-radius: 5px;
		    border: 1px solid #aaa;
		}

		.comments-area h1{
			font-size: 24px;
		}

		.comments-area h2{
			font-size: 20px;
		}

		.comments-area h3,.comments-area h4,.comments-area h5,.comments-area h6{
			font-size: 16px;
		}

		h1.entry-title {
		    font-size: 42px;
		    margin: 30px 0 10px 0;
		}

		.sidebar{
			margin: -20px -25px 0px 0px;
		    box-shadow: none;
		    border-radius: 5px;
		    padding: 15px 15px 100px;
		    background: #fcfcfc!important;
		    border: 1px solid #f9f9f9
		}

		.search-form{
			background: #fafafa;
		    padding: 15px 25px;
		    border-radius: 10px;
		    border: 1px solid #eee;
		}

		.search-form input[type=submit]{
			background: #e47b45;
		    color: white;
		    border: 0;
		    padding: 15px 35px;
		    border-radius: 10px;
		    background: linear-gradient(rgb(240, 142, 27), rgb(244, 116, 53));
		}

		.search-form input[type=submit]:hover{
			background: rgb(244, 116, 53);
		}



		.search-form input[type=submit]:before {
		    content: "\f002";
		    font-family: "Font Awesome 6 Free";
		}



		.blog article,
		.archive article {
		    padding: 15px;
		    border: 1px solid #efefef;
		    border-radius: 10px;
		    margin-bottom: 15px;
		}
		.blog article .entry-title,
		.archive article .entry-title {
		    margin: 0;
		    font-size: 32px;
		    top: 0;
		}
		.blog .entry-footer,
		.archive .entry-footer {
		    background: #fcfcfc;
		    padding: 15px;
		}
		.blog .entry-footer .edit-link,
		.archive .entry-footer .edit-link {
		    float: right;
		}
		.blog .entry-footer > *,
		.archive .entry-footer > * {
		    margin: 5px 0;
		    display: inline-block;
		}
		.blog .entry-title a,
		.archive .entry-title a {
		    color: #ff6c21;
		}
		.blog .entry-footer time
		.archive .entry-footer time {
		    color: #d5056f;
		}

		.singular .entry-footer {
		    display: none;
		}

		.home figure.princi{
			width: 50%;
			border-radius: 10px;
			float: left;
			margin: 0 auto;
			float: none;
			max-height: 250px;
			height: 100%;
		}

		@media (max-width:500px){
			.home figure.princi{
				width: 80%;
			}
		}

		.site-footer{
			overflow-x:hidden;
		}

		article.hentry footer {
		    font-size: 12px;
		    background: #f1f1f1 !important;
		    padding: 5px !important;
		    border-left: 5px solid #e5e5e5;
		}

		.post-list.post-thumbnail figure {
		    margin: 0;
		    height: 235px;
		    display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    align-content: stretch;
		    justify-content: space-evenly;
		    align-items: center;
		    overflow: hidden;
		    border-radius: 10px 10px 0 0;
		    background: #f5f5f5;
		}

		.post-box .post-list.post-title {
		    min-height: 50px;
		}

		
		.gallery > figure {
		    display: inline-block;
		    box-sizing: border-box;
		    margin: 0;
		    padding: 5px;
		}

		.gallery-columns-3 > figure {
		    width: 32.2%;
		}

		.gallery-columns-2 > figure {
		    width: 49.2%;
		}

		.gallery-columns-4 > figure {
		    width: 24.2%;
		}

		.gallery-columns-5 > figure {
		    width: 19.2%;
		}