/* COLOR TURQUESA #3bfdff */
/* COLOR GRIS #202023 */
/* NEW COLOR BACKGROUND MAS CLARO  rgba(100,200,255,0.2);*/
body{
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    /*background: rgb(29, 28, 28);*/
    background: #202023;
    max-width: 3840px;
    margin: 0 auto;
}
@font-face {
    font-family: 'Agency-Regular';
    src:url('../font/agencyr.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Agency-Bold';
    src:url('../font/agencyb.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Graphik-Medium';
    src:url('../font/Graphik-Medium.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Graphik-Light';
    src:url('../font/Graphik-Light.ttf')format('truetype');
    font-weight: normal;
    font-style: normal; 
}
@font-face {
    font-family: 'Graphik-Regular';
    src:url('../font/Graphik-Regular.ttf')format('truetype');
    font-weight: normal;
    font-style: normal; 
}
@font-face {
    font-family: 'Gilroy-ExtraBold';
    src:url('../font/Gilroy-ExtraBold.otf')format('opentype');
    font-weight: normal;
    font-style: normal; 
}


/*@font-face{
    font-family:staff-wide;
    src:url(../font/st.woff2)
    format("woff2"),
    url(../font/st.woff)
    format("woff");
    font-weight:400}

@font-face{
    font-family:staff-x-wide;
    src:url(../font/stx.woff2)format("woff2"),
    url(../font/stx.woff)format("woff");
    font-weight:400}
@font-face{
    font-family:mnrp;
    src:url(../font/mnr.woff2) format("woff2"),
    url(../font/mnr.woff) format("woff");
    font-weight:400}*/


*{
    padding:0;margin:0;
    text-decoration: none;
    box-sizing: border-box;
     
}
html {scroll-behavior: smooth}
/* NEW STYLES *//* NEW STYLES *//* NEW STYLES *//* NEW STYLES *//* NEW STYLES *//* NEW STYLES *//* NEW STYLES *//* NEW STYLES *//* NEW STYLES */

.sRHomeMobile {
    display: none;

    position: absolute;
    
    left: 0;
    right: 0;
    margin: auto;
    bottom: 35px;
    color: #3bfdff;
    
    font-size: 15px;
    z-index: 90;
    font-family: Agency-Regular;
    letter-spacing: 2px;
}

    
#menuSecundario {
   /* border:4px solid green;*/
}
.cl {
  border-bottom: 1px dotted;
}

.slidecontainer {
  width: 100%;
  position: absolute;
  bottom: 80px;
  z-index: 99999;
}
.buttonMenuHomeInter {
        text-align: left;
            position: relative;
}
.buttonMenuHomeInter img{

  width: 6%;
    opacity: 0.8;
    cursor: pointer;
}

.buttonMenuHomeInter img:nth-child(2) {
  margin-left: 10px;
}
#interSha {}
.slider {
-webkit-appearance: none;
    width: 100%;
    height: 2px;
    border-radius: 5px;
    background: white;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.opaMen {
    text-transform: uppercase;
  
    font-size: 14px;
    color: white;
    font-family: Dosis;
    text-align: left;
}
.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #3bfdff;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #3bfdff;
  cursor: pointer;
}


.blackEfect{
    background: rgba(0,0,0,0.7);
    position: absolute;
    width: 100%;
    height: 100vh;
    opacity: 0.5;
}

.negroTitles {
  position: absolute;
  width: 100%;
  height: 35vh;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
  z-index: 10;
  opacity: 1;
}

.homevideo {border-right: 1px dotted white;
    padding-right: 6px;}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
                                 
}
.nopointer { pointer-events:none;}

.mobileSociales {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* bottom: 100px; */
    /* position: relative; */
    background: rgb(48,48,48);
    padding-top: 50px;
    /* margin-top: 50px;*/
    
}

.mobileSociales a{
    max-width: 24px;
    max-height: 24px;
    margin: 15px;
}

.allr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* bottom: 100px; */
    /* position: relative; */
    /* margin-top: 150px; */
    background: rgb(48,48,48);
    padding-top: 50px;
    padding-bottom: 100px;
    color: white;
    font-family: Rajdhani;
    font-size: 13px;
    
}

.firstWordMobile {
      /* font-weight: 600; */
    font-size: 26px;
    /* letter-spacing: 6px; */
    /* border-right: 1px dotted black; */
    display: block;
        margin-bottom: -5px;
    /* text-align: left; */
    /* -webkit-text-stroke-width: .075rem; */
    /* -webkit-text-stroke-color: rgba(0,0,0,0.3); */
    /* color: transparent;*/
}
.firstWordMobile2 {
      /* font-weight: 600; */
    font-size: 22px;
    /* letter-spacing: 6px; */
    /* border-right: 1px dotted black; */
    display: block;
    /* text-align: left; */
    /* -webkit-text-stroke-width: .075rem; */
    /* -webkit-text-stroke-color: rgba(0,0,0,0.3); */
    /* color: transparent;*/
}
.mtopSp {
    margin-top: 20px;
}
#drd-menuMobile {
display: block;
    width: 100vw;
    height: 100vh;
    background-color: #e5e0db;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;

     transform: translateY(-130%);

  
}


.butMobile {
  font-family: Agency-Regular;
    font-size: 16px !important;
    text-transform: uppercase;
    /* flex: 50%; */
    /* height: 50px; */
    /* width: 50%; */
    /* align-items: end; */
    padding: 1.1vh 0px;
    /* padding-left: 25px; */
    /* border-bottom: 1px dotted; */
    /* letter-spacing: 2.5px; */
    text-decoration: none !important;
    color: rgba(0,0,0,0.75);
        overflow: hidden;
}

.butMobile div { transform: translateY(80px);}
/*.butMobile span { opacity: 0; }*/
.sPerM { font-size: 16px !important;}
.mobilMen {
    width: 100%;
    height: 70%;
    top: 14%;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    /* border-right: 1px solid grey; */
    text-align: center;
    position: absolute;
    display: flex;
    flex-direction: column;
}
.datos{
   width: 80%;
    position: absolute;
    top: 0;
    left: 40%;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 20px;
/*    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;*/

    height: 250px;
    text-align: left;
    color: white;
    font-family: Dosis;
     font-weight: 800;
}
.datos div {    padding: 8px 0px;}
.datosTx {    font-size: 17px;
    font-weight: 100;
    max-width: 550px;
    padding-top: 30px !important;
    border-top: 1px solid #3bfdff;
    margin-top: 20px;}
.datosNa{   
   
    letter-spacing: 30px;
}

.datosTl{  letter-spacing: 10px; }

    
.datosAd, .datosAd2{    
    letter-spacing: 10px;}


.lastTendences {
   position: absolute;
    right: 85px;
    top: 10px;
    letter-spacing: 1px;
    font-size: 15px;
    color: #FFF;
    font-family: 'Agency-Regular';
    display: flex;


}
#loader{position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 0vw;
height: 0vh;
/*background-color: #202023;*/
background-color: black;

z-index: 98;
opacity: 0;

pointer-events: none;
transform-origin: center center;
}
.loaderAnim {
  animation-name: loaderA;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}


@keyframes loaderA {
  0% {opacity: 0;}
  100% {opacity: 1; width: 100vw;
height: 100vh;
background-color: #202023; }
}


.ltArrow {
   width: 15px;
    height: 15px;
    /* border: 1px solid red; */
    display: block;
    margin-right: 15px;


}
.ltArrow img{
  width: 100%;

}
.lastTendences a{
     color: #3bfdff ;
    text-decoration: none !important;
    margin-left: 10px;
   
}
.lastTendences a:hover{
   
     animation: animHoverMenuParpa 1s;
     animation-fill-mode: forwards;
}

 @keyframes animHoverMenuParpa{
    0%{opacity: 0;}
    4%{opacity: 1;}
    10%{opacity: 0.5;}
    12%{opacity: 0.9;}
    15%{opacity: 0;}
    100%{opacity: 1; color:#3bfdff;}
    

}
#cargaVideosVideo{
     position: absolute;
    left: 0%;
    bottom: 50%;
    right: 0%;
    top: 50%;
    z-index: 100;
    margin: auto;
    width: 70%;
    max-width: 1280px;
    max-height: 720px;

    opacity: 0;
    display: none;
}

#cargaVideosClose{
    position: absolute;
    width: 59px;
   
    margin: auto;
    right: 4%;
    top: 5%;
    display: inline-block;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity .5s ease-in-out;
}
#cargaVideosClose:hover {
    opacity: 1;
}
.centerDRD{

    display: inline-block;
    max-width: 1280px;
    margin: 0 auto;

    height: auto;

    top: 50% !important;
    -ms-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
}
.contactBlue {
    color: #3bfdff !important;
}
.deactivate{
   pointer-events: none !important;
   opacity: 0 !important;
}
.list-textEnlace{
    cursor: pointer !important;
    color: white;

}
.list-textEnlace:hover{
    
    animation: animHoverMenuParpa 1s;
     animation-fill-mode: forwards;
    
}
/* CONTACT GLOBAL */
#contactGlobal {
    width: 100vw;
    height: 100vh;
    
    background-color: rgba(29,28,28,1);
    position: absolute;
    z-index: 100000;
    top: 0px;
    left: 0px;
  
    transform: translateY(-130%);
  
}
#contactClose {
    position: absolute;
    width: 59px;
   
    margin: auto;
    right: 4%;
    top: 5%;
    display: inline-block;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity .5s ease-in-out;
}

#contactClose:hover {
    opacity: 1;
}

#menuMobilClose {
    position: absolute;
    width: 59px;
   filter: brightness(0);
    margin: auto;
    right: 4%;
    top: 5%;
    display: inline-block;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity .5s ease-in-out;
}

#menuMobilClose:hover {
    opacity: 1;
}


/* SHOW REEL GLOBAL */
#showReelGlobal {
    width: 100vw;
    height: 100vh;
    
    /*background-color: rgba(29,28,28,1);*/
    background-color: #202023;
    position: absolute;
    z-index: 100000;
    top: 0px;
    left: 0px;
  /*  background-color: black;*/
  
    transform: translateY(-130%);
  
}
#showReelGlobal2 {
    width: 100vw;
    height: 100vh;
    
    /*background-color: rgba(29,28,28,1);*/
    background-color: #202023;
    position: absolute;
    z-index: 100000;
    top: 0px;
    left: 0px;
  /*  background-color: black;*/
  
    /*transform: translateY(-130%);*/
  
}
.showReelGlobalApto {
    width: 100vw;
    height: 100vh;
    
    background-color: rgba(29,28,28,0.95);
    position: absolute;
    z-index: 100000;
    top: 0px;
    left: 0px;
  
     
}


#showVideoGlobal {
        position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 100;
    margin: auto;
    width: 70%;
    max-width: 1280px;
    max-height: 720px;
}
#showVideoGlobalApto {
        position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 100;
    margin: auto;
    width: 70%;
    max-width: 1280px;
    max-height: 720px;
}
.boxVideoGlobal {


}
#showReelTitle{
    font-size: 18px;
    font-family: 'Agency-Regular';
    color: #3bfdff;
    position: fixed;
    bottom: 20%;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    left: 6%;
  /*  background-color: #202023;*/
    padding: 10px;
    z-index: 999;
    transform: rotate(-90deg);
     pointer-events: none;
}
#showReelTitleApto{
    font-size: 18px;
    font-family: 'Agency-Regular';
    color: #3bfdff;
    position: fixed;
    bottom: 20%;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    left: 6%;
    background-color: #202023;
    padding: 10px;
    z-index: 999;
    transform: rotate(-90deg);
     pointer-events: none;
}


#showReelVideoClose {
    position: absolute;
    width: 59px;
   
    margin: auto;
    right: 4%;
    top: 5%;
    display: inline-block;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity .5s ease-in-out;
}

#showReelVideoClose:hover {
    opacity: 1;
}

.showReelLogo {
    position: absolute;
    max-width: 120px;
    top: 5%;
    left: 4%;
    z-index: 999;
  /*  pointer-events: none;*/
      /* filter: sepia(100%) brightness(70%) hue-rotate(180deg);*/
}
.showReelLogo img {
    width: 100%
}
.showContactLogo {
    position: absolute;
    max-width: 120px;
    top: 5%;
    left: 4%;
    z-index: 999;
 /*   pointer-events: none;*/
      /* filter: sepia(100%) brightness(70%) hue-rotate(180deg);*/
}
.showContactLogo img {
    width: 100%
}
.menuMobilLogo {
   position: absolute;
    max-width: 80px;
    top: 3%;
    left: 4%;
    z-index: 999;
    pointer-events: none;
    /* filter: sepia(100%) brightness(70%) hue-rotate(180deg); */
    filter: brightness(0.3);
}
.menuMobilLogo img {
    width: 100%
}


#b01, #b02, #b03{
    cursor: pointer !important;
}

#videoGallery, #webGallery, #infoGallery, #disenoGallery, #virtualGallery {
    display: none;
}
#webGallery, #infoGallery, #disenoGallery{
    margin-top: 20%;
}
.videoGalCuad {
     width: 500px;
    height: 438px;
    margin: 60px;
    position: relative;
    overflow: hidden;

   /* box-shadow: 5px 10px 20px rgba(0,0,0,0.25);*/

      /* clip-path: polygon(100% 0, 98% 100%, 2% 99%, 0 3%);*/


}
.videoGalCuad:after{
    content: '';
    position: absolute;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    width: 200%;
    height: 200%;
    background-color: rgba(0,0,0,0.2);
    background-image: url(../images/point_x.png);
    background-repeat-x: repeat;
    background-position: center center;
    opacity: 0.75;

}
#videoGallery {
    display: flex;
}
.videoDiv {
   position: relative;
    margin: 0 auto;
    display: flex;
    width: 80%;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1300px;
    margin-top: 20%;
    margin-bottom: 20%;

}
.videoDivTitleBox {
   position: absolute;
   top: 38%;
   left: 20%;
   bottom: 0;
   margin: auto;
   cursor: pointer !important; 
   z-index: 100;
   text-align: left;
}
.videoDivTitle{
    font-size: 24px;
    letter-spacing: 3px;
    color: white;
    font-family: Gilroy-ExtraBold;
}
.videoDivTitle:hover{
     animation: animHoverMenu 1s;

}
.videoSubTitle{
    font-size: 16px;
    font-family: 'Agency-Regular';
    letter-spacing: 4px;
    color: #3bfdff;
    font-weight: 700;
  
}

/* VIDEO PROYECT */
.videoProyectContainer{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 1000px;
    width: 95%;
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    z-index: 100;
    
   /* visibility: hidden;
    opacity: 0;*/

}
.webContainer {
margin: 0 auto;
    width: 60%;
   /* border: 2px solid green;*/
    position: relative;
    margin-bottom: 10% !important;
 
}
.webContainerText {
  position: absolute;
    left: 10%;
    top: 25%;
    z-index: 10;
    width: 100%;
    max-width: 550px;
    text-align: left;
      font-family: 'Agency-Regular';
         color: #3bfdff;
}
.webContainer-title {
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 3px;
    color: white;
    font-family: Gilroy-ExtraBold;
}
.webContainer-subtitle{    
    margin-top: 5%;
   
    text-transform: uppercase;
    font-size: 16px;
    font-family: 'Agency-Regular';
    letter-spacing: 4px;
    color: #3bfdff;
    font-weight: 700;
}
.lineWebsite{
    transform: rotate(90deg);
    position: absolute;
    right: 5%;
    display: flex;
    bottom: -5%;
    flex-direction: row;
    z-index: 99;
}
.lineWebsite-text {
    font-family: 'Agency-Regular';
    color: #3bfdff;
   
    font-size: 20px;
    font-weight: 100;
     margin-left: 10px;
   
}
.lineWebsite-line {
    border-bottom: 1px solid #3bfdff;
    width: 80px;
    /* line-height: 50px; */
    /* margin-top: -180px; */
    padding-top: -50px;
    margin-bottom: 10px;
   
}
.webImage {
    width: 80%;
    /* right: 0; */
    /* position: absolute; */
    /* bottom: 0; */
    /* text-align: right; */
    margin-left: 20%;
    
}
.webImage img {
    width: 100%;
    filter: brightness(0.4);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.layerImg { 
opacity: 0.4;
    border-bottom: 1px dotted white;
    /* margin-top: -30%; */
    height: 50px;
    width: 100%;
}
.videoProyectZone {
    height: 50px;
    position: relative;
}

#videoOnBmwClose{
    position: absolute;
    top: 0;
    left: 0;
}

.videoProyect{
    width: 100%;
    z-index: 10;

}

#videoProyectShow{
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.textContac {
    width: 600px !important;
    letter-spacing: 3px;
    line-height: 30px !important;
       font-family: 'Dosis' !important;
     pointer-events: none;
  } 

.videoProyectTitle{
    letter-spacing: 5px;
    position: absolute;
    right: 0;
    font-size: 17px;
    font-family: 'Agency-Regular';
    line-height: 50px;
    color: #3bfdff;
}


.fadeInAnim {
    animation: fadeInAnim 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@keyframes fadeInAnim{
    0%{opacity: 0; }
    99%{opacity: 1;}
    100%{opacity: 1; visibility:visible;}
}

.fadeOutAnim {
    animation: fadeOutAnim 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@keyframes fadeOutAnim{
    0%{opacity: 1; visibility:visible;}
    99%{opacity: 0; visibility:visible;}
    100%{opacity: 0; visibility:hidden;}
}

.fadeInElement {
    animation: fadeIn 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 1s;
}

@keyframes fadeIn{
    0%{opacity: 0; }
    100%{opacity: 1; 
        pointer-events: 'auto';}

}


.colorMe {
    color: #3bfdff !important;
}
.mystyle {
  /*opacity: 1;*/
 /* filter: sepia(0%);
  filter: grayscale(0%);*/
  animation: moveGray 1s 1;
  box-shadow: 5px 10px 15px rgba(0,0,0,0.8);
}

@keyframes moveGray{
    0%{filter: grayscale(80%);  opacity: 0.01;}
    50%{filter: grayscale(0%);  opacity: 1;}
    99%{filter: grayscale(80%); opacity: 0.01;}

}
  
 .mascarita {/*clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);*/
    /*clip-path: polygon(100% 0, 98% 100%, 2% 99%, 0 3%);*/
 }

 .menuPC {
    display: flex;
    flex-direction: column;
    line-height: 26px;
    padding-top: 30px;
    color: #3bfdff;
    font-size: 14px !important;
    position: relative;
    z-index: 999999999;
  /*  border: 3px solid pink;*/

    pointer-events:none;
   
 }

  .menuPC div a {
    text-transform: uppercase;
    color: #3bfdff;
    font-size: 18px !important;
 }
 .menuPC div a:hover {
    
    animation: animHoverMenuM 0.5s;
       animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;

 }

 @keyframes animHoverMenu{
    0%{opacity: 0;}
    4%{opacity: 1;}
    10%{opacity: 0.5;}
    12%{opacity: 0.9;}
    15%{opacity: 0;}
    100%{opacity: 1;}
    

}
   @keyframes animHoverMenuM{
    0%{opacity: 1;}
    100%{opacity: 0.5;}
    

}


 .menuPC div a span{
    color: white !important;
    font-size: 17px !important;
    
 }

 .menuAnimSer {
    
    position: relative;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0,0,0,0.3);
    padding: 10px;
 }

 .menuAnimSerON {
    animation: animMenuOn 0.1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    pointer-events: auto;
    /*animation-delay: 1s;*/
 }

 @keyframes animMenuOn{
        from{
            
            opacity: 0;
        }
        to{
            left: 0px;
            opacity: 1;
        }
    }
.menuAnimSerOFF {
    animation: animMenuOff 0.1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
     pointer-events: none;
    /*animation-delay: 1s;*/
 }

 @keyframes animMenuOff{
        from{
            left: 0px;
            opacity: 1;
        }
        to{
            left: 0px;
            opacity: 0 !important;
        }
    }

.cambiarSizeVideo{
    object-fit: cover;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 70% !important;
    height: 70% !important;
    max-width: 1280px;
    max-height: 720px;
    bottom: 0;
    margin: auto;
   /* box-shadow: 5px 10px 20px rgba(0,0,0,0.85);*/
    /* clip-path: polygon(100% 0, 98% 100%, 2% 99%, 0 3%);*/
}
.iconosSociales {
    margin-top: 20px;
    height: 50px;
    display: flex;
    
    justify-content: baseline;
    flex-direction: row;
    
    flex-wrap: nowrap;
    justify-content: center;

}

.iconosSociales img {
    width: 16%;
    

}


.iconosSociales img:hover {
    animation: animHoverMenuParpa 1s;
     animation-fill-mode: forwards;
    

}
  
/*.backBlackTitles {
     width: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    height: 100px;
   
    background-color: black;
    opacity: 0.2;
 
}*/
.noClick {
     pointer-events:none;
}
.noCursor {
    cursor:default !important;
}
.backBlackTitles {
width: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    height: 200px;
    /* background-color: black; */
    opacity: 0.1;
    background-image: url(../images/backgroundTitles.png);
    background-repeat-x: repeat;
    /* background-origin: inherit; */
    background-size: contain;
    /* background-repeat: repeat; */
    background-position: top;
    background-repeat-y: no-repeat;}

.titleApartado{
     font-size: 20px;
    font-family: 'Agency-Regular';
    color: #3bfdff;
    position: fixed;
    top: 40%;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    left: 0px;
 
    padding: 10px;
    z-index: 999;
    transform: rotate(-90deg);
   

}

.textApartado {
    width: 80%;
    margin: 0 auto;
   padding: 240px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
}
.cajon {
  /*  border: 2px solid red;*/
    flex: 1;
   /* height: 80vh;*/
}
.box1 {border-right: 1px solid white; }
.box1 img{width:40%; }
.box2 {   font-family: Gilroy-ExtraBold;
    text-align: left;
    font-size: 2.3em;
    padding-left: 60px;
    line-height: 50px;
    z-index: 0;}

.textApartado .fluor {
     color: #3bfdff !important;
}
.img-logoFooter {
    max-width: 130px;
  
    position: relative;
  
    margin: 0 auto;
    display: block;

    width: 120px;
 
    margin-bottom: 150px !important;
}
#imgtoTop {
position: relative;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    width: 60px;
    margin-bottom: 40px !important;
}

.content-item:nth-child(4){
     border-left: none !important;
}
body > div > div.mobile-Content > div.aslan.areaShow > div.rowo > div.homePagecenter > div > div:nth-child(3) > div.line{
 background: rgba(0, 0, 0, 0) !important;
/*background: pink !important;*/
}
/*/////////////////////////////////////////////////////////////////////////////////// */


.img-respon{
    width: 70%;
}
.responsive{
    width: 100%;
}
.border{
    border:1px solid red;
}


@media (max-width:1700px){
    .bgImages-1,.bgImages-2{
        width: 100% !important;
        height: 100vh !important;
    }
    .customerLogo{
        width: 55%;
        flex-basis: 30%;
        margin-left: 31%;
    }
}


.mble-bttn{
    display: none;
}
.mble-bttnDrd{
    display: none;
    pointer-events: none;
}
.rowo{
    display:flex;
    flex-wrap:wrap;
    position: relative;
}
#drd-menu{
    position: absolute;
    width: 100%;
    display: inline-block;
    z-index: 5;
}

.drdMenu{
    width: 100%;
}

.drdMenuler{
    max-width: 92%;
    flex-basis: 92%;
    margin-left: 4%;
    height: 40px;
    text-align: center;
    margin-top: 6px;
    box-sizing: border-box;
    padding-top:17px;
}
.drd-link, 
.drd-linkIcon {
      /*font-family: 'Graphik-Medium';*/
    font-family: 'Agency-Regular';
   /* color:#7f7f7f;*/
    color:white;
    font-size: 15px;
    letter-spacing: 3.5px;
    text-align: left;
    padding-top:15px;
    padding-left:4px;
    max-width: 16.666%;
    flex-basis: 16.666%;
    display: inline-block;
    cursor: pointer;
    margin-left:-1px;
    box-sizing: border-box;
    position: relative;
 /*   color: lightgray;*/
    opacity: 1;
}

.drd-link:hover {
    animation: animHoverMenuParpa 1s;
     animation-fill-mode: forwards;
}
.special-link {
    /*font-family: 'Graphik-Medium';*/
    font-family: 'Agency-Regular';
   /* color:#7f7f7f;*/
    color:white;
    font-size: 15px !important;
    letter-spacing: 3.5px;
    text-align: left;
   /* padding-top:15px;
    padding-left:4px;*/
    max-width: 16.666%;
    flex-basis: 16.666%;
    display: inline-block;
    cursor: pointer;
    margin-left:-1px;
    box-sizing: border-box;
    position: relative;
    pointer-events:auto;
 /*   color: lightgray;*/
    opacity: 1;
}
.special-link2 {
   cursor: default !important;
   
}

#drd-menu .drdMenu .drdMenuler .rowo
.drd-linkIcon .homePageicon{
    position: absolute;
    top: 11px;
    right: 8%;
    width: 17px;
}

#mobileButton{
    display: none;
}
.menu-active{
    color:white;
    /*font-family: Graphik-Light;*/
    font-family: 'Agency-Regular';
}
.dropdown-menu{
    position: relative;
    left: 2px;
    cursor: pointer;
    overflow: hidden;
}
.dropdown-menu:hover .dropdown-content{
    display: inline-block;
}
.dropdown-menu:hover{
    overflow: visible;
}
.dropdown-icon{
    position: absolute;
    top:9px;
    right: 10px;
}
.dropdown-content{
    position: absolute;
    top:60px;
    left: 5px;
    width: 100%;
    height: 60px;
    overflow: hidden;
    transition:transform .5s ease-in-out;
    display: none;
}
.dropdown-menu:hover .dropdown-content{
    display: inline-block;
}
.dropdown-link{
    font-family: Graphik-Light;
    color:#575757;
    font-size: calc(1px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    letter-spacing: 3px;
    display: inline-block;
    padding-top: 4%;
    height: 50%;
}
/* Home Page Desig */

/*.homeLogo {
position: absolute;
    z-index: 99;
    left: 0;
    margin: auto;
    top: 0;
    width: 150px;
    right: 0;
    bottom: 0;
    max-width: 184px;
    animation: fadeIn 0.25s ease-in-out;
}*/

 .homeLogo {
    position: absolute;
    z-index: 99;
    left: 0;
    margin: auto;
    top: 0;
    width: 150px;
    height: 150px;
    right: 0;
    bottom: 0;
    max-width: 184px;
    animation: fadeIn 0.25s ease-in-out;
}
.logoDown {
    width: 90%;
    position: absolute;
    left: 0;
    bottom: -5%;
    right: 0;
    margin: auto;
    transition: all 1s;
    opacity: 0.8;
}

.lDHide {opacity: 0;}


.homeLogo img:nth-child(1) {width: 100%;}


.down .homeLogo{
    opacity: 0;
    animation: fadeOut 0.5s ease-in-out;
}
.homePage,
.inbornProgressive{
    width: 100%;
    height: auto !important;
    background-color: #202023;
    color:white;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    box-sizing: border-box;
    position: relative;
}
.closeButton{
    position: fixed;
    z-index: 99999;
    top: 25px;
    right: 50px;
    /* border: 2.4px solid white; */
    /* color: white; */
    /* font-size: 16px; */
    /* font-style: normal; */
    /* font-family: sans-serif; */
    /* text-align: center; */
    width: 59px;
    height: 42px;
    /* border-radius: 38px; */
    /* line-height: 26px; */
    cursor: pointer;

}
/*.videoContent{
    position: absolute;
    top: 0vh;
    left:0px;
    width: 100%;
    height: 100vh;
    
    background: rgba(100,200,255,0.2);
   
 
}*/

.videoContent{
   position: absolute;
    top: 0vh;
    left: 0px;
    width: 100%;
    height: 100vh;
    /* background: rgba(100,200,255,0.2); */
    /* background: #202023; */
    display: none;
    background: rgb(2,19,6);
    background: linear-gradient(180deg, rgba(29,29,28) 50%, #FFF 50%);
}
   
.videoContentUp{
    display: inline-block;
    animation: videoContentUp 1s ease-in-out;
}
.videoContentDown{
    display: inline-block;
    animation: videoContentDown 1s ease-in-out;
}

.videoContentOut{
    animation: fadeOut 1s ease-in-out;
    opacity: 1;
}


.productVideo{
    width: 100%;
    height: 100vh;
    position: relative;
    top: 0vh;
    display: none;
}
.productVideoUp{
    display: inline-block;
    animation: productVideoUp 1s ease-in;
    /*    background-color: #202023;*/
}
.productVideoDown{
    display: inline-block;
    animation: productVideoDown 1s ease-in;
}
.downScrollCube {

        position: absolute;
    bottom: 45px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.downScrollText{
    font-size: 15px;
    font-family: 'Agency-Regular';
    color: white;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}
.downScroll{
    
    width: 32px;
    height: 39px;
    margin: 0px 10px;
}
.downScroll img{
 /*transform: scale(3.5); */
    padding: 6px;
    /* background-color: red; */
    width: 100%;
    margin: 0 auto;
    transform: translate(0px, -10px);
    animation: scrollDown 2s ease-in;
    animation-iteration-count: infinite;
    opacity: 1;
}

@keyframes scrollDown{
    from{
       
        transform: translate(0px, -10px);
         opacity: 1;
    }
    to{
       transform: translate(0px, 10px);
        opacity: 0.1;
    }
}
.productImage{
    width: 100%;
    min-height: 250px;
    position: relative;
    display: none;
}
.backgroundColorGeneral {background-color: rgba(100,200,255,0.2);}
.productImageShow{
    display: inline-block;
    background-color: rgba(100,200,255,0.2);
    
}

.productTitle{
    /*font-size: 18px;
    letter-spacing: 2px;
    margin:25px 0;*/
}
.projectLocation{
    width: 200px;
    margin:0 auto;
    margin-bottom: 15px;
    
}
.dipslayNone{
    display: none;
}
.imagesProduct{
/*    display: inline-block;*/
   width: 100%;
    height: auto;
    text-align: center;
    position: relative;
}

.imagesContent{
    position: absolute;
    display: inline-block;
    width:100%;
    height: 100vh;
    opacity: .9;

}
.bgImages{
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.logoContent{
    width:300px;
    position: absolute;
    left:38%;
    top:48%;
}


.showreel{
    font-size: 10px;
    letter-spacing:5.5px;
    color:white;
    position: absolute;
    top: 72%;
    right: 17.36%;
    z-index: 2;
    transition: all 1.2s  ease-in-out !important;
    cursor: pointer;
}
.showreel span{
font-family: 'Agency-Regular';
    font-weight: normal;
    position: relative;
    top: -16px;
    left: -11px;
    color: white;
    font-size: 13px;
}
.showreel img{
   /* width: 49%;*/
    height: 45px;
}


@keyframes showreel{
    from{
        position: absolute;
        top:105%;
    }
    to{
        position: absolute;
        top:70%;
    }
}
.up .showreel{
    animation: showreel .8s ease-in-out;
}

.down .showreel{
    position: absolute;
    top:105%;
}
.homePageLeft{
    max-width: 4%;
    height: 100vh;
    flex-basis: 5%;
    position: relative;
}
.homePageLeft .leftSlogan{
   position: absolute;
    font-family: 'Graphik-Medium';
    left: 50%;
    bottom: -10%;
    display: inline-block;
    width: 400px;
    height: 20px;
    font-size: 8px;
    padding-top: 10px;
    transform-origin: left center;
    transform: rotate(-90deg);
    color: white;
    letter-spacing: 2.3px;
    text-transform: uppercase;
}
.sloganline{
    position: relative;
    top:-3px;
    width: 80px;
    display: inline-block;
    border-top:1px solid white;
}
.backGroundSound{
    position: absolute;
    left: .7%; 
    top: 28px;
    z-index: 99;
    width: 28px;
    transform: rotate(-90deg);
    cursor: pointer;
    transition: all .5s ease-in-out;
}
.line{
    position: absolute;
    right: 0;
    width: 1px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.575);
}

/*//LINEA FINA BLANCA
.line{
position: absolute;
    right: 0;
    width: 1px;
    height: 100vh;

    }*/

.homePagecenter{
    max-width: 92%;
    height: 100vh;
    flex-basis: 92%;
    z-index: 1;
}
.content-item{
    height: 100vh;
    max-width: 16.666%;
    flex-basis: 16.666%;
    border-left: 1px solid #dadada20;
    color:white;
    position: relative;
}

/*//LINEA FINA BLANCA
.content-item{
    height: 100vh;
    max-width: 16.666%;
    flex-basis: 16.666%;
    border-left: 1px solid rgba(255,255,255,0.2);
    color: white;
    position: relative;
    }*/

.article, .articletwo{
    position: absolute;
    left: 19.5%;
    bottom: 25px;
    width: 15%;
    flex-basis: 16.666%;
    z-index: 7;
    height: 200px;
    cursor: default;
    transition: all .5s ease-in-out;
}
.articletwo{
    position: absolute;
    left: 34.8%;
}
.articleCustoer{
    position: absolute;
    font-size: 25px;
    bottom:25px;
    width: 100%;
    height: auto;
    cursor: pointer;
    color:#7f7f7f;
    padding-left: 3px;
    box-sizing: border-box;
    transition: color .5s ease-in-out;
}

.up .article-up-1{
    animation: homePage_text_up .5s ease-in-out;
}
.up .article-up-2{
    animation: homePage_text_up .7s ease-in-out;
}
.up .article-up-3{
    animation: homePage_text_up .9s ease-in-out;
}
.up .bgImages{
    animation: fadeIn 1.2s ease-in-out;
}

.down .bgImages{
    animation: fadeOut 1.2s ease-in-out;
}

@keyframes gelenekselUp{
    from{
        position: absolute;
        bottom: -400px;
    }
    to{
        position: absolute;
        bottom: -4%;
    }
}
.up .geleneksel-up{
    animation: gelenekselUp .5s ease-in-out;
}
.down .geleneksel-down{
    position: absolute;
    bottom: -400px;
    transition: all .7s  ease-out !important;
}
@keyframes favoriProjeUp{
    from{
        position: absolute;
        bottom: -300px;
    }
    to{
        position: absolute;
        bottom: 35%;
    }
}
.up .favoriProje-up{
    animation: favoriProjeUp .5s ease-in-out;
}
.down .favoriProje-down{
    position: absolute;
    bottom: -300px;
    transition: all .7s ease-out !important;
}


.down .article-down-1{
    position: absolute;
    bottom: -800px;
    transition: all .7s  ease-in-out !important;
}

.down .article-down-2{
    position: absolute;
    bottom: -200px;
    transition: all .9s ease-in-out !important;
}
.down .article-down-3{
    position: absolute;
    bottom: -160px;
    transition: all 1.1s ease-in-out !important;
}


.article:hover{
    /*color:white;
    text-decoration: underline;*/
}
.article:hover .article-link{
   /* color:white;*/
}
.article-title{
    font-family: 'Agency-Regular';
    font-size: 17px;
    text-align: left;
    letter-spacing: 2.3px;
    line-height: 20px;
    margin-left: 2px;
    color: #3bfdff;
}
.article-text,.article-link{
   font-family: 'Graphik-Light';
    font-size: 15px;
    line-height: 21px;
    text-align: left;
    color: rgba(255,255,255,0.7);
    margin-left: 2px;
}
.article-link{
   width: 100%;
    display: inline-block;
    color: #3bfdff;
    font-family: 'Graphik-Medium';
    font-size: 14px;
    /* text-decoration-line: underline; */
    padding-bottom: 8%;
    margin-left: 2px;
    transform: translateX(70px);
    opacity: 0;
}
.popUp{
    position: absolute;
    right: 0px;
    z-index: 999;
    width: 34.7%;
    
}
.popUpShow{
    bottom: 0 !important;
    transition: all 0.6s ease-out; 
}
.popUpHidden{
    transition: all 1s ease-in 1s;
    
}
.popUpClose{
    position: absolute;
    top: 0;
    left: -30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.popUp .row{
    position: relative;
    top: 100%;
    
}
.popUpShow .row{
    position: relative;
    top: 0;
    transition: all 1s ease-out 0.1s;
}
.popUpHidden .row{
    position: relative;
    top: 100%;
    transition: all 1s ease-in 1s;
}

/*Ana Sayfadaki 3'lü Metin BİTİŞ*/

.homePageRight{
    max-width: 4%;
    height: 100vh;
    flex-basis: 4%;
    z-index: 1;
    border-left: 1px solid #dadada20;
    position: relative;
}
.homePageRight a{
    position: absolute;
  /*  font-family: 'Agency-Regular';*/
    font-family: 'Graphik-Medium';
    left:50%;
    bottom:35%;
    display: inline-block;
    width: 150px;
    font-size: 10px;
    padding-top:10px;
    transform-origin: left center;
    transform: rotate(-90deg);
    /*color:white;*/
      color:#3bfdff;
    letter-spacing: 2px;
}
.homePageRight a::after{
  /*  position: relative;
    left: 5px;
    bottom: 5px;
    content:" ";
    width: 30px;
    display: inline-block;  
    border:1px solid white;*/
}
.homePageRight a::before{
    position: absolute;
    right: -15px;
    bottom: 0;
    content:" ▲ ";
    display: inline-block;
    transform: rotate(90deg);
}
.homePageRight a span{
    /*color:#575758;*/
  
    color:white;
    
}


.aslan{
    width: 100%;
    height: 100vh;
    background-color: #202023;
    color:white;
    text-align: center;
    display: none;
    box-sizing: border-box;
    position: relative;
    box-sizing: border-box;
}
.areaShow{
    display:inline-block !important;
    position: relative;
}

/* MÜŞTERİLER SAYFASI AYARLARI */
.list-title{
    color: white;
   /* font-family: 'Graphik-Regular';*/
    padding: 10px 0;
    font-size: 18px;
}

.list-item{
    width: 10%;
    flex-basis: 10%;
    box-sizing: border-box;
    color: white;
    font-family: 'Dosis';
    font-size: 13px;
    padding: 10px 0;
}
.list-text{
    width: 90%;
    flex-basis: 90%;
    color: white;
    font-weight: normal;
   font-family: 'Dosis';
     letter-spacing: 1.5px;
    padding: 10px 0;
    font-size: 18px;
    /*font-size: calc(1px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));*/
}

.list-text-2{
    width: 55%;
    flex-basis: 55%;
    box-sizing: border-box;
    color: white;
    font-family: 'Graphik-Regular';
    font-size: 13px;
    padding: 10px 0;

    font-size: calc(1px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
.list-arrow{
    width: 25%;
    flex-basis: 25%;
    margin-left: 5%;
    margin-right: 5%;
}
/* Müşteriler Sayfası css ayarlamaları */
.customerLogo{
    width: 45%;
    flex-basis: 45%;
    margin-left: 27%;
}
.point{
    margin:5vh 0 5vh 50% ;
    width:5px;
    height:5px;
    background: white;
    border-radius: 5px;
}

.inborn-logo{
    position: absolute;
    top:50%;
    width: 100%;
    height: auto;
    transition: all 1.2s  ease-in-out !important;
}
.solgar-logo{
    position: absolute;
    top:40%;
}

.up .inborn-logo{
    animation: inbornLogo .8s ease-in-out;
}

.down .inborn-logo{
    position: absolute;
    top:105%;
}


/* inborn progresive */
.banner-img{
    width: 100%;
    height: 100vh;
}

.projectMenu{
    position: relative;
    height: 100vh;
    
}

.video{
    position: absolute;
    left:0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: none;
    z-index: 3;
}
.video video{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.galery{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100vh;
    display: none;
    overflow: hidden;
    z-index: 2;
    opacity: 1;
}
.mouseoverBlocked{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: .4;
    display: none;
}
#first img, .piece-2 img{
    height: 100%;
    overflow: hidden;
}
.row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.piece-1{
    width: 4%;
    flex-basis: 4%;
    height: 100vh;
    box-sizing: border-box;
    animation: piece 1.5s ease;

}
.piece-2{
    width:15.333%;
    flex-basis: 15.333%;
    height: 100vh;
    box-sizing: border-box;
    animation: piece 2s ease;   
}
.piece-3{
    width:15.333%;
    flex-basis: 15.333%;
    height: 100vh;
    box-sizing: border-box;
    animation: piece 1.7s ease;
}
.piece-4{
    width:15.333%;
    flex-basis: 15.333%;
    height: 100vh;
    box-sizing: border-box;
    animation: piece 2s ease;
}
.piece-5{
    width:15.333%;
    flex-basis: 15.333%;
    height: 100vh;
    box-sizing: border-box;
    animation: piece 1.5s ease;
}
.piece-6{
    width:15.333%;
    flex-basis: 15.333%;
    height: 100vh;
    box-sizing: border-box;
    animation: piece 1.8s ease;
}
.piece-7{
    width:15.333%;
    flex-basis: 15.333%;
    height: 100vh;
    box-sizing: border-box;
    animation: piece 2s ease;
    
}
.piece-8{
    width:4%;
    flex-basis: 4%;
    height: 100vh;
    box-sizing: border-box;
    animation: piece 1.8s ease;
}


.project-detail{
    position: relative;
    z-index: 99;
    width: 100%;
    height: 200vh;
    display: none;
}


.detail_info-1,.detail_info-8{
    width: 4%;
    height: 100%;
    box-sizing: border-box;
    border-right:1px solid #363636;
    height: 100vh;
    position:relative;
    top:-100vh;
}
.detail_info-2,.detail_info-3,
.detail_info-4,.detail_info-5,
.detail_info-6,.detail_info-7{
    width: 15.333%;
    height: 100%;
    border-right:1px solid #363636;
    height: 100vh;
    position:relative;
    top: -100vh;
    
}
.detail_photo-1,.detail_photo-8{
    width: 4%;
    height: 100%;
    box-sizing: border-box;
    border-right:1px solid #363636;
    height: 100vh;
    overflow: hidden;
    position:relative;
    top:-100vh;
    transition: all .1s ease-in-out;
}
.detail_photo-2,.detail_photo-3,
.detail_photo-4,.detail_photo-5,
.detail_photo-6,.detail_photo-7{
    width: 15.333%;
    height: 100%;
    height: 100vh;
    border-right:1px solid #363636;
    overflow: hidden;
    position: relative;
    top:-100vh;
}
.detail_photo-content{
    position: relative;
    width: 100%;
    height: 100vh;
}
.img-animation{
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #202023;
    color:white;
    transform: translateX(101%);
    animation: detail_animation 2s ease-in-out;
}
.detail_photo{
    width: 100%;
    height: 100%;   
}
.downAnimationSingle{
    position:relative;
    top:-25vh;
    animation: downAnimationSingle 1s ease;
}
.downAnimationDouble{
    position:relative;
    top:-20vh;
    animation: downAnimationDouble 1s ease;
}
.upAnimationSingle{
    position:relative;
    top:-100vh !important;
    animation: upAnimationSingle 1s ease;
}
.upAnimationDouble{
    position:relative;
    top:-100vh !important;
    animation: upAnimationDouble 1s ease;
}


.slogantek,.slogancift{
    width: 100%;
    font-family: 'Graphik-Medium';
    color:#876c55;
    font-size: calc(35px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    -moz-font-size: calc(35px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    -webkit-font-size: calc(35px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    text-align: justify;
    letter-spacing: 4px;
}
.slogantek{
    position: absolute;
    top:40%;
    text-align: justify;
}
.slogancift{
    position: absolute;
    top:35%;
    text-align: center;
}

.smallslogantek{
    position: absolute;
    top:55%;
}


.menu-content{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 4;
}


.banner-about{
    display: inline-block;
    width: 4%;
    flex-basis: 4%;
    height: 100vh;
    border-right:1px solid #363636;
    position: relative;
}


.banner-about a{
    display: inline-block;
    color:white;
    font-family:Graphik-Medium;
    position: absolute;
    top:50%;
    left:-30px;
    width: 120px;
    height: 25px;
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.col-md-2{
    flex-basis:15.333%;
    max-width: 15.333%;
    height: 100vh;
    position: relative;
    border-right:1px solid #363636;
    overflow: hidden;
}
.banner-link,.banner-chronologıcal{
    position: absolute;
    font-family: Graphik-Light;
    color:#575757;
    font-size: calc(1px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    -moz-font-size: calc(1px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    -webkit-font-size: calc(1px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    letter-spacing: 3px;
}
.banner-social{
    display: inline-block;
    width: 4%;
    flex-basis: 4%;
    height: 100%;
    position: absolute;
    right: 0;
}
.menu{
    display: inline-block;
    height: 10%;
    width: 100%;
    margin-top:10%;
}
.thumnail,.graphical{
    position: absolute;
    top:50%;
    width:100%;
    height: 40px;
    text-align: center;
    animation: icon-animation 1s ease;
}
.down .thumnail{
    margin-top:100vh;
    opacity: 0;
    transition: all 1s ease-in-out;
}
.down .graphical{
    margin-top:100vh;
    opacity: 0;
    transition: all 1s ease-in-out;
}


.thumnail span,.graphical span{
    font-family: 'Graphik-Medium';
    font-size:12px;
    color:white;
    display: inline-block;
    width: 100%;
    margin-top:10px;
    letter-spacing:3px;
}
.banner-cuff{
    font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
    font-family: 'Graphik-Medium';
    position: absolute;
    top: 25vh;
    left:0;
    font-family: Graphik-Light;
    color:white;
    letter-spacing: 1px;
    height:10%;
    width: 100%;
    animation:banner-cuff 1.5s ease-in-out;
    text-align: left;
}
.down .banner-cuff{
    transform: translateX(-100%);
    transition: transform 1s ease-in-out;
}

.productKap{
    position: absolute;
    top: 35%;
    left: 19.5%;
    width: 61%;
    height: 50%;
    text-align: left;
}
.product{
    cursor: pointer;
    width:25%;
    height: 35%;
    overflow: hidden;
    position: relative;
    display: inline-block;
}
.product::after{
    content: ' ';
    position: absolute;
    left: 10%;
    bottom: 0;
    width: 90%;
    height: 1px;
    background: white;
    display: inline-block;
    z-index: 999;
}
@keyframes product-animation1{
    from{
        top:100%;
        opacity: 0;
    }
    to{
        top:0;
        opacity: 1;
    }
}
@keyframes product-animation1Down{
    from{
       top:0;
        opacity: 1;
    }
    to{
        top:100%;
        opacity: 0;
    }
}
.product-row-1{
    animation: product-animation1 1.4s  ease;
}
.down .product-row-1{
    animation: product-animation1Down 1.8s  ease;
}
.down .product-down-{
    margin-top:100vh;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}
@keyframes product-animation2{
    from{
        top:100%;
        opacity: 0;
    }
    to{
        top:0;
        opacity: 1;
    }
}
@keyframes product-animation2Down{
    from{
        top:0;
        opacity: 1;
    }
    to{
        top:100%;
        opacity: 0;
    }
}
.product-row-2{
    animation: product-animation2 1.8s ease;
}
.down .product-row-2{
    animation: product-animation2Down 1.4s ease;
}
.down .product-two-row{
    margin-top:100vh;
    opacity: 0;
    transition: all 0.6s ease-in-out;
}

@keyframes product-animation3{
    from{
        top:100%;
        opacity: 0;
    }
    to{
        top:0;
        opacity: 1;
    }
}
.product-row-3{
    animation: product-animation3 3s ease;
}
.down .product-row-3{
    margin-top:100vh;
    opacity: 0;
    transition: all 1s ease-in-out;
}

.yazı{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}
.yazı:hover p{
    display: none;
}
.yazı:hover + .projectLogo{
    position: absolute;
    top:0;
}

.textOverImg {
 
   font-family: 'Agency-Regular';
    letter-spacing: 2px;
    color: white;
/*    color:  #3bfdff;*/
   
    /* text-align: center; */
    position: absolute;
    bottom: 10px;
    text-transform: uppercase;
    /* left: 0; */
    left: 32px;
   
    font-size: 16px;
}

.product-year{
    /*font-family: 'Graphik-Medium';*/
 /*   font-family: 'Graphik-Light';*/
     font-family: 'Agency-Regular';
    font-size: 10px;
    letter-spacing: 2px;
    color:#868686;
   /* color:#3bfdff;*/
    text-align: right;
    position: absolute;
    bottom: 40px;
    right: 2px;
    transition:all .5s ease-in-out;
    font-size: calc(27px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
.product-name{
    /*font-family: 'Graphik-Medium';*/
    font-family: 'Graphik-Light';
    font-size: 12px;
   /* color:white;*/
    color: #3bfdff;
    text-align: center;
    letter-spacing: 2px;
    position: absolute;
    bottom: 10px;
    right: 2px;
    transition: all .5s ease-in-out;
    display: inline-block;
    width: 90%;
    text-align: right;
    padding: 6px 0;

    text-transform: uppercase;
}
.projectLogo{
    width: 100%; 
    height: 100%;
    position: absolute;
    top:100%;
    right: 3px;
    z-index: 1;
    overflow: hidden;
    transition: all .5s ease-in-out;
}


.up .videom{
    animation: fadeIn 1.2s ease-in-out;
}
.down .videom{
    animation: fadeOut 1.2s ease-in-out;
}
.full{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.w-100{
    width: 100%;
    height: 100%;
}
.vp-controls-wrapper{
    display: none !important;
}
#videoCntnt, #videoCntntCon{
    position: absolute;
    z-index: 9999;
    z-index: 99;
    width: 100%;
    height:100%;
    overflow: hidden;
    display: none;
}


.astarActive{
    transform: translateY(0%) !important;
}
#astar, #astarCon, #astarGlobal,
.infoAstar{
    position: absolute;
    left:0;
    bottom: 0;
    right: 0;
    top:0; 
    width: 100%;
    height: 100%;
    background: #1d1c1c;
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
    display: inline-block;
    z-index: 50;
}
.infoAstar{
    z-index: 1;
    transform: translateY(100%);
}

#showVideo {
    position: absolute;
    left:0;
    bottom: 0;
    right: 0;
    top:0; 
    display: inline-block;
    display: none;
    animation: showVideo 1.5s ease-in-out;
    z-index: 100;
}

.videom:after {

   /* background-image: linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);
    background-repeat: repeat-x;*/
 content: '';
    position: absolute;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 180px 80px 0px rgba(0,0,0,0.3);
}


/*#videoClose{
    
    position: absolute;
    left: 50%;
    bottom: 14%;
    font-family: 'Graphik-Medium';
    font-size: 22px;
    text-align: center;
    border: 2.4px solid white;
    display: inline-block;
    border-radius: 50%;
    padding: 9px 15px;
    cursor: pointer;
    color: white;
    box-shadow:0px 0px 0px 10px rgba(152, 152, 152, 0.75);
    opacity: .35;
    transition: opacity .5s ease-in-out;
}*/
#videoClose, #videoCloseCon {
    position: absolute;
    width: 59px;
   
    margin: auto;
    right: 4%;
    top: 5%;
    display: inline-block;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity .5s ease-in-out;
    }
#videoClose:hover, #videoCloseCon:hover{
    opacity: 1;

}


@media (min-width: 1200px){

    .product-logo{
        width: 60%;
        position: relative;
        left: 21%;
        top: -2%;
    }
    .linkendin{
        position: relative;
        display: inline-block;
        width: 100%;
        background: rgb(29, 28, 28);
    }
    .inbornlinkendin{
        position: absolute;
        left: 41%;
        width: 15%;
        text-decoration: none;
        margin:25px 0;
        display: inline-block;
    }
}

@media (max-width: 1200px){

    .product-logo{
        width: 60%;
        position: relative;
        left: 21%;
        top: 15%;
    }
    .linkendin{
        position: relative;
        display: inline-block;
        width: 100%;
        background: rgb(29, 28, 28);
    }
    .inbornlinkendin{
        position: relative;
        left: 7%;
        width: 24%;
        text-decoration: none;
        margin:25px 0;
        display: inline-block;
    }
    .product-name{
        font-size: calc(2px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .customerLogo{
        width: 55%;
        flex-basis: 37%;
        margin-left: 28%;
    }
    .drd-link{
        font-size: calc(3px + (26 - 14) * ((100vw - 300px) / (1600 - 300)))
    }
    
    @keyframes homePage_text_up{
        from{
            position: absolute;
            bottom: -200px;
        }
        to{
            position: absolute;
            bottom:77px;
        }
    }
    .article, .articletwo{
        position: absolute;
        left: 19.5%;
        bottom: 77px;
        width: 15%;
    }
    .articletwo{
        position: absolute;
        left: 34.8%;
    }
    .article-title{
        font-size: 18px;
    }
    .article-text,.article-link{
        font-size: calc(4px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .list-text{
        font-size: calc(4px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
}


@media (max-width: 990px){
    .linkendin{
        position: relative;
        display: inline-block;
        width: 100%;
        background: rgb(29, 28, 28);
    }
    .inbornlinkendin{
        position: relative;
        left: 4%;
        width: 27%;
        text-decoration: none;
        margin:25px 0;
        display: inline-block;
    }
    .product-name{
        font-size: calc(2px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .customerLogo{
        width: 65%;
        flex-basis: 65%;
        margin-left: 17%;
    }
    .drd-link{
        font-size: calc(3px + (26 - 14) * ((100vw - 300px) / (1600 - 300)))
    }
    .list-text{
        font-size:calc(4px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .list-text-2{
        font-size:calc(4px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }

    .article, .articletwo{
        position: absolute;
        left: 19.5%;
        bottom: 77px;
        width: 20%;
    }

    .articletwo{
        position: absolute;
        left: 34.8%;
    }
    .articletwo{
        position: absolute;
        left: 49.8%;
    }
    .article-title{
        font-size: 12px;
    }
    .article-text,.article-link{
        font-size: calc(7px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .list-text{
        font-size: calc(7px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .banner-cuff{
        font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
    }
}


@media (max-width: 768px){

    .titleApartado{
    font-size: 25px;
    font-family: 'Agency-Regular';
    color: #3bfdff;
    position: absolute;
    top: 140px;
    text-transform: uppercase;
    left: 40px;
    z-index: 9999;
    background-color: #202023;
    padding: 20px;
}

    .linkendin{
        position: relative;
        display: inline-block;
        width: 100%;
        background: rgb(29, 28, 28);
    }
    .inbornlinkendin{
        position: relative;
        left: 6%;
        width: 26%;
        text-decoration: none;
        margin: 10px 0;
        display: inline-block;
    }
    .customerLogo{
        width: 55%;
        flex-basis: 37%;
        margin-left: 28%;
    }
    .drd-link{
        font-size: calc(5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)))
    }
    .article, .articletwo{
        position: absolute;
        left: 19.5%;
        bottom: 77px;
        width: 20%;
    }
    .articletwo{
        position: absolute;
        left: 34.8%;
    }
    .articletwo{
        position: absolute;
        left: 49.8%;
    }
    .article-title{
        font-size: 12  px ;
    }
    .article-text,.article-link{
        font-size: calc(7px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .list-text{
        font-size: calc(7px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .banner-cuff{
        font-size: calc(8px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
    }
}

.altınOruncek{
    position: absolute;
    right: 7.8%;
    z-index: 999;
    width: 8%;
}
@keyframes newsInfoCome{
    from{
        top: 100vh;
    }
    to{
        top:75px;
    }
}
@keyframes newsInfoOut{
    from{
        top: 75px;
    }
    to{
        top:100vh;
    }
}
@keyframes newsInfoPass{
    from{
        top: 70px;
        opacity: 0;
    }
    to{
        top:75px;
        opacity: 1;
    }
}
.infoShow{
    display: block !important;
}
.newsInfoPass{
    animation: newsInfoPass .5s ease-in;
}
.newsInfoCome{
    animation: newsInfoCome 1s ease-in;
}
.newsInfoOut{
    animation: newsInfoOut 1s ease-in-out;
}
.mobile-Content .newsInfo .infoAnimation{
    display: none;
    z-index: 2;
    position: absolute;
    top: 75px;
}
.newsInfo .newsTitle{
    color: goldenrod;
    font-family: 'Graphik-Medium'; 
    font-size: 130%;
    padding: 0px 0; 
    line-height: 170%;
    margin-left: 25%; margin-right: 25%;
    letter-spacing: 5px;
    margin-top: 8vh;
    text-transform: capitalize;
}
.newsInfo .newsImage{
    width: 65%;
    margin:36px 0; 
    margin-left: calc(28.5% - 155px);
    margin-left: 17.4%;
}
.newsInfo .newsText{
    font-family: 'Graphik-light';
    width: 70%;
    margin-left: 15%;
    min-height: 100px;
    line-height: 160%;
    margin-bottom: 35px;
}
.newsInfo .nextnews img{
    width: 70%;
}
@keyframes buttonAnimation{
    from{
        top: 52vh;
        opacity: 0;
    }
    to{
        opacity: 1;
        top: 50vh;
    }
}
.newsInfo .prevnews,
.newsInfo .nextnews{
    position: absolute;
    z-index: 2;
    width: 60px;
    height: 50px;
    cursor: pointer;
}

.newsInfo .prevnews{
    top: 50vh;
    left:5%;
    transform: rotate(180deg);
    transition: all .5s ease-in-out .5s;
    animation:  buttonAnimation .5s ease-in-out;
}
.newsInfoOut + .prevnews{
    top:100vh !important;
}
.newsInfoOut + .prevnews + .nextnews{
    top:100vh;
}
.newsInfo .nextnews{
    top: 50vh;
    right:5%;
    padding-top: 20px;
    transition: all .5s ease-in-out .7s;
    animation:  buttonAnimation .5s ease-in-out;
}
.mobile-Content .news{
    width: 100%;
    height: 200px;
    
}

@media (max-width: 768px){
    .homeLogo{
        left: 0%;
        width: 25%;
    }
  }
@media (max-width: 576px){
    .content-item {
    display: none;

}

    .newsInfo .newsText{
        width: 86%;
        margin-left: 7%;
    }
    .homeLogo{
        left: 0%;
        width: 35%;
    }
    .popUp{
        position: absolute;
        right: 0px;
        z-index: 999;
        width: 100%;
    }
    .backGroundSound{
        position: absolute;
        left: 71%;
        top: 17px;
        z-index: 99;
        width: 22px;
        transform: rotate(0deg);
    }
    .popUpClose {
        position: absolute;
        top: -30px;
        left: 2px;
    }
    .product-logo{
        width: 80%;
        position: relative;
        left: 11.5%;
        top: 15%;
    }
    .linkendin{
        position: relative;
        display: inline-block;
        width: 100%;
        background: rgb(29, 28, 28);
    }
    .inbornlinkendin{
        position: relative;
        left: 5%;
        width: 40%;
        text-decoration: none;
        margin:10px 0;
        display: inline-block;
    }
    @keyframes product-animation1{
        from{
            top:100%;
            opacity: 0;
        }
        to{
            top:0;
            opacity: 1;
        }
    }
    @keyframes product-animation2{
        from{
            top:100%;
            opacity: 0;
        }
        to{
            top:0;
            opacity: 1;
        }
    }
    @keyframes product-animation3{
        from{
            top:100%;
            opacity: 0;
        }
        to{
            top:0;
            opacity: 1;
        }
    }

    .customerLogo{
         width: 55%;
         flex-basis: 70%;
         margin-left: 12%;
     }
     .article, .articletwo{
         position: absolute;
         left: 19.5%;
         bottom: 25px;
         width: 30%;
     }
     .articletwo{
         position: absolute;
         left: 34.8%;
     }
     .articletwo{
         position: absolute;
         left: 49.8%;
     }
     .article-text,.article-link{
         font-size: calc(6.5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
     }
     .list-text{
         font-size: calc(6.5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
     }
     .showreel{
         font-size: 10px;
         position: absolute;
         top: 68%;
         right: 15%;
         width: 40%;
         cursor: pointer;
     }
     .article-text{
         font-size: 8px;
         line-height: 11px;
     }
     .article-title{
         letter-spacing: 2px;
         font-size: 8px;
     }
     .fluid{
         background: #1f1f1f;
         position: relative;
         display:flex;
         flex-wrap:wrap;
     }
     .mobile-Menu{
        max-width: 60%;
        flex-basis: 60%;
        height: 100vh;
        z-index: 5;
        background: #1f1f1f;
        transform: translateX(-100%);
        transition: all .6s ease-in-out;
     }
     .mobileActive .mobile-Menu{
         transform: translateX(0);
         transition: all .6s ease-in-out;
     }
     .mobile-Content{
         width: 100%;
         flex-basis: 100%;
         height: 100vh;
         background: darkgray;
         transition: all .6s ease-in-out;
     }
     .mobileActive .mobile-Content{
         transform: translateX(60%) scaleY(.8);
         transition: all .6s ease-in-out;
     }
     #mobileButton{
        display: inline-block;
     }
     #desktopButton{
         display: none;
     }
     .inbornMenuler{
         max-width: 100%;
         flex-basis: 100%;
         height: 100vh;
         text-align: center;
         margin-top: 6px;
         box-sizing: border-box;
         padding-top:30vh;
         margin:0;
     }
     .homePageLeft {
    display: none;

}
.textApartado {
    font-size: 20px;
    font-family: 'Agency-Regular';
    /* width: 600px; */
    color: white;
    margin: 0 auto;
    text-align: justify;
    padding: 140px 40px;
    line-height: 40px;
    text-transform: uppercase;
    opacity: 0.8;
}
.titleApartado {
    font-size: 16px;
    font-family: 'Agency-Regular';
    color: #3bfdff;
    position: absolute;
    top: 18px;
    text-transform: uppercase;
    text-align: right;
    left: 0;
    right: 45px;
    
    z-index: 9999;
    background-color: none; 
    padding: 0px; 
}
     .drd-link,.drd-linkIcon{
         max-width: 100%;
         flex-basis: 100%;
         text-align: center;
         font-size:calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
         box-sizing: content-box;
         padding:15px 0;
         margin:0;
         transition: color .5s ease-in-out;
     }
     .drd-link:hover{
         color:white;
     }
     .mble-bttn{
         position: absolute;
         top:15px;
         left:13px;
         width: 30px;
         height: 40px;
         z-index: 99;
         cursor: pointer !important;
         display: inline-block;
     }
        .mble-bttnDrd{
         position: absolute;
         top:15px;
         left:13px;
         width: 30px;
         height: 40px;
         z-index: 99;
         cursor: pointer !important;
         display: inline-block;
     }
     @keyframes favoriProjeUp{
        from{
            position: absolute;
            bottom: -14%;
        }
        to{
            position: absolute;
            bottom: 14%;
        }
    }
     .homePageRight a{
         position: absolute;
         left: 4%;
         bottom: 14%;
         font-size: 9px;
         display: none;
     }
     .homePageRight a::before {
         position: absolute;
         right: 14px;
         bottom: 2px;
         content: "▲";
         display: inline-block;
         transform: rotate(90deg);
     }
     .homePageLeft .leftSlogan{
         bottom: -21%;
         left: 25%;
     }
     .sloganline {
         position: relative;
         top: -3px;
         width: 59px;
         display: inline-block;
         border-top: 1px solid white;
     }
     @keyframes showreel{
        from{
            position: absolute;
            top:105%;
        }
        to{
            position: absolute;
            top:65%;
        }
    }

    .homePageLeft .leftSlogan {
    
    font-size: 8px;
   
}

     .showreel{
        display: none;
        cursor: pointer;
        font-size: 8px;
        letter-spacing:2px;
        color:white;
        position: absolute;
        top:65%;
        right:8%;
        z-index:2;
        transition: all 1.2s  ease-in-out !important;
    }
    .showreel span{
        font-family:'Graphik-Medium';
        font-weight: normal;
        position: relative;
        top:-10px;
        color:white;
    }
    .showreel img{
        width: 33%;
        height: 25px;
        
    }
     /* Contact Page */
     .line-height .list-item,
     .line-height .list-text{
        font-size:calc(7.5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
     .list-item{
        width: 10%;
        flex-basis: 10%;
        font-size: 8px;
    }
    .list-text{
        width: 90%;
        flex-basis: 90%;
        height: auto;
        color: white;
        font-weight: normal;
        font-family: 'Graphik-Regular';
        font-size: 13px;
        padding: 0px 0;
        font-size: calc(1px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        margin: 0;
        padding: 3px 0;
        font-size: 7px;
    }
    .article, .articletwo {
        height: 160px;
    }
    .list-item {
        padding: 7px 0;
    }
    .list-text-2{
        font-size: calc(6px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
        padding: 10px 0;
        line-height: 0px;
    }
    /*İlerici Projeler */
    .banner-about a{
        position: absolute;
        top: 50%;
        left: -45px;
        font-size: 9px;
    }
    .banner-social a{
        font-size: 9px;
        left: -64px;
    }
    .thumnail span, .graphical span {
        font-family: 'Graphik-Medium';
        font-size: 8px;
        color: white;
        display: inline-block;
        width: 100%;
        margin-top: 10px;
        letter-spacing: 0;
    }

    .product-one-row {
        width: 95%;
        margin-left: 5%;
        height: 10%;
        border-bottom: 2px solid white;
        position: absolute;
        overflow: hidden;
        top: 40vh;
        animation: product-animation1 1s ease;
        overflow: hidden;
    }
    .product-two-row {
        width: 95%;
        margin-left: 5%;
        height: 10%;
        border-bottom: 2px solid white;
        position: absolute;
        top: 50vh;
        overflow: hidden;
        animation: product-animation2 1s ease;
    }
    .product-three-row {
        width: 95%;
        margin-left: 65%;
        height: 10%;
        overflow: hidden;
        border-bottom: 2px solid white;
        position: absolute;
        top: 60vh;
        animation: product-animation3 1s ease;
    }
    .product-name, .product-year{
        font-size: 8px;
        letter-spacing: 1px;
        font-size: calc(4px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .product-year{
        position: absolute;
        bottom: 23px;
        font-size: calc(18px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .banner-cuff{
        font-size: calc(6px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
    }
    .altınOruncek{
        width: 12%;
    }
    .newsInfo .newsTitle {
        color: goldenrod;
        font-family: 'Graphik-Medium';
        font-size: 13px;
        padding: 0px 0;
        line-height: 170%;
        margin-left: 7%;
        margin-right: 7%;
        letter-spacing: 5px;
        margin-top: 0;
        text-transform: capitalize;
    }
    .newsInfo .newsImage {
        width: 86%;
        height: auto;
        margin: 10px auto 0 auto;
        padding-bottom: 6%;
    }
    @keyframes buttonAnimation{
        from{
            top: 39vh;
            opacity: 0;
        }
        to{
            opacity: 1;
            top: 37vh;
        }
    }
    .newsInfo .nextnews,
    .newsInfo .prevnews{
        top: 37vh;
        right: 2%;
    }
}

.newsInfo .newsContent{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.buttonHidden{
    display: none;
}


.productUp{
    animation: productUp 1s ease-in-out;
    position: relative;
    top: -100vh;
}
.productDown{
    animation: productDown 1s ease-in-out;
    position: relative;
    top: 0vh;
}

@media (min-width: 576px){
    .drd-link::before{
        content: '';
        position: absolute;
        top:0;
        left: 10px;
        width: 3px;
        opacity: 0;
        height: 3px;
        background: #3bfdff;
        display: inline-block;
        transition: all .5s ease;
        border-radius: 50%;
    }
    .beforeDown::before{
        position: absolute;
        top:35px;
        opacity: 1;
    }
}
@keyframes homePage_text_up{
    from{
        position: absolute;
        bottom: -200px;
    }
    to{
        position: absolute;
        bottom:25px;
    }
}


    .logocenterAll {display: block;
    width: 100%;}
.logocenterMob {display: none}

/* MEDIA QUERY DRD */

/* DE 0 A 375 */
@media only screen and (min-width: 0px) and (max-width: 414px){

        .sRHomeMobile {display: block;}
/*@media only screen and (max-width: 767px) {*/
.item { padding: 0.4em;}

.forceWhite {color:  #202023 !important;}
    
    .mble-bttnDrd{
        display: block;
        pointer-events: auto;
        position: absolute;
        top: 15px;
        left: 15px;
        width: 40px;
        height: 40px;
        z-index: 900;
        cursor: pointer !important;
    
    }


    .apHomePageLeft .apLeftSlogan {

    top: 110vh;

    font-size: 7px;
    margin-left: -15px;
   
}
.slick-dots li button {
   
    display: none !important;
   
}
    .apMainBox {margin: 10px 10px 10px 10px;}

    .galleryDrd {
     
     opacity: 0.95;
     filter: grayscale(0);
    
    }


    #showReelTitle {
        font-size: 15px;
        bottom: 18% !important;
        left: 2%;
        letter-spacing: 2px;
        transform: rotate(0deg);
    }
    
    #cargaVideosTitle {
     font-size: 10px;
     letter-spacing: 3px;
   }


   .apCloseCargadorVideos {
        width: 20px;
        height: 20px;
    }

   .homeLogo { /*  border: 1px solid red !important;*/}

    #showVideoGlobal {width: 100%;}

    .datos {
        left: 0%;
        font-size: 12px !important;
    }

    .datosNa {letter-spacing: 10px !important;}


    .datosTl {letter-spacing: 5px !important;}

    .datosAd, .datosAd2 {letter-spacing: 5px !important;}
    
    .apTitle {
        font-size: 30px;
        letter-spacing: 10px;
    }

    .apTitleBox {margin-left: 7%;}
    
    .apSubTitle {
        margin-top: 4%;
       flex-direction: column;
    }

    .apSubTitle div {
       margin-right: 2%;
       font-size: 11px;
    }

    .twoRowLeft {
        flex: none;
        width: 100%;
        margin: 0px 0px 0px 0px;
        position: relative;
        cursor: pointer;

    }

    .twoRowRightLarge {
        flex: none;
        width: 100%;
        margin: 0px 0px 0px 0px;
       
    }

    .apRow {margin: 10px 0px;}

    .twoRowRight {
        flex: none;
        width: 100%;
        margin: 0px 0px 0px 0px;
        position: relative;
        cursor: pointer;
    
    }
 .apClose {
        z-index: 9000;
        height: 20px;
        width: 20px;
        filter: brightness(0.2);
            right: 30px;
    }


    .lastTitle {
        margin-left: 5%;
        font-size: 30px;
        margin-top: 80px;
    }
    
    .lastSubTitle {
        margin-left: 15%;
        font-size: 12px;
        margin-bottom: 40px;
    }

    .apLogoEnd a {font-size: 10px;}

    .apLogoEnd img {
        width: 100px;
        height: 100px;
     }
    
    .apLogoEnd {padding-top: 200px;}
    
    .lastFooter img{max-width: 20px;
        width: 20px;
        height: 20px;}

    .video-responsive {width: 90vw !important;
    height: 60vh;}

      .lastTendences {display: none;}

      .newSection {flex-wrap: wrap;
        width: 90%;}
     

      .ns1 {flex: 100%;}
      .nSparra {
   max-width: 100%;
    font-size: 14px;
    
    margin-top: 30px;
    
}

.apTitle {margin-top: 40px;}
.nSButton {max-width: 100%;}
.ns2 {
    flex: 0px;
    display: none;
}
.ns3 {
    flex: 100%;
    padding-left: 0;
}
.apVerS { font-size: 14px;}
.apVerSub {
   
    max-width: 100%;
    
}
.textRow {
    /* font-family: Dosis; */
    letter-spacing: 4px;
    font-size: 15px;
    margin-top: 40px !important;
    font-family: 'Agency-Regular';
    /* left: 20%; */
    margin-left: 20px !important;
    margin-bottom: 40px !important;
}
.txtImage {
    
    font-size: calc(11px + 4 * ((100vw - 600px) / 600));
   
    letter-spacing: 2px;
   
    width: 100%;
    opacity: 1;
    pointer-events: none;
    
    padding-right: 0px !important;
}

.hideContact {
    margin-left: 7%;
    font-size: 12px;
    letter-spacing: 6px;
    width: 100%;
    
   
}

.hideContact a {
    margin-left: 0px;
    
    border-left: 0px dotted;
    border-right: 0px dotted;
    
    padding-left: 0px;
    line-height: 30px;
    
}

.crossArrow {display: none}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 40px !important;
    line-height: 1;
    opacity: .75;
    color: #3bfdff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-next {
    right: -50px !important;
}
.slick-prev {
    left: -50px !important;
}
.apNum {

    display: none;
   
}
.logocenterAll {display: none}
.logocenterMob {display: block}
.lastFooter {
 
    margin-top: 25%;
  
    margin-bottom: 10%;
   
}
.datos div {
    padding: 4px 0px;
}
}


/*@media only screen and (min-width: 768px) and (max-width: 1023px){
    
}*/
/* DE 0 A 768 */
@media only screen and (min-width: 415px) and (max-width: 768px){
/*@media (max-width: 768px){*/

.sRHomeMobile {display: block;}
.butMobile {
 
    font-size: 25px !important;
  
}
.firstWordMobile {
  
    font-size: 40px;
   
}
 .firstWordMobile2 {
 
    font-size: 30px;
  
}
    .logocenterAll {display: none}
.logocenterMob {display: block}
    .slick-dots li button {
   
    display: none !important;
   
}
    .galleryDrd {
     
     opacity: 0.85;
    
    }
    

    #showVideoGlobal {width: 90%;}
    
    .apSubTitle div {font-size: 11px;}

    .video-responsive {
        width: 100vw;
        height: 60vh;
    }
    
    .content-item {display: none;}

    .drd-link {
        font-size: 13px !important;
        color: red !important;
    }

    .special-link {
      font-size: 13px !important;
        color: red !important;
    }

    .menuPC {width: 400px;}
    
    #drd-menu {display: none;}

    .mble-bttnDrd{
        display: block;
        pointer-events: auto;
        position: absolute;
        top: 30px;
        left: 25px;
        width: 40px;
        height: 40px;
        z-index: 900;
        cursor: pointer !important;
    
    }

    .homeLogo {
        width: 140px !important;
        height: 140px !important;
   }

    .lastTendences {display: none;}

   
    .apHomePageLeft .apLeftSlogan {
        top: 120vh;
        margin-left: -10px;
        font-size: 9px;
    }

    .apMainBox {margin: 10px 10px 10px 10px;}

    .apClose {
        z-index: 9000;
        height: 25px;
        width: 25px;
        filter: brightness(0.2);
            right: 30px;
    }

    .txtImage {
        font-size: calc(12px + 4 * ((100vw - 600px) / 600));
        left: 3%;
        letter-spacing: 2px;
        width: 85%;
        opacity: 1;
        pointer-events: none;
        padding-right: 10px !important;
    }

    .forceWhite {color: black !important;}
.apTitle {    font-size: 45px;}
.nSparra {
   
    font-size: 15px;
   max-width: 80%;
    margin-top: 30px;
   
}
.nSButton {  /*max-width: 75%;*/}


}
   

/* DE 0 A 1024 */
@media only screen and (min-width: 769px) and (max-width: 1024px){

/*@media (max-width: 1024px){*/

    .apClose {
        width: 20px;
        height: 20px;
        right: 30px;
    }

    .apMainBox {margin: 70px 70px 70px 70px;}

    .apHomePageLeft .apLeftSlogan {
         top: 110vh;
         font-size: 8px;
         margin-left: -8px;
    }

    .article-title {font-size: 16px;}

    .drd-link {font-size: 13px !important;}

    .special-link {font-size: 13px !important;}


     .menuPC div a {font-size: 13px !important;}
     .menuPC div a span {font-size: 12px !important;}
     .menuPC {
        width: max-content;
      
        line-height: 15px;
      }


    #showReelTitle {
        font-size: 17px;
        bottom: 30%;
        left: 0%;
    }

    .datos {
        width: 50%;
        left: 25%;
        font-size: 15px;
    }

    .datos div {padding: 4px 0px;}
    
    .datosTx {
        font-size: 15px;
        max-width: 450px;
       }

       .video-responsive {
    width: 80vw;
    height: 70vh;
 
 
}
.slidecontainer {bottom: 60px;}
 .specialHeigh {height: 240px;}
     .parrTxTAp {font-size: 10px;
     line-height: 15px;
 letter-spacing: 1.5px;}
  .minitit {bottom: -15px;
  font-size: 10px;}
 
    .apTitle {
    font-size: 40px;
   
    margin-top: 100px;}

.nSButton { max-width: 65%;}
.nSparra {
   
    font-size: 13px;
   
    max-width: 70%;
  
}
}

/* DE 0 A 1280 */
@media only screen and (min-width: 1025px) and (max-width: 1280px){
/*@media (max-width: 1280px){*/
.nSparra {  
    font-size: 13px;
 
    max-width: 75%;
    }
    .apTitle {font-size: 45px;
        margin-top: 110px;}

    .article-title {font-size: 14px;}
    .item {padding: 0.5em;}

    .txtImage {
      font-size: calc(9px + 4 * ((100vw - 600px) / 600));
     }

       .apMainBox {
        margin: 70px 70px 70px 70px;
      }
    .apClose {
        width: 20px;
        height: 20px;
         right: 30px;
     }
 
   .video-responsive {
    width: 80vw;
    height: 80vh;
     }

    .apHomePageLeft .apLeftSlogan {
        top: 120vh;
        margin-left: -10px;
        font-size: 8px;
    }

    .apLogoEnd img {
        width: 120px;
        height: 120px;
    }


.homeLogo {
    width: 120px;
    height: 120px;
    opacity: 1;
   
}

 .menuPC {width: max-content;
    line-height: 18px;
    
  }
.menuPC div a  {
  
    font-size: 14px !important;
}  
.menuPC div a span {
  
    font-size: 13px !important;
}

.slidecontainer {bottom: 70px;}
 .specialHeigh {height: 300px;}
     .parrTxTAp {font-size: 12px;
     line-height: 20px;}


}

/* DE 1281 HASTA 1366 */
@media only screen and (min-width: 1281px) and (max-width: 1366px){
 .apMainBox {
      margin: 80px 90px 80px 90px;
      }
   .apTitle {font-size: 45px;}
   .nSparra {font-size: 14px;}
      .video-responsive {
    width: 75vw;
    height: 75vh;
    }


    .specialHeigh {height: 300px;}

     .menuPC div a {font-size: 14px !important;}
     .menuPC div a span {font-size: 13px !important;}
     .menuPC {
        width: max-content;
        /*width: 550px;*/
        line-height: 20px;
      }

}

/* DE 0 A 1366 */
/*@media (max-width: 1366px){

   
.video-responsive {
    width: 75vw;
    height: 75vh;
    }

}*/

/* DE 0 A 1600 */
@media only screen and (min-width: 1367px) and (max-width: 1600px){
/*@media (max-width: 1600px){*/
    .specialHeigh {height: 350px;}
    .minitit {bottom: -25px;}
    .parrTxTAp {font-size: 14px;}

    .apHomePageLeft .apLeftSlogan {
     top: 105vh;
     font-size: 10px;
     margin-left: 10px;
    }

    .article-text {
        font-size: 12px;
        margin-left: 1px;
    }

   
     .menuPC div a {font-size: 15px !important;}
     .menuPC div a span {font-size: 14px !important;}

     .menuPC {line-height: 20px;
        width: max-content;}
     .showReelLogo {max-width: 100px; left: 3%;}
     .showContactLogo {max-width: 100px; left: 3%;}
     .apTitle {font-size: 50px;}
}
    
@media only screen and (min-width: 1601px) and (max-width: 5000px){
.slick-dots {bottom: -70px !important;}

}