#menus{
  position: absolute;
  background: #c6bfbf;
  background: url("https://wdigital.site/lastsite/assets/img/menubg.png"); 
  background-size: cover;
  width: 100%;
  height: 110%;
  z-index: 9999999999999;
  left: 120%;
  transform: skewX(20deg);
  opacity:1;
}


#insideformdiv{
  display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: white;
    font-weight: bold;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


#logonav{
  color: rgb(255,255,255);
  background-color:transparent;
}
#logonava{
  max-width: 50%;
} 
#navbardiv{
  position: fixed; 
  width: 94%; 
  height: auto; 
  margin-top: -5.5%; 
  z-index: 999999999;
}

#bgdiv1{
  position: fixed;
  width: 100%;
  height: auto;
  margin-top: -6%;
}
#textgenerater{
  height: 100%;
}

#yazsil{
  opacity: 1; 
  box-shadow:0px 0px 15px 10px grey;
  width:75vh;
  padding:10px;
  color:black;
  background:white;
  border-radius:5px;
  position:fixed;
  left:50%;
  transform: translate(-50%, -100%);
  top:50%;
  font-weight: bold;
}
#typed{
  font-size:1.5vw;
}
#dropdowndiv{
  position: absolute;    
  top: 110vh;    
  width: 100%;    
  height: 100vh; 
  z-index: 9999999;
}
#piano{
  position: absolute;    
  width: 100%;    
  height: 6vh;    
  background-color: #021422;    
  color: white;    
  z-index: 9999999;    
  font: normal 400 31px/1 'Josefin Sans', sans-serif; 
  padding-top: 6px; 
  margin-bottom: 2vh;
}
#tablefacebook{
  margin-top: 8%; 
  margin-left: 17%; 
  border-radius: 0 0 0 225px; 
  width: 72%; 
  height: 59vh;
}
#facebooklogo1{
  position: absolute; 
  width: 12%; 
  top: 11%; 
  right: 44%;
}

#pagefacebookdiv{
  margin-top: 1vh;
}

#pagefacebook2 i {
  margin-right: 2vh;
}

#googleimg1{
  position: relative;
  width: 26%;
  z-index: 1;
  margin-top: 3%;
  left: 20%;
  filter: drop-shadow(2px 3px 1px black);
}
#facebooksearch1{
  position: absolute; 
  left: 8px; 
  top: 17%; 
  border-radius: 34px; 
  width: 13%; 
  height: 67%; 
  border: 0px; 
  background-color: transparent;
}
#gdnbutton{
  position: relative; 
  margin-left: 12vh;
}

#div1{
  position: absolute; 
  margin-left: 12%; 
  width: 20%;
  top: 25%;
}
#div2{
  position: absolute; 
  margin-left: 27%; 
  width: 20%;
}
#div3{
  position: absolute; 
  margin-left: 42%; 
  width: 20%;
}
#div4{
  position: absolute; 
  margin-left: 57%; 
  width: 20%;
}
#div5{
  position: absolute; 
  margin-left: 72%; 
  width: 20%;
}
#div6{
  position: absolute; 
  margin-left: 87%;
  width: 20%;
}

.socialicons1{
  color: black;
  margin-top: 20%; 
  transition: .5s;
}
#medyadijital{
  width: 20%; 
  height: auto; 
  position: absolute; 
  left: 30%;
  font-size: 32px; 
  color: white;
}
#performansdijital{
  width: 30%; 
  height: auto;
  left: 53%; 
  position: absolute; 
  font-size: 41px; 
  color: white; 
  font-weight: bold;
}


#indexdijital{
  position: relative;
  width: 100%;
  height: auto; 
  margin-top: 21%; 
  margin-left: 9%;
}
#advvertorial1{
  padding-top: 1%; 
  cursor: pointer; 
  width: 25%; 
  height: 10vh; 
  margin-left: 45%; 
  position: absolute; 
  background-color: white; 
  font-size: 26px; 
  box-shadow: inset -11px -11px 9px -6px rgba(0,0,0,0.75); 
  font-weight: bold;

}
#native1{
  padding-top: 1%; 
  cursor: pointer; 
  width: 25%; 
  height: 10vh; 
  margin-left: 15%; 
  position: absolute; 
  background-color: white; 
  font-size: 26px; 
  box-shadow: inset -11px -11px 9px -6px rgba(0,0,0,0.75); 
  font-weight: bold;
}

#programmatic1{
  padding-top: 1%; 
  cursor: pointer; 
  width: 25%; 
  height: 10vh; 
  margin-left: 45%; 
  position: absolute; 
  background-color: white; 
  margin-top: 7%; 
  font-size: 26px; 
  box-shadow: inset -11px -11px 9px -6px rgba(0,0,0,0.75); 
  font-weight: bold;
}

#affilate1{
  padding-top: 1%; 
  cursor: pointer; 
  width: 25%; 
  height: 10vh; 
  margin-left: 15%; 
  position: absolute; 
  background-color: white; 
  margin-top: 7%; 
  font-size: 26px; 
  box-shadow: inset -11px -11px 9px -6px rgba(0,0,0,0.75); 
  font-weight: bold;
}
#video1{
  padding-top: 1%; 
  cursor: pointer; 
  width: 25%; 
  height: 10vh; 
  margin-left: 45%; 
  position: absolute; 
  background-color: white; 
  top: 80%; 
  margin-top: 14%; 
  font-size: 26px; 
  box-shadow: inset -11px -11px 9px -6px rgba(0,0,0,0.75); 
  font-weight: bold;
}
#content1{
  padding-top: 1%; 
  cursor: pointer; 
  width: 25%; 
  height: 10vh; 
  margin-left: 15%; 
  position: absolute; 
  background-color: white; 
  top: 80%; 
  margin-top: 14%; 
  font-size: 26px; 
  box-shadow: inset -11px -11px 9px -6px rgba(0,0,0,0.75); 
  font-weight: bold;
}
#childpiano{
  position: absolute; 
  top: 12%; 
  width: 31%; 
  left: 35%; 
  height: auto; 
  background-color: transparent;
}

.dropdownmenu{
  color: white;
}
.dropdownmenu h1{
  margin-top: -19%;
}
#ghost h1{
  background-color: #382245;    
  transform: skewX(-20deg);    
  margin-left: -49px;    
  max-width: 700px;
}
#ghost h1 div {
  margin-left: 4vh;
}
#google{
  z-index: 9999; 
  position: absolute; 
  left: 40.2%!important;
  top:62%!important;
}
#googleimg{
  width: 320px;
  border-radius: 4px;
}
#fbpartner{
  z-index: 9999; 
  position: absolute; 
  
  left: 39%!important;
  top:45%!important;
}
#fbpartnerimg{
  width: 350px;
  border-radius: 4px;
}
#formlabel{
  display: block; 
  width: 100%; 
  height: calc(2.5em + .75rem + 2px); 
  font-size: 1rem; 
  font-weight: 400; 
  line-height: 1.5; 
  color: white; 
  font-weight: bold; 
  border-radius: .25rem; 
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
#gonderbutton1{
  background-color: #2c2f31;  
  border-color: #a9a9a9;
}

#footerindex{
  z-index: 99999999; 
  position: fixed;bottom: 0; 
  width: 100%;
  height: 30px; 
  background: linear-gradient(180deg, rgba(255,255,255,0.6727065826330532) 0%, rgba(10,10,10,0.8687850140056023) 0%, rgba(2,2,2,1) 31%, rgba(0,0,0,1) 100%);
  font-family: 'Montserrat', sans-serif; 
}
#footerindex h5 span{
  font-size: 12px;
}

#contactform div{
  position: relative;
  width:46vh;
}






























@media screen and (min-width: 1800px){
  #overlay{
    height: 105%;
  }
    #overlayiletisim{
    height: 105%;
  }
  #overlayhakkimizda{
    height: 105%;
  }
  #piano{
    padding-top: 13px;
  }
}

#overlay {
  display:none;
  position: absolute;
  z-index: 999999999999;
  background: black;
  opacity:.7;
  width: 100%;
  height: 110%;
}
#overlayhakkimizda {
  display:none;
  position: absolute;
  z-index: 9999999999999;
  box-shadow: inset 0 0 0 0 #7f4c98 ;
  opacity:.5;
  width: 100%;
  height: 110%;
   transition: all ease .5s;
   animation: hakkimizdaoverlay .5s ;
}

@keyframes hakkimizdaoverlay{
  0%{box-shadow: inset 0 0 0 0 #7f4c98; }
  100%{box-shadow: inset 1000px 100px 100px #7f4c98;}
}

#overlayreferans{
  display:none;
  position: absolute;
  z-index: 9999999999999;
  box-shadow: inset 0 0 0 0 #f44337 ;
  opacity:.5;
  width: 100%;
  height: 100%;
   transition: all ease .5s;
   animation: referanslarımızoverlay .5s ;
}
@keyframes referanslarımızoverlay{
  0%{box-shadow: inset 0 0 0 0 #f44337; }
  100%{box-shadow: inset 1000px 100px 100px #f44337;}
}


#overlayhizmetlerimiz {
  display:none;
  position: absolute;
  z-index: 9999999999999;
  box-shadow: inset 0 0 0 0 #f32a80 ;
  opacity:.5;
  width: 100%;
  height: 100%;
   transition: all ease .5s;
   animation: hizmetlerimizoverlay .5s ;
}
@keyframes hizmetlerimizoverlay{
  0%{box-shadow: inset 0 0 0 0 #7f4c98; }
  100%{box-shadow: inset 1000px 100px 100px #f32a80;}
}

#overlayiletisim {
  display:none;
  position: absolute;
  z-index: 9999999999999;
  box-shadow: inset 0 0 0 0 #25d366 ;
  opacity:.5;
  width: 100%;
  height: 110%;
  transition-delay: .5s;
   transition: all ease .5s;
   animation: iletisimoverlay .5s ;
}
@keyframes iletisimoverlay{
  0%{box-shadow: inset 0 0 0 0 #7f4c98; }
  100%{box-shadow: inset 1000px 100px 100px #25d366;}
}



#submenu{
  position: absolute;
  background: url("https://wdigital.site/lastsite/assets/img/menubg.png"); 
    width: 100%;

  height: 100%;
  left: 2600px;
  z-index: 9999999999999;
  transform: skewX(0deg);
  opacity:1;
  background-size: cover;
  border-left: 15px groove #7f4c98;
  transition: .2s;
}
#submenu span p{
  filter: hue-rotate(90deg);
}
#submenu-icon{
    position: absolute;
  background: url("https://wdigital.site/lastsite/assets/img/menubg.png"); 
  background-size: cover;
  border-left: 15px groove #f32a80;
  width: 100%;
  height: 100%;
  left: 2600px;
  z-index: 9999999999999;
  transform: skewX(0deg);
  opacity:1;
  transition: .2s;
}
#submenu-contact{
  position: absolute;
  background: url("https://wdigital.site/lastsite/assets/img/menubg.png"); 
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 9999999999999;
  transform: skewX(0deg);
  opacity:1;
  cursor:default;
  background-size: cover;
  border-left: 15px groove #25D366;
  transition: .2s;
}
#submenu-references{
  position: absolute;
  background: url("https://wdigital.site/lastsite/assets/img/menubg.png"); 
  width: 100%;
  height: 100%;
  left: 2600px;
  z-index: 9999999999999;
  transform: skewX(0deg);
  opacity:1;
  cursor:default;
  background-size: cover;
  border-left: 15px groove #f44337;
  transition: .2s;
}

#contactwithus{
width: 100%;
max-width: 200px;
background-color:#19703c;
color: #fff;   
position: absolute; 
height: 10vh;
top: -23%;
left: -11.9%; 
transform: skewX(20deg);
cursor: pointer;


}

#contactwithus:hover{
  background-color: #25d366;
}
.image1{
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 1%;
    left: 0%;
    background: #ffffffd4;
    z-index: 2;
    box-shadow: 0px 0px 5px 2px rgba(150,150,150,1);
    border: 1px solid #ffffff;
}


.image2{
  position: absolute;
  width: auto;
  height: auto;
  right: 48%;
  z-index: 1;
  top: 114%;
  box-shadow: -11px -7px 24px 6px rgba(150,150,150,1);
  border: 1px solid #ffffff;
  filter: blur(2px);
}



#submenu-Facebook{
  position: absolute;
  background: url("https://wdigital.site/lastsite/assets/img/menubg.png"); 
    width: 100%;
  height: 100%;
  left: 2600px;
  z-index: 9999999999999;
  transform: skewX(0deg);
  opacity:1;
  background-size: cover;
  border-left: 15px groove #566680;
  transition: .2s;
}
#submenu-Facebook span p{
  filter: hue-rotate(90deg);
}

#submenu-Google{
  position: absolute;
  background: url("https://wdigital.site/lastsite/assets/img/menubg.png"); 
    width: 100%;
  height: 100%;
  left: 2600px;
  z-index: 9999999999999;
  transform: skewX(0deg);
  opacity:1;
  background-size: cover;
  border-left: 15px groove #566680;
  transition: .2s;
}
#submenu-Google span p{
  filter: hue-rotate(90deg);
}
#submenu-Media{
  position: absolute;
  background: url("https://wdigital.site/lastsite/assets/img/menubg.png"); 
  width: 100%;
  height: 100%;
  left: 2600px;
  z-index: 9999999999999;
  transform: skewX(0deg);
  opacity:1;
  background-size: cover;
  border-left: 15px groove #566680;
  transition: .2s;
}
#submenu-Media span p{
  filter: hue-rotate(90deg);
}

#searchform{
  width:300px;
}
.txtSearch{
  width:160px; 
  margin:-2px 0 9px 9px; 
  background-position:0 -29px;
}
.txtSubscribe, .txtSearch{
  width:80%; 
  height:26px; 
  float:left; 
  background:url('http://o1308.hizliresim.com/1d/3/r2znp.png') no-repeat; 
  margin-top:10px; 
  padding-left:40px;
}
.input-text{
  font-size:11px; 
  border:1px solid #dadada; 
      border-radius: 24px;
    height: 44px;
    background-color: #ffffff9c;

  box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.07) inset;
}

#searchGDN{
    display: inline-block;
    border-radius: 5px;
    border: 1px solid grey;
    width: 26%;
    height: 7vh;
    background-color: white;
    font-size: 16px;
    padding: 8px;
    font-family: arial,sans-serif!important;
    margin-right: 26px;
}
#searchGDN:hover{

  border: 1px solid blue;
  cursor: pointer;


}

#searchgoogle{
    display: inline-block;
    border-radius: 5px;
    border: 1px solid grey;
    width: 26%;
    height: 7vh;
    background-color: white;
    font-size: 16px;
    padding: 8px;
    font-family: arial,sans-serif!important;
}

#searchgoogle:hover{

  border: 1px solid blue;
  cursor: pointer;


}

.pagefacebook{
    display: inline-block;
    width: 30%;
    color: black;
    height: auto;
    border: 2px solid #dbdbdb;
    background-color: white;
    margin-left: 0vh;
    margin-right: -1vh;
    margin-top: 9vh;
    padding: 10px 49px 10px 12px;
    text-decoration: underline;
    font-size: 19px;
    font-weight: bold;
}

.pagefacebook2{
    display: inline-block;
    width: 30%;
    height: auto;
    border: 2px solid #dbdbdb;
    background-color: #ffffff7a;
    margin-left: 0vh;
    margin-right: -1vh;
    margin-top: 0vh;
    padding: 10px 49px 7px 12px;
    text-decoration: underline;
    font-size: 16px;
    font-weight: bold;
    transition: .5s;
    cursor: pointer;
}
.pagefacebook2:hover{
  transform: scale(1.2);

}
.pagefacebook2:active{
  background-color: #3a599796;
}
.pagefacebookNull{
    display: inline-block;
    width: 30%;
    height: auto;
    margin-left: 0vh;
    margin-right: -1vh;
    margin-top: 0vh;
    padding: 10px 49px 10px 12px;
    text-decoration: underline;
    font-size: 16px;
    font-weight: bold;
}

#wiser {
    height: 10vh;
    width: auto;
    margin-top: 1%;
    font-size: 32px;
    transition: .7s all;
}

#wiserFB {
    height: 10vh;
    width: auto;
    margin-top: 1.3%;
    font-size: 22px;
    transition: .7s all;
    text-decoration: none;
}
#wiser2{
    height: 10vh;
    width: auto;
    font-size: 32px;
    transition: .7s all;

}

@media screen and (min-width: 1800px){
  #wiser {
    margin-top:1.3%!important;
  }
   #wiser2 {
    margin-top:1.3%!important;
  }
  #submenu-contact{
    height: 105%;
  }
  #overlayiletisim{
    height: 105%;
  }
}


#contactwithus1{

text-align: center;
transform: skewX(-20deg);
font-size: 22px;
font-weight: 600;
margin-top: 11px;

}
@media screen and (min-width: 1600px){

  #contactwithus{
top: -20%;
left: -16.3%; 
}
  #contactwithus1{
margin-top: 30px;
}
}


@media screen and (min-width: 1800px){
#contactwithus {
      top: -29%;
    left: -13.4%;
}
}

#contactform{
  position: absolute;
  left: 2600px;
  z-index: 99999999;
  transition: .7s;
  top: 182%;
}
#attachment{

  display: none;
}

#isBasvuru{
  width: 89%; 
  position: absolute;
  bottom: -3%; 
  left: 7%;
}
#istanbul{
  font-size: 14px;
  margin-left: 5vh;
}
#izmir{
   font-size: 14px;
    margin-left: 24vh;
    margin-top: 0%;
}



@media screen and (min-width: 1600px) {
    #piano{
      

    }
    #childpiano{

      

    }

}
@media screen and (min-width: 1900px) {
    #piano{
      top: -5vh!important;

    }
    #childpiano{

      
    }

}

#indexbg{
	position: absolute;
    background-size: cover;
    width: 100%;
    height: 79vh;

}

#bermuda{
    z-index: 2;
    width: 63%;
    height: 10vh;
    position: absolute;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8155637254901961) 57%, rgba(0,0,0,1) 100%);
    margin-bottom: 1vh;
    border-radius: 3px;
    transition: .5s all;
    left: 14%;
    box-shadow: 0px 2px 12px 4px rgba(255, 255, 255, 0.75);
}


#bermuda:hover{
  left:16%;

}
#bermuda a {
	text-decoration: none;
	color: white;
  font-size: 30px;
  transition: .3s;
}
#bermuda a:hover{
    text-decoration: none;
    color: #757bff;
    cursor: pointer;
  }
#bermudaghost{
  display: none;
	z-index: 1;
	width: 100%;
	height: 10vh;
	margin-left: 4%;
	position: absolute;
	background-color: #041519;
	margin-bottom: 1vh;
	transform: skewX(-15deg);
	border-right: 8px solid #00778d;
  border-radius: 3px;  
    transition: .7s;
}


#bermuda2{
    z-index: 2;
    width: 63%;
    height: 10vh;
    position: absolute;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8155637254901961) 57%, rgba(0,0,0,1) 100%);
    margin-bottom: 1vh;
    border-radius: 3px;
    transition: .5s all;
    left: 27%;
    box-shadow: 0px 2px 12px 4px rgba(255, 255, 255, 0.75);
}

#bermuda2:hover{
    left:29%;
  
}
#bermuda2 a {
	text-decoration: none;
	color: white;
	font-size: 28px;
  transition: .3s;
}
#bermuda2 a:hover{
	text-decoration: none;
	color: #757bff;
	cursor: pointer;
}
#bermudaghost2{
  display: none;
	z-index: 1;
	width: 100%;
	height: 10vh;
	margin-left: 4%;
	position: absolute;
	background-color: #041519;
	margin-bottom: 1vh;
	transform: skewX(-15deg);
	border-right: 8px solid #00778d;
  border-radius: 3px;
    transition: .7s;
}


#bermuda3{
    z-index: 2;
    width: 63%;
    height: 10vh;
    position: absolute;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8155637254901961) 57%, rgba(0,0,0,1) 100%);
    margin-bottom: 1vh;
    border-radius: 3px;
    transition: .5s all;
    left: 14%;
    box-shadow: 0px 2px 12px 4px rgba(255, 255, 255, 0.75);
}

#bermuda3:hover{
  left:16%;
  
}
#bermuda3 a {
	text-decoration: none;
	color: white;
	font-size: 27px;
  transition: .3s;
}
#bermuda3 a:hover{
	text-decoration: none;
	color: #757bff;
	cursor: pointer;
}
#bermudaghost3{
  display: none;
	z-index: 1;
	width: 100%;
	height: 10vh;
	margin-left: 4%;
	position: absolute;
	background-color: #041519;
	margin-bottom: 1vh;
	transform: skewX(-15deg);
	border-right: 8px solid #00778d;
  border-radius: 3px;
  transition: .7s
}


#bermuda4{
    z-index: 2;
    width: 63%;
    height: 10vh;
    position: absolute;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8155637254901961) 57%, rgba(0,0,0,1) 100%);
    margin-bottom: 1vh;
    border-radius: 3px;
    transition: .5s all;
    left: 27%;
    box-shadow: 0px 2px 12px 4px rgba(255, 255, 255, 0.75);
}
#bermuda4:hover{
    left:29%;
}

#bermuda4 a {
	text-decoration: none;
	color: white;
  transition: .3s;
}
#bermuda4 a:hover{
	text-decoration: none;
	color: #757bff;
	cursor: pointer;
}
#bermudaghost4{
  display: none;
	z-index: 1;
	width: 100%;
	height: 10vh;
	margin-left: 4%;
	position: absolute;
	background-color: #041519;
	margin-bottom: 1vh;
	transform: skewX(-15deg);
	border-right: 8px solid #00778d;
  border-radius: 3px;
  transition: .7s;
}

#bermuda5{
    z-index: 2;
    width: 63%;
    height: 10vh;
    position: absolute;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8155637254901961) 57%, rgba(0,0,0,1) 100%);
    margin-bottom: 1vh;
    border-radius: 3px;
    transition: .5s all;
    left: 14%;
    box-shadow: 0px 2px 12px 4px rgba(255, 255, 255, 0.75);
}
#bermuda5:hover{
    left:16%;
}
#bermuda5 a {
	text-decoration: none;
	color: white;
	font-size: 28px;
  transition: .3s;
}
#bermuda5 a:hover{
	text-decoration: none;
	color: #757bff;
	cursor: pointer;
}
#bermudaghost5{
  display: none;
	z-index: 1;
	width: 100%;
	height: 10vh;
	margin-left: 4%;
	position: absolute;
	background-color: #041519;
	margin-bottom: 1vh;
	transform: skewX(-15deg);
	border-right: 8px solid #00778d;
  border-radius: 3px;
  transition: .7s;
}

#goster{
    display: none;
    position: relative;
    margin-top: 12px;
    width: 100%;
    height: 603px;
    opacity: 0;
    background-image: url(https://wdigital.site//lastsite/assets/img/treeBg1.png);
    background-repeat: no-repeat;
    background-size: cover;
    transition-delay: .5s;
    transition: 1s;
    z-index: 99999;
    border-bottom: 25px solid #021422;
    
}


#changer3{
	display: none;
  position: relative;
  transform: skewX(20deg);
  width: 100%;
  opacity: 1;
  margin-left: 16.7%;
  border-left: 5px groove #f32a80;
  z-index: 99999999999999;
  height: 100vh;
  background-color: #024f5c;
  margin-top: -1vh;
}

#changer3 #icerikBaris span p {
	transform: skewX(-47deg);
    width: 100%;
    height: 100%;
    padding-left: 5vh;
    margin-top: 3%;
}
#changer3 #ghost{
	position: absolute;
    left: 5%;
    transform: skewX(20deg);
    top: 14%;
    max-width: 1000px;
    color: white;
}

#changer3 #ghost h1 div {

	transform: skewX(-20deg);
}



#changer2{
	display: none;
  position: relative;
  transform: skewX(-20deg);
  width: 100%;
  opacity: 1;
  margin-left: 14%;
  border-left: 5px groove #7f4c98;
  z-index: 99999999999999;
  height: 70vh;
  background-color: #007b91;
  margin-bottom: 2vh;
}

#changer2 #icerikBaris p {

	transform: skewX(-20deg);
    font-size: 15px;
    filter: hue-rotate(90deg)!important;
}

#changer2 #ghost h1 div {

	transform: skewX(20deg);
}
#overlayindex{
	display: none;
	position: absolute;
	width: 100%;
	height:69%;
    z-index: 999999999999;
    background: black;
    opacity: .7;
}
#overlayindex2{
	display: none;
	position: absolute;
	width: 100%;
	height:99%;
    z-index: 999999999999;
    background: black;
    opacity: .7;
}
#ghost{
	position: absolute;
    left: 5%;
    transform: skewX(20deg);
    top: 14%;
    max-width: 1000px;
    color: white;
}

#changer{
  position: absolute;
  transform: skewX(-20deg);
  width: 100%;
  opacity: 1;
  top:11%;
  left: 2%;
  max-width: 1000px;
  z-index: 99999999999999;
}
#changer p {
color : black;
}
#menubar{
    position: absolute;
    width: 23%;
    z-index: 99999999999999999999;
    right: -8%;
    top: 240%;
    transform: skewX(-20deg);
    color: #fff;
    padding: 0px 5px;
    background: #021422;
    transition: .7s;
    cursor: pointer;
}
#menubar div {
    padding-left: 2vh;
    transform: skewX(20deg);
    font-size: 37px;
}
#menubar:hover{
  border-left: 15px solid #12b4fc; 
}

.pianoindex{
  
    position: relative;
    width: 100%;
    height: 0vh;
    margin-bottom: 3vh;
    border-top: 80px solid #011b40;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    filter: drop-shadow(4px 4px 15px #6da6d3);



}
.pianoindex:hover{

    border-top: 80px solid #16335c;
    transform: scale(1.2)!important;

}
#blocker{
  width: 100%;
  position: absolute; 
  height: 110vh; 
  background-color: transparent;  
  z-index: 99999999999;

}


#childpianoindex{
  position: absolute; 
  top: 6%; 
  width: 100%; 
  height: 0; 
  opacity: 0;
  background-color: #4267b2;
  padding-left: 5vh;
  transition: 1s;
  color: white;
      box-shadow: inset 0px 0px 50px 9px rgba(220, 220, 220, 0.68);


}

#childpianoindex p {
  padding: 0px 20px 0px 20px;
}
#childpianoindex hr{
  width: 120vh;
  color: #ffffff;
  background-color:#ffffff;
}
    
#childpianoindex h1{

  padding-top: 12vh;
  padding-left: 7vh;
  font: bold 70px Montserrat, sans-serif;
  background-color: #fffcfc;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;

}
#childpianoindexgoogle{
  position: absolute; 
  top: 6%; 
  width: 100%; 
  height: 0; 
  opacity: 0;
  background-color: #fff;
  padding-left: 5vh;
  transition: 1s;
      box-shadow: inset 0px 0px 50px 9px rgba(220, 220, 220, 0.68);

}
#childpianoindexgoogle hr{
  width: 120vh;
  color: #000;
  background-color:#000;
}
#intoindex1{
  position: absolute;
  top: 58%;
  left: 2%;
  width: 47%;
  
}
#intothemiddle{
  position: absolute;
  width: 2px!important;
  height: 40vh;
  background-color: #000;
  left: 51%;
}
#intoindex2{
  position: absolute;
  top: 58%;
  right: 2%;
  width: 44%;

}
#intolast{
  margin-top: 24%;
}
#childpianoindexgoogle h1{

  padding-top: 12vh;
  padding-left: 7vh;
  font: bold 70px Montserrat, sans-serif;
  background-color: #fffcfc;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;

}
#childpianoindexsosyal{
  position: absolute; 
  top: 6%; 
  width: 100%; 
  height: 0; 
  opacity: 0;
  background-color: #1e022ded;
  padding-left: 5vh;
  transition: 1s;
      box-shadow: inset 0px 0px 50px 9px rgba(220, 220, 220, 0.68);

}
#childpianoindexsosyal p {
  color: white;
}
#childpianoindexsosyal h1{

  padding-top: 12vh;
  padding-left: 7vh;
  font: bold 70px Montserrat, sans-serif;
  background-color: #fffcfc;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;

}
#childpianoindexsosyal p {
  margin-top: 5vh;
}
#childpianoindexsosyal hr{
  width: 120vh;
  color: #ffffff;
  background-color:#ffffff;
}
#bannerSocial{
  position: relative;
  width: 105%;
  height: 30vh;
  margin-top: 7%;
  margin-left: -4%;
  background-color: #ffffffab;
  box-shadow: inset 0px 0px 9px 8px rgba(0,0,0,0.8);

}
#childpianoindexdijital{
  position: absolute; 
  top: 6%; 
  width: 100%; 
  height: 0; 
  opacity: 0;
  background-image: url("https://wdigital.site/lastsite/assets/img/WSiteMedia.png");
  background-size: cover;
  padding-left: 5vh;
  transition: 1s;
  box-shadow: inset 0px 0px 50px 9px rgba(220, 220, 220, 0.68);

}
#childpianoindexdijital p {
  color: white;
}
#childpianoindexdijital h1{

  padding-top: 12vh;
  padding-left: 7vh;
  font: bold 70px Montserrat, sans-serif;
  background-color: #fffcfc;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;

}
#childpianoindexdijital p {
  margin-top: 5vh;
}
#childpianoindexdijital hr{
  width: 120vh;
  color: #ffffff;
  background-color:#ffffff;
}



/*icons*/
#sosyalicon1:hover{
  cursor: pointer;
  color: #425f9c!important;
}
#sosyalicon2:hover{
  cursor: pointer;
  color: #e9004f!important;
}
#sosyalicon3:hover{
  cursor: pointer;
  color: #1da1f2!important;
}
#sosyalicon4:hover{
  cursor: pointer;
  color: #fffc00!important;
}
#sosyalicon5:hover{
  cursor: pointer;
  color: #ff0000!important;
}
#sosyalicon6:hover{
  cursor: pointer;
  color: #0077b5!important;
}





/*icons Ending*/
#boxes1 {
  cursor: pointer;
  z-index: 999999999999;
}
#boxes1 a  {
  text-decoration: none;
}
#boxes1 div h1 {
      font-size: 31px;
}
#boxes2 {
  cursor: pointer;
  z-index: 999999999999;

}
#boxes2 a  {
  text-decoration: none;
}
#boxes2 div h1 {
      font-size: 31px;
}
#boxes3{
  cursor: pointer;
  z-index: 999999999999;
}
#boxes3 a  {
  text-decoration: none;
}
#boxes3 div h1 {
      font-size: 31px;
}
#boxes4 {
  cursor: pointer;
  z-index: 999999999999;
}
#boxes4 a  {
  text-decoration: none;
}
#boxes4 div h1 {
      font-size: 31px;
}
#boxes5 {
  cursor: pointer;
  margin-bottom: 20vh;
  z-index: 999999999999;

}
#boxes5 a  {
  text-decoration: none;
}
#boxes5 div h1 {
      font-size: 31px;
}

#boxes6 {
  cursor: pointer;
  z-index: 999999999999;
}
#boxes6 a  {
  text-decoration: none;
}
#boxes6 div h1 {
      font-size: 31px;
}







#menubar2{
  visibility:hidden;
  position: absolute;
    z-index: 99999999999999999999;
    font-size: 45px;
    right: 2%;
    top: 2%;
    color: #fff;
    transform:scale(1.6);
}
#menubar2:hover {
    border-radius: 500px;
    
    transform:scale(1.6);
}
#menubar:hover  #menubar2 {
  visibility:visible;
}
#menubarclose{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #menubarclose:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }

#hakkimizdaa:hover{
	box-shadow: inset 800px 0 0 10px #041519!important;
}
#hizmetlerimiza:hover{
	box-shadow: inset 800px 0 0 10px #041519!important;
}
#referanslarımıza:hover{
	box-shadow: inset 800px 0 0 10px #041519!important;
}



#backpage{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #backpage:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }


  #backpage1{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #backpage1:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }


  #backpage2{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #backpage2:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }


  #backpage3{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #backpage3:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }

  #backpage4{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #backpage4:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }

  #backpage5{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #backpage5:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }


#backpage6{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #backpage6:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }

  #backpage7{
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    font-size: 45px;
    right: 20%;
    top: 2%;
    color: #000;
    transform: skewX(-20deg);
    transition: .1s;
  }
  #backpage7:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }

  #googlelogo{
        margin-top: 4%;
        margin-left: 25%;
  }



#insideoverlay{
	width: 100%;
	height: 100%;
	background-color: #00000038;
}


#icerikBaris{
  transform: skewX(20deg);
  width: 97%;
  height: 100%;
  padding-left: 5vh;
  margin-top: -3%;
}
#icerikBaris p {
  transform: skewX(-20deg);
  font-size: 15px;
  filter: hue-rotate(90deg)!important;
}

.accessory {
  margin-top: 12rem!important;
  height: 6px;
  background-image: radial-gradient(
    closest-side,
    hsla(0, 0%, 50%, 1.0),
    hsla(0, 0%, 50%, 0) 100%);
  position: relative;
}

.accessory:after {
  position: absolute;
  top:  50%;
  left: 50%;
  display:block;
  background-color: hsl(0, 0%, 75%);
  height: 12px;
  width:  12px;
  transform: rotate(45deg);
  margin-top:  -10px;
  margin-left: -10px;
  border-radius: 4px 0;
  border: 4px solid hsla(0, 0%, 100%, 0.35);
  background-clip: padding-box;
  box-shadow: -10px 10px 0 hsla(0, 0%, 100%, 0.15), 10px -10px 0 hsla(0, 0%, 100%, 0.15);
}


#firstMenu{
  position: relative;
  top:8.2vh;


}
#childFirst{
  position: relative;
    display: inline-block;
    z-index: 50;
    float: left;
    margin: 0px 0px 0 0;
    direction: ltr;


}
#childSecond{

position: absolute;
bottom: 0px;
width: 100%;
height: 100%;
background: #25D366;
color: #000000!important;
left: 2600px;
cursor: pointer;
z-index: 9999999999;

}
#ortadaburak{
  transform: skewX(-20deg);
}
#ortadaburak span {
    font-family: "Montserrat",sans-serif;
    font-weight: bold;
    font-size: 35px;
    letter-spacing: -2px;
    display: inline-block;
    line-height: 130%;
    text-decoration: none;
    color: #fff;
    margin: 26px 0px 0px 44px;
    position: relative;
    -webkit-transition: all ease .2s;
    transition: all ease .2s;
    -webkit-box-shadow: inset 0 0 0 0 #171c2f;
    box-shadow: inset 0 0 0 0 #171c2f;
}

#childSecond:hover  {
     
  }

#childSecond:hover a span {

  }

#firstMenu #childFirst ul {

    padding: 0;
    margin: 0;
    position: relative;
    list-style-type: none;
}

#firstMenu #childFirst ul li {

  font-family: "Averta Semibold",Open Sans Semibold,Open Sans Hebrew Semibold,Helvetica Neue,sans-serif;
    position: relative;
    margin: 0;
}
#firstMenu #childFirst ul a {
    font-family: "Montserrat",sans-serif;
    font-weight: bold;
    font-size: 65px;
    letter-spacing: -4px;
    display: inline-block;
    line-height: 150%;
    text-decoration: none;
    color: #000;
    background: 0 0;
    position: relative;
    padding: 0 30px 0 72px;
    transition: .6s;
    -webkit-box-shadow: inset 0 0 0 0 #00778d;
    box-shadow: inset 0 0 0 0 #00778d;
  }

#firstMenu #childFirst ul a:hover {

     color: #fff;
    -webkit-box-shadow: inset 650px 0 0 10px #000000;
    box-shadow: inset 650px 0 0 010px #000000;
  }
#firstMenu #childFirst ul li a span{

      display: inline-block;
    transform: skewX(-20deg);
    position: relative;
    white-space: nowrap;
}
#socialmedia{
  position:absolute;
  width: 100%; 
  bottom: 12%;
  left: 38%;
  z-index: 9999999999;

}
#socialmedia ol {
  position: absolute;
    left: 5%;
    top: 50%;
    transform: skewX(-20deg);
    margin: 0;
    padding: 0;
    display: flex;
}
#socialmedia ol li{
  list-style: none;
    margin: 0 20px;

}


#socialmedia1{
  position:absolute;
  width: 100%; 
  bottom: 12%;
  left: 38%;
  z-index: 9999999999;

}
#socialmedia1 ol {
  position: absolute;
    left: 5%;
    top: 50%;
    transform: skewX(-20deg);
    margin: 0;
    padding: 0;
    display: flex;
}
#socialmedia1 ol li{
  list-style: none;
    margin: 0 20px;

}

#balon1{

  z-index: 9999;
   position: absolute; 
   left: 86%; 
   bottom: 38%;
}



#balon2{

  z-index: 9999;
   position: absolute; 
   left: 90%; 
   bottom: 11%;
}

#balon3{

  z-index: 9999;
   position: absolute; 
   left: 84%; 
   bottom: 24%;
}
#balon4{

  z-index: 9999;
   position: absolute; 
   left: 67%; 
   bottom: 50%;
}
#balon5{

  z-index: 9999;
   position: absolute; 
   left: 71%; 
   bottom: 65%;
}
#balon6{

  z-index: 9999;
   position: absolute; 
   left: 79%; 
   bottom: 64%;
}
#balon7{

  z-index: 9999;
   position: absolute; 
   left: 61%; 
   bottom: 84%;
}
#balon8{

  z-index: 9999;
   position: absolute; 
   left: 54%; 
   bottom: 75%;
}
#balon9{

  z-index: 9999;
   position: absolute; 
   left: 46%; 
   bottom: 70%;
}
#balon10{

  z-index: 9999;
   position: absolute; 
   left: 61%; 
   bottom: 64%;
}
#balon11{

  z-index: 9999;
   position: absolute; 
   left: 81%; 
   bottom: 49%;
}

#balon12{

  z-index: 9999;
   position: absolute; 
   left: 67%; 
   bottom: 82%;
}
#balon13{

  z-index: 9999;
   position: absolute; 
   left: 32%; 
   bottom: 78%;
}
#balon14{

  z-index: 9999;
   position: absolute; 
   left: 5%; 
   bottom: 58%;
}
#balon15{

  z-index: 9999;
   position: absolute; 
   left: 41%; 
   bottom: 81%;
}
#balon16{

  z-index: 9999;
   position: absolute; 
   left: 38%; 
   bottom: 67%;
}
#balon17{

  z-index: 9999;
   position: absolute; 
   left: 86%; 
   bottom: 62%;
}
#balon170{

  z-index: 9999;
   position: absolute; 
   left: 48%; 
   bottom: 84%;
}
#balon18{

  z-index: 9999;
   position: absolute; 
   left: 80%; 
   bottom: 84%;
}
#balon19{

  z-index: 9999;
   position: absolute; 
   left: 78%; 
   bottom: 32%;
}
#balon20{

  z-index: 9999;
   position: absolute; 
   left: 75%; 
   bottom: 52%;
}
#balon21{

  z-index: 9999;
   position: absolute; 
   left: 28%; 
   bottom: 53%;
}
#balon22{

  z-index: 9999;
   position: absolute; 
   left: 51%; 
   bottom: 62%;
}
#balon23{

  z-index: 9999;
   position: absolute; 
   left: 73%; 
   bottom: 26%;
}
#balon24{

  z-index: 9999;
   position: absolute; 
   left: 90%; 
   bottom: 25%;
}
#balon25{

  z-index: 9999;
   position: absolute; 
   left: 72%; 
   bottom: 40%;
}
#balon26{

  z-index: 9999;
   position: absolute; 
   left: 32%; 
   bottom: 63%;
}
#balon27{

  z-index: 9999;
   position: absolute; 
   left: 18%; 
   bottom: 10%;
}
#balon28{

  z-index: 9999;
   position: absolute; 
   left: 25%; 
   bottom: 82%;
}
#balon29{

  z-index: 9999;
   position: absolute; 
   left: 17%; 
   bottom: 79%;
}
#balon30{

  z-index: 9999;
   position: absolute; 
   left: 25%; 
   bottom: 65%;
}
#balon31{

  z-index: 9999;
   position: absolute; 
   left: 21%; 
   bottom: 51%;
}
#balon32{

  z-index: 9999;
   position: absolute; 
   left: 76%; 
   bottom: 9%;
}
#balon33{

  z-index: 9999;
   position: absolute; 
   left: 5%; 
   bottom: 40%;
}
#balon34{

  z-index: 9999;
   position: absolute; 
   left: 84%; 
   bottom: 9%;
}

#balon35{

  z-index: 9999;
   position: absolute; 
   left: 26%; 
   bottom: 36%;
}

#balon36{

  z-index: 9999;
   position: absolute; 
   left: 16%; 
   bottom: 64%;
}

#balon37{

  z-index: 9999;
   position: absolute; 
   left: 9%; 
   bottom: 73%;
}

#balon38{

  z-index: 9999;
   position: absolute; 
   left: 24%; 
   bottom: 16%;
}

#balon39{

  z-index: 9999;
   position: absolute; 
   left: 19%; 
   bottom: 29%;
}

#balon40{

  z-index: 9999;
   position: absolute; 
   left: 7%; 
   bottom: 9%;
}

#balon41{

  z-index: 9999;
   position: absolute; 
   left: 12%; 
   bottom: 50%;
}

#balon42{

  z-index: 9999;
   position: absolute; 
   left: 13%; 
   bottom: 18%;
}

#balon43{

  z-index: 9999;
   position: absolute; 
   left: 11%; 
   bottom: 34%;
}

#balon44{

  z-index: 9999;
   position: absolute; 
   left: 4%; 
   bottom: 24%;
}

#balon45{

  z-index: 9999;
   position: absolute; 
   left: 74%; 
   bottom: 80%;
}





#cross{
    position: absolute;
    font-size: 45px;
    right: 20%;
    top: 2%;
    opacity: 0;
    z-index: -1;
    cursor: pointer;
  }
  #cross:hover {
    filter: drop-shadow(-4px 4px 0px #bf0000);
    transform-origin: center;
    color:#000;

  }

  #cross a{
    color: #fff;
  }


/*References*/



/*References ending*/




.fontstyle{
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
word-spacing: 0.6px;
color: #000000;
font-weight: 400;
text-decoration: solid rgb(68, 68, 68);
font-style: italic;
text-transform: capitalize;
line-height: 2.5;
}

.innerpage{
  background:#ffffffa1;
  width: 975px;
  height: 100%;
  border: 2px solid #bfbfbf;
  border-width: 2px 2px 0 0;
  box-shadow: inset -13px 13px 13px 0px rgba(0,0,0,0.75);
  padding: 5%;
  border-radius: 0 150px 0 150px;
}


.parrallax-content{



}
.parrallax-content-2{
background-image: url(https://wdigital.site/lastsite/assets/img/header3.jpg);
  
}

.parrallax-content{
  position: relative;
  overflow: hidden;
  height: 110vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}
.parrallax:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -1;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 120% auto;
}





.videocuk {
	position:absolute;
	width: 100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-size:cover;
}


.bizkimiz {
	position:relative;
    background: linear-gradient(to right, #000, #6a82fb);
	height: 100px;
	width: 50%;
	cursor: pointer;
	transition: 1s;
	color: rgb(255,255,255);
}
.bizkimiz:hover {
background: #25D366;
	color: white!important;
	
}

.bizkimiz h1{
	margin-top: 30px;
	font-size: 30px;
	padding-left: 60px;
	font-weight: bold;
}

.bizkimiz a {

  color:white;
  text-decoration: none;
}
.iletisim {
	background: #25D366!important;
	height: 100px;
	width: 50%;
	color: white!important;
	cursor: pointer;
	transition: .12s;
	transition-delay:1s;
}
.iletisim:hover {
	background: linear-gradient(to right, #fff, #25D366)!important;
	color: #000000!important;
}
.iletisim a {
  color:white;
  text-decoration: none;
}.iletisim:hover a {
  color: #000000;
}
.iletisim h1{
	position:relative;
	margin-top: 30px;
	font-size: 30px;
	padding-left: 60px;
	font-weight: bold;
}
.altbar {
	position:absolute;
	bottom:0px;
	width: 100%;
  height: 100px;
}

.iletisim i{
	transition: .5s;
}
.iletisim:hover i{
	transform: translateX(20px);
}
.bizkimiz i{
	transition: .5s;
}
.bizkimiz:hover i{
	transform: translateY(15px);
}
.imageBlur{
  position: absolute;
  width: 26%;
  height: 64%;
  filter: blur(2px);
  background-color: #167f3d;
  right: 5%;
    top: 9%;
    opacity: 0;
    transition-delay: 1s;
    transition: 1s;
}

#analizTalep{
  position: absolute;
  width: 26%;
  height: 80%;
  padding: 25px;
  right: 5%;
  top: 10%;
  opacity: 0;
  transition-delay: 1s;
  transition: 1.3s;
}




.logosize{
	width: 75px;
	transition: .5s;
	opacity: 1;
	cursor: pointer;
	animation: moveDown 1s ease-in-out 1s backwards;
	border-radius:100px;
}
.logosize:hover	{
  transform: scale(.9);
  opacity: 1;
  box-shadow: 0px 0px 40px 12px  white;

}
.logosize2{
	width: 75px;
	transition: .5s;
	opacity: 1;
	cursor: pointer;
	animation: moveDown2 1s ease-in-out 1s backwards;
	animation-delay: .3s;
	border-radius:100px;
}
.logosize2:hover	{
  transform: scale(.9);
  opacity: 1;
  box-shadow: 0px 0px 40px 12px  white;

}

.logosize3{
	width: 75px;
	transition: .5s;
	opacity: 1;
	cursor: pointer;
	animation: moveDown3 1s ease-in-out 1s backwards;
	animation-delay: .5s;
	border-radius:100px;
}
.logosize3:hover	{
  transform: scale(.9);
  opacity: 1;
  box-shadow: 0px 0px 40px 12px  white;

}
.deneme1:hover   .deneme2 {
  border:100px solid black;
}

.logosize4{
	width: 75px;
	transition: .5s;
	opacity: 1;
	cursor: pointer;
	animation: moveDown4 1s ease-in-out 1s backwards;
	animation-delay: 1s;
	border-radius:100px;
}
.logosize4:hover	{
	transform: scale(.9);
	opacity: 1;
	box-shadow: 0px 0px 40px 12px  white;

}
.logosize5 {
	width: 75px;
	transition: .5s;
	opacity: 1;
	cursor: pointer;
	animation: moveDown5 1s ease-in-out 1s backwards;
	animation-delay: 1.3s;
	border-radius:100px;
}
.logosize5:hover	{
  transform: scale(.9);
  opacity: 1;
  box-shadow: 0px 0px 40px 12px  white;

}


.background {
	background: url("../assets/img/treeBg.png"); position: relative; background-size:contain; margin: 0px; width: 100%; height: 100%; 
}


@keyframes moveDown{
    0% { 
        transform: translateY(90px); 
        opacity: 0;
        width: 20px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:75px;
    }
}
@keyframes moveDown2{
    0% { 
        transform: translateY(140px); 
        opacity: 0;
        width: 40px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:75px;
    }
}
@keyframes moveDown3{
    0% { 
        transform: translateY(200px); 
        opacity: 0;
        width: 50px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:75px;
    }
}
@keyframes moveDown4{
    0% { 
        transform: translateY(170px); 
        opacity: 0;
        width: 70px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:75px;
    }
}
@keyframes moveDown5{
    0% { 
        transform: translateY(30px); 
        opacity: 0;
        width: 10px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:75px;
    }
}
.gf {
	border-radius:0 10px 10px 0;
	width: 70%;
}

/*Spotlight*/
:root {
  --show-dropdown: 1;
}

.spotlight {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(circle at var(--x, 0%) var(--y, 50%), hsl(0, 0%, 100%) 30%, rgba(0,0,0,0.67) 35%);
  mix-blend-mode: var(--blend, multiply);
}

.scene {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url("../assets/img/headerbg.png") center center;
  background-size: cover;
  overflow:hidden;/*
  cursor: url("https://wdigital.site/lastsite/assets/img/wdigitallogoWhitex32.png") , auto;*/

}

.blackslider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  opacity: var(--show-dropdown);
}



/*Spotlight Ending*/


/*Footer */


ol{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
display: flex;

}
ol li{
list-style: none;
margin: 0 40px;

}
ol li .fa{
font-size: 18px;
color: #262626;
line-height: 30px;
transition: .5s;

}
ol li a{
position: relative;
display: block;
width: 30px;
height: 30px;
background-color: #fff;
text-align: center;
transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0,0);
transition: .5s;
box-shadow: -20px 20px 10px rgb(0, 0, 0, 0.5);
}
ol li a::before{
content: "";
position: absolute;
top: 10px;
left: -20px;
height: 100%;
width: 20px;
background: #b1b1b1;
transition: .5s;
transform: rotate(0deg) skewY(-45deg);
}
ol li a::after{
content: "";
position: absolute;
top: 30px;
left: -11px;
height: 20px;
width: 100%;
background: #b1b1b1;
transition: .5s;
transform: rotate(0deg) skewX(-45deg);
}
ol li a:hover{
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}
ol li:hover .fa{
color: #fff;
}
ol li a:hover{
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}
ol li:hover:nth-child(1) a{
background: #3b5999;
}

ol li:hover:nth-child(1) a:before{
background: #2e4a86;
}
ol li:hover:nth-child(1) a:after{
background: #4a69ad;
}
ol li:hover:nth-child(2) a{
background: #55acee;
}
ol li:hover:nth-child(2) a:before{
background: #4184b7;
}
ol li:hover:nth-child(2) a:after{
background: #4d9fde;
}
ol li:hover:nth-child(3) a{
background: #dd4b39;
}

ol li:hover:nth-child(3) a:before{
background: #c13929;
}
ol li:hover:nth-child(3) a:after{
background: #e83322;
}

ol li:hover:nth-child(4) a{
background: #0077B5;
}

ol li:hover:nth-child(4) a:before{
background: #036aa0;
}
ol li:hover:nth-child(4) a:after{
background: #0d82bf;
}

ol li:hover:nth-child(5) a{
background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}

ol li:hover:nth-child(5) a:before{
background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}
ol li:hover:nth-child(5) a:after{
background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}


/*Neon*/

.centered{
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h5{
  font-size: 0.5em;
  margin: auto;
}
.neon{
  color: #fff;
  font-weight: 300;
  text-shadow:
    0 0 5px #fff,
    0 0 20px #fff,
    0 0 30px #ff1010,
    0 0 50px #ff1010,
    0 0 100px #f00,
    0 0 130px #f00
    
}
.neon.flash, .neon .flash{
  color: #fff;
  text-shadow: 
    0 0 50px #ff1010;
}
/*Neon Ending*/

/*Footer Ending*/

/*Hizmetlerimiz */
#background{
  display:block;
  position:fixed;
  width:100%;
  height:100%;
  background-color: #3c005b;
  background: -webkit-radial-gradient(center, ellipse cover, #3c005b 1%,#0d0011 100%);
  background: -moz-radial-gradient(center, ellipse cover, #3c005b 1%,#0d0011 100%);
  background: -ie-radial-gradient(center, ellipse cover, #3c005b 1%,#0d0011 100%);
}


#logocontainer{
  display:block;
  position:fixed;
  top:50%;
  left:50%;
  width:34vh;
  height:34vh;
  margin-left:-17vh;
  margin-top:-17vh;
  overflow:hidden;
  transition:background-color 500ms;
  cursor:pointer;
}

#pelogo{
  display: block;
  position: absolute;
  left: 2vh;
  top: 2vh;
  width: 30vh;
  height: 30vh;
  background: #34324b;
  background: -moz-linear-gradient(-45deg, #34324b 0%, #161222 100%);
  background: -webkit-linear-gradient(-45deg, #34324b 0%,#161222 100%);
  background: linear-gradient(135deg, #34324b 0%,#4000ff 100%);
  background-size: contain;
  font-family: Montserrat, sans-serif;
  font-size: 4vh;
  font-weight: bold;
  color: #969696;
  text-align: center;
  line-height: 30vh;
}

.loader{
  display:block;
  position:absolute;
  background-color:#969696;
}


@keyframes slide1{
  50%{width:32vh; margin-left:0;}
  100%{margin-left:32vh;}
}

@keyframes slide2{
  50%{height:32vh; margin-top:0;}
  100%{margin-top:32vh;}
}

@keyframes slide3{
  50%{width:32vh; margin-right:0;}
  100%{margin-right:32vh;}
}

@keyframes slide4{
  50%{height:32vh; margin-bottom:0}
  100%{margin-bottom:32vh;}
}
/*Hizmetlerimiz Ending*/


.logox {
transform: scale(1);
transition:1s;
width: 16%; 
z-index: 9999999999999999;
position: absolute; 
top:210%;
left: 0%;
}
.logox:active {
  filter: drop-shadow(16px 16px 20px red) invert(75%);
  transform: scale(1.05);
}
.bars {
  transition:1s;
}

@media screen and (min-width: 600px) {
 #ok {

right: 15px;

}


}
@media screen and (min-width: 1600px) {

 #ok {
  
right: 35px!important;

}

  
}


@media screen and (min-width: 600px) {
#firstMenu{
  position: relative;
  top:25.2vh;


}


}
@media screen and (min-width: 1600px) {

	#firstMenu{
  position: relative;
  top:30.2vh;


}
 #firstMenu #childFirst ul a {
 	font-size: 90px;
 }
  
}




@media screen and (min-width: 600px) {
#goster{
  height: 520px;


}


}
@media screen and (min-width: 1600px) {

	#goster{
	height: 767px!important;

	}
	#snapchatt{
		left: 69%!important;
	}
	.logosize{
		width: 90px;
	}
	.logosize2{
				width: 90px;
	}
	.logosize3{
				width: 90px;
	}
	.logosize4{
				width: 90px;
	}
	.logosize5{
				width: 90px;
	}

	@keyframes moveDown{
    0% { 
        transform: translateY(90px); 
        opacity: 0;
        width: 20px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:90px;
    }
}
@keyframes moveDown2{
    0% { 
        transform: translateY(140px); 
        opacity: 0;
        width: 40px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:90px;
    }
}
@keyframes moveDown3{
    0% { 
        transform: translateY(200px); 
        opacity: 0;
        width: 50px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:90px;
    }
}
@keyframes moveDown4{
    0% { 
        transform: translateY(170px); 
        opacity: 0;
        width: 70px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:90px;
    }
}
@keyframes moveDown5{
    0% { 
        transform: translateY(30px); 
        opacity: 0;
        width: 10px;
    }

    100% { 
        transform: translateY(0px); 
        opacity: .7; 
        width:90px;
    }
}
 
}
@media screen and (min-width: 1900px) {

  #goster{
  height: 756px!important;

  }
  }
}

@media screen and (min-width: 600px) {
#world1{
  

}


}
@media screen and (min-width: 1600px) {

	#world1{

	}
	#world{
		bottom: -3.9%!important;
		left: 37%!important;
	}

}


@media screen and (min-width: 600px){


#fbpartnerimg{

      width: 350px;
}
#googleimg{
  width: 320px;
}
  

}

@media screen and (min-width: 1600px){

  #fbpartner{
  left: 39%!important;
  top:45%!important;
}

#google{
  left: 40.2%!important;
  top:62%!important;
}
#fbpartnerimg{

  width: 430px!important;
}
#googleimg{
  width: 380px!important;
}
  

}


@media screen and (min-width: 1600px){

  #socialmedia1{
    bottom: -10%!important;
    left: 40%!important;

  }
}


.shake-vertical {
  animation: shake-vertical 100ms ease-in-out infinite;
}

@keyframes shake-vertical {
  2% {
    transform: translate(0, 6px) rotate(0);
  }
  4% {
    transform: translate(0, -1px) rotate(0);
  }
  6% {
    transform: translate(0, -7px) rotate(0);
  }
  8% {
    transform: translate(0, -1px) rotate(0);
  }
  10% {
    transform: translate(0, 9px) rotate(0);
  }
  12% {
    transform: translate(0, 1px) rotate(0);
  }
  14% {
    transform: translate(0, 3px) rotate(0);
  }
  16% {
    transform: translate(0, 6px) rotate(0);
  }
  18% {
    transform: translate(0, 0px) rotate(0);
  }
  20% {
    transform: translate(0, 2px) rotate(0);
  }
  22% {
    transform: translate(0, 1px) rotate(0);
  }
  24% {
    transform: translate(0, 3px) rotate(0);
  }
  26% {
    transform: translate(0, 4px) rotate(0);
  }
  28% {
    transform: translate(0, 0px) rotate(0);
  }
  30% {
    transform: translate(0, -8px) rotate(0);
  }
  32% {
    transform: translate(0, 6px) rotate(0);
  }
  34% {
    transform: translate(0, 6px) rotate(0);
  }
  36% {
    transform: translate(0, -4px) rotate(0);
  }
  38% {
    transform: translate(0, 2px) rotate(0);
  }
  40% {
    transform: translate(0, -8px) rotate(0);
  }
  42% {
    transform: translate(0, -9px) rotate(0);
  }
  44% {
    transform: translate(0, -3px) rotate(0);
  }
  46% {
    transform: translate(0, 0px) rotate(0);
  }
  48% {
    transform: translate(0, -7px) rotate(0);
  }
  50% {
    transform: translate(0, 0px) rotate(0);
  }
  52% {
    transform: translate(0, 3px) rotate(0);
  }
  54% {
    transform: translate(0, -4px) rotate(0);
  }
  56% {
    transform: translate(0, 3px) rotate(0);
  }
  58% {
    transform: translate(0, -9px) rotate(0);
  }
  60% {
    transform: translate(0, 9px) rotate(0);
  }
  62% {
    transform: translate(0, -6px) rotate(0);
  }
  64% {
    transform: translate(0, 0px) rotate(0);
  }
  66% {
    transform: translate(0, -4px) rotate(0);
  }
  68% {
    transform: translate(0, 1px) rotate(0);
  }
  70% {
    transform: translate(0, 5px) rotate(0);
  }
  72% {
    transform: translate(0, 0px) rotate(0);
  }
  74% {
    transform: translate(0, -6px) rotate(0);
  }
  76% {
    transform: translate(0, -3px) rotate(0);
  }
  78% {
    transform: translate(0, 3px) rotate(0);
  }
  80% {
    transform: translate(0, 6px) rotate(0);
  }
  82% {
    transform: translate(0, 2px) rotate(0);
  }
  84% {
    transform: translate(0, -3px) rotate(0);
  }
  86% {
    transform: translate(0, 1px) rotate(0);
  }
  88% {
    transform: translate(0, 1px) rotate(0);
  }
  90% {
    transform: translate(0, 10px) rotate(0);
  }
  92% {
    transform: translate(0, -2px) rotate(0);
  }
  94% {
    transform: translate(0, -2px) rotate(0);
  }
  96% {
    transform: translate(0, -6px) rotate(0);
  }
  98% {
    transform: translate(0, -9px) rotate(0);
  }
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.colorChangeclass{
  animation: colorChange 10s infinite;
}

@keyframes colorChange{
10%{
  filter: hue-rotate(0deg);
}
20%{
  filter: hue-rotate(36deg);
}
30%{
  filter: hue-rotate(72deg);
}
40%{
  filter: hue-rotate(110deg);
}
50%{
  filter: hue-rotate(146deg);
}
60%{
  filter: hue-rotate(182deg);
}
70%{
  filter: hue-rotate(218deg);
}
80%{
  filter: hue-rotate(252deg);
}
90%{
  filter: hue-rotate(288deg);
}
100%{
  filter: hue-rotate(360deg);
}

}

@media screen and (min-width: 1800px){

#boxes1 div h1 {
      margin-top: -12%!important;
}
#boxes2 div h1 {
      margin-top: -12%!important;
}
#boxes3 div h1 {
      margin-top: -12%!important;
}
#boxes4 div h1 {
      margin-top: -12%!important;
}
#boxes5 div h1 {
      margin-top: -12%!important;
}
#boxes6 div h1 {
      margin-top: -12%!important;
}
#logonav{
  top:7vh!important;
}
#google{
  top:62%!important;
}
#fbpartner{
  
  top:45%!important;
}
#googlelogo{
      margin-top: 2%;
    margin-left: 22%;

}
#searchform{
  margin-left: 40px;
}
#googleimg1{
      left: 22%;
}
.pagefacebook{
      margin-left: 4vh;
      width: 31%;
}
.pagefacebook2{
      margin-left: 4vh;
      width: 31%;
}
.pagefacebookNull{
      margin-left: 4vh;
      width: 31%;
}
#facebooklogo1{
    top: 9%!important;
    right: 43%!important;
}
#tablefacebook{
    margin-top: 6%!important;
    margin-left: 18%!important;
    width: 64%!important;
    height: 43vh!important;
}
}