@import url(http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900);
@import url(http://fonts.googleapis.com/css?family=Old+Standard+TT:400,700,400italic);
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
/* ==========================================================================
   Fun Folio Styles
   ========================================================================== */

/*Common Styles*/   
   
html, 
body { 
height: 100%; 
overflow: hidden;
color: #fff;
}


.page-perspective {
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}


.rmt-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.rmt-page-current,
.no-js .rmt-page {
visibility: visible;
}

.no-js body {
overflow: auto;
}

.rmt-page-ontop {
z-index: 999;
}

.container {
padding: 80px;
}


/* Main Menu Styles */

.main-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
border-width: 0px;
border-style: solid;
border-color: #222;
background-color: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}

.main-menu.main-menu-open {
height: 100%;
border-width: 0px 0px 50px 150px;
background-color: rgba(0,0,0,0.3);
-webkit-transition: border-width 0.3s, background-color 0.3s;
transition: border-width 0.3s, background-color 0.3s;
}

.main-overlay {
position: absolute;
width: 100%;
}

.main-menu-open .main-overlay {
height: 100%;
}

.main-menu-trigger {
position: fixed;
top: 10px;
left: 20px;
z-index: 100;
display: block;
width: 50px;
height: 50px;
cursor: pointer;
}

.main-menu-trigger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 8%;
background-color: #fff;
font-size: 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}


.main-menu-open .main-menu-trigger span {
background-color: transparent;
}

.main-menu-trigger span:before,
.main-menu-trigger span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.main-menu-trigger span:before {
-webkit-transform: translateY(-250%);
transform: translateY(-250%);
}

.main-menu-trigger span:after {
-webkit-transform: translateY(250%);
transform: translateY(250%);
}

.main-menu-open .main-menu-trigger span:before {
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}

.main-menu-open .main-menu-trigger span:after {
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}


.main-menu ul {
position: fixed;
margin: 0;
padding: 0;
list-style: none;
}

.main-menu ul.left-menu {
top: 75px;
left: 0;
}

.main-menu ul.bottom-menu {
right: 0;
bottom: 0;
}

.main-menu ul li,
.main-menu ul li a {
display: block;
}

.main-menu ul.bottom-menu li {
float: left;
font-size: 10px;
}

.main-menu ul li {
visibility: hidden;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}

.main-menu.main-menu-open ul.left-menu li,
.main-menu.main-menu-open ul.bottom-menu li {
visibility: visible;
opacity: 1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
transition: transform 0.3s, opacity 0.3s;
}

/* First menu */
.main-menu ul.left-menu li {
width: 150px;
height: 50px;
line-height: 50px;
-webkit-transform: translate3d(-100%,50%,0);
transform: translate3d(-100%,50%,0);
}

.main-menu.main-menu-open ul.left-menu li {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

/* Second menu */


.main-menu ul.bottom-menu li {
width: 60px;
height: 50px;
-webkit-transform: scale(0);
transform: scale(0);
}


.main-menu.main-menu-open ul.bottom-menu li:first-child { 
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}

.main-menu.main-menu-open ul.bottom-menu li:nth-child(2) { 
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.main-menu.main-menu-open ul.bottom-menu li:nth-child(3) { 
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}

.main-menu.main-menu-open ul.bottom-menu li:nth-child(4) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}

.main-menu.main-menu-open ul.bottom-menu li {
-webkit-transform: scale(1);
transform: scale(1);
}

.main-menu ul li a {
display: block;
outline: none;
text-decoration: none;
}

.main-menu ul.left-menu li a {
padding: 0 20px;
box-shadow: inset 0 1px rgba(0,0,0,0.2);
color: #999;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1em;
-webkit-transition: color 0.2s;
transition: color 0.2s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.main-menu ul.left-menu li:last-child a {
box-shadow: inset 0 1px rgba(0,0,0,0.2), inset 0 -1px rgba(0,0,0,0.2);
}

.main-menu ul.bottom-menu li a {
text-align: center;
font-size: 20px;
color: #fff;
line-height: 50px;
}

.main-menu ul li a:before {
color: #fff;
font-size: 24px;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}

.main-menu ul:first-of-type li a:hover,
.main-menu ul:first-of-type li a:focus,
.main-menu ul li a:hover:before,
.main-menu ul li a:focus:before {
color: #fff;
margin-left: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}




/*Home Page Tiles Styles*/


/*Logo Block*/
#logo {
height: 230px;
text-align: center;
padding-top: 60px;
background: url('../img/logo-1-1.png') no-repeat center center;
}


.box {
padding: 0;
height: 230px;
text-align: center;
}


.grey {
background: rgba(255,255,255, 0.2);
height: 230px;
}


.blog, 
.portfolio, 
.services, 
.about, 
.contact {
padding: 10px;
height: 230px;
position: relative;
}


.blog, 
.portfolio, 
.about, 
.contact {
background: rgba(255,255,255, 1);
transition: background 0.8s ease 0.8s;
}


.blog:hover, 
.portfolio:hover, 
.about:hover, 
.contact:hover {
background: none;
transition: background 0.3s ease;
}

.blog:hover span, 
.portfolio:hover span, 
.about:hover span, 
.services:hover span, 
.contact:hover span {
color: #fff;
transition: color 0.3s ease;
}


.blog:hover span.num:before, 
.portfolio:hover span.num:before, 
.about:hover span.num:before, 
.services:hover span.num:before, 
.contact:hover span.num:before {
border-top: 1px solid #fff;
transition: border-top 0.3s ease;
}


/*Homepage Services Block*/

.services {
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.services img, .image-holder.two{
position: absolute;
top: 0;
left: 0;
z-index: 0;
}


.topIn, 
.topOut, 
.leftIn, 
.leftOut, 
.rightIn, 
.rightOut, 
.bottomIn, 
.bottomOut {
background: none repeat scroll 0 0 #fff;
position: absolute;
}


.topIn {
top:0;
left:0;
width: 100%;
height:1px;
}

.topOut {
height: 1px;
right: 0;
top: 0;
width: 0;
}

.leftIn {
height: 1%;
width: 1px;
left:0;
top:0;
}
.leftOut {
height: 100%;
width: 1px;
left: 0;
bottom: 0;
}

.rightIn {
height: 0;
width: 1px;
right:0;
bottom: 0;
}

.rightOut {
height: 100%;
width: 1px;
right:0;
top: 0;
}

.bottomIn {
height: 1px;
width: 100%;
bottom: 0;
left: 0;
}

.bottomOut {
height: 1px;
width: 0;
bottom: 0;
right: 0;
}


/*Previous and Next Navigation*/

.prev-next {
position: absolute;
width: 190px;
right: 5px;
top: 5px;
height: 58px;
z-index: 1;
}

.prev-next a {
position: relative;
display: inline-block;
width: 31px;
height: 31px;
margin: 10px 4px 0px 5px;
background-color: #202020;
overflow: hidden;
padding: 5px;
padding-left: 8px;
-webkit-transform:rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.prev-next a i {
color: #fff;
font-weight: 10px;
-webkit-transform:rotate(-45deg);
transform: rotate(-45deg);
}


.prev-next a:hover { background-color: #fff; }

.prev-next a:hover i{ color: #202020; }



/*Boxes Inner Styles*/

section a:hover,
section a:focus,
section a:visited,
section a:active{
text-decoration: none;
}


span.ptitle {
font-size: 24px;
color: #222;
font-family: 'Old Standard TT', serif;
text-transform: uppercase;
font-weight: 400;
line-height: 70px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
} 



span.ptitle {
-webkit-transition: all 0.5s;
transition: all 0.5s;
position: relative;
}

span.ptitle::before,
span.ptitle::after{
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
-moz-transition: opacity 0.5s, -moz-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}


span.ptitle::before {
top: 0;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}

span.ptitle::after {
bottom: 0;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}

span.ptitle:hover,
span.ptitle:focus {
color: #fff;
}

div > span.ptitle:hover::before,
div > span.ptitle:focus::before,
div > span.ptitle:hover::after,
div > span.ptitle:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}


a > div { text-align: center; }

span.num {
position: relative;
font-size: 16px;
color: #000;
font-family: 'Tenor Sans', sans-serif;
font-weight: 400;
display: block;
width: 50px;
line-height: 24px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
-ms-transition: all 200ms ease-in 100ms;
-webkit-transition: all 200ms ease-in 100ms;
-moz-transition: all 200ms ease-in 100ms;
-o-transition: all 200ms ease-in 100ms;
transition: all 200ms ease-in 100ms;
}

span.num:before {
position: absolute;
content: "";
left: 35px;
right: 0px;
top: 80%;
border-top: 1px solid #000;
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
transform: rotate(-50deg);
-ms-transition: all 200ms ease-in 100ms;
-webkit-transition: all 200ms ease-in 100ms;
-moz-transition: all 200ms ease-in 100ms;
-o-transition: all 200ms ease-in 100ms;
transition: all 200ms ease-in 100ms;
}




/********************************************************PAGES ******************************************/
/*Individual Pages Common Styles*/


span.header {
position: relative;
font-size: 44px;
color: #222;
font-family: 'Old Standard TT', serif;
text-transform: uppercase;
font-weight: 400;
line-height: 80px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}


span.header:before {
position: absolute;
right: 0px;
top: 100%;
border-top: 4px solid #222;
content: "";
left: 0px;
width: 30px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}


.headline {
position: relative;
text-align: center;
margin-top: 210px;
height: 80px;
z-index: 1;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
opacity: 0;
}


.page-tri {
position: absolute;
top: 245px;
left: 50%;
margin-left: -25px;
width: 50px;
height: 50px;
background: #fff;
-webkit-transform:rotate(45deg);
transform: rotate(45deg);

}

.intro-head-about, 
.intro-head-portfolio, 
.intro-head-services, 
.intro-head-blog, 
.intro-head-contact{
position: absolute;
top: 0;
left: 0;
height: 270px;
width: 100%;
background: #fff;
overflow: hidden;
z-index: -1 !important;
}



/*Front Page aka page 1*/

.rmt-page-1 { overflow: auto; }

.rmt-page-1 {
background: url(../img/bg-1-3.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}




/*About Me Page aka page 2*/


.rmt-page-2 {
background: rgb(255, 255, 255);
overflow: auto;
}


.rmt-page-2 .page-tri {
background: #fff;
}


.intro-head-about {
background: url(../img/bg10.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


.rmt-page-2.rmt-page-current .headline { opacity: 1; }


.about-container {
color: #222;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about-desc p {
font-family: 'Lato', sans-serif;
line-height: 1.8em;
letter-spacing: 0.12em;
font-weight: 300; 
}

.image-holder{
position: relative;
margin: 0 auto;
width: 260px;
height: 260px;
}

.head-image{
position: absolute;
top: 0;
left: 0;
}

.head-image{ z-index: 0; }


.rmt-page-2 .divider-about {
display: inline-block;
margin-left: 30%;
margin-top: 5px;
margin-bottom: 10px;
width: 200px;
}


/* Portfolio Page aka page 3*/

.rmt-page-3 {
background-color: rgb(255,255,255);
overflow: auto;
}


.intro-head-portfolio {
background: url(../img/bg1.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


.rmt-page-3 .page-tri {
background: #fff;
}

.rmt-page-3.rmt-page-current .headline { opacity: 1; }


.rmt-page-3.rmt-page-current #filter { opacity: 1; }


/*Filters*/

#filter {
width:100%;
overflow:hidden;
position:relative;
opacity: 0;
}
#filter ul {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#filter ul li {
display:inline-block;
list-style:none;
margin:0;
padding:0;

}
#filter ul li a {
display:inline-block;
position: relative;
margin-right: 44px;
margin-bottom: 10px;
color: #222;
font-weight: 300;
font-size: 14px;
text-decoration: none;
letter-spacing: 0.1em;
transition: all 0.5s ease 0s;
}

#filter ul li a::after {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #222;
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
-moz-transition: opacity 0.5s, -moz-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}


#filter ul li a::after {
bottom: -3px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}


#filter ul li a:hover::after{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}

#filter ul li a.active::after{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}

#filter ul li a.active,
#filter ul li a.active:hover {
/*might be useful*/
}


/*Portfolio Items*/

.item {
height: 200px;
overflow: hidden;
padding: 0;
margin: 0;
}


#work { opacity: 0; }

.rmt-page-3.rmt-page-current #work { opacity: 1; }

.work-container .item-text .portfolio-item-title {
font-size: 24px;
text-transform: uppercase;
}

.work-container .item-text p{
font-family: 'Lato', sans-serif;
line-height: 1.8em;
letter-spacing: 0.12em;
font-weight: 300; 
}

.work-container .item-image { overflow: hidden; }

.work-container .item-image img { width: 100%; }



/* Services Page aka page 4*/

.rmt-page-4 {
background-color: rgb(255,255,255);
overflow: auto;
}

.intro-head-services {
background: url(../img/bg7.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


.rmt-page-4 .page-tri { background: #fff; }

.service-headline,
.services-lead {
opacity: 0;
}

.rmt-page-4.rmt-page-current .headline, 
.rmt-page-4.rmt-page-current .service-headline,
.rmt-page-4.rmt-page-current .services-lead {
opacity: 1;
}

.services-text { color: #222;}

.services-lead {
font-family: 'Lato', sans-serif;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.12em;
position: relative;
}

.services-lead:before {
left:0;
top: 120%;
border-top: 1px solid #222;
transition: all 200ms ease-in 100ms;
position: absolute;
content: "";
width: 20px;
}


.services-text {
font-family: 'Lato', sans-serif;
padding-top: 5px;
}

.services-text span {
font-weight: 300;
text-transform: uppercase;
position: relative;
font-size: 16px;
display: inline-block;
margin-bottom: 20px;
}


.services-text ul {
list-style: none;
padding: 0;
}

.services-text ul li {
margin-bottom: 3px;
font-weight: 300;
}

.rmt-page-4 .divider-service {
display: inline-block;
margin-left: 24%;
margin-top: 20px;
margin-bottom: 15px;
height: 2px;
width: 300px;
}


.service-item { position: relative; }

.service-item .service-title { margin-bottom: 10px; }

.service-item .percentage {
font-size: 1.2em;
display: inline-block;
margin-left: 24%;
line-height: 120px;
color: #222;
}

.chart {
position: relative;
height: 125px;
}

.service-item canvas {
position: absolute;
top: 0;
left: 0;
}


.code-wall {
position: relative;
background-image:url('../assets/cwall.png');
background-repeat:no-repeat;
height: 300px;
overflow: hidden;
}


.code-wall { color: #4d4d4d; }

.code-wall pre {
position: absolute;
left: 0;
top: 0;
background: none;
border: none;
font-size: 11px;
color: #bfbfbf;
}


/* Blog Page aka page 5*/

.rmt-page-5 {
background-color: rgb(255,255,255);
overflow: auto;
}


.intro-head-blog {
background: url(../img/bg8.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


.rmt-page-5 .page-tri { background: #fff; }


.blog-container { opacity: 0; }


.rmt-page-5.rmt-page-current .headline, 
.rmt-page-5.rmt-page-current .blog-container {
opacity: 1;
}


.blog-img {
overflow: hidden;
height: 250px;
position: relative;
padding: 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.blog-img img {
width: 100%;
height:100%;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}


.blog-img:hover img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 0.8;
}

.blog-img:hover { border: none; }

.blog-text {
padding-top: 0;
padding-left: 20px;
padding-right: 10px;
color: #222;
height: auto;
position: relative;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.blog-entry-head {
height: 50px;
text-align: center;
}

.blog-meta {
display: block;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Old Standard TT', serif;
}

.blog-header {
font-family: 'Old Standard TT', serif;
margin-top: 10px;
font-size: 24px;
color: #222;
text-transform: uppercase;
display: inline-block;
position: relative;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.blog-header:before {
left: 50%;
margin-left: -25px;
top: 150%;
border-top: 1px solid #222;
transition: all 200ms ease-in 100ms;
position: absolute;
content: "";
width: 50px;
}


.blog-text p {
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 1.8em;
margin-top: 30px;
letter-spacing: 0.12em;
font-weight: 300; 
}

.blog-text a { color: #0d1d1a; }

.blog-footer {
text-align: center;
width: 100%;
}

.blog-footer a { color: #222; }

.blog-footer i {
margin-right: 10px;
margin-left: 10px;
font-size: 1em;
}

.blog-container .row { margin-bottom: 70px; }



/* Contact Page aka page 6*/

.rmt-page-6 {
background: rgb(255,255,255);
overflow: auto;
}


.intro-head-contact {
background: url(../img/bg9.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.rmt-page-5 .page-tri { background: #fff; }


#map {
position: relative;
bottom: 0;
left: 0;
height: 250px;
width: 100%;
overflow: hidden;
}


.rmt-page-5.rmt-page-current .headline { opacity: 1; }

.rmt-page-5 .header { color: #222; }

.rmt-page-5 .header:before {
border-top: 4px solid #222;
}

.contact-container {
font-family: 'Lato',sans-serif;
color: #222;
}


.contact-left { opacity: 0; }

.contact-left-lead {
display: block;
font-size: 24px;
text-transform: uppercase;
position: relative;
margin-bottom: 10px;
}

.contact-left-lead:before {
left:0;
top: 100%;
border-top: 2px solid #222;
transition: all 200ms ease-in 100ms;
position: absolute;
content: "";
width: 30px;
}


.email, 
.phone {
display: block;
font-size: 20px;
text-transform: uppercase;
font-weight: 300;
}

.phone { margin-bottom: 10px; }

.contact-container p {
letter-spacing: 0.12em;
font-weight: 300;
}


.contact-right {
background: #fff;
position: relative;
height: 250px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
opacity: 0;
}


.rmt-page-5.rmt-page-current .contact-right, 
.rmt-page-5.rmt-page-current .contact-left {
opacity: 1;
}


.contact-right .contact-front {
position: absolute;
background-image: url("../img/noise.png"), -ms-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
background-image: url("../img/noise.png"), -moz-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
background-image: url("../img/noise.png"), -o-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
background-image: url("../img/noise.png"), -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(0.5, #F2F2F2), color-stop(1, #CFCFCF));
background-image: url("../img/noise.png"), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
background-image: url("../img/noise.png"), radial-gradient(ellipse farthest-corner at center, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}


.contact-right.flip .contact-front {
z-index: 2;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}


.contact-right .contact-back {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgb(74,82,89);
background-image: url("../img/noise.png"), -ms-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
background-image: url("../img/noise.png"), -moz-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
background-image: url("../img/noise.png"), -o-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
background-image: url("../img/noise.png"), -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(0.5, #F2F2F2), color-stop(1, #CFCFCF));
background-image: url("../img/noise.png"), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
background-image: url("../img/noise.png"), radial-gradient(ellipse farthest-corner at center, #FFFFFF 0%, #F2F2F2 50%, #CFCFCF 100%);
opacity: 0;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-179deg); /*flip fix*/
transform: rotateX(-179deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}


.contact-right.flip .contact-back {
z-index: 3;
opacity: 1;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}


.open-contact {
display: inline-block;
font-size: 30px;
line-height: 250px;
text-transform: uppercase;
color: #a0a0a0;
position: relative;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

.open-contact:hover {
text-decoration: none;
color: #222;
}


.close-contact {
position: absolute;
display: block;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
background: url('../img/cross2.png') no-repeat;
text-indent: -9999px;
}

#form-trigger {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}

#form-close {
position: absolute;
top: 0;
right: 0;
z-index: 100;
}


/*Contact Form Styles*/

.contact-form input {
/*might be useful*/
}

.contactlabels { padding-left: 20px; }

.contactlabels input {
padding: 5px 10px;
color: #ccc;
display: block;
width: 100%;
height: 40px;
margin-bottom: 10px;
margin-top: 20px;
background: none repeat scroll 0% 0% rgb(33, 33, 33);
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;

}

.contact-form textarea {
padding: 5px 10px;
color: #ccc;
display: block;
width: 96%;
height: 100px;
margin-left: 20px;
margin-bottom: 10px;
background: none repeat scroll 0 0 rgb(33, 33, 33);
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}

.contact-form label {
margin-left: 20px;
color: #222;
text-transform: uppercase;
font-weight: 300;
}


.contact-form input.emailsubmit {
background: #222;
border: none;
color: #fff;
width: auto;
cursor: pointer;
display: inline-block;
padding: 5px 10px;
font-weight: 300;
border-radius: 1px 1px 1px 1px;
letter-spacing: 1px;
opacity: 1;
margin-left: 20px;
-webkit-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}

.contact-submit-wrap {
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}

input.emailsubmit:hover {
background: #000;
}

.form-control {
border-radius: 0;
}


/*Form Errors and Success*/

.success {
display: none;
}

.error {
display: none;
}



/*Portfolio Special Cases and Individual Page Items*/

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */


/*Grid Items*/

.grid-container {
margin-top: 50px;
}

.g-item {
display: inline-block;
width: 200px;
height: 200px;
overflow: hidden;
}


a:active, a:focus {
outline: none;
}




/*Media Queries*/


@media (max-width: 600px) {
/* Styles */

.rmt-page {
overflow: auto; 
}


span.header {
font-size: 30px;
font-weight: 200;
line-height: 1.5;
}

.image-holder {
overflow: hidden;
}

.blog-header {
font-size: 18px;
}

.blog-header:before {
left: 50%;
top: 120%;
}


/*contact form*/

.open-contact {
display: inline-block;
font-size: 20px;
line-height: 250px;
}


.contactlabels {
padding-left: 10px;
}

.contactlabels input {
padding: 5px 5px;
width: 80%;
height: 30px;
margin-bottom: 5px;
margin-top: 20px;
}

.contact-form textarea {
padding: 5px 10px;
width: 80%;
height: 80px;
margin-left: 10px;
margin-bottom: 5px;
}

.contact-form input.emailsubmit {
padding: 5px 10px;
margin-left: 10px;
}



}