/******************************************************************
  Template Name: Dreams
  Description: Dreams wedding template
  Author: Colorib
  Author URI: https://colorlib.com/
  Version: 1.0
  Created: Colorib
******************************************************************/
/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Counter Section
7.  Team Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/
/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Croissant%20One:wght@200;300;400&display=swap');

.skiptranslate {
  display: none !important;
}



html,
body {
  top: 0px !important;
  height: 100%;
  font-family: "Josefin Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}


* {
  margin: 0;
}

h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #111110;
  font-weight: 400;
  font-family: "Play", sans-serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 16px;
  font-family: "Josefin Sans", sans-serif;
  color: #adadad;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

img {
  max-width: 105%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #fff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

.blur {
  filter: blur(5px);
}

/* bootstrap modif */
.footer__top__social>.fa {
  border: none;
}

.contain-responsive {
  background-size: contain !important;
}

/* remove watermark */
img[src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png"] {
  display: none;
}


/*---------------------
  Helper CSS
-----------------------*/
.d-flex {
  max-width: 100%;
}

.section-title {
  margin-bottom: 50px;
}

.section-title.center-title {
  text-align: center;
}

.section-title.center-title h2:after {
  right: 0;
  margin: 0 auto;
}

.section-title span {
  color: #ffffff;
  display: block;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.section-title h2 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 25px;
}

.section-title h2:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 70px;
  background: #00bfe7;
  content: "";
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  box-shadow: -5px 5px 20px 0px rgba(0, 0, 0, 0.75);
}

.spad {
  padding-top: 85px;
  padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */
.primary-btn {
  display: inline-block;
  font-size: calc(1vw * 1);
  font-family: "Play", sans-serif;
  font-weight: 700;
  padding-inline: calc(1vw * 2.5);
  padding-block: calc(1vw * 1);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.primary-btn:hover:before,
.primary-btn:hover:after,
.services__title .primary-btn:hover:before,
.services__title .primary-btn:hover:after {
  height: 100%;
  width: 100%;
}


.primary-btn:before {
  position: absolute;
  left: 0;
  top: 0;
  height: calc(1vw * 2);
  width: calc(1vw * 2);
  border-left: calc(1vw * 0.15) solid #00bfe7;
  border-top: calc(1vw * 0.15) solid #00bfe7;
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}

.primary-btn:after {
  position: absolute;
  right: 0;
  bottom: 0;
  height: calc(1vw * 2);
  width: calc(1vw * 2);
  border-right: calc(1vw * 0.15) solid #00bfe7;
  border-bottom: calc(1vw * 0.15) solid #00bfe7;
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}

.site-btn {
  font-size: 15px;
  color: #ffffff;
  background: #00bfe7;
  font-family: "Play", sans-serif;
  font-weight: 700;
  border: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 14px 34px 12px;
  width: 100%;
}

.services__title .primary-btn {
  padding: 14px 32px 12px;
  font-size: 15px;
}

.services__title .primary-btn:before,
.services__title .primary-btn:after {
  height: 30px;
  width: 30px;
}

.services__title .primary-btn:before {
  border-left: 2px solid #00bfe7;
  border-top: 2px solid #00bfe7;
}

.services__title .primary-btn:after {
  border-right: 2px solid #00bfe7;
  border-bottom: 2px solid #00bfe7;
}


/* Preloder */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }

  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }

  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

/* The alert message box */
#modalContainer {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 10000;
  background-image: url(tp.png);
  /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.75);
  text-align: center;
  position: relative;
  width: 300px;
  height: 250px;
  margin-top: 200px;
  border-radius: 30px;
  background-color: #dccbff;
  background-repeat: no-repeat;
  background-position: 20px 30px;
}

#modalContainer>#alertBox {
  position: fixed;
}

#alertBox h1 {
  border-radius: 30px 30px 0px 0px;
  margin: 0;
  font: bold 0.9em verdana, arial;
  background-color: #152b50;
  color: #FFF;
  padding: 10px 0 10px 5px;
  font-weight: 100;
}

#alertBox p {
  font: 0.7em verdana, arial;
  height: 50px;
  padding-left: 5px;
  margin-left: 55px;
}

#alertBox img {
  height: 182px;
  width: 100%;
}

#alertBox #closeBtn {
  padding-top: 5px;
  height: 30px;
  display: block;
  position: absolute;
  border: 0 none;
  width: 100%;
  font: 0.7em verdana, arial;
  text-transform: uppercase;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: #152b50;
  text-decoration: none;
  bottom: 0px;
  border-radius: 0px 0px 30px 30px;
  transition: 0.5s;
}

#alertBox #closeBtn:hover {
  opacity: 0.5;
}

/* unrelated styles */

#mContainer {
  position: relative;
  width: 600px;
  margin: auto;
  padding: 5px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  font: 0.7em verdana, arial;
}

h1,
h2 {
  margin: 0;
  padding: 4px;
  font: bold 1.5em verdana;
}

code {
  font-size: 1.2em;
  color: rgb(0, 0, 0);
}

#credits {
  position: relative;
  margin: 25px auto 0px auto;
  width: 350px;
  font: 0.7em verdana;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  height: 90px;
  padding-top: 4px;
}

#credits img {
  float: left;
  margin: 5px 10px 5px 0px;
  border: 1px solid #000000;
  width: 80px;
  height: 79px;
}

.important {
  background-color: #5e117f;
  padding: 2px;
}

code span {
  color: green;
}

.full_height {
  height: 100%;
}

/*---------------------
  Header
-----------------------*/
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 12;
}

.header .container,
.header .container .row {
  height: 100%;
  width: 100%;
  max-width: none;
  padding-right: 10%;
  padding-left: 10%;
}

.header__logo {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 30px 0;
}

.header__logo a {
  display: inline-block;
  line-height: 45px;
}

.header__logo a {
  font-size: calc(1vw * 1.2);
}

.header__nav__option .header__nav__menu ul li a,
.header__nav__option .header__nav__social a i,
.header__nav__option .header__nav__social a i img {
  font-size: calc(1vw * 0.9);
}

.header__nav__option {
  text-align: right;
  padding: 36px 0px;
}

.header__nav__menu {
  display: inline-block;
  margin-right: calc(1vw * 3);
}

.header__nav__menu ul li {
  list-style: none;
  display: inline-block;
  margin-right: calc(1vw * 4);
  position: relative;
}

.header__nav__menu ul li.active a:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.header__nav__menu ul li:hover a:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.header__nav__menu ul li:hover .dropdown {
  top: 34px;
  opacity: 1;
  visibility: visible;
}

.header__nav__menu ul li:last-child {
  margin-right: 0;
}

.header__nav__menu ul li .dropdown {
  position: absolute;
  left: 0;
  top: 60px;
  width: 140px;
  background: #ffffff;
  text-align: left;
  padding: 2px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.header__nav__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}

.header__nav__menu ul li .dropdown li a {
  font-size: 14px;
  color: #111111;
  padding: 8px 20px;
  text-transform: capitalize;
}

.header__nav__menu ul li .dropdown li a:after {
  display: none;
}

.header__nav__menu ul li a {
  font-family: "Play", sans-serif;
  color: #ffffff;
  display: block;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
}

.header__nav__menu ul li a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #00bfe7;
  content: "";
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.header__nav__social {
  display: inline-block;
  position: relative;
  padding-left: calc(1vw * 3);
}

.header__nav__social:before {
  position: absolute;
  left: 0;
  top: 4px;
  height: 13px;
  width: 1px;
  background: rgba(225, 225, 225, 0.2);
  content: "";
}

.header__nav__social a {
  color: #ffffff;
  font-size: 15px;
  margin-right: calc(1vw * 1.3);
}

.header__nav__social .afa {
  margin-bottom: 50px;
}

.afa:hover {
  border-bottom: 1px solid white;
}

.header__nav__social a:last-child {
  margin-right: 0;
}

.slicknav_menu {
  display: none;
}

.owl-stage-outer,
.owl-stage {
  height: 100%;
}

.row_header {
  padding-inline: 7% !important;
}

/*---------------------
  Hero
-----------------------*/
label {
  color: white;
  font-size: 2rem;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px; 
  background: linear-gradient(to top, #100028 0%, transparent 100%);
  z-index: 1;
  pointer-events: none; 
}

.hero__slider {
  height: 100%;
  position: absolute;
  z-index: 11;
}

.hero__slider.owl-carousel .owl-item.active .hero__text span {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 90%;
  width: 100%;
  max-width: 1140px;
  margin-left: 15%;
}

.hero__slider.owl-carousel .owl-dots button {
  color: #adadad;
  font-size: calc(1vw * 1.2);
  font-family: "Play", sans-serif;
  margin-right: calc(1vw * 0.9);
  position: relative;
  display: inline-block;
}

.hero__slider.owl-carousel .owl-dots button.active {
  color: #ffffff;
}

.hero__slider.owl-carousel .owl-dots button.active:after {
  background: #ffffff;
  height: 2px;
}

.hero__slider.owl-carousel .owl-dots button:after {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
}

.hero__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.hero__item {
  height: 684px;
  padding-top: 15%;
}

.hero__item .container {
  margin-left: 15%;
}

.hero__text span {
  width: 99%;
  padding-left: 10px;
  color: #ffffff;
  display: block;
  font-size: calc(1vw * 0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.hero__text h2 {
  max-width: 50%;
  color: #ffffff;
  font-size: calc(1vw * 3.5);
  font-weight: 700;
  line-height: calc(1vw * 3.5);
  text-transform: uppercase;
  margin-bottom: 38px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.hero__text .primary-btn {
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}


.progress-bar-container {
  position: absolute;
  left: 28.5%;
  width: 85%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#progress-bar {
  width: 30%;
  margin-top: 0.5%;
  height: 2%;
}

#hero {
  aspect-ratio: auto 1247 / 531;
  height: 100%;
  z-index: 9;
  position: relative;
  /* background-image: linear-gradient(to bottom, #290066, #1f0556, #170847, #130637, #100028); */
}

#hero canvas {
  height: 85% !important;
  width: 85% !important;
  position: absolute;
  top: 15%;
  left: 28.5%;
  z-index: 10;
}


#profil-pic {
  border-radius: 100%;
  border: 5px solid #000;
  top: 10vw;
  right: 10vw;
  position: absolute !important;
  object-fit: fill;
  overflow: hidden;
  z-index: 99;
}

#profil-pic:hover {
  border: 5px solid #fff;
}

#profil1 {
  display: block;
}

#profil2 {
  display: none;
}

#profil1,
#profil2 {
  height: 100%;
  width: 100%;
}

#profil-pic:hover #profil1 {
  display: none;
}

#profil-pic:hover #profil2 {
  display: block;
}




/*---------------------
  Work
-----------------------*/
#skills {
  margin-top: -65px;
  z-index: 10;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

#projects {
  margin-inline: auto;
  margin-bottom: 40px;
  position: relative;
}

#projects,
#skills {
  padding: 10px 2px 10px 2px;
  text-align: center;
  width: 300px;
  cursor: pointer;
  color: white;
}

#projects::before,
#skills::before {
  content: "";
  position: absolute;
  left: 0;
  width: 30%;
  height: 6px;
  background-color: #fff;
  z-index: 2;
  animation: slideOut 0.5s ease forwards;
}

#skills::before{
    bottom: -40px;
}

#projects::before{
    bottom: -10px;
}


#projects.animate::before,
#skills.animate::before {
  animation: slideIn 0.5s ease forwards;
}



@keyframes slideIn {
  to {
    width: 100%;
    background-color: #00bfe7;
  }
}

@keyframes slideOut {
  from {
    width: 100%;
    background-color: #00bfe7;
  }

  to {
    width: 30%;
    background-color: #fff;
  }
}

#audi {
  background-color: #02172f;
  background-position: center;
  background-size: contain;
}

#audi:hover {
  background-size: 70% 60%;
}

#vlevents {
  background-position: center;
  background-color: #02172F;
  background-size: contain;
}

#gsbApp {
  background-position: 50% 45%;
  background-color: #02172f;
  background-position: center;
}

#portfolio {
  background-color: #02172f;
  background-position: center;
}

#portfolio:hover {
  cursor: pointer;
}

#matchApp {
  background-size: contain;
  background-color: #02172f;
  background-position: 50% 40%;
}

.work {
  padding-top: 35px;
  padding-bottom: 95px;
  background: #100028;
}

.work__gallery {
  margin-right: -10px;
  height: 643px;
}

.work__item {
  transition: 0.5s;
  cursor: pointer;
  height: 311px;
  width: calc(16.67% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.work__item__hover {
  justify-content: center;
  flex-direction: column;
  display: flex;
  height: 100px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: -110px;
  width: 100%;
  padding: 25px 30px 20px;
  transition: bottom 0.5s ease;
}

.work__item:hover .work__item__hover {
  bottom: -100px;
}

.work__item.wide__item:hover {
  height: 211px !important;
}

.work__item.large__item {
  height: 633px;
  width: calc(33.33% - 10px);
}

.work__item.large__item:hover {
  height: 533px;
}

.work__item.wide__item {
  width: calc(33.33% - 10px);
  height: 311px;
}

.work__item .play-btn {
  display: inline-block;
  color: #ffffff;
  font-size: 20px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.grid-sizer {
  width: calc(16.67% - 10px);
}

.work__item__hover h4 {
  font-size: 22px;
  color: #000000;
  font-weight: 700;
}

.work__item__hover ul li {
  font-weight: 700;
  color: #adadad;
  list-style: none;
  font-size: 16px;
  margin-right: 23px;
  position: relative;
  display: inline-block;
}

.work__item__hover ul li:after {
  position: absolute;
  right: -18px;
  top: 1px;
}

.work__item__hover ul li:last-child {
  margin-right: 0;
}

.work__item__hover ul li:last-child:after {
  display: none;
}


/*---------------------
  Services
-----------------------*/
.services {
  position: relative;
  background: #100028;
  padding-bottom: 100px;
}

.services__title p {
  margin-bottom: 45px;
}

.services__item {
  margin-bottom: 45px;
}

.services__item__icon:hover::after {
  transform: rotate(45deg);
}

.services__item h4 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-top: 26px;
  margin-bottom: 18px;
}

.services__item p {
  margin-bottom: 0;
}

.services__item__icon {
  padding: 0px 10px 10px 10px;
  position: relative;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
}

.services__item__icon:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #00bfe7;
  content: "";
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}


/*---------------------
 Counter
-----------------------*/


#counter {
  position: relative;
  width: 100%;
  background-color: #100028;
}

#counter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, #100028 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

#counter::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, #100028 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Image properties */

.container-image {
  height: calc(45.5vw);
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}


.carousel-image {
  flex-direction: column;
  display: flex;
  overflow: hidden;
  position: relative;
}


.image__slide {
  background-color: rgb(0, 0, 0);
  position: relative;
  height: calc(137vw);
  width: 100%;
  object-fit: cover;
  object-position: center center;
}



.timeline {
  top: 0;
  z-index: 3;
  flex-direction: column;
  display: flex;
  justify-content: center;
  right: 20%;
  position: absolute;
  height: calc(45.5vw);
  width: calc(0.5vw);
  background-color: #ffffff;
}

.timeline:before {
  transition-timing-function: ease-in-out;
  transition-property: height;
  transition-duration: var(--timeline-transition, 0.5s);
  content: "";
  position: absolute;
  background-color: #00bfe7;
  z-index: 2;
  height: var(--before-height, calc(12vw));
  width: calc(0.5vw);
  top: 0;
}

.dot__container {
  top: calc(-0.5vw);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  right: calc(0.2vw);
  width: calc(20vw);
  height: calc(26vw);


}

.slide {
  justify-content: space-between;
  height: calc(4vw);
  width: calc(21vw);
  right: calc(1.6vw);
  display: flex;
  position: relative;
  align-self: flex-start;
}


.slide:first-of-type .btn-lock::after {
  width: var(--after-width, calc(8.2vw));
}

.btn-lock::after {
  transition-timing-function: ease-out;
  transition-delay: var(--transition-delay, 0.5s);
  transition-duration: var(--transition-duration, 0.5s);
  width: var(--after-width, 0px);
  display: block;
  top: calc(1.9vw);
  z-index: 2;
  position: absolute;
  right: calc(3.98vw);
  content: "";
  background-color: #00bfe7;
  height: calc(0.4vw);
}


.container-preview {
  overflow: hidden;
  background: linear-gradient(90deg, #fff 0%, rgba(7, 92, 109, 1) 100%);
  width: calc(16vw);
  display: flex;
  justify-content: space-between;
  border: calc(0.40vw) solid #fff;
  border-radius: 22%;
  box-shadow: 0px 0px 15px 3px #000000;
}

.img-preview {
  padding-block: calc(0.5vw);
  width: calc(3vw);
  height: calc(3vw);
  height: 100%;
  border-right: calc(0.40vw) solid #fff;
  background-color: #fff;
}

.carousel-image.active {
  animation: smoothSlide 1s ease-in-out;
}

.preview {
  font-family: Jost;
  display: flex;
  align-items: center;
  font-size: calc(1.1vw);
  width: 100%;
  color: #fff;
  z-index: 2;
  cursor: pointer;
  position: relative;
  padding: 0;
  justify-content: center;
  background-color: #1f1f1f;
  border-top-right-radius: 22%;
  border-bottom-right-radius: 22%;
  box-shadow: inset 0px 0px 15px 3px #000000;
}

:root {
  --slide-destination: undefined;
  --slide-depart: undefined;
  --slide-stop-by: undefined;
}

@keyframes smoothSlide {
  0% {
    transform: translateY(var(--slide-depart));
  }

  40% {
    transform: translateY(var(--slide-stop-by));
  }

  100% {
    transform: translateY(var(--slide-destination));
  }
}

.slide:first-of-type .container-preview {
  border: calc(0.4vw) solid #00bfe7;
}

.slide:first-of-type .preview {
  border: calc(0.3vw) solid #075c6d;
}

.slide:first-of-type .img-preview {
  border-right: calc(0.4vw) solid #00bfe7;
}

.carousel {
  transition: transform var(--carousel-transition, 0.5s) ease;
  display: flex;
  overflow: hidden;
  width: calc(2vw * 17);
  height: calc(2vw * 12);
  position: absolute;
  right: 25%;
  top: calc(5.8vw);
}

.text {
  width: 90%;
  border: calc(1vw * 0.2) solid #00bfe7;
  padding: calc(1vw * 1);
  background-color: #1F1F1F;
  z-index: 2;
  opacity: 1;
  border-radius: calc(1vw * 1);
  position: absolute;
  color: #ffffff;
  transform: translateY(220%);
  transition: transform 1s ease;
}

.text.active {
  z-index: 3;
  transform: translateY(0);
}

.text .title {
  margin-bottom: calc(1vw);
  color: #00bfe7;
  font-size: calc(1vw * 2.05);
  font-family: Jost;
  font-weight: 700;
}

.text .description {
  margin-bottom: 0;
  line-height: calc(1.5vw);
  border-top: calc(0.2vw) solid #00bfe7;
  font-size: calc(1vw * 1.05);
  font-family: Jost;
  padding-left: calc(0.5vw * 1.05);
  padding-top: calc(1vw * 1.05);
  width: 90%;
  font-weight: 400;
}

/*---------------------
  Team
-----------------------*/
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  /* position: relative; */
  width: 262.5px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


ul {
  padding-left: 10px;
  list-style: none;
}

.centered:not(:nth-child(3)) ul li::before {
  content: "\2022";
  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: rgb(2, 2, 2);
  /* Change the color */
  font-weight: bold;
  /* If you want it to be bold */
  display: inline-block;
  /* Needed to add space between the bullet and the text */
  width: 1em;
  /* Also needed for space (tweak if needed) */
  margin-left: -1em;
  /* Also needed for space (tweak if needed) */
}

.centered:nth-child(3) ul li::before {
  content: "\2022";
  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: rgb(255, 255, 255);
  /* Change the color */
  font-weight: bold;
  /* If you want it to be bold */
  display: inline-block;
  /* Needed to add space between the bullet and the text */
  width: 1em;
  /* Also needed for space (tweak if needed) */
  margin-left: -1em;
  /* Also needed for space (tweak if needed) */
  /* Also needed for space (tweak if needed) */
}

.centered {
  padding-top: 10px;
}

#sanofiPasteur {
  background-size: contain;
  /* 75% 40% pour local / 75% 80% pour site web */
  background-position: center;
  background-color: #FFF;
}

#ucla {
  background-size: 90% 100%;
  background-color: #017DC3;
}

#implid-back {
  background-color: #012F3C;
  transform: rotateY(180deg);
}

#implid-back h3,
#sanofiPasteur-back h3 {
  font-size: 15px;
  text-decoration: underline;
  text-align: center;
}

#implid-back h2,
#implid-back li,
#implid-back h3 {
  color: #FFF;
}

#sanofiPasteur-back {
  background-color: #ffffff;
  transform: rotateY(180deg);
}

#sciencesU-back {
  background-color: #ffffff;
  transform: rotateY(180deg);
}

#ucla-back {
  background-color: #017DC3;
  transform: rotateY(180deg);
}

#implid {
  background-size: 90% 100%;
  background-color: #012F3C;
}

#ucla,
#ucla-back,
#sciencesU,
#sciencesU-back,
#implid,
#implid-back,
#sanofiPasteur,
#sanofiPasteur-back {
  position: absolute;
  width: 262.5px;
  height: 390px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}



.team {
  margin-top: -100px;
  margin-bottom: -100px;
  padding-bottom: 185px;
  border-radius: 0px;
  background-clip: padding-box;
  clip-path: polygon(0 12%, 100% 6%, 100% 88%, 0 94%);
  padding-top: 125px;
  background-image: url(../img/team-bg.webp) !important;
  background-attachment: fixed;
}

.team::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, #100028 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.team::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, #100028 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.team__background {
  position: relative;
  background-color: #100028;
}

.section-title.team__title {
  margin-bottom: 90px;
}

.team__item {
  border-radius: 30px;
  height: 390px;
  position: relative;
  overflow: hidden;
}

.team__item h2 {
  padding-top: 30px;
  text-align: center;
  font-size: 15px;
}

.team__item hr {
  border-top: 2px solid #000;
}

.team__item ul li {
  font-size: 15px;
  padding-left: 15px;
}

.team__item:hover .team__item__text,
.team__item:hover .sanofi {
  bottom: -10px;
}


.team__item.team__item--second {
  margin-top: -60px;
}

.team__item.team__item--third {
  margin-top: -120px;
}

.team__item.team__item--four {
  margin-top: -180px;
}

.team__item__text,
.sanofi {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -500px;
  width: 100%;
  padding: 50px 0 30px;
  z-index: 1;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.team__item__text:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: url(../img/team/team-hover.png);
  content: "";
  z-index: -1;
}

.sanofi:before {
  border: 0px solid transparent;
  position: absolute;
  left: 0;
  top: -10px;
  height: 100%;
  width: 100%;
  background: url(../img/team/team-hover.png);
  content: "";
  z-index: -1;
  border-radius: 0px;
  border-top: transparent;
  outline: none;
  display: block;
}

.team__item__text h4,
.sanofi h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.team__item__text h4:hover,
.sanofi h4:hover {
  text-decoration: underline;
}

.team__item__text p,
.sanofi p {
  color: #ffffff;
  font-weight: 300px;
  margin-bottom: 12px;
}

.team__item__text .team__item__social a {
  color: #ffffff;
  display: inline-block;
  font-size: 15px;
  margin-right: 18px;
}

.team__item__social button {
  background: none;
  border: none;
}

.team__item__text .team__item__social a:last-child {
  margin-right: 0;
}

.team__btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

/*---------------------
  Latest
-----------------------*/
.latest {
  background: #100028;
  padding-bottom: 80px;
}

.blog__item.latest__item {
  margin-bottom: 0;
}

.blog__item.latest__item p {
  font-weight: 400;
}

.blog__item:hover {
  border: 1px solid #222222 !important;
  background-color: #563D7C;
}

.blog__item:hover p,
.blog__item:hover h4,
.blog__item:hover ul li,
.blog__item:hover span,
.blog__item:hover a {
  color: #000;
}



.latest__slider {
  padding-bottom: 100px;
}

.latest__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}

.latest__slider.owl-carousel .owl-dots {
  text-align: center;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.latest__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}

.latest__slider.owl-carousel .owl-dots button.active {
  background: #00bfe7;
}

.latest__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

/*---------------------
  Call To Active
-----------------------*/

.creation {
  position: absolute;
  background-color: #100028;
  border: 5px solid #0A0119;
  height: 200px;
  margin: 0 auto;
  left: 0px;
  right: 0px;
  width: 200px;
  z-index: 2;
  animation-fill-mode: forwards;
  margin-top: 55px;
  /* keep the styles at the end of the animation */
  overflow: hidden;

}

.creation:hover {
  cursor: pointer;
}

.creation:before {
  bottom: -15px;
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  transform: translateX(-50%);
  border-radius: 40%;
  z-index: -1;
  left: 95px;
}

.creation:hover:before {
  background-color: #0A0119;
  animation: fill 2s ease-out;
}


@keyframes fill {
  from {
    top: 250px;
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    top: -40px;
    transform: translateX(-50%) rotate(360deg);
  }
}

.creation.animation-done {
  color: #000;
}

.creation p {
  text-align: center;
  line-height: 200px;
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
}


/*---------------------
  Footer
-----------------------*/
.footer {
  background: #0a0119;
}

.footer__top {
  padding: 30px 0;
}

.footer__top__logo {
  line-height: 40px;
}

.footer__top__logo a {
  display: inline-block;
}

.footer__top__social {
  text-align: right;
}

.footer__top__social a {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  height: 40px;
  width: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  line-height: 44px;
  text-align: center;
  margin-right: 6px;
}

.footer__top__social a:last-child {
  margin-right: 0;
}

.footer__option {
  padding-bottom: 35px;
  padding-top: 75px;
}

.footer__option__item {
  margin-bottom: 35px;
}

.footer__option__item h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 35px;
}

.footer__option__item p {
  font-weight: 300;
  margin-bottom: 20px;
}

.footer__option__item .read__more {
  font-size: 16px;
  color: #ffffff;
}

.footer__option__item .read__more span {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}

.footer__option__item ul li {
  list-style: none;
}

.footer__option__item ul li a {
  color: #adadad;
  font-size: 16px;
  font-weight: 300;
  line-height: 32px;
}

.footer__option__item form {
  position: relative;
}

.footer__option__item form input {
  height: 50px;
  width: 100%;
  padding-left: 20px;
  border: 1px solid #544E5E;
  background: transparent;
  font-size: 16px;
  color: #adadad;
}

.footer__option__item form input::-webkit-input-placeholder {
  color: #adadad;
}

.footer__option__item form input::-moz-placeholder {
  color: #adadad;
}

.footer__option__item form input:-ms-input-placeholder {
  color: #adadad;
}

.footer__option__item form input::-ms-input-placeholder {
  color: #adadad;
}

.footer__option__item form input::placeholder {
  color: #adadad;
}

.footer__option__item form button {
  font-size: 20px;
  color: #ffffff;
  border: none;
  height: 50px;
  width: 50px;
  background: #00bfe7;
  line-height: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}

.footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
}

.footer__copyright__text {
  margin-bottom: 0;
  font-weight: 300;
}

.footer__copyright__text i {
  color: #00bfe7;
}

.footer__copyright__text a {
  color: #00bfe7;
}

/*---------------------
  Breadcrumb
-----------------------*/
.breadcrumb-option {
  padding-top: 180px;
}

.breadcrumb__text h2 {
  color: #ffffff;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 12px;
}

.breadcrumb__links a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 300;
  display: inline-block;
  margin-right: 32px;
  position: relative;
}



.breadcrumb__links a:after {
  position: absolute;
  right: -22px;
  top: -3px;
  content: "/";
  color: #adadad;
  font-size: 20px;
}

.breadcrumb__links span {
  font-size: 16px;
  color: #adadad;
  font-weight: 300;
  display: inline-block;
}

/*---------------------
  About
-----------------------*/
.about {
  background: #100028;
  padding-bottom: 150px;
}

.about__pic__item {
  height: 235px;
  margin-right: -10px;
  margin-bottom: 20px;
}

.about__pic__item.about__pic__item--large {
  height: 490px;
}

.about__text {
  padding-left: 30px;
}

.about__text .services__item .services__item__icon:after {
  border-color: #281A3E;
}

.about__text__desc {
  margin-top: -10px;
}

/*---------------------
  Testimonial
-----------------------*/
.testimonial {
  padding-bottom: 60px;
}

.testimonial__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}

.testimonial__slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 35px;
}

.testimonial__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}

.testimonial__slider.owl-carousel .owl-dots button.active {
  background: #00bfe7;
}

.testimonial__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.testimonial__text {
  padding: 30px 40px 25px 30px;
  border: 1px solid #3D3A64;
  margin-bottom: 25px;
  position: relative;
  z-index: 9;
}

.testimonial__text P {
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  line-height: 30px;
  margin-bottom: 0;
}

.testimonial__author {
  padding-left: 30px;
}

.testimonial__author__pic {
  float: left;
  margin-right: 20px;
}

.testimonial__author__pic img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.testimonial__author__text {
  overflow: hidden;
}

.testimonial__author__text h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 8px;
}

.testimonial__author__text span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 300px;
  display: inline-block;
}


/*---------------------
  Services Page
-----------------------*/
.services-page {
  background: #100028;
  padding-bottom: 50px;
}

/*---------------------
  Logo
-----------------------*/
.logo {
  background: #100028;
  padding: 100px 20px;
}

.logo__carousel.owl-carousel .owl-item img {
  width: auto;
  display: inline-block;
}

/*---------------------
  Portfolio
-----------------------*/
.portfolio {
  background: #100028;
}


.portfolio__filter {
  text-align: center;
  margin-bottom: 40px;
}

.portfolio__filter li {
  list-style: none;
  font-size: 16px;
  color: #adadad;
  margin-right: 5px;
  display: inline-block;
  cursor: pointer;
  padding: 6px 22px;
}

.portfolio__filter li.active {
  border: 1px solid #00bfe7;
}

.portfolio__filter li:last-child {
  margin-right: 0;
}

.portfolio__item {
  margin-bottom: 35px;
}

.portfolio__item:hover .portfolio__item__text h4:after {
  opacity: 1;
}

.portfolio__item__video {
  height: 240px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 28px;
}

.three_d {
  height: 240px;
}

.portfolio__item__video .play-btn {
  display: inline-block;
  color: #ffffff;
  font-size: 20px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.portfolio__item__text {
  text-align: center;
}

.portfolio__item__text h4 {
  color: #ffffff;
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}

.portfolio__item__text h4:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #333;
  content: "";
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  opacity: 0;
}

.portfolio__item__text ul li {
  list-style: none;
  display: inline-block;
  font-size: 16px;
  font-weight: 300;
  margin-right: 24px;
  position: relative;
  color: #adadad;
}

.portfolio__item__text ul li:after {
  position: absolute;
  right: -16px;
  top: 0;
  content: "/";
}

.portfolio__item__text ul li:last-child {
  margin-right: 0;
}

.portfolio__item__text ul li:last-child:after {
  display: none;
}

.portfolio__item__text span {
  font-size: 16px;
  font-weight: 300;
  color: #adadad;
  display: block;
}

.portfolio__item__text h4 {
  text-decoration: none;
  border: none;
}


/* laptop properties */

#laptop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;

}

#laptopCanvas {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.pagination__option {
  text-align: center;
  padding-top: 20px;
}

.pagination__option.blog__pagi {
  padding-top: 5px;
}

.pagination__option .arrow__pagination {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  text-transform: uppercase;
}

.pagination__option .arrow__pagination.left__arrow {
  margin-right: 26px;
}

.pagination__option .arrow__pagination.right__arrow {
  margin-left: 18px;
}

.pagination__option .arrow__pagination span {
  opacity: 0.5;
}

.pagination__option .number__pagination {
  font-size: 18px;
  color: #ffffff;
  height: 50px;
  width: 50px;
  background: rgba(242, 242, 242, 0.1);
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
}

.adjustments {
  cursor: pointer;
}

.adjustments:hover {
  cursor: zoom-in;
}

.flex {
  display: flex;
}

.flex>.set-bg {
  box-shadow: none;
}

.cable1,
.cable2 {
  width: 50%;
}

.cable1 {
  border-right: 1px solid black;
}

.cable2 {
  border-left: 1px solid black;
}

#clean {
  position: relative;
  z-index: 1;
  transition: 0.5s ease;
  overflow: hidden;
}

#castel {
  position: relative;
  z-index: 1;
  transition: 0.5s ease;
  overflow: hidden;
}

/*---------------------
    Blog
-----------------------*/
.blog {
  background: #100028;
}

.blog__item {
  border: 1px solid #222222;
  padding: 40px 48px 35px 30px;
  position: relative;
  z-index: 1;
  margin-bottom: 45px;
}




.blog__item h4 {
  color: #ffffff;
  font-weight: 700;
  line-height: 31px;
  margin-bottom: 18px;
}

.blog__item ul {
  margin-bottom: 20px;
}

.blog__item ul li {
  color: #777777;
  list-style: none;
  font-size: 14px;
  font-weight: 300;
  margin-right: 25px;
  position: relative;
  display: inline-block;
}

.blog__item ul li:after {
  position: absolute;
  right: -16px;
  top: 0px;
  content: "/";
}

.blog__item ul li:last-child {
  margin-right: 0;
}

.blog__item ul li:last-child:after {
  display: none;
}

.blog__item p {
  font-weight: 300;
  line-height: 29px;
  margin-bottom: 22px;
}

.blog__item a {
  font-size: 16px;
  color: #ffffff;
}

.blog__item a span {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}

/*---------------------
  Blog Details Hero
-----------------------*/
.blog-hero {
  padding: 300px 0 230px;
}

.blog__hero__text {
  text-align: center;
}

.blog__hero__text h2 {
  color: #ffffff;
  font-weight: 700;
  line-height: 47px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.blog__hero__text ul li {
  font-size: 14px;
  color: #ffffff;
  font-weight: 300;
  list-style: none;
  display: inline-block;
  margin-right: 25px;
  position: relative;
}

.blog__hero__text ul li:after {
  position: absolute;
  right: -18px;
  top: 0;
  content: "/";
}

.blog__hero__text ul li:last-child {
  margin-right: 0;
}

.blog__hero__text ul li:last-child:after {
  display: none;
}

.blog__hero__text ul li span {
  text-transform: uppercase;
}

/*---------------------
  Blog Details
-----------------------*/
.blog-details {
  background: #100028;
}

.blog__details__text {
  margin-bottom: 30px;
}

.blog__details__text p {
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
}

.blog__details__text p:last-child {
  margin-bottom: 0;
}

.blog__details__quote {
  border: 1px solid rgba(225, 225, 225, 0.8);
  padding: 35px 90px 35px 40px;
  position: relative;
  margin-bottom: 35px;
}

.blog__details__quote p {
  font-size: 22px;
  font-weight: 300;
  line-height: 35px;
  font-style: italic;
  margin-bottom: 10px;
}

.blog__details__quote h6 {
  font-size: 15px;
  color: #adadad;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
}

.blog__details__quote i {
  font-size: 36px;
  color: #00bfe7;
  position: absolute;
  right: 30px;
  bottom: 25px;
}

.blog__details__desc {
  margin-bottom: 50px;
}

.blog__details__desc p {
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
}

.blog__details__desc p:last-child {
  margin-bottom: 0;
}

.blog__details__tags {
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 65px;
}

.blog__details__tags span {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  font-weight: 300;
  margin-right: 25px;
}

.blog__details__tags a {
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  display: inline-block;
  margin-right: 11px;
  padding: 8px 15px 7px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.blog__details__option {
  margin-bottom: 40px;
}

.blog__details__option__item {
  margin-bottom: 30px;
  overflow: hidden;
  display: block;
}

.blog__details__option__item h5 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.blog__details__option__item h5 i {
  font-size: 18px;
  margin-right: 5px;
}

.blog__details__option__item.blog__details__option__item--right h5 {
  text-align: right;
}

.blog__details__option__item.blog__details__option__item--right h5 i {
  margin-right: 0;
  margin-left: 5px;
}

.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__img {
  float: right;
  margin-right: 0;
  margin-left: 25px;
}

.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__text {
  margin-right: 25px;
  text-align: right;
  float: none;
}

.blog__details__option__item__img {
  float: left;
  margin-right: 25px;
}

.blog__details__option__item__text {
  overflow: hidden;
}

.blog__details__option__item__text h6 {
  color: #ffffff;
  line-height: 21px;
  font-weight: 700;
  margin-bottom: 5px;
}

.blog__details__option__item__text span {
  font-size: 14px;
  color: #777777;
  font-weight: 300;
}

.blog__details__recent {
  margin-bottom: 60px;
}

.blog__details__recent h4 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}

.blog__details__recent__item {
  margin-bottom: 30px;
}

.blog__details__recent__item img {
  min-width: 100%;
  margin-bottom: 20px;
}

.blog__details__recent__item h5 {
  color: #ffffff;
  font-weight: 700;
  line-height: 23px;
  margin-bottom: 4px;
}

.blog__details__recent__item span {
  color: #777777;
  font-size: 14px;
  font-weight: 300;
}

.blog__details__comment h4 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}

.blog__details__comment form textarea {
  height: 120px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
}

.blog__details__comment form textarea:placeholder {
  color: #adadad;
}

.input__list {
  margin-right: -20px;
  overflow: hidden;
}

.input__list input {
  height: 50px;
  width: calc(33.33% - 20px);
  float: left;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
}

.input__list input:placeholder {
  color: #adadad;
}

/*---------------------
  Contact Widget
-----------------------*/
.contact-widget {
  background: #100028;
  padding-bottom: 70px;
}

.contact__widget__item {
  margin-bottom: 30px;
}

.contact__widget__item__icon {
  height: 70px;
  width: 70px;
  border: 1px solid rgba(225, 225, 225, 0.5);
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  float: left;
  margin-right: 30px;
}

.contact__widget__item__icon i {
  font-size: 30px;
  color: #ffffff;
}

.contact__widget__item__text {
  overflow: hidden;
  padding-top: 7px;
}

.contact__widget__item__text h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}

.contact__widget__item__text p {
  margin-bottom: 0;
}

/*---------------------
  Contact
-----------------------*/
.contact {
  background: #100028;
  padding-top: 0;
  overflow: hidden;
}

.contact__map {
  height: 450px;
}

.contact__map iframe {
  width: 100%;
}

.contact__form h3 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
}

.contact__form form input {
  height: 50px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.contact__form form input:placeholder {
  color: #adadad;
}

.contact__form form input:focus {
  border-color: #e1e1e1;
}

.contact__form form textarea {
  height: 110px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.contact__form form textarea:placeholder {
  color: #adadad;
}

.contact__form form textarea:focus {
  border-color: #e1e1e1;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media all and (min-width: 3000px) {
  .centered {
    padding-top: 4.5vw;
  }
}

@media all and (min-width: 1537px) {
  .header {
    height: calc(1vw * 6.9);
  }


  #profil-pic {
    width: 23vw;
    height: 23vw;
    border: 0.3vw solid #000;
  }

  #profil-pic:hover {

    border: 0.3vw solid #fff;
  }


  .spad:first-of-type {
    padding-top: 6.5vw;
  }

  .latest {
    padding-bottom: 6vw;
  }

  .services {
    padding-bottom: 4.5vw;
  }

  .container {
    max-width: 61vw !important;
  }

  .section-title {
    margin-bottom: 2.8vw;
  }

  .section-title span {
    font-size: 0.9vw;
  }

  .section-title h2 {
    font-size: 1.2vw;
    padding-bottom: 1.3vw;
  }

  .section-title h2:after {
    width: 4vw;
    height: 0.3vw;
  }

  .services__item__icon {
    width: 3.4vw;
    height: 3.4vw;
    line-height: 3.4vw;
    padding: 0px 0.15vw 0.15vw 0.15vw;
  }


  .services__item__icon img {
    width: 75%;
    height: 75%;
  }

  .services__item__icon:after {
    border: 0.15vw solid #00bfe7;
  }

  .services__item h4 {
    font-size: 1.15vw;
    margin-top: 1.4vw;
    margin-bottom: 1.2vw;
  }

  .services__title p {
    margin-bottom: 2.3vw;
  }

  .services__item p,
  p {
    margin-bottom: 2.5vw;
    font-size: 0.83vw;
    line-height: 1.3vw;
  }

  .services__title .primary-btn {
    font-size: 0.78vw;
    padding: 0.7vw 1vw 0.7vw;
    width: 13vw;
  }

  .services__title .primary-btn:before {
    border-left: 0.18vw solid #00bfe7;
    border-top: 0.18vw solid #00bfe7;
  }

  .services__title .primary-btn:after {
    border-right: 0.18vw solid #00bfe7;
    border-bottom: 0.18vw solid #00bfe7;
  }

  .services__title .primary-btn:before,
  .services__title .primary-btn:after {
    height: 1.5vw;
    width: 1.5vw;
  }


  #skills,
  #projects {
    font-size: 1.5vw;
    width: 15vw;
    height: 2.8vw;
  }

  #projects {
    margin-bottom: 2vw;
  }

  #skills {
    margin-top: -4vw;
  }

  #projects::before,
  #skills::before {
    height: 0.25vw;
  }

  .work {
    padding-top: 3vw;
  }

  .work__gallery {
    height: 33.5vw !important;
  }

  .work__item.large__item {
    height: 100%;
  }

  .work__item.wide__item {
    height: 50%;
    top: 50%;
  }

  .work__item.wide__item:hover {
    height: 35% !important;
  }

  .work__item.large__item:hover {
    height: 85.5% !important;
  }

  .work__item:hover .work__item__hover {
    bottom: -4.8vw;
  }

  .work__item__hover {
    height: 5vw;
    bottom: -6vw;
    padding: 1vw 1.5vw 1vw;
  }

  .work__item__hover h4 {
    font-size: 1vw;
    height: 2vw;
  }

  .work__item__hover ul li {
    font-size: 0.75vw;
  }

  #audi,
  #audi:hover {
    background-size: contain;
  }

  .team__background {
    height: 45vw;
  }

  .team.spad {
    height: 100%;
  }

  .flip-card {
    width: 13vw;
    height: 20.3vw;
    perspective: 50vw;
  }

  .flip-card-inner {
    width: 100%;
  }

  .team__item.team__item--second {
    margin-top: -2.5vw;
  }

  .team__item.team__item--third {
    margin-top: -5vw;
  }

  .team__item.team__item--four {
    margin-top: -7.5vw;
  }

  #ucla,
  #ucla-back,
  #sciencesU,
  #sciencesU-back,
  #implid,
  #implid-back,
  #sanofiPasteur,
  #sanofiPasteur-back {
    height: 20.3vw;
    width: 100%;
  }

  #implid-back h3,
  #sanofiPasteur-back h3 {
    font-size: 0.9vw;
  }


  .team__item {
    border-radius: 1.5vw;
  }

  .team__item h2 {
    padding-top: 1.5vw;
    font-size: 1vw;
  }

  .team__item ul li {
    font-size: 0.75vw;
  }

  ul {
    padding-left: 1.25vw;
  }

  .team__item hr {
    border-top: 0.2vw solid #000;
  }

  hr {
    margin-block: 0.5vw;
  }

  .team__item__social button i,
  .team__item__social i {
    font-size: 1vw;
  }

  .team__item__text h4,
  .sanofi h4 {
    font-size: 1.1vw;
    margin-bottom: 0.5vw;
  }

  .team__item__text:before,
  .sanofi:before {
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  }

  .team__item__text,
  .sanofi {
    padding-block: 1vw;
  }


  .blog__item {
    padding: 2vw 2.5vw 1.75vw 1.5vw;
  }

  .blog__item h4 {
    font-size: 1.2vw;
    line-height: 1.4vw;
  }

  .blog__item p {
    line-height: 1.4vw;
  }

  .blog__item ul li,
  .blog__item a,
  .blog__item a span {
    font-size: 0.9vw;
  }

  .blog__item a span {
    top: 0.2vw;
    margin-left: 0.2vw;
  }

  .latest__slider.owl-carousel .owl-dots button {
    height: 0.6vw;
    width: 0.6vw;
  }

  .latest__slider.owl-carousel .owl-dots button {
    margin-right: 0.4vw;
  }

  .creation {
    width: 10vw;
    height: 10vw;
    margin-top: 0;
    border: 0.25vw solid #0A0119;
  }

  .creation:before {
    width: 20vw;
    height: 20vw;
    left: 5vw;
  }

  .creation p {
    font-size: 0.9vw;
    height: 100%;
    display: grid;
    align-items: center;
    margin-bottom: 0;
  }


  .footer {
    height: 19vw;
  }

  .footer__top {
    padding-block: 1.5vw;
  }

  .footer__option__item h5 {
    font-size: 0.95vw;
    margin-bottom: 1.75vw;
  }

  .footer__option__item a {
    font-size: 0.8vw;
  }

  .footer__top__social a {
    height: 2vw;
    width: 2vw;
  }

  .footer__top__social a i {
    font-size: 2vw;
    transform: scale(0.5);
  }

  #leetcode_icon {
    height: 2.1vw !important;
    margin-top: -0.4vw !important;
  }

  @keyframes fill {
    from {
      top: 15vw;
      transform: translateX(-50%) rotate(0deg);
    }

    to {
      top: -2vw;
      transform: translateX(-50%) rotate(360deg);
    }
  }

}



/* Setting fixed value for smaller device than mine (1535px) */
@media all and (max-width: 1535px) {
  .hero__item {
    padding-top: 200px;
  }

  .hero__text span {
    padding-left: 0px;
    font-size: 15px;
  }

  .header__logo a {
    font-size: 15px;
  }

  .hero__text h2 {
    max-width: 100%;
  }

  .primary-btn {
    padding: 14px 32px 12px;
    font-size: 15px;
  }

  .primary-btn:before {
    border-left: 2px solid #00bfe7;
    border-top: 2px solid #00bfe7;
  }

  .primary-btn:after {
    border-right: 2px solid #00bfe7;
    border-bottom: 2px solid #00bfe7;
  }

  .primary-btn:before,
  .primary-btn:after {
    height: 30px;
    width: 30px;
  }

  .hero__slider.owl-carousel .owl-dots button {
    font-size: 18px;
    margin-right: 16px;
  }

  .header__nav__menu {
    margin-right: 45px;
  }

  .header__nav__social {
    padding-left: 50px;
  }

  .header__nav__menu ul li {
    margin-right: 45px;
  }

  .header__logo a {
    font-weight: 700;
    font-size: 17px;
  }

  .header__nav__option .header__nav__menu ul li a,
  .header__nav__option .header__nav__social a i,
  .header__nav__option .header__nav__social a i img {
    font-size: 16px;
  }

  .fa img {
    height: 18px !important;
  }

  #hero {
    aspect-ratio: auto;
    height: 589px;
  }

  #profil-pic {
    transform: scale(0.7);
    top: 8vw;

  }


}


/* portfolio section */
@media only screen and (max-width: 1450px) and (min-width: 1160px) {
  #portfolio {
    background-size: 90% 90%;
  }


}

@media only screen and (max-width: 1160px) and (min-width: 1100px) {
  #portfolio {
    background-size: 95% 75%;
  }
}

@media only screen and (max-width:1100px) and (min-width:910px) {
  #portfolio {
    background-size: 85% 65%;
  }
}

@media only screen and (max-width:910px) and (min-width:830px) {
  #portfolio {
    background-size: 105% 65%;
  }
}

@media only screen and (max-width:830px) and (min-width:765px) {
  #portfolio {
    background-size: 110% 60%;
  }
}

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

  .progress-bar-container,
  #hero canvas {
    left: 22%;
  }
}

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


  .d-flex {
    display: block !important;
    background-color: #100028;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .callto_one,
  .callto_two {
    width: 60%;
    margin: 0 auto;
    border-left: 2px solid #FFF;
    border-right: 2px solid #FFF;

  }

  .callto_one {
    border-bottom: 1px solid #FFF;
    border-top: 2px solid #FFF;
  }

  .callto_two {
    border-top: 1px solid #FFF;
    border-bottom: 2px solid #FFF;
  }

  .creation {
    margin-top: -80px;
  }


}


@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }

  body {
    overflow-x: hidden;
  }

}

/* 3D item */

@media all and (min-width: 1180px) {
  .hero__text h2 {
    max-width: 50%;
  }


}

@media all and (max-width: 1180px) {



  #progress-bar,
  .progress-bar-container,
  .progress-bar-container label {
    display: none;
  }

  #hero canvas {
    display: none !important;
  }

  .hero,
  .vanta-canvas {
    height: 800px !important;
  }

  #profil-pic {
    top: 42%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
  }
}


/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  body {
    overflow-x: hidden;
  }

  .flip-card {
    scale: 0.8;
  }

  .header__nav__menu {
    margin-right: 25px;
  }

  .header__nav__menu ul li {
    margin-right: 25px;
  }

  .header__nav__social {
    padding-left: 25px;
  }

  .team>.container {
    padding-left: 15px;
    padding-right: 90px;
  }

  ** .hero__slider.owl-carousel .owl-dots {
    max-width: 930px !important;
  }

  .team__item {
    height: 300px;
    /* width: 215px; */
  }


  #gsbApp {
    background-size: 95% 90%;
  }

}

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

  .icons_responsive {
    display: inline-flex !important;
  }

  .icons {
    display: none;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 10px 30px;
  }

  .slicknav_nav .slicknav_row,
  .slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: #ffffff;
    font-weight: 600;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav {
    background: #222222;
  }

  .slicknav_btn {
    position: absolute;
    right: 10px;
    top: 26px;
    background: #00bfe7;
  }

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }
}

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

  .hero__slider.owl-carousel .owl-dots {
    width: 85%;
  }

  .work {
    padding-bottom: 50px;
  }

  .team {
    clip-path: polygon(0 9%, 100% 6%, 100% 91%, 0 94%);
    margin-top: -50px;
    margin-bottom: -50px;
    padding-top: 175px;
    background-image: url(../img/team-bg-resp.webp) !important;
  }

  .team>.container>.row:first-of-type {
    height: 150px;
  }

  .work__item__hover {
    bottom: -116px;
  }

}


/* Tablet Device = 768px */
@media only screen and (min-width: 765px) and (max-width: 992px) {

  .team>.container {
    padding-left: 58px;
  }

  .container {
    margin: auto;
  }

  .flip-card {
    margin-bottom: 90px;
  }

  #gsbApp {
    background-size: 100% 80%;
  }

  #implid {
    background-position: center;
    background-size: contain;
    background-color: #012F3C;
  }

  #ucla {
    background-size: 80%;
    background-color: #017DC3;
    background-position: center;
  }

  .col-lg-3 .col-md-6 {
    padding-right: 0px;
  }

  .marg2 .marg4 {
    padding-right: 0px;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: 690px !important;
  }

  .services__title {
    margin-bottom: 50px;
  }

  .team__item {
    height: 525px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 10px;
  }

  .team__item.team__item--four {
    margin-top: 10px;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
    padding-left: 40px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .portfolio__filter li {
    padding: 6px 15px;
  }

}


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

  body {
    overflow-x: hidden;
  }

  .callto_one,
  .callto_two {
    width: 85%;

  }

  .team>.container {
    padding-left: 0px;
  }

  .container {
    margin: auto;
  }

  .flip-card {
    margin-bottom: 100px;
  }


  .container-image {
    overflow: visible;
  }

  .timeline,
  .container-image,
  .dot__container,
  .carousel {
    height: calc(180vw);
  }

  .carousel {
    overflow: visible;
    flex-direction: column;
    top: 0;
    justify-content: space-around;
    right: 39%;
  }


  .text.active {
    transform: scale(1.9);
  }

  .text {
    transform: translateY(0);
    position: relative;
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.75);
  }

  .text .description {
    line-height: calc(2.2vw);
    font-size: calc(1vw * 1.55);
  }

  .timeline:before {
    transition: height 1s;
    height: var(--before-height, calc(20vw));
  }

  .btn-lock::after {
    width: var(--after-width, calc(8vw));
  }

  .services__title {
    margin-bottom: 50px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 0;
  }

  .team__item.team__item--four {
    margin-top: 0;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: auto;
    padding: 0 15px;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 10px 30px;
  }

  .slicknav_nav .slicknav_row,
  .slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: #ffffff;
    font-weight: 600;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav {
    background: #222222;
  }

  .slicknav_btn {
    position: absolute;
    right: 10px;
    top: 26px;
    background: #00bfe7;
  }

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }

  .hero__text h2 {
    font-size: 20px;
    line-height: 30px;
    padding: 0px;
  }

  .grid-sizer {
    width: calc(50% - 10px);
  }

  .work {
    padding-top: 70px;
  }

  .work__item.wide__item {
    width: calc(50% - 10px);
  }

  .work__item {
    width: calc(50% - 10px);
  }

  .work__item.large__item {
    width: calc(50% - 10px);
  }

  .footer__top__social {
    text-align: left;
    padding-top: 30px;
  }

  .portfolio__filter li {
    margin-bottom: 10px;
  }

  .input__list {
    margin-right: 0;
  }

  .input__list input {
    width: 100%;
    margin-right: 0;
  }

  .contact__map {
    margin-bottom: 40px;
  }

  .team__item {
    margin-bottom: 20px;
  }

  .about__pic__item {
    margin-right: 0;
  }

  .blog__details__quote {
    padding: 30px 45px 35px 35px;
  }

  .creation {
    scale: 0.9;
  }

  #gsbApp {
    background-size: 90% 80%;
  }

  #portfolio {
    background-size: 80% 60%;
  }

  #implid {
    background-position: center;
    background-size: contain;
    background-color: #012F3C;
  }

  #ucla {
    background-size: 80%;
    background-color: #017DC3;
    background-position: center;
  }



}


/* Wide Mobile = 480px */
@media only screen and (min-width: 480px) and (max-width: 575.5px) {

  #gsbApp {
    background-size: 100% 65%;
  }

  #portfolio {
    background-size: 80% 50%;
  }

}



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

  .team {
    margin-top: -45px;
    margin-bottom: -45px;
  }

  .team.spad {
    padding-top: 225px;
  }

  .team .container .row:first-of-type {
    height: 150px;
  }

  .flip-card {
    margin-bottom: 120px;
  }

  .section-title.team__title {
    padding-left: 40px;
  }


  .centered {
    margin: auto;
    width: 290px;
  }

  .container {
    margin: auto;
  }

  .set-bg {
    background-size: cover;
  }


  .creation {
    scale: 0.8;
    margin-top: -115px;
  }

  #skills,
  #projects {
    width: 185px;
    font-size: 17px;
  }

  #projects::before,
  #skills::before {
    height: 5px;
  }

  #sciencesU {
    background-color: white;
    background-position: center;
    background-size: 65%;
  }

  #ucla {
    background-color: #017DC3;
    background-position: center;
    background-size: 65%;
  }

  #implid {
    background-color: #012F3C;
    background-position: center;
  }

  #sanofiPasteur {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
  }

  #portfolio {
    background-size: 95% 50%;
  }

}

@media all and (max-width: 575px) {

  .portfolio__item__video,
  .three_d {
    height: 390px;
  }
}



/* Small Device = 320px */
@media only screen and (max-width: 479px) {

  .image__slide {
    width: 105%;
  }

  .grid-sizer {
    width: 100%;
  }

  .work__item.wide__item {
    width: 100%;
  }

  .work__item {
    width: 100%;
    margin-right: 0;
  }

  .work__item.large__item {
    width: 100%;
  }

  .work__gallery {
    margin-right: 0;
  }

  .pagination__option .arrow__pagination.left__arrow {
    margin-right: 15px;
  }

  .pagination__option .arrow__pagination.right__arrow {
    margin-left: 10px;
  }

  .blog__details__quote {
    padding: 30px 40px 35px 35px;
  }

  #gsbApp {
    background-size: 80% 80%;
  }

  #portfolio {
    background-size: 90% 80%;
  }

}

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


  #portfolio {
    background-size: 85% 60%;
  }

  .hero__item .container {
    margin-left: 5%
  }

  #profil-pic {
    top: 50%;
    width: 300px;
    height: 300px;
  }

}

@media all and (max-width: 380px) {
  .hero__text h2 {
    max-width: 90%;
  }

  .hero__text span {
    width: 85%;
  }

  .work__item__hover {
    padding: 25px 5px 10px;
  }

  #projects,
  #skills {
    width: 235px !important;
  }

  #profil-pic {
    top: 55%;
    width: 250px;
    height: 250px;
  }
}