/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

###	CLIENT			: Bidhannagar College                                      

###	AUTHOR			: Arindam Chakraborty                                                       

###	CREATED ON		: 12.04.2025

###	LAST UPDATED ON	: 08.08.2025

###	PURPOSE			: CSS styling for screen over 1081 pixels for Home Page Specific Elements

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

	

/*##############################################################################################################

###	Page Banner Section

################################################################################################################*/	

	.home-banner-wrapper

	{

		position			: relative;

		float				: left;

		box-sizing			: border-box;

		width				: 100%;

		height				: auto;

		margin				: 0px;

		background-color	: #333;		

		display				: flex;

		flex-wrap			: nowrap;		

		border-bottom		: 2px solid #37291c;

	}

	.home-banner

	{

		flex				: 1;

		position			: relative;

		height				: auto;

		padding				: 0;

		overflow			: hidden;

	}

	.home-banner-frame

	{

		position			: relative;

		width				: 100%;

		height				: auto;

		//max-height			: 240px;

		padding				: 0px;

		overflow			: hidden;

	}

	.home-banner-frame img

	{

		display				: block;

		width				: 100%;

		height				: auto;

	}

	.home-banner-overlay

	{

		position			: absolute;

		box-sizing			: border-box;

		top					: 0;

		left				: 0;

		bottom				: 0;

		right				: 0;

		background-color	: rgba(0,0,0,0.4);

		z-index				: 990;

	}

	.home-banner-overlay .home-banner-text

	{

		position			: relative;

		width				: auto;

		height				: auto;

		display				: inline-block;

		top					: 50%;

		left				: 50%;

		text-align			: center;

		transform			: translate(-50%,-50%);

		font-family			: cambria;

		font-size			: 2.6rem;

		font-weight			: 600;

		color				: #f1eee9;

		text-shadow			: 1px 1px 2px #222;

	}

	.home-banner-overlay .home-banner-text a,

	.home-banner-overlay .home-banner-text span

	{

		position			: relative;

		box-sizing			: border-box;

		display				: inline-block;

		width				: auto;

		height				: 40px;

		margin				: 0;

		padding				: 0 10px;

		font-family			: cambria;

		font-size			: 3.0rem;

		font-weight			: 600;

		color				: #f1eee9;

		text-shadow			: 1px 1px 2px #222;

	}

	.home-banner-overlay .home-banner-text a

	{

		float				: left;

		padding				: 0;

		text-align			: center;

		color				: #fff;

		text-decoration		: none;

	}

	.home-banner-overlay .home-banner-text a:after

	{

		content				: "/";

		position			: relative;

		margin				: 0 5px;

		display				: inline-block;

		width				: auto;

	}

	.home-banner-overlay .home-banner-text a:hover

	{

		color				: #44def9;

	}

	.home-banner-overlay .home-banner-text a i

	{

		position			: relative;

		display				: block;

		top					: 50%;

		transform			: translateY(-50%);

	}

	.home-banner-overlay .home-banner-text span

	{

		float				: left;

	}

	

	.home-banner #home-banner-control

	{

		position			: absolute;			

		left				: 50px;

		bottom				: 20px;

		z-index				: 999;

	}

	.home-banner #home-banner-control .home-banner-control-bttn

	{

		position			: relative;

		box-sizing			: border-box;

		float				: left;

		display				: block;

		width				: 60px;

		height				: 40px;

		text-align			: center;

		line-height			: 40px;

		margin-right		: 3px;

		z-index				: 1000;

		font-size			: 24px;

		font-weight			: 600;

	}

	.home-banner #home-banner-control .home-banner-control-bttn-normal

	{				

		background-color	: rgba(197,171,95,0.7);

		color				: #302f23;

	}

	.home-banner #home-banner-control .home-banner-control-bttn:before

	{

		content				: "";

		position			: absolute;

		display				: block;

		top					: 3px;

		bottom				: 3px;

		left				: 3px;

		right				: 3px;

		border				: 1px solid #fff;

		z-index				: 1500;

	}

	.home-banner #home-banner-control .home-banner-control-bttn:hover

	{

		background-color	: rgba(76,166,255,0.7);

	}

	.home-banner #banner-control .banner-control-bttn i

	{

		position			: relative;

		display				: block;

		top					: 50%;

		transform			: translateY(-50%);

	}

	.home-banner #home-banner-control .home-banner-control-bttn-active

	{

		background-color	: #493e1b;

		color				: #fff;

	}

		

	.home-banner-content

	{

		box-sizing			: border-box;

		width				: 33%;

		height				: auto;

		background-color	: #b9a888;

		background-image	: url('../images/banners/banner-text-back.png');

		background-size		: cover;

		margin				: 0;

		padding				: 5px 10px;

		

	}

	.home-banner-content-hdr,

	.home-banner-content-body,

	.home-banner-content-foot

	{

		position			: relative;

		float				: left;

		box-sizing			: border-box;

		width				: 100%;	

	}

	.home-banner-content-hdr,

	.home-banner-content-foot

	{

		height				: 40px;

	}

	.home-banner-content-body

	{

		height				: 320px;

	}

	

	

	/*--------------------------------------------------------

	### College Wall

	---------------------------------------------------------- */

	.college-wall-title

	{

		position			: relative;

		box-sizing			: border-box;		

		display				: display;

		width				: 100%;

		height				: 30px;

		margin				: 0;

		padding				: 0;

		text-align			: center;

		border-bottom		: 2px solid #402920;

		font-family			: 'Roboto Condensed',sans-serif;

		font-size			: 18px;

		font-weight			: 600;

		color				: #4f3326;

	}

	.college-wall-box

	{

		position			: relative;

		box-sizing			: border-box;		

		display				: display;

		width				: 100%;

		height				: 100%;

		text-align			: center;

		margin				: 0;

		padding				: 0;

	}

	.college-wall-box img

	{

		display				: block;

		width				: auto;

		max-width			: 100%;

		max-height			: 100%;

	}

	.college-wall-box a

	{

		position			: absolute;				

		display				: block;

		top					: 50%;

		left				: 50%;

		transform			: translate(-50%,-50%);

		width				: 60px;

		height				: 60px;

		border-radius		: 50%;

		background-image	: linear-gradient(45deg, #643124 , #a65300 );

		text-align			: center;

		line-height			: 60px;

		font-size			: 30px;

		color				: #fff;

		text-decoration		: none;

		box-shadow			: 1px 1px 2px #333;

	}

	.college-wall-box a:hover

	{

		background-color	: #d7beb3;

		color				: #1d3247;

		box-shadow			: 1px 2px 4px #111;

	}

	.college-wall-box a i

	{

		position			: relative;

		display				: block;

		top					: 50%;

		transform			: translateY(-50%);

	}			

	.college-wall-box h2

	{

		display				: block;

		width				: 100%;

		height				: auto;

		padding				: 0;

		text-align			: center;

		line-height			: 1.1;

		font-family			: "Roboto",sans-serif;

		font-size			: 1.2rem;

		font-weight			: 500;

		color				: #fff;

		border				: 1px solid #fff;

	}

	

	/*-----------------------------------------------------------------

	###

	-------------------------------------------------------------------*/

	#index-header-area

	{

		height				: 40px;

		background-color	: #281d15;

	}

	/* -------------------------------------------------------                                                                  

	******   Purpose : Marquee section in header area            

	----------------------------------------------------------*/

	#important-msg-area

	{

		position			: relative;

		box-sizing			: border-box;

		width				: 90%;

		max-width			: 1440px;

		height				: 40px;

		margin				: 0px auto;

		padding				: 0px;

		background-color	: transparent;		

		display				: flex;

		flex-wrap			: nowrap;

	}

	#important-msg-area #marquee-title

	{

		position			: relative;

		box-sizing			: border-box;

		float				: left;

		width				: 225px;

		height				: 40px;

		margin				: 0px;

		margin-right		: 10px;

		padding				: 0px;

		text-align			: center;

		line-height			: 40px;

		background-color	: transparent;

		overflow			: hidden;

		align-items			: center;

	}

	#important-msg-area #marquee-title span

	{

		width				: 150px;

		font-family			: "Roboto",sans-serif;					

		font-size			: 1.8rem;

		font-weight			: 500;

		background-color	: transparent;

		color				: #98fcf7;

		text-transform		: uppercase;

		animation			: animator 1s infinite;

	}

	@keyframes animator

	{

		0%

		{					

			text-shadow			: 0px 0px 2px #fff;

		}

		50%

		{					

			text-shadow			: 0px 0px 12px #fff;

		}

		100%

		{					

			text-shadow			: 0px 0px 2px #fff;

		}

	}

	#important-msg-area #marquee-container

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		float				: left;

		width				: 100%;

		height				: 40px;

		margin				: 0px;

		padding				: 0px;

		text-align			: left;

		background-color	: transparent;

		overflow			: hidden;

	}

	#important-msg-area #marquee-container marquee

	{

		width				: 100%;

		height				: 40px;

		line-height			: 40px;

	}

	#important-msg-area #marquee-container a

	{

		display				: inline-block;

		width				: auto;

		height				: 40px;

		margin				: 0px;

		margin-left			: 10px;

		padding				: 0px;

		padding-left		: 15px;

		line-height			: 40px;

		background			: rgba(0, 0, 0, 0) url("../images/list_dot.png") no-repeat scroll left center;

		background-size		: 10px 10px;

		

		font-family			: 'Roboto Condensed',sans-serif;

		font-size			: 1.8rem;

		font-weight			: 500;

		text-decoration		: none;

		white-space: nowrap;

	}

	#important-msg-area #marquee-container a.brtGreenMarquee

	{

		color				: #51ff51;

	}

	#important-msg-area #marquee-container a.brtOrangeMarquee

	{

		color				: #f97c00;

	}

	#important-msg-area #marquee-container a.brtAquaMarquee

	{

		color				: #80ffff;

	}

	#important-msg-area #marquee-container a.brtWhiteMarquee

	{

		color				: #fff;

	}

	#important-msg-area #marquee-container a:hover

	{

		color				: #d0cb0f;

	}

	

	/* ---------------------------------------------                                                                   

	******   Purpose : College Statistics Area     

	------------------------------------------------ */

	.stat-container

	{

		display				: flex;

		flex-wrap			: wrap;

		align-content		: flex-end;

		margin-top			: 10px;

	}	

	.stat-container .stats

	{

		box-sizing			: border-box;

		flex-basis			: auto;

		background-color	: #541107;

		margin-bottom		: 5px;

		margin-right		: 10px;

		padding				: 3px 5px;

	}		

	.stat-container .stats .icon-box

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		float				: left;

		width				: 36px;

		height				: 36px;

		text-align			: center;

		font-size			: 24px;

		background-color	: transparent;

		color				: #fff;

	}

	.stat-container .stats .icon-box i

	{

		position			: relative;

		display				: block;

		top					: 50%;

		transform			: translateY(-50%);

	}

	.stat-container .stats .icon-text

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		float				: left;

		width				: auto;

		height				: 36px;

		line-height			: 36px;

		padding-left		: 5px;

		padding-right		: 10px;

		text-align			: center;

		font-family			: cambria,sans-serif;

		font-weight			: 400;

		font-size			: 1.3rem;

		color				: #f0f8ff;

	}

	.stat-container .stats .icon-text span

	{

		font-family			: "Roboto Condensed",sans-serif;

		font-weight			: 600;

		color				: #ffff00;

	}

	

	#quickLinkBlock

	{

		margin				: 30px auto;

	}

	/*==================================================================================                                                                   

	####   Purpose : Quick Link Buttons                                              

	====================================================================================*/

	.service-list-container

	{

		display				: flex;

		justify-content		: start;

		flex-wrap			: wrap;

		width				: 100%;

	}

	.service-list

	{

		box-sizing			: border-box;

		width				: 210px;

		background-color	: transparent;

		margin				: 0;

		margin-right		: 15px;

		margin-bottom		: 15px;

		border-radius		: 8px;

		overflow			: hidden;

	}

	.bttnPrimActive:hover,

	.bttnPrimAnimate:hover

	{

		box-shadow			: 1px 2px 5px #333;

	}

	.bttnPrimAnimate

	{

		background-color	: #2b2b1c;

	}

		

	.bttnPrimActive a,

	.bttnPrimInactive a,

	.bttnPrimAnimate a

	{

		position			: relative;

		box-sizing			: border-box;

		display				: flex;

		flex-wrap			: nowrap;

		justify-content		: space-between;

		width				: 100%;

		height				: 60px;

		line-height			: 60px;

		text-align			: center;

		text-decoration		: none;

		border				: none;			

	}

	.bttnPrimInactive a

	{

		background-color	: #acabad;

		color				: #e0dfe1;

		text-shadow			: 1px 1px 1px #9b9b9b;

		cursor				: default;

	}

	.bttnPrimActive a,

	.bttnPrimAnimate a

	{				

		cursor				: pointer;

	}

	.bttnPrimActive a

	{

		background-color	: #2b2b1c;

		color				: #ffffff;

		transition			: 0.4s;

		text-align			: center;

		line-height			: 60px;	

	}

	

	.bttnPrimAnimate a:hover

	{

		background-color	: #eef5f9;	

	}

	.bttnPrimAnimate a span,

	.bttnPrimAnimate a div

	{

		display				: block;

		font-family			: cambria,sans-serif;

		font-size			: 30px;

		font-weight			: 600;

		text-transform		: uppercase;

		letter-spacing		: 1px;

		background			: repeating-linear-gradient(-45deg, #f00 0%, #f1621d 7.14%, #f9ee28 14.28% , #15cc51 21.4% , #6fecdf 28.56% , #5a78e0 35.7% , #9d64e3 42.84%, #e875f4 50%);

		background-size		: 600vw 600vw;

		-webkit-text-fill-color	: transparent;

		-webkit-background-clip	: text;

		animation			: slide 4.5s linear infinite forwards;

	}

	@keyframes slide 

	{

		0%

		{

			background-position-x	: 0%;

		}

		100%

		{

			background-position-x	: 600vw;

		}

	}

	

	.bttnPrimAnimate:hover a span,

	.bttnPrimAnimate a:hover span,

	.bttnPrimAnimate a span:hover,

	.bttnPrimAnimate a span:hover div,

	.bttnPrimAnimate a span div:hover

	{

		animation-play-state	: paused;

		color					: #000;

		-webkit-text-fill-color	: #000;

	}

	.bttnPrimAnimate a span.service-list-icon

	{

		width				: 60px;

		height				: 60px;

	}

	.bttnPrimAnimate a span.service-list-text

	{

		box-sizing			: border-box;

		flex				: 1;

		height				: 60px;

		line-height			: 60px;

		text-align			: left;

		padding-right		: 5px;

		font-family			: "Roboto",sans-serif;

		font-size			: 14px;

		font-weight			: 600;

		text-transform		: uppercase;

		letter-spacing		: 1px;

	}				

	.bttnPrimActive a:hover

	{

		background-color	: #fff;	

		color				: #121212;

	}

	

	.bttnPrimActive a span,

	.bttnPrimInactive a span

	{

		box-sizing			: border-box;

		display				: block;

		width				: 100%;

		font-size			: 30px;

	}

	.bttnPrimActive a span.service-list-icon,

	.bttnPrimInactive a span.service-list-icon

	{

		width				: 60px;

		height				: 60px;

	}

	.bttnPrimActive a span.service-list-text,

	.bttnPrimInactive a span.service-list-text

	{

		box-sizing			: border-box;

		flex				: 1;

		height				: 60px;

		line-height			: 60px;

		text-align			: left;

		padding-right		: 5px;

		font-family			: "Roboto",sans-serif;

		font-size			: 14px;

		font-weight			: 600;

		text-transform		: uppercase;

		letter-spacing		: 1px;

	}	

	.bttnPrimActive a span.service-list-icon i,

	.bttnPrimInactive a span.service-list-icon i

	{

		position			: relative;

		display				: block;

		top					: 50%;

		transform			: translateY(-50%);

	}

	.bttnPrimActive a span.service-list-text .wrapText,

	.bttnPrimAnimate a span.service-list-text .wrapText,

	.bttnPrimInactive a span.service-list-text .wrapText

	{

		position			: relative;

		top					: 50%;

		transform			: translateY(-50%);

		width				: 100%;

		height				: auto;

		line-height			: 1 !important;

		margin				: 0;

		padding				: 0;

		padding-right		: 5px;

		font-family			: "Roboto",sans-serif;

		font-size			: 14px;

		font-weight			: 600;

		text-transform		: uppercase;

		letter-spacing		: 1px;

	}

	

/*==================================================================================================================

### Page Notification Area

====================================================================================================================*/	

	

	#notificationBlock

	{

		margin-top			: 45px;

		margin-bottom		: 45px;

	}

	.notify-col

	{

		height				: 480px;

		box-sizing			: border-box;

		flex				: 1;

		margin-right		: 20px;

		padding				: 10px;

		transition			: 0.3s;

		box-shadow			: 1px 1px 5px #333;

		z-index				: 3;

	}

	.notify-col:last-of-type

	{

		margin-right		: 0;

	}

	.notify-col:hover

	{			

		box-shadow			: 3px 5px 25px #333;

	}

	.notify-col-head,

	.notify-col-foot

	{

		position			: relative;

		box-sizing			: border-box;

		float				: left;

		display				: block;

		width				: 100%;

		height				: 40px;

	}

	.notify-col-body

	{

		position			: relative;

		box-sizing			: border-box;

		float				: left;

		display				: block;

		width				: 100%;

		height				: 380px;

		padding-right		: 10px;

		overflow-y			: auto;

		overflow-x			: hidden;

	}

	.notify-col-body::-webkit-scrollbar

	{

		width				: 7px;

		background			: #b0b0b0; 

		box-shadow			: inset 1px 1px 4px #333;

		-webkit-box-shadow	: inset -1px -1px 4px #333;

	}

	/* Track */

	.notify-col-body::-webkit-scrollbar-track

	{

		background			: #f1f1f1; 

	}	

	/* Handle */

	.notify-col-body::-webkit-scrollbar-thumb

	{

		border-radius		: 30px;

		background			: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60)); 

	}	

	/* Handle on hover */

	.notify-col-body::-webkit-scrollbar-thumb:hover

	{

		background			: -webkit-gradient(linear,left top,left bottom,from(#66b3ff),to(#400080)); 

	}

	.right-link

	{

		position			: relative;

		float				: right;

		margin-top			: 4px;

		margin-right		: 15px;

		padding				: 0 10px;

		display				: inline-block;

		width				: auto;

		height				: 30px;

		text-align			: center;

		line-height			: 30px;

		border-radius		: 8px;

		border				: 2px solid #3e5b66;

		background-color	: #3e5b66;

		font-family			: sans-serif;

		font-size			: 1.1rem;

		font-weight			: 600;

		color				: #fff;

		text-decoration		: none;

	}

	.right-link:hover

	{

		background-color	: transparent;

		color				: #3e5b66;

	}

	

	.notice-container

	{

		position			: relative;

		box-sizing			: border-box;

		width				: 100%;

		height				: auto;

		margin				: 0 0 10px;

		padding				: 5px;

		padding-right		: 18px;

		display				: flex;			

		justify-content		: flex-start;

		background-color	: #e7ddd8;

		border-radius		: 0;

	}

	.notice-container:first-of-type

	{

		margin-top			: 20px;

	}

	

	.notice-container .notice-cell-date,

	.notice-container .notice-cell-month

	{

		box-sizing			: border-box;

		width				: 60px;

		text-align			: center;

		margin				: 0 5px 0 0;

		padding				: 0;

	}

	.notice-container .notice-cell-date

	{

		height				: 30px;

		line-height			: 30px;

		background-color	: #2c4856;

		color				: #fff;

		font-family			: "Ubuntu",sans-serif;

		font-size			: 20px;

		font-weight			: 600;

	}

	.notice-container .notice-cell-month

	{

		height				: 20px;

		line-height			: 20px;

		background-color	: #81aabe;

		color				: #313131;

		font-family			: "Ubuntu",sans-serif;

		font-size			: 14px;

		font-weight			: 600;

	}

	.notice-container .notice-img-wrapper

	{

		position			: relative;

		box-sizing			: border-box;

		width				: 80px;

		height				: auto;

		margin				: 0;

		padding				: 0;

	}

	.notice-container .notice-img-wrapper img

	{

		display				: block;

		width				: 100%;

		height				: auto;

	}

	.notice-container .notice-cell-title

	{

		width				: 100%;

		display				: block;

		margin-bottom		: 5px;

		font-family			: "Roboto",sans-serif;

		font-size			: 1.2rem;

		font-weight			: 500;

		color				: #1b0e0e;

	}

	.notice-container .notice-cell-title a

	{

		display				: inline-block;

		width				: auto;

		height				: 20px;

		line-height			: 20px;

		padding				: 0 5px;

		text-decoration		: none;

		transition			: 0.4s;

		font-weight			: 600;

		color				: #0754b1;

	}

	.notice-container .notice-cell-title a:hover

	{

		text-decoration		: underline;

	}

	.notice-container .notice-sub-title

	{

		width				: 100%;

		display				: block;

		margin-bottom		: 5px;

		font-family			: "Roboto",sans-serif;

		font-size			: 12px;

		font-weight			: 600;

		color				: #385c6d;

	}

	.notice-container .notice-sub-title i

	{

		font-size			: 14px;

		color				: #bf0000;

	}

	.notice-container .notice-flag

	{

		position			: absolute;

		display				: block;

		top					: -15px;

		right				: -15px;

		width				: 36px;

		height				: 36px;

		padding				: 0;

		margin				: 0;

		text-align			: center;

		line-height			: 36px;

		background-color	: #f00;

		border-radius		: 50%;

		font-family			: cambria;

		font-size			: 1.0rem;

		font-weight			: 600;

		color				: #fff;

		animation			: notExpan 1.2s linear infinite;

	}

	@keyframes notExpan

	{

		0% 

		{

			box-shadow			: 0 0 1px #f00;

		}

		25% 

		{

			box-shadow			: 0 0 5px #f00;

		}

		50% 

		{

			box-shadow			: 0 0 15px #f00;

		}

		75% 

		{

			box-shadow			: 0 0 5px #f00;

		}

		100% 

		{

			box-shadow			: 0 0 1px #f00;

		}

	}

	.no-record

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		width				: 100%;

		height				: 50px;

		margin				: 20px 0 0;

		padding				: 0;

		text-align			: center;

		line-height			: 46px;

		border-radius		: 8px;

		border				: 2px dashed #6f4937;

		background-color	: #e7ddd8;

		font-family			: "Roboto",sans-serif;

		font-size			: 16px;

		font-weight			: 600;

		color				: #57392b;

	}

	

/*==================================================================================================================

### Page Notification Area

====================================================================================================================*/

	.link-box-wrapper

	{

		position			: relative;

		box-sizing			: border-box;

		width				: 90%;

		max-width			: 1440px;

		margin				: 10px auto;

		padding				: 0;

		display				: flex;

		flex-wrap			: nowrap;

		justify-content		: space-between;

	}

	

	.link-box

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		float				: left;

		width				: 220px;

		height				: 160px;

		padding				: 10px;

		margin				: 10px 0 0 10px;

		background-color	: #e1e0f3;

		transition			: 1s;

	}

	.link-box:hover

	{

		background-color	: #e1c7b9;

	}

	.link-box img

	{

		position			: relative;

		display				: block;

		left				: 50%;

		top					: 50%;

		width				: auto;

		height				: auto;

		max-width			: 100%;

		max-height			: 100%;

		transform			: translate(-50%,-50%);

	}



/*==================================================================================================================

### Voice Of Principal Area

====================================================================================================================*/				

	#index-voice-of-principal

	{

		margin-bottom		: 0;

		background-image	: linear-gradient(to bottom, #e3edf2 , #abc7d6 );

	}

	#index-voice-of-principal:before

	{

		content				: "";

		position			: absolute;

		display				: block;

		top					: 5px;

		bottom				: 5px;

		left				: 5px;

		right				: 5px;

	}

	h2.vop-title

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		width				: 100%;

		height				: 50px;

		margin				: 15px 0 20px;

		line-height			: 50px;

		text-align			: left;

		

		font-family			: cambria,"Times New Roman";

		font-weight			: 600;

		font-size			: 2rem;

		text-transform		: uppercase;

		color				: #121212;

	}

	h2.vop-title:before

	{

		content				: attr(firstLetter);

		display				: inline-block;

		width				: 50px;

		height				: 50px;

		margin				: 0;

		padding				: 0;

		text-align			: center;

		line-height			: 50px;

		background-color	: #111;

		font-size			: 2.8rem;

		color				: #fff;

	}

	h2.vop-title:after

	{

		content				: "";

		position			: absolute;

		bottom				: -5px;

		left				: 0px;

		width				: 100%;

		height				: 2px;

		background-image	: linear-gradient(to right,#3a5f74,transparent);

	}

	/*--------------------------------------------------

	### Decoration Over Image Container Principal

	----------------------------------------------------*/

	.line-bar

	{

		position			: relative;

		display				: block;

		width				: 100%;

		height				: 20px;

		margin				: 20px auto;

	}

	.line-bar div

	{

		position			: relative;

		display				: block;					

	}		

	.line-bar div:nth-child(1)

	{

		float				: left;

		height				: 20px;

	}				

	.line-bar div:nth-child(1) span:nth-child(1)				

	{

		position			: absolute;

		display				: block;

		top					: 50%;

		left				: 0px;

		width				: 0;

		height				: 0;

		margin-right		: 5px;

		border-top			: 8px solid transparent;

		border-left			: 0px solid transparent;

		border-right		: 8px solid #421717;

		border-bottom		: 8px solid transparent;

		transform			: translateY(-50%);

	}

	.line-bar div:nth-child(1) span:nth-child(2)

	{

		position			: absolute;

		display				: block;

		left				: 13px;

		top					: 0px;

		width				: 8px;

		height				: 20px;

		background-color	: #421717;

	}

	.line-bar div:nth-child(3)

	{

		width				: auto;

		height				: 6px;

		top					: 50%;

		transform			: translateY(-50%);

		margin				: 0 25px;

		background-color	: #421717;

		background-image	: linear-gradient(to right, #421717 , #290e0e , #421717);

		box-shadow			: 1px 1px 3px #222;

	}	

	.line-bar div:nth-child(2)

	{

		float				: right;

		height				: 20px;

	}				

	.line-bar div:nth-child(2) span:nth-child(1)				

	{

		position			: absolute;

		display				: block;

		right				: 13px;

		top					: 0px;

		width				: 8px;

		height				: 20px;

		background-color	: #421717;						

	}

	.line-bar div:nth-child(2) span:nth-child(2)

	{

		position			: absolute;

		display				: block;

		top					: 50%;

		left				: -5px;

		width				: 0;

		height				: 0;

		//margin-right		: 5px;

		border-top			: 8px solid transparent;

		border-left			: 8px solid #421717;

		border-right		: 0px solid red;

		border-bottom		: 8px solid transparent;

		transform			: translateY(-50%);

	}

	/*--------------------------------------------------

	### Image Container Principal

	----------------------------------------------------*/

	.vop-img-container

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		width				: 90%;

		height				: 100%;

		//float				: right;

		margin				: 0 auto;

		margin-bottom		: 50px;

		padding				: 0;

		//border				: 1px solid #f00;

	}

	.vop-img-container img

	{	

		position			: relative;

		display				: block;

		width				: 100%;

		top					: 50%;

		//transform			: translateY(-50%);

	}

	

	.modal-box-wrapper

	{

		position			: fixed;

		display				: none;

		left				: 0;

		right				: 0;

		top					: 0;

		bottom				: 0;

		background-color	: rgba(0,0,0,0.5);

		z-index				: 999999;

	}

	.modal-box

	{

		position			: absolute;

		box-sizing			: border-box;

		display				: block;

		width				: 400px;

		height				: 80%;

		top					: 50%;

		left				: 50%;

		transform			: translate(-50%,-50%);

	}

	.modal-box2

	{

		position			: absolute;

		box-sizing			: border-box;

		display				: block;

		width				: 500px;

		height				: 60%;

		top					: 50%;

		left				: 50%;

		transform			: translate(-50%,-50%);

	}


	

	.modal-bg-p1

	{

		background			: url("../images/backgrounds/admission-p1-v3.jpg");

		background-origin	: content-box;

		background-size		: cover;

	}

	

	.modal-bg-p2 {
    background: url("../images/backgrounds/Webinar_121125.jpeg") no-repeat center center;
    background-size: 100% 100%; 
    background-origin: content-box;
}


	

	.modal-close

	{

		position			: absolute;

		box-sizing			: border-box;

		display				: block;

		width				: 30px;

		height				: 30px;

		top					: -15px;

		right				: -15px;

		background-color	: #f00;

		border-radius		: 15px;

		text-align			: center;

		line-height			: 30px;

		font-size			: 18px;

		color				: #fff;

		cursor				: pointer;

	}

	.modal-box h1

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		width				: 80%;

		height				: 50px;

		margin				: 20px auto 10px;

		background-color	: #fff;

		font-family			: "Oswald",sans-serif;

		font-size			: 18px;

		color				: #2d4d6c;

		text-align			: center;

		line-height			: 50px;

	}

	.modal-image

	{

		position			: relative;

		box-sizing			: border-box;

		float				: left;

		display				: block;

		width				: 300px;

		height				: 480px;

	}

	.modal-image img

	{

		display				: block;

		width				: auto;

		height				: 100%;

	}

	

	.modal-text-wrapper

	{

		position			: absolute;

		box-sizing			: border-box;

		bottom				: 30px;

		left				: 50px;

		right				: 50px;

		height				: auto;

	}

	.modal-text

	{

		position			: relative;

		box-sizing			: border-box;

		width				: 100%;

		height				: auto;

		padding				: 10px;

		background-color	: rgba(255,255,255,0.7);

		margin-bottom		: 10px;

	}

	

	.modal-text > h2

	{

		text-align			: center;

		font-family			: "Oswald",sans-serif;

		font-size			: 16px;

		font-weight			: 400;

		color				: #0d1c33;

	}

	.modal-text a

	{

		position			: relative;

		box-sizing			: border-box;

		display				: block;

		width				: 140px;

		height				: 40px;

		margin				: 0 auto;

		background-image	: linear-gradient(to right, #0000b9 , #ff0080 );

		border-radius		: 20px;

		box-shadow			: 1px 2px 5px #444;

		font-family			: "Oswald",sans-serif;

		font-size			: 16px;

		color				: #fff;

		text-align			: center;

		line-height			: 40px;

		text-decoration		: none;

	}