body {
    margin: 0;
    padding: 0;
    
    background-color: #efd3c5;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: black;
  color: #efd3c5;
  cursor: url("https://img.icons8.com/small/16/000000/hand-cursor.png"), default;
  padding: 15px;
  border-radius: 50%;
     -webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}

#myBtn:hover {
    background-color: #efd3c5;
  color: black;
}

.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -moz-animation-name: animatebottom;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}



@font-face {
	        font-family: "OggItalic";
	        src: url("https://dl.dropboxusercontent.com/s/vx5oofeav7665yn/OGG-ITALIC.OTF")
	    }
	    
@font-face {
	        font-family: "Ogg";
	        src: url("https://dl.dropboxusercontent.com/s/gwokapzfhi6pq64/OGG-ROMAN.OTF?dl=0")
	    }

.bg {
    height: 500px;
    width: 100%;
    padding: 70px 0;
    background-color: #f4eee0;
    font-family: 'Ogg';
    font-size: 20px;
    box-sizing: border-box;
}

.proj {
    background-color: #f4eee0;
    height: 600px;
    padding: 100px 0;
    width: 100%;
    font-family: 'Ogg';
    text-align: center;
    font-size: 35px;
}

.prlx {
    background-color: #efd3c5;
    height: 500px;
}

.scrolli {
    width: 50px;
    left: 150px;
    margin-top: -100px;
    position: absolute;
}

.see {
    text-align: center;
    width: 80%;
    font-family: 'OggItalic';
    border-radius: 10px;
    background: linear-gradient(90deg, #f4eee0, #efd3c5);
       -webkit-transition: all 1.6s;
-moz-transition: all 1.6s;
-o-transition: all 1.6s;
-ms-transition: all 1.6s;
transition: all 1.6s;
    text-transform: capitalize;
    
}

.see:hover {
    -webkit-transition: all 1.6s;
-moz-transition: all 1.6s;
-o-transition: all 1.6s;
-ms-transition: all 1.6s;
transition: all 1.6s;
    background: linear-gradient(90deg, #efd3c5, #f4eee0);
}

.bg .row .col-13 ion-icon {
    font-size: 60px;
    --ionicon-stroke-width: 10px;
    margin-top: 20px;
}

.bg i {
    font-family: 'OggItalic';
}

.col-13 {
    width: 13%;
    text-align: center;
}

.col-13 a {
    text-transform: capitalize;
}



@keyframes animated-text{
  from{width: 0;}
  to{width: 95%;}
}


@keyframes animated-cursor{
  from{border-right-color: rgba(0,0,0,.75);}
  to{border-right-color: transparent;}
}


.css-selector {
    background: linear-gradient(180deg, #f4eee0, #dca78c);
    background-size: 400% 400%;
    width: 100%;
    border-radius: 5px;
    -webkit-animation: AnimationName 16s ease infinite;
    -moz-animation: AnimationName 16s ease infinite;
    animation: AnimationName 16s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.swiper-container {
      width: 100%;
      height: 300px;
    }
    .swiper-slide {
      font-size: 18px;
        height: 200px;/* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

.swiper-button-next, .swiper-button-prev {
    color: black;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev,
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next{
    background-image: none;
}
.swiper-pagination-bullet {
    opacity: 0.3;
    background-color: #000;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.item a {
    text-decoration: none;
}
.category {
    font-family: 'Karla';
    font-size: 12px;
    color: black;
    margin-top: 50px;
    text-transform: uppercase;
} 
.item {
    position: relative;
    width:280px;
    height:200px;
    box-sizing:border-box;
    overflow-y: hidden;
}
.boxu {
    width:280px;
    height:140px;
    padding:12px 10px 8px 10px;
    border-radius:5px;
    box-sizing:border-box;
    text-decoration:none;
    background-color:#efd3c5; /* tablinks bg color */
    display:inline-block;
    box-shadow:inset 0px 0px #ffcccc; /* tablinks bg color */
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    
}



.boxu:hover {
box-shadow:inset -280px 0px #000000; /* tablinks hover bg color */
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}

.year {
    text-align:center;
margin-top:-85px;
font-weight:400;
font-family: 'Ogg';
color: black; /* tablinks hover color */
font-size:36px;
text-decoration:none;
display:block;
    opacity:0;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
transition: all .6s;
} 

.year:hover {
    opacity: 0.9;
}

.item img {
    border-radius:7px;
    margin-top:-2px;
    width:260px;
    height:120px;
    object-fit:cover;
}

.contact {
    height: 800px;
    background-color: #f4eee0;
   pointer-events: auto !important; 
    cursor:text;
}

.contact .col-10 {
    background-color: #efd3c5;
}

.spin {
    animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.shake {
    animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.tilt {
    animation: tilt 0.5s;
  animation-iteration-count: infinite;
}

@keyframes tilt {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(3deg); }
  70% { transform: rotate(-1deg); }
  90% { transform: rotate(2deg); }
  100% { transform: rotate(-1deg); }
}