/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
###	CLIENT					: Chandernagore College                                      
###	AUTHOR					: Arindam Chakraborty
###	FILE NAME				: st.home.sp.1.1.1.css                                                      
###	CREATED ON				: 25.05.2025
###	LAST UPDATED ON			: 08.08.2025
### LAST UPLOADED VERSION	: 1.1.1
###	PURPOSE					: CSS styling for screen over 1081 pixels for Home Page Specific Elements
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	.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			: 3rem;
		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
	{
		display				: none;
		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
	{
		display				: none;
		
	}
	.home-banner-content-hdr,
	.home-banner-content-body,
	.home-banner-content-foot
	{
		display				: none;
	}
	
	/*--------------------------------------------------------
	### 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			: 3.6rem;
		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			: 4rem;
		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			: 2.9rem;
		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				: 100%;
		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				: 140px;
		height				: 40px;
		margin				: 0px;
		margin-right		: 5px;
		padding				: 0px;
		padding-left		: 5px;
		text-align			: left;
		line-height			: 40px;
		background-color	: transparent;
		overflow			: hidden;
		align-items			: center;
	}
	#important-msg-area #marquee-title span
	{
		width				: 135px;
		font-family			: "Roboto",sans-serif;					
		font-size			: 3.1rem;
		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			: 3.1rem;
		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				: 30px;
		height				: 30px;
		text-align			: center;
		font-size			: 3.5rem;
		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				: 30px;
		line-height			: 30px;
		padding-left		: 5px;
		padding-right		: 10px;
		text-align			: center;
		font-family			: cambria,sans-serif;
		font-weight			: 400;
		font-size			: 3.1rem;
		color				: #f0f8ff;
	}
	.stat-container .stats .icon-text span
	{
		font-family			: "Roboto Condensed",sans-serif;
		font-weight			: 600;
		color				: #ffff00;
	}
	
	#quickLinkBlock
	{
		margin				: 10px 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				: 45%;
		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				: 50px;
		line-height			: 50px;
		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			: 50px;	
	}
	
	.bttnPrimAnimate a:hover
	{
		background-color	: #eef5f9;	
	}
	.bttnPrimAnimate a span,
	.bttnPrimAnimate a div
	{
		display				: block;
		font-family			: cambria,sans-serif;
		font-size			: 3.6rem;
		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				: 50px;
		height				: 50px;
	}
	.bttnPrimAnimate a span.service-list-text
	{
		box-sizing			: border-box;
		flex				: 1;
		height				: 50px;
		line-height			: 50px;
		text-align			: left;
		padding-right		: 5px;
		font-family			: "Roboto",sans-serif;
		font-size			: 3.1rem;
		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			: 3.5rem;
	}
	.bttnPrimActive a span.service-list-icon,
	.bttnPrimInactive a span.service-list-icon
	{
		width				: 50px;
		height				: 50px;
	}
	.bttnPrimActive a span.service-list-text,
	.bttnPrimInactive a span.service-list-text
	{
		box-sizing			: border-box;
		flex				: 1;
		height				: 50px;
		line-height			: 50px;
		text-align			: left;
		padding-right		: 5px;
		font-family			: "Roboto",sans-serif;
		font-size			: 3.1rem;
		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%);
		font-size			: 24px;
	}
	.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			: 3.1rem;
		font-weight			: 600;
		text-transform		: uppercase;
		letter-spacing		: 1px;
	}
	
/*==================================================================================================================
### Page Notification Area
====================================================================================================================*/	
	
	#notificationBlock
	{
		margin-top			: 15px;
		margin-bottom		: 15px;
	}
	.notify-col
	{
		height				: 400px;
		box-sizing			: border-box;
		margin				: 0;
		margin-bottom		: 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				: 300px;
		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			: 3.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			: 3.4rem;
		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			: 3.1rem;
		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			: 3.1rem;
		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			: 3rem;
		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			: 2.5rem;
		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			: 3.2rem;
		font-weight			: 600;
		color				: #57392b;
	}
/*==================================================================================================================
### Page Notification Area
====================================================================================================================*/
	.link-box-wrapper
	{
		position			: relative;
		box-sizing			: border-box;
		width				: 100%;
		margin				: 0;
		padding				: 10px;
		display				: flex;
		flex-wrap			: wrap;
		justify-content		: space-between;
	}
	
	.link-box
	{
		box-sizing			: border-box;
		flex				: 1;
		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				: 5px 0 10px;
		line-height			: 50px;
		text-align			: left;
		
		font-family			: cambria,"Times New Roman";
		font-weight			: 600;
		font-size			: 4rem;
		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			: 5rem;
		color				: #fff;
	}
	h2.vop-title:after
	{
		content				: "";
		position			: absolute;
		bottom				: -5px;
		left				: 0px;
		width				: 100%;
		height				: 2px;
		background-image	: linear-gradient(to right,#fff,transparent);
	}
	#vopImgBlock
	{
		display				: none;
	}
	/*--------------------------------------------------
	### Decoration Over Image Container Principal
	----------------------------------------------------*/
	.line-bar
	{		
		display				: none;
	}
	.line-bar div
	{
		display				: none;					
	}		
	.line-bar div:nth-child(1)
	{
		float				: left;
		height				: 20px;
	}
	/*--------------------------------------------------
	### Image Container Principal
	----------------------------------------------------*/
	.vop-img-container
	{
		display				: none;
	}
	.vop-img-container img
	{	
		display				: none;
	}
	
	.modal-box-wrapper
	{
		position			: fixed;
		display				: none;
		box-sizing			: border-box;
		width				: 100%;
		height				: 100%;
		/*left				: 0;
		right				: 0;
		top					: 0;
		bottom				: 0;*/
		max-width: 100vw;
		overflow: hidden;
		padding				: 20px;
		background-color	: rgba(0,0,0,0.5);
		z-index				: 999990;		
	}
	.modal-box
	{
		position			: absolute;
		box-sizing			: border-box;
		display				: block;
		width				: 90%;
		height				: 100vh;
		z-index				: 999999;
	}
	
	.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/admission-p2-v1.jpg");
		background-origin	: content-box;
		background-size		: cover;
	}
	
	.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			: 20px;
		color				: #2d4d6c;
		text-align			: center;
		line-height			: 50px;
	}
	.modal-image
	{
		position			: relative;
		box-sizing			: border-box;
		float				: left;
		display				: block;
		width				: 100%;
		height				: auto;
	}
	.modal-image img
	{
		display				: block;
		width				: auto;
		height				: 100%;
	}
	.modal-text-wrapper
	{
		position			: absolute;
		box-sizing			: border-box;
		bottom				: 100px;
		left				: 20px;
		right				: 20px;
		height				: auto;
		z-index				: 999995;
	}
	.modal-text
	{
		position			: relative;
		box-sizing			: border-box;
		width				: 100%;
		height				: auto;
		padding				: 10px;
		background-color	: rgba(255,255,255,0.8);
		margin-bottom		: 10px;
	}
	
	.modal-text h2
	{
		text-align			: center;
		font-family			: "Oswald",sans-serif;
		font-size			: 16px;
		font-weight			: 400;
		color				: #091220;
	}
	.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;
	}