/* 
maroon: #98012e
gray: #CED3DC;
brown / gray: 827378;
blue: #235789;
yellow: #F1D302;
light gray: #f4f4f4;
*/

*,
:before,
:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.hide {
  display: none;
}
.page__style {
  background: #6d326d;
  font-family: OpenSans-Regular, sans-serif;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: auto auto;
  overflow: hidden;
}
.page__style .page__description {
  color: #fff;
  font-weight: 300;
  text-align: center;
}
.page__style h1 {
  font-weight: 300;
  
  margin-bottom: 30px;
}
.page__style .btn_nav {
  background: #fff;
  
  border: none;
  color: #000;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding: 17px 30px;
  width: 120px;




}
.page__style .btn_nav:focus,
.page__style .btn_nav:active {
  outline: none;
}
.page__style a {
  text-decoration: none;
  color: #fff;
}
.page__style a:hover {
  text-decoration: underline;
}
.animate_content {
  animation: animate 3s ease;
}
.fadeIn {
  z-index: 10;
}
/*  home
-----------------------------------*/
.home {
  background: #5da9e9;
}
/*  Projects
-----------------------------------*/
.projects {
  background: #98012e;
}
/*  Skills
-----------------------------------*/
.skills {
  background: #F1D302;
}
/*  About
-----------------------------------*/
.about {
  background: #CED3DC;
}

/*  Contact
-----------------------------------*/
.contact {
  background: #c9cdc0;
}
/*****************************************************************
~ Mobile media-queries (max-width: 767px)
******************************************************************/






@-moz-keyframes animate {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}
@-webkit-keyframes animate {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}
@-o-keyframes animate {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes animate {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}