/* IF GRID */
@media (min-width:991px) {
    .custom.mosaic {
		display: grid;
		width: 100%;
  		grid-column-gap: 25px;
        align-items: stretch;
		padding: 25px 25px 0 !important
    }
}


/* IF FLEX */
@media (min-width:991px) {
    .custom.mosaic.flex {
		display: flex;
		flex-flow: row wrap;
		grid-column-gap: 0;
		padding: 0 12.5px 25px !important
    }
}

@media (min-width:1381px) {
    .custom.mosaic.flex {
		padding: 0 12.5px !important
    }
}

@media (min-width:991px) {
	.custom.mosaic.flex > div, .custom.mosaic.flex > a {
		flex: 1 1 auto;
		padding: 0 10px;
		overflow: hidden
	}
}

@media (min-width:1381px) {
	.custom.mosaic.flex > div, .custom.mosaic.flex > a {
		padding: 25px 10px
	}
}


/* CHILDREN */
.custom.mosaic > div, .custom.mosaic > a {
    margin-bottom: 25px
}

@media (min-width:991px) {
	.custom.mosaic > div, .custom.mosaic > a {
		display: flex;
		flex-flow: row wrap;
        align-content: center
	}
}

.custom.mosaic.flex > div, .custom.mosaic.flex > a {
    margin-bottom: 0
}


/* TEXT REVEAL ON HOVER: CSS SUFFIX 'REVEAL' ONLY */
@media (min-width:991px) {
    .mosaic.reveal h2, .mosaic.reveal p {
        opacity: 0;
        flex: 1 1 100%
    }
}

@media (min-width:991px) {
    .custom.mosaic.reveal > div:hover h2, .custom.mosaic.reveal > div:hover p, .custom.mosaic.reveal > a:hover h2, .custom.mosaic.reveal > a:hover p {
        opacity: 1
    }
}


/* CURSOR POINTER ON H2 AND P: HTML WITH LINK CHILDREN ONLY */
.custom.mosaic > a h2, .custom.mosaic > a p {
	cursor: pointer
}


/* ALL TYPOGRAPHY */
@media (min-width:991px) {
    .mosaic h2, .mosaic h3, .mosaic p {
		text-align: center;
        padding: 0 15%
    }
}

@media (min-width:991px) and (max-width:1400px) {
	.mosaic.flex h2 {
		font-size: 16px;
		line-height: 20px
	}
}

.mosaic h2 {
    margin-bottom: 20px
}

@media (min-width:991px) {
    .mosaic h2 {
        margin-bottom: 5px
    }
}


/* ALL IMAGES */
@media (min-width:991px) {
    .custom.mosaic > div::before, .custom.mosaic > a::before {
        content: "";
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px
    }

    .custom.mosaic div:hover::before, .custom.mosaic a:hover::before {
		opacity: 0.1
	}
}

@media (min-width:991px) {
    .custom.mosaic.flex > div::before, .custom.mosaic.flex > a::before {
        margin: 10px
    }
}

@media (min-width:1381px) {
    .custom.mosaic.flex > div::before, .custom.mosaic.flex > a::before {
        margin: 20px 10px 20px
    }
}


/* IMAGE POP ON HOVER - TEXT DISAPPEARS */
.custom.mosaic.imgpop div::before, .custom.mosaic.imgpop a::before {
	opacity: 0.1;
	-ms-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear
}

@media (min-width:991px) {
    .custom.mosaic.imgpop div:hover::before, .custom.mosaic.imgpop a:hover::before {
		opacity: 1;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px
	}
	
	.custom.mosaic.imgpop div h2, .custom.mosaic.imgpop div p, .custom.mosaic.imgpop a h2, .custom.mosaic.imgpop a p {
		top: 0;
		-ms-transition: all 0.1s linear;
		-webkit-transition: all 0.1s linear;
		-o-transition: all 0.1s linear;
		transition: all 0.1s linear
	}
	
	.custom.mosaic.imgpop div:hover h2, .custom.mosaic.imgpop div:hover p, .custom.mosaic.imgpop a:hover h2, .custom.mosaic.imgpop a:hover p {
		top: -50px;
		opacity: 0
	}
}


/* MOSAIC MEDIA FLEX (HOMEPAGE) */
@media (min-width:991px) {
	.connect > a {
		flex: 1 1 auto !important;
		height: 200px
	}	
}

@media (min-width:1381px) {
	.connect > a {
		flex: 0 0 20% !important;
		height: 200px
	}	
}

@media (min-width:991px) {
	.connect .mos1::before { background-image: url('https://internationalconservation.org/images/mosaics/connect/1.jpg') }
	.connect .mos2::before { background-image: url('https://internationalconservation.org/images/mosaics/connect/2.jpg') }	
	.connect .mos3::before { background-image: url('https://internationalconservation.org/images/mosaics/connect/3.jpg') }
	.connect .mos4::before { background-image: url('https://internationalconservation.org/images/mosaics/connect/4.jpg') }
	.connect .mos5::before { background-image: url('https://internationalconservation.org/images/mosaics/connect/5.jpg') }
}


/* ICCF GALA (HOMEPAGE) */
@media (min-width:991px) {
    .iccfgala {
        grid-template-areas:
            'mos1 mos2'
			'mos3 mos4'
			'mos5 mos6';
        grid-template-columns: repeat(2, auto);
  		grid-template-rows: 350px 350px 350px
    }
}

@media (min-width:1400px) {
	.iccfgala {
        grid-template-areas:
            'mos1 mos2 mos3'
			'mos4 mos4 mos5'
            'mos4 mos4 mos6';
        grid-template-columns: repeat(3, auto)
    }
}

@media (min-width:1601px) {
	.iccfgala {
        grid-template-rows: 400px 400px 400px
    }
}

@media (min-width:991px) {
    .iccfgala .mos1 { grid-area: mos1 }
    .iccfgala .mos2 { grid-area: mos2 }
    .iccfgala .mos3 { grid-area: mos3 }
    .iccfgala .mos4 { grid-area: mos4 }
    .iccfgala .mos5 { grid-area: mos5 }
    .iccfgala .mos6 { grid-area: mos6 }
}

@media (min-width:991px) {
    .iccfgala .mos1::before { background-image: url('https://www.internationalconservation.org/images/gala/mosaic/gala1.jpg') }
	.iccfgala .mos2::before { background-image: url('https://www.internationalconservation.org/images/gala/mosaic/gala2.jpg') }
	.iccfgala .mos3::before { background-image: url('https://www.internationalconservation.org/images/gala/mosaic/gala3.jpg') }
	.iccfgala .mos4::before { background-image: url('https://www.internationalconservation.org/images/gala/mosaic/gala4.jpg') }
	.iccfgala .mos5::before { background-image: url('https://www.internationalconservation.org/images/gala/mosaic/gala5.jpg') }
	.iccfgala .mos6::before { background-image: url('https://www.internationalconservation.org/images/gala/mosaic/gala6.jpg') }
}

    
/* AWARDS DINNER 2021 */
@media (min-width:991px) {
    .custom.mosaic.awards_dinner {
		grid-template-areas:
            'mos1 mos2'
			'mos3 mos4'
			'mos5 mos6'
			'mos7 mos8'
			'mos9 mos10'
			'mos11 mos12'
			'mos13 mos14'
			'mos15 mos16';
        grid-template-columns: repeat(2, auto);
  		grid-template-rows: 350px 350px 350px 350px 350px 350px 350px 350px
    }
}

@media (min-width:1400px) {
    .custom.mosaic.awards_dinner {
		grid-template-areas:
            'mos1 mos2 mos3 mos4'
			'mos5 mos6 mos7 mos8'
			'mos9 mos10 mos11 mos12'
			'mos13 mos14 mos15 mos16';
        grid-template-columns: repeat(4, auto);
  		grid-template-rows: 250px 250px 250px 250px
    }
}

@media (min-width:1601px) {
    .custom.mosaic.awards_dinner {
  		grid-template-rows: 350px 350px 350px 350px
    }
}

@media (min-width:991px) {
    .awards_dinner .mos1 { grid-area: mos1 }
    .awards_dinner .mos2 { grid-area: mos2 }
    .awards_dinner .mos3 { grid-area: mos3 }
    .awards_dinner .mos4 { grid-area: mos4 }
    .awards_dinner .mos5 { grid-area: mos5 }
    .awards_dinner .mos6 { grid-area: mos6 }
	.awards_dinner .mos7 { grid-area: mos7 }
    .awards_dinner .mos8 { grid-area: mos8 }
    .awards_dinner .mos9 { grid-area: mos9 }
    .awards_dinner .mos10 { grid-area: mos10 }
    .awards_dinner .mos11 { grid-area: mos11 }
    .awards_dinner .mos12 { grid-area: mos12 }
	.awards_dinner .mos13 { grid-area: mos13 }
    .awards_dinner .mos14 { grid-area: mos14 }
    .awards_dinner .mos15 { grid-area: mos15 }
    .awards_dinner .mos16 { grid-area: mos16 }
}

@media (min-width:991px) {
    .awards_dinner .mos1::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/01.jpg') }
    .awards_dinner .mos2::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/02.jpg') }
    .awards_dinner .mos3::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/03.jpg') }
    .awards_dinner .mos4::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/04.jpg') }
    .awards_dinner .mos5::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/05.jpg') }
    .awards_dinner .mos6::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/06.jpg') }	
	.awards_dinner .mos7::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/07.jpg') }
    .awards_dinner .mos8::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/08.jpg') }
    .awards_dinner .mos9::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/12.jpg') }
    .awards_dinner .mos10::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/10.jpg') }
    .awards_dinner .mos11::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/11.jpg') }
    .awards_dinner .mos12::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/09.jpg') }
	.awards_dinner .mos13::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/13.jpg') }
	.awards_dinner .mos14::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/14.jpg') }
	.awards_dinner .mos15::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/15.jpg') }
	.awards_dinner .mos16::before { background-image: url('https://www.internationalconservation.org/images/gala/2021/mosaic/16.jpg') }
}


/* CONFERENCE ON POLICY COHERENCE AND POLITICAL CONSISTENCY */
@media (min-width:991px) {
    .custom.mosaic.coricon {
		grid-template-areas:
            'mos1 mos2'
			'mos3 mos4'
			'mos5 mos6'
			'mos7 mos8'
			'mos9 mos10'
			'mos11 mos12'
			'mos13 mos14'
			'mos15 mos16';
        grid-template-columns: repeat(2, auto);
  		grid-template-rows: 350px 350px 350px 350px 350px 350px 350px 350px
    }
}

@media (min-width:1400px) {
    .custom.mosaic.coricon {
		grid-template-areas:
            'mos1 mos2 mos3 mos4'
			'mos5 mos6 mos7 mos8'
			'mos9 mos10 mos11 mos12'
			'mos13 mos14 mos15 mos16';
        grid-template-columns: repeat(4, auto);
  		grid-template-rows: 250px 250px 250px 250px
    }
}

@media (min-width:1601px) {
    .custom.mosaic.coricon {
  		grid-template-rows: 350px 350px 350px 350px
    }
}

@media (min-width:991px) {
    .coricon .mos1 { grid-area: mos1 }
    .coricon .mos2 { grid-area: mos2 }
    .coricon .mos3 { grid-area: mos3 }
    .coricon .mos4 { grid-area: mos4 }
    .coricon .mos5 { grid-area: mos5 }
    .coricon .mos6 { grid-area: mos6 }
	.coricon .mos7 { grid-area: mos7 }
    .coricon .mos8 { grid-area: mos8 }
    .coricon .mos9 { grid-area: mos9 }
    .coricon .mos10 { grid-area: mos10 }
    .coricon .mos11 { grid-area: mos11 }
    .coricon .mos12 { grid-area: mos12 }
	.coricon .mos13 { grid-area: mos13 }
    .coricon .mos14 { grid-area: mos14 }
    .coricon .mos15 { grid-area: mos15 }
    .coricon .mos16 { grid-area: mos16 }
}

@media (min-width:991px) {
    .coricon .mos1::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/01.jpg') }
    .coricon .mos2::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/02.jpg') }
    .coricon .mos3::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/03.jpg') }
    .coricon .mos4::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/04.jpg') }
    .coricon .mos5::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/05.jpg') }
    .coricon .mos6::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/06.jpg') }	
	.coricon .mos7::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/07.jpg') }
    .coricon .mos8::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/08.jpg') }
    .coricon .mos9::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/12.jpg') }
    .coricon .mos10::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/10.jpg') }
    .coricon .mos11::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/11.jpg') }
    .coricon .mos12::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/09.jpg') }
	.coricon .mos13::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/13.jpg') }
	.coricon .mos14::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/14.jpg') }
	.coricon .mos15::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/15.jpg') }
	.coricon .mos16::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/16.jpg') }
}


/* MONGOLIA CAUCUS LAUNCH */
@media (max-width:991px) {
	.custom.mosaic.ncc_launch {
		padding: 0 5%
	}
	
	.custom.mosaic.ncc_launch img {
		margin-bottom: 20px
	}
	
	.custom.mosaic.ncc_launch p {
		font-weight: bold;
		padding-bottom: 30px
	}
}

@media (min-width:991px) {
    .custom.mosaic.ncc_launch {
		grid-template-areas:
            'mos1 mos2'
			'mos3 mos4'
			'mos5 mos6'
			'mos7 mos8';
        grid-template-columns: repeat(1, auto);
  		grid-template-rows: 350px 350px 350px 350px 350px 350px 350px 350px
    }
}

@media (min-width:1400px) {
    .custom.mosaic.ncc_launch {
		grid-template-areas:
            'mos1 mos2 mos3 mos4'
			'mos5 mos6 mos7 mos8';
        grid-template-columns: repeat(2, auto);
  		grid-template-rows: 250px 250px
    }
}

@media (min-width:1601px) {
    .custom.mosaic.ncc_launch {
  		grid-template-rows: 350px 350px
    }
}

@media (min-width:991px) {
    .ncc_launch .mos1 { grid-area: mos1 }
    .ncc_launch .mos2 { grid-area: mos2 }
    .ncc_launch .mos3 { grid-area: mos3 }
    .ncc_launch .mos4 { grid-area: mos4 }
    .ncc_launch .mos5 { grid-area: mos5 }
    .ncc_launch .mos6 { grid-area: mos6 }
	.ncc_launch .mos7 { grid-area: mos7 }
    .ncc_launch .mos8 { grid-area: mos8 }
}

@media (min-width:991px) {
    .ncc_launch .mos1::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/1.webp') }
    .ncc_launch .mos2::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/2.webp') }
    .ncc_launch .mos3::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/3.webp') }
    .ncc_launch .mos4::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/4.webp') }
    .ncc_launch .mos5::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/5.webp') }
    .ncc_launch .mos6::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/6.webp') }	
	.ncc_launch .mos7::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/7.webp') }
    .ncc_launch .mos8::before { background-image: url('/images/programs/asia/mongolia/ncc_launch/mosaic/8.webp') }
}