.section {
  padding: 3rem 0 7rem;
}

#hero {position:fixed; opacity:1.0; background-image:url(../img/mybestfriend.jpg) ; background-size:cover; background-position:top center; padding-bottom:0px; width:100%; height:100%; z-index:1; top:0px; left:0px;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }
#hero.bump {position:fixed; background-image:url(../img/mybestfriend.jpg) ; background-size:cover; background-position:top center; padding-bottom:0px; width:100%; height:100%; z-index:1; top:0px; left:100%;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }
#hero.up {top:-200px; left:0px; opacity:0;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }
#hero.vanish {position:fixed; opacity:0.0; background-image:url(../img/mybestfriend.jpg) ; background-size:cover; background-position:top center; padding-bottom:0px; width:100%; height:100%; z-index:1; top:0px; left:0px;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }
#hero2 {position:absolute; background-image:url(../img/mybestfriend_about3.jpg) ; background-size:cover; background-position:top center; padding-bottom:0px; width:100%; height:100%; z-index:11; top:0px; left:-100%;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }
#hero2.up { }
#hero2.bump {position:absolute; background-image:url(../img/mybestfriend_about3.jpg) ; background-size:cover; background-position:top center; padding-bottom:0px; width:100%; height:100%; z-index:11; top:0px; left:0px;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }

#about {position:absolute; background:#fff; width:50%; min-height:100%; height:auto; z-index:12;  top:0px; left:-100%;  -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s }
#about.swap {position:absolute; background:#fff; width:50%; min-height:100%; height:auto;  z-index:12; top:0px; left:0px;  -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s }
#abouttext {position:absolute; top:15%; left:15%; min-height:100%; height:auto; width:70%;  margin-bottom:0px; z-index:13; padding-bottom:10%;}
.aboutline {position:relative; top:0px; left:0px; height:auto; padding-bottom:10%; width:100%;}

#contact {position:fixed; background:rgba(255,255,255,0.9); width:100%; min-height:100%;  z-index:14;  top:-300%; left:0px;  -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s }
#contact.iamhuman {position:fixed; background:rgba(255,255,255,0.9); width:100%; min-height:100%;  z-index:14;  top:0px; left:0px;  -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s }
#myemail {position:absolute; top:25%; height:100%; width:80%; left:10%; padding-bottom:0px;}
#closecontact {position:absolute; bottom:10%; margin-bottom:-24.5px; left:50%; margin-left:-24.5px; height:49px; width:49px;  z-index:99; cursor:pointer;}
#myname {position:absolute; top:30%; height:auto; width:100%; left:0px; padding-bottom:0px;}
#m1 {position:fixed; top:50px; left:50px; height:50px; width:50px; z-index:99999999999999;}
.slippy {position:fixed; top:20px; right:500px;}

.hide {opacity:0.0; margin-top:80px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.show {opacity:1.0; margin-top:0px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.down {position:absolute; bottom:28%;  left:50%; margin-left:-26px; height:52px; width:52px; z-index:10; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.down:hover {position:absolute; bottom:10%; left:50%;  margin-left:-30px; height:60px; width:60px; z-index:10; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.stretch {width:100%;}
.mlink {position:absolute; top:15%; left:15%; width:60%; height:100%; }
.point {cursor:pointer;}
.menewe{position:fixed; top:20px; right:40px; width:35px; height:50px; z-index:99999999; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.menewe.slippy{position:fixed; top:20px; right:46%; width:35px; height:50px; z-index:99999999; -webkit-transition: all 1.2s; -moz-transition: all 1.2s; -ms-transition: all 1.2s; -o-transition: all 1.2s; transition: all 1.2s; }

#scroll {position:fixed; bottom:-100%; left:50%; margin-left:-10px; width:14px; height:21px; z-index:999; opacity:0.0; -webkit-transition: all 1.8s; -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s;}
#scroll.movementup {position:fixed; bottom:10%; left:50%; margin-left:-10px; width:14px; height:21px; z-index:999; opacity:1.0;-webkit-transition: all 1.8s; -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s;}



.mouse
{
height: 21px;
width: 14px;
  border-radius: 10px;
  transform: none;
  border: 2px solid #ff4848;
  top: 170px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
}
.mouse.scroll
{
height: 21px;
width: 14px;
  border-radius: 10px;
  transform: none;
  border: 2px solid #ff4848; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
  top: 170px;
}

.wheel
{
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: #ff4848;
  position: relative; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
}
.wheel.scroll
{
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: #ff4848;
  position: relative; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
}

.wheel
{
  -webkit-animation: mouse-wheel 1.2s ease infinite;
  -moz-animation: mouse-wheel 1.2s ease infinite;
  -ms-animation: mouse-wheel 1.2s ease infinite;
}

@-webkit-keyframes mouse-wheel
{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-ms-keyframes mouse-wheel
{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel
{
  0% { top: 1px; }
  50% { top: 2px; }
  100% { top: 3px;}
}
@-ms-keyframes mouse-wheel
{
  0% { top: 1px; }
  50% { top: 2px; }
  100% { top: 3px;}
}
@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-ms-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

#blanket {position:fixed; top:0px; left:0px; height:100%; width:100%; z-index:1; opacity:0.0; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061e2b+0,06171e+100 */

background: rgb(6,30,43); /* Old browsers */

background: -moz-radial-gradient(center, ellipse cover,  rgba(6,30,43,1) 0%, rgba(6,23,30,1) 100%); /* FF3.6-15 */

background: -webkit-radial-gradient(center, ellipse cover,  rgba(6,30,43,1) 0%,rgba(6,23,30,1) 100%); /* Chrome10-25,Safari5.1-6 */

background: radial-gradient(ellipse at center,  rgba(6,30,43,1) 0%,rgba(6,23,30,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#061e2b', endColorstr='#06171e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#blanket.see {position:fixed; top:0px; left:0px; height:100%; width:100%; z-index:99999; opacity:0.85; display:block; -webkit-transition: all 1.8s; -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061e2b+0,06171e+100 */

background: rgb(6,30,43); /* Old browsers */

background: -moz-radial-gradient(center, ellipse cover,  rgba(6,30,43,1) 0%, rgba(6,23,30,1) 100%); /* FF3.6-15 */

background: -webkit-radial-gradient(center, ellipse cover,  rgba(6,30,43,1) 0%,rgba(6,23,30,1) 100%); /* Chrome10-25,Safari5.1-6 */

background: radial-gradient(ellipse at center,  rgba(6,30,43,1) 0%,rgba(6,23,30,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#061e2b', endColorstr='#06171e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#half {position:fixed; top:0px; right:-50%; height:100%; width:50%; z-index:999999; background: #fff;  -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
#half.open {position:fixed; top:0px; right:0px; height:100%; width:50%; z-index:999999;  background: #fff; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}

.spinner-master2 * {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  box-sizing: border-box;
}

.spinner-master2 {
  position: relative;
  margin: 0px auto;
  height: 50px;
  width: 30px;
}

.spinner-master2 input[type=checkbox] {
  display: none;
}

.spinner-master2 label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 10px;
  left: 0;
}

.spinner-master2 .spinner2 {
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #ff4848;
}

.spinner-master2 .diagonal.part-1 {
  position: relative;
  float: left;
}

.spinner-master2 .horizontal {
  position: relative;
  float: left;
  margin-top: 7px;
}

.spinner-master2 .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: 6px;
}

.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal {
  opacity: 0;
}

.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: 10px;
}

.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -13px;
}



/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#wrap {
  position: absolute;
  width: 100%;
  top:100%;
  left:0px;
  height:auto;
  z-index:9 !important;
  background:#06171e; }
  #wrap.bumpdown { }

#wrap.wraptop {top:0px;}

.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box;
  z-index:10; }
.column,
.columns {
  width: 100%;
  left:0px;
  float: left;
  box-sizing: border-box; 
  margin-bottom:-7px; margin-top:0px; padding-top:0px; padding-bottom:0px;}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 100%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 0px; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 33.33333333333%; background-size:cover; background-image:url(../img/discover.png);background-position:center center; background-repeat: no-repeat;}
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 50%;}
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; 
  line-height: 1.6;
  font-weight: 400;
  font-family: Helvetica, Arial, sans-serif;
  color: #222;
  background-color:#06171e;
  overflow-y: scroll;
overflow-x: hidden; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 400; }
h1 { font-family:'Montserrat', "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color:#000; font-weight:100; font-size: 1.5rem; line-height: 1.35; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
h2 { font-size: 1.0rem; line-height: 1.5;  letter-spacing: .4rem; color:#fff; font-weight:100; }
h3 { font-family:'Montserrat', "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color:#ff4848; font-weight:100; font-size: 3.0rem; line-height: 1.35; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; }
h3:hover { font-family:'Montserrat', "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color:#ff4848; font-weight:100; font-size: 3.0rem; line-height: 1.35; letter-spacing:0.4rem; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
h4 { font-family:'Montserrat', "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color:#ff4848; font-weight:100; font-size: 6.0rem; line-height: 6.35rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; }
h5 { font-family:'Montserrat', "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color:#ff4848; font-weight:100; font-size: 2.0rem; line-height: 2.35rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; }
h6 { font-size: 1.0rem; line-height: 1.5;  letter-spacing: .2rem; color:#000; font-weight:100; }


  h1 { font-family:'Montserrat', "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color:#000; font-weight:100; font-size: 1.5rem; line-height: 1.35; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; }
  h2 { font-size: 1.0rem; }
  h3 { font-size: 6.0rem; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
  h3:hover { font-size: 6.0rem; letter-spacing:0.4rem; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
  h4 { font-size: 12.0rem; line-height:12.35rem; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
  h5 { font-size: 3.0rem; line-height:2.35rem; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
  h6 { font-size: 1.5rem; }
  a { font-size: 1.0rem;}


p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {color: #ff4848; text-decoration:none; font-size:2.5rem; letter-spacing:0.0rem;-moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
a:hover {color: #ff4848;letter-spacing:0.2rem;-moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
	
  width: 100%;
	height:auto;
  min-height: auto;
  box-sizing: border-box; }

.u-max-full-width {
  max-width: 100%;
  min-height: auto;
	height:auto;
  box-sizing: border-box; cursor:pointer; 
  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s
  }
  .u-max-full-width:hover {
  max-width: 100%;
	  height:auto;
  min-height: auto;
  box-sizing: border-box; cursor:pointer; opacity:0.45;
  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s
  }


  
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }






/* Nav */

.c-hamburger {
  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  font-size: 0;
  background-color:transparent;
  z-index:999;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
}

.c-hamburger:focus {
  outline: none;
}


.c-hamburger span {
  display: block;
  position: absolute;
  top: 25px;
  left: 8px;
  right: 8px;
  height: 3px;
  background: #ff4848;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ff4848;
  content: "";
}

.c-hamburger span::before {
  top: -10px;
}

.c-hamburger span::after {
  bottom: -10px;
}


.c-hamburger--htx {
  background-color: none;
}

.c-hamburger--htx span {
  -webkit-transition: background 0s 0.3s;
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
  transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: none;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
  transition-delay: 0s, 0.3s;
}




/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; 
  margin-top:0px;
  margin-bottom:0px;
  padding-top:0px;
  padding-bottom:0px;}





/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

@media (max-width: 950px) {
    #half.open {position:fixed; top:0px; right:0px; height:100%; width:100%; z-index:999999;  background: #fff; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
	#hero {position:absolute; background-image:url(../img/mybestfriend.jpg) ; background-size:cover; background-position:center center; padding-bottom:0px; width:100%; height:100%; z-index:1; top:0px; left:0px;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }
	
	#hero.bump {position:absolute; background-image:url(../img/mybestfriend.jpg) ; background-size:cover; background-position:center center; padding-bottom:0px; width:100%; height:100%; z-index:1; top:0px; left:0px;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }
#hero.up { position:absolute; background-image:url(../img/mybestfriend.jpg) ; background-size:cover; background-position:center center; padding-bottom:0px; width:100%; height:100%; z-index:1; top:0px; left:0px;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s}

#hero2 {position:absolute; background-image:url(../img/mybestfriend_about3.jpg) ; background-size:cover; background-position:center right; padding-bottom:0px; width:100%; height:100%; z-index:11; top:0px; left:-100%;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }
#hero2.bump {position:absolute; background-image:url(../img/mybestfriend_about3.jpg) ; background-size:cover; background-position:center right; padding-bottom:0px; width:100%; height:100%; z-index:11; top:0px; left:0px;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }

#hero2.up {top:-200px; left:0px; opacity:0;  -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s }

#about {position:absolute; background:#fff; width:100%; height:auto; z-index:13; top:85%; left:-100%; padding-bottom:30px;  -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s }

#about.swap {position:absolute; background:#fff; width:100%; height:auto; min-height:100%; padding-bottom:0; z-index:13; top:85%; left:0px; padding-bottom:30px;   -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s  }

#abouttext {position:absolute; top:8%; left:15%; height:auto; width:70%; padding-bottom:20px; margin-bottom:20px;}
.aboutline {position:relative; top:0px; left:0px; height:auto; width:100%; }
.menewe.slippy{position:fixed; top:20px; right:40px; width:35px; height:50px; z-index:99999999; -webkit-transition: all 1.2s; -moz-transition: all 1.2s; -ms-transition: all 1.2s; -o-transition: all 1.2s; transition: all 1.2s; }	
	
h3 { font-family:'Montserrat', "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color:#ff4848; font-weight:100; font-size: 24px; line-height: 1.35; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; }
h3:hover { font-family:'Montserrat', "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color:#ff4848; font-weight:100; font-size: 24px; line-height: 1.35; letter-spacing:0.4rem; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
h4 { font-size: 8.0rem; line-height:8.35rem; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
	
#wrap { position: absolute; width: 100%; top:100%; left:0px;  height:auto; z-index:9 !important; background:#06171e; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s}
#wrap.bumpdown { position: absolute; width: 100%; top:185%; left:0px;  height:auto; z-index:9 !important; background:#06171e; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s}
#contact {position:fixed; background:rgba(255,255,255,0.9); width:100%; min-height:300%;  z-index:14;  top:-300%; left:0px;  -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s }
#contact.iamhuman {position:fixed; background:rgba(255,255,255,0.9); width:100%; min-height:200%;  z-index:14;  top:0px; left:0px;  -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s }
#myemail {position:absolute; top:10%; height:auto; width:80%; left:10%; padding-bottom:0px;}	
a {color: #ff4848; text-decoration:none; font-size:1.5rem; font-weight:100; letter-spacing:0.0rem;-moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
a:hover {color: #ff4848; font-weight:100; letter-spacing:0.1rem;-moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
}