/*!
 * Start Bootstrap - Agency v5.2.1 (https://startbootstrap.com/template-overviews/agency)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
 */

body {
  overflow-x: hidden;
  font-family: 'Tajawal', sans-serif;
  /* font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

p {
  line-height: 1.75;
}

a {
	color: #8b846c;
}

a:hover {
  color: #fec503;
}

.text-primary {
  color: #fed136 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

.page-section {
  padding: 100px 0;
}

.page-section h2.section-heading {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

.page-section h3.section-subheading {
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 75px;
  text-transform: none;
  /* font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

@media (min-width: 768px) {
  section {
    padding: 150px 0;
  }
}

::-moz-selection {
  background: #fed136;
  text-shadow: none;
}

::selection {
  background: #fed136;
  text-shadow: none;
}

img::-moz-selection {
  background: transparent;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

.btn {
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
  font-weight: 700;
}

.btn-xl {
  font-size: 18px;
  padding: 20px 40px;
}

.btn-primary {
    background-color: #605848;
    border-color: #605848;
    border-radius: 0;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background-color: #fec810 !important;
  border-color: #fec810 !important;
  color: white;
}

.btn-primary:active, .btn-primary:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;
  box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;
}

#mainNav {
  background-color: #f8f8f8;
}

#mainNav .navbar-toggler {
  font-size: 12px;
  right: 0;
  padding: 13px;
  text-transform: uppercase;
  color: white;
  border: 0;
  background-color: #c9a62f;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

#mainNav .navbar-brand {
  color: #fed136;
  /* font-family: 'Kaushan Script', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
  color: #fec503;
}

#mainNav .navbar-nav .nav-item .nav-link {
  font-size: 80%;
  font-weight: 400;
  padding: 0.75em 0;
  letter-spacing: 1px;
  color: #000;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}
body.ar #mainNav .navbar-nav .nav-item .nav-link{
	font-size: 90%;
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #fed136;
}
.dropdown .row{
	width: 100%;
}
@media (min-width: 992px) {
	.dropdown .row{
		width: auto;
	}
	.dropdown-content ul{
		width: 289px;
	}
  #mainNav {
    padding-top: 25px;
    padding-bottom: 25px;
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s;
    border: none;
    background-color: transparent;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 1.1em 1em !important;
  }
  #mainNav.navbar-shrink {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #f8f8f8;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em;
    padding: 12px 0;
  }
}

header.masthead {
  text-align: center;
  color: white;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: 100vh;
}

header.masthead .intro-text {
  padding-top: 150px;
  padding-bottom: 100px;
}

header.masthead .intro-text .intro-lead-in {
  font-size: 22px;
  font-style: italic;
  line-height: 22px;
  margin-bottom: 25px;
  /* font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

header.masthead .intro-text .intro-heading {
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 25px;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

@media (min-width: 768px) {
  header.masthead .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
  }
  header.masthead .intro-text .intro-lead-in {
    font-size: 40px;
    font-style: italic;
    line-height: 40px;
    margin-bottom: 25px;
    /* font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
  }
  header.masthead .intro-text .intro-heading {
    font-size: 75px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
  }
}

.service-heading {
  margin: 15px 0;
  text-transform: none;
}

#portfolio .portfolio-item {
  right: 0;
  margin: 0 0 15px;
  height: 270px;
}

#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  opacity: 0;
  background: rgba(254, 209, 54, 0.9);
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 20px;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20px;
  margin-top: -12px;
  text-align: center;
  color: white;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;
}

#portfolio .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  padding: 25px;
  text-align: center;
  background-color: #fff;
}

#portfolio .portfolio-item .portfolio-caption h4 {
  margin: 0;
  text-transform: none;
}

#portfolio .portfolio-item .portfolio-caption p {
  font-size: 16px;
  font-style: italic;
  margin: 0;
  /* font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

#portfolio * {
  z-index: 2;
}

@media (min-width: 767px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;
  }
}

.portfolio-modal .modal-dialog {
  margin: 1rem;
  max-width: 100vw;
}

.portfolio-modal .modal-content {
  padding: 100px 0;
  text-align: center;
}

.portfolio-modal .modal-content h2 {
  font-size: 3em;
  margin-bottom: 15px;
}

.portfolio-modal .modal-content p {
  margin-bottom: 30px;
}

.portfolio-modal .modal-content p.item-intro {
  font-size: 16px;
  font-style: italic;
  margin: 20px 0 30px;
  /* font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

.portfolio-modal .modal-content ul.list-inline {
  margin-top: 0;
  margin-bottom: 30px;
}

.portfolio-modal .modal-content img {
  margin-bottom: 30px;
}

.portfolio-modal .modal-content button {
  cursor: pointer;
}

.portfolio-modal .close-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}

.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}

.portfolio-modal .close-modal .lr {
  /* Safari and Chrome */
  z-index: 1051;
  width: 1px;
  height: 75px;
  margin-left: 35px;
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #212529;
}

.portfolio-modal .close-modal .lr .rl {
  /* Safari and Chrome */
  z-index: 1052;
  width: 1px;
  height: 75px;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #212529;
}

.timeline {
  position: relative;
  padding: 0;
  list-style: none;
  margin-top: 50px;
}

.timeline:before {
  position: absolute;
  top: 0;
  bottom: 0;
  /* height: 0%; */
  left: 40px;
  width: 2px;
  margin-left: -1.5px;
  content: '';
  background-color: #e9ecef;
  -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
  transition: height 1s;
}

.timeline > li {
  position: relative;
  min-height: 50px;
  margin-bottom: 50px;
}

.timeline > li:after, .timeline > li:before {
  display: table;
  content: ' ';
}

.timeline > li:after {
  clear: both;
}

.timeline > li .timeline-panel {
  position: relative;
  float: right;
  width: 100%;
  padding: 0 20px 0 100px;
  text-align: left;
}

.timeline > li .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}

.timeline > li .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}

.timeline > li .timeline-image {
  position: absolute;
  z-index: 100;
  left: 0;
  width: 80px;
  height: 80px;
  margin-left: 0;
  text-align: center;
  color: white;
  /* border: 7px solid #e9ecef;
  border-radius: 100%; */
  background-color: transparent;
}

.timeline > li .timeline-image:last-child {
  border: 4px solid #ccc5b5;
  border-radius: 10%;
  transform: rotate(45deg) !important;
  background-color: #c9a62f;
}
body.ar .timeline > li .timeline-image:last-child h4{
	font-size: 31px;
	margin-right: 4px;
	margin-top: 61px;
}
.timeline > li:last-child .timeline-image h4 {
  transform: rotate(-45deg) !important;
  color: white;
}
.timeline > li .timeline-image h4 {
  font-size: 10px;
  line-height: 14px;
  margin-top: 12px;
}

.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
  padding: 0 20px 0 100px;
  text-align: left;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}

.timeline > li:last-child {
  margin-bottom: 0;
}

.timeline .timeline-heading h4 {
  margin-top: 0;
  color: #776e56;
}

.timeline .timeline-heading h4.subheading {
  text-transform: none;
}

.timeline .timeline-body > ul,
.timeline .timeline-body > p {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .timeline:before {
    left: 50%;
  }
  .timeline > li {
    min-height: 100px;
    margin-bottom: 250px;;
  }
  .timeline > li .timeline-panel {
    float: left;
    width: 41%;
    padding: 0 20px 20px 30px;
    text-align: right;
  }
  .timeline > li .timeline-image {
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 13px;
    line-height: 18px;
    margin-top: 16px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 0 30px 20px 20px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .timeline > li {
    min-height: 150px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px;
  }
  .timeline > li .timeline-image {
    width: 150px;
    height: 150px;
    margin-left: -75px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 18px;
    line-height: 26px;
    margin-top: 30px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 20px 20px;
  }
  /* body.ar #mainNav .navbar-nav .nav-item .nav-link{
	font-size: 69%;
	}
  body.ar #mainNav .navbar-nav .nav-item .nav-link{
	font-size: 69%;
	} */
}

@media (min-width: 1200px) {
  .timeline > li {
    min-height: 170px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px 100px;
  }
  .timeline > li .timeline-image {
    width: 170px;
    height: 170px;
    margin-left: -85px;
  }
  .timeline > li .timeline-image h4 {
    margin-top: 40px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 100px 20px 20px;
  }
}

.team-member {
  margin-bottom: 50px;
  text-align: center;
}

.team-member img {
  width: 225px;
  height: 225px;
  border: 7px solid rgba(0, 0, 0, 0.1);
}

.team-member h4 {
  margin-top: 25px;
  margin-bottom: 0;
  text-transform: none;
}

.team-member p {
  margin-top: 0;
}

section#contact {
  background-color: #181818;
  /* background-image: url("../img/map-image.png"); */
  /* background-repeat: no-repeat;
  background-position: center; */
}
section#about {
  overflow: hidden;
  background-color: #615949;
  /* background-image: url("../img/SABS-Group\ -\ illustration-04.png"); */
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  padding: 0;
  position: relative;
  height: 60vh;
}

section#contact .section-heading {
  color: #fff;
}

section#contact .form-group {
  margin-bottom: 25px;
}

section#contact .form-group input,
section#contact .form-group textarea {
  padding: 20px;
}

section#contact .form-group input.form-control {
  height: auto;
}

/* section#contact .form-group textarea.form-control {
	height: 248px;
} */

section#contact .form-control:focus {
  border-color: #fed136;
  -webkit-box-shadow: none;
  box-shadow: none;
}

section#contact ::-webkit-input-placeholder {
  font-weight: 700;
  color: #ced4da;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

section#contact :-moz-placeholder {
  font-weight: 700;
  color: #ced4da;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

section#contact ::-moz-placeholder {
  font-weight: 700;
  color: #ced4da;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

section#contact :-ms-input-placeholder {
  font-weight: 700;
  color: #ced4da;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

.footer {
  /* padding: 25px 0; */
  text-align: center; 
  background-color: #605848;
}
.footer i {
	color: white;
}
.footer span.copyright {
  font-size: 90%;
  line-height: 40px;
  text-transform: none;
  color: #fff;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

.footer ul.quicklinks {
  font-size: 90%;
  line-height: 40px;
  margin-bottom: 0;
  text-transform: none;
  /* font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */
}

ul.social-buttons {
  margin-bottom: 0;
}

ul.social-buttons li a {
  font-size: 20px;
  line-height: 50px;
  display: block;
  width: 50px;
  height: 50px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: white;
  border-radius: 100%;
  outline: none;
  background-color: #212529;
}

ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
  background-color: #fed136;
}
/* #myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  z-index: -1;
} */
.header-content{
  opacity: 0
}
.material-icons:hover {
  cursor: pointer;
}
@keyframes fade-in {
  from {opacity: 0; transform: scale(.7,.7)}
  to {opacity: 1;}
}
@keyframes fade-out {
  from {opacity: 1; }
  to {opacity: 0; transform: scale(.7, .7)}
}
.visible {
  animation: fade-in 1.4s;
  opacity: 1;
}
.unvisible{
  animation: fade-out 1.4s;
  opacity: 0;
}
@keyframes bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
      transform: translateY(0);
  }
  40% {
      transform: translateY(-20px);
  }
  60% {
      transform: translateY(-12px);
  }
}
.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
}
.eng-logo{
  height: 3em;
}
/* .video-control{
  position: absolute;
  margin-left: 50%;
} */

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}


#services{
	/* position: relative; */
	overflow: hidden;
	background-image: url("../img/بن+سعيدان+للعقارات+--jpeg.jpg");
	background-size: cover;
	height: 80vh;
}

.wrapper {
  width: 100vw;
  margin: 0 auto;
  height: 400px;
  background-color: #161616;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
  .wrapper {
     height: 700px;
  }
  ul.timeline li:first-child {
	  margin-bottom: 123px;
  }
}
@media screen and (max-width: 975px) {
  body.ar .timeline > li .timeline-image:last-child h4{
	font-size: 1em;
	margin-top: 2em;
  }
}

.content {
  max-width: 1024px;
  width: 100%;
  padding: 0 4%;
  padding-top: 250px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .content {
     padding-top: 300px;
     flex-direction: column;
  }
}

.card {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
  height: 250px;
  background-color: #292929;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
  border: 2px solid rgba(7, 7, 7, 0.12);
  font-size: 16px;   
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon {
  margin: 0 auto;
  width: 100%;
  height: 80px;
  max-width:80px;
  background: linear-gradient(90deg, #c9a62f 0%, #c9a62f 40%, rgba(0, 0, 0, 0.28) 60%);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: all 0.8s ease;
  background-position: 0px;
  background-size: 200px;
}

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.card .title {
  width: 100%;
  margin: 0;
  text-align: center;
  margin-top: 30px;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.card .text {
  width: 80%;
  margin: 0 auto;
  font-size: 13px;
  text-align: center;
  margin-top: 20px;
  color: white;
  font-weight: 200;
  letter-spacing: 2px;
  opacity: 0;
  max-height:0;
  transition: all 0.3s ease;
}

.card:hover {
  height: 270px;
}

.card:hover .info {
  height: 90%;
}

.card:hover .text {
  transition: all 0.3s ease;
  opacity: 1;
  max-height:40px;
}

.card:hover .icon {
  background-position: -120px;
  transition: all 0.3s ease;
}

.card:hover .icon i {
  background: linear-gradient(90deg, #c9a62f, #c9a62f);
  -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  opacity: 1;
  transition: all 0.3s ease;
}
.progress-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 35px;
  background: #dfdfdf;
  z-index: 6;
}

.progress-bar {
  height: 8px;
  background: #c9a62f;
  width: 0%;
}

.nav-item {
  color: white;
  margin: 0 5px;
  padding: 2px 3px;
  text-decoration: none;
  position: relative;
  transition: all 0.19s ease;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-right: 25%;
}
/* .nav-item:after {
  content: "";
  position: absolute;
  width: calc(100% - 6px);
  height: 1px;
  background-color: #c9a62f;
  bottom: 0;
  transition: all 0.19s ease;
}
.nav-item:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0px;
  background-color: #c9a62f;
  right: 0;
  bottom: 0;
  transition: all 0.19s 0.19s ease;
  z-index: -1;
}
.nav-item:hover:after {
  width: 0;
  left: 0;
}
.nav-item:hover:before {
  /* 
  width: 100%;
  height: 100%;
  /
  left: 0;
} */
.img-fluid-award {
  max-width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
}



.grid {
	position: relative;
	clear: both;
	margin: 0 auto;
  width:100%;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0px;
	width: 100%;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}


/* Individual effects */

/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia {
	background: #2f3238;
}

figure.effect-julia img {
	max-width: none;
	height: 400px;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia figcaption {
	text-align: left;
}

figure.effect-julia h2 {
	position: relative;
	padding: 0.5em 0;
}

figure.effect-julia p {
	display: inline-block;
	margin: 0 0 0.25em;
	padding: 0.4em 1em;
	background: rgba(255,255,255,0.9);
	color: #2f3238;
	text-transform: none;
	font-weight: 500;
	font-size: 75%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-360px,0,0);
	transform: translate3d(-360px,0,0);
}

figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}



/*-----------------*/
/***** Goliath *****/
/*-----------------*/

figure.effect-goliath {
	background: #df4e4e;
}

figure.effect-goliath img,
figure.effect-goliath h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-goliath img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 30px;
}

figure.effect-goliath p {
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-goliath:hover img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-80px,0);
}

figure.effect-goliath:hover h2 {
	-webkit-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);
}

figure.effect-goliath:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*-----------------*/
/***** Hera *****/
/*-----------------*/

figure.effect-hera {
	background: #303fa9;
}

figure.effect-hera h2 {
	font-size: 158.75%;
}

figure.effect-hera h2,
figure.effect-hera p {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera figcaption::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	border: 2px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera p {
	width: 100px;
	text-transform: none;
	font-size: 121%;
	line-height: 2;
}

figure.effect-hera p a {
	color: #fff;
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
	opacity: 0.6;
}

figure.effect-hera p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i {
	-webkit-transform: translate3d(-60px,60px,0);
	transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i {
	-webkit-transform: translate3d(60px,60px,0);
	transform: translate3d(60px,60px,0);
}

figure.effect-hera:hover figcaption::before {
	opacity: 1;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

figure.effect-hera:hover h2 {
	opacity: 0;
	-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
	transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

figure.effect-hera:hover p i:empty {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
	opacity: 1;
}

/*-----------------*/
/***** Winston *****/
/*-----------------*/

figure.effect-winston {
	background: #162633;
	text-align: left;
}

figure.effect-winston img {
	-webkit-transition: opacity 0.45s;
	transition: opacity 0.45s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-winston figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/triangle.svg) no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transform: rotate3d(0,0,1,45deg);
	transform: rotate3d(0,0,1,45deg);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

figure.effect-winston h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-winston p {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 1.5em 7% 0;
}

figure.effect-winston a {
	margin: 0 10px;
	color: #5d504f;
	font-size: 170%;
}

figure.effect-winston a:hover,
figure.effect-winston a:focus {
	color: #cc6055;
}

figure.effect-winston p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-winston:hover img {
	opacity: 0.6;
}

figure.effect-winston:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-winston:hover figcaption::before {
	opacity: 0.7;
	-webkit-transform: rotate3d(0,0,1,20deg);
	transform: rotate3d(0,0,1,20deg);
}

figure.effect-winston:hover p i {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-winston:hover p a:nth-child(3) i {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-winston:hover p a:nth-child(2) i {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-winston:hover p a:first-child i {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

/*-----------------*/
/***** Selena *****/
/*-----------------*/

figure.effect-selena {
	background: #fff;
}

figure.effect-selena img {
	opacity: 0.95;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-selena:hover img {
	-webkit-transform: scale3d(0.95,0.95,1);
	transform: scale3d(0.95,0.95,1);
}

figure.effect-selena h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-selena p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
	transform: perspective(1000px) rotate3d(1,0,0,90deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

figure.effect-selena:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-selena:hover p {
	opacity: 1;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
	transform: perspective(1000px) rotate3d(1,0,0,0);
}

/*-----------------*/
/***** Terry *****/
/*-----------------*/

figure.effect-terry {
	background: #34495e;
}

figure.effect-terry figcaption {
	padding: 1em;
}

figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after {
	position: absolute;
	width: 200%;
	height: 200%;
	border-style: solid;
	border-color: #101010;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-terry figcaption::before {
	right: 0;
	bottom: 0;
	border-width: 0 70px 60px 0;
	-webkit-transform: translate3d(70px,60px,0);
	transform: translate3d(70px,60px,0);
}

figure.effect-terry figcaption::after {
	top: 0;
	left: 0;
	border-width: 15px 0 0 15px;
	-webkit-transform: translate3d(-15px,-15px,0);
	transform: translate3d(-15px,-15px,0);
}

figure.effect-terry img,
figure.effect-terry p a {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-terry img {
	opacity: 0.85;
}

figure.effect-terry h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0.4em 10px;
	width: 50%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

@media screen and (max-width: 920px) {
	figure.effect-terry h2 {
		padding: 0.75em 10px;
		font-size: 120%;
	}
}

figure.effect-terry p {
	float: right;
	clear: both;
	text-align: left;
	text-transform: none;
	font-size: 111%;
}

figure.effect-terry p a {
	display: block;
	margin-bottom: 1em;
	color: #fff;
	opacity: 0;
	-webkit-transform: translate3d(90px,0,0);
	transform: translate3d(90px,0,0);
}

figure.effect-terry p a:hover,
figure.effect-terry p a:focus {
	color: #f3cf3f;
}

figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-terry:hover img {
	opacity: 0.6;

}

figure.effect-terry:hover h2,
figure.effect-terry:hover p a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-terry:hover p a {
	opacity: 1;
}

figure.effect-terry:hover p a:first-child {
	-webkit-transition-delay: 0.025s;
	transition-delay: 0.025s;
}

figure.effect-terry:hover p a:nth-child(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-terry:hover p a:nth-child(3) {
	-webkit-transition-delay: 0.075s;
	transition-delay: 0.075s;
}

figure.effect-terry:hover p a:nth-child(4) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

/*-----------------*/
/***** Phoebe *****/
/*-----------------*/

figure.effect-phoebe {
	background: #675983;
}

figure.effect-phoebe img {
	opacity: 0.85;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-phoebe:hover img {
	opacity: 0.6;
}

figure.effect-phoebe figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/triangle2.svg) no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(5,2.5,1);
	transform: scale3d(5,2.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-phoebe:hover figcaption::before {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-phoebe h2 {
	margin-top: 1em;
	-webkit-transition: transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-phoebe:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-phoebe p a {
	color: #fff;
	font-size: 140%;
	opacity: 0;
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-phoebe p a:first-child {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.effect-phoebe p a:nth-child(2) {
	-webkit-transform: translate3d(0,60px,0);
	transform: translate3d(0,60px,0);
}

figure.effect-phoebe p a:nth-child(3) {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

figure.effect-phoebe:hover p a {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
	background: #3498db;
}

figure.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 3em;
	padding: 0 1em;
	max-width: 150px;
	border-right: 4px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-apollo h2 {
	text-align: left;
}

figure.effect-apollo:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

/*-----------------*/
/***** Kira *****/
/*-----------------*/

figure.effect-kira {
	background: #fff;
	text-align: left;
}

figure.effect-kira img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-kira figcaption {
	z-index: 1;
}

figure.effect-kira p {
	padding: 2.25em 0.5em;
	font-weight: 600;	
	font-size: 100%;
	line-height: 1.5;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-kira p a {
	margin: 0 0.5em;
	color: #101010;
}

figure.effect-kira p a:hover,
figure.effect-kira p a:focus {
	opacity: 0.6;
}

figure.effect-kira figcaption::before {
	position: absolute;
	top: 0;
	right: 2em;
	left: 2em;
	z-index: -1;
	height: 3.5em;
	background: #fff;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
	transform: translate3d(0,4em,0) scale3d(1,0.023,1);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

figure.effect-kira:hover img {
	opacity: 0.5;
}

figure.effect-kira:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-kira:hover figcaption::before {
	opacity: 0.7;
	-webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
	transform: translate3d(0,5em,0) scale3d(1,1,1);
}

/*-----------------*/
/***** Steve *****/
/*-----------------*/

figure.effect-steve {
	z-index: auto;
	overflow: visible;
	background: #000;
}

figure.effect-steve:before,
figure.effect-steve h2:before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #000;
	content: '';
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-steve:before {
	box-shadow: 0 3px 30px rgba(0,0,0,0.8);
	opacity: 0;
}

figure.effect-steve figcaption {
	z-index: 1;
}

figure.effect-steve img {
	opacity: 1;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: perspective(1000px) translate3d(0,0,0);
	transform: perspective(1000px) translate3d(0,0,0);
}

figure.effect-steve h2,
figure.effect-steve p {
	background: #fff;
	color: #2d434e;
}

figure.effect-steve h2 {
	position: relative;
	margin-top: 2em;
	padding: 0.25em;
}

figure.effect-steve h2:before {
	box-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

figure.effect-steve p {
	margin-top: 1em;
	padding: 0.5em;
	font-weight: 800;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(0.9,0.9,1);
	transform: scale3d(0.9,0.9,1);
}

figure.effect-steve:hover:before {
	opacity: 1;
}

figure.effect-steve:hover img {
	-webkit-transform: perspective(1000px) translate3d(0,0,21px);
	transform: perspective(1000px) translate3d(0,0,21px);
}

figure.effect-steve:hover h2:before {
	opacity: 0;
}

figure.effect-steve:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

/*-----------------*/
/***** Moses *****/
/*-----------------*/

figure.effect-moses {
	background: -webkit-linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
	background: linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
}

figure.effect-moses img {
	opacity: 0.85;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-moses h2,
figure.effect-moses p {
	padding: 20px;
	width: 50%;
	height: 50%;
	border: 2px solid #fff;
}

figure.effect-moses h2 {
	padding: 20px;
	width: 50%;
	height: 50%;
	text-align: left;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(10px,10px,0);
	transform: translate3d(10px,10px,0);
}

figure.effect-moses p {
	float: right;
	padding: 20px;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

figure.effect-moses:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-moses:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-moses:hover img {
	opacity: 0.6;
}

/*---------------*/
/***** Jazz *****/
/*---------------*/

figure.effect-jazz {
	background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
	background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
}

figure.effect-jazz img {
	opacity: 0.9;
}

figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-jazz figcaption::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-jazz h2,
figure.effect-jazz p {
	opacity: 1;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
}

figure.effect-jazz h2 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-jazz p {
	padding: 0.5em 2em;
	text-transform: none;
	font-size: 0.85em;
	opacity: 0;
}

figure.effect-jazz:hover img {
	opacity: 0.7;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-jazz:hover figcaption::after {
	opacity: 1;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

figure.effect-jazz:hover h2,
figure.effect-jazz:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

/*---------------*/
/***** Ming *****/
/*---------------*/

figure.effect-ming {
	background: #030c17;
}

figure.effect-ming img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-ming p {
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-ming:hover h2 {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
	opacity: 0.4;
}

/*---------------*/
/***** Lexi *****/
/*---------------*/

figure.effect-lexi {
	background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
	background: linear-gradient(-45deg, #000 0%,#fff 100%);
}

figure.effect-lexi img {
	margin: -10px 0 0 -10px;
	max-width: none;
	width: -webkit-calc(100% + 10px);
	width: calc(100% + 10px);
	opacity: 0.9;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(10px,10px,0);
	transform: translate3d(10px,10px,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-lexi figcaption::before,
figure.effect-lexi p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-lexi figcaption::before {
	position: absolute;
	right: -100px;
	bottom: -100px;
	width: 300px;
	height: 300px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transform: scale3d(0.5,0.5,1);
	transform: scale3d(0.5,0.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-lexi:hover img {
	opacity: 0.6;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lexi h2 {
	text-align: left;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(5px,5px,0);
	transform: translate3d(5px,5px,0);
}

figure.effect-lexi p {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 1.5em 1.5em 0;
	width: 140px;
	text-align: right;
	opacity: 0;
	-webkit-transform: translate3d(20px,20px,0);
	transform: translate3d(20px,20px,0);
}

figure.effect-lexi:hover figcaption::before {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-lexi:hover h2,
figure.effect-lexi:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Duke *****/
/*---------------*/

figure.effect-duke {
	background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
	background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
	opacity: 0.1;
	-webkit-transform: scale3d(2,2,1);
	transform: scale3d(2,2,1);
}

figure.effect-duke h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

figure.effect-duke p {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 20px;
	padding: 30px;
	border: 2px solid #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% -100%;
	transform-origin: 50% -100%;
}

figure.effect-duke:hover h2,
figure.effect-duke:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

/* Media queries */
@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}
.apollo{
  max-width: none !important;
  width: 33em;
}
@media (max-width: 767px) {
  .fullscreen-bg {
    background: url("../img/header-bg.jpg") center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
  /* figure.effect-julia img {
    height: 100%;
  } */
  .apollo{
    max-width: 100%;
    width: unset;
  }
}

.logo-diamond {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #cba536;
    transform: rotate(45deg)  !important
}
.logo-diamond-blank {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #cba536;
    transform: rotate(45deg)  !important
}
.logo-diamond-content{
	transform: rotate(-45deg)  !important;
	background-image: url("../img/بن-سعيدان-683x1024.jpeg");
}
.sub-page{
	padding-top: 15em;
}
.quote-img{
    width: 34em;
    height: auto;
}
.quote-contaner{
	margin-top: 30%;
	display: inline-block;
    border: 7px solid #cba536;
    border-radius: 4px;
}
.content-banner{
	background-color: #6e7072;
	border-radius: 10px;
	max-height: 350px;
}
.content-title{
	width: 18em;
	position: absolute;
    bottom: 0px;
    margin-left: -6em;
}
body.ar .content-title{
	margin-right: -7em;
}
.logo-diamond:before {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	top: -45%;
	left: 15%;
	z-index: -1;
	background: url("../img/بن-سعيدان.jpeg") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-Mission-vision {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: transparent;
    transform: rotate(45deg)  !important
}
.logo-diamond-Mission-vision:before {
	content: "";
	position: absolute;
	width: 260%;
    height: 260%;
    top: -75%;
    left: 8%;
	z-index: -1;
	background: url("../img/MissionVision.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-Mission-vision-ar {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: transparent;
    transform: rotate(45deg)  !important
}
.logo-diamond-Mission-vision-ar:before {
	content: "";
	position: absolute;
	width: 260%;
    height: 260%;
    top: -75%;
    left: 8%;
	z-index: -1;
	background: url("../img/logos/MissionVision.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-aljazira-fund {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #535355;
    transform: rotate(45deg)  !important
}
.logo-diamond-aljazira-fund:before {
	content: "";
	position: absolute;
	width: 200%;
    height: 100%;
    top: -24%;
    left: -11%;
	z-index: -1;
	background: url("../img/logos/aljazira-fund-bin-saedan_logo1f60.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-jasmine-fund {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #535355;
    transform: rotate(45deg)  !important
}
.logo-diamond-jasmine-fund:before {
	content: "";
	position: absolute;
	width: 130%;
    height: 100%;
    top: -12%;
    left: 13%;
	z-index: -1;
	background: url("../img/logos/jasmine-villas-residential-fund_logo.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-alsuidaniah-fund {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #88888A;
    transform: rotate(45deg)  !important
}
.logo-diamond-alsuidaniah-fund:before {
	content: "";
	position: absolute;
	width: 130%;
    height: 100%;
    top: -12%;
    left: 13%;
	z-index: -1;
	background: url("../img/logos/al-suidaniah-land-development-fund_logo1f60.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-ksb-fund {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #88888A;
    transform: rotate(45deg)  !important
}
.logo-diamond-ksb-fund:before {
	content: "";
	position: absolute;
	width: 130%;
    height: 100%;
	top: -8%;
    left: 18%;
	z-index: -1;
	background: url("../img/logos/ksb-fund-al-rehab-villas_logo1f60.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-alfursan-fund {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #88888A;
    transform: rotate(45deg)  !important
}
.logo-diamond-alfursan-fund:before {
	content: "";
	position: absolute;
	width: 130%;
    height: 100%;
	top: 2%;
    left: 31%;
	z-index: -1;
	background: url("../img/logos/alfursan-logo.jpeg") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-alghroub-fund {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #88888A;
    transform: rotate(45deg)  !important
}
.logo-diamond-alghroub-fund:before {
	content: "";
	position: absolute;
	width: 130%;
    height: 100%;
	top: -10%;
    left: 11%;
	z-index: -1;
	background: url("../img/logos/alghroub-villas_logo1f60.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-rehab {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #88888A;
    transform: rotate(45deg)  !important
}
.logo-diamond-rehab:before {
	content: "";
	position: absolute;
	width: 130%;
    height: 100%;
	top: -1%;
    left: 19%;
	z-index: -1;
	background: url("../img/logos/luxury-villas-in-rehab-north-west-riyadh_logo1f60.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-loluat-alghroub {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #88888A;
    transform: rotate(45deg)  !important
}
.logo-diamond-loluat-alghroub:before {
	content: "";
	position: absolute;
	width: 130%;
    height: 100%;
	top: -1%;
    left: 19%;
	z-index: -1;
	background: url("../img/logos/loluat-alghroub-villas-west-riyadh_logo1f60.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-video {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #88888A;
    transform: rotate(45deg)  !important
}
.logo-diamond-video:before {
	content: "";
	position: absolute;
	width: 130%;
    height: 100%;
	top: -11%;
    left: 10%;
	z-index: -1;
	background: url("../img/83519.png") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.logo-diamond-news {
	width: 20em;
	height: 20em;
	position: relative;
	overflow: hidden;
    border-radius: 4%;
    background: #88888A;
    transform: rotate(45deg)  !important
}
.logo-diamond-news:before {
	content: "";
	position: absolute;
    width: 300%;
    height: 142%;
    top: -60%;
    left: -58%;
	z-index: -1;
	background: url("../img/istock-841344664_super.jpg") 0 0 no-repeat;
	-webkit-transform: rotate(-45deg);
    background-size: 56%;
    transform: rotate(-45deg);
}
.content-body{
	margin-top: 8em;
}
.article-img{
	width: 100%;
	margin-bottom: 20px;
}
@media (max-width: 1199px) {
	.quote-img{
		width: 29em;
		height: auto;
	}
}
@media (max-width: 991px) {
	.content-body{
		margin-top: 4em;
	}
	.content-title h3{
		font-size: 25px;
	}
	.content-title {
		margin-left: 27em;
		z-index: 2;
	}
	body.ar .content-title{
		margin-right: 27em;
	}
	.quote-contaner {
	 margin-top: unset;
	}
	.logo-diamond, .logo-diamond-Mission-vision, .logo-diamond-aljazira-fund,
	.logo-diamond-jasmine-fund, .logo-diamond-alsuidaniah-fund, .logo-diamond-ksb-fund,
	.logo-diamond-alfursan-fund, .logo-diamond-alghroub-fund, .logo-diamond-rehab, .logo-diamond-loluat-alghroub, .logo-diamond-Mission-vision-ar, .logo-diamond-blank, .logo-diamond-video, .logo-diamond-news{
		z-index: 1;
	}
	.article-img{
		width: 50%;
	}
}
.vision{
	background-image: url('../img/SABS-Group\ -\ illustration-05.png');
	background-repeat: no-repeat;
	background-position-y: bottom;
    background-size: 100% 35%;

}
.content-title.long-title{
	width: 20em;
}
@media (max-width: 767px) {
	.content-title h3{
		font-size: 12px;
	}
	.content-title {
		margin-left: 55%;
		width: 10em;
	}
	body.ar .content-title{
		margin-right: 55%;
	}
	.content-title.long-title {
		width: 10em;
	}
	.quote-contaner {
	 margin-top: unset;
	}
	.logo-diamond, .logo-diamond-Mission-vision, .logo-diamond-aljazira-fund,
	 .logo-diamond-jasmine-fund, .logo-diamond-alsuidaniah-fund, .logo-diamond-ksb-fund,
	 .logo-diamond-alfursan-fund, .logo-diamond-alghroub-fund, .logo-diamond-rehab, .logo-diamond-loluat-alghroub, .logo-diamond-Mission-vision-ar, .logo-diamond-blank, .logo-diamond-video, .logo-diamond-news{
		width: 10em;
    	height: 10em;
	}
	.quote-img {
		width: 100%;
		height: auto;
	}
	.vision {
		background-size: 316% 27%;
	}
}
@media (max-width: 320px) {
	.content-title h3{
		font-size: 11px;
	}
	.quote-img {
		width: 19em;
	}
}
/* .background-img{
	background-image: url('../img/BG.jpg')
} */
.dropdown-menu {
	display: none;
}
.dropdown:hover .row .dropdown-content ul.dropdown-menu{
	display: block !important;
	background: #8b846c;
}
.dropdown:hover .row .dropdown-content ul.dropdown-menu .nav-item{
	color: #fff;
}
.hexagon {
    position: relative;
    width: 299px;
    height: 234.21px;
    background-color: #64C7CC;
	margin: 19.60px 0;
	margin-top: 34px;
    border-radius: 57px;
    /* border-left: solid 5px #333333; */
    /* border-right: solid 5px #333333; */
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 212.13px;
    height: 212.13px;
    border-radius: 48px;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 43.934px;
    /* top: 82px; */
}
.hexagon:after {
    bottom: -82.066px;
    /* border-bottom: solid 7.0711px #333333; */
    /* border-left: solid 7.0711px #333333; */
}
.hexagon:before {
    top: -83.066px;
    /* border-top: solid 7.0711px #333333; */
    /* border-right: solid 7.0711px #333333; */
}

h4{
	color: #dbc181
}
.iti { width: 100%; }
#phone{
	padding-left: 45px !important;
}
.article{
	margin-top: 30px
}
.carousel-caption{
	color: #030c17;
}
.close-button{
	color: #cba536;
    border-color: #cba536;
}
.close-button:hover{
	color: #fff;
    background-color: #cba536;
    border-color: #cba536;
}
.map{
	width: 100%;
    height: 20em;
}
/* #photos {
	 Prevent vertical gaps
	 line-height: 0;
		
	-webkit-column-count: 3;
	-webkit-column-gap:   0px;
	-moz-column-count:    3;
	-moz-column-gap:      0px;
	column-count:         3;
	column-gap:           0px;   
} */

#photos img {
	/* Just in case there are inline attributes */
	width: 100% !important;
	height: auto !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	padding-bottom: 18px;
}
@media (max-width: 1200px) {
	#photos {
		-moz-column-count:    3;
		-webkit-column-count: 3;
		column-count:         3;
	}
}
@media (max-width: 1000px) {
	#photos {
		-moz-column-count:    2;
		-webkit-column-count: 2;
		column-count:         2;
	}
}
@media (max-width: 800px) {
	#photos {
		-moz-column-count:    1;
		-webkit-column-count: 1;
		column-count:         1;
	}
}
@media (max-width: 400px) {
	#photos {
		-moz-column-count:    1;
		-webkit-column-count: 1;
		column-count:         1;
	}
}
.slide-header {
    text-align: center;
    margin-top: 17px;
}
#photos img:hover{
	transform: scale(0.97);
   -webkit-transform: scale(0.97);
   -moz-transform: scale(0.97);
   -o-transform: scale(0.97);
	opacity: 0.75;
   -webkit-opacity: 0.75;
   -moz-opacity: 0.75;
	transition: .3s;
   -webkit-transition: .3s;
   -moz-transition: .3s;
}
.intro-title{
	background-color: #e0d8b5;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}
#photos.single {
	-moz-column-count:    1;
	-webkit-column-count: 1;
	column-count:         1;
}
.ar{
	direction: rtl;
	text-align: right;
}
body.ar .dropdown-content .nav-link{
	text-align: right;
}
body.ar .dropdown-content ul{
	right: 0;
}
body.ar .nav-item:hover:after {
    width: 0;
    right: 0;
}
#button {
	display: inline-block;
	background-color: #c9a62f;
	width: 50px;
	height: 50px;
	text-align: center;
	/* border-radius: 4px; */
	position: fixed;
	bottom: 30px;
	right: 30px;
	transition: background-color .3s, 
	  opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
}
#button::after {
	content: "\f077";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-size: 2em;
	line-height: 50px;
	color: #fff;
}
#button:hover {
	cursor: pointer;
	background-color: #333;
}
#button:active {
	background-color: #555;
}
#button.show {
	opacity: 1;
	visibility: visible;
}
.dropdown-menu .nav-link{
	font-size: 69% !important;
}
body.ar .custom-file-label {
	padding-right: 56px;
}
body.ar .custom-file-label:after {
	content: "إختر" !important;
}
.radio-content button{
	background-color: transparent;
    border: none;
    color: wheat;
}
@media (max-width: 554px){
	.effect-julia img, .effect-apollo img{
		width: 96vw;
	}
}
header.masthead .container{
	height: 96vh;
}
.lang-hire{
	position: absolute;
	left: 15%;
	top: 20%;
}
.lang-hire a{
	color: #212121;
}
.lang-hire a:hover{
	text-decoration: none;
	color: #737272;
}
div.vertical-line{
	width: 1px; /* Line width */
	background-color: black; /* Line color */
	height: 25px;
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block; /* Override in-line if you want specific height. */
	 /* Causes the line to float to left of content. 
	  You can instead use position:absolute or display:inline-block
	  if this fits better with your design */
}
.top-nav-links{
	display: inline-block;
	vertical-align: top;
}
.soical-media{
	display: inline-block;
	vertical-align: super;
	
}
.dd {
	width: calc(100% / 3);  
    display: inline-block;
    vertical-align: top;   
    text-align:center;
    margin:2%;    
    padding:20px;
}
.subnav{
	position: absolute;
    left: 0;
    right: 0;
	height: 50px;
	background-color:#8b846c;
	margin-top: 35px;
	z-index: 1;
}
.subnav:hover{
	margin-top: 80px;
}

ul.horizontal-list {
	min-width: 696px;
	list-style: none;
	padding-top: 12px;
	text-align: center;
}
ul.horizontal-list li {
	display: inline;
	padding-left: 10px;
	padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
}
ul.horizontal-list li:hover{
	background-color: #78715c;
}
ul.horizontal-list li a {
	color: #fff;
}
ul.horizontal-list li:hover a {
	text-decoration: none;
}
.navbar{
	position: absolute;
	top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
.nav-item a{
	width: 122px;
}
.header-image{
	width: 60%;
    left: 0;
    top: 123px;
    bottom: 0;
    position: absolute;
}
.header-image img{
	width: 100%;
    height: 100%;
}
.header-text{
	background-color: #222222;
	width: 40%;
    right: 0;
    top: 123px;
    bottom: 0;
    position: absolute;
}
.header-text .contect{
	/* flex-shrink: 0; */
    /* height: 100%; */
	/* margin-top: 45%; */
	direction: rtl;
    text-align: right;
	/* padding: 40px; */
	/* scroll-snap-align: start; */
}
.header-text .contect h1{
	color: #c9bbaa;
}
.header-text .contect p{
	color: #98877a;
	font-size: small;
	width: 460px;
}
.header-text .contect button{
	background-color: transparent;
	border: none;
	font-size: larger;
	color: #aba9a7;
}
.header-text .contect button:hover{
	color: #c9bbaa;
}
.slider{
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory; 
}
.header-controller{
	left: 20px;
	position: absolute;
}
.slider::-webkit-scrollbar {
	display: none;
}
.salman-saedan-qoute {
	margin-right: 18%;
    width: 300px;
}
.salman-saedan-qoute h3{
	color: #736e65;
	position: relative;
	z-index: 2;
	padding-bottom: 15px;
	padding-top: 30px;
    padding-right: 30px;
}
.salman-saedan-qoute p{
	color: #7a766b;
	font-size: larger;
	position: relative;
	z-index: 2;
	padding-right: 30px;
}
.salman-saedan-qoute button{
	color: #a49562;
	background-color: transparent;
	border: none;
	font-size: larger;
	position: relative;
	z-index: 2;
	padding-right: 30px;
}
.salman-saedan-qoute button:hover{
	color: #c9bbaa;
}
.salman-saedan-qoute img{
	position: absolute;
	z-index: 1;
}

/* for radio button */
#about ul{
	list-style-type: none;
	/* width: 220px;
	margin: auto; */
}

#about li {
	position: relative;
	padding: 10px;
	padding-left: 40px;
	height:30px;
	box-sizing: unset;
}

label:before {
    content: "";
    width: 15px;
    height: 15px;
    background: #fff;
    position: absolute;
    left: 7px;
		top: calc(50% - 13px);
    box-sizing: border-box;
    border-radius: 50%;
}

input[type="radio"] {
	opacity: 0;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	z-index: 100;
	margin: 0;
	padding: 0;
  width: 25px;
	height: 30px;
	position: absolute;
	left: 0;
	top: calc(50% - 15px);
	cursor: pointer;
	box-sizing: unset;
}

.bullet {
    position: relative;
    width: 25px;
    height: 25px;
    left: -3px;
    top: 2px;
    border: 5px solid #fff;
    opacity: 0;
    border-radius: 50%;
}

input[type="radio"]:checked ~ .bullet {
	position:absolute;
	opacity: 1;
	animation-name: explode;
	animation-duration: 0.350s;
	box-sizing: unset;
}

.line {
	position: absolute;
	width: 10px;
	height: 2px;
	background-color: #fff;
	opacity:0;
}

.line.zero {
	left: 11px;
	top: -21px;
	transform: translateY(20px);
	width: 2px;
	height: 10px;
}

.line.one {
	right: -7px;
	top: -11px;
	transform: rotate(-55deg) translate(-9px);
}

.line.two {
	right: -20px;
	top: 11px;
	transform: translate(-9px);
}

.line.three {
	right: -8px;
	top: 35px;
	transform: rotate(55deg) translate(-9px);
}

.line.four {
	left: -8px;
	top: -11px;
	transform: rotate(55deg) translate(9px);
}

.line.five {
	left: -20px;
	top: 11px;
	transform: translate(9px);
}

.line.six {
	left: -8px;
	top: 35px;
	transform: rotate(-55deg) translate(9px);
}

.line.seven {
	left: 11px;
	bottom: -21px;
	transform: translateY(-20px);
	width: 2px;
	height: 10px;
}

input[type="radio"]:checked ~ .bullet .line.zero{
	animation-name:drop-zero;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.one{
	animation-name:drop-one;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.two{
	animation-name:drop-two;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.three{
	animation-name:drop-three;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.four{
	animation-name:drop-four;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.five{
	animation-name:drop-five;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.six{
	animation-name:drop-six;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.seven{
	animation-name:drop-seven;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

@keyframes explode {
	0%{
		opacity: 0;
		transform: scale(10);
	}
	60%{
		opacity: 1;
		transform: scale(0.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes drop-zero {
	0% {
		opacity: 0;
		transform: translateY(20px);
		height: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: translateY(-2px);
		height: 0px;
		opacity:0;
	}
}

@keyframes drop-one {
	0% {
		opacity: 0;
		transform: rotate(-55deg) translate(-20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: rotate(-55deg) translate(9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-two {
	0% {
		opacity: 0;
		transform: translate(-20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: translate(9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-three {
	0% {
		opacity: 0;
		transform: rotate(55deg) translate(-20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: rotate(55deg) translate(9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-four {
	0% {
		opacity: 0;
		transform: rotate(55deg) translate(20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: rotate(55deg) translate(-9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-five {
	0% {
		opacity: 0;
		transform: translate(20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: translate(-9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-six {
	0% {
		opacity: 0;
		transform: rotate(-55deg) translate(20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: rotate(-55deg) translate(-9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-seven {
0% {
		opacity: 0;
		transform: translateY(-20px);
		height: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: translateY(2px);
		height: 0px;
		opacity:0;
	}
}
.continput{
	position: absolute;
    top: 30%;
}
.radio-content{
	position: absolute;
    top: 30%;
    right: 10%;
}
.radio-content .contect{
	color: #dfdad0;
	width: 20em;
}
#our-stages{
	height: 100vh;
	background-color: #181818;
}
.circle {
	border-radius: 50%;
	background-color: whitesmoke;
	width: 150px;
	height: 150px;
	position: absolute;
	opacity: 0;
	animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}
@keyframes scaleIn {
  from {
    transform: scale(.2, .2);
    opacity: .5;
  }
  to {
    transform: scale(.5, .5);
    opacity: 0;
  }
}
.vl {
	border-left: 2px solid gray;
	height: 330px;
	position: absolute;
	left: 54%;
	margin-left: -3px;
	top: 96px;
}
.stage-content{
	width: 100%;
    height: 523px;
    position: relative;
}
.stage-content h3{
	position: absolute;
    bottom: 58px;
    right: 32%;
    color: #615949;
}
.stage-content p{
	position: absolute;
    bottom: 0;
    color: #fff;
}
#projects-section{
	height: 100vh;
	background-color: #181818;
}
.multiple-items img{
	width: 100%; 
	height: 311px;
}
.image-name{
	min-height: 50px;
	background-color: #605848;
}
.slick-slide{
	margin-right: 10px;
	margin-left: 10px;
}
.awards-link{
	background-color: #605848;
    width: 100%;
    height: 326px;
	position: relative;
	
}
.awards-link img{
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	opacity: 0.25;
}
.awards-link img:hover{
	opacity: 1;
}
.awards-link h3{
	top: 50%;
	right: 30%;
	color: honeydew;
	position: absolute;
}
.awards-link button{
	position: absolute;
    bottom: 10px;
	left: 10px;
	background-color: transparent;
	border: none;
}
#more-section{
	background-color: #181818;
}
#vidoe-section{
	background-color: #181818;
}
#more-section .col-lg-6{
	padding-right: 5px;
    padding-left: 5px;
}
#numbers-section{
	background-color: #1c1c1c;
	color: white;
}
#numbers-section p{
	color: #9b9590;
	width: 165px;
}
#numbers-section .col-lg-3{
	padding-right: 5em;
}
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
#map-section{
	padding: 0;
}
#contact p{
	color: #736d63;
}
#contact span.contact-info{
	color: #fff;
}
#contact button{
	border: none;
    background-color: transparent;
    color: white;
    font-size: x-large;
    padding-top: 35%;
}
#contact input, #contact textarea{
	border: none;
	border-radius: unset;
	background-color: #2f2f2f;
	color: white;
}
.header-text .container .row{
	margin-top: 45%;
}
#soon-contact p{
	position: absolute;
    top: 43%;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 748px;
    font-size: xx-large;
    color: black;
    font-weight: 700;
}
#soon-contact p.en{
	width: 914px;
}
#soon-contact button{
	position: absolute;
    bottom: 24%;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #75736e;
    border: none;
    color: white;
    width: 130px;
    height: 44px;
}
.third-section-image{
	width: 50vw;
	position: absolute;
	left: 0;
}
.third-section-image img{
	width: 60vw;
	position: absolute;
	left: 0;
}
.third-section-content{
	width: 48vw;
}
.header-image-sub img{
	width: 100%;
}
.header-image-sub{
	left: 0;
    bottom: 0;
	position: relative;
}
.page-title{
	margin-top: 5%;
}
header.masthead-sub {
    text-align: center;
    color: white;
    background-attachment: scroll;
    background-position: center center;
	background-size: cover;
	padding-top: 123px;
	height: 40vh;
	background-image: url("../img/subpage-cover.jpg");
}
.en .header-text{
	left: 0;
	right: unset;
}
.en .header-image{
	left: unset;
	right: 0;
}
h1.en{
	margin-left: 24px;
}
.en .navbar-nav{
	margin-left: 119px !important;
	text-align: left;
}
.en .third-section-image {
	left: unset;
	right: 0;
}
.en .continput {
    left: 20px;
}
.radio-content.en {
	right: unset;
    left: 10%;
}
.development h2{
	color: #59564a;
	padding-top: 15px;
}
.development ul{
	color: #a09a87;
	text-align: initial;
	margin-right: 25%;
}
#longtext{
	right: 14%;
}
.en .awards-link h3 {
    right: 20%;
}
#short-text{
	right: 30%;
}
@media (max-width: 992px) {
	#longtext{
		right: unset;
	}
	.en .navbar-nav {
		margin-left: 16px !important;
		text-align: left;
		/* font-size: small; */
	}
	h1.en{
		margin-left: unset;
	}
	header.masthead {
		margin-top: 123px;
		height: 80vh;
	}
	.projects{
		margin-top: -370px;
	}
	.about-group{
		margin-top: -214px;
	}
	ul.horizontal-list {
		min-width: unset;
		padding-right: 0;
    	padding-top: 0;
	}
	ul.horizontal-list li {
		display: block;
		padding-bottom: 15px;
	}
	.subnav {
		height: auto;
	}
	.salman-saedan-qoute img{
		width: 50%;
	}
	.header-image{
		width: 100%;
		bottom: 20%;
		top: 0;
		height: 40vh;
		position: relative;
	}
	.header-text{
		width: 100%;
		top: 0;
		position: relative;
		height: 40vh;
		/* padding-bottom: 40px; */
	}
	.header-text .contect{
		margin-top: 20px;
		/* padding: 0 14em; */
	}
	#services{
		height: 60vh;
		background-size: auto 100%;
		background-position: center;
	}
	.header-text .contect p{
		width: auto;
	}
	.header-text .container .row{
		margin-top: 0;
	}
	#our-stages{
		height: auto;
	}
	.stage-content {
		width: 100%;
		height: 260px;
		position: relative;
		text-align: center;
	}
	.circle{
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.vl {
		border-left: 2px solid gray;
		height: 57px;
		position: absolute;
		/* right: 45%; */
		margin-left: -3px;
		top: 92px;	
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		width: 2px;
	}
	.nav-item {
		width: 31%;
		margin-right: 0%;
		float: right;
	}
	.navbar-nav {
		display: block;
	}
	.stage-content h3 {
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		width: 15px;
	}
	.stage-content p {
		left: 0;
		right: 30px;
		margin-left: auto;
		margin-right: auto;
		width: 157px;
	}
	.circles{
		position: relative;
		right: 4%;
	}
	#more-section .col-lg-6:nth-child(odd){
		margin-bottom: 10px;
	}
	#numbers-section .col-lg-3{
		margin-right: 15%;
	}
	#projects-section{
		height: auto;
	}
	#soon-contact img:nth-child(odd){
		height: 50vh;
	}
	#soon-contact p{
		top: 30%;
		font-size: x-large;
		text-align: center;
		width: auto;
		right: 0;
	}
	#soon-contact p.en{
		width: auto;
	}
	/* #soon-contact button{
		right: 35%;
	} */
	.third-section-image{
		width: 100%;
		bottom: 0;
	}
	.third-section-image img {
		width: 100%;
		position: relative;
	}
	.third-section-content{
		width: 100%;
		position: relative;
		margin-bottom: 40vh;
		margin-top: 10px;
		min-height: 220px;
		/* height: 40%; */
	}
	.continput {
		position: relative;
		top: 30%;
		float: right;
	}
	.continput ul{
		margin-top: 1em;
	}
	#about li{
		padding-left: 0;
	}
	.radio-content {
		/* right: 25%;
		top:0; */
		position: inherit;
		width: 70%;
		
	}
	.image-name h3{
		font-size: inherit;
	}
	header.masthead .container {
		height: auto;
	}
	section#about{
		height: auto;
	}
	.header-image-sub img {
		width: 100%;
		height: 20vh;
	}
	.salman-saedan-qoute {
		margin-right: 4%;
		margin-top: 47px;
	}
	.salman-saedan-qoute button {
		color: #fffaea;
	}
	.awards-link h3 {
		padding-top: 36%;
		position: inherit;
		top: unset;
		right: unset;
	}
	.subpage-row .col-lg-4{
		padding-top: 10px;
	}
	.en .continput{
		float: left;
	}
	.en ul.horizontal-list {
		padding-left: 0;
	}
	.en .stage-content p {
		bottom: -26px !important;
		width: 242px;
		position: unset;
	}
	.en .circles {
		right: unset;
	}
	.en .stage-content h3 {
		width: 68px;
		padding-top: 156px;
		position: unset;
	}
	.salman-saedan-qoute p.en {
		margin-right: 4%;
		font-size: 13px;
	}
	.salman-saedan-qoute button.en {
		color: #fffaea;
		padding-right: 102px;
	}
	.development ul{
		margin-right: 30%;
	}
	.en .awards-link h3 {
		right: unset;
	}
	#short-text {
		right: unset;
	}
}
#soon-contact img{
	width: 100%;
}
#soon-contact{
	padding: 0;
}
#country-listbox{
	direction: ltr;
}
.number{
	font-size: 43px;
    color: #8b846c;
}
a:hover {
    color: #c9a62f;
}

#agreemnt-logos img {
    width: 100% !important;
    height: auto !important;
    /* cursor: pointer; */
    /* -webkit-tap-highlight-color: transparent; */
    /* transition: .3s; */
    /* -webkit-transition: .3s; */
    -moz-transition: .3s;
    padding-bottom: 18px;
}
#agreemnt-logos img:hover {
    /* transform: scale(0.97); */
    /* -webkit-transform: scale(0.97); */
    -moz-transform: scale(0.97);
    -o-transform: scale(0.97);
    opacity: 0.75;
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}
.en {
	direction: ltr;
    text-align: left;
}
.en .lang-hire{
	right: 15%;
	left: unset;
}
.subpage-row:nth-child(odd){
	direction: ltr;
}
.en .subpage-row:nth-child(odd){
	direction: rtl;
}
.subpage-row{
	margin-bottom: 100px;
}
.subpage-row:nth-last-child(1){
	margin-bottom: 0px;
}
.subpage-row img{
	width: 100%;
}
.top-margin{
	margin-top: 5%;
}
.hide-image{
	display: none;
}
.info h1{
	color: #8b846c;
	font-size: 80px;
}
.info p{
	font-size: larger;
}
.info .col-lg-4{
	margin-bottom: 40px;
}
.info .col-lg-4:nth-last-child(1){
	margin-bottom: 100px;
}
.project-logos .col-lg-3{
	margin-bottom: 50px;
}
.project-logos img{
	width: 70%;
}
.ekko-lightbox-nav-overlay a:nth-last-child(1) span{
	text-align: end;
}
#agreemnt-logos.awards-imags img{
	padding-bottom: 0;
	max-height: 247px;
}
#agreemnt-logos.awards-imags .image-name{
	margin-bottom: 15px;
	text-align: center;
}
.en .circle{
	right: 0;
}
body, .row:focus, a:focus, .slick-slide:focus{
	outline: none !important;
}
.cadres h1{
	color: #59564a;
	margin-top: 30px;
}
.cadres .row{
	margin-bottom: 50px;
}
.cadres .row:last-child{
	margin-bottom: 0;
}
.cadres h3{
	color: #a09a87;
}
.en .development ul {
	margin-left: 25%;
	margin-right: unset;
}