/* FAO Main Style */

@import "header.css";
@import "navigation.css";
@import "additional.navigation2022.css";
@import "footer.css";
@import "search.css";
@import "faoworldwide.css";
@import "custom-boxes.css";

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:bottom;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Default Style */

html {
  height:auto;
}

body {
  background-color: #f7f8f9;
  font-family: 'Open Sans', sans-serif !important;
  color: #212529;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-size: .9rem;
  padding-top: 0;
  overflow-x:hidden;
}

[lang="AR"] body {
  text-align: right;
  font-family: 'Cairo', sans-serif !important;  
}

/* Typography */
body h1 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 20px;
}

.container h1.csc-firstHeader,
.main-internal-container h1 {
  font-size:22px;
  font-weight:700;
  line-height:1.3;
  color:#333;
  padding-left:2px;
  border-bottom:#cfcfcf solid 1.1px;
  padding-bottom:10px;
  margin:36px 0 30px;
}

@media (min-width: 768px) {
  .container h1.csc-firstHeader,
  .main-internal-container h1 {
    font-size:26px;
    padding-bottom:13px;
  }
}

.container h1.csc-firstHeader a,
.main-internal-container h1 a {
  font-weight:700;
}

.main-internal-container .r-col h1 {
  font-size:22px;
  font-weight:600;
  margin:36px 0 18px;
  padding:0;
  border:0;
}

body h2 {
  font-size: 22px;
  margin: 2rem 0 1.5rem 0;
  line-height: 30px;
}

body h2 a:hover {
  text-decoration:none;
}

body h2::after {
  content: "";
  border-bottom: 3px solid #126aaa;
  display: block;
  width: 50px;
}

body h2[style="text-align:center;"]::after {
  margin: 0 auto;
}

body h3 {
  font-size: 18px;
  font-weight: 500;
}

@media (min-width: 992px) {
  body h3 {
    font-size: 22px;
  }
}

body h4 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 30px;
}

@media (min-width: 992px) {
  body h4 {
    font-size: 18px;
  }
}

h4.section-title {
  font-weight: 700;
  color: #0d6cac;
  margin: 60px 0 60px 0;
}

body h5 {
  line-height:1.3;
}

body h6 {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom:.5rem;
}

body a {
  color: #126aaa;
}

body a:hover {
  color: #107ac8;
}

body .align-right {
  text-align:right;
}

[lang="AR"] body .align-right {
  text-align:left;
}

body .align-center {
  text-align:center;
}

body label {
  display:block;
}

.card-img-top {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.card-img-top:hover {
  -webkit-transition-duration:0.3s;
  transition-duration:0.3s;
  -webkit-transition-property:transform;
  transition-property:transform;  
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

.main-internal-container {
  padding-bottom:4rem;
  }

/* Buttons */
.circle-btn {
  width: 45px;
  height: 45px;
  -webkit-box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  text-align: center;
  line-height: 58px;
  color: #00adef;
}

.btn {
  padding: 6px 10px;
  font-size: 13px;
  position: relative;
  border-radius: 25px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.btn:hover, .btn:active, .btn:focus, .btn:active:hover, .btn:active:focus {
  outline: 0;
}

.btn:active:focus {
  outline: 0;
}

.btn.btn-primary,
#dyna_fef_page .btn.btn-primary {
  background-color: #0d6cac;
  border-color: #0d6cac;
  font-size:1rem;
}

.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus, .btn.btn-primary:active:hover, .btn.btn-primary:active:focus {
  border-color: #0d6cac;
}

.btn.btn-primary:hover {
  background-color: #206ea3;
}

.btn.btn-primary:active:focus {
  background-color: #0d6cac;
  border-color: #0d6cac;
}

.btn.btn-default {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #0d6cac;
  color: #0d6cac;
  font-weight: 600;
}

.btn.btn-default:hover, .btn.btn-default:active, .btn.btn-default:focus, .btn.btn-default:active:hover, .btn.btn-default:active:focus {
  border-color: #0d6cac;
}

.btn.btn-default:active:focus {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: #0d6cac;
  color: #0d6cac;
}

.btn.btn-default i {
  color: #0d6cac;
  border-color: #0d6cac;
  border-radius: 50%;
}

.open > .dropdown-toggle.btn-primary {
  background-color: #0d6cac;
  border-color: #0d6cac;
}

.open > .dropdown-toggle.btn-primary:hover, .open > .dropdown-toggle.btn-primary:focus {
  background-color: #0d6cac;
  border-color: #0d6cac;
}

.open > .dropdown-toggle.btn-default {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: #0d6cac;
  color: #0d6cac;
  font-weight: 400;
}

.open > .dropdown-toggle.btn-default:hover, .open > .dropdown-toggle.btn-default:focus {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: #0d6cac;
  color: #0d6cac;
}

.section-button {
  margin-top: 30px;
  width: 100%;
}

.btn-floating {
  height: 57px;
  width: 57px;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.btn-floating:hover {
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.btn p {
  margin:0;
  }

.navbar-expand-lg .navbar-nav .show .btn p a {
  color:#fff !important;
  }

.navbar-expand-lg .navbar-nav .show .btn p a:hover {
  text-decoration:none;
  }

/* Floating Bubbles */ 

div.floating-icons {
  position:fixed;
  right:30px;
  bottom:20px;
  z-index:30;
}

@media (min-width: 768px) {
  div.floating-icons {
    top:260px;
    bottom:auto;
  }
}

[lang="AR"] div.floating-icons {
  right:auto;
  left:30px;
}

div.floating-icons div.share-bubble,
div.floating-icons div.email-bubble,
div.floating-icons div.qa-bubble {
  border-radius:50% 50%;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: transform;
  transition-property: transform;    
  width:65px;
  height:65px;
  margin-bottom:15px;
}  

div.floating-icons div.share-bubble:hover,
div.floating-icons div.email-bubble:hover,
div.floating-icons div.qa-bubble:hover {
  -webkit-transition-duration:0.3s;
  transition-duration:0.3s;
  -webkit-transition-property:transform;
  transition-property:transform;  
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

div.floating-icons div.partnership-bubble {
  background-color:#55acef;
  border:1px solid #55acef;
}

div.floating-icons div.share-bubble {
  background-color:#e94a2e;
  border:1px solid #e94a2e;
  cursor:pointer;
}

div.floating-icons div.email-bubble {
  background-color:#ca242e;
  border:1px solid #ca242e;
}

div.floating-icons div#c716902,
div.floating-icons div#c716903 {
  display:none;
}

@media (min-width: 768px) {

  div.floating-icons div#c716902,
  div.floating-icons div#c716903 {
    display:block;
  }

  div.floating-icons div.partnership-bubble,
  div.floating-icons div.share-bubble,
  div.floating-icons div.email-bubble,
  div.floating-icons div.qa-bubble {
    -webkit-border-radius:50% 50%;
    box-shadow: 3px 3px 3px #c9c8c6;
  }
}

div.floating-icons div.qa-bubble {
  background-color:#71a364;
  border:1px solid #71a364;
}

div.floating-icons p {
  height:100%;
  width:100%;
  margin:0;
  text-align:center;
}

div.floating-icons i {
  font-size:40px;
  color:#fff;  
  vertical-align:middle;  
  line-height:60px;
  width:100%;
  text-align:center;
}

div.floating-icons a {
  color:#fff;
  text-decoration:none;
}

div.floating-icons .popover {
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .3rem;
  max-width:none;
  width:auto;
  height:auto;  
  margin-bottom:0;
}

div.floating-icons .popover.show {
 border:1px solid #ededed;
}

div.floating-icons .popover-body {
  padding: .5rem .75rem;
  width:auto;
  height:auto;
  white-space:nowrap;
  margin-bottom:0;
}

div.floating-icons .popover-body a {
  cursor:pointer;
}

div.floating-icons .popover-body i {
  margin:0 5px;
  color:#126aaa;
  font-size:25px;
  width:auto;
  line-height:normal;  
}

div.floating-icons .popover-body img {
  vertical-align:middle;
}

div.floating-icons .popover-body i:hover {
  opacity:.7;
}

div.floating-icons .popover-body a#tiktok {
  width:21px;
  height:24px;
  display:inline-block;
  vertical-align:middle;
  margin:0 5px;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' shape-rendering='geometricPrecision' image-rendering='optimizeQuality' text-rendering='geometricPrecision' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 2859 3333' style='enable-background:new 0 0 2859 3333;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23126AAA;%7D%0A%3C/style%3E%3Cpath class='st0' d='M2081,0c55,473,319,755,778,785v532c-266,26-499-61-770-225v995c0,1264-1378,1659-1932,753 c-356-583-138-1606,1004-1647v561c-87,14-180,36-265,65c-254,86-398,247-358,531c77,544,1075,705,992-358V1h551V0z'/%3E%3C/svg%3E");
}  

div.floating-icons .popover-body a#tiktok:hover {
  opacity:.7;
}  

/* Slider */ 

#topSlider {
  width: 100%;
}

#topSlider video {
  width:100%;
  height:100%;
  -o-object-fit:cover;
  object-fit:cover;
  object-position:center;
}
  
[lang="AR"] #topSlider {
  direction: rtl;
}

#topSlider .slider-image-container {
  overflow: hidden;
}

#topSlider .slider-image-container img {
  width:100%;
}

@media (min-width: 576px) {
  #topSlider .slider-image-container {
    max-height: 220px;
  }
}

@media (min-width: 768px) {
  #topSlider .slider-image-container {
    max-height: 300px;
  }
}

@media (min-width: 992px) {
  #topSlider .slider-image-container {
    max-height: 413px;
  }
}

@media (min-width: 1200px) {
  #topSlider .slider-image-container {
    max-height: 444px;
  }
}

.carousel-inner .carousel-caption {
  background: rgba(28, 71, 103, 0.8);
  left: 0;
  bottom: 0;
  text-align: left;
  padding: 20px;
  width: 100%;
  z-index: 10;
}

@media (max-width: 576px) {
  .carousel-inner .carousel-caption {
  background: rgba(28, 71, 103, 1);
  position:relative;
  height:110px;
  padding:13px;
  }
}

[lang="ar"] .carousel-inner .carousel-caption {
  text-align: right;
  width: 100%;
  right: 0;
}

.carousel-inner .carousel-control-prev,
.carousel-inner .carousel-control-next {
  z-index:1;
}

@media (max-width: 576px) {
  .carousel-inner .carousel-control-prev,
  .carousel-inner .carousel-control-next {
  display:none;
  }
}

.carousel-inner .carousel-caption h3 {
  line-height:1.4;
  font-size:14px;
}

@media (min-width: 768px) {
  .carousel-inner .carousel-caption h3 {
  font-size:22px;
  }
}

@media (min-width: 1200px) {
  .carousel-inner .carousel-caption h3 {
  font-size:24px;
  }
}

.carousel-inner .carousel-caption p {
  font-size: 1em;
  margin-bottom: 0.5rem;
}

@media (max-width: 992px) {
  .carousel-inner .carousel-caption p {
    display:none;
  }
}

@media (min-width: 1200px) {
  .carousel-inner .carousel-caption {
    width: auto;
    left: 20px;
    right: auto;
    bottom: 20px;
    max-width: 85%;
  }

  [lang="ar"] .carousel-inner .carousel-caption {
    width: auto;
    right: 20px;
    left: auto;
    max-width: 85%;
  }
}

.carousel-caption h3 a {
  color: #fff;
}

.carousel-indicators {
  margin-bottom: 0;
}

.carousel-item video {
  width:100%;
}

#topSlider .sdg_container {
  position:absolute;
  top:20px;
  right:20px;
  z-index:20;
}

[lang="AR"] #topSlider .sdg_container {
  left:20px; 
  right:auto;
}

#topSlider .sdg_container .sdg_icon {
  margin-left:10px;
}

[lang="AR"] #topSlider .sdg_container .sdg_icon {
  margin-left:0;
  margin-right:10px;  
}

#topSlider .carousel-indicators {
  position:relative;
  padding:1.5em 0;
}

#topSlider .carousel-indicators li {
  background-color:#ffffff;
  opacity:1;
  height:13px;
  width:13px;
  border:1px solid #f5f5f5;
  margin:0 10px;
  border-radius:50% 50%;
  -webkit-border-radius:50% 50%;
  -webkit-box-shadow:5px 4px 3px -2px rgba(0, 0, 0, 0.10);  
  box-shadow:5px 4px 3px -2px rgba(0, 0, 0, 0.10);  
}

[lang="AR"] #topSlider .carousel-indicators li {
  box-shadow:-5px 4px 3px -2px rgba(0, 0, 0, 0.10);  
}

#topSlider .carousel-indicators li.active {
  background-color:#126aaa;
  width:100px;
  border:1px solid #126aaa;
  border-radius:13px;
  -webkit-border-radius:13px;
}

/* Top slider - 2020 version */

#topSlider .carousel-control-prev {
  background-color:#fff;
  border-radius:50%;
  width:30px;
  height:30px;
  display:flex;
  left:15px;
  top:37%;
  display:none;
  -webkit-box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.24);
  -moz-box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.24);
  box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.24);
}

#topSlider .carousel-control-next {
  background-color:#fff;
  border-radius:50%;
  width:30px;
  height:30px;
  display:flex;
  right:15px;
  top:37%;
  display:none;
  -webkit-box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.24);
  -moz-box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.24);
  box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.24);  
}

@media (min-width: 768px) {
  #topSlider .carousel-control-prev,
  #topSlider .carousel-control-next {
    width:40px;
    height:40px;
    display:flex;
    opacity:1;
    z-index:11;
  }
}

@media (min-width: 992px) {
  #topSlider .carousel-control-prev,
  #topSlider .carousel-control-next {
    width:40px;
    height:40px;
    top:40%;
  }
}

@media (min-width: 1200px) {
  #topSlider .carousel-control-prev,
  #topSlider .carousel-control-next {
    width:50px;
    height:50px;
  }
}

#topSlider .carousel-control-prev .material-icons, 
#topSlider .carousel-control-next .material-icons {
    font-size:24px;
    color:#1c4767;
}

@media (min-width: 768px) {
  #topSlider .carousel-control-prev .material-icons, 
  #topSlider .carousel-control-next .material-icons {
      font-size:28px;
  }
}

@media (min-width: 1200px) {
  #topSlider .carousel-control-prev .material-icons, 
  #topSlider .carousel-control-next .material-icons {
     font-size:35px;
  }
}

@media (min-width: 375px) {
#topSlider .carousel-item::before {
     content:'';
     position:absolute;
     left:0;
     top:0;
     height:100%;
     width:100%;
     opacity:0.7;
     background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%); /* FF3.6-15 */
     background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%); /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0); /* IE6-9 */
  }
}

@media (min-width: 992px) {
  #topSlider .carousel-item::before {
    opacity:0;
    background:-moz-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 99%); /* FF3.6-15 */
    background:-webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 99%); /* Chrome10-25,Safari5.1-6 */
    background:linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); /* IE6-9 */
    }

  [lang="AR"] #topSlider .carousel-item::before {
    background:-moz-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 99%); /* FF3.6-15 */
    background:-webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 99%); /* Chrome10-25,Safari5.1-6 */
    background:linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=1); /* IE6-9 */
    }
}

@media (min-width: 1200px) {
  #topSlider .carousel-item::before {
   }
}

#topSlider .carousel-item {
  -webkit-transition:-webkit-transform .3s ease-in-out !important;
  -o-transition:-o-transform .3s ease-in-out !important;
  transition:transform .3s ease-in-out !important;
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
}

@media (min-width: 768px) {
  #topSlider .carousel-item {
    background-size:cover;
  }
}

#topSlider .carousel-item-next, 
#topSlider .carousel-item-prev, 
#topSlider .carousel-item.active {
  display: flex;
}

#topSlider .carousel-inner {
  height:230px;
  display:flex;
}

[lang="AR"] #topSlider .carousel-inner {
  direction:ltr;
}

#topSlider .slider-image-container {
  width:100%;
}

@media (min-width: 375px) {
  #topSlider .carousel-inner {
    height:275px;
  }

  #topSlider .carousel-inner .carousel-caption h3 {
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  #topSlider .carousel-inner {
    height: 300px;
    display:flex;
  }
}

@media (min-width: 992px) {
  #topSlider .carousel-inner {
    height: 415px;
    display:flex;
  }
}

@media (min-width: 1200px) {
  #topSlider .carousel-inner {
    height: 444px;
    display:flex;
  }
}

#topSlider .carousel-inner .carousel-caption {
  left:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  height:50%;
  justify-content:center;
  text-align:center;
  padding:30px 15px;
  position:absolute;
  background:rgba(28, 71, 103, 1);
}

[lang="AR"] #topSlider .carousel-inner .carousel-caption {
  left:auto;
  right:0;
}

@media (min-width: 768px) {
  #topSlider .carousel-inner .carousel-caption {
    padding:30px;
    background:rgba(28, 71, 103, 0.8);
    left:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding:30px 50px;
    position:absolute;
  }
}

@media (min-width: 992px) {
  #topSlider .carousel-inner .carousel-caption {
    text-align: left;
    width: 100%;
    padding: 30px;
    justify-content:center;
    text-align:inherit;
    height:auto;
  }
}

@media (min-width: 1200px) {
  #topSlider .carousel-inner .carousel-caption {
    width: calc(100% - 60px);
    max-width: none;
    margin: 30px;
    padding:15px;
  }
}

@media (min-width: 992px) {
  #topSlider .carousel-inner .carousel-caption h3 {
    font-size: 22px;
  }
}

#topSlider .carousel-inner .carousel-caption h3  a:hover {
  text-decoration:none;
}

#topSlider .carousel-inner .carousel-caption p {
  font-size:.9em;
}

#topSlider .carousel-inner .carousel-caption p a {
  color:#ccc;
  text-decoration:none;
}

#topSlider .carousel-indicators {
  padding:1.2em 0;
  position:relative;
}

#topSlider .carousel-indicators li {
  box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.14);
  margin:0 5px;
}

@media (min-width: 992px) {
  #topSlider .carousel-indicators li {
    margin:0 10px;
  }
}

.sdg_container .sdg_icon img {
  width:35px;
  height:35px;
}

@media (min-width: 992px) {
  .sdg_container .sdg_icon img {
    width:50px;
    height:50px;
  }
}

/* Data Carousel */

#data-carousel {
  direction:ltr;
}

@media (max-width: 576px) {
  #data-carousel {
    overflow-x:hidden;
  }
}

#data-carousel .col-md-4 {
  margin-bottom:1.25rem;
}

@media (min-width: 576px) {
  #data-carousel .col-md-4 {
    float:left;
    width:33.333333%;
    flex:0 0 33.333333%;
    margin-bottom:0;
    height:100%;
  }
}

#data-carousel .row .card {
  height:100%;
}

#data-carousel .row .card-title {
  margin-bottom:.5rem;
  font-size:1.1rem;
}

#data-carousel .card-img {
    height:130px;
    overflow: hidden;
}

@media (min-width: 992px) {
  #data-carousel .card-img {
    height:180px;
  }
}

@media (min-width: 1200px) {
  #data-carousel .card-img {
    height:220px;
  }
}

#data-carousel .card-img-top {
  width:100%;
  height:100%;
}

@media (min-width: 992px) {
  #data-carousel .card-img-top {
    height:100%;
  }
}

#data-carousel .card-body,
#data-carousel2 .card-body {
  background-color:#fff;
  height:100%;
}

#data-carousel .btn-floating {
  border:0;
  border-radius:0;
  box-shadow:none;
}

#data-carousel .controls-top .material-icons {
  color:#126aaa;
}

#data-carousel .controls-top .carousel-control-prev {
  left:-57px;
  width:10%;
  background-color:#f0f0f0;
  opacity:1;
}

@media (min-width: 768px) {
  #data-carousel .controls-top .carousel-control-prev {
    left:-15px;
    width:4%;
  }
}

@media (min-width: 992px) {
  #data-carousel .controls-top .carousel-control-prev {
    left:-15px;
    width:3%;
  }
}

#data-carousel .controls-top .carousel-control-next {
  right:-57px;
  width:10%;
  background-color:#f0f0f0;
  opacity:1;
}

@media (min-width: 768px) {
  #data-carousel .controls-top .carousel-control-next {
    right:-20px;
    width:6%;
  }
}

@media (min-width: 992px) {
  #data-carousel .controls-top .carousel-control-next {
    right:-30px;
    width:4%; 
  }
}

/* Swiper Data Carousel */

#data-carousel.swiper-container {
  position:relative;
}

#data-carousel.swiper-container .swiper-slide {
  background-color:#fff;
  height:415px;
}

#data-carousel.swiper-container .card-body {
  height:auto;
}

#data-carousel.swiper-container .card-img {
  height:100%;
  max-height:250px;
}

#data-carousel.swiper-container .card-title {
  margin-bottom:.5rem;
}

.grey_row_797306 {
  position:relative;
}

.grey_row_797306 .swiper-buttons {
  display:flex;
  position:absolute;
  z-index:10;
  top:50%;
  width:100%;
  justify-content:space-between;
  max-width:92%;
}

.grey_row_797306 .swiper-buttons .material-icons {
  font-size:36px;
  color:#126aaa;
  cursor:pointer;
  color:#fff;
}

.grey_row_797306 .data-swiper-button-prev {
  margin-left:15px;
}

.grey_row_797306 .data-swiper-button-next {
  margin-right:15px;
}

@media (min-width: 450px) {
  .grey_row_797306 .swiper-buttons {
    max-width:94%;
  }
}

@media (min-width: 576px) {
  .grey_row_797306 .swiper-buttons {
    max-width:511px;
  }
}

@media (min-width: 768px) {
  .grey_row_797306 .swiper-buttons {
    max-width:690px;
  }

  .grey_row_797306 .data-swiper-button-prev {
    margin-left:-40px;
  }

  .grey_row_797306 .data-swiper-button-next {
    margin-right:-40px;
  }

  .grey_row_797306 .swiper-buttons .material-icons {
    color:#126aaa;
  }

  #data-carousel.swiper-container .card-img {
    height:100%;
    max-height:180px;
  }
}

@media (min-width: 992px) {
  .grey_row_797306 .swiper-buttons {
    max-width:930px;
  }

  #data-carousel.swiper-container .card-img {
    height:100%;
    max-height:220px;
  }
}

@media (min-width: 1200px) {
  .grey_row_797306 .swiper-buttons {
    max-width:1110px;
  }

  #data-carousel.swiper-container .swiper-slide {
    height:auto;
  }
}
    
.row.grey-row .card-img {
  max-height:160px;
}

#data-carousel .card-img {
  max-height:250px;
}

#data-carousel2 .carousel-single {
  width:100%;
}

#data-carousel2 .carousel-control-next, 
#data-carousel2 .carousel-control-prev {
  opacity:1;
}

[lang="AR"] #data-carousel2 {
  direction:ltr;
}

.row.grey-row.grey_row_730180,
.row.grey-row.grey_row_711348,
.row.grey-row.grey_row_711352 {
  padding-bottom:0;
}

/* Forms */

.form-group .form-control {
  width: 100%;
}

@media (min-width: 992px) {
  .form-group .form-control {
    width:90%;
  }
}

@media (min-width: 1200px) {
  .form-group .form-control {
    width:80%;
  }
}

#dyna_fef_page {
  margin-bottom:2em;
}

#dyna_fef_page form#id_form_dyna_fee div.dyna_form_data input {
  border: 1px solid #ced4da;
  font-size:1rem;
  padding:2px 8px;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
}  

.img.dyna_form_input-calendar-icon {
  width: 28px;
  opacity: 0.6;
}

#dyna_fef_page label.error {
  color: red;
  font-size: 12px;
}

.MultiFile-title strong {
  font-weight: 500;
}

div.dynafef_image_gallery {
  padding: 0 10px;
  width: 135px !important;
}

.dynafef_file_list_container div.dynafef_image_gallery table td.dynafef_image_gallery_fields {
  font-size: 11px;
  padding: 0 7px;
  height: 40px !important;
}

.dynafef_file_list_container div.dynafef_image_gallery table td.dynafef_image_gallery_fields input {
  left: 40px;
}

#dyna_fef_page table.mceLayout {
  width:100% !important;
}

@media (min-width: 992px) {
  #dyna_fef_page table.mceLayout {
    width:80% !important;
  }
}

#dyna_fef_page .defaultSkin td.mceToolbar {
  background-color:#fff;
}

#dyna_fef_page .defaultSkin .mceStatusbar {
  background-color:#fff;
  padding:5px;
  height:32px;
}

#dyna_fef_page .defaultSkin table.mceToolbar, 
#dyna_fef_page .defaultSkin tr.mceFirst .mceToolbar tr td, 
#dyna_fef_page .defaultSkin tr.mceLast .mceToolbar tr td {
  padding:3px; 
}
  
#dyna_fef_page .defaultSkin .mceIframeContainer {
  border-top:1px solid #ced4da;
  border-bottom:1px solid #ced4da;  
}

#dyna_fef_page .defaultSkin table.mceLayout tr.mceLast td {
  border-bottom:1px solid #ced4da;
}

#dyna_fef_page .defaultSkin .mceButton {
  border:0;
}

#dyna_fef_page .defaultSkin a.mceButtonEnabled:hover {
  background-color:#ccc;
}

td.mceIframeContainer {
  font-size:1rem !important;
  font-family: 'Open Sans', sans-serif  !important;
}

[lang="AR"] td.mceIframeContainer {
  font-family: 'Cairo', sans-serif !important;  
}

#dyna_fef_page .dyna_form_data_type_rte {
  overflow-x:auto;
}

@media (max-width: 768px) {
  #dyna_fef_page .dyna_form_data_type_rte {
    border-left:1px solid #ced4da;  
    border-right:1px solid #ced4da;
  }

  #dyna_fef_page .defaultSkin table.mceLayout {
    border-left:0;
    border-right:0;
  }
}

#dyna_fef_editing_language {
  display:inline-block;
  padding:0;
  margin:1.5rem 0;
  color:#116aab;
}

#dyna_fef_editing_language b {
  font-weight:bold;
}

.dynafef_original_rec {
  display:inline-block;
  padding:0;
  color:#666;
  max-width:80%;
  background-color:#fffbb8;
}

#dyna_fef_page img.dyna_form_input-calendar-icon {
  width:32px;
  opacity:.7;
}

div#dyna_fef_page .bootstrap-select {
  background:none transparent;
  box-shadow:none;
  padding:0;
  width:auto !important;
}

div#dyna_fef_page .bootstrap-select .btn.btn-default {
  border:0;
  height:100%;
  background:none transparent;
  box-shadow:none;
}

div#dyna_fef_page .bootstrap-select .dropdown-toggle.bs-placeholder:active {
  background:none transparent;
  box-shadow:none;
}

div#dyna_fef_page .dropdown-toggle.bs-placeholder {
  font-size:1rem;
  color:#495057;
}

div#dyna_fef_page .bootstrap-select.show-tick .dropdown-menu li a span.text {
  color:#495057;
}

div#dyna_fef_page .bootstrap-select li {
  padding:0;
  margin:0;
}

div#dyna_fef_page .bootstrap-select .dropdown-menu li a {
  padding:7px 20px;
}

div#dyna_fef_page .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  top:12px;
  color:#495057;
}

div#dyna_fef_page .bs3.bootstrap-select .dropdown-toggle .filter-option {
  font-size:1rem;
  color:#495057;
  padding-right:20px;
}

div#dyna_fef_page .bs3.bootstrap-select .dropdown-toggle .bs-caret { 
  color:#495057;
}

div#dyna_fef_page .bs3.bootstrap-select .dropdown-menu {
  margin:1px 0;
}

/* Detail pages */

div.article-container {
  margin-bottom:2rem;
}

@media (min-width: 768px) {
  div.article-container {
    display:flex;
  }
}

div.article-image {
  margin-bottom:1rem;
}

@media (min-width: 768px) {
  div.article-image {
    margin-right:1.5rem;
    margin-bottom:0;
  }
}

div.article-image img {
  width:100%;
  height:auto;
}

@media (min-width: 768px) {
  div.article-image img {
    max-width:300px;
  }
}

div.article-subtitle {
  color:#666;
  text-transform:uppercase;
  font-size:1.1rem;
  font-weight:600;
}

div.article-date {
  margin:1rem 0;
}


/* Calendar */

.DynarchCalendar {
  background: none #fff !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: 0;
  -webkit-border-radius: 0;
}

.DynarchCalendar table.DynarchCalendar-bodyTable,
.DynarchCalendar table.DynarchCalendar-titleCont {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600;
  margin:-7px auto 0 auto;
}

[lang="AR"] .DynarchCalendar table.DynarchCalendar-bodyTable,
[lang="AR"] .DynarchCalendar table.DynarchCalendar-titleCont {
  font-family: 'Cairo', sans-serif !important;  
}

.DynarchCalendar .DynarchCalendar-title div {
  text-shadow: none;
  color: #212529 !important;
}

.DynarchCalendar .DynarchCalendar-hover-title div {
  border: 1px solid #fff;
  border-radius: 0;
}

.DynarchCalendar .DynarchCalendar-dayNames {
  background: #fff;
  padding: 0;
}

.DynarchCalendar .DynarchCalendar-navBtn div {
  padding: 10px 0;
}

.DynarchCalendar .DynarchCalendar-hover-navBtn div {
  border: 1px solid #fff;
  border-radius: 0;
}

.DynarchCalendar .DynarchCalendar-dayNames div {
  font-size: 13px;
  padding: 10px;
  text-shadow: none;
  width: auto !important;
  font-weight: 500;
}

.DynarchCalendar .DynarchCalendar-focused {
  background: none #fff !important;
}

.DynarchCalendar .DynarchCalendar-topBar {
  background: none #fff !important;
  border: 0;
  padding: 10px 0 0 0;
}

.DynarchCalendar .DynarchCalendar-bottomBar {
  background: none #fff !important;
  border: 0;
}

.DynarchCalendar .DynarchCalendar-hover-title,
.DynarchCalendar .DynarchCalendar-hover-navBtn,
.DynarchCalendar .DynarchCalendar-hover-bottomBar-today,
.DynarchCalendar .DynarchCalendar-menu table td div.DynarchCalendar-hover-navBtn {
  background: none #fff !important;
}

.DynarchCalendar-menu table td div.DynarchCalendar-hover-navBtn {
  border: 1px solid #fff !important;
}

.DynarchCalendar .DynarchCalendar-hover-title div,
.DynarchCalendar .DynarchCalendar-hover-navBtn div {
  background-color: transparent !important;
  ;
}

.DynarchCalendar-pressed-title,
.DynarchCalendar-pressed-title div,
.DynarchCalendar-pressed-navBtn,
.DynarchCalendar-pressed-bottomBar-today,
.DynarchCalendar-menu table td div.DynarchCalendar-pressed-navBtn {
  background: #fff none !important;
  border: 0 !important;
}

.DynarchCalendar .DynarchCalendar-pressed-title div,
.DynarchCalendar .DynarchCalendar-pressed-navBtn div {
  background-color: transparent !important;
}

.DynarchCalendar .DynarchCalendar-hover-week,
.DynarchCalendar .DynarchCalendar-focused .DynarchCalendar-hover-week {
  background: #fff none !important;
}

.DynarchCalendar .DynarchCalendar-hover-date {
  border: 0;
  background: #ccc;
}

.DynarchCalendar .DynarchCalendar {
  background: url("steel.jpg") none;
}

.DynarchCalendar .DynarchCalendar-day {
  font-size: 13px;
  padding: 10px;
  width: auto !important;
  color: rgba(0,0,0,.5);
  font-weight: 400;
  text-align: center;
}

.DynarchCalendar .DynarchCalendar-hover-date {
  border-radius: 50%;
  border: 0;
  background-color: #f0efef;
}

.DynarchCalendar .DynarchCalendar-weekend {
  color: #0288d1 !important;
}

.DynarchCalendar .DynarchCalendar-day-othermonth.DynarchCalendar-weekend {
  color: rgba(2,136,209,.5);
}

.DynarchCalendar .DynarchCalendar-day-selected {
  background-color: #0288d1;
  color: #fff !important;
  border-radius: 50%;
  border: 0;
}

.DynarchCalendar .DynarchCalendar-day-today.DynarchCalendar-day-selected {
  background-color: #0288d1;
  color: #fff !important;
  border-radius: 50%;
  border: 0;
}

.DynarchCalendar-menu {
  background: none #f0efef !important;
  opacity: 0.95 !important;
  filter: alpha(opacity=95) !important;
}

.DynarchCalendar-menu table {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: normal !important;
  font-size: 13px;
  color: rgba(0,0,0,.5);
}

[lang="AR"] .DynarchCalendar-menu table {
  font-family: 'Cairo', sans-serif !important;  
}

.DynarchCalendar-menu table td {
  font-size: 13px !important;
}

.DynarchCalendar .DynarchCalendar-bottomBar {
  border: 0;
}

.DynarchCalendar .DynarchCalendar-bottomBar-today {
  font-size: 13px;
  padding: 10px;
  text-shadow: none;
  width: auto !important;
  font-weight: 500;
  color: #212529 !important;
}

.DynarchCalendar .DynarchCalendar-bottomBar-today {
  border: 1px solid #fff;
  display: none;
}

.DynarchCalendar-menu table td {
  vertical-align: middle;
}

.DynarchCalendar-menu table td div.DynarchCalendar-menu-month {
  width: auto !important;
  height: 40px;
  line-height: 40px;
  font-weight: 500 !important;
  text-align: center !important;
}

.DynarchCalendar-menu-year {
  text-align: center;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  margin-bottom: 10px;
}

[lang="AR"] .DynarchCalendar-menu-year {
  font-family: 'Cairo', sans-serif !important;  
}

.DynarchCalendar-topCont .DynarchCalendar .DynarchCalendar-day-today {
  color:#000;
  font-weight:bold;
}

/* ########## Flexbox ########## */

.row .subcl,
.row .subcr {
  padding: 0;
  height: 100%;
  display: flex;
}

/* Grey row */

.row.grey-row {
  background-color: #f0f0f0;
  padding: 2rem 0;
  margin: 0;
}

.row.grey-row .container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .row.grey-row .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .row.grey-row .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .row.grey-row .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .row.grey-row .container {
    max-width: 1140px;
  }
}

.row.grey-row h2 {
    margin-top: 0;
}

.row.grey-row p {
  margin-bottom: 0;
}

.row.grey-row .card-deck {
  width: -webkit-fill-available;
}

@media (max-width: 576px) {
  .row.grey-row .card-deck.card-deck .card.row {
    padding: 0 15px;
  }
}

/* Cards */

.row .card {
  overflow: hidden;
  border: 0;
  background-color: transparent;
}

.row .card-img iframe {
  width:100%;
  height:189px;
}

@media (min-width: 576px) {
  .row .card-img iframe {
    width:100%;
    height:134px;
  }
}

@media (min-width: 768px) {
  .row .card-img iframe {
    height:117px;  
  }
}

@media (min-width: 992px) {
  .row .card-img iframe {
    height:163px;  
  }
}

@media (min-width: 1200px) {
  .row .card-img iframe {
    height:196px;
  }
}

.row .card-img video {
  width:100%;
  height:auto;
}

.row .card-img {
  max-height: 189px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .row .card-img {
    max-height: 117px;
    overflow: hidden;
  }
}

@media (min-width: 992px) {
  .row .card-img {
    max-height: 163px;
    overflow: hidden;
  }
}

@media (min-width: 1200px) {
  .row .card-img {
    max-height: 196px;
    overflow: hidden;
  }
}

#c711302 .card-img {
  max-height: 190px;
}

@media (min-width: 576px) {
  #c711302 .card-img {
    max-height: 135px;
  }
}

@media (min-width: 768px) {
  #c711302 .card-img {
    max-height: 118px;
  }
}

@media (min-width: 998px) {
  #c711302 .card-img {
    max-height: 155px;
  }
}

@media (min-width: 1200px) {
  #c711302 .card-img {
    max-height: 195px;
  }
}

.card-more {
  margin: 15px 0;
}

.card-more.pull-right {
  margin-bottom:0;
}

[lang="ar"] .card-more.pull-right {
  float: left;
}

@media (min-width: 576px) {
  .card-deck {
    margin: 0;
  }
}

.card-deck .card.row {
  flex-direction: row;
}

.card-deck .card.row .card-img {
  background-color: #f0f0f0;
  padding: 0;
  /*height:190px;*/
}

.card.row .card-body {
  padding: 0 1.25rem;
}

.card.row .card-body h2 {
  margin:1rem 0;
}

@media (min-width: 768px) {
  .card.row .card-body h2 {
    margin-top:0;
  }
}

.card.row .btn-primary {
  margin-top:10px;
  border-radius:20px;
  -webkit-border-radius:20px;
  padding:.375rem 1.25rem;
}

.card.row .btn-primary a {
  color:#fff !important;
}

.card.row .btn-primary a {
  text-decoration:none;
}

/* Webcast */

.card.webcast {
  position: relative;
}

.card.webcast:after {
  top: 0;
  left: 0;
  content: "LIVE NOW";
  text-transform: uppercase;
  position: absolute;
  font-weight: 700;
  color: white;
  font-size: 12px;
  width: 100%;
  padding: 15px 40px;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

.card.webcast .card-img {
  position: relative;
  overflow: visible;
}

.card.webcast .card-img:before {
  content: "";
  width: 13px;
  height: 13px;
  background: red;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 1;
  -webkit-animation: blink 0.7s alternate infinite;
  -moz-animation: blink 0.7s alternate infinite;
  -ms-animation: blink 0.7s alternate infinite;
}

.card.webcast .card-img:after {
  content: "";
  position: absolute;
  pointer-events:none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+99&1+0,0+100 */
  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.01) 99%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.01) 99%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.01) 99%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#00000000", GradientType=0);
  /* IE6-9 */
}

[lang=ar] .card.webcast:after {
  content: "يحدث  الآن";
}

[lang=ar] .card.webcast .card-img {
  position: relative;
  overflow: visible;
}

[lang=ar] .card.webcast .card-img:before {
  top: 18px;
  left: auto;
  right: 20px;
}

[lang=zh] .card.webcast:after {
  content: "正在直播";
}

[lang=en] .card.webcast:after {
  content: "LIVE NOW";
}

[lang=fr] .card.webcast:after {
  content: "En directe";
}

[lang=ru] .card.webcast:after {
  content: "прямоЙ эфир";
}

[lang=es] .card.webcast:after {
  content: "En directo";
}

@-webkit-keyframes blink {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes blink {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

/* Cards List */

.card-list.card-deck .card {
  margin:0 0 50px 0;
}

@media (min-width: 576px) {
  .card-list.card-deck .card {
    flex:1 0 100%;
  }
}

.card-list.card-deck {
  margin: ;
}

.card-list .card.row {
  margin:0 0 50px 0;
}

.card-list .card.row h2 {
  margin-top:0;
}

.card-list .card.row .card-img {
  background-color:transparent;
}

@media (max-width: 768px) {
  .card-list .card.row .card-body {
    padding-top: 1em;
  }
}

.card-edit {
  width: 100%;
  margin-top: 10px;
}

.card-edit .tx-dynalist-pi1-langtool {
  float: left;
} 

div.dynalist_norecordfound {
  margin-bottom:2rem 0;
}

/* Blue card */

body .card.card-blue {
  background-color: #126aaa;
  border: 0;
  margin:0;
}

body .card.card-blue h5,
body .card.card-blue h6,
body .card.card-blue a,
body .card.card-blue p {
  color: #fff;
}

.card.row .card-footer {
  border: 0;
  background-color: transparent;
  padding: 0;
  color: #a0a0a0;
}

/* Grey card */

body .card.card-grey {
  background-color: #f0f0f0;
  border: 0;
  margin:0;
}

body .card.card-grey h5,
body .card.card-grey h6,
body .card.card-grey p {
  color: ##212529;
}

body .card.card-grey .card-more a {
  color: #212529;  
}

/* White card */

.card-deck .card-white .card-body {
  background-color: #fff;
}

/* Vertical card */

.card-deck .card.card-vertical {
  display: flex;
}

/* Highlights */

#c720132 {
  width:100%;
}

/* From the DG */

.card-deck.type-from-the-dg {
  margin:0;
  height:100%;  
}

.dg-box {
  overflow:hidden;
  margin-bottom:2rem;
  width:100%;
}

.dg-box h2 {
  margin:0;
  padding:2rem 0 1.5rem 0;
  background-color:#fff;
}

.dg-box .tx-dynalist-pi1 {
  height:100%;
}

.card-deck.type-from-the-dg .card-img {
  max-height: 400px;
  overflow: hidden;
}

@media (min-width: 992px) {
  .card-deck.type-from-the-dg .card-img {
  }
}

.card-deck.type-from-the-dg .card-body {
  flex:0;
}

.card-deck.type-from-the-dg .card.card-grey {
  background-color:#fff;
}

.card-deck.type-from-the-dg .card.card-grey .card-body {
  background-color:#f2f2f2;
}

/* Main topics */

.main-topics.card-deck-2x2 {
  margin-bottom: 30px;
  margin: 0 0 30px 0;
}

.main-topics.card-deck .card {
  margin: 0;
  background-color: #f0f0f0;
  position: relative;
  border: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;  
  border-radius:0;
  -webkit-border-radius:0;
}

.main-topics.card-deck .card:hover {
  background-color:#0D6BAC;
  text-decoration:none;
}

.main-topics.card-deck .card:hover .card-title a,
.main-topics.card-deck .card:hover h6.card-footer {
  color:#fff;
}

.main-topics.card-deck .card:hover .card-img-top {
  -webkit-transition-duration:0.3s;
  transition-duration:0.3s;
  -webkit-transition-property:transform;
  transition-property:transform;  
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}


.main-topics .card-img {
  height: 100%;
  max-height: 190px;
}

@media (min-width: 576px) {
  .main-topics .card-img {
    height: 100%;
    max-height: 287px;
  }
}

@media (min-width: 992px) {
  .main-topics .card-img {
    height: 100%;
    max-height: 260px;
  }
}

@media (min-width: 1200px) {
  .main-topics .card-img {
    height:180px;
  }

  .main-topics .card-img-top {
    height: 100%;
  }
}

.main-topics .card .card-body {
  padding:1.5rem 2rem;
  align-self:center;
}

.main-topics .card .card-body .card-title {
  margin-bottom:0;
  line-height:1.3;
}

.main-topics .card:nth-child(2) {
  flex-direction: row-reverse;
}

@media (min-width: 1200px) {
  .main-topics .card:nth-child(2) {
    flex-direction: row;
  }
}

.main-topics .card:nth-child(3) {
  flex-direction: row;
}

@media (min-width: 1200px) {
  .main-topics .card:nth-child(3) {
    flex-direction: row-reverse;
  }
}

.main-topics .card:nth-child(4) {
  flex-direction: row-reverse;
}

.main-topics .card::before {
  content: "";
  position: absolute;
  z-index: 10;
  display: block;
  width: 100%;
  font-size: 30px;
  font-weight: 500;
  top: 235px;
  left: 20px;
}

@media (min-width: 768px) {
  .main-topics .card::before {
    text-align: center;
    top: 10px;
    left: auto;
  }
}

@media (min-width: 1200px) {
  .main-topics .card::before {
    font-size: 30px;
  }
}

.card-deck.card-deck-2x2.main-topics > div {
  flex-basis: calc(100% - 40px);
}

@media (max-width: 768px) {
  .card-deck.card-deck-2x2.main-topics > div {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 1200px) {
  .card-deck.card-deck-2x2.main-topics > div {
    flex-basis: calc(50% - 40px);
  }
}

/* 2 rows - 2 columns */

@media (min-width: 576px) {
  .card-deck.card-deck-2x2 > div {
    flex-basis: calc(50% - 40px);
  }
}

/* TYPO3 generated elements */

div.row div.csc-textpic-imagewrap {
  width: auto !important;
}

div.row div.csc-textpic-imagewrap img {
  width: 100%;
  height: 100%;
  margin-bottom:2rem;
}

#gtx-trans {
  display:none;
}

/* Countries Showcase */

.masonry-grid {
  margin-left:-5px;
  margin-right:-5px;
  margin-bottom:2rem;
}

.masonry-grid::after {
  content:'';
  display:block;
  clear:both;
}

.masonry-grid .masonry-item {
  background-size:cover;
  margin:5px;
  float:left;  
}

#masonry-slider .masonry-item h5,
.masonry-grid .masonry-item h5 {
  margin-top:3px;
  color:#fff;
  font-size:1.25rem;  
}

.masonry-grid .masonry-item h5 a {
  color:#fff;
  font-size:1.2rem;
}

.masonry-grid .masonry-card {
  padding: 10px;
}

.container-flag {
  display:flex;  
}

.flag-country {
  width:50%;  
}

.number-country {
  width: 50%;
  text-align: right;
  color: white;
  font-size: 1.25em;
}

[lang="AR"] .number-country {
  text-align:left;
}

.detail-country {
  font-size: 0.75em;
  color: white;
}

.detail-country p {
  margin:2px 0;
  line-height:1.4;
}

.detail-country a,
.detail-country a:hover {
  color:#fff;
}

.masonry-grid .masonry-item {
  margin:5px;
}

.masonry-item .masonry-card-CHN { 
  background-color:rgba(0, 0, 0, .4);
  width:335px;
  height:335px;
}

.masonry-item .masonry-card-JPN { 
  background-color:rgba(0, 0, 0, .4);
  width:210px;
  height:417px;
}

.masonry-item .masonry-card-KOR { 
  background-color:rgba(0, 0, 0, .4);
  width:320px;
  height:225px;
}

.masonry-item .masonry-card-IND { 
  background-color:rgba(0, 0, 0, .4);
  width:215px;
  height:255px;
}

.masonry-item .masonry-card-IRN { 
  background-color:rgba(0, 0, 0, .4);
  width:400px;
}

.masonry-item .masonry-card-ESP { 
  background-color:rgba(0, 0, 0, .4);  
  width:310px;
  height:257px;
}

.masonry-item .masonry-card-PRT { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-KEN { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-BGD { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-PHL { 
  background-color:rgba(0, 0, 0, .4);   
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-LKA { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-ITA { 
  background-color:rgba(0, 0, 0, .4);
  width:335px;
  height:150px;
}

.masonry-item .masonry-card-CHL {
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-MAR { 
  background-color:rgba(0, 0, 0, .4);
  width:335px;
  height:150px;
}

.masonry-item .masonry-card-TZA { 
  background-color:rgba(0, 0, 0, .4);
  width:335px;  
  height:150px;
}

.masonry-item .masonry-card-MEX { 
  background-color:rgba(0, 0, 0, .4);   
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-PER { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-DZA { 
  background-color:rgba(0, 0, 0, .4);   
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-TUN { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-ARE { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-EGY { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

.masonry-item .masonry-card-BRA { 
  background-color:rgba(0, 0, 0, .4); 
  width:180px;
  height:150px;
}

@media (min-width: 576px) {
  .masonry-item .masonry-card-CHN {
    width:300px;
    height:300px;
  }

  .masonry-item .masonry-card-JPN {
    width:200px;
    height:407px;
  }

  .masonry-item.KOR {
    margin-top:-102px;
  }

  .masonry-item .masonry-card-KOR {
    width:300px;
  }

  .masonry-item .masonry-card-IND {
    width:200px;
    height:270px;
  }

  .masonry-item.IRN {
    margin-top:-147px;
  }

  .masonry-item .masonry-card-IRN {
    width:300px;
    height:226px;
  }

  .masonry-item .masonry-card-ESP {
    width:300px;
    height:225px;
  }

  .masonry-item.KEN {
    margin-top:-80px;
  }

  .masonry-item.PHL {
    margin-left:74px;
  }

  .masonry-item .masonry-card-ITA {
    width:250px;
    height:180px;
  }

  .masonry-item .masonry-card-MAR {
    width:250px;
    height:180px;
  }

  .masonry-item .masonry-card-TZA {
    width:320px;
  }

  .masonry-item.MEX {
    margin-left:40px;
  }

  .masonry-item.ARE {
    margin-left:145px;
  }
}

@media (min-width: 768px) {

  .masonry-item .masonry-card-CHN {
    width:335px;
    height:335px;
  }

  .masonry-item .masonry-card-JPN { 
    width:210px;
    height:417px;
  }

  .masonry-item .masonry-card-KOR {
   width:320px;
   }

  .masonry-item.KOR {
    margin-top:-77px;
    margin-left:30px;
  }

  .masonry-item .masonry-card-KOR {
    width: 310px;
    height: 235px;
  }

  .masonry-item .masonry-card-IND {
    width: 345px;
    height: 153px;
  }

  .masonry-item.IRN {
    margin-top:5px;
  }

  .masonry-item .masonry-card-IRN {
    width:370px;
    height:178px;
  }

  .masonry-item .masonry-card-ESP {
    width: 240px;
    height:338px;
  }

  .masonry-item.KEN {
    margin-top:-155px;
    margin-left:-240px;
  }

  .masonry-item.BGD {
    margin-top:-155px;
    margin-left:-50px;
  }

  .masonry-item.PRT {
    margin-left:60px;
  }

  .masonry-item.PHL {
    margin-left:5px;
  }

  .masonry-item.LKA {
    margin-top:5px;
  }

  .masonry-item .masonry-card-ITA {
    width:335px;
    height:150px;
  }

  .masonry-item .masonry-card-MAR {
    width:335px;
    height:150px;
  }

  .masonry-item .masonry-card-TZA {
    width:335px;
  }

  .masonry-item.MEX {
    margin-left:5px;
  }

  .masonry-item.CHL {
    margin-left:100px;
  }

  .masonry-item.TUN {
    margin-left:135px;
  }

  .masonry-item.ARE {
    margin-left:5px;
  }

  .masonry-item.BRA { 
    margin-left:100px;
  }
}

@media (min-width: 992px) {

  .masonry-item.ESP {
    clear:none;
    margin-left:-535px;
    margin-top:-245px;
   }

  .masonry-item .masonry-card-ESP {
    width:310px;
    height:240px;
   }

  .masonry-item.JPN {
    margin-top:30px;
   }

  .masonry-item .masonry-card-JPN {
    width: 210px;
    height: 414px;
   }

  .masonry-item.KOR {
    margin-top:60px;
    margin-left:5px;
   }

  .masonry-item .masonry-card-KOR {
    width:320px;
    height:250px;
   }

  .masonry-item.IND {
    margin-top:5px;
   }

  .masonry-item .masonry-card-IND {
    width:230px;
    height:270px;
   }

  .masonry-item.IRN {
    margin-left:350px;
    margin-top:-141px;
  }

  .masonry-item .masonry-card-IRN {
    width:210px;
    height:296px;
  }

  .masonry-item.PRT {
    margin-left:5px;
  }
  
  .masonry-item.KEN {
    margin-left:160px;
    margin-top:5px;
  }

  .masonry-item.BGD {
    margin-top:-155px;
    margin-left:-185px;
  }
  
  .masonry-item.ITA {
    margin-left:5px;
    margin-top:5px;
  }

  .masonry-item .masonry-card-ITA {
    height:150px;
  }

  .masonry-item.LKA {
    margin-top:5px;
  }

  .masonry-item.PHL {
    margin-left:5px;
    margin-top:5px;
    clear:none;
  }

  .masonry-item.CHL {
    margin-left:5px;
  }

  .masonry-item.TZA {
    margin-left:100px;
  }

  .masonry-item.MEX {
    margin-left:5px;
  }

  .masonry-item.TUN {
    margin-left:5px;
  }

  .masonry-item.ARE {
    margin-left:5px;
  }

  .masonry-item.DZA {
    margin-left:50px;
  }
}

@media (min-width: 1200px) {

  .masonry-item .masonry-card-CHN { 
    width:335px;
    height:335px;
  }

  .masonry-item .masonry-card-JPN { 
    width:210px;
    height:417px;
  }

  .masonry-item .masonry-card-KOR { 
    width:320px;
    height:225px;
  }

  .masonry-item.IND {
    margin-top:30px;
    margin-left:5px;
  }

  .masonry-item .masonry-card-IND { 
    width:215px;
    height:255px;
  }

  .masonry-item.IRN {
    margin:5px;
  }

  .masonry-item .masonry-card-IRN { 
    width:400px;
    height:152px;
  }

  .masonry-item.ESP {
    clear: left;
    margin-left:30px;
    margin-top:-102px;
  }

  .masonry-item .masonry-card-ESP { 
    width:310px;
    height:257px;
  }

  .masonry-item.KEN {
    margin-left:5px;
  }

  .masonry-item .masonry-card-KEN { 
    width:180px;
    height:150px;
  }

  .masonry-item.BGD {
    margin:5px;
  }

  .masonry-item .masonry-card-BGD { 
    width:180px;
    height:150px;
  }

  .masonry-item.PHL {
    margin:5px;
  }

  .masonry-item .masonry-card-PHL { 
    width:180px;
    height:150px;
  }

  .masonry-item .masonry-card-LKA { 
    width:180px;
    height:150px;
  }

  .masonry-item.ITA {
    margin-left:5px;
  }

  .masonry-item .masonry-card-ITA { 
    width:335px;
    height:150px;
  }

  .masonry-item .masonry-card-CHL {
    width:180px;
    height:150px;
  }

  .masonry-item .masonry-card-MAR { 
    width:335px;
    height:150px;
  }

  .masonry-item .masonry-card-TZA { 
    clear:left;
    width:335px;  
    height:150px;
  }

  .masonry-item.MEX {
    margin:5px;
  }

  .masonry-item .masonry-card-MEX { 
    width:180px;
    height:150px;
  }

  .masonry-item .masonry-card-PER { 
    width:180px;
    height:150px;
  }

  .masonry-item.DZA {
    margin-left:5px;
  }

  .masonry-item .masonry-card-DZA { 
    width:180px;
    height:150px;
  }

  .masonry-item.TUN {
    margin-left:150px;
  }

  .masonry-item .masonry-card-TUN { 
    width:180px;
    height:150px;
  }

  .masonry-item.ARE {
    margin-left:5px;
  }

  .masonry-item .masonry-card-ARE { 
    width:180px;
    height:150px;
  }

  .masonry-item .masonry-card-EGY { 
    width:180px;
    height:150px;
  }

  .masonry-item.BRA { 
    margin-left:5px
  }
}

#masonry-slider {
  margin-bottom:2rem;
}

#masonry-slider .carousel-item {
  width:100%;
  height:400px;
  margin-top:0;
  margin-bottom:0;
  margin-left:0;
  float:left;
  background-size:cover;
}

#masonry-slider .carousel-item .masonry-card {
  width:100%;
  height:100%;
  padding:1rem;
  float:left;
}

#masonry-slider .carousel-item .detail-country {
  font-size:.9rem;
}

#masonry-slider .carousel-item .detail-country p {
  margin:0 50px 4px 50px;
}