@font-face {
    font-family: "Crimson";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("/rea/shared/fonts/Crimson/latin/subset-Crimson-Bold.woff") format("woff");
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/rea/shared/fonts/RobotoCondensed/latin/subset-RobotoCondensed-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-fallback: swap;
}

/* section-HWRH styles */
.section-hwrg{
	background: white;
	color: black;
	padding-top: 20px;
	font-family: 'Roboto', arial;
    font-size: 16px;
    line-height: 1.1;
	text-align: center;
}
.section-hwrg h1{
    font-size: 1.5rem;
}

/* certificate */
.hwr-certificate {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 2em auto
}

.hwr-certificate .hwr-certificate__background {
    z-index: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 120px);
    height: calc(100% - 120px);
    background-color: #fff;
    background-image: url(/rea/shared/img/hwrg/hwrg-certificate-background.png);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 1020px auto;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

@media screen and (max-width: 767px) {
    .hwr-certificate .hwr-certificate__background {
        width:calc(100% - 60px);
        height: calc(100% - 60px)
    }
}

.hwr-certificate .hwr-certificate__border {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-border-image: url(/rea/shared/img/hwrg/hwrg-certificate-frame.png);
    border-image: url(/rea/shared/img/hwrg/hwrg-certificate-frame.png);
    border-image-slice: 160;
    border-image-width: 80px;
    border-image-repeat: round
}

@media screen and (max-width: 767px) {
    .hwr-certificate .hwr-certificate__border {
        border-image-width:40px
    }
}

.hwr-certificate .hwr-certificate__content {
    z-index: 20;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #000;
    text-transform: none;
    padding: 80px
}

@media screen and (max-width: 767px) {
    .hwr-certificate .hwr-certificate__content {
        padding:40px
    }
}

.hwr-certificate .hwr-certificate__logos {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 20px 40px
}

@media screen and (max-width: 991px) {
    .hwr-certificate .hwr-certificate__logos {
        padding:20px
    }
}

@media screen and (max-width: 767px) {
    .hwr-certificate .hwr-certificate__logos {
        padding:20px 10px
    }
}

.hwr-certificate .hwr-certificate__cr-logo {
    max-width: 100%;
    height: 90px
}

@media screen and (max-width: 991px) {
    .hwr-certificate .hwr-certificate__cr-logo {
        height:60px
    }
}

@media screen and (max-width: 767px) {
    .hwr-certificate .hwr-certificate__cr-logo {
        height:40px
    }
}

.hwr-certificate .hwr-certificate__badge {
    max-width: 100%;
    height: 120px
}

@media screen and (max-width: 991px) {
    .hwr-certificate .hwr-certificate__badge {
        height:100px
    }
}

@media screen and (max-width: 767px) {
    .hwr-certificate .hwr-certificate__badge {
        height:75px
    }
}

.hwr-certificate .hwr-certificate__title {
    color: #000;
    font-family: Crimson,serif;
    margin-top: .5em;
    margin-bottom: 0;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

.hwr-certificate .hwr-certificate__subtitle {
    color: #000;
    font-family: "Roboto Condensed",sans-serif;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-top: -.33em;
    -webkit-transform: scale(1,1.33);
    transform: scale(1,1.33);
    text-transform: uppercase
}

@media screen and (max-width: 991px) {
    .hwr-certificate .hwr-certificate__subtitle {
        font-size:24px
    }
}

@media screen and (max-width: 767px) {
    .hwr-certificate .hwr-certificate__subtitle {
        font-size:18px
    }
}

body.culture-fr .hwr-certificate .hwr-certificate__subtitle {
    margin-top: -.5em
}

.hwr-certificate .hwr-certificate__subtitle sup {
    top: -.33em;
    font-size: .67em
}

.hwr-certificate .hwr-certificate__description {
    margin: 0;
    padding: 15px 80px 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.15em;
    text-align: left;
    font-family: sans-serif
}

@media screen and (max-width: 991px) {
    .hwr-certificate .hwr-certificate__description {
        padding:15px 40px 0
    }
}

@media screen and (max-width: 767px) {
    .hwr-certificate .hwr-certificate__description {
        padding:15px 15px 0;
        font-size: 16px
    }
}
 /* end certificate */


.section-hwrg h1{	
	color: black;
}
.section-hwrg img {
    max-width: 100%;
}
.section-hwrg section {
    overflow: hidden;
}
.green-box-group {	
	display: flex    ;
	flex-direction: row;
	gap: 0;
	align-items: center;
	justify-content: center;
	margin: 150px 0 0;
	font-size: 16px;
	margin-bottom: 20px;
}
.green-box-group>.green-box {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 360px;
	width: 100%;       
	border: solid 4px transparent;
	background-image: linear-gradient(90deg, #000 5%, rgba(0, 35, 0, .75) 50%, #000 100%), radial-gradient(circle at top left, #02cf50, #009200);
	background-clip: padding-box, border-box;
	text-align: center;
	color: #fff;
	padding: 24px;
}
.green-box-group>.green-box:first-of-type {        
	 border-top-left-radius: 15px;
	 border-bottom-left-radius: 15px;
	 margin: auto -12px auto 0;
 }
.green-box-group>.green-box:nth-of-type(2) {
   	justify-content: flex-end;
	box-shadow: 0 0 30px 1px rgba(0, 240, 10, .9);
	height: 625px;
	z-index: 1;
	border-radius: 15px;
}
.green-box-group>.green-box:last-of-type {        
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	margin: auto 0px auto -12px;
}
.green-box-group>.green-box>.cr-guarantee-graphic-container {
	position: relative;
}
.green-box-group>.green-box .cr-guarantee-graphic {
	content: "";
	position: absolute;
	top: -320px;
	left: -75px;
	z-index: 5;
	width: calc(100% + 150px);
	background-size: 396px auto, 150px auto;
	height: 330px;
	background-position: bottom center, center 55px;
	background-repeat: no-repeat;
	background-image: url(/rea/shared/img/hwrg/highest_winner_gold_ribbon.png), url(/rea/shared/img/hwrg/hwrg-badge-en.png);
}
.green-box-group h3 {
	font-size: 1.17rem;
	font-weight: 700;
}
.green-box-group>.green-box p {
	line-height: 1.75;
	text-align: left;
	font-size: 15px
}
.green-box-group ul {
	text-align: left;
	list-style-image: url(/rea/shared/img/hwrg/highest_winner_list_style_arrow.png);
}

@media screen and (max-width: 1199px) {
	.green-box-group {
		margin:30px 0;
		gap: 16px;
		flex-direction: column
	}
	.green-box-group>.green-box {
		height:auto;
		max-width: 400px
	}
	.green-box-group>.green-box:nth-of-type(2) {
		height:calc(100% + 330px);
		padding-top: 240px;
		margin-top: 20px;           
		order: 3
	}
	.green-box-group>.green-box .cr-guarantee-graphic {
		top: -290px;
		background-size: 425px auto, 150px auto;
		background-position: center 205px, center 20px;
	}
	.green-box-group>.green-box:nth-of-type(odd) {
		border-radius: 15px;
		margin: auto 0px;
	}
}

@media screen and (max-width: 431px) {
	.green-box-group>.green-box {
		max-width:320px
	}
	.green-box-group>.green-box .cr-guarantee-graphic {
		background-size:340px auto,150px auto
	}
}
@media screen and (max-width: 320px) {
	.green-box-group>.green-box .cr-guarantee-graphic {
		background-size:310px auto,150px auto
	}
}

