@import url('https://fonts.googleapis.com/css?family=Great+Vibes');

h1 {
	font-family: 'Great Vibes', cursive;
	color:#95674d;
}
h2, h3, h4 {
	color:#95674d;
}
h2 {
	font-size: 20px;
	font-weight: 400;
}
h1 {
	font-size: 60px;
}
.watermark {
	display: none;
}
.stats {
	margin-top: 30px;
	margin-bottom: 40px;
}
.stats .col-sm-6 {
    text-align: center;
}
.stats .col-sm-6 img {
    width:100%;
}
.mapText {
    position: absolute;
    bottom: 60px;
    left: 58%;
    color: #95674d;
}
#ethicsStat1,
#ethicsStat2,
#educationStat1,
#educationStat2,
#qualStat1,
#qualStat2,
#forumsStat1 {
	display: none;
}
#ethicsStat2
#educationStat2 {
	animation-delay: 2s;
}
#qualStat2 {
    animation-delay: 1s;
}
.noBG h1 {
	margin-top: 0px;
}
.col-sm-12.statNumber {
    font-size: 160px;
    font-weight: 200;
    font-family: open sans;
    color: #fff;
	margin-bottom: 0px;
}
.statButtons .buttonWrapper {
    display: inline-block !important;
    width: auto !important;
}
.statTitle h1 {
    margin-bottom: 0px;
    font-family: open sans;
    font-size: 50px;
    margin-top: 0px;
	color: #fff;
}
.statSelected {
    padding: 13px 40px;
    border-radius: 200px;
    font-size: 16px;
    font-weight: 600;
	margin: 7px 5px;
    background: #aa7c61;
    color: #fff;
    border: 2px solid #aa7c61;
}
.statDeselected {
    padding: 13px 40px;
    border-radius: 200px;
    font-size: 16px;
    font-weight: 600;
	margin: 7px 5px;
    background: #fff;
    color: #734932;
    border: 2px solid #fff;
}
.statButton:hover {
    background: #936348;
	color: #fff;
    border: 2px solid #936348;
}
.statButton:active:focus {
	background: #936348;
	border-color: #936348;
}
.statDeselected:active,
.statDeselected:focus {
    background: #fff;
	color:#734932;
    border: 2px solid #fff;
}
.statSelected:active,
.statSelected:focus {
    background: #aa7c61;
	color:#fff;
    border: 2px solid #aa7c61;
}
/*.statButton.statSelected {
    background: #004855;
    color: #fff;
}*/
.col-sm-4.statButtons {
    padding: 0 8%;
}
.layer .col-sm-6.left {
	padding: 5% 10% 5% 5% !important;
	height: 100% !important;
	text-align: left;
}
#slide9 .layer .col-sm-5.left.noBG {
	padding: 5% 0% 5% 5% !important;
	height: 100% !important;
	text-align: left;
	display: flex;
	align-items: center;
}
#slide9 .layer .col-sm-7 {
	padding: 5% 10% 5% 5% !important;
	height: 100% !important;
	display: flex;
	align-items: center;
}
#slide9 .layer .col-sm-7 .memberNumbers {
	background: #353535;
    box-shadow: 0px 0px 80px rgba(0,0,0,0.2);
    padding: 50px;
}
#slide9 .layer .col-sm-7 .memberNumbers div {
	display: block;
	text-align: center;
	width: 100%;
}
#slide3 .layer {
	/*background: rgba(170,124,97,0.6);*/
}
#slide6 .layer {
	/*background: rgba(100,100,100,0.6);*/
}
#slide7 h1.special {
    position: absolute;
    top: calc(5% + 50px);
    left: calc(10% + 0px);
    /* z-index: 9999; */
    /*background: rgba(255,255,255,0.9);*/
    background: transparent;
    padding: 44px 50px;
    margin: 0;
	color: #fff;
	text-shadow: 0px 0px 50px rgba(0,0,0,1), 0px 0px 50px rgba(0,0,0,1), 0px 0px 100px rgba(0,0,0,1), 0px 0px 100px rgba(0,0,0,1), 0px 0px 200px rgba(0,0,0,1), 0px 0px 200px rgba(0,0,0,1);
}
.worldStatRight {
	width:15% !important;
	float: right;
	margin-left: 5px;
}
.statRight {
	width: 15% !important;
	float: right;
	margin-left: 20px;
}
.layer .col-sm-6.right {
	padding: 5% 5% 5% 10% !important;
	height: 100% !important;
	display: flex;
	align-content: center;
	float: right;
}
.layer .col-sm-6.centre {
    padding: 5% 10% !important;
    height: 100% !important;
    display: flex;
    align-content: center;
    width: 100%;
}
.statSelector {
	color: #fff;
	margin-top: 10px;
}
.statSelector div {
	display: inline !important;
	padding: 10px;
	margin: 0px 5px;
	cursor: pointer;
	font-size: 12px;
}

.statSelector div.selected {
	border-bottom:1px solid #fff;
}
.content {
    background: rgba(255,255,255,1);
    padding: 0px 20px 20px 20px;
    height: 100%;
    overflow-y: auto;
	font-size: 14px;
	z-index: 9999;
}
.content.speakers {
	height: 100vh;
	overflow-y: auto;
	padding: 5%;
	text-align: center;
}
.intro {
    display: block;
    width: 100%;
}
.intro h1 {
	color: #fff;
	font-family: open sans;
	margin-bottom: 0px;
}
.intro h2 {
    color: #aa7c61;
    margin-top: 0px;
    letter-spacing: 10px;
}
img.cisiLogo {
    width: 300px;
}
.closeButton {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
	width: 10px;
	z-index: 9999;
}
.hiddenContent h3 {
	font-size: 12px;
	margin-bottom: 2px;
	margin-top: 0px;
	font-family: 'Great Vibes', cursive;
}
.hiddenContent p {
	margin: 0px;
}
.hiddenContent::-webkit-scrollbar-track {
	background-color: #CBCBCB;
}

.hiddenContent::-webkit-scrollbar {
	width: 2px;
	background-color: #CBCBCB;
}

.hiddenContent::-webkit-scrollbar-thumb {
	background-color: #aa7c61;
}
.content::-webkit-scrollbar-track {
	background-color: #CBCBCB;
}

.content::-webkit-scrollbar {
	width: 12px;
	background-color: #CBCBCB;
}

.content::-webkit-scrollbar-thumb {
	background-color: #aa7c61;
}
.contentWrapper {
	width: 100%;
	height: 100%;
	z-index: 1;
}
.fp-slide.fp-table {
	overflow: hidden;
}
.fp-slides {
    background: url(/cisiweb2/image/aboutus/ar18/grifbg.jpg);
    background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.active {
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.disablePointer {
	pointer-events: auto;
}
#slide5 .col-sm-6.left {
    position: absolute;
    float: none;
    height: auto !important;
    padding: 2% !important;
    width: 35%;
}

#slide5 {
	background-image: url('/cisiweb2/image/aboutus/ar18/world.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
#slide4 .content {
	background: rgba(241,241,241,0.9);
}
#slide4 .layer .col-sm-6.left {
	padding: 5% 15% 5% 5% !important;
}
#slide7 {
	background-image: url('/cisiweb2/image/aboutus/ar18/quals.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#slide7 .layer {
    display: none;
	background:rgba(255,255,255,0.7);
}
#slide8 {
	background-image: url('/cisiweb2/image/aboutus/ar18/ethics.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#slide9,
#slide12,
#slide13{
	/*background-image: url('/cisiweb2/image/aboutus/ar18/grifbg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;*/
}
#slide13 .content {
    background: transparent;
}
#slide13 .layer {
    display: flex;
    align-items: center;
}
#slide13 .col-sm-7.left {
	padding: 5% 5% 5% 5% !important;
	text-align: center;
}
#slide12 .col-sm-12 {
	padding: 0;
}
#slide13 .content > .row {
    display: flex;
    align-items: center;
}
.downloads div {
    margin-bottom: 20px;
    font-size: 11px;
    text-align: center;
}
.downloads a {
	color:#404040;
}
.downloads img {
    margin-bottom: 10px;
    box-shadow: 0px 0px 20px #CBCBCB;
	transition: box-shadow 0.2s;
}
.downloads img:hover {
    box-shadow: 0px 0px 20px #7F7F7F;
}
#slide1 {
	background-image: url('/cisiweb2/image/aboutus/ar18/darkgrifbg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 80%;
}
#slide9 .content,
#slide12 .content {
	background: transparent;
}
.countryBlock {
	cursor: zoom-in;
	/*border:2px solid blue;*/
}
.countryBlock.active {
	cursor: auto;
}
.intro .downloadButton {
	border-radius: 200px;
	padding: 12px 30px;
	background: #aa7c61;
	border:0px solid;
	margin-top: 30px;
	display: inline-block !important;
}


.hiddenContent {
    background: rgba(255,255,255,1) !important;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    padding: 9px;
    font-size: 2px;
    line-height: 3px;
	font-weight: 200;
    display: none;
	max-height: 100%;
    overflow-y: auto;
}
.closeButton img {
    width: 4px;
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 4px;
}




img.speaker {
    width: 100%;
    border-radius: 200px;
	margin-bottom: 10px;
}

.speakers .col-sm-2 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 30px;
}


.subText {
    font-size: 10px;
	margin-top: 20px;
}


.speakers .row div {
    font-size: 12px;
    font-weight: 600;
    /*float: none !important;*/
    display: inline-block !important;
    vertical-align: top !important;
}

.fp-controlArrow.fp-prev {
    border-color: transparent #d4a990 transparent transparent !important;
	left: 15px !important;
    width: 0;
    border-width: 28.5px 24px 28.5px 0 !important;
}

.fp-controlArrow.fp-next {
    border-color: transparent transparent transparent #d4a990 !important;
	right: 15px !important;
    border-width: 28.5px 0 28.5px 24px !important;
}
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:center;
overflow: hidden;
}

#myVideo{
position: absolute;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black; /* in case the video doesn't fit the whole page*/
background-image: /* our video */;
background-position: center center;
background-size: contain;
object-fit: cover; /*cover video background */
z-index:3;
}

.slide{
position:relative;
}

/* Layer with position absolute in order to have it over the video
* --------------------------------------- */
.layer{
	position: absolute;
	z-index: 4;
	width: 100%;
	left: 0;
	top: 0%;
	bottom:0%;
height: 100vh !important;
	/*
	* Preventing flicker on some browsers
	* See http://stackoverflow.com/a/36671466/1081396  or issue #183
	*/
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#slide2{
	overflow: hidden;
}
/* Hiding video controls
* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
* --------------------------------------- */
video::-webkit-media-controls {
display:none !important;
}
.quote {
    font-size: 3px;
    line-height: 1.4;
    margin: 0 10%;
    padding-bottom: 1px;
    padding-top: 3px;
    font-style: italic;
    background-size: 15%;
    background-image: url(/cisiweb2/image/master/quote.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    color: #95674d;
}
.quoteAuthor {
    font-size: 2px;
    font-weight: 400;
    color: #444444;
    text-align: right;
    margin-top: 3px;
}
.midEastPic {
	float: right;
	width: 50% !important;
	margin-left: 5%;
}
.apacPic {
	float: right;
	width: 47% !important;
	margin-left: 4%;
}
.sriLankaPic {
	float: right;
	width: 50% !important;
	margin-left: 5%;
}
.indiaPic {
	float: right;
	width: 50% !important;
	margin-left: 5%;
}
.fadeOut {
    overflow: hidden;
    height: 150px;
    position: relative;
    content: '';
    text-overflow: ellipsis;
}
.fadeOut:before {
    background: linear-gradient(transparent 50px, rgba(255,255,255,1));
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

@media (min-width: 768px) {
	#slide5 .col-sm-6.left {
		position: absolute;
		float: none;
		height: 100vh !important;
		padding: 2% !important;
		width: 100%;
		display: flex;
		align-items:flex-end;
	}
	#slide5 .content {
		height: auto;
	}

	#slide5 {
		background-image: url('/cisiweb2/image/aboutus/ar18/world.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 75% -100px;
	}
}

@media (min-width: 992px) {
	.speakers .row div {
		font-size: 12px;
		font-weight: 600;
		float: none !important;
		display: inline-block !important;
		vertical-align: top !important;
		margin-bottom: 20px;
	}
	.intro .downloadButton {
		display: none !important;
	}

	.content {
		background: rgba(255,255,255,1);
		padding: 20px 30px;
		height: 100%;
		overflow-y: auto;
	}
	.col-sm-12.statNumber {
		font-size: 100px;
		font-weight: 200;
		font-family: open sans;
		color: #fff;
		margin-bottom: 0px;
	}
	#slide5 {
		background-image: url('/cisiweb2/image/aboutus/ar18/world.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 70%;
	}
	#slide5 .col-sm-6.left {
		position: absolute;
		float: none;
		height: 100vh !important;
		padding: 2% !important;
		width: 40%;
		display: flex;
		align-items:center;
	}
		#europeBlock,
	#europeBlock2 {
	   display: none;
	}
	#africaBlock {
		display: none;
	}
	#middleeastBlock {
		display: none;
	}
	#indiaBlock {
		display: none;
	}
	#srilankaBlock {
		display: none;
	}
	#apacBlock {
		display: none;
	}
	.statTitle h1 {
		margin-bottom: 0px;
		font-family: open sans;
		font-size: 24px;
		margin-top: 0px;
		color: #fff;
	}
	.col-sm-4.statButtons {
		padding: 0;
	}
	.statSelected {
		padding: 10px 25px;
		border-radius: 200px;
		font-size: 14px;
		font-weight: 600;
		margin: 2px 0px;
		background: #aa7c61;
		color: #fff;
		border: 2px solid #aa7c61;
	}
	.statDeselected {
		padding: 10px 25px;
		border-radius: 200px;
		font-size: 14px;
		font-weight: 600;
		margin: 2px 0px;
		background: #fff;
		color: #734932;
		border: 2px solid #fff;
	}
	h1 {
		font-size: 40px;
	}

}

@media (min-width: 1200px) {
	.statSelector div {
		font-size: 14px;
	}
	.watermark {
		position: fixed;
		bottom: 20px;
		left:20px;
		width: 100px !important;
		opacity: 0.7;
		z-index: 1;
	}
	.col-sm-4.statButtons {
		padding: 0 6%;
	}
	.tabletView {
		display: none;
	}
	.stats .col-sm-6 img {
		width:70%;
	}
	h1 {
		font-size: 60px;
	}
	h2 {
		font-size: 24px;
		font-weight: 400;
	}
	.downloads div {
		margin-bottom: 20px;
		font-size: 14px;
		text-align: center;
	}
	#slide5 {
		background-image: url('/cisiweb2/image/aboutus/ar18/world.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 65%;
	}
	#slide1 {
		background-image: url('/cisiweb2/image/aboutus/ar18/darkgrifbg.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	h1 {
		font-size: 50px;
	}
	.content {
		background: rgba(255,255,255,1);
		padding: 10px 30px;
		height: auto;
		max-height: 100%;
		text-align: left;
		overflow-y: auto;
		font-size: 14px;
	}
	#slide5 .col-sm-6.left {
		position: absolute;
		float: none;
		height: 100vh !important;
		padding: 2% !important;
		width: 35%;
		align-items: flex-end;
	}
	#europeBlock,
#europeBlock2 {
   position: absolute;
    top: 28%;
    left: 48%;
    display: block;
    width: 10%;
    height: 10%;
}
#africaBlock {
    position: absolute;
    top: 50%;
    left: 55%;
    display: block;
    width: 10%;
    height: 10%;
}
#middleeastBlock {
        position: absolute;
    top: 40%;
    left: 60%;
    display: block;
    width: 10%;
    height: 10%;
}
#indiaBlock {
    position: absolute;
    top: 40%;
    left: 70%;
    display: block;
    width: 10%;
    height: 10%;
}
#srilankaBlock {
    position: absolute;
    top: 50%;
    left: 72%;
    display: block;
    width: 10%;
    height: 10%;
}
#apacBlock {
    position: absolute;
    top: 50%;
    left: 82%;
    display: block;
    width: 10%;
    height: 10%;
}
	.hiddenContent h3 {
		font-size: 8px;
		margin-bottom: 2px;
		margin-top: 0px;
		font-family: 'Great Vibes', cursive;
	}
	.hiddenContent {
		background: rgba(255,255,255,1) !important;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
		padding: 5px;
		font-size: 2px;
		line-height: 3px;
		font-weight: 200;
		display: none;
		max-height: 100%;
		overflow-y: auto;
	}
	.col-sm-12.statNumber {
		font-size: 100px;
		font-weight: 200;
		font-family: open sans;
		color: #fff;
		margin-bottom: 0px;
	}
	.statTitle h1 {
		margin-bottom: 0px;
		font-family: open sans;
		font-size: 30px;
		margin-top: 0px;
		color: #fff;
	}
	.statSelected {
		padding: 10px 25px;
		border-radius: 200px;
		font-size: 14px;
		font-weight: 600;
		margin: 7px 5px;
		background: #aa7c61;
		color: #fff;
		border: 2px solid #aa7c61;
	}
	.statDeselected {
		padding: 10px 25px;
		border-radius: 200px;
		font-size: 14px;
		font-weight: 600;
		margin: 7px 5px;
		background: #fff;
		color: #734932;
		border: 2px solid #fff;
	}
	.speakers .row div {
		font-size: 10px;
		font-weight: 600;
		padding: 5px;
		width: 10%;
		float: none !important;
		display: inline-block !important;
		vertical-align: top !important;
	}
	.content.speakers {
		height: 100vh;
		overflow-y: auto;
		padding: 0% 5%;
		text-align: center;
	}
	
}

@media (min-width: 1300px) {
	#slide5 {
		background-image: url('/cisiweb2/image/aboutus/ar18/world.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 45%;
	}
	#slide5 .content {
		background: transparent;
	}
	#apacBlock {
		top: 50%;
		left: 77%;
	}
	#europeBlock,
	#europeBlock2 {
		top: 28%;
		left: 53%;
	}
	#africaBlock {
		top: 50%;
		left: 58%;
	}
	#middleeastBlock {
		top: 40%;
		left: 60%;
	}
	#indiaBlock {
		top: 40%;
		left: 68%;
	}
	#srilankaBlock {
		top: 50%;
		left: 68%;
	}
}

@media (min-width: 1400px) {
	#apacBlock {
		top: 50%;
		left: 80%;
	}
	#europeBlock,
	#europeBlock2 {
		top: 28%;
		left: 53%;
	}
	#africaBlock {
		top: 50%;
		left: 58%;
	}
	#middleeastBlock {
		top: 40%;
		left: 63%;
	}
	#indiaBlock {
		top: 40%;
		left: 73%;
	}
	#srilankaBlock {
		top: 50%;
		left: 72%;
	}
	.subText {
		font-size: 12px;
		margin-top: 30px;
	}
	
}

@media (min-width: 1500px) {
	
}

@media (min-width: 1600px) {

	.apacPic {
		float: right;
		width: 47% !important;
		margin-left: 4%;
	}
	
	#slide5 .col-sm-6.left {
		position: absolute;
		bottom: 0px;
		left: 0px;
		float: none;
		height: auto !important;
		padding: 2% !important;
		width: 35%;
	}
	h1 {
		font-size: 80px;
	}
	.fp-controlArrow.fp-prev {
		border-color: transparent #d4a990 transparent transparent !important;
		left: 15px !important;
		width: 0;
		border-width: 38.5px 34px 38.5px 0 !important;
	}

	.fp-controlArrow.fp-next {
		right: 15px !important;
		border-width: 38.5px 0 38.5px 34px !important;
		border-color: transparent transparent transparent #d4a990 !important;
	}
	.content {
		background: rgba(255,255,255,1);
		padding: 20px 50px;
		height: auto;
		max-height: 100%;
		text-align: left;
		overflow-y: auto;
		font-size: 16px;
	}
	.hiddenContent h3 {
		font-size: 12px;
	}
	.hiddenContent {
		padding: 9px;
	}
	.col-sm-12.statNumber {
		font-size: 160px;
	}
	.statTitle h1 {
		font-size: 50px;
	}
	.statSelected {
		padding: 13px 40px;
		font-size: 16px;
	}
	.statDeselected {
		padding: 13px 40px;
		font-size: 16px;
	}
	.speakers .row div {
		font-size: 12px;
		font-weight: 600;
		float: none !important;
		display: inline-block !important;
		vertical-align: top !important;
		width: 10%;
		padding: 20px;
		margin-bottom: 0px;
	}
	.content.speakers {
		height: 100vh;
		overflow-y: auto;
		padding: 2% 5%;
		text-align: center;
	}
	#apacBlock {
		top: 50%;
		left: 82%;
	}
	#europeBlock,
	#europeBlock2 {
		top: 28%;
		left: 53%;
	}
	#africaBlock {
		top: 50%;
		left: 58%;
	}
	#middleeastBlock {
		top: 40%;
		left: 63%;
	}
	#indiaBlock {
		top: 40%;
		left: 73%;
	}
	#srilankaBlock {
		top: 50%;
		left: 72%;
	}
	
}

@media (min-width: 1700px) {
	#apacBlock {
		top: 50%;
		left: 77%;
	}
	#europeBlock,
	#europeBlock2 {
		top: 28%;
		left: 53%;
	}
	#africaBlock {
		top: 50%;
		left: 55%;
	}
	#middleeastBlock {
		top: 40%;
		left: 60%;
	}
	#indiaBlock {
		top: 40%;
		left: 70%;
	}
	#srilankaBlock {
		top: 50%;
		left: 68%;
	}
}

@media (max-width: 769px) {
	#slide2,#slide3,#slide4,#slide5,#slide6,#slide7,#slide8,#slide9,#slide10,#slide11,#slide12 {
		display: none !important;
	}
}