@-webkit-keyframes rotateLogoGoogle {
  0% {
    right: 420px;
    margin-top: -56px;
    -webkit-transform: rotate(0deg) scale(0.5);
    -webkit-transform-origin: center center;
  }
  30% {
    margin-top: -100px;
  }
  100% {
    right: 20px;
    margin-top: -56px;
    -webkit-transform: rotate(360deg) scale(1);
    -webkit-transform-origin: center center;
  }
}

@-moz-keyframes rotateLogoGoogle {
  0% {
    right: 420px;
    margin-top: -56px;
    -moz-transform: rotate(0deg) scale(0.5);
    -moz-transform-origin: center center;
  }
  30% {
    margin-top: -100px;
  }
  100% {
    right: 20px;
    margin-top: -56px;
    -moz-transform: rotate(360deg) scale(1);
    -moz-transform-origin: center center;
  }
}

@keyframes rotateLogoGoogle {
  0% {
    right: 420px;
    margin-top: -56px;
    transform: rotate(0deg) scale(0.5);
    transform-origin: center center;
  }
  30% {
    margin-top: -100px;
  }
  100% {
    right: 20px;
    margin-top: -56px;
    transform: rotate(360deg) scale(1);
    transform-origin: center center;
  }
}

@-webkit-keyframes rotateLogoTwitter {
  0% {
    left: 420px;
    margin-top: -56px;
    -webkit-transform: rotate(0deg) scale(0.5);
    -webkit-transform-origin: center center;
  }
  30% {
    margin-top: -100px;
  }
  100% {
    left: 20px;
    margin-top: -56px;
    -webkit-transform: rotate(360deg) scale(1);
    -webkit-transform-origin: center center;
  }
}

@-moz-keyframes rotateLogoTwitter {
  0% {
    left: 420px;
    margin-top: -56px;
    -moz-transform: rotate(0deg) scale(0.5);
    -moz-transform-origin: center center;
  }
  30% {
    margin-top: -100px;
  }
  100% {
    left: 20px;
    margin-top: -56px;
    -moz-transform: rotate(360deg) scale(1);
    -moz-transform-origin: center center;
  }
}

@keyframes rotateLogoTwitter {
  0% {
    left: 420px;
    margin-top: -56px;
    transform: rotate(0deg) scale(0.5);
    transform-origin: center center;
  }
  30% {
    margin-top: -100px;
  }
  100% {
    left: 20px;
    margin-top: -56px;
    transform: rotate(360deg) scale(1);
    transform-origin: center center;
  }
}

@-webkit-keyframes rotateLogoHoverSpan {
  0% {
    -webkit-transform: rotate(0deg) scale(0);
    -webkit-transform-origin: center center;
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    -webkit-transform-origin: center center;
  }
}

@-moz-keyframes rotateLogoHoverSpan {
  0% {
    -moz-transform: rotate(360deg) scale(0);
    -moz-transform-origin: center center;
  }
  100% {
    -moz-transform: rotate(0deg) scale(1);
    -moz-transform-origin: center center;
  }
}

@keyframes rotateLogoHoverSpan {
  0% {
    transform: rotate(360deg) scale(0);
    transform-origin: center center;
  }
  100% {
    transform: rotate(0deg) scale(1);
    transform-origin: center center;
  }
}

/*
    Document   : mixin.less
    Description:
        less mixins & functions. Imported file in other less files.
        Put your variables into a separate file.

// exemples of variables

    // Paths

@basePath:  '../';

@loader:         url('@{basePath}img/loader.gif') no-repeat center;
@artpack:        url('@{basePath}img/artpack.png');
@underline:      url('@{basePath}img/underline.png') repeat-x bottom;

    // Fonts Families

@sans:       Helvetica, Arial, sans-serif;
@dinBlod:    'DIN Next W01 Bold', Helvetica, Arial, sans-serif;
@dinLight:   'DIN Next W01 Light', Helvetica, Arial, sans-serif;
@dinRegular: 'DIN Next W01 Regular', Helvetica, Arial, sans-serif;

    // Fonts Sizes

@fontXSmall:  11px;
@fontSmall:   12px;
@fontRegular: 13px e('/') 130%;
@fontLarge:   18px;
@fontXLarge:  20px;

*/

/* --------------------------
        Mixins
    -------------------------- */

.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: '.';
  visibility: hidden;
}

.oldie #old-browser {
  display: block;
}

.oldie #master {
  height: 100%;
}

/*
    Document   : mixin.less
    Description:
        less mixins & functions. Imported file in other less files.
        Put your variables into a separate file.

// exemples of variables

    // Paths

@basePath:  '../';

@loader:         url('@{basePath}img/loader.gif') no-repeat center;
@artpack:        url('@{basePath}img/artpack.png');
@underline:      url('@{basePath}img/underline.png') repeat-x bottom;

    // Fonts Families

@sans:       Helvetica, Arial, sans-serif;
@dinBlod:    'DIN Next W01 Bold', Helvetica, Arial, sans-serif;
@dinLight:   'DIN Next W01 Light', Helvetica, Arial, sans-serif;
@dinRegular: 'DIN Next W01 Regular', Helvetica, Arial, sans-serif;

    // Fonts Sizes

@fontXSmall:  11px;
@fontSmall:   12px;
@fontRegular: 13px e('/') 130%;
@fontLarge:   18px;
@fontXLarge:  20px;

*/

/* --------------------------
        Mixins
    -------------------------- */

.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: '.';
  visibility: hidden;
}

.ico-lan {
  width: 98px;
  height: 98px;
  background-image: url('../img/common/sprite.png');
  background-position: -692px 0;
}

.ico-rugby {
  width: 98px;
  height: 98px;
  background-image: url('../img/common/sprite.png');
  background-position: -398px 0;
}

.ico-swag {
  width: 98px;
  height: 98px;
  background-image: url('../img/common/sprite.png');
  background-position: -594px 0;
}

.ico-mashup {
  width: 99px;
  width: 99px !important;
  height: 100px !important;
  height: 99px;
  background-image: url('../img/common/sprite.png');
  background-position: -888px 0;
}

.ico-badminton {
  width: 98px;
  height: 98px;
  background-image: url('../img/common/sprite.png');
  background-position: -496px 0;
}

.ico-running {
  width: 98px;
  height: 98px;
  background-image: url('../img/common/sprite.png');
  background-position: -790px 0;
}

/*
    Document   : mixin.less
    Description:
        less mixins & functions. Imported file in other less files.
        Put your variables into a separate file.

// exemples of variables

    // Paths

@basePath:  '../';

@loader:         url('@{basePath}img/loader.gif') no-repeat center;
@artpack:        url('@{basePath}img/artpack.png');
@underline:      url('@{basePath}img/underline.png') repeat-x bottom;

    // Fonts Families

@sans:       Helvetica, Arial, sans-serif;
@dinBlod:    'DIN Next W01 Bold', Helvetica, Arial, sans-serif;
@dinLight:   'DIN Next W01 Light', Helvetica, Arial, sans-serif;
@dinRegular: 'DIN Next W01 Regular', Helvetica, Arial, sans-serif;

    // Fonts Sizes

@fontXSmall:  11px;
@fontSmall:   12px;
@fontRegular: 13px e('/') 130%;
@fontLarge:   18px;
@fontXLarge:  20px;

*/

/* --------------------------
        Mixins
    -------------------------- */

.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: '.';
  visibility: hidden;
}

#master {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #3b63d5;
}

#old-browser {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  display: none;
  width: 100%;
  height: 100%;
  background: url('../img/common/old.jpg') center center no-repeat #7e370b;
}

#old-browser.active {
  display: block;
}

.reduced #main-content {
  margin: 150px 0 0;
}

#main-content {
  position: relative;
  display: table;
  width: 100%;
  height: auto;
  margin: 300px 0 0;
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#main-footer {
  padding: 70px 0;
  text-align: center;
  background: #ffffff;
}

#main-footer .description {
  font-family: 'Raleway';
  font-size: 1.3em;
  font-style: normal;
  font-weight: 400;
  color: #878686;
}

#main-footer .description a:nth-child(1) {
  color: #3b63d5;
}

#main-footer .description a:nth-child(2) {
  color: #ed5151;
}

/*
    Document   : mixin.less
    Description:
        less mixins & functions. Imported file in other less files.
        Put your variables into a separate file.

// exemples of variables

    // Paths

@basePath:  '../';

@loader:         url('@{basePath}img/loader.gif') no-repeat center;
@artpack:        url('@{basePath}img/artpack.png');
@underline:      url('@{basePath}img/underline.png') repeat-x bottom;

    // Fonts Families

@sans:       Helvetica, Arial, sans-serif;
@dinBlod:    'DIN Next W01 Bold', Helvetica, Arial, sans-serif;
@dinLight:   'DIN Next W01 Light', Helvetica, Arial, sans-serif;
@dinRegular: 'DIN Next W01 Regular', Helvetica, Arial, sans-serif;

    // Fonts Sizes

@fontXSmall:  11px;
@fontSmall:   12px;
@fontRegular: 13px e('/') 130%;
@fontLarge:   18px;
@fontXLarge:  20px;

*/

/* --------------------------
        Mixins
    -------------------------- */

.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: '.';
  visibility: hidden;
}

.reduced #main-nav {
  height: 150px;
}

.reduced #main-nav ul li a .ico {
  top: 26px;
}

#main-nav {
  position: fixed;
  top: -400px;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #ffffff;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#main-nav.active {
  top: 0;
}

#main-nav ul {
  position: relative;
  width: 962px;
  height: 100%;
  margin: 0 auto;
}

#main-nav ul li {
  position: relative;
  display: block;
  float: left;
  width: 237px;
  height: 100%;
  text-align: center;
  border-left: 1px solid #e8e7e5;
  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
      -ms-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}

#main-nav ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Raleway';
  font-size: 3em;
  font-style: normal;
  font-weight: 200;
  line-height: 430px;
  color: #c1c1c1;
  -webkit-perspective: 200px;
     -moz-perspective: 200px;
      -ms-perspective: 200px;
          perspective: 200px;
}

#main-nav ul li a .ico {
  position: absolute;
  top: 60px;
  left: 50%;
  display: block;
  margin-left: -46.5px;
  -webkit-transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#main-nav ul li a .text {
  display: block;
}

#main-nav ul li:first-child {
  border-left: 1px solid #ffffff;
}

#main-nav ul li.resume .ico {
  width: 93px;
  height: 93px;
  background-image: url('../img/common/sprite.png');
  background-position: -119px 0;
}

#main-nav ul li.resume:hover,
#main-nav ul li.resume.active {
  background: #ffb325;
}

#main-nav ul li.school .ico {
  width: 93px;
  height: 93px;
  background-image: url('../img/common/sprite.png');
  background-position: -26px 0;
}

#main-nav ul li.school:hover,
#main-nav ul li.school.active {
  background: #a3bd5f;
  border-left: 1px solid #a3bd5f;
}

#main-nav ul li.hobbies .ico {
  width: 93px;
  height: 93px;
  background-image: url('../img/common/sprite.png');
  background-position: -212px 0;
}

#main-nav ul li.hobbies:hover,
#main-nav ul li.hobbies.active {
  background: #3b63d5;
  border-left: 1px solid #3b63d5;
}

#main-nav ul li.contact .ico {
  width: 93px;
  height: 93px;
  background-image: url('../img/common/sprite.png');
  background-position: -305px 0;
}

#main-nav ul li.contact:hover,
#main-nav ul li.contact.active {
  background: #ed5151;
  border-left: 1px solid #ed5151;
}

#main-nav ul li.active a {
  color: #ffffff;
}

#main-nav ul li:hover a {
  color: #ffffff;
}

#main-nav ul li:hover .ico {
  -webkit-animation: swing 1s linear 0s 1 normal;
     -moz-animation: swing 1s linear 0s 1 normal;
      -ms-animation: swing 1s linear 0s 1 normal;
       -o-animation: swing 1s linear 0s 1 normal;
          animation: swing 1s linear 0s 1 normal;
}

/*
    Document   : mixin.less
    Description:
        less mixins & functions. Imported file in other less files.
        Put your variables into a separate file.

// exemples of variables

    // Paths

@basePath:  '../';

@loader:         url('@{basePath}img/loader.gif') no-repeat center;
@artpack:        url('@{basePath}img/artpack.png');
@underline:      url('@{basePath}img/underline.png') repeat-x bottom;

    // Fonts Families

@sans:       Helvetica, Arial, sans-serif;
@dinBlod:    'DIN Next W01 Bold', Helvetica, Arial, sans-serif;
@dinLight:   'DIN Next W01 Light', Helvetica, Arial, sans-serif;
@dinRegular: 'DIN Next W01 Regular', Helvetica, Arial, sans-serif;

    // Fonts Sizes

@fontXSmall:  11px;
@fontSmall:   12px;
@fontRegular: 13px e('/') 130%;
@fontLarge:   18px;
@fontXLarge:  20px;

*/

/* --------------------------
        Mixins
    -------------------------- */

.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: '.';
  visibility: hidden;
}

.layout {
  display: block;
  width: 100%;
  height: 500px;
  padding: 0 0;
}

.layout > .nested {
  position: relative;
  display: table;
  width: 962px;
  height: 100%;
  margin: 0 auto;
}

.layout > .nested .center-context {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}

.layout-resume {
  background: #3b63d5;
}

.layout-resume .center-context {
  -webkit-perspective: 400px;
     -moz-perspective: 400px;
      -ms-perspective: 400px;
          perspective: 400px;
}

.layout-resume .nested {
  width: 740px;
}

.layout-resume .title {
  position: relative;
  margin: 0 0 10px;
  font-family: 'Raleway';
  font-size: 11em;
  font-style: normal;
  font-weight: 200;
  line-height: 100%;
  color: #ffffff;
  -khtml-opacity: 0;
    -moz-opacity: 0;
         opacity: 0;
  -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
  -webkit-transform-origin: 0 0 0;
     -moz-transform-origin: 0 0 0;
      -ms-transform-origin: 0 0 0;
       -o-transform-origin: 0 0 0;
          transform-origin: 0 0 0;
}

.layout-resume .subtitle {
  position: relative;
  margin: 0 0 25px;
  font-family: 'Raleway';
  font-size: 2.8em;
  font-style: normal;
  font-weight: 200;
  color: #ffffff;
  -khtml-opacity: 0;
    -moz-opacity: 0;
         opacity: 0;
  -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
  -webkit-transform-origin: 100% 100% 0;
     -moz-transform-origin: 100% 100% 0;
      -ms-transform-origin: 100% 100% 0;
       -o-transform-origin: 100% 100% 0;
          transform-origin: 100% 100% 0;
}

.layout-resume .subtitle .list {
  position: relative;
  display: inline-block;
  width: 90%;
  height: 30px;
  list-style: none;
}

.layout-resume .subtitle .list li {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  -khtml-opacity: 0;
    -moz-opacity: 0;
         opacity: 0;
  -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
  -webkit-transition: opacity 0.6s linear;
     -moz-transition: opacity 0.6s linear;
      -ms-transition: opacity 0.6s linear;
       -o-transition: opacity 0.6s linear;
          transition: opacity 0.6s linear;
  -webkit-backface-visibility: hidden;
}

.layout-resume .subtitle .list li.active {
  -khtml-opacity: 1;
    -moz-opacity: 1;
         opacity: 1;
  -ms-filter: "alpha(opacity=100)";
      filter: alpha(opacity=100);
}

.layout-resume .description {
  position: relative;
  font-family: 'Raleway';
  font-size: 2em;
  font-style: normal;
  font-weight: 200;
  color: #ffffff;
  -khtml-opacity: 0;
    -moz-opacity: 0;
         opacity: 0;
  -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
}

.layout-resume .description .button {
  padding: 15px 20px;
  color: #ffffff;
  background: #2347af;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
      -ms-border-radius: 2px;
       -o-border-radius: 2px;
          border-radius: 2px;
  -webkit-transition: background-color 0.3s linear;
     -moz-transition: background-color 0.3s linear;
      -ms-transition: background-color 0.3s linear;
       -o-transition: background-color 0.3s linear;
          transition: background-color 0.3s linear;
}

.layout-resume .description .button:hover {
  background: #18327e;
}

.layout-resume .description .ico-linkedIn {
  display: inline-block;
  width: 26px;
  height: 26px;
  text-indent: -999em;
  background-image: url('../img/common/sprite.png');
  background-position: 0 0px;
}

.layout-resume .description span {
  margin: 0 5px;
  color: #ffffff;
}

.layout-resume .ico {
  position: relative;
  top: -15px;
  display: inline-block;
  width: 24px;
  margin: 0 0 0 0;
  font-size: 0.8em;
  color: #ffb325;
  -khtml-opacity: 0;
    -moz-opacity: 0;
         opacity: 0;
  -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
  -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
     -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
      -ms-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
       -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-backface-visibility: hidden;
}

.layout-resume .ico.active {
  top: 0;
  -khtml-opacity: 1;
    -moz-opacity: 1;
         opacity: 1;
  -ms-filter: "alpha(opacity=100)";
      filter: alpha(opacity=100);
}

.layout-resume span {
  color: #ffb425;
}

.layout-school {
  background: #ed5151;
}

.layout-school .bg {
  display: inline-block;
  width: 426px;
  height: 384px;
  margin: 0 50px 0 0;
  background-image: url('../img/common/sprite.png');
  background-position: -1257px 0;
  -webkit-transform: scale(0);
     -moz-transform: scale(0) rotate(0.01deg);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

.layout-school .features {
  display: inline-block;
  width: 50%;
}

.layout-school .features .item {
  position: relative;
  display: block;
  margin: 0 0 10px;
  overflow: hidden;
  -khtml-opacity: 0;
    -moz-opacity: 0;
         opacity: 0;
  -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
}

.layout-school .features .date {
  display: block;
  float: left;
  width: 67px;
  height: 67px;
  margin: 0 30px 0 0;
  font-family: 'Raleway';
  font-size: 2em;
  font-style: normal;
  font-weight: 200;
  line-height: 67px;
  color: #ffffff;
  text-align: center;
  background: #ffffff;
  -webkit-border-radius: 33.5px;
     -moz-border-radius: 33.5px;
      -ms-border-radius: 33.5px;
       -o-border-radius: 33.5px;
          border-radius: 33.5px;
}

.layout-school .features .date:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 67px;
  height: 67px;
  background: #ed5151;
  -webkit-border-radius: 33.5px;
     -moz-border-radius: 33.5px;
      -ms-border-radius: 33.5px;
       -o-border-radius: 33.5px;
          border-radius: 33.5px;
  content: " ";
  -webkit-transform: scale(0.97);
     -moz-transform: scale(0.97) rotate(0.01deg);
      -ms-transform: scale(0.97);
       -o-transform: scale(0.97);
          transform: scale(0.97);
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.layout-school .features .date span {
  position: relative;
  z-index: 1;
}

.layout-school .features .nested {
  position: relative;
  float: left;
  width: 360px;
}

.layout-school .features .nested .title {
  position: relative;
  z-index: 1;
  width: auto;
  height: 55px;
  padding: 0 25px;
  font-family: 'Raleway';
  font-size: 2.5em;
  font-style: normal;
  font-weight: 400;
  line-height: 55px;
  color: #ffffff;
  background: #f77272;
  -webkit-border-radius: 2px 2px 0 0;
     -moz-border-radius: 2px 2px 0 0;
      -ms-border-radius: 2px 2px 0 0;
       -o-border-radius: 2px 2px 0 0;
          border-radius: 2px 2px 0 0;
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.layout-school .features .nested .subtitle {
  position: relative;
  top: -70px;
  z-index: 0;
  width: auto;
  padding: 15px 25px;
  overflow: hidden;
  font-family: 'Raleway';
  font-size: 1.3em;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  color: #ffffff;
  background: #cd3333;
  -webkit-border-radius: 0 0 2px 2px;
     -moz-border-radius: 0 0 2px 2px;
      -ms-border-radius: 0 0 2px 2px;
       -o-border-radius: 0 0 2px 2px;
          border-radius: 0 0 2px 2px;
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.layout-school .features .item:hover .date,
.layout-school .features .item.active .date {
  color: #f77272;
}

.layout-school .features .item:hover .date:after,
.layout-school .features .item.active .date:after {
  -webkit-transform: scale(0);
     -moz-transform: scale(0) rotate(0.01deg);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

.layout-school .features .item:hover .nested .title,
.layout-school .features .item.active .nested .title {
  color: #f77272;
  background: #ffffff;
}

.layout-school .features .item:hover .nested .subtitle,
.layout-school .features .item.active .nested .subtitle {
  top: 0;
}

.layout-school .features .item:hover .arrow,
.layout-school .features .item.active .arrow {
  color: #ffffff;
}

.layout-school .features .arrow {
  position: absolute;
  top: 18px;
  left: -9px;
  font-size: 19px;
  color: #f77272;
}

.layout-hobbies {
  background: #ffb325;
}

.layout-hobbies > .nested {
  width: 1062px;
}

.layout-hobbies .item {
  position: relative;
  display: inline-block;
  width: 49%;
  margin: 0 0 50px;
}

.layout-hobbies .item:nth-child(5),
.layout-hobbies .item:nth-child(6) {
  margin: 0;
}

.layout-hobbies .item .ico {
  display: inline-block;
  width: 98px;
  height: 98px;
  -webkit-transform: scale(0);
     -moz-transform: scale(0) rotate(0.01deg);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

.layout-hobbies .item .nested {
  position: relative;
  top: -13px;
  display: inline-block;
  padding: 0 0 0 25px;
  -webkit-transform: scale(0);
     -moz-transform: scale(0) rotate(0.01deg);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

.layout-hobbies .item .title {
  font-family: 'Raleway';
  font-size: 6em;
  font-style: normal;
  font-weight: 200;
  line-height: 100%;
  color: #ed5151;
}

.layout-hobbies .item .subtitle {
  font-family: 'Raleway';
  font-size: 2.3em;
  font-style: normal;
  font-weight: 200;
  line-height: 100%;
  color: #ed5151;
}

.layout-hobbies .item .subtitle a {
  color: #ed5151;
}

.layout-contact {
  background: #a3bd5f;
}

.layout-contact .nested {
  padding: 0;
}

.layout-contact .center-context {
  -webkit-perspective: 200px;
     -moz-perspective: 200px;
      -ms-perspective: 200px;
          perspective: 200px;
}

.layout-contact .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 270px;
  height: 198px;
  margin: -99px 0 0 -135px;
  background-image: url('../img/common/sprite.png');
  background-position: -987px 0;
  -webkit-transform: scale(0);
     -moz-transform: scale(0) rotate(0.01deg);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

.layout-contact .bg.active {
  -webkit-animation: tada 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
     -moz-animation: tada 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
      -ms-animation: tada 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
       -o-animation: tada 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
          animation: tada 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
}

.layout-contact .bg a {
  display: block;
  width: 100%;
  height: 100%;
}

.layout-contact .title {
  position: relative;
  top: 170px;
  font-family: 'Raleway';
  font-size: 6em;
  font-style: normal;
  font-weight: 200;
  line-height: 100%;
  color: #ffffff;
  text-align: center;
  -khtml-opacity: 0;
    -moz-opacity: 0;
         opacity: 0;
  -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
}

.layout-contact .button {
  position: absolute;
  top: 50%;
  z-index: 0;
  display: block;
  width: 112px;
  height: 112px;
  margin: -56px 0 0;
  line-height: 126px;
  text-align: center;
  background: #88a344;
  -webkit-border-radius: 56px;
     -moz-border-radius: 56px;
      -ms-border-radius: 56px;
       -o-border-radius: 56px;
          border-radius: 56px;
  -khtml-opacity: 0;
    -moz-opacity: 0;
         opacity: 0;
  -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.layout-contact .button span {
  display: block;
  font-size: 35px;
  color: #ffffff;
  -webkit-transition: font-size 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: font-size 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: font-size 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: font-size 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: font-size 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.layout-contact .button:hover span {
  font-size: 45px;
}

.layout-contact .button:hover:first-of-type {
  background: #00aced;
}

.layout-contact .button:hover:first-of-type span {
  -webkit-animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
     -moz-animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
      -ms-animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
       -o-animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
          animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
}

.layout-contact .button:hover:last-of-type {
  background: #c43523;
}

.layout-contact .button:hover:last-of-type span {
  -webkit-animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
     -moz-animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
      -ms-animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
       -o-animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
          animation: rotateLogoHoverSpan 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
}

.layout-contact .button:first-of-type {
  left: 20px;
}

.layout-contact .button:first-of-type.active {
  -khtml-opacity: 1;
    -moz-opacity: 1;
         opacity: 1;
  -ms-filter: "alpha(opacity=100)";
      filter: alpha(opacity=100);
  -webkit-animation: rotateLogoTwitter 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
     -moz-animation: rotateLogoTwitter 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
      -ms-animation: rotateLogoTwitter 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
       -o-animation: rotateLogoTwitter 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
          animation: rotateLogoTwitter 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
}

.layout-contact .button:last-of-type {
  right: 20px;
}

.layout-contact .button:last-of-type.active {
  -khtml-opacity: 1;
    -moz-opacity: 1;
         opacity: 1;
  -ms-filter: "alpha(opacity=100)";
      filter: alpha(opacity=100);
  -webkit-animation: rotateLogoGoogle 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
     -moz-animation: rotateLogoGoogle 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
      -ms-animation: rotateLogoGoogle 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
       -o-animation: rotateLogoGoogle 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
          animation: rotateLogoGoogle 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal;
}

@font-face {
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  src: url('../font/icomoon.eot');
  src: url('../font/icomoon.eot?#iefix') format('embedded-opentype'), url('../font/icomoon.woff') format('woff'), url('../font/icomoon.ttf') format('truetype'), url('../font/icomoon.svg#icomoon') format('svg');
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */

[data-icon]:before {
  font-family: 'icomoon';
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  content: attr(data-icon);
  speak: none;
  font-variant: normal;
}

/* Use the following CSS code if you want to have a class per icon */

/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icoon-"] {
*/

.icoon-twitter,
.icoon-location,
.icoon-google-plus,
.icoon-arrow-left {
  font-family: 'icomoon';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
  font-variant: normal;
}

.icoon-twitter:before {
  content: "\e000";
}

.icoon-location:before {
  content: "\e004";
}

.icoon-google-plus:before {
  content: "\e001";
}

.icoon-arrow-left:before {
  content: "\e002";
}