/*default classes*/
body {
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  background-color: #ecf0f1;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -15px;
  z-index: -9999;
}

img {
  display: block;
  width: 100%;
}

a {
  text-decoration: none;
  color: #000000;
  -webkit-transition: color .5s;
  -moz-transition: color .5s;
  -o-transition: color .5s;
  transition: color .5s;
}

a:hover {
  color: #92CDCF;
}

/*non respsonsive all screen sizes see this*/
.reveal {
  visibility: hidden;
}

.reveal_seq {
  visibility: hidden;
}

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
  box-sizing: border-box;
}

.icon_container {
  margin: auto;
  max-width: 364px;
}

.full_container_white {
  width: 100%;
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.full_container_cloud {
  width: 100%;
  background-color: #ecf0f1;
  box-sizing: border-box;
}

.tech_container {
  width: 100%;
  height: 680px;
  margin: 0 auto;
  max-width: 1000px;
  box-sizing: border-box;
}

.about {
  height: 1000px;
}

.contact {
  height: 500px;
}

.row {
  border: #9b59b6;
  overflow: hidden;
  margin-bottom: 20px;
}

.site-content {
  padding-top: 66px;
}


.header {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  height: 66px;
  line-height: 66px;
  color: #fff;
  background-color: transparent;
}

.menu {
  float: left;
}

.menu a {
  padding: 0 10px;
}

.txt_center {
  text-align: center;
}

.name_row {
  border: #9b59b6;
  overflow: hidden;
  margin-bottom: 0px;
}

.name {
  font-weight: 100;
  font-size: 30px;
  margin-top: 30px;
  margin-bottom: 0px;
}

.title {
  font-weight: 100;
  font-size: 30px;
  margin-top: 120px;
  margin-bottom: 90px;
}

.subtitle {
  font-weight: 100;
  font-size: 15px;
}

.info {
  font-size: 18px;
  line-height: 140%;
}

.big_space {
  height: 500px;
}

.icons {
  font-size: 65px !important;
  color: #000000;
}

.c_icons {
  font-size: 20px !important;
  color: #000000;
  padding-right: 10px;
  -webkit-transition: color .5s;
  -moz-transition: color .5s;
  -o-transition: color .5s;
  transition: color .5s;
}

.c_icons:hover {
  color: #92CDCF;
}

.arrow {
  font-size: 25px !important;
  color: #000000;
}

.arrow_center {
  width: 40px;
  margin-left: auto ;
  margin-right: auto ;
}

.small_space {
  height: 125px;
}

/*screens bigger than 769 see this laptop*/
@media only screen and (min-width: 769px) {

  .first_nav {
  margin-left: 25px;
}

  .p_title {
  position: absolute;
  left: 0;
  top: 30%;
  width: 100%;
  text-align: center;
  opacity: 0;
  color: transparent;
  font-size: 20px;
  -webkit-transition: all .5s;
  }

  .img_col:hover .p_title {
    opacity: 1;
    color: black;
    top: 20%;
  }

  .img_hr {
    position: absolute;
    color: black;
    background: black;
    right: 20%;
    top: 32%;
    width: 15%;
    height: 2px;
    opacity: 0;
    text-align: center;
    -webkit-transition: all .5s;
  }

  .img_col:hover .img_hr {
    opacity: 1;
    right: 42.5%;
  }


  .p_des {
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: transparent;
    -webkit-transition: all .5s;
  }

  .img_col:hover .p_des {
    opacity: 1;
    color: black;

  }

  .overlay {
    position: absolute;
    color: black;
    background: white;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    text-align: center;
    -webkit-transition: all .5s;
  }

  .img_col:hover .overlay {
    opacity: .8;
  }

  .name_row {
    margin-bottom: 20px;
  }

  .icon_row {
  border: #9b59b6;
  overflow: hidden;
  margin-bottom: 80px;
  }

  .name {
    margin-top: 60px;
  }

  .img_col {
  position: relative;
  float: left;
  width: 33.33333333%;
  padding: 0;
  box-sizing: border-box;
  }

  .col-12 {
    float: left;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-11 {
    float: left;
    width: 91.66666667%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-10 {
    float: left;
    width: 83.33333333%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-9 {
    float: left;
    width: 75%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-8 {
    float: left;
    width: 66.66666667%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-7 {
    float: left;
    width: 58.33333333%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-6 {
    float: left;
    width: 50%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-5 {
    float: left;
    width: 41.66666667%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-4 {
    float: left;
    width: 33.33333333%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-3 {
    float: left;
    width: 25%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-2 {
    float: left;
    width: 16.66666667%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-1 {
    float: left;
    width: 8.33333333%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .col-off-1 {
    margin-left: 8.333%;
  }

  .col-off-2 {
    margin-left: 16.667%;
  }

  .col-off-3 {
    margin-left: 25%;
  }

  .col-off-4 {
    margin-left: 33.333%;
  }

  .col-off-5 {
    margin-left: 41.667%;
  }

  .col-off-6 {
    margin-left: 50%;
  }

  .col-off-7 {
    margin-left: 58.333%;
  }

  .col-off-8 {
    margin-left: 66.667%;
  }

  .col-off-9 {
    margin-left: 75%;
  }

  .col-off-10 {
    margin-left: 83.333%;
  }

  .col-off-11 {
    margin-left: 91.667%;
  }
}

@media only screen and (min-width: 651px) and (max-width: 910px) {

  .img_hr {
    top: 29%;
  }

  .p_des {
    top: 36%;
  }

  .projects {
    height: 100%;
    max-width: 650px
  }

   .img_col {
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }
}

/* screens smaller than 768px see this tablet*/
@media only screen and (max-width: 768px) {

  .p_des {
    display: none;
  }

  .p_title {
    display: none;
  }

  .site-pusher,
  .site-container {
    height: 100%;
  }

  .sm_icon_row {
  border: #9b59b6;
  overflow: hidden;
  margin-bottom: 80px;
  }

  .site-container {
    overflow: hidden;
  }

  .site-pusher {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  .site-content {
    position: absolute;
    top: 66px;
    right: 0;
    left: 0;
    bottom: 0;
    padding-top: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .img_col {
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  .menu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #ecf0f1;
    width: 250px;
    -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
  }
  .menu a {
    display: block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid white;
  }

  .with--sidebar .site-pusher {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }

  .with--sidebar .site-cache {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .header__icon {
    position: relative;
    display: block;
    float: left;
    width: 50px;
    height: 66px;
    cursor: pointer;
  }
  .header__icon:after {
    content: '';
    position: absolute;
    display: block;
    width: 1rem;
    height: 0;
    top: 16px;
    left: 15px;
    box-shadow: 0 10px 0 1px #1C1D21, 0 16px 0 1px #1C1D21, 0 22px 0 1px #1C1D21;
  }

  .arrow {
    font-size: 20px !important;
  }

  .projects {
    height: 100%;
    max-width: 650px
  }

  .tech_container, .about  {
    height: 100%;
  }

  .tech_container {
    width: 380px;
  }

  .sm-col-12 {
  float: left;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  }

  .sm-col-11 {
    float: left;
    width: 91.66666667%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-10 {
    float: left;
    width: 83.33333333%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-9 {
    float: left;
    width: 75%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-8 {
    float: left;
    width: 66.66666667%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-7 {
    float: left;
    width: 58.33333333%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-6 {
    float: left;
    width: 50%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-5 {
    float: left;
    width: 41.66666667%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-4 {
    float: left;
    width: 33.33333333%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-3 {
    float: left;
    width: 25%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-2 {
    float: left;
    width: 16.66666667%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-1 {
    float: left;
    width: 8.33333333%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .sm-col-off-1 {
    margin-left: 8.333%;
  }

  .sm-col-off-2 {
    margin-left: 16.667%;
  }

  .sm-col-off-3 {
    margin-left: 25%;
  }

  .sm-col-off-4 {
    margin-left: 33.333%;
  }

  .sm-col-off-5 {
    margin-left: 41.667%;
  }

  .sm-col-off-6 {
    margin-left: 50%;
  }

  .sm-col-off-7 {
    margin-left: 58.333%;
  }

  .sm-col-off-8 {
    margin-left: 66.667%;
  }

  .sm-col-off-9 {
    margin-left: 75%;
  }

  .sm-col-off-10 {
    margin-left: 83.333%;
  }

  .sm-col-off-11 {
    margin-left: 91.667%;
  }

  .site-content {
    padding-top: 66px;
  }
}

/*breakpoint for projects*/
@media only screen and (min-width: 450px)  and (max-width: 650px) {

    .projects{
    height: 100%;
    max-width: 450px
  }

   .img_col {
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

}

@media only screen and (max-width: 364px) {
  .icon_container {
    margin: aut o;
    padding: 20px;
  }
  .icons {
    font-size: 34px !important;
  }
}

/*3js height respsonsiveness*/
@media only screen and (min-height: 1050px) and (max-height: 1100px) {
    .big_space {
    height: 825px;
  }
}

@media only screen and (min-height: 1000px) and (max-height: 1050px) {
    .big_space {
    height: 775px;
  }
}

@media only screen and (min-height: 950px) and (max-height: 1000px) {
    .big_space {
    height: 725px;
  }
}

@media only screen and (min-height: 900px) and (max-height: 950px) {
    .big_space {
    height: 675px;
  }
}

@media only screen and (min-height: 850px) and (max-height: 900px) {
    .big_space {
    height: 625px;
  }
}

@media only screen and (min-height: 800px) and (max-height: 850px) {
    .big_space {
    height: 575px;
  }
}

@media only screen and (min-height: 750px) and (max-height: 800px) {
    .big_space {
    height: 525px;
  }
}

@media only screen and (min-height: 700px) and (max-height: 750px) {
    .big_space {
    height: 475px;
  }
}

@media only screen and (min-height: 650px) and  (max-height: 700px) {
    .big_space {
    height: 425px;
  }
}

@media only screen and (min-height: 600px) and (max-height: 650px) {
    .big_space {
    height: 375px;
  }
}

@media only screen and (min-height: 550px) and (max-height: 600px) {
    .big_space {
    height: 325px;
  }
}

@media only screen and (min-height: 500px) and (max-height: 550px) {
    .big_space {
    height: 275px;
  }
}

@media only screen and (min-height: 450px) and (max-height: 500px) {
    .big_space {
    height: 225px;
  }
}

/*icon title respsonsiveness*/
@media only screen and (min-width: 841px) {
  .icon_txt {
  display: none;
}
}

@media only screen and (max-width: 840px) {

  .icon_txt_lg {
  display: none;
  }
}