html,
button,
input,
select,

@import url(http://fonts.googleapis.com/css?family=PT+Serif:700);

/* load fonts */
@font-face {
    font-family: 'oneregular'; /* Tall Dark Font for Logo */
    src: url('One-Regular-webfont.eot');
    src: url('One-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('One-Regular-webfont.woff2') format('woff2'),
         url('One-Regular-webfont.woff') format('woff'),
         url('One-Regular-webfont.ttf') format('truetype'),
         url('One-Regular-webfont.svg#fjallaoneregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Tall Dark And Handsome';
    src: url('talldark-webfont.eot');
    src: url('talldark-webfont.eot?#iefix') format('embedded-opentype'),
         url('talldark-webfont.woff2') format('woff2'),
         url('talldark-webfont.woff') format('woff'),
         url('talldark-webfont.ttf') format('truetype'),
         url('talldark-webfont.svg#tall_dark_and_handsomeCn') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {  /* Black Italic  */
    font-family: 'blackitalic';
    src: url('BlackItalic-webfont.eot');
    src: url('BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('BlackItalic-webfont.woff2') format('woff2'),
         url('BlackItalic-webfont.woff') format('woff'),
         url('BlackItalic-webfont.ttf') format('truetype'),
         url('BlackItalic-webfont.svg#blackitalicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'glight'; /* Sans Serif */
    src: url('glight-webfont.eot');
    src: url('glight-webfont.eot?#iefix') format('embedded-opentype'),
         url('glight-webfont.woff2') format('woff2'),
         url('glight-webfont.woff') format('woff'),
         url('glight-webfont.ttf') format('truetype'),
         url('glight-webfont.svg#gotham_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

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



@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); /* Montserrat */



textarea {
    color: #222;
    font-family: book, glight, sans-serif !important;
    font-weight: 600 !important;

}




html, body {
    -webkit-text-size-adjust: 100%; 
}

body {
    font-size: 1em;
    line-height: 1.4;
    font-family: glight, sans-serif !important;
    font-weight: 400;
    background-color: #6E6E6E;
    width: 100%;
    overflow-x: hidden;
}

::-moz-selection {
    background: #bcbc04;
    color: fff;
    text-shadow: none;
}

::selection {
    background: #FFFFFF;
    color: fff;
    text-shadow: none;
}

.scrolling{
    opacity: 0 !important;
    display: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   my styles
   
   was red ef1717
   ========================================================================== */

a {
    color: #555;
    text-decoration: none;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.fix h1{
  color: #fff;

}

h1, h2 {
    color: #3D3C3C;;
    opacity:1.0;
    font-size: 4.6em;
    font-weight: 300;
    line-height: 0.57em;
    letter-spacing: 0.005em;
    font-weight: 800;
    font-family: 'PT Serif', serif;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
    /* display: table-cell; */
    text-align: center; 
    z-index: 2;
    position: relative;
    vertical-align: middle;
}

.about-text h2 { 
  #3D3C3C;
}

.fix-work h2 {
  color: #3D3C3C;
  font-size: 3.6em;
  font-family: Montserrat;
  text-transform: uppercase;
  /* font-family: helvetica; */
  letter-spacing: 6px;
  font-size: 2em;
  padding-top: 3.0em;
  height: 2em;
  font-family: Montserrat;
  text-transform: uppercase;
  /* font-family: helvetica; */
  letter-spacing: 6px;
  font-size: 2.2em;
}

.border-wrapper:
  border-top: 1px solid rgb(213, 213, 213);
  height: 1px;
  position: absolute;
  z-index: 2000;
  width: 100%;
  margin: 0% -29% 0% 5%;
  /* left: -5%; */
  /* left: 10%; */
  align-content: center;
  /* top: -100px; */
}

.subtitle {
    color: #fff;
    opacity:0.8;
    font-size: 0.35em;
    font-weight: 300;
    line-height: 100%;
    text-align: center;
    margin: 1% 0;
    width: 100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    display: block;
}

.subtitle-a {
  letter-spacing: 0.04em;
    color: #fff;
    opacity:1.0s;
    font-size: 0.401em;
    line-height: 80%;
    text-align: center;
    margin: 1% 0;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 6.4px;
    padding-top: 6px;
    padding-left: 3px;
    -webkit-transition: all 1.1s ease-in-out;
    -moz-transition: all 1.1s ease-in-out;
    -o-transition: all 1.1s ease-in-out;
    -ms-transition: all 1.1s ease-in-out;
    transition: all 1.1s ease-in-out;
}

.subtitle-b {
    color: #fff;
    opacity:0.8;
    font-size: 1em;
    line-height: 100%;
    text-align: center;
    margin: 1% 0;
    width: 100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    display: block;
}

.clemens {font-size: 1.8em;
letter-spacing: normal;}


/* Logo */

.main1title {
  font-family: oneregular;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.amp {
  font-family: 'blackitalic';
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.main2title { 
  font-family: oneregular;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.intro h1 {

    display:none;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    font-size: 3.1em;
    -webkit-animation: myfirst 5s;
    top: 20px;
    -webkit-animation: myfirst 5s;
    top: 20px;
    -webkit-transition: all 1.1s ease-in-out;
    -moz-transition: all 1.1s ease-in-out;
    -o-transition: all 1.1s ease-in-out;
    -ms-transition: all 1.1s ease-in-out;
    transition: all 1.1s ease-in-out;
}

.fade-class {
  color: rgba(255, 255, 255, 0) !important;
}

.header-container {
    position: absolute;
    width: 100%;
    z-index: 5;
    display: none;
}

nav ul {
    text-align: center;
    padding: 0;
    position: fixed;
    width: 100%;
}

nav ul li {
    display: inline;
    padding: 20px;
}

nav  a {
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
}

nav  a:hover {
    color: #fff;
}

.intro {
  width: 100%;
  position: relative;
  z-index: 2;
  height: 2000px;
  background-image: url("http://masonandclarke.com/19566.jpg");
  background-size: cover;
  /* background-position: center bottom; */
  z-index: 2;
  opacity: 100%;
  overflow-y: hidden;
  max-width: 100%;
}


.fix {
    display: table; 
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 3;
    overflow-x: hidden;
}

.fix-work {
/* display: table-cell; */
/* width: 100%; */
vertical-align: top;
/* position: absolute; */
text-align: center;
/* display: none; */
bottom: 10%;
/* min-height: 12em; */
}

.details .button1 { 
  font-family: "montserrat";
  font-family: montserrat;
  font-size: 94%;
  font-weight: 500;
}

.button1::hover {
  background-color: grey;
  color:black;
} 

a.button1 {}

.arrow {
    position: fixed;
    bottom: 4%;
    left: 50%;
    z-index: 3;
    color: #fff;
    padding: 20px 45px;
    margin-left: -45px;
    opacity: 1;
    transition: all .3s ease-in-out;
    -webkit-animation: pulse 1s ease-in-out infinite alternate;
    -moz-animation: pulse 1s ease-in-out infinite alternate;
    animation: pulse 1s ease-in-out infinite alternate;
    outline: none;
    border: none;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

@-webkit-keyframes pulse {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

@keyframes pulse {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

.arrow:hover {
    bottom: 3%;
}

.arrow::before,
.arrow::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 6px;
    background: #fff;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    border: none;
}

.arrow::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.arrow::before {
    margin: 0 0 0 -17px;
}

.work {
  background-color: #EEEEEE;
  z-index: 4;
  position: relative;
  padding-bottom: 1.6em;
}

.thumbs {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.thumbs:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -moz-box-shadow: 0 0 5px rgba( 0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px rgba( 0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba( 0, 0, 0, 0.3);
}

.about {
  min-height: 300px;
  padding: 0;
  color: rgb(255, 244, 244);
  background-color: rgb(255, 255, 255);
  z-index: 2;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 400px;
  z-index: 4;
  /* color: aquamarine; */
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.background-phase { 
  background-color: rgb(238, 238, 238);
}

div#about {}

.about-text h2{
  font-family: montserrat;
  font-size: 2.4em;
  text-transform: uppercase;
  letter-spacing: 7px;
}

.about-text {
    display: table-cell !important; 
    top: 0;
    left: 0;
    height: 100%;
    vertical-align: middle;
    width: 75%;
    padding: 8em;
    overflow-y: auto;
    margin: 0 auto;
}

.about-text p {
  color: #BDBBBB;
  text-align: center;
  vertical-align: middle;
  font-size: 1.5em;
  line-height: 1.3em;
  font-weight: 200;
  line-height: 1.6em;
  min-height: 14em;
  padding-top: 51px;
}

.about-text a {
    color: #9ECBE5;
    vertical-align: bottom; 
    font-weight: 500;
    font-size: 100%;
    text-decoration: none;
}

.about-text a:hover {
    text-decoration: underline;
}

.about img {
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    padding: 20px 15px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.about img:hover {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -ms-transform: scale(1.5);
}

a.talk {
/* border-bottom: 1px solid #fff; */
white-space: nowrap; 
text-decoration:none;
}

a.talk:hover{
/* color: #bcbc04; */
border-bottom: 3px solid #9ECBE5;
text-decoration:none;
border-bottom-left-radius: 1px;
}

.contact {
    padding: 0;
    background-color: #FFF;
    z-index: 2;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    min-height: 480px;
    z-index: 4;
    overflow: hidden;
}

#contact-form input:focus .inputtitle {
  opacity: 0.5;
  
}

#big-video-wrap{overflow:hidden;position:absolute;height:100%;width:100%;bottom:0;left:0; z-index:-1; opacity:0.15;}
.contact-text {
    display: table; 
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index:9999;
}

.sent-message {
  display: block;
  line-height: 0.87em;
  font-size: 4em;
  padding-bottom: .3em;
  color: white;
  font-family: Montserrat, sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
}


.another-wrap {
  background-color: #BABABA; /* opacity: 0.8; */ 
  position:absolute; top:0px; 
  width: 100%; 
  z-index:-1;
  -webkit-transform: scale(1.07); 
  -moz-transform: scale(1.07);
  -o-transform: scale(1.07);
  -ms-transform: scale(1.07);
  transform: scale(1.07);
  -webkit-transition: all 1.2s ease-in-out;
  -moz-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  -ms-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
  -webkit-filter: brightness(1.0) saturate(1);
  -moz-filter: brightness(1.0) saturate(1);
  -o-filter: brightness(1.0) saturate(1);
  -ms-filter: brightness(1.0) saturate(1);
  filter: brightness(1.0) saturate(1);
  background-position: 50% 100%;
  background-size: cover;
  background-image: url("room.jpg");

} 

.brightness-phase { 
   -webkit-filter: brightness(0.8) saturate(1);
  -moz-filter: brightness(0.8) saturate(1);
  -o-filter: brightness(0.8) saturate(1);
  -ms-filter: brightness(0.8) saturate(1);
  filter: brightness(0.8) saturate(1);
}

#video_background { position: absolute; top: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; opacity:0.4}

/* ==========================================================================
   sidebar
   ========================================================================== */


.main-container {
    margin: 0;
    padding: 0;
    overflow: hidden;
}



.menu {
  position: fixed;
  top: 4px;
  left: 0px;
  height: 50px;
  width: 70px;
  margin: 0px;
  background: transparent;
  cursor: pointer;
  z-index: 6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
  opacity: 1.0;
}

.menu-toggle-hr {
  position: relative;
  display: block;
  top: 11px;
  border-top-style: solid;
  width: 34px;
  margin: 5px auto 0px 20px;
  color: #fff;
  border-top: 5px solid #fff;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

}

.color-change { 
  border-top: 5px solid #3D3C3C;
}

.color-change2 { 
  border-top: 5px solid #3D3C3C;
}

.color-change3 { 
  border-top: 5px solid #FFFFFF;
}


.menu:hover {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}


.menu.sidebar-open {
  left: 0px;
  padding: 20px;
  position: fixed;
  width: 80px;
  height: 50px;
  /* margin: 20px; */
  top: 5px;
  right: 5px;
  cursor: pointer;
  z-index: 6;
}

/*.menu.sidebar-open::before,
.menu.sidebar-open::after {
    content: '';
    position: absolute;
    width: 40%;
    height: 3px;
    background: #fff;
    background: rgba(255, 255, 255, 0.8);

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    border: none;
} */

.menu.sidebar-open::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.menu.sidebar-open:hover::before,
.menu.sidebar-open:hover::after {
    background: #ffffff;
}

.sidebar {
  width: 160px;
  position: fixed;
  z-index: 5;
  left: 0;
  box-shadow: 5px -1px 14px rgba(136, 136, 136, 0.21);
  bottom: 0;
  height: 100%;
  background-color: #FFFFFF;
  margin-left: -161px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  border-right: 0px solid #fff;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.87);
  overflow-y: auto;
  transition: width 0.3s ease;
}

.sidebar .side-social a{
border-bottom:none;
}

.sidebar-open {
    display: block;
    margin-left: 0;
    width: 20%;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 50px 0 0 0;
  font-family: Tall Dark And Handsome;
  /* display:none; */
  text-transform: uppercase;
  letter-spacing: 10px;
  font-size: 12px;
}

.firsttitle { 
    padding-top: 100%;
}

.sidebar a {
font-size: 2.6em;
  padding: 15px 20px;
  color: #515151;
  text-decoration: none;
  display: block;
  text-align: center;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
}

.sidebar a:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  background-color: rgba(100, 100, 100, .5);
  color: #B4B4B4;
}


.sidebar a.nav-off, a.nav-off {
}

.sidebar a.nav-on, nav a.nav-on {
  color: #B4B4B4;
  }

  li.active a {
  color: #B4B4B4;
  }




.sidebar img {
    height: 25px;
}

/* ==== OFF canvas styling ==== */

#fullpage.sidebar-out {
    -ms-transform: translate(288px, 0px);
    -webkit-transform: translate(288px, 0px);
    transform: translate(288px, 0px);
}
#fullpage {
    -webkit-transition: all .5s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 2.0 ease;
    z-index: 1;
    position: relative;
}
.sidebar {
    width: 160px;
    position: fixed;
    z-index: 5;
    left: 0;
    /* box-shadow: 5px -1px 14px rgba(136, 136, 136, 0.21); */
    bottom: 0;
    height: 100%;
    background-color: #FFFFFF;
    margin-left: -161px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-right: 0px solid #fff;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 288px;
    height: 100%;
    background: rgba(0, 0, 0, 0.87);
    overflow-y: auto;
    z-index: 0;
    margin-left: -20px;
}
.sidebar-open {
    display: block;
    margin-left: 0;
    /* width: 20%; */
}

/* ==== Animated menu button ======= */
   .menu.sidebar-open {
       left: 0px;
       padding: 00px;
       /* position: fixed; */
       /* width: 35px; */
       /* height: 35px; */
       /* top: 5px; */
       /* right: 5px; */
       /* cursor: pointer; */
       /* z-index: 6; */
       padding: 0px;
       position: fixed;
       top: 4px;
   }

.menu-toggle-hr {
    position: relative;
    display: block;
    top: 11px;
    border-top-style: solid;
    width: 34px;
    margin: 5px auto 0px 20px;
    color: #fff;
    -webkit-transition: 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -ms-transition: 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition: 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.sidebar-open span.menu-toggle-hr {
    /* display: none; */
    border-color: white;
    border-width: 4px;
}
.menu.sidebar-open .menu-toggle-hr.top {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 22px;
}
.menu.sidebar-open .menu-toggle-hr.bottom {
  opacity: 0;
}
.menu.sidebar-open .menu-toggle-hr.center {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: 7px;
}

.sidebar { 
  display: none;
}

/* ==========================================================================
   image grid
   ========================================================================== */

.grid {
    list-style: none;
    padding: 5% 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 100%;
    max-width: 1700px;
}

.grid li {
    display: inline-block;
    margin: 10px;
    margin-top: 20px;
    vertical-align: top;
    height: auto;
    width: 30%;
}

.grid li > a,
.grid li > a img {
    border: none;
    outline: none;
    display: block;
    position: relative;
    width: 99%;
}

.grid li.expanded > a::after {
    top: auto;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #FFFFFF;
    border-width: 15px;
    left: 50%;
    opacity: 1;
    margin: -20px 0 0 -15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}

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

.expander {
    position: absolute;
    background: #FFFFFF;
    top: auto;
    left: 0;
    width: 100%;
    text-align: left;
    margin-top: 10px;
    height: 0;
    overflow:visible;
    padding-bottom: 250px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
/*
.expander-inner:after {
content: ".";
 display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#work #grid li:nth-child(1) .expander {background: pink;}
#work #grid li:nth-child(2).expander {background: yellow;}
#work #grid li:nth-child(3) .expander {background: green;}
*/

.expander-inner {
    padding: 40px 20px;
    font-size: 90%;
    height: 100%;
    /* border-bottom: 3px solid rgb(219, 219, 219); */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 4;
}

.close::before,
.close::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    height: 3px;
    background: #E5E5E6;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.close:hover::before,
.close:hover::after {
    background: #999CA5;
}

.fullimg,
.details {
    width: 55%;
    float: left;
    height: 100%;
    overflow: visible;
    position: relative;
    opacity: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.expander { 
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.details {
    width: 45%;
    padding: 3px 40px;
    overflow-y: scroll;
}

.opacity-phase { 
  opacity: 1 !important;
}

.fullimg {
    text-align: center;
}

.fullimg img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
}

.details h3 {
    color: #4A4A50;
    font-weight: 800;
    font-size: 160%;
    line-height: 124%;
    text-transform: uppercase;
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: normal;
    max-width: 80%;
    letter-spacing: 3.5px;
    font-family: 'oneregular', sans-serif;
}
.details h3::first-line {
max-width: 85%;
}

.details p {
    font-weight: 400;
    font-size: 120%;
    line-height: 23px;
    font-family: montserrat;
    color: #9ABCCF;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.details p p {
font-size: 89%;
color: #999999;
letter-spacing: 0.2px;
font-family: glight,sans-serif;
line-height: 1.6em;
text-transform: initial;
font-weight: 200;
}

#contact-form input.submit a::after {
  content: '\2192';
  display: inline-block;
  margin-left: 10px;
}

.details a {
font-weight: 400;
font-size: 16px;
color: #999C9C;
background-color: transparent;
text-transform: uppercase;
font-family: inherit;
letter-spacing: 2px;
padding: 17px 20px;
display: inline-block;
align-content: right;
margin: 30px 0 0;
outline: none;
border: 3px solid #999C9C;
border-radius: 3px;
}

.details p p a
{
font-weight: inherit;
font-size: inherit;
color: #9ABCCF;
background-color: transparent;
text-transform: none;
letter-spacing: inherit;
padding: 0px;
display: inline;
margin: 0;
outline: none;
border: none;
border-bottom: 2px solid #FFFFFF;
border-radius: 0px;
}

.details p p a::after {
content: '';
display: none;
}

.details a::after {
    content: '\2192';
    display: inline-block;
    margin-left: 10px;
}

.details a:hover {
   color: #FFFFFF;

   border-color: #999999;

   background-color: rgb(153, 153, 153);
   text-decoration:none;
}

.details p p a:hover {
  color: #9ABCCF;

  border-bottom: 2px solid #9ABCCF;
text-decoration:none;
  /* font-weight: bolder; */
}

.loading {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ddd;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    -webkit-animation: loader 0.5s infinite ease-in-out both;
    -moz-animation: loader 0.5s infinite ease-in-out both;
    animation: loader 0.5s infinite ease-in-out both;
}

@-webkit-keyframes loader {
    0% { background: #ddd; }
    33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
    66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
    0% { background: #ddd; }
    33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
    66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
    0% { background: #ddd; }
    33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
    66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

/* ==========================================================================
   form
   ========================================================================== */

#contact-form {
    padding: 0 20%;
    text-align: left;
    display: table-cell; 
    vertical-align: middle;
    -webkit-transition: all 1.2s ease-in-out;
    -moz-transition: all 1.2s ease-in-out;
    -o-transition: all 1.2s ease-in-out;
    -ms-transition: all 1.2s ease-in-out;
    transition: all 1.2s ease-in-out;
    opacity: 0;
}

#contact-form .error{
padding: 10px 10px !important;
background: rgba(255, 254, 231, 0.76);
/* opacity: 0.63; */
display: block;
width: 100%;
padding: 10px 0px 10px 0px;
letter-spacing: 2px;
/* border-radius: 4px; */
color: rgba(26, 26, 26, 0.7);
}



mark {
    font-style: normal;
    color: #b3dbf1;
}

mark h2 {
    color: #b3dbf1;
    font-weight: normal;
}

mark.validate {
    display: inline-block;
    background: transparent none;
}

#contact-form input, #contact-form textarea, #contact-form select {
    width: 100%;
    padding: 10px 0px 10px 0px;
    color: #fff;
    background: transparent;
    border: none;
    margin: 2% 0;
    font-size: 150%;
    vertical-align: top;
    border-bottom: 3px solid #fff;
    position:relative;
    border-radius: 0px;
    font-family: book, sans-serif;
    font-weight: 600;
}

#contact-form input#verify {
    width: 255px;
}

#contact-form textarea {
    width: 100%;
    font-family: book, sans-serif
    !important;
    font-weight: 600 !important;
}

#contact-form input:focus,#contact-form textarea:focus,#contact-form select:focus {
    /* background-color: rgba(255, 255, 255, 0); */
    /* opacity: 0.5; */
    color: #FFFFFF;
    outline: none;
}

#contact-form input.error,#contact-form textarea.error,#contact-form select.error {
    background: transparent;
    color: #E94F4F;
}

#contact-form input.submit {
width: auto;
border: none;
text-decoration: none;
float: right;
font-weight: 400;   font-size: 16px;   
color: #FFFFFF;   background-color: transparent;   text-transform: uppercase;   font-family: inherit;   
letter-spacing: 8px;   
padding: 14px 22.2px 14px 29.2px;right: -20px;
display: inline-block;   
align-content: right;   
margin: 30px 0 0;   outline: none;   
border: 3px solid #FFFFFF;  
opacity: 1;
font-family: Montserrat, sans-serif;
font-size: 94%;   font-weight: 500;
border-radius: 3px;
right: .1em;
font-size: .89em;
letter-spacing: .58em;
}


#contact-form input.submit:hover {

    color: #7c7c7c;
    

    border: 3px solid #FFFFFF;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    

    background: #FFFFFF;
}

#contact-form legend {
    padding: 7px 10px;
    font-weight: bold;
    color: #000;
    border: 1px solid #eee;
    margin-bottom: 0 !important;
    margin-bottom: 20px;
}

#contact-form span.required {
    font-size: 13px;
    color: #ff0000;
}

/* Select the colour of the * if the field is required. */
#message {
    margin: 1em 0;
    padding: 0;
    display: block;
    background: transparent none;
}

.error_message {
    display: block;
    height: 22px;
    line-height: 22px;
    padding: 3px 10px 3px 35px;
    color: #0C9AA8;
    display: none;
}

.loader {
    padding: 0 10px;
}

#contact-form #success_page h1 {
    font-size: 400%;
    color: #fff;
    display: block;
    padding-top: 10%;
}

::-webkit-input-placeholder {
   color: #fff;
   color: rgba(255, 255, 255, 0.8);
}

:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
   color: rgba(255, 255, 255, 0.8);
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
   color: rgba(255, 255, 255, 0.8);
}

:-ms-input-placeholder {  
   color: #fff;  
   color: rgba(255, 255, 255, 0.8);
}



/* ==========================================================================
   Media Queries
   
     #TheSequence {display:none;}
   ========================================================================== */
   
 
   
@media only screen and (max-width: 550px) {
  .about-text h2 { 
    line-height: 30px;
    margin-bottom: -27px;
  }
}



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

#contact-form input.submit {
  padding-right: 9px;
  padding-left: 17px;
}

.fix {
    position: static;
    }

.sidebar-open {
  display: block;
  margin-left: 0;
}

.menu.sidebar-open {
}

.intro h1 span.subtitle-a{
  padding-top: 0px;
}

.color-change3 { 
  border-top: 5px solid #3D3C3C;
}

.another-wrap{
  -webkit-transform: scale(1.17);
  -moz-transform: scale(1.17);
  -o-transform: scale(1.17);
  -ms-transform: scale(1.17);
  transform: scale(1.17);
}

.sidebar a {
  font-size: 4.0em;
  padding: 15px 20px;
  color: #515151;
  text-decoration: none;
  display: block;
  text-align: center;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
}

  .expander {
      padding-bottom: 20px;
  }
 .expander-inner{
    font-size: 119%;
    line-height: 122%;
    padding: 4em .1em 2em .1em;
    overflow-y: auto;
  }


.details .button1 {
  -webkit-transform: scale(0.85);
  position: absolute;
  left: 25px;
  margin-bottom: 60px;
  margin-top: 2px;
  border-bottom: 4px solid;
  border-left: 4px solid;
}


ul#grid li:nth-child(3) div.expander {

    padding-bottom: 40px;
}

.fade-class {
  color: rgba(255, 255, 255, 0.3) !important;
}


#TheSequence  img {height:100%; width: auto;}

    html {font-size: 50%;}
    .grid li {
        width: 90%;
    }
  
    h1 { 
        line-height: 1.27em;
    }

    h1 span {
        font-size: 88%;
        line-height: 100%;
    }
    
    .intro h1 span.subtitle-a {
    font-size: 0.249em;
    padding-left: 2px;
    letter-spacing: .3em;
    }

    .fix span { 
      font-size: ;
    }

    .about-text { 
        padding: 4em 3em 3em 3em;
    }

    .about-text p {
        font-size: 120%;
        line-height: 120%;
        font-size: 1.33em;
        text-align: center;
        line-height: 1.45em;
        MIN-HEIGHT: 14em;
        padding-top: 3em;
        font-family: glight, gothamlight, sans-serif;
    }

    .about-text h2 { 
      font-size: 2.2em;
    }

    #contact-form {
        padding: 0 10%;
    }
    .close {
        top: 60px;
        right: 30px;
    }
   
    .arrow {
        position: absolute;
    }
      #contact-form input.submit {
          font-size: 1em;
    }
}

@media only screen and (min-width: 480px) {
    .fix {
    position: static;
    }
    
    .grid li {
        width: 25%;
    }
    #contact-form {
        padding: 0 15%;
    }
    .arrow {
        position: absolute;
    }
}

@media screen and (max-width: 700px) {
html {font-size: 70%;}
    .fullimg { display: none; }
    .details { float: none; width: 100%; }
    #contact-form {
        padding: 0 15%;
    }
    
    .arrow {
        position: absolute;
    }
    .about img {
        padding: 20px 2%;
    }
}

@media only screen and (min-width: 768px) {
/* html {font-size: 50% !important;} */
    .grid li {
        width: 25%;
    }
    #contact-form {
        padding: 0 18%;
    }
}

@media screen and (min-width: 850px) { 
  #contact-form {
        padding: 0 25%;
    }
    }

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

.sidebar-open { 
    width: 288px;
}

.details p p {
font-size: 85%;

}

    .grid li {
       
    }
  
    /*
    .fix {
        position: fixed;
    }
    */
    .arrow {
        position: fixed;
    }
}

@media only screen and (min-width: 1920px) {

/* ===============
    Maximal Width
   =============== */

    .header-container {
        display: block;
    }
    .menu, .sidebar {
        display: none;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


#TheSequence {

}

.nav-clients {
    font-family: montserrat;
    font-size: 0.8em !important;
    border: 1px solid;
    margin: 2em;
    letter-spacing: 6px;
    border-radius: 5px;
}


/*  BigVideo Styles 
    You may need to adjust these styles to get this working right in your design. 


#big-video-image{position:absolute;}
#big-video-control-container{position:fixed;bottom:0;padding:10px;width:100%;background:rgba(0,0,0,.25);
  -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;}
#big-video-control{width:100%;height:16px;position:relative;}
#big-video-control-middle{margin: 0 56px 0 24px;}
#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;}
#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}

*/


/* ==== Portfolio Changes ====== */

.grid { 
  padding: 0;
} 

.expander { 
  padding-bottom: 0;
}




/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: none;
    border-bottom: 1px;
    border-bottom-style: solid;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}   }
}id;
    }
}   }
}   }
}