/* Defaults for mobile-first browsers */

.treeContainer{
  display: none;
}

#home {
  height: 0 !important;
}

/* Override defaults for browsers which can handle the website at full width */
@media (min-width: 1100px){
body{
  background: #e7c781;
  margin: 0;
}

#home {
  height: inherit !important;
}

.treeContainer{
  display: block;
}

#treeArea{
  display: block;
  height: auto;
  width: auto;
}

#wrapper {
  width: 980px;
  margin: 0 auto;
  position: relative;
  min-height: 695px;
}

#menu {
  width: 100%;
  position: relative;
  background: transparent url("../../images/tree.png") no-repeat 50% 0%;
  min-height: 695px;
}

#menu a{
  display: block;
  font-family: "times new roman";
}

/* Menu Item Locations */


.about
{
  position: absolute;
  bottom:246px;
  right:118px;
}

.about a
{
  display: block;
  color: #ea7288;
  font-size: 80.93px;
}

.projects
{
  position: absolute;
  position: absolute;
  top: 231px;
  left: 180px;
}

.projects a
{
  color: #fe617b;
  font-size: 74.71px;
}

.services
{
  position: absolute;
  bottom: 312px;
  right: 277px;
}

.services a
{
  font-size: 67.77px;
}

.coments
{
  position: absolute;
  top: 195px;
  right: 338px;
}

.coments a
{
  color: #fc5e6d;
  font-size: 53.2px;
}

.contacts
{
  position: absolute;
  top: 188px;
  left: 137px;
}

.contacts a
{
  color: #faacac;
  font-size: 58.35px;
}

.following
{
  position: absolute;
  bottom: 307px;
  left: 65px;
}

.following a
{
  color:#ed6771;
  font-size: 52px;
}

.video
{
  position: absolute;
  bottom: 324px;
  right: 38px;
}

.video a
{
  color: #fc747d;
  font-size: 42.18px;
}

.social
{
  position: absolute;
  top:36px;
  right:248px;
}

.social a
{
  color: #ed8392;
  font-size: 42.5px;
}

.find
{
  position: absolute;
  bottom: 277px;
  right: 32px;
}

.find a
{
  color: #fc4258;
  font-size: 44.09px;
}

.team
{
  position: absolute;
  top: 154px;
  right: 530px;
}

.team a
{
  color: #fe617b;
  font-size: 76.88px;
}

.information
{
  position: absolute;
  top: 52px;
  left: 200px;
}

.information a
{
  color: #000000;
  font-size: 45px;
}

.photos
{
  position: absolute;
  top: 62px;
  left: 427px;
}

.photos a
{
  color:#f2a2a4;
  font-size: 41px;
}

.works
{
  position: absolute;
  top: 106px;
  right: 98px;
}

.works a
{
  color: #e66a84;
  font-size: 72.32px;
}

.skills
{
  position: absolute;
  top: 277px;
  right: 135px;
}

.skills a
{
  color: #faacac;
  font-size: 65.1px;
  line-height: 0.8;
  text-align: center;
}



/* === Menu burrons in blue color === */

#menu a{
  text-decoration: none;
}

.blue .about a{
  color: #145b9b;
}

.blue .projects a{
  color: #588ba4;
}

.blue .services a{
  color: #00a4be;
}

.blue .coments a{
  color: #1b8eb7;
}

.blue .contacts a{
  color: #145b9b;
}

.blue .following a{
  color:#89b0c1;
}

.blue .video a{
  color: #186db9;
}

.blue .social a{
  color: #1d8db5;
}

.blue .find a{
  color: #60bae3;
}

/*.blue .information a{
  color: #145b9b;
}*/

.blue .photos a{
  color:#01aec9;
}

.blue .works a{
  color: #588ba4;
}

.blue .team a{
  color: #60bae3;
}

.blue .skills a{
  color: #60bae3;
}



/* Tree Animation */
#menu a:hover
{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all .5s ease-in-out;
}

.works, .contacts, .find, .information,
.social, .photos, .comment, .services, .following
{
  -webkit-animation: rotate-lr 3s ease-in-out infinite alternate;
  -moz-animation: rotate-lr 3s ease-in-out infinite alternate;
  animation: rotate-lr 3s ease-in-out infinite alternate;
}

 .projects, .coments, .skills, .video,
 .team, .about
{
  -webkit-animation: rotate-rl 3s ease-in-out infinite alternate;
  -moz-animation: rotate-rl 3s ease-in-out infinite alternate;
  animation: rotate-rl 3s ease-in-out infinite alternate;
}

@-webkit-keyframes rotate-lr
{
    from{
        -webkit-transform:rotate(-3deg);
    }
    to{
        -webkit-transform:rotate(3deg);
    }
} 

@-webkit-keyframes rotate-rl
{
    from{
        -webkit-transform:rotate(3deg);
    }
    to{
        -webkit-transform:rotate(-3deg);
    }
} 

@-moz-keyframes rotate-lr
{
    from{
        -moz-transform:rotate(-3deg);
    }
    to{
        -moz-transform:rotate(3deg);
    }
} 

@-moz-keyframes rotate-rl
{
    from{
        -moz-transform:rotate(3deg);
    }
    to{
        -moz-transform:rotate(-3deg);
    }
} 
@keyframes rotate-lr
{
    from{
        transform:rotate(-3deg);
    }
    to{
        transform:rotate(3deg);
    }
} 

@keyframes rotate-rl
{
    from{
        transform:rotate(3deg);
    }
    to{
        transform:rotate(-3deg);
    }
} 

}