/*<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sen&family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">*/

@import url('https://fonts.googleapis.com/css2?family=Sen&family=Source+Sans+Pro:wght@300&display=swap');

body
{
   font-family: 'Sen', sans-serif !important;
}
h1, h2 ,h3,h4,h5, h6 {
    font-family: 'Sen', sans-serif;
}



/*workshop bg changes */
.workshop-bg-formation-2-hero-area {
    background: url(../images/formations-bg.jpg);
    height: 500px;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
    opacity: 0.2;
    position: relative;
    margin-top: 100px;
}

/* stop motion bg changes */
.formation-2-hero-area-stop-motion-bg {
	background: url(../images/formations-bg_stopmotion-c.png);
    height: 500px;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
    opacity: 0.2;
    position: relative;
    margin-top: 100px;
}


/* 2d animation bg changes */
.formation-2-hero-area-twod-animation {
	background: url(../images/formations-bg_digital-c.png);
    height: 500px;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
    opacity: 0.2;
    position: relative;
    margin-top: 100px;
}


/*Traditional-animation.html bg changes*/
.traditional-animation-bg-hero-area {
    background: url(../images/formations-bg.jpg);
    height: 500px;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
    opacity: 0.2;
    position: relative;
    margin-top: 100px;
}

/* Training.html BG styles */
.training-bg-hero-area {
    background: url(../images/formations-bg.jpg);
    height: 500px;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
    opacity: 0.2;
    position: relative;
    margin-top: 50px;
}


.new-formation-hero-area-text {
    margin-top: 230px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  color: #222f42;
   width: 100%;
}

.new-formation-hero-area-text {

    font-size: 20px !important;
   font-family: 'Sen', sans-serif;
}

.new-formation-hero-area-text .button {
text-decoration: none;
    border: 2px solid #e3f51b;
    padding: 5px 10px;
    font-size: 20px;
    color: #0ee8c4;
    font-weight: bold;
}
.new-formation-hero-area-text h4{

    font-size: 25px !important;
    font-weight: bold !important;
   font-family: 'Sen', sans-serif;
  
}
.new-formation-hero-area-text .button:hover, .new-formation-hero-area-text .button:active {
background: #E3FF50;
    color: #FFFFFF;
    border: 2px solid #E3FF50;
}

.new-formation-hero-area-text a.icon img {
    width: 60px;
}

/*Global Styles*/
.p-50 {
	padding-top: 100px;
    /*padding-bottom: 50px;*/
}

.regi-button {ext-decoration: none;
    border: 2px solid #e3f51b;
    padding: 5px 10px;
    font-size: 20px;
    color: #0ee8c4;
    font-weight: bold;}

   .regi-button:hover {background: #e3f51b;
    color: #FFFFFF; 
   text-decoration: none;
    border: 2px solid #e3f51b;}

.embed-responsive-16by9::before {
	padding-top: 0 !important;
}

.embedded-video iframe {
    /* width: 100% !important; */
    margin-left: -16%;
    margin-top: -5%;
    width: 480px;
}

/* Header styling */

.w3-white, .w3-hover-white:hover {
    color: #000!important;
    background-color: #fff!important;
}

.w3-top {
    top: 0;
}
.w3-top, .w3-bottom {
    position: fixed;
    width: 100%;
    z-index: 1;
}
.w3-bar {
    width: 100%;
    overflow: hidden;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
    display: block;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.w3-container:after, .w3-container:before, .w3-panel:after, .w3-panel:before, .w3-row:after, .w3-row:before, .w3-row-padding:after, .w3-row-padding:before, .w3-cell-row:before, .w3-cell-row:after, .w3-clear:after, .w3-clear:before, .w3-bar:before, .w3-bar:after {
    content: "";
    display: table;
    clear: both;
}
.w3-content {
    max-width: 980px;
}

.w3-content, .w3-auto {
    margin-left: auto;
    margin-right: auto;
}
.w3-left {
    float: left!important;
}

.w3-padding-32 {
    padding-top: 32px!important;
    padding-bottom: 32px!important;
}
.w3-xlarge {
    font-size: 24px!important;
}
.w3-container, .w3-panel {
    padding: 0.01em 16px;
}

.logo {
    margin-left: -35%;
}


.menu {
    position: absolute;
    top: 38px;
    right: 12px;
    width: 46px;
}
.menu-link {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

.menu a {
    float: left;
    position: relative;
    padding-top: 0;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 0;
}
.hamburger-icon {
    position: absolute;
    width: 30px;
    height: 24px;
    margin: auto;
}

.w3-display-topright {
    position: absolute;
    right: 0;
    top: 0;
}
.hamburger-bar {
    background-color:#d6200f;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: all 0.25s ease-in-out;
}

.hamburger-bar-2 {
    top: 0;
    bottom: 0;
    margin: auto;
}
.hamburger-bar-3 {
    bottom: 0;
}

.menu.open .hamburger-bar-1 {
    transform: translateY(17px) translateY(-50%) rotate(
45deg
);
}

.menu.open .hamburger-bar-2 {
    opacity: 0;
}

.menu.open .hamburger-bar-3 {
    transform: translateY(-7px) translateY(50%) rotate(
-45deg
);
}
.menu a:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 3px;
    width: 0;
    background: transparent;
}
.menu-overlay {
    background-color: #e3ff59;
    color: #0ee8c4;
    font-weight: 700;
    height: 100%;
    width: 100%;
    position: fixed;
    text-align: left;
    transition: opacity 0.2s ease-in-out;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: left;
    left: 0;
    top: 0;
}

.menu-overlay.open {
    opacity: 0.9;
    visibility: visible;
}
nav {
    position: absolute;
    height: 25%;
    top: 20%;
    transform: translateY(-50%);
    font-size: 25px;
    font-family: 'Sen', sans-serif;
    font-weight: 100;
    text-align: center;
}
ul {
    list-style: none;
}
a.overlay-logo.logo {
	margin-left: 36px;
    margin-top: 30px;
}
nav.overlay-menu {
    margin-top: 100px;
}
.ml-15 {
	margin-left: -15px !important;
}

.menu-bottom-links-production {
	position: absolute;
    bottom: 15%;
    left: 50px;
    line-height: 1px;
    font-size: 15px;
    font-weight: 400;
	
}

.menu-bottom-links {
	position: absolute;
    bottom: 20%;
    left: 54px;
    line-height: 1px;
    font-size: 15px;
    font-weight: 400;
	
}
.menu-bottom-links a {
	text-decoration: none;
}


.overlay-menu a {

    /*float: left;*/
    position: relative;
    padding-top: 0;
    text-decoration: none;
    /*text-transform: uppercase;*/
    /*color: #ffffff;*/
    line-height: 0;
    margin: 23px;
}
.nav-links:hover {
	text-decoration: none;
	color: #fefffa !important;
	
}

.nav-links:hover:after {
    width: 100%;
    left: 0;
    background: #d6200f;
}
.nav-links:after {
    transition: width .5s ease, background-color .5s ease, left .5s ease;
}
a:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    /*left: 40% !important;*/
    height: 3px;
    width: 0;
    background: transparent;
}

.nav-links {
    float: left;
    /* margin: 15px; */
    /* padding-bottom: 25px; */
    font-weight: normal;
    margin-left: 15px;
    text-decoration: none;
}
.nav-links:after {
    transition: width .5s ease, background-color .5s ease, left .5s ease;
}

.nav-links a:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 3px;
    width: 0;
    background: transparent;
}



/* End header styling */


.logo img {
	width: 100px;
}


.menu {
	float: right;
	margin-right: -8%;
}

.menu img {
	width: 50px;
}

.title {
	font-size: 22px;
	font-weight: bold;

}

.hero-image img{
	width: 50%;
	float: left;
}

.video-container {

    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
    overflow: hidden;
    z-index: 0;
    direction: ltr;
}

.formation-hero-area {

	
    background-position: center;
    height: auto;
    background-size: cover;
    opacity: 0.1;
    position: relative;
    margin-top: 100px;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 0% 0% 0% 0%;
}

.formation-hero-area-text {
    position: absolute;
    top: 168px;
    left: -500;
    text-align: center;
	margin: 0 3%;
}

.formation-hero-area-text .button {
	text-decoration: none;
    border: 2px solid #e3f51b;
    padding: 5px 10px;
    font-size: 22px;
    rgba(243, 255, 162, 0.6);
    font-weight: bold;
    
    /*float: right;*/
    /* margin-left: -43px; */
    /* margin-top: -10px; */
    /* margin-right: 10px; */
    /*position: absolute;*/
    /*left: 45%*/
}

.formation-hero-area-text .button:hover, .formation-hero-area-text .button:active {
	border: none;
	background: #E3FF50;
	color: #FFFFFF;
	border: 2px solid #E3FF50;
}

.formation-hero-area-text a.icon {
    position: absolute;
    /*bottom: -110px;*/
    top: 115%;
    /* margin-top: 70px !important; */
    left: 47%;
}

.formation-hero-area-text h4 {
font-size: 32px !important;
    font-weight: bold !important;
	   font-family: 'Sen', sans-serif;
}

.formation-hero-area-text a.icon img{
	width: 60px;
}

.work-type {
    padding-top: 150px;
    margin-bottom: 60px;
}

.works {
    border: 1px solid #e3f51b;
    /*width: 432px;*/
    height: 500px;
    margin-bottom: 10px;
}

.works h4 {
	margin-left: 15px;
    margin-top: 10px;
}

.works p {
	margin-left: 15px;
}

.works .button {
    text-decoration: none;
    border: 2px solid #e3f51b;
    padding: 5px 10px;
    font-size: 20px;
   color: #0ee8c4;
    font-weight: bold;
    float: right;
    /* margin-left: -43px; */
    margin-top: -40px;
    margin-right: 10px;
}

.works .button:hover, .works .button:active {
	border: none;
	background: #E3FF50;
	color: #FFFFFF;
	border: 2px solid #E3FF50;
}

.work-type .works img {
	width: 100%;
}

.plus-de-video {
    border: 3px solid #e3f51b;
    padding: 20px;
    height: 300px;
}

.plus-de-video h4 {
	color: #737A73;
}

.plus-de-video p {
	margin-right: 60px;
    color: #737A73;
}

.plus-de-video .button {
	text-decoration: none;
    border: 3px solid #e3f51b;
    padding: 15px 20px;
    font-size: 20px;
    color: #0ee8c4;
    font-weight: bold;
    float: right;
    /* margin-left: -43px; */
    /*margin-top: -10px;*/
    margin-right: 10px;
}
.plus-de-video .button:hover, .plus-de-video .button:active {
	/*border: none;*/
	background: #E3FF50;
	color: #FFFFFF;
	border: 3px solid #E3FF50;
}


.formation-carousel iframe {
    width: 100% !important;
    height: 320px !important;
}

.formation-carousel {
    margin-top: -40px !important;
}

.caro-vid-pt {
	/*padding-top: 56.25% !important;	*/
}

footer {
	background: #e1ff45;
    margin-top: 350px;
    text-align: center;
    color: #30fcd0;
    font-weight: bold;
    padding: 20px 0;
}

footer p {
	line-height: 20px;
}



/*CSS for slider on formation page*/
.mySlides {display: none}
.mySlides img {vertical-align: middle; height: 300px;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  display: none;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  border: 1px solid #d9cf84 ;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  /*background-color: #e3ff50;*/
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
.fade:not(.show) {
    opacity: 1;
}


/*Formation 2 page styling*/




.formation-2-hero-area {
	background: url(../images/formations-bg.jpg);
    height: 500px;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
    opacity: 0.2;
    position: relative;
    margin-top: 50px;
}
.formation-2-hero-area-text {
	position: absolute;
    top: 250px;
    left: 40%;
    text-align: center;
}

.formation-2-hero-area-text .button {
    text-decoration: none;
    border: 2px solid #e3f51b;
    padding: 5px 10px;
    font-size: 20px;
    color: #0ee8c4;
    font-weight: bold;
    /*float: right;*/
    text-align: center;
   /* position: absolute;
    left: 20%;
    top: 269%;*/
}
.formation-2-hero-area-text .button:hover, .formation-2-hero-area-text .button:active {
	border: none;
	background: #E3FF50;
	color: #FFFFFF;
	border: 2px solid #E3FF50;
}

.formation-2-hero-area-text a.icon {
	position: absolute;
    bottom: -111px;
    left: 100px;
}

.formation-2-hero-area-text h2 {
	font-weight: bold;
}

.formation-2-hero-area-text a.icon img{
	width: 60px;
}


/*Landing page styles*/
.lpha-area {
	margin-top: 100px;
}

.landing-page-hero-area {
  position: relative;
  width: 50%;
  background: #E6F447;
  float: left;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  /*opacity: 0;*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.landing-page-hero-area:hover .image {
  opacity: 0.1;
  /*background-color: #E5F040;*/

}

.landing-page-hero-area:hover .middle .l-text{
  opacity: 1;
  color: #70ffd4;
}

.l-text {
  font-size: 50px;
  font-weight: 400;
  color: #fefffa;

}

p.land-para {
    /* width: 50%; */
    text-align: center;
    margin: 90px;
  color:  #222f42;	
  font-size: 17px;
   font-family: 'Sen', sans-serif;
}

h2.awards-title {
	text-align: center;
	font-size: 25px;
	color: #222f42;	
      font-family: 'Sen', sans-serif;
}

.awards-images img {
	width: 16.66%;
	float: left;
}

.news-image img {
	width: 100%;
}

.news-section {
    /* margin-top: 50px; */
    clear: both;
    padding-top: 80px;
}

.news {
    border: 2px solid #ded268;
    height: 190px;
}

.news h2 {
	text-align: center;
    margin-top: 70px;
      font-family: 'Sen', sans-serif;
  color: #0ee8c4
}

.news-thumb img {
	width: 100%;
}

.news-thumb h3 {
	  font-family: 'Sen', sans-serif;
}
.news-detail h3 {
  font-family: 'Sen', sans-serif;
    color: #171c1b
}


.mt-40 {
	margin-top: 40px !important;
}



/* Production page Styling  */
/* sousmenu*/

			@media only screen and (max-width: 600px) {
			  .production-text-margin-left {
				margin-left: 10% !important;
			}

				.portfolio-item {
				    margin-left: 5%;
				    margin-right: -15%;
				}
				
				.w3-content {
				    max-width: 980px !important;
				    margin-left: 6% !important;
				    margin-right: 14% !important;
				}

				p.land-para {
				    /* width: 50%; */
				    text-align: center;
				     margin: 0px; 
				    margin-top: 30px !important;
				}

				.l-text {
				    font-size: 18px !important;
                     font-family: 'Sen', sans-serif;
				}


			
			}

			@media only screen and (max-width: 768px) {
				.logo {
				    margin-left: 0 !important;
				}
				.menu {
				    float: none;
				    margin-right: 0 !important;
				}
			}
			@media only screen and (max-width: 1024px) {
				.logo {
				    margin-left: 0 !important;
				}
				.menu {
				    float: none;
				    margin-right: 0 !important;
				}
			}

			.production-text-margin-left {
				margin-left: -20%;
			}

			.production-text-right-margin {
				margin-right: -20%;
			}

            .portfolio-menu {
                text-align: right;
                margin: 0 auto;
                padding: 0 10px;
                margin-top: 100px;
            }
            /* portfolio*/
            /*.collection {*/
            /*  float: left;*/
            /*  margin: 0 auto;*/
            /*  padding: 0 40px;*/
            /*  margin-top: 100px;*/
            /*}*/

            .portfolio-menu ul li {
                display: inline-block;
                margin: 0;
                list-style: none;
                padding: 12px 10px;
                cursor: pointer;
                transition: all .5 ease;
              
            }

            .portfolio-menu ul {
                list-style: none;
            }

            .portfolio-menu ul li:hover {
                color: black;
                border-bottom: 2px solid rgb(229,255,0);
            }

            .portfolio-menu ul li.active {
                color: black;
                border-bottom: 2px solid rgb(229,255,0);
            }

            .portfolio-item {
                max-width: 1224px;
                margin: 30px auto;
                display: flex;
                flex-wrap: wrap;
                margin-left: -10%;
                margin-right: -10%;
            }

            .portfolio-item .item {
                width: 33.3%;
                display: inline-block;
                margin-bottom: 10px;
                padding: 0 10px;
            }

            .portfolio-item .item div {
                width: 100%;
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
            }

            .content {
                position: relative;
                width: 100%;
                max-width: 400px;
                margin: auto;
                overflow: hidden;
            }

            .content .content-overlay {
                background: rgb(234, 255, 0) !important;
                /*background: rgba(0, 0, 0, 0.3);*/
                color: #f1f1f1;
                position: absolute;

                width: 100%;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                opacity: 0;
                -webkit-transition: all 0.4s ease-in-out 0s;
                -moz-transition: all 0.4s ease-in-out 0s;
                transition: all 0.4s ease-in-out 0s;
            }

            .content:hover .content-overlay{
                opacity: 0.9;
            }

            .content-image{
                width: 100%;
            }

            .content-details {
                position: absolute;
                text-align: center;
                padding-left: 1em;
                padding-right: 1em;
                width: 100%;
                top: 50%;
                left: 50%;
                opacity: 0;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                -webkit-transition: all 0.3s ease-in-out 0s;
                -moz-transition: all 0.3s ease-in-out 0s;
                transition: all 0.3s ease-in-out 0s;
            }

            .content:hover .content-details{
                left: 50%;
                opacity: 1;
            }

            .content-details h6{
                color: #0ee8c4;
			    font-weight: 500;
			    /* letter-spacing: 0.10em; */
			    /* text-transform: uppercase; */
			    font-size: 20px;
            }

            .content-details p {
                color: #fff;
                font-size: 15px;
            }

            .fadeIn-bottom{
                top: 50%;
            }

            html {
                scroll-behavior: smooth;
            }

            .codegena {
                position: relative;
                width: 100%;
                height: 0;
                padding-bottom: 56.27198%;
            }

            .codegena iframe{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
            }

            @media screen and (max-width: 1024px) {
                .portfolio-item .item .content .content-image .content-details h6 p .content:hover {
                    width: 50%;
                    font-size: 10px;
                }
            }


            @media screen and (max-width: 450px) {
                .portfolio-item .item .content .content-image .content-overlay .content-details h6 p .content:hover {
                    width: 50%;
                    font-size: 10px;
                }
              .portfolio-menu {
    			text-align: center;
                padding: 0 6px !important;
              }
              .portfolio-menu ul li {
                padding: 12px 6px !important;}
              .portfolio-menu ul {
    			padding: 0px !important;}
              .news {
			    height: 80px;
              }
              .news h2 {
    			margin-top: 18px;}
              .carousel {
    margin-left: 0px !important;}
              .image-animee-video.pl-40.production-text-right-margin {
    			padding-left: 0px;}
              .production-text-right-margin h1 {
                font-size: 30px;
              }
              
             
            }

            .pl-40 {
            	padding-left: 40px;
            }
            .pt-20 {
            	padding-top: 20px;
            }

     .carousel {
     	padding-top: 20px !important;
     }       

     .carousel-indicators {
     	bottom: -50px !important;
     	
     }       
     .carousel-item {
     	width: 480px !important;
     }

    .carousel-indicators li {
    width: 16px !important;
    height: 16px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    border-radius: 50% !important;
    background-color: #19fad5 !important;
}

body[data-aos-duration='400'] [data-aos],
  [data-aos][data-aos][data-aos-duration='400'] {
    transition-duration: 400ms;
  }



  /* contact page styling */
  
  .contact-page {
    margin-top: 200px;
    /* clear: both; */
    overflow: hidden;
}
.contact-detail {
    width: 50%;
    float: left;
    background: #E3FF50;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-text {
    text-align: center;
    line-height: 7px;
   color: #0ee8c4;
  font-size: 17px;
}
.map {
    width: 50%;
    float: right;
}
  
/*  .left-contact {
	background: #E3FF50;
    margin-right: -18%;
    height: 451px;
    text-align: center;
    padding-top: 30%;
  }

  .left-contact p {
    line-height: 7px;
    color: #737A73;
}

  .right-contact {
    margin-left: 13%;
}*/


@media screen and (max-width: 768px) {
    .contact-text {
        line-height: 16px;
    }

    #carousel-example1 {
    margin-left: 0% !important;
    }

    #carousel-example2 {
    margin-left: 0% !important;
    }

    #carousel-example3 {
    margin-left: 0% !important;
    }

    .embedded-video iframe {
        width: 100%;
        margin-left: 0% !important;
    }
    .production-text-right-margin {
    margin-right: 0%;
    margin-top: 50px;
}

.pl-40 {
    padding-left: 40px;
}

.portfolio-item {
    margin-left: 20px;
}

.carousel-item {
    width: 100%;
}

}

@media screen and (max-width: 767px) {

video {
height: 530px !important;
}



.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100% !important;
    
    }

    .carousel-inner {
        margin-top: 0% !important;
    }
}

@media screen and (max-width: 1000px) {
    .contact-text {
        line-height: 16px;
    }

    #carousel-example1 {
    margin-left: 0% !important;
    }

    #carousel-example2 {
    margin-left: 0% !important;
    }

    #carousel-example3 {
    margin-left: 0% !important;
    }

    .embedded-video iframe {
        width: 100%;
        margin-left: 0% !important;
    }
    .production-text-right-margin {
    margin-right: 0%;
    margin-top: 50px;
}

.pl-40 {
    padding-left: 40px;
}
}

@media screen and (max-width: 598px)  {
	.embedded-video {
    height: 260px;
}
}

@media screen and (max-width: 450px) { 

    .contact-text {
        line-height: 16px;
    }

    #carousel-example1 {
    margin-left: 0% !important;
    }

    #carousel-example2 {
    margin-left: 0% !important;
    }

    #carousel-example3 {
    margin-left: 0% !important;
    }

    .embedded-video iframe {
        width: 100%;
        margin-left: 0% !important;
    }
    .production-text-right-margin {
    margin-right: 0%;
    margin-top: 50px;
}

.pl-40 {
    padding-left: 40px;
}

.portfolio-item {
    margin-left: 0px;
}

.carousel-item {
    width: 100%;
}

}




/*Carousel items*/
div#carousel-example {
    clear: both;
    padding-top: 80px !important;
}


/* media css queries for formation-2 page  */

@media only screen and (max-width: 373px) and (min-width: 310px)  {
    .formation-2-hero-area-text {
    left: 16%;
}

div#carousel-example {
    margin-bottom: 20px;
}

}

@media only screen and (max-width: 419px) and (min-width: 374px)  {
    .formation-2-hero-area-text {
    left: 20%;
}
div#carousel-example {
    margin-bottom: 20px;
}
}


@media only screen and (max-width: 479px) and (min-width: 420px)  {
    .formation-2-hero-area-text {
    left: 13%;
}
div#carousel-example {
    margin-bottom: 20px;
}
}


@media only screen and (max-width: 549px) and (min-width: 480px)  {
    .formation-2-hero-area-text {
    left: 28%;
}
div#carousel-example {
    margin-bottom: 20px;
}
}

@media only screen and (max-width: 649px) and (min-width: 550px)  {
    .formation-2-hero-area-text  {
    left: 30%;
}
div#carousel-example {
    margin-bottom: 20px;
}
}

@media only screen and (max-width: 950px) and (min-width: 650px)  {
    .formation-2-hero-area-text  {
    left: 35%;
}
div#carousel-example {
    margin-bottom: 20px;
}
}

@media only screen and (max-width: 400px) and (min-width: 316px)  {
    .plus-de-video {
        height: 379px;
    
}

}

@media only screen and (max-width: 315px) and (min-width: 269px)  {
    .plus-de-video {
        height: 520px;
    
}

}

@media only screen and (max-width: 471px) and (min-width: 430px)  {
    .formation-hero-area-text a.icon {
    top: 102%;
    left: 43%;
}
}

@media only screen and (max-width: 429px) and (min-width: 360px)  {

    .formation-hero-area-text {
        top: 120px;
        
    }
    
    .formation-hero-area-text a.icon {
        top: 100%;
        left: 43%;
    }

    video {
        height: 535px !important;
    }
}

@media only screen and (max-width: 320px) and (min-width: 260px)  { 

    video {
        height: 535px !important;
    }

    section.fullsize-video-bg {
        height: 130vh !important;
    }

    .formation-hero-area-text {
        top: 115px !important;
    }

    .formation-hero-area-text a.icon {
        top: 101%;
        left: 40%;
    }


}



/*formations video background CSS codes*/
.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

section.fullsize-video-bg {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* z-index: 5; */
    object-fit: cover;
    opacity: 0.7;
}

.inner {
    position: absolute;
    top: 50%;
    left: 30%;
}

@media only screen and (max-width: 429px) and (min-width: 401px)  {
    .plus-de-video {
        height: 318px !important;
    
}

}