/* CSS Document */


.mobar20-titlebg {
    background-size: cover;
    background-position: center top;
    position: relative;
    padding-top: 50px;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    width: 90%;
}

@media only screen and (max-width : 100000000px) {.mobar20-titlebg {padding-top: 120px;}}
@media only screen and (max-width : 1000px) {.mobar20-titlebg {padding-top: 100px;}}

.mobar20-titlebg h1 {font-size:36px; color: #00becf; line-height: 44px;}
.mobar20-titlebg h1 span {color: #fff !important;}

.mobar20-titlebg p, .ar20mobbg p {font-size:16px !important; line-height:20px !important; color:#fff;}


.mobdownloadcircle {
    background: #00becf;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 99;
}

.mobdownloadcircle a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

.mobdownloadcircle div {
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    font-size: 300%;
    color: #FFF;
    position: absolute;
    text-align: center;
    width: 100%;
    background-image: url(https://ciwaprogram.org/wp-content/themes/ciwa/images/reportbuttonar20.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px 60px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.mobdownloadcircle img {
    width: 50px;
    height: auto;
}

.ar20mobbg {padding: 5%; background-size: cover;
    background-position: center top; margin-top: 5%}
	
.ar20mobbg h3 { font-size:16px !important; line-height:20px !important; color:#00becf !important; font-weight:bold; margin-bottom:0; font-family:Arial, Helvetica, sans-serif !important; margin-top:0 !important}

.ar20mobbg h3+p {margin-bottom:20px}

.ar20mobvid .ar20vid-holder {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

.ar20mobvid h2{color: #00becf !important;}

.ar20mobinfo img  {width: 100%; height: auto;}
.ar20mobinfo {padding-left: 5%; padding-right:5%}

.margin-top5 {margin-top: 5%;}

.ar20mobbg .ar20-left {width: 20%;}

.ar20mobbg .ar20-right a {font-size: 10px;
line-height: 14px;}


/* CSS Document */

.arvideo { text-align:center;}
.arvideo h2 {color: #55c4c1 !important; text-align:center !important; margin-bottom:5%;}

.ar20vid-holder {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 40px;
}

p {font-size: 18px !important}

.main-holder {overflow:hidden}


.lazyload.highlazy {margin-top: 0vh !important}

.page-template-report2020 h2 {font-family: 'Oswald', sans-serif; margin-top: 0 !important; margin-bottom: 0 !important; border:none !important; font-size: 3vw; color:#fff; line-height:3vw; padding-bottom: 0 !important; text-align:left;
}

@media only screen and (max-width : 812px) {
.page-template-report2020 h2 {
    font-family: 'Oswald', sans-serif;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    border: none !important;
    font-size: 150%; line-height:1;
}}

.page-template-report2020 h3 {font-family: 'Oswald', sans-serif; margin-top: 0 !important; margin-bottom: 0 !important; border:none !important; font-size: 2vw; color:#FFF; line-height:2vw; padding-bottom: 0 !important; 
}

.intropara {width: 60%; position:relative}
.introparatwo {width: 80%; position:relative}

.introcircle1 {
    background: #00becf;
    border-radius: 50%;
	position:absolute; bottom: 0.75vw;
	width: 11vw;
height: 11vw;
right: 11.6vw;
}
.introcircle2 {
    background: #e56a51;
    border-radius: 50%;
    width: 8vw;
    height: 8vw;
    position: absolute;
    right: 19vw;
    bottom: 8vw;
    z-index: 9;
    opacity: 0.8;
}

.downloadcircle1 {
    background: #00becf;
    border-radius: 50%;
    width: 16vw;
    height: 16vw;
    position: absolute;
    right: -100px;
    top: 0px;
    z-index: 9;
}
.downloadcircle {
    background: #00becf;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 99;
}
@media only screen and (max-width : 812px) {
.downloadcircle {
    background: #00becf;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: relative;
    left: 5%;
    bottom: 10px;
    z-index: 99;
}	
}

.fulldownloadcircle {
    background: #00becf;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 99;
}
.ar20-left {
    position: relative;
    width: 10%;
    height: 80px;
    display: inline-block;
    margin-right: 20px;
    max-width: 80px;
}
.ar20-right {
    display: inline-block;
    width: 20%;
    position: relative;
    height: 80px;
	line-height: 24px;
}
.ar20-right a {
	position: absolute;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	color: #FFF;
	font-size: 1.5vw;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
}
.ar20-right a:hover {color: #e56a51 !important}
.full-download-holder { width: 100%; position:relative; margin-left:auto; margin-right:auto; margin-bottom: 40px;} 
.full-download-holder:last-of-type { margin-bottom:0 !important}

.downloadcircle:hover, .fulldownloadcircle:hover, .downloadcircle1:hover{background: #e56a51;; border-radius: 50%;}
.downloadcircle a, .fulldownloadcircle a, .downloadcircle1 a { position:absolute; top:0; left:0; right:0; bottom:0; z-index:99}
.downloadcircle div img, .downloadcircle1 div img, .fulldownloadcircle div img{width:50px; height:auto}

 .downloadcircle div, .downloadcircle1 div, .fulldownloadcircle div{
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	font-size: 300%;
	color: #FFF;
	position: absolute;
	text-align: center;
	width: 100%;
	background-image: url(https://ciwaprogram.org/wp-content/themes/ciwa/images/reportbuttonar20.png);
	background-repeat: no-repeat;
	background-position: center center; background-size: 40px 60px;
padding-top: 10px;
padding-bottom: 20px;
}
.ar20highlightscircle div{ font-size:120% !important; }

.introcircle1 div, .introcircle2 div, .ar20highlightscircle div {-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	font-size: 300%;
	color: #FFF;
	position: absolute;
	text-align: center;
	width: 80%; left: 10%; line-height: 120%; font-family: 'Oswald', sans-serif;}
	
.introcircle2 div {font-size: 200% !important}

.ar20highlightscircle {background: #e56a51;
    border-radius: 50%;
    width: 16.8%;
    padding-top: 16.8%;
    position: relative; display:inline-block;
    top: 10px;
    z-index: 999;
    margin-right:4%; }

.ar20highlightscircletwo { width: 24% !important;
    padding-top: 24% !important;}

.ar20highquote90 {width:90% !important}
.ar20highlightscirclelast {margin-right:0 !important}

.ar20highlightscircle:hover {background-color: #00becf; cursor:pointer;}

.ar20highquote {position:absolute; left:0; top:0; width:100%; text-align:left !important;}

.arh01 ~ .ar20-highlightsholder .ar20highlight01 {opacity:0; width:100%; transition: 0.4s ease; color:#fff; font-size:22px; line-height: 1.3;}
.arh01:hover ~ .ar20-highlightsholder .ar20highlight01 { opacity:1;}

.arh02 ~ .ar20-highlightsholder .ar20highlight02 {opacity:0; width:100%; transition: 0.4s ease; color:#fff; font-size:22px; line-height: 1.3;}
.arh02:hover ~ .ar20-highlightsholder .ar20highlight02 {opacity:1;}

.arh03 ~ .ar20-highlightsholder .ar20highlight03 {opacity:0; width:100%; transition: 0.4s ease; color:#fff; font-size:22px; line-height: 1.3;}
.arh03:hover ~ .ar20-highlightsholder .ar20highlight03 { opacity:1;}

.arh04 ~ .ar20-highlightsholder .ar20highlight04 {opacity:0; width:100%; transition: 0.4s ease; color:#fff; font-size:22px; line-height: 1.3;}
.arh04:hover ~ .ar20-highlightsholder .ar20highlight04 {opacity:1;}

.arh05 ~ .ar20-highlightsholder .ar20highlight05 {opacity:0; width:100%; transition: 0.4s ease; color:#fff; font-size:22px; line-height: 1.3;}
.arh05:hover ~ .ar20-highlightsholder .ar20highlight05 {opacity:1;}

.translatepress-fr_FR .arh01 ~ .ar20-highlightsholder .ar20highlight01 , .translatepress-fr_FR .arh02 ~ .ar20-highlightsholder .ar20highlight02, .translatepress-fr_FR .arh03 ~ .ar20-highlightsholder .ar20highlight03, .translatepress-fr_FR .arh03 ~ .ar20-highlightsholder .ar20highlight03 {font-size: 18px !important}

.translatepress-fr_FR .ar20highlightscircle div {font-size:100% !important}

.ar20-highlightsholder {position:relative; width:90%; margin-top: 60px; padding-bottom:100px;}


.ar20-highlightsholdertwo {padding-bottom: 140px !important; width:95% !important;}

.ar20highlightquote {display:none}
.ar20highlightscircle:hover .ar20highlightquote { display:block;}

.addthisholder h2 {opacity:1 !important}

.nonhome-content-holder {overflow:hidden}
.ar20-bgload {
	position: absolute;
	visibility: hidden;
	height: 1px;
	width: 1px;
	left: -9000px;
	top: 1px;
}

.ar20-quotebox p {opacity:0}


@keyframes slideIn {
  to { transform: translateX(-100%); }
}

/*
.slidebox-holder {position:relative; width: 90%;
	margin-left: auto;
	margin-right: auto; overflow:hidden; margin-top: 20px;
	margin-bottom: 20px;}
*/
	
.slidebox-holder {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: 5%;
    overflow: hidden;
    margin-top: ;
    margin-bottom: 20px;
    z-index: 99; overflow:hidden;
}

@media only screen and (max-width : 812px) {
.slidebox-holder {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: 5%;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 20px;
    z-index: 99;
}
}
.slidebox-holder-last {margin-bottom: 0px !important;}

.highlight-slidebox-holder {
    position: relative;
    width: 40%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 16.2%; z-index:90; overflow:hidden;
}

.overview-slidebox-holder {
	position: relative;
	width: 40%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 17.5%; z-index:90; overflow:hidden;
}
.overview-slidebox-holder01 {padding-top: 16.8% !important;}
.overview-slidebox-holder02 {padding-top: 15.3% !important;}
.overview-slidebox-holder03 {padding-top: 17.5% !important;}

@media only screen and (max-width : 812px) {
.highlight-slidebox-holder {
    width: 80%;
    padding-top: 21%;
}	

.overview-slidebox-holder {
    position: relative;
    width: 80%;
    padding-top: 29%;
}
	
}

.ar20-slideinfographic {
	padding: 0;
	position: absolute;
	left: 120%;
	top:0; bottom:0; width: 100%;
	animation: slidebox 2s 0s ease;
	-webkit-animation: slidebox 2s 0s ease;
	 moz-animation: slidebox 2s 0s ease;
  -o-animation: slidebox 2s 0s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards; 
}
.ar20-slideinfographic img {width:100%; height:auto}

.ar20-slidebox {
	padding: 20px;
	position: relative;
	left: 120%;
	animation: slidebox 2s 1s ease;
	-webkit-animation: slidebox 2s 1s ease;
	 moz-animation: slidebox 2s 1s ease;
  -o-animation: slidebox 2s 1s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;   
	color: #fff;
}

.ar20-slideboxtwo {
	position: relative;
	left: 0;
	color: #fff;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}

/*
.ar20-cent p {  text-shadow: 1px 1px 1px #083a60; font-size:18px;}
  */
  
.ar20-slidebox li {
	color: #fff;
	margin-bottom: 15px;
	list-style-type: square; line-height: 1.3;
font-size: 110%; opacity:0;
}

@media only screen and (max-width : 812px) {
	ar20-slidebox li {line-height: 130%; margin-bottom: 30px;
}}
.ar20-slidebox li:last-of-type {margin-bottom:0 !important}

@keyframes slidebox {0% {left: 120%;}100% {left: 0;}}
@-moz-keyframes slidebox {0% {left: 120%;}100% {left: 0;}}
@-webkit-keyframes slidebox {0% {left: 120%;}100% {left: 0;}}
@-o-keyframes slidebox {0% {left: 120%;}100% {left: 0}}
@-ms-keyframes slidebox {0% {left: 120%;}100% {left: 0;}}








.ar20-intro p {color:#FFF; font-size:18px !important}

.ar20-intro p strong em {font-size: 14px}

.ar2020-whiteshape {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 9;
}


.relative {position:relative}

.ar20-button {position:relative; background-color:#e56a51; color: #FFF !important; border-radius: 5px; cursor: pointer; display:inline-block;
font-size: 18px;
padding: 12px 24px;
text-align: center;
text-decoration: none !important; text-shadow: none !important; opacity:0;}

.addthisholder .widgettitle {
    font-size: 110% !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    font-weight: bold !important;
	padding-bottom: 10px !important; text-align:center !important;
}
.addthisholder h2 {
    color: #e56a51 !important; line-height:normal !important
}
.ar20-highlights h2 {margin-bottom: 40px !important}

.addthisholder h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    position: relative !important;
    margin-top: 40px !important;
}

@media only screen and (max-width : 812px) {
.ar20-button {font-size: 80%;}

.addthisholder {margin-top: 40px;}

}

.ar20-button:hover {background-color:#603d75}

.ar20-purplebg {
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
	background-image: url(https://www.ciwaprogram.org/wp-content/themes/ciwa/images/ar2020-purpleshape.png); background-size:cover;
}

.ar20-bluebg {
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
	background-image: url(https://www.ciwaprogram.org/wp-content/themes/ciwa/images/ar2020-blueshape.png); background-size:cover;
}



.margin-top-36 {margin-top: 20px !important; text-align:left; opacity:1 !important; margin-bottom:0 !important}

.module {
	visibility: hidden;
}
.come-in {
	visibility: visible !important;
  animation: fadeIn 1s 0s ease;
  -webkit-animation: fadeIn 1s 0s ease;
  -moz-animation: fadeIn 1s 0s ease;
  -o-animation: fadeIn 1s 0s ease;
  -ms-animation: fadeIn 1s 0s ease;
}

/*
@keyframes come-in {
  to { transform: translateX(0); }
}
*/
  
@keyframes fadeIn{0% {opacity:0;}100% {opacity:1;}}
@-moz-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}
@-webkit-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}
@-o-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}
@-ms-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}


.fade1 {animation: fadeIn 2s 1s ease;
  -webkit-animation: fadeIn 2s 1s ease;
  -moz-animation: fadeIn 2s 1s ease;
  -o-animation: fadeIn 2s 1s ease;
  -ms-animation: fadeIn 2s 1s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade2 {animation: fadeIn 2s 1.5s ease;
  -webkit-animation: fadeIn 2s 1.5s ease;
  -moz-animation: fadeIn 2s 1.5s ease;
  -o-animation: fadeIn 2s 1.5s ease;
  -ms-animation: fadeIn 2s 1.5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade3 {animation: fadeIn 2s 2s ease;
  -webkit-animation: fadeIn 2s 2s ease;
  -moz-animation: fadeIn 2s 2s ease;
  -o-animation: fadeIn 2s 2s ease;
  -ms-animation: fadeIn 2s 2s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}


.fade4 {animation: fadeIn 2s 2.5s ease;
  -webkit-animation: fadeIn 2s 2.5s ease;
  -moz-animation: fadeIn 2s 2.5s ease;
  -o-animation: fadeIn 2s 2.5s ease;
  -ms-animation: fadeIn 2s 2.5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}


.fade5 {animation: fadeIn 2s 3s ease;
  -webkit-animation: fadeIn 2s 3s ease;
  -moz-animation: fadeIn 2s 3s ease;
  -o-animation: fadeIn 2s 3s ease;
  -ms-animation: fadeIn 2s 3s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}


.fade6 {animation: fadeIn 2s 3.5s ease;
  -webkit-animation: fadeIn 2s 3.5s ease;
  -moz-animation: fadeIn 2s 3.5s ease;
  -o-animation: fadeIn 2s 3.5s ease;
  -ms-animation: fadeIn 2s 3.5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade7 {animation: fadeIn 2s 4s ease;
  -webkit-animation: fadeIn 2s 4s ease;
  -moz-animation: fadeIn 2s 4s ease;
  -o-animation: fadeIn 2s 4s ease;
  -ms-animation: fadeIn 2s 4s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade8 {animation: fadeIn 2s 4.5s ease;
  -webkit-animation: fadeIn 2s 4.5s ease;
  -moz-animation: fadeIn 2s 4.5s ease;
  -o-animation: fadeIn 2s 4.5s ease;
  -ms-animation: fadeIn 2s 4.5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade9 {animation: fadeIn 2s 5s ease;
  -webkit-animation: fadeIn 2s 5s ease;
  -moz-animation: fadeIn 2s 5s ease;
  -o-animation: fadeIn 2s 5s ease;
  -ms-animation: fadeIn 2s 5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade10 {animation: fadeIn 2s 5.5s ease;
  -webkit-animation: fadeIn 2s 5.5s ease;
  -moz-animation: fadeIn 2s 5.5s ease;
  -o-animation: fadeIn 2s 5.5s ease;
  -ms-animation: fadeIn 2s 5.5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade11 {animation: fadeIn 2s 6s ease;
  -webkit-animation: fadeIn 2s 6s ease;
  -moz-animation: fadeIn 2s 6s ease;
  -o-animation: fadeIn 2s 6s ease;
  -ms-animation: fadeIn 2s 6s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade12 {animation: fadeIn 2s 6.5s ease;
  -webkit-animation: fadeIn 2s 6.5s ease;
  -moz-animation: fadeIn 2s 6.5s ease;
  -o-animation: fadeIn 2s 6.5s ease;
  -ms-animation: fadeIn 2s 6.5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade13 {animation: fadeIn 2s 7s ease;
  -webkit-animation: fadeIn 2s 7s ease;
  -moz-animation: fadeIn 2s 7s ease;
  -o-animation: fadeIn 2s 7s ease;
  -ms-animation: fadeIn 2s 7s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade14 {animation: fadeIn 2s 7.5s ease;
  -webkit-animation: fadeIn 2s 7.5s ease;
  -moz-animation: fadeIn 2s 7.5s ease;
  -o-animation: fadeIn 2s 7.5s ease;
  -ms-animation: fadeIn 2s 7.5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade15 {animation: fadeIn 2s 8s ease;
  -webkit-animation: fadeIn 2s 8s ease;
  -moz-animation: fadeIn 2s 8s ease;
  -o-animation: fadeIn 2s 8s ease;
  -ms-animation: fadeIn 2s 8s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade16 {animation: fadeIn 2s 8.5s ease;
  -webkit-animation: fadeIn 2s 8.5s ease;
  -moz-animation: fadeIn 2s 8.5s ease;
  -o-animation: fadeIn 2s 8.5s ease;
  -ms-animation: fadeIn 2s 8.5s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.fade17 {animation: fadeIn 2s 9s ease;
  -webkit-animation: fadeIn 2s 9s ease;
  -moz-animation: fadeIn 2s 9s ease;
  -o-animation: fadeIn 2s 9s ease;
  -ms-animation: fadeIn 2s 9s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

.ar20-titlebg {
	min-height: 30vw;
	width: 90vw; position:relative; margin-left:auto; margin-right:auto; margin-top: 100px; }
	
@media only screen and (max-width : 1200px) {
	.ar20-titlebg {
	min-height: 35vw;
}}
	
@media only screen and (max-width : 812px) {
.ar20-titlebg {height: auto;
    width: 90vw;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;}	
}




.ar20-titlebg h1 {color: #00becf; font-size: 3.4vw; font-family:'Oswald', sans-serif !important; text-align:left; line-height:120%;}
@media only screen and (max-width : 812px) {
.ar20-titlebg h1 {color: #00becf; font-size: 130%; opacity:1; line-height:140%; }
}
.ar20-titlebg h1 span {color: #9df6f5; font-size: 3vw}
.translatepress-fr_FR .ar20-titlebg h1 span {color: #9df6f5; font-size: 2.6vw}
.ar20-titlebg h1 span:last-of-type {color: #fff !important;
position: relative;
width: 42.5vw;
display: inline-block;}


.ar20-titlebg h1 span img{
	position: absolute;
right: -29.4vw;
width: 28vw;
height: auto;
top: 2vw; opacity:0;
}



.ar20-bg {
	background-image: url(https://ciwaprogram.org/wp-content/themes/ciwa/jQuery-Visible/placeholder.gif);
	background-size: cover;
	background-position: center top;
	position: relative
}
	
.ar20-titlebg .ar20-intro {
    z-index: 100;
    position: absolute;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    top: 1.3vw;
left: 3vw;
z-index: 99;
}

@media only screen and (max-width : 812px) {
.ar20-titlebg .ar20-intro {
    z-index: 100;
    position: relative;
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    top: 0;
    left: 0;
    z-index: 99;
    padding-top: 5%;
    padding-bottom: 5%;
}
}

.ar20-highlights {
	height: auto;
	width: 90vw; margin-left:auto; margin-right:auto
}

.ar20-end {
	height: auto;
	width: 90vw; margin-left:auto; margin-right:auto;
	background-position: center 10%;
}
.ar20-overview {
	width: 90vw; margin-left:auto; margin-right:auto;
}

.ar20-strategic {
	height:auto;
	width: 90vw; margin-left:auto; margin-right:auto;
	background-position: center 20%; padding-bottom: 40px;
}

@media only screen and (max-width : 812px) {
.ar20-highlights, .ar20-end, .ar20-strategic {
	height: auto;	
}
.ar20-overview {height:auto; padding-top: 5%;
padding-bottom: 5%;}

}


.ar20-cent {
	position: relative;
	text-align: center;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	z-index: 99;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 3vw;
	padding-right: 3vw;
	padding-bottom: 3vw;
	padding-left: 3vw;
}

@media only screen and (max-width : 812px) {
.ar20-cent.cent-overview {
    position: relative;
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    top: 0%;
    left: 0;
    z-index: 99;
}}

.ar20-centleft {text-align: left !important}

.ar20-highlights .ar20-cent-mob {display:none}

@media only screen and (max-width : 812px) {
.ar20-highlights .ar20-cent {display:none}
.ar20-highlights .ar20-cent-mob {display:block; padding:5%;}
.ar20-highlights .ar20-cent-mob p {color: #fff}
.ar20-highlights .ar20-cent-mob h3 {
	color: #fff;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
}}

.ar20-bg-content {margin-top: 20px; color:#FFF; font-size: 120%;}

@media only screen and (max-width : 812px) {
.ar20-bg-content {margin-top: 20px;	}
}


/*.three-boxes {width:90%; margin-left:5%; margin-right:5%; margin-top:80px; margin-bottom: 20px;} */

.three-boxes {
	width: 100%; text-align:center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
	padding-bottom: 40px;
    z-index: 99;
    position: relative;
}

@media only screen and (max-width : 812px) {
	.three-boxes {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 20px;
    z-index: 99;
    position: relative;
}
	
}

.three-boxes-two {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    z-index: 99;
    position: relative;
}

@media only screen and (max-width : 812px) {
	.three-boxes-two {
    width: 90%;
}}

.imageboxheight img {
	width: 100%;
	height: auto;
}

/* CSS Document */

.ar20-robox1 {
    overflow:hidden;
    width:24%;
	padding-bottom:24%;
    position:relative; border-radius: 50%;
    background-color:#55c4c1; display: inline-block; margin-right: 4%;
}

.ar20-robox1:hover {background-color:#006d7e;}

.ar20-robox1:last-of-type {margin-right:0 !important}
.ar20-robox1 a {position:absolute; top:0; left:0; right:0; bottom:0}
.ar20-robox1-slider {
  position:absolute;
    top:0;
    right:100%;
    color:#fff;
    transition:0.4s ease;
	width: 80%;
    margin-left: auto;
    margin-right: auto;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%; padding: 10%;

}
.ar20-robox1-title {
    width:80%;
    position:absolute;
    right:0;
    color:#fff;
    top: 50%; padding: 10%; transition:0.4s ease; text-align:center; -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}







.ar20-robox1:hover {cursor:pointer}
.ar20-robox1:hover .ar20-robox1-title {
  right:-100%;
}

.ar20-robox1:hover .ar20-robox1-slider {
  right:0;
}

.ar20-robox1-title h3 { font-size:1.75vw !important; line-height: 2.25vw !important; color: #fff; font-weight: normal;}

.ar20-robox1-slider p {text-align:center; font-size: 100% !important}




@media only screen and (max-width : 1500px) {
.ar20-robox1-slider p {text-align: center; font-size: 85% !important;}
.translatepress-fr_FR .ar20-robox1-slider p {text-align: center; font-size: 70% !important;}

}


.ar20-2ndquotebox {width: 100%;  transition: 0.4s ease; position:relative; display:block;
margin-right: 3.5%; opacity:0}


.ar20-2ndquotebox1 {color: #e7f7f7;}
.ar20-2ndquotebox2 {color: #d9e9ed;}
.ar20-2ndquotebox3 {color: #ddd6e7; margin-right:0 !important}

.ar20-2ndquotebox1 {background-color: #5bc7c7;}
.ar20-2ndquotebox2 {background-color: #006f85;}
.ar20-2ndquotebox3 {background-color: #684287;}

.ar20-2ndquotebox1 .ar20-2ndquoteboxcontent strong {color: #e7f7f7 !important; padding-top:20px; display:block; font-size:100% !important}
.ar20-2ndquotebox2 .ar20-2ndquoteboxcontent strong {color: #d9e9ed !important; padding-top:20px; display:block; font-size:100% !important}
.ar20-2ndquotebox3 .ar20-2ndquoteboxcontent strong {color: #ddd6e7 !important; padding-top:20px; display:block; font-size:100% !important}


.ar20-2ndquoteboxcontent {transition: 0.4s ease;
 position:relative;
    color:#fff;
	width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0; z-index:99
}


.ar20-2ndquoteboxcontent p{
  font-size: 110% !important;
  width:100%;
  margin:0;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #5bc7c7;
  line-height:1.6;
  position: relative;
  background-color: #d9efef;
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;   
box-sizing: border-box; margin-bottom:20px;
}
.ar20-2ndquotebox2 .ar20-2ndquoteboxcontent p{border-left:8px solid #006f85 !important; background-color: #d4effd;}
.ar20-2ndquotebox3 .ar20-2ndquoteboxcontent p{border-left:8px solid #684287 !important; background-color:#dacbe4; margin-bottom:40px !important}

.ar20-2ndquoteboxcontent p::before{
  font-family:Arial;
  content: "\201C";
  color:#5bc7c7;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

.ar20-2ndquotebox2 .ar20-2ndquoteboxcontent p::before, .ar20-2ndquotebox2 .ar20-2ndquoteboxcontent p span { color:#006f85 !important;}
.ar20-2ndquotebox3 .ar20-2ndquoteboxcontent p::before, .ar20-2ndquotebox3 .ar20-2ndquoteboxcontent p span { color:#684287 !important;}

.ar20-2ndquoteboxcontent p::after{
  content: '';
}

.ar20-2ndquoteboxcontent p span{
  display:block;
  color:#5bc7c7;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}



.progress {
	width: 3vw;
height: auto;
position: absolute;
opacity: 0;
left: 50%;
z-index: 99;
bottom: -2.4vw;
-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);	
}

.progressinfo {
	width: 3vw !important;
height: auto;
position: absolute;
opacity: 0;
left: 50%;
z-index: 99;
bottom: -6.6vw;
-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);	
}

.progressinfo2 {
	width: 3vw !important;
height: auto;
position: absolute;
opacity: 0;
left: 50%;
z-index: 99;
bottom: -1.3vw;
-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);	
}

.prog3 {bottom: 0.7vw !important;}
.prog4 {bottom: -2.4vw !important;}

.prog2holder {position:relative; width:100%; height:3vw}
.prog3holder {position:relative; width:100%; height:5vw}


.progress div {position:absolute; width:5px; height:5px; background-color:#00becf; opacity:0; border-radius: 50%; 1 -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */}

.sq1 {left:0; top:0; animation: fadeIn 2s 2s ease;
  -webkit-animation: fadeIn 2s 2s ease;
  -moz-animation: fadeIn 2s 2s ease;
  -o-animation: fadeIn 2s 2s ease;
  -ms-animation: fadeIn 2s 2s ease;}
  
.sq2 {left:10px; top:0; animation: fadeIn 2s 2.2s ease;
  -webkit-animation: fadeIn 2s 2.2s ease;
  -moz-animation: fadeIn 2s 2.2s ease;
  -o-animation: fadeIn 2s 2.2s ease;
  -ms-animation: fadeIn 2s 2.2s ease;}
  
.sq3 {left:20px; top:0; animation: fadeIn 2s 2.4s ease;
  -webkit-animation: fadeIn 2s 2.4s ease;
  -moz-animation: fadeIn 2s 2.4s ease;
  -o-animation: fadeIn 2s 2.4s ease;
  -ms-animation: fadeIn 2s 2.4s ease;}
  
.sq4 {left:30px; top:0; animation: fadeIn 2s 2.6s ease;
  -webkit-animation: fadeIn 2s 2.6s ease;
  -moz-animation: fadeIn 2s 2.6s ease;
  -o-animation: fadeIn 2s 2.6s ease;
  -ms-animation: fadeIn 2s 2.6s ease;}
  
.sq5 {left:80px; top:0; animation: fadeIn 2s 2.8s ease;
  -webkit-animation: fadeIn 2s 2.8s ease;
  -moz-animation: fadeIn 2s 2.8s ease;
  -o-animation: fadeIn 2s 2.8s ease;
  -ms-animation: fadeIn 2s 2.8s ease;}
  
.sq6 {left:80px; top:20px; animation: fadeIn 2s 3s ease;
  -webkit-animation: fadeIn 2s 3s ease;
  -moz-animation: fadeIn 2s 3s ease;
  -o-animation: fadeIn 2s 3s ease;
  -ms-animation: fadeIn 2s 3s ease;}
.sq7 {left:80px; top:40px; animation: fadeIn 2s 3.2s ease;
  -webkit-animation: fadeIn 2s 3.2s ease;
  -moz-animation: fadeIn 2s 3.2s ease;
  -o-animation: fadeIn 2s 3.2s ease;
  -ms-animation: fadeIn 2s 3.2s ease;}
.sq8 {left:80px; top:60px; animation: fadeIn 2s 3.4s ease;
  -webkit-animation: fadeIn 2s 3.4s ease;
  -moz-animation: fadeIn 2s 3.4s ease;
  -o-animation: fadeIn 2s 3.4s ease;
  -ms-animation: fadeIn 2s 3.4s ease;}
.sq9 {left:80px; top:80px; animation: fadeIn 2s 3.6s ease;
  -webkit-animation: fadeIn 2s 3.6s ease;
  -moz-animation: fadeIn 2s 3.6s ease;
  -o-animation: fadeIn 2s 3.6s ease;
  -ms-animation: fadeIn 2s 3.6s ease;}
  
  .p1sq1 {left:0; top:0; animation: fadeIn 2s 3.8s ease;
  -webkit-animation: fadeIn 2s 3.8s ease;
  -moz-animation: fadeIn 2s 3.8s ease;
  -o-animation: fadeIn 2s 3.8s ease;
  -ms-animation: fadeIn 2s 3.8s ease;}
  
.p1sq2 {left:0px; top:20px; animation: fadeIn 2s 4s ease;
  -webkit-animation: fadeIn 2s 4s ease;
  -moz-animation: fadeIn 2s 4s ease;
  -o-animation: fadeIn 2s 4s ease;
  -ms-animation: fadeIn 2s 4s ease;}
  
.p1sq3 {left:0px; top:40px; animation: fadeIn 2s 4.2s ease;
  -webkit-animation: fadeIn 2s 4.2s ease;
  -moz-animation: fadeIn 2s 4.4s ease;
  -o-animation: fadeIn 2s 4.4s ease;
  -ms-animation: fadeIn 2s 4.4s ease;}
  
.p1sq4 {left:0px; top:60px; animation: fadeIn 2s 4.6s ease;
  -webkit-animation: fadeIn 2s 4.6s ease;
  -moz-animation: fadeIn 2s 4.6s ease;
  -o-animation: fadeIn 2s 4.6s ease;
  -ms-animation: fadeIn 2s 4.6s ease}
  
  
  
  

.prog2 {bottom: -51px; left: 50%; width: 10px; }

.p2sq1 {left:0; top:0; animation: fadeIn 2s 2s ease;
  -webkit-animation: fadeIn 2s 2s ease;
  -moz-animation: fadeIn 2s 2s ease;
  -o-animation: fadeIn 2s 2s ease;
  -ms-animation: fadeIn 2s 2s ease;}
  
.p2sq2 {left:0px; top:20px; animation: fadeIn 2s 2.2s ease;
  -webkit-animation: fadeIn 2s 2.2s ease;
  -moz-animation: fadeIn 2s 2.2s ease;
  -o-animation: fadeIn 2s 2.2s ease;
  -ms-animation: fadeIn 2s 2.2s ease;}
  
.p2sq3 {left:0px; top:40px; animation: fadeIn 2s 2.4s ease;
  -webkit-animation: fadeIn 2s 2.4s ease;
  -moz-animation: fadeIn 2s 2.4s ease;
  -o-animation: fadeIn 2s 2.4s ease;
  -ms-animation: fadeIn 2s 2.4s ease;}
  
.p2sq4 {left:0px; top:60px; animation: fadeIn 2s 2.6s ease;
  -webkit-animation: fadeIn 2s 2.6s ease;
  -moz-animation: fadeIn 2s 2.6s ease;
  -o-animation: fadeIn 2s 2.6s ease;
  -ms-animation: fadeIn 2s 2.6s ease;}
  
.p2sq5 {left:0px; top:80px; animation: fadeIn 2s 2.8s ease;
  -webkit-animation: fadeIn 2s 2.8s ease;
  -moz-animation: fadeIn 2s 2.8s ease;
  -o-animation: fadeIn 2s 2.8s ease;
  -ms-animation: fadeIn 2s 2.8s ease;}
  
  /* */
  
  .p3sq1 {left:0; top:0; animation: fadeIn 2s 2s ease;
  -webkit-animation: fadeIn 2s 2s ease;
  -moz-animation: fadeIn 2s 2s ease;
  -o-animation: fadeIn 2s 2s ease;
  -ms-animation: fadeIn 2s 2s ease;}
  
.p3sq2 {left:0px; top:20px; animation: fadeIn 2s 2.2s ease;
  -webkit-animation: fadeIn 2s 2.2s ease;
  -moz-animation: fadeIn 2s 2.2s ease;
  -o-animation: fadeIn 2s 2.2s ease;
  -ms-animation: fadeIn 2s 2.2s ease;}
  
.p3sq3 {left:0px; top:40px; animation: fadeIn 2s 2.4s ease;
  -webkit-animation: fadeIn 2s 2.4s ease;
  -moz-animation: fadeIn 2s 2.4s ease;
  -o-animation: fadeIn 2s 2.4s ease;
  -ms-animation: fadeIn 2s 2.4s ease;}
  
.p3sq4 {left:0px; top:60px; animation: fadeIn 2s 2.6s ease;
  -webkit-animation: fadeIn 2s 2.6s ease;
  -moz-animation: fadeIn 2s 2.6s ease;
  -o-animation: fadeIn 2s 2.6s ease;
  -ms-animation: fadeIn 2s 2.6s ease;}
  
.p3sq5 {left:0px; top:80px; animation: fadeIn 2s 2.8s ease;
  -webkit-animation: fadeIn 2s 2.8s ease;
  -moz-animation: fadeIn 2s 2.8s ease;
  -o-animation: fadeIn 2s 2.8s ease;
  -ms-animation: fadeIn 2s 2.8s ease;}