/* Gotham Book - Regular */
@font-face {
  font-family: "Gotham";
  src: url("Gotham-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

/* Gotham Book Italic */
@font-face {
  font-family: "Gotham";
  src: url("Gotham-BookItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}

/* Gotham Light */
@font-face {
  font-family: "Gotham";
  src: url("Gotham-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

/* Gotham Light Italic */
@font-face {
  font-family: "Gotham";
  src: url("Gotham-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}

/* Gotham Medium - Using 500 for medium weight */
@font-face {
  font-family: "Gotham";
  src: url("Gotham-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

/* Gotham Medium Italic */
@font-face {
  font-family: "Gotham";
  src: url("Gotham-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}

/* Gotham Bold - Bold typically uses 700 */
@font-face {
  font-family: "Gotham";
  src: url("Gotham-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/* Gotham Bold Italic */
@font-face {
  font-family: "Gotham";
  src: url("Gotham-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

*{
  box-sizing: border-box;
}

body {
  color: #38373A;
  font: normal 400 15px/1.5 "Gotham", Arial, sans-serif;
  margin: 0;
}

a {
  color: #28B8D3;
  outline: none;
  text-decoration: none;
}

a:hover {
  color: #394553;
}

img {
  border: 0;
  display: block;
}

ol, ul {
  margin: 1em 0;
  padding: 0 0 0 1.25em;
}

ol:lang(ar), ul:lang(ar), ol:lang(ur), ul:lang(ur) {
  padding: 0 1.25em 0 0;
}

p {
  margin: 1em 0;
  padding: 0;
}

.contain {
  margin: 0 auto;
  width: 1200px;
}

.fill {
  min-width: 1200px;
  width: 100%;
}

.bottom {
  margin-bottom: 0;
  padding-bottom: 0;
}

.top {
  margin-top: 0;
  padding-top: 0;
}


/* header */

header {
  display: block;
}

#epLang {
    cursor: pointer;
    justify-content: space-between;
    min-width:155px;
	right:0;
    font: normal 400 18px/1.5 "Gotham", Arial, sans-serif;
    text-align: center;
}

#epLang > a {
    display: none;
}

#epLang a:hover {
    color: #38373A;
}

#epLangDrop {
    background: #fff;
    display: none;
	min-width:155px;
    position: absolute;
	z-index:1000;
	top: 63px;
	border: 1px solid #394553;
}

#epLang > div {    
    padding: 35px;
}

#epLangDrop a {
    display: block;
    padding: 3px 10px;
}

#epLang:hover #epLangDrop {
    display: block;
}

header .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a.logo {
  background: url(logo1.png) center top no-repeat;
  background-size: contain;
  display: inline-block;
  height: 70px;
  margin: 15px 0 0 10px;
  width: 253px;
}

a.logo:lang(ar), a.logo:lang(ur) {
  margin: 15px 10px 0 0;
}

nav {
  align-items: center;
  display: flex;
  flex-grow: 0;

}

nav a {
  color: #33658a;
  display: inline-block;
  font: normal 400 18px/25px "Gotham", Arial, sans-serif;
  padding: 0 20px;
  text-align: center;
  text-decoration: none;
}

nav a:hover {
  color: #000;
}

#epAttention {
  padding: 20px 10px 10px 10px;
}

/*call out*/
.callout {
  display: flex;
  justify-content: space-between;
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 10px;   
}


.callout-text {
  max-width: 525px;
  margin-right: 20px;  
  font-size: 17px;
}

.callout-text:lang(ar), .callout-text:lang(ur) {
  margin-left: 20px;
  margin-right: unset;  
}

.callout-text h2{
	font-size: 24px;
	font-weight: 400;
	padding: 10px 0;
}

.callout-image {
  text-align: right;
  max-width: 50%;
}

.callout-image img {
  max-width: 100%;
  height: auto; 
}

.expand-text-opened {
  min-height: 50px;
  height: auto !important;
}

/*  3 buttons    */
.cta {
	display: flex;
	justify-content: space-between;
	margin: 40px auto 55px auto;
	padding: 0 10px;
}
.cta-button {
	background: white;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
	transition: all ease 0.3s;
	border-radius: 7px;
	padding: 20px 10px 10px 10px;
	width: 260px;
	text-decoration: none;
	font-size: 20px;
	font-weight: 500;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cta-button-text {
	text-align:center;
}
.cta-button:hover, .more-information-button:hover,
.cta-button:focus, .more-information-button:focus {box-shadow: 0px 3px 6px rgba(0,0,0,0.46);}
.cta-icon {
	height: 88px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-bottom: 15px;
}
.cta-button-report {color: #1B2B3A;}
.cta-button-report .cta-icon {
	background-image: url("icon-cta-report.png");
	width: 75px;
}
.cta-button-question {color: #1B2B3A;}
.cta-button-question .cta-icon {
	background-image: url("icon-cta-question.png");
	width: 85px;
}
.cta-button-follow {color: #1B2B3A;}
.cta-button-follow .cta-icon {
	background-image: url("icon-cta-follow.png");
	width: 90px;
}

/*more information*/

.more-information {
	padding-bottom: 25px;
}

.more-information h2{
	text-align: center;
	padding-top: 15px;
	padding-bottom: 20px;
}

.more-information-buttons {
	display: flex;
	justify-content: center;
}
.more-information-button {
	color: #fff;
	font-weight: 500;
	background-color: #6F92A8;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
	transition: all ease 0.3s;
	border-radius: 7px;
	text-decoration: none;
	padding: 15px;
	min-width: 265px;
	text-align: center;
	margin: 0 20px;
	display: block;
}

.more-information-button:hover {
	color: #fff;
}

/* Where will my report be directed? */

.report-directed {
	background: white;
	padding: 0 0 40px 0;
}

.report-directed h2 {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 10px;
	font-size: 22px;
}

.timeline {
	width: 1020px;
	display: flex;
	justify-content: space-between;
}
.timeline-entry {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	position: relative;
}
.timeline-icon {
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.timeline-entry:hover .timeline-icon,
.timeline-entry:focus .timeline-icon {
	width: 58px;
	height: 58px;
	margin-bottom: -10px;
}
#timeline-entry-confidential .timeline-icon {background-image: url("icon-timeline-confidential.png");}
#timeline-entry-report .timeline-icon {background-image: url("icon-timeline-report.png");}
#timeline-entry-review .timeline-icon {background-image: url("icon-timeline-review.png");}
#timeline-entry-contact .timeline-icon {background-image: url("icon-timeline-contact.png");}
#timeline-entry-investigation .timeline-icon {background-image: url("icon-timeline-investigation.png");}
#timeline-entry-closure .timeline-icon {background-image: url("icon-timeline-closure.png");}
.timeline-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #28B8D3;
	margin-top: 15px;
	position: relative;
}
.timeline-entry:not(:first-child) .timeline-dot::before, .timeline-entry:not(:last-child) .timeline-dot::after {
	content: "";
	height: 1px;
	width: 100px;
	background: #38373A;
	display: block;
	position: absolute;
	top: 50%;
}
.timeline-entry:not(:first-child) .timeline-dot::before {
	transform: translateX(-100%);
}

.timeline-entry:lang(ar):not(:first-child) .timeline-dot::before, .timeline-entry:lang(ur):not(:first-child) .timeline-dot::before {
	transform: translateX(100%);
}

.timeline-entry:not(:last-child) .timeline-dot::after {
	transform: translateX(10%);
}

.timeline-entry:lang(ar):not(:last-child) .timeline-dot::after, .timeline-entry:lang(ur):not(:last-child) .timeline-dot::after {
	transform: translateX(-10%);
}

.timeline-text {
	text-align: center;
	font-size: 14px;
	margin-top: 10px;
	width: 155px;
}

.modal {
	width: 353px;
	border-radius: 7px;
	box-shadow: 0px 3px 6px #0000005C;
	position: absolute;
	padding: 24px;
	background: white;
	z-index: 2;
	font-size: 14px;
}

.modal:lang(ar), .modal:lang(ur){

}

.modal h3 {
	font-size: 16px;
	font-weight: 400;
	color: #28B8D3;
}

.modal strong {
	font-weight: 500;
}

.modal p:last-child {margin-bottom: 0;}
.modal-close {
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 10px;
}
.modal-close:lang(ar), .modal-close:lang(ur) {
	left:10px;
	right:unset;
}
#modal-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	background: black;
	opacity: 0.4;
}
.icon-list {
	padding-left: 0;
	margin-bottom: 0;
}
.icon-list li {
	display: flex;
	margin-bottom: 25px;
}
.icon-list li:last-child {margin-bottom: 0;}

.modal-list-text {
	align-self: center;
	flex: 1;
}
.modal-icon {
	width: 30px;
	height: 30px;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 15px;
	background-position: center;
	flex-shrink: 0;
}


.statement-section {
	background: #394553;
    color: white;
	font-size: 13px;
}

.main-content {
	background-color: #fff;
	padding: 90px;
}

.main-content h1{
	color: #333E48;
	font-size: 30px;
	font-weight: 400;
}

.main-content h2{
	color: #0CC6DE;
	font-size: 20px;
	font-weight: 400;
}

.main-content h3{
	color: #333E48;
	font-size: 18px;
	font-weight: 400;
}

.faq-question p {
    font-weight: 500;
    margin-bottom: 0;
	font-size: 16px;
}
.faq-answer > p:first-child {margin-top: 0;}

input[type="text"], input[type="password"], select {
    border: 1px solid #9A9B9C;
    padding: 10px;
}


/* content */

main {
  display: block;
  padding: 40px 0 50px;
  min-width: 1200px;
  background-color: #dff4f9;
}

h1 {
  font: normal 500 35px "Gotham", Arial, sans-serif;
  padding: 0;
}

h2 {
  font: normal 500 22px "Gotham", Arial, sans-serif;
  padding: 0;
}

h3 {
  font: normal 500 18px "Gotham", Arial, sans-serif;
  margin: 1em 0;
  padding: 0;
}

#epEmergencyEU {
	padding: 10px 10px 0 10px;
}

#epDDN {
  font-weight: bold;
  white-space: nowrap;
}

.listor {
  list-style: none;
  margin: 1em 0;
}

#epDataPrivacy {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 25px;
}

#epDataPrivacy .online, #epDataPrivacy .phone, #epDataPrivacy .output {
  display:none;
}

#epDataPrivacy ol.dropDowns {
  list-style: none;
  margin: 0;
  padding: 0;
}

select {
  font: normal 400 14px "Gotham", Arial, sans-serif;
  margin: 2px 0 15px;
  padding: 5px;
  width: 100%;
}

button, .submit {
  background: #29bfd7;
  border: 1px solid #29bfd7 !important;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  padding: 13px 35px;
  margin-top: 10px;
}

button:hover, .submit:hover {
  color: #29bfd7;
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #29bfd7;
}

button:disabled {
  background: #9A9B9C;
  cursor: default;
}

button:hover:disabled {
  background: #9A9B9C;
}

.nowrap {
  white-space: nowrap;
}

#epPhone {
  display: inline-block;
  max-width: 50%;
}

#epIssues {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#epIssues .category {
  margin-bottom: 20px;
  width: 45%;

}

#epIssues .category{
}


#epIssues .catdesc {
  display: none;
}

#epIssues .catname {
    background: #444f5c;
  color: #fff;
  font: normal 500 18px "Gotham", Arial, sans-serif;
  padding: 20px 20px 20px 30px;
}
#epIssues .catname:lang(ar), #epIssues .catname:lang(ur) {
  padding: 20px 30px 20px 20px;
}
#epIssues .details {
  font: italic 400 11px "Gotham", Arial, sans-serif;
  position: absolute;
  right: 7px;
  text-decoration: underline;
  top: 3px;
}
#epIssues .details:lang(ar), #epIssues .details:lang(ur) {
  left:7px;
  position: absolute;
  right: unset;
}
#epIssues .issue {
  margin-bottom: 10px;
  padding: 0 5px 0 10px;
  position: relative;
}
#epIssues .issue:lang(ar), #epIssues .issue:lang(ur) {
  padding: 0 10px 0 5px;
}
#epIssues .issue:last-of-type {
  margin-bottom: 0;
}

#epIssues .issue:hover {
  background: #E9EAE8;
}

#epIssues .issuebox {
  background: #fff;
}

#epIssues .name {
  font: normal 400 16px/20px "Gotham", Arial, sans-serif;
  padding: 5px 45px 5px 0;
}

#epIssues .name:lang(ar), #epIssues .name:lang(ur) {
  font: normal 400 16px/20px "Gotham", Arial, sans-serif;
  padding: 5px 0 5px 45px;
}

#epIssues .desc {
  color: #333E48;
  font-size: 14px;
  font-weight: 400;
  padding: 0 60px 10px 15px;
}
#epIssues .desc:lang(ar), #epIssues .desc:lang(ur) {
  padding: 0 15px 10px 60px;
}

/* footer */

footer {
  font-size: 12px;
  padding: 18px 0;
  background: #394553;
  color: white;
}

footer th {
  display: none;
}

footer td {
  padding: 5px 0 0 !important;
}

footer .line1 {
  float: left;
  padding-left: 10px;
}

footer .line2 {
  color: #fff;
  float: right;
  padding-right: 10px;
}

footer .line2 a {
	color: #fff;
	text-decoration: none;
}

footer .line2 a:hover {
	text-decoration: underline;
}

footer table {
  margin: 0 auto !important;
  width: 1200px !important;
}