body {
  margin: 0;
  -webkit-perspective: 1000;
  background: url(../images/yeni-bg.png) center bottom no-repeat #afdde2;
  font-family: Avenir Next, sans-serif;
}

body, html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.menu, .menu-bg, .menu-burger {
position: fixed;
    width: 80px;
    height: 80px;
    font-size: 50px;
    text-align: center;
    border-radius: 100%;
    right: 920px;
    top: 490px;
    margin:auto;
}

.menu-items a {color:#fff; text-decoration: none; font-family: 'Raleway', sans-serif; font-size:30px; padding: 10px 20px; background: rgba(61, 108, 114, 0.24)}
.menu-items a:hover {border-bottom:2px solid #de6e7e; padding-bottom:5px;}

.menu-bg {
  background: #7cacb1;
  pointer-events: none;
  transition: .3s;
  right: 960px;
  top: 524px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
}
.menu-bg.fs {
  transform: translate3d(50%, -50%, 0);
  width: 300vw;
  height: 300vw;
  background: url(../images/pati-bg.jpg) #7cacb1;
  

}

.menu-burger {
  color: white;
  padding-top: 11px;
  -webkit-user-select: none;
  cursor: pointer;
  transition: .4s;
  transform-origin: center;
}
.menu-burger.fs {
  transform: rotate(-180deg) translateY(10px); margin-top: 297px;
}

.menu-items {
  position: absolute;
  font-weight: bold;
  font-size: 40px;
  letter-spacing: 10px;
  color: white;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: .4s;

  transform: translateY(-200%);
  pointer-events: none;
}
.menu-items div {
  transition: 1s;
  opacity: 0;
  margin-top: 0px;
}
.menu-items.fs {
  transform: translateY(0);
  pointer-events: auto;
  opacity: 1;

}
.menu-items.fs div {
  opacity: 1;
  margin-top: 55px;
}

.content {
  padding: 100px 50px;
  line-height: 1.62em;
  color: #444;
}
.content h1 {
  font-weight: bold;
  font-size: 2em;
  margin-bottom: 1em;
}



@media (max-width: 1024px) {
.menu, .menu-bg, .menu-burger {
  position: fixed;
  width: 200px;
  height: 200px;
  font-size: 100px;
  text-align: center;
  border-radius: 100%;
  right: 380px;
  top: 770px;
  background-size:cover;
  }
  .menu-bg.fs {
  transform: translate3d(50%, -50%, 0);
  width: 300vw;
  height: 300vw;
  background: url(../images/pati-bg.jpg) #7cacb1;
  background-size: cover;
  
}
}




@media (max-width: 1024px) {
.menu-bg {
  background: #7cacb1;
  pointer-events: none;
  transition: .3s;
  right: 480px;
  top: 824px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
  }
}

@media (max-width: 1024px) {
.logo {
  margin-top:100px;
  }
}

@media (max-width: 1024px) {
.menu-items.fs div {
  opacity: 1;
  margin-top: 95px;
}}

@media (min-width: 768px) {
.menu, .menu-bg, .menu-burger {
  position: fixed;
  width: 200px;
  height: 200px;
  font-size: 100px;
  text-align: center;
  border-radius: 100%;
  right: 400px;
  top: 592px;
  }

}


@media (min-width: 768px) {
.menu-bg {
  background: #7cacb1;
  pointer-events: none;
  transition: .3s;
  right: 500px;
  top: 650px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
  }
}


@media (max-width: 768px) {
body {

  -webkit-perspective: 1000;
  background: url(../images/mobil-pati.jpg) bottom  no-repeat #7cacb1;
}
}

@media (min-width: 768px) {
.menu-items.fs div {
  opacity: 1;
  margin-top: 43px;
}}



@media (min-width: 1280px) {
.menu, .menu-bg, .menu-burger {
  position: fixed;
  width: 100px;
  height: 100px;
  font-size: 58px;
  text-align: center;
  border-radius: 100%;
  right: 600px;
  top: 510px;
  }

}


@media (min-width: 1280px) {
.menu-bg {
  background: #7cacb1;
  pointer-events: none;
  transition: .3s;
  right: 650px;
  top: 550px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
  }
}





@media (min-width: 1336px) {
.menu, .menu-bg, .menu-burger {
  position: fixed;
  width: 100px;
  height: 100px;
  font-size: 58px;
  text-align: center;
  border-radius: 100%;
  right: 630px;
  top: 510px;
  }

}


@media (min-width: 1336px) {
.menu-bg {
  background: #7cacb1;
  pointer-events: none;
  transition: .3s;
  right: 680px;
  top: 550px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
  }
}

@media (min-width: 1440px) {
.menu, .menu-bg, .menu-burger {
  position: fixed;
  width: 100px;
  height: 100px;
  font-size: 58px;
  text-align: center;
  border-radius: 100%;
  right: 670px;
  top: 510px;
  }

}


@media (min-width: 1440px) {
.menu-bg {
  background: #7cacb1;
  pointer-events: none;
  transition: .3s;
  right: 720px;
  top: 550px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
  }
}




@media (min-width: 1920px) {
.menu, .menu-bg, .menu-burger {
  position: fixed;
  width: 100px;
  height: 100px;
  font-size: 58px;
  text-align: center;
  border-radius: 100%;
  right: 910px;
  top: 510px;
  }
  
}


@media (min-width: 1920px) {
.menu-bg {
  background: #7cacb1;
  pointer-events: none;
  transition: .3s;
  right: 960px;
  top: 550px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
  }
}



/* Template Styles */

#instafeed {
margin:.5rem;
}

#instafeed a {
box-shadow:0 1px 3px rgba(0,0,0,.7);
color:#444;
display:inline-block;
margin:.5rem;
overflow:hidden;
position:relative;
text-decoration:none;
width:calc(100% / 4 - 1rem);
}

#instafeed img {
display:block;
height:auto;
max-width:100%;
width:100%;
}

#instafeed .filter {
background-color:#f6f6f6;
box-shadow:0 0 5px 0 rgba(0,0,0,.2);
display:block;
font-size:1rem;
padding:10px;
position:absolute;
right:-30px;
text-align:center;
top:12px;
transform:rotate(45deg);
width:100px;
}

#instafeed .info {
background-color:#f6f6f6;
height:auto;
padding:.4rem .6rem .3rem;
}

#instafeed .info .caption {
height:6rem !important;
/* white-space:nowrap; */
}

#instafeed .info p {
font-size:.9rem;
line-height:1.2rem;
overflow:hidden;
text-overflow:ellipsis;
/* white-space:nowrap; */
}

#instafeed .likes {
position:absolute;
right:.6rem;
bottom:.3rem;
}

#instafeed .likes p {
font-size:.9rem;
position:absolute;
right:1.2rem;
bottom:.3rem;
}

#more,
#nomore {
background-color:#f6f6f6;
box-shadow:0 1px 3px rgba(0,0,0,.7);
cursor:pointer;
display:none;
margin:.5rem 1rem 0;
padding:.8rem .6rem .7rem;
}

#more p,
#nomore p {
color:#444;
display:inline;
font-size:1rem;
}

#more span,
#nomore span {
position:relative;
top:1px;
}

#nomore {
cursor:auto;
opacity:.4;
}


/* Icon Font Styles */

.oi::before {
font-size:.9rem;
margin-right:.5rem;
}

.oi[data-glyph="comment-square"]::before {
color:#a4d0e1;
}

.oi[data-glyph="compass"]::before {
color:#efc7e2;
}

.oi[data-glyph="clock"]::before {
color:#a7e9c0;
}

.oi[data-glyph="heart"]::before {
color:#f8c0d0;
margin-right:0;
position:relative;
top:-3px;
}

.oi[data-glyph="reload"]::before,
.oi[data-glyph="check"]::before {
color:#bbb;
}


/* Media Queries */

@media screen and (min-width:1400px) {
#instafeed a { width:calc(100% / 5 - 1rem); }
}

@media screen and (max-width:1200px) {
#instafeed a { width:calc(100% / 3 - 1rem); }
}

@media screen and (max-width:800px) {
#instafeed a { width:calc(100% / 2 - 1rem); }
}

@media screen and (max-width:480px) {
#instafeed a { width:calc(100% - 1rem); }
}