/*-----------------------------------------1) 
General--------------------------------------------------*/


*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body,
html {
  left: 0; top: 0; margin: 0px; padding: 0px; overflow-x: hidden; font-family: 'Outfit', sans-serif; height: 100%; width: 100%;
}
body {
  color: #0F1F35; font-size: 16px; line-height: 1.7; font-weight: 200; letter-spacing: 1.1px; background-color: #fff;
}
a {
  color: #E2C785; text-decoration: none; transition: ease .6s;
  -webkit-transition: ease .6s;
  -moz-transition: ease .6s;
  -o-transition: ease .6s;
  -ms-transition: ease .6s;
}
a:hover {
  text-decoration: none; color: #0F1F35;
}
a:focus {
  outline: none; color: #E2C785; text-decoration: none;
}

.icons {
	width: 50%; text-align: center;
}

iframe {
  border: none; width: 100%;
}
img { max-width: 100%; }

*:focus {
  outline: none;
}

.container {
    width: 90%;
}




/*----------------------------------------- 2) Preloader --------------------------------------------------*/
#preloader {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 999999;
}

#status {
  width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url(../images/loader.gif); background-repeat: no-repeat; background-position: center center; text-align: center; margin: -40px 0 0 -100px;
}
#status img {
  text-align: center; margin-top: -80px;
}



/*----------------------------------------- 3) Helper --------------------------------------------------*/
.no-pad { padding: 0 !important; margin: 0 !important;}
.pad-80 { padding-top: 80px;}
.mar-t-50{ margin-top: 50px !important;}
.mar-tm-10{ margin-top: -10px;}

.white-col{
  background: #fff; padding: none;
}

/*---- span -----*/
.title-small span { position: relative;}
.title-small span:after {
  content: ""; position: absolute; bottom: -20px; height: 2px; background: #DEDEDE; width: 100px; left: 0;
}
.title-small-center span {position: relative;}
.title-small-center span:after {
  content: ""; display: block; margin: 0 auto; margin-top: 15px; height: 2px; background: #DEDEDE; width: 100px; left: 0;
}


/*----- background ------*/
.grey-bg {
  background: #f6f6f6; padding: 80px 0 50px; display: block;
}

.navy-bg {
  background: #0F1F35; display: block; color: #fff;
}


.white-bg {
  background: #fff; padding: 80px 0 50px; display: block;
}



.white-text {
	color: #fff
}

/*-------- content --------*/
.content-detail {
  font-weight: 300; margin-top: 70px; line-height: 30px; font-size: 14px; letter-spacing: 0.4px;
}
.content-details {
  font-weight: 300; margin-top: 40px; line-height: 30px; font-size: 14px;
}
.pad-bottom {
  padding-bottom: 80px;
}
.text-detail {
  margin-top: 30px; color: #0F1F35;
}

.text-inner {
	margin: 40px 0; text-align: center;
}

.listing-item{
  list-style: none; display: inline-block; width: 100%; padding: 0; margin: 0; text-align: center;
}

/*----------------------------------------- 4) Header --------------------------------------------------*/
.header {
  width: 100%;
  z-index: 9999;
}
@keyframes fadeInBackground {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.header-image  {
	  width: 100%; height: auto; min-height: 380px; background-position: center;
	  background-size: cover;   background-image: url("../images/MCD-MF_2026_M.png");
      animation: fadeInBackground 3s ease-in-out forwards;
}

.header-M-short  {
	  width: 100%; height: auto; min-height: 180px; background-position: center;
	  background-size: cover;   background-image: url("../images/MCD-MF_2026_M.png");
}

.header-Contact  {
	  width: 100%; height: auto; background-position: center;
	  background-size: cover;   background-image: url("../images/MCD-MF-ContactBanner.jpg");
}

.header-About  {
	  width: 100%; height: auto; min-height: 240px; background-position: center;
	  background-size: cover;   background-image: url("../images/MCD-MF-ZooBanner.jpg");
}

.header-Services  {
	  width: 100%; height: auto; background-position: top center;
	  background-size: cover;   background-image: url("../images/MCD-MF-TeamBanner.jpg");
}

.header-404  {
	  width: 100%; height: auto; background-position: center center; color: #fff;
	  background-size: cover;   background-image: url("../images/MCD-MF-404Banner.jpg");
}

.header-Services-copy  {margin-bottom: 5px}

.copy-404 {padding: 50px 0;}

.for-sticky {
  position: fixed; bottom: 0; width: 100%; height: 70px; opacity: 0.8; z-index: 1; top: 0; left: 0; border-bottom: 1px solid #0F1F35; display: block; padding: 5px 15px 5px 45px; background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.logo-nav {
  padding: 6px 0 10px 25px;  width: 150px; display: block;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.opacity-nav {
  opacity: 1; z-index: 2; background-color: rgba(255, 255, 255, 1);
}

/*----------- panel ----------*/
.content-wrap {
  -webkit-overflow-scrolling: touch;
  height: 100%; width: 100%;
}

.content {
    position: absolute; width: 100%; height: 100%; left: -1px; 
}

.content::before {
  position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); content: ''; opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
  transition: opacity 0.4s, transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

/* Menu Button */
.menu-button {
  width: 50px; height: 45px; position: fixed; right: 0; margin-top: 13px; margin-right: 35px; z-index: 1000; padding: 0; cursor: pointer; background: transparent; border: none; font-family: "Libre Bodoni", serif; font-weight: 300;
	
}

.menu-button span {
  display: block; position: absolute; height: 1px; width: 100%; background: #0F1F35; border-radius: 9px; opacity: 1; left: 0;
}

/* Hamburger */
.menu-button span:nth-child(1) {top: 0px;}

.menu-button span:nth-child(2) {top: 9px;}

.menu-button span:nth-child(3) {top: 18px;}

.menu-button:hover {opacity: 0.6;}


/* Close Button */
.close-button {
  width: 1em; height: 1em; position: absolute; right: 1em; top: 1em; overflow: hidden; text-indent: 1em; font-size: 0.75em; border: none; background: transparent; color: transparent;
}
.close-button::before, .close-button::after {
  content: ''; position: absolute; width: 3px; height: 100%; top: 0; left: 50%; background: #bdc3c7;
}
.close-button::before {
  -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.close-button::after {
  -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
  position: fixed; z-index: 1001; width: 320px; height: 100%; right: 0; float: right; background: #00382F; padding: 2.5em 1.5em 0;
  -webkit-transform: translate3d(320px, 0, 0);
  transform: translate3d(320px, 0, 0);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.menu, .menu-list {
  height: 100%;    overflow-x: auto;
}
.menu-list {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.menu-list a {
  display: block; padding: 2.5em 0;
  -webkit-transform: translate3d(0, 500px, 0);
  transform: translate3d(0, 500px, 0); color: #a5a5a5; position: relative;
}
.menu-list a:hover, .menu-list a:active span {color: #fff;}
.menu-list, .menu-list a {
  -webkit-transition: -webkit-transform 0s 0.4s;
  transition: transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.menu a:nth-child(2) {
  -webkit-transform: translate3d(0, 1000px, 0);
  transform: translate3d(0, 1000px, 0);
}
.menu-list a:nth-child(3) {
  -webkit-transform: translate3d(0, 1500px, 0);
  transform: translate3d(0, 1500px, 0);
}
.menu-list a:nth-child(4) {
  -webkit-transform: translate3d(0, 2000px, 0);
  transform: translate3d(0, 2000px, 0);
}
.menu-list a:nth-child(5) {
  -webkit-transform: translate3d(0, 2500px, 0);
  transform: translate3d(0, 2500px, 0);
}
.menu-list a:nth-child(6) {
  -webkit-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0);
}
.menu-list a span:nth-last-child(1){
  margin-bottom: 100px;
}
.menu-list a span {
  margin-left: 10px; font-weight: 400; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; z-index: 2; position: absolute; margin-bottom: 20px; padding: 10px ;
}
.menu-list a span:before{
  content: ''; display: block; width: 0; height: 2px; background: #fff;
  -webkit-transition: width .3s ease;
  transition: width .3s ease;
  position: absolute; top: 85%; left: 0;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  transform: translate(0,-50%);
  z-index: -1;
}
.menu-list a.active span{
  color: #fff !important;
}
.menu-list a.active span:before{
  width: 100%;
}

/* Shown menu */
.show-menu .menu-wrap {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .menu-list,
.show-menu .menu-list a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .menu-list a {
  -webkit-transition-duration: 0.9s;
  transition-duration: 0.9s;
}
.show-menu .content::before {
  opacity: 1;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*------BUTTON-----*/

.button {
  background-color: #fff; border: #0F1F35 solid 2px; color: #0F1F35; text-align: center; font-size: 14px; padding: 3px 8px; width: 100px; transition: all 0.5s; cursor: pointer; margin: 15px;
}

.button span {
  cursor: pointer; display: inline-block; position: relative; transition: 0.5s;
}

.button span:after {
  content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; color:#fff;
}

.button:hover span {
  padding-right: 20px; color:#fff;
	

}

.button:hover span:after {  
  opacity: 1; right: 0;	
	
}

.button:hover {background-color: #E2C785;border: #f6f6f6 solid 2px;}

.button-back { font-family: "Libre Bodoni", serif; outline: 0; grid-gap: 8px; align-items: center;  background-color: #fff; color: #00382F; border: 1px solid #00382F; border-radius: 4px; cursor: pointer; display: inline-flex; flex-shrink: 0; font-size: 16px; gap: 8px; justify-content: center; overflow: hidden; padding: 8px 16px 4px ; text-decoration: none; text-overflow: ellipsis; transition: all .14s ease-out; white-space: nowrap;}

.button-back:hover { box-shadow: 2px 2px 0 #E2C785; transform: translate(-2px,-2px);
                    }

.button-back:focus-visible{ outline-offset: 1px;
                    }

.button-back-darkbg { font-family: "Libre Bodoni", serif; font-size: 16px; outline: 0; grid-gap: 8px; align-items: center; background-color: #0F1F35; color: #fff; border: 1px solid #E2C785; border-radius: 4px;  cursor: pointer; display: inline-flex; flex-shrink: 0; padding: 8px 16px 4px ; gap: 8px; justify-content: center; overflow: hidden; text-decoration: none; text-overflow: ellipsis; transition: all .14s ease-out; white-space: nowrap;}

.button-back-darkbg:hover { box-shadow: 2px 2px 0 #E2C785; transform: translate(-2px,-2px);
                    }

.button-back-darkbg:focus-visible{ outline-offset: 1px;
                    }
                

/*----------------------------------------- 5) Typography --------------------------------------------------*/
h1, h2, h3, h4, h5 {
 font-family: 'Libre Bodoni', sans-serif; font-weight:400; margin-top: 0px; margin-bottom: 0px;
}

h1 {
	font-size: 5.25rem;  
}

h2 {
	font-size: 4rem;		
}

h3 {
	font-size: 2.2rem; 
}

h4 {
	font-size: 2.1rem;
}


/*align the heading and lines*/
.heading-line-right h2 {
	    display: flex; width: 100%; justify-content: center; align-items: baseline; text-align: center;
}
/*add and adjust the lines*/
.heading-line-right h2:after {
	content: ''; border-top: 2px solid; margin: 0 20px 0 0; flex: 1 0 20px; color: #666666;
}
/*add spacing between heading and line*/
.heading-line-right h2:after {
	margin: 0 0 0 20px;
}

p {
  letter-spacing: 0.2px; font-size: 16px; line-height: 30px; font-weight: 300;
}

.gold-copy {color: #E2C785;}

#home .typed {
  font-weight: 300; font-size: 16px; line-height: 26px; letter-spacing: 1.5px; margin: 0 auto; opacity: 0.6;
}

.separator {
  border-right: 1px solid #fff;  height: 400px;          
}

.year {
font-size: 26px; font-weight: 500; margin-bottom: 10px; font-family: 'Outfit', sans-serif;
}

.job {
  font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 0.4px; text-transform: uppercase; color: #cccccc;
}

.company {
  font-size: 12px; line-height: 14px; border: 1px solid #ececec; color: #cccccc; padding:8px 10px; border-radius: 6px; display: inline-block; margin-top: 5px; font-weight: 300;

}

/*----------------------------------------- 6) Hero --------------------------------------------------*/

#home {
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; min-width: 100%; width: 100%; display: block;
	
}


/* HOME BANNER */

.img-desktop {
    display: none;
}

.img-mobile {
	width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
	
}



/* VIDEO */

.showreel {
	margin: 0px;
}


video::-internal-media-controls-download-button { 
    display:none; 
} 
video {
    width: 100%; height: auto; min-width: 100%;
}



/* VIDEO */


/*
.showreel-home {margin-top: 10px;margin-bottom: -8px;}

.video-1 { visibility: visible; display: block;width: 100%}
.video-2 { visibility: hidden; display: none;}


@media only screen and (min-width: 480px) and (max-width: 767px) { 
	#home {background-color: #2e3649; min-height: 300px; width: 100%; color: #fff;}
.video-1 { visibility: hidden; display: none; }
.video-2 { visibility: visible; display: block; }

}

@media only screen and (max-width: 479px) { 
	#home {background-color: #2e3649; min-height: 300px; width: 100%; color: #fff;background-image: url("../images/MCDMF_BG.jpg")!important}
.video-1 { visibility: hidden; display: none; }
.video-2 { visibility: visible; display: block; }
}

@media only screen and (min-width: 1920px) { 
	#home {background-color: #2e3649; height: auto; width: 100%; color: #fff;background-image: url("../images/MCDMF_BG.jpg")!important}
.video-1 { visibility: visible; display: block; width: 100%; margin: 0 auto; padding-top: 70px;margin-bottom: -8px;}
.video-2 { visibility: hidden; display: none;}
}

/* VIDEO */



.wrap-hero-content{
  width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}
.hero-content{
  position: absolute; text-align: center; min-width: 300px; left: 50%; top: 50%; padding: 65px; outline-offset: 8px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}



/*mouse*/
.mouse-icon {
  position: absolute; border: 2px solid #0F1F35; background: #fff; opacity: 0.8; border-radius: 13px; height: 40px; width: 30px; margin: 0 auto; display: block; left: 0; right: 0; bottom: 30px; z-index: 100;
}

@media only screen and (max-width: 479px) {
	.mouse-icon {visibility: hidden;}
}

@media only screen and (min-width: 1920px) {
	.mouse-icon {bottom: 28%;}
}

.mouse-icon .scroll {
  -webkit-animation-name: scrolling;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-name: scrolling;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
.mouse-icon .scroll {
  position: relative; border-radius: 10px; background: #0F1F35; width: 4px; height: 8px; top: 4px; margin-left: auto; margin-right: auto;
}

@-webkit-keyframes scrolling  {
  0%   { top:2px;  opacity: 0;}
  30%  { top:8px; opacity: 1;}
  100% { top:16px; opacity: 0;}
}

@keyframes scrolling  {
  0%   { top:2px;  opacity: 0;}
  30%  { top:8px; opacity: 1;}
  100% { top:16px; opacity: 0;}
}


/*----- typed effect ---*/
.typed-cursor{ opacity: 0;}


/*-----------------------------------------  Sections --------------------------------------------------*/

/*---------- a. portfolio -----------*/
ul.portfolio-image {
  list-style: none; position: relative; width: 100%; height: auto; padding: 0; margin: 0;
}
ul.portfolio-image li {
  float: left; display: block; list-style: none; position: relative; display: inline-block; overflow: hidden; padding-top: 46%;
}
ul.portfolio-image li:hover {
  cursor: pointer;
}
ul.portfolio-image li:hover img {
  -webkit-filter: grayscale(20%); transform: scale(1.15);
}
ul.portfolio-image li:hover .image-bg {opacity: 1;}
ul.portfolio-image li:hover .description-wrap { background: rgba(186, 186, 186, 0.6); }
ul.portfolio-image li img { position: absolute; width: 100%; height: auto; left: 0; top: 0; /* -webkit-filter: grayscale(100%);*/ transition: filter, transform, 0.5s; padding: 15px;
}
ul.portfolio-image li .decription-wrap {
  position: absolute; width: 100%; height: 100%; top: 0; left: 0; /* background: rgba(242, 242, 242, 0.1);*/ padding: 20px; transition: background, 0.5s;
}
ul.portfolio-image li .image-bg {
  color: #0F1F35; background: #fff; background: rgba(255, 255, 255, 0.8); font-size: 14px; width: 100%; height: 50%; display: inline-block;
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  transform: translate(-50%, -50%);
  top: 50%; left: 50%; padding: 10px 0; position: relative; margin: 0 auto; text-align: center; opacity: 0; transition: opacity, 0.5s; letter-spacing: 1.5px; font-weight: 300;
  color: transparent;
}
ul.portfolio-image li .desc{
  position: absolute; z-index: 1; top: 40%; left: 0; display: table-cell; right: 0; text-align: center; color: #0F1F35; 
}

.desc span{
	font-family: 'Libre Bodoni', sans-serif; font-weight: 400; line-height: 1.6em; font-size: 1.4em;
}

/* load more */

.gallery {
  width: 330px; margin: 0; padding: 0;
}
.gallery li { 
  display: none; float: left; list-style: none; margin-right: 10px;
}
.more, .less {
  background-color: #000; clear: both; color: #fff; cursor: pointer; display: block; font-size: 14px; margin-top: 6px; padding: 6px 0; text-align: center; text-transform: uppercase; width: 320px;
}

/* load more end */


/*---------- b. service -----------*/
.icon-use {
  font-family: 'Glyphter'; font-size: 30px; line-height: 20px; color: #818181; margin: 0;
}
.head-sm {
  font-size: 13px; letter-spacing: 1.5px; line-height: 1.5em; text-transform: uppercase; margin-top: 10px; margin-bottom: 20px; font-family: 'Outfit', sans-serif; font-weight: 600;
}
.text-grey {
  color: #434343; line-height: 26px; margin-bottom: 5px; height:100px;
}

.services-strat {   
	background-image: url("../images/services/MCDMF_Services-StratMarkAndComms.jpg"); background-size: cover;  width: 100%; height: 415px; background-position: top center; background-repeat: no-repeat;  overflow: hidden;}
.services-prod {   
	background-image: url("../images/services/MCDMF_Services-Production.jpg"); background-size: cover; width: 100%; height: 290px; background-position: top center;  background-repeat: no-repeat;  overflow: hidden;}
.services-media {   
	background-image: url("../images/services/MCDMF_Services-Media.jpg"); background-size: cover; width: 100%; height: 250px; background-position: top center; margin-left: -15px; background-repeat: no-repeat;  overflow: hidden;}
.services-exp {   
	background-image: url("../images/services/MCDMF_Services-Experiential.jpg"); background-size: cover; width: 100%; height: 250px; background-position: top center; margin-left: -30px; background-repeat: no-repeat;  overflow: hidden;}


.services-heading {font-family: 'Libre Bodoni', sans-serif; font-weight:400; color: #fff; font-size: 3rem; line-height: 3.3rem; padding: 65px 30px;}

.services-content { padding: 40px 10px; }

.service-bullets ul li {
  list-style-type: square; line-height: 1.5em;	
}

.service-bullets  li {
  padding-bottom: 10px;
}

.service-horiz {
	border-bottom: 10px solid #fff;}

.service-vert-R {
	border-right: 5px solid #fff;}
.service-vert-L {
	border-left: 5px solid #fff;}

@media screen and (max-width: 480px){
	.services-strat,.services-prod, .services-media, .services-exp  {  height: 180px; background-position: top center; }
	.services-media, .services-exp { margin-left: 0px; }
	.service-horiz, .service-vert-R, .service-vert-L  {border:none}
	.services-heading {font-size: 2rem; line-height: 2.2rem; padding: 30px; text-align: center}
	
}

/*---------- c. about -----------*/
.about-heading {font-family: 'Libre Bodoni', sans-serif; font-weight:400;  font-size: 3rem; line-height: 3.3rem; }

.section-padding{
  padding:60px 0;
}

.owl-dots{
  text-align: center;
}

.owl-dot {
  display: inline-block; height: 15px !important; width: 15px !important; background-color: #222222 !important; opacity: 0.8; border-radius: 50%; margin: 0 5px;
}

.owl-dot.active {
  background-color: #FF170F !important;
}

.single-logo img { 
	max-width: 80%}

.owl-wrapper-outer {
    padding: 2% ;
}

.owl-theme .owl-controls .owl-page span {
	background: #c6992c;
}




/*---------- experience -----------*/
.wrap-card {
  position: relative; box-shadow: 0px 0px 0px #818181; transition: all 0.2s ease 0s; -webkit-transform: translateY(0px) translateX(0px);
}
.wrap-card:before, wrap-card:after {
  display: inline-block; position: absolute; content: " "; width: 100%; height: 3px; background: #818181;
  -webkit-transform: scaleX(0);
  transition: all 0.2s ease;
}
.wrap-card:before {
  top: 0; left: 0;
  -webkit-transform-origin: 0 0;
}
.wrap-card:after {
  bottom: 0; left: 0;
  -webkit-transform-origin: 100% 0;
}
.wrap-card:hover {
  box-shadow: 20px 20px 0px #818181;
  -webkit-transform: translateY(-10px) translateX(-10px);
  transition: all 0.2s ease 0.4s;
}
.wrap-card:hover:after, .wrap-card:hover:before {
  -webkit-transform: scaleX(1);
}
.card {
  background: #fff; padding: 30px 35px 45px 35px; margin-bottom: 30px; border: 1px solid rgba(129, 129, 129, 0.1);
}
.card:before, card:after {
  display: inline-block; position: absolute; content: " "; width: 3px; height: 100%; background: #818181;
  -webkit-transform: scaleY(0);
  transition: all 0.2s ease 0.2s;
}
.card:before {
  top: 0; left: 0;
  -webkit-transform-origin: 0 100%;
}
.card:after {
  top: 0; right: 0;
  -webkit-transform-origin: 0 0;
}
.card:hover:after, .card:hover:before {
  -webkit-transform: scaleY(1);
}
/*---------- d. testimonial -----------*/
#testimonial {
  background-image: url("../images/MCDMF_Testimonial-2023.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; background-repeat: no-repeat; position: relative; padding: 0; margin: 0; width: 100%; height: 600px; color: #fff;
}

.list-testimonial {
  display: block; width: 100%;
}

.list-testimonial .content-testimonial {
  text-align: center; color: #fff; padding: 0 120px; font-style: italic;
}

.list-testimonial .content-testimonial .testi {
  font-size: 16px; line-height: 42px; letter-spacing: 2px;
}
.list-testimonial .content-testimonial .people {
  font-size: 14px; margin-top: 30px; letter-spacing: 2px; color: #B7B7B7; font-weight: 600;
}

.testi span {
	font-size: 2em; font-weight: 600; font-family: 'Libre Bodoni', sans-serif;font-weight:400; color: #fff; font-style: italic;
}

.mask-testimonial{
    background-color: rgba(47, 47, 47, 0.7); height: 100%; left: 0; position: absolute; top: 0; width: 100%; color: #2B2B2B;
}
.wrap-testimonial{
  z-index: 1; position: relative;
}

/*-------------- e. blog -------------*/
.grid {margin-top: 60px;}
.grid:after {
  content: ''; display: block; clear: both;
}

.grid-item {
  width: 33.333%; float: left; top: 0px; left: 0px; overflow: hidden; min-height: 1px; padding-right: 15px; padding-left: 15px; margin-bottom: 30px;
}

.grid-item .wrap-article {
  border: 1px solid rgba(129, 129, 129, 0.1); background: #fff; padding: 25px;
}

.grid-item .wrap-article img {
  text-align: center; display: block; margin: 0 auto;
}

.grid-item .wrap-article .img-circle {
  width: 165px; height: 165px;
}

.grid-item .wrap-article .fancy {
  line-height: 0.5; text-align: center; font-size: 16px; margin-top: 40px; color: #818181;
}

.grid-item .wrap-article .fancy span {
  display: inline-block; position: relative;
}

.grid-item .wrap-article .fancy span:before, .grid-item .wrap-article .fancy span:after {
  content: ""; margin-top: 1px; position: absolute; height: 5px; border-top: 1px solid #dedede; top: 0; width: 60%;
}

.grid-item .wrap-article .fancy span:before {
  right: 100%; margin-right: 5px;
}

.grid-item .wrap-article .fancy span:after {
  left: 100%; margin-left: 5px;
}

.grid-item .wrap-article .title {
  font-size: 16px; padding: 0 10px 0 10px; text-align: center; letter-spacing: 0.05; line-height: 26px; text-transform: uppercase; font-weight: 600;
}

.grid-item .wrap-article .title:after {
  content: ""; display: block; margin: 0 auto; bottom: -20px; height: 1px; background: #dedede; width: 48px; left: 0; margin-top: 15px;
}

.grid-item .wrap-article .content-blog {
  margin-top: 30px; padding: 0 10px 0 10px; color: #0F1F35;
}

/*---------- f. quote -----------*/
#about{
 display: inline-block; width: 100%;
}

.team-spacing {margin-bottom: 40px; padding: 0 40px;line-height: 1.2em ; font-size: 14px;}

.greyscale-hover img {
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   -webkit-transition: 0.5s -webkit-filter linear;
   -moz-transition: 0.5s -moz-filter linear;
   -moz-transition: 0.5s filter linear;
   transition: 0.5s filter linear, 0.5s -webkit-filter linear;
}


.greyscale-hover:hover img {
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
}


.bg-about {
  background: url('../images/reza.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; padding: 0; margin: 0; min-height: 660px; width: 100%; height: 100%; float: left;
}

.wrap-about {
  height: 100%; width: 100%; position: relative; display: block; min-height: 380px;
}

.wrap-about .w-content{
  position: absolute; left: 50%; top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%); 
}

.wrap-about .w-content td{
  font-size: 13px; font-weight: 300;
}
.wrap-about .w-content td.title{
  padding-right: 10px; font-weight: 500;
}
.wrap-about .w-content td.break{
  padding-right: 15px;
}
.wrap-about .w-content tr{
  height: 35px;
}
.wrap-about .head-about {
  font-size: 13px; line-height: 34px; letter-spacing: 0.5px; font-weight: 300;
}
.wrap-about .name {
  margin: 40px 0 20px 0; font-size: 14px;
}


.roller{
  height: 5.125rem; line-height: 5rem; position: relative; overflow: hidden;  width: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; text-transform: uppercase; color: #0F1F35; border: solid 2px #fff;
}


#spare-time{
  font-size: 1.2rem; font-style: italic; letter-spacing: 1rem; margin-top: 0; color: #E2C785;
  
}

.roller #rolltext {
  position: absolute; top: 0; animation: slide 7s infinite;  animation-delay: 4s;

}

@keyframes slide {
  0%{ top:0; }
  20%{ top: -5rem; }
  40%{ top: -10rem; }
  60%{ top: -15rem; }
  80%{ top: -20rem; }
}

  @keyframes slide-mob {
  0%{ top:0; }
  25%{ top: -2.125rem; }
  50%{ top: -4.25rem; }
  72.5%{ top: -6.375rem; }
}


/*---------- g. contact -----------*/

.contact-grey-bg {
  background: #f6f6f6; padding: 100px 0 0 0; display: block;
}

.social-icons {
	width: 6%; height: auto; margin-right: 20px;
}

.icon {
  display: inline-block; width: 20px; height: 20px; background-size: cover;
}
.icon-facebook {
  background-image: url(images/bootstrap-icons-1.3.0/facebook.svg);
}
.icon-facebook hover {
  background-image: url(images/bootstrap-icons-1.3.0/linkedin-turq.svg);
}

#contact {
	padding: 120px 0 200px 0;
}

#contact form {
  margin-top: 25px;
}

#contact .slider-masks {
  background-color: rgba(129, 129, 129, 0.7); height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}

#contact .group {
  position: relative; margin-bottom: 65px;
}

#contact input, #contact textarea {
  font-size: 13px; padding: 10px 10px 10px 5px; display: block; width: 100%; border: none; border-bottom: 1px solid #2b2b2b; background: transparent; color: #969696;
}

#contact input:focus, #contact textarea:focus {
  outline: none; border-bottom: none;
}

#contact label {
  color: #2b2b2b; font-size: 14px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

#contact input:focus ~ label, #contact input:valid ~ label, #contact textarea:focus ~ label, #contact textarea:valid ~ label {
  top: -25px; font-size: 12px; color: #818181;
}

#contact .bar {
  position: relative; display: block; width: 100%;
}

#contact .bar:before, #contact .bar:after {
  content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #818181;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

#contact .bar:before {
  left: 50%;
}

#contact .bar:after {
  right: 50%;
}
#contact input:focus ~ .bar:before, #contact input:focus ~ .bar:after, #contact textarea:focus ~ .bar:after, #contact textarea:focus ~ .bar:before {
  width: 50%;
}

#contact .highlight {
  position: absolute; height: 60%; width: 100%; top: 25%; left: 0; pointer-events: none; opacity: 0.5;
}

#contact input:focus ~ .highlight, #contact textarea:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

#contact input[type=submit] {
  border: 1px solid #2b2b2b !important; color: #2b2b2b; padding: 10px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

#contact input[type=submit]:hover {
  background: #2b2b2b; color: #fff;
}

.contact-info {
	padding: 0 25px 35px 0;
}

.contact-info i {
font-size: 2em; color: #293248; padding-right: 25px;
}

.contact-info i:hover {
color: #E2C785;
}


@-webkit-keyframes inputHighlighter {
  from { background: #5264AE;  }
  to { width: 0; background: transparent;  }
}
@-moz-keyframes inputHighlighter {
  from { background: #818181;  }
  to { width: 0; background: transparent;  }
}
@keyframes inputHighlighter {
  from { background: #818181;  }
  to { width: 0; background: transparent;  }
}

/*-------------- h. footer ------------------*/
.footer-top{
  width: 100%; text-align: center; color: #00382F; display: table;
}

.socials{
  width: 100%; margin: 0; padding: 0;
}

.socials * {
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.socials li {
  display: inline-block; list-style: outside none none; float: left; overflow: hidden; width: 33.33333%; font-size: 13px;
}

.socials a {
  color: #0F1F35; position: relative; display: inline-block; letter-spacing: 1px; margin: 0; text-decoration: none; padding: 25px 0; width: 100%;
}

.socials a:before, socials a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.socials a:before {
  bottom: 100%; display: block; height: 3px; width: 100%; content: "";
}

.socials a:after {
  position: absolute; bottom: 100%; left: 0; content: attr(data-hover); color: #fff; white-space: nowrap; width: 100%; padding: 25px 0;
}

.socials li:hover a, .socials .current a {
  transform: translateY(100%);
}

.linked{
  background: #ABABAB; color: #0F1F35;
}
.linked a:after{
  background-color: #E2C785;
}

.insta{
  background: #d8d8d8;
}

.insta a:after{
  background: #CEAEBD;
}

.facebook{
  background: #969696;
  /*padding: 20px 0;*/
}

.facebook a:after{
  background-color: #5B4E5D;
}

.footer-bottom {
  width: 100%; background: #00382F; padding: 60px 0 30px; color: #fff; background-image: url("../images/MCD-MF_GreenFooterBackG.jpg"); border-top: solid 2px #E2C785;
}

.footer-bottom img {
	max-width: 10%;	
}

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


.footer-bottom p {
	color: #fff;
	font-size: 0.8em;
    text-align: center;
    line-height: 1.5em;
}





/*---------ROOMY-------------*/

.homeroomy { padding-top: 0px }

.roomy-5T { padding-top: 5px; }

.roomy-10B { padding-bottom: 10px; }

.roomy-10-LR { padding-left: 10px; padding-right: 10px; }

.roomy-15 { padding: 15px; }

.roomy-20 { padding: 20px; }

.roomy-20B { padding-bottom: 20px; }

.roomy-20-top { padding-top: 20px; }

.roomy-20-LR { padding-left: 20px; padding-right: 20px; }

.roomy-20-TB { padding-top: 20px; padding-bottom: 20px; }

.roomy-25 { padding: 25px; }

.roomy-25-B { padding-bottom: 25px; }

.roomy-25-top { padding-top: 25px; }

.roomy-30-TBR { padding: 30px 30px 30px 0; }

.roomy-30-top { padding-top: 30px; }

.roomy-30-LR { padding-left: 30px; padding-right: 30px; }

.roomy-30-TB { padding-top: 30px; padding-bottom: 30px;  }

.roomy-25T-50B { padding-bottom: 50px; }

.roomy-50 { padding: 50px; }

.roomy-50-LR { padding-left: 50px; padding-right: 50px;}

.roomy-50-line { padding: 0 50px; border-right: thin solid #ccc; }

.roomy-50-top { padding-top: 50px; }

.roomy-50-TB { padding-top: 50px; padding-bottom: 50px;  }

.roomy-50-B { padding-bottom: 50px; }

.roomy-50-TBR { padding: 50px 50px 50px 0; }

.roomy-50-RBL { padding: 0px 50px 50px 50px; }

.roomy-65-LR { padding-left: 65px; padding-right: 65px; }

.roomy-75-top { padding-top: 75px; }

.roomy-75-B { padding-bottom: 75px ; }

.roomy-75-TB { padding-top: 75px; padding-bottom: 75px; }

.roomy-75-LR { padding-left: 75px; padding-right: 75px; }

.roomy-100-top { padding-top: 100px ; }

.roomy-100-LR { padding-left: 100px; padding-right: 100px; }

.roomy-110-top { padding-top: 110px; }

.roomy-125-top { padding-top: 125px; }

.roomy-150-B { padding-bottom: 150px; }

.roomy-150-top { padding-top: 150px; }

.roomy-200-LR { padding-left: 200px; padding-right: 200px; }

.roomy-line2 { line-height: 3.8rem;padding-bottom: 30px; }

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

.mroomy-20-top { padding: 2px 0 0 0; }

.mroomy-25-LR { padding: 0 2px; }

.wroomy-105-TB { padding-top: 5px; padding-bottom: 5px;  }

.rainbow {  
  background: center/contain no-repeat linear-gradient(135deg, red,orange,yellow,green,blue,violet); 
  color: red;
  font: italic bold 3.2rem cursive;
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black;
  letter-spacing: 3px;
}


@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100px); /* Start 100px to the left of its final position */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* End at its natural position */
  }
  }


  .fromleft {
    animation: slide-in-left 1000ms;
	  animation-delay:500ms;
    animation-trigger: --in-view play-forwards;
  timeline-trigger-name: --in-view;
  timeline-trigger-source: view();
  }

   

@keyframes slide-in-right {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  }

  .fromright {
    animation: slide-in-right 1000ms;
	  animation-delay:500ms;
    animation-trigger: --in-view play-forwards;
  timeline-trigger-name: --in-view;
  timeline-trigger-source: view();
  }

.fadein {
  animation: fade-in linear both;
  /* Binds the animation timeline to the viewport entry */
  animation-timeline: view();
  /* Limits the start and end phase of the entry animation */
  animation-range: entry 0% entry 100%;
}

/* Staggering elements by using percentage-based delay offsets */
.fadein:nth-child(1) { animation-delay: 0%; }
.fadein:nth-child(2) { animation-delay: 10%; }
.fadein:nth-child(3) { animation-delay: 20%; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}