/*
================================================================================================
 ============================================================================== UNIVERSAL STYLES
================================================================================================
*/
* {
	padding: 0;
	margin: 0;
	text-decoration: none;
}
body { 
	background: #FBFBF2;
	font-family: 'Scheherazade', serif;
}
h2 {
	font-size: 84px;
	font-weight: normal;
	line-height: 64px;
	color: #000F45;
	margin: 55px 0 30px 0;
}
h3 {
	font-size: 48px;
	line-height: 48px;
	font-weight: normal;
	color: #000000;
	margin: 30px 0 10px 0;
}
h4 {
	font-size: 48px;
	line-height: 48px;
	color: #FBFBF2;
	font-weight: normal;
	margin: 0 0 10px 0;
	
}
h5 {
	font-size: 36px;
	line-height: 36px;
	color: #000F45;
	font-weight: normal;
	margin: 0 0 10px 0; 
}
p {
	font-size: 36px;
	line-height: 36px;
	color: #000F45;
	margin: 0 0 40px 0;
}
a { color: #417505; }
a:hover { text-decoration: underline; }

.hideMe { display: none; }
.clear { 
	clear: both;
}
.container {
	max-width: 1000px;
	margin: auto;
}
.containerXL { width: 100%; }
.blue { background: #000F45; }
.green { background: #417505; }
.left { float:left; }
.right { float: right; }
.linkSmall {
	background: url('../_img/link-chevronSmall.png') left center no-repeat;
	padding: 3px 0 0 20px;
	line-height: 18px;
	font-size: 18px;
}
.button {
	color: #FBFBF2;
	border-radius: 8px;
	line-height: 0;
	font-size: 36px;
	background: #417505 url('../_img/link-chevronXL.png') left center no-repeat;
}
.button:hover { background: #FF7F00 url('../_img/link-chevronXL.png') left center no-repeat; }
.buttonSmall {
	color: #FBFBF2;
	border-radius: 8px;
	line-height: 0;
	background: #417505 url('../_img/link-chevron.png') left center no-repeat;
	padding: 3px 20px 0 30px;
}
.buttonSmall:hover { background: #FF7F00 url('../_img/link-chevron.png') left center no-repeat; }

/* ===== TAB STLYES ===== */
.tab {
	overflow: hidden;
	background: #000F45;
	border-radius: 20px;
	padding: 0;
	font-size: 24px;
	line-height: 24px;
	height: 36px;
	list-style: none;
}ß
.tab li { color: #000F45; }
.tab a {
    float: left;
    border: none;
    transition: 0.3s;
	background: #000F45;
	color: #fff;
	padding: 3px 10px 1px 10px;
	margin: 4px 5px;
}
.tab a:hover, .tab a.active {
    background-color: #417505;
	border-radius: 20px;
}
.tabcontent {
	animation: fadeEffect 1s;
	display: none;
	margin: 30px 0;
}
.tabcontent li {
	margin: 0 30px 0 30px;
	padding: 0 0 0 10px;
	list-style-image: url('../_img/icon-bullet.png');
}
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* 

================================================================================================
================================================================================== HEADER STYLES
================================================================================================
*/
.navBar {
	background: #000F45;
	height: 80px;
	width: 100%;
	color: #fff;
	border-top: 5px #FF7F00 solid;
}
.navItems li {
	margin: 22px 0 0 0;
	list-style: none;
	float: left;
	font-size: 24px;
	line-height: 18px;
	padding: 7px 15px 3px 15px;
}
.navItems a { color: #fff; }
.selected {
	background: #417505;
	border-radius: 13px;
}
.logo {
	background: url('../_img/UK-hindi-samiti-logo.png');
	height: 60px;
	width: 60px;
	float: right;
	margin: 10px 0 0 0;
}

/*
================================================================================================
================================================================================== FOOTER STYLES
================================================================================================
*/
.footer {
	background: #FF7F00;
	height: 105px;
	width: 100%;
	clear: both;
	padding: 30px 0 0 0 ;
	margin: 50px 0 0 0;
}
.footer a { font-size: 24px; }
.footer p { font-size: 18px; }
.footer a, .footer p {
	color: #fff;
	text-decoration: none;
	margin: 0;
}
.footer a:hover { text-decoration: underline; }
.footer .navItems {
	margin: 0 22px 0 0;
	clear: both;
}
.footer .navItems li {
	margin: 0;
	padding: 10px 0 0 0;
}
.footer .first { padding: 7px 15px 3px 0; }
.separator {
	margin: 0 10px;
	color: #854100;
}

/* 
================================================================================================
=============================================================================== HOME PAGE STYLES
================================================================================================
*/
.logoXL {
	background: url('../_img/UK-hindi-samiti-logoXL.png');
	height: 230px;
	width: 230px;
	float: left;
	margin: 40px 26px 0 0;
}
.PAGE-home h2 {
	color: #FBFBF2;
	width: 743px;
	float: right;
	margin: 125px 0 70px 0;
}
.PAGE-home .header { height: 700px; }
.PAGE-home .header a {
	margin: 0 0 0 256px;
	padding: 5px 20px 0 60px;
}
.PAGE-home .boxes {
	background: url('../_img/pic-stream.png');
	background-size: cover;
	height: 812px;
}
.PAGE-home .box {
	float: left;
	width: 276px;
	height: 252px;
	background: #FBFBF2;
	opacity: 0.9;
	text-align: center;
	margin: 60px 26px 0 0;
	padding: 20px;
	color: #000F45;
	line-height: 24px;
	font-size: 24px;
}
.PAGE-home .last { margin: 60px 0 0 0; }
.PAGE-home .box p {
	margin: 0 0 30px 0;
	font-size: 24px;
	line-height: 24px;
}

/*
================================================================================================
============================================================== UK HINDI SAMITI ABOUT PAGE STYLES
================================================================================================
*/
.PAGE-about { background: #FBFBF2 url('../_img/pic-indians.png') bottom no-repeat; }
.PAGE-about .pic {
	background: url('../_img/pic-trip.png');
	width: 316px;
	height: 421px;
	margin: 0 26px 0 0;
	float: left; 
    position:relative;
}
.PAGE-about .pic span {
	background: #000F45;
	color: #fff;
	padding: 0 10px;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
}
.PAGE-about .box {
	float: left;
	width: 430px; /* 3 col: 276px --- 2 col: 430px */
	height: 300px;
	background: #417505;
	text-align: left !important;
	margin: 20px 26px 0 0;
	padding: 20px;
}
.PAGE-about .box  p {
	line-height: 24px;
	font-size: 24px;
	color: #FBFBF2;
}
.PAGE-about .last { margin: 20px 0 50px 0; }

/*
================================================================================================
================================================================= SYLLABUS AND EXAMS PAGE STYLES
================================================================================================
*/
.PAGE-syllabus {
	font-size: 36px;
	line-height: 36px;
}

/*
================================================================================================
=========================================================================== TEACHING PAGE STYLES
================================================================================================
*/
.PAGE-teaching p {
	font-size: 24px;
	line-height: 24px;
	font-family: 'Scheherazade', serif;
}
#map {
	width: 100%;
	height: 500px;
}

/*
================================================================================================
======================================================================= COMPETITIONS PAGE STYLES
================================================================================================
*/
.content li {
	margin: 0 30px 0 30px;
	padding: 0 0 0 10px;
	list-style-image: url('../_img/icon-bullet.png');
	font-size: 36px;
	line-height: 36px;
}
.galleryImages {
	position: relative;
	height: 480px; 
	width: 1000px; 
	margin: 0 0 30px 0;
}
.galleryImage {
	display: none;
	position: relative;
	animation: fadeInOut 1s;
}
.caption {
	background: #000F45;
	color: #fff;
	padding: 0 10px;
	position: absolute;
	bottom: 11px;
	right: 0;
	text-align: right;
}
.arrow-left {
	float: left;
	position: absolute;
	left: 20px;
	top: 40%;
}
.arrow-right {
	float: right;
	position: absolute;
	right: 20px;
	top: 40%;
}
.dots {
	position: absolute;
	bottom: 20px;
	left: 45.2%;
}
.dot {
	float: left;
	height: 10px;
	width: 10px;
	border-radius: 10px;
	border: #fff solid 1px;
	margin: 0 5px 0 0;
}
.dotFill {
	background: #fff;
	animation: fadeInOut 1s;
}
@keyframes fadeInOut {
    from {opacity: 0;}
    to {opacity: 1;}
}

/*
================================================================================================
========================================================================== ATIVITIES PAGE STYLES
================================================================================================
*/