html, body { height: 100%; }

/*** PRELOADER ***/
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#f0f0f0;
    z-index:999; }

#home {	
    transition: 0s linear;
    transition-property: background-position;	
}

#status {
    width: 400px;
    height: 100px;
    position:absolute;
    left:50%;
    top:50%;
    color: #353535;
    margin:-50px 0 0 -200px;
    text-align: center;
    font-size: 30px;
    font-weight: 500; }

.body_webDesign {
    font-family: 'Cabin', sans-serif;
	font-size: 16px;
	line-height: normal;
	color: #fff;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }

/*** FONT STYLES ***/
h1 { 
	font-size: 50px; 
    font-style: italic;
	color: #fff;
    text-shadow: 0 0 35px rgba(0,0,0,0.8); }

h2 {
    margin: 0 0 0.4em;
    font-size: 40px; 
    font-style: italic;
	color: #fff;
    text-shadow: 0 0 35px rgba(0,0,0,0.6); }

h3 {
    margin: 0 0 0.5em;
    font-size: 30px; 
    font-style: italic;
	color: #fff;
    text-shadow: 0 0 35px rgba(0,0,0,0.6); }

a:link, a:visited { 
	color: #fff;
	text-decoration: none; }
	
a:hover { color: #fd8324; }

a.big_btn {
    display: inline-block;
    padding: 15px 60px;
    margin: 20px 0 0;
    background: #fd8324;
    border-bottom: 4px solid #ad4c00;
    font-size: 16px;
    font-weight: 700;
    color: #fed2bc;
    transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all; }

    a.big_btn:hover { color: #fff; }

/************* STRUCTURE STYLES ***/
#page {
    width: 100%;
    height: 100%;
    float: left;
    position: relative; }


/*** BACKGROUNDS ***/
section#home { 
    height: 100%;
    background: url(../images/webDesign/bg_home2.jpg) center no-repeat #000;
    background-size: cover;
    -ms-behavior: url(bgsize.min.htc); }

section#clients {
    min-height: 100%;
    background: center no-repeat;
    background-size: cover;
    -ms-behavior: url(bgsize.min.htc); }

section#contact {
    min-height: 100%;
    background: url(../images/webDesign/bg_contact.jpg) center no-repeat #423C3A;
    background-size: cover;
    -ms-behavior: url(bgsize.min.htc); }


/*** SCROLL SECTIONS ***/
#cd-vertical-nav {
    width: 5px;
  	position: fixed;
  	margin-left: 60px;
  	top: 50%;
    margin-top: -159px;
    z-index: 900;
    -webkit-transition: 0.5s ease all;
    transition: 0.5s ease all; }

    #cd-vertical-nav.open { margin-left: 300px; }
 
    #cd-vertical-nav a {
        float: right;
        margin: 3px 0;
        position: relative;
        opacity: 0.5;
        filter: alpha(opacity=50);
        transition: 0.2s;
        -webkit-transition: 0.2s; }

    #cd-vertical-nav .cd-dot {
        width: 5px;
        height: 100px;
        float: left;
        background: #fff; }

        #cd-vertical-nav a.is-selected .cd-dot { background: #FD8324; }

    #cd-vertical-nav a:hover { 
        opacity: 0.9;
        filter: alpha(opacity=90); }


/*** SECTIONS ***/
.wrapper, .innerWrap { height: 100%; }

section {
    width: 100%;
    float: left;
    position: relative;
    padding: 0;
    color: #fff; }

.table {
    width: 100%;
    height: 100%;
    display: table; }

    .table .cell {
        width: 100%;
        height: 100%;
        display: table-cell;
        text-align: center;
        vertical-align: middle; }

section#home h1 span { color: #fff584; }


/*** SCROLL BUTTONS ***/
.scrollBtns {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 60px;
    z-index: 90;
    text-align: center;
    font-size: 15px; }

    .scrollBtns a { 
        display: inline-block;
        margin: 0 12px;
        color: #fff;
        opacity: 0.7;
        filter: alpha(opacity=70);
        transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all; }

        .scrollBtns a span {
            width: 55px;
            height: 55px;
            display: block;
            margin: 0 auto 15px;
            border-radius: 55px; }

            .scrollBtns a:hover { 
                opacity: 0.9;
                filter: alpha(opacity=90); }

        .scrollBtns a.clients span { 
	        background: url(../images/webDesign/icon_clients.png) center no-repeat #fff;
	        background: url(../images/webDesign/svg/icon_clients.svg) center no-repeat, linear-gradient(transparent, transparent), #fff;
	        background-size: 20px; }
        
        .scrollBtns a.contact span { 
	        background: url(../images/webDesign/icon_contact.png) center no-repeat #fff;
	        background: url(../images/webDesign/svg/icon_contact.svg) center no-repeat, linear-gradient(transparent, transparent), #fff;
	        background-size: 25px; }


/*** PORTFOLIO ***/
section#portfolio { background: #423C3A; }

section#portfolio .head {
    width: 100%;
    float: left;
    position: relative;
    background: #222; }

section#portfolio .head span { 
    height: 50px;
    display: block;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: #999; }

    section#portfolio .head a {
        width: 50px;
        height: 50px;
        display: block;
        position: absolute;
        top: 0;
        cursor: pointer; }

        section#portfolio .head a#prev {
            left: 0;
            background: url(../images/webDesign/icon_prev.png) center no-repeat #222;
            background: url(../images/webDesign/svg/icon_prev.svg) center no-repeat, linear-gradient(transparent, transparent), #222;
            background-size: 13px; }

        section#portfolio .head a#next {
            right: 0;
            background: url(../images/webDesign/icon_next.png) center no-repeat #222;
            background: url(../images/webDesign/svg/icon_next.svg) center no-repeat, linear-gradient(transparent, transparent), #222;
            background-size: 13px; }

        section#portfolio .head a:hover { background-color: #555 !important; }

section#portfolio .cycle-slideshow {
    width: 100%;
    float: left;
    font-size: 24px;
    text-align: right;
    text-shadow: 0 0 10px rgba(0,0,0,0.6); }

    .cycle-slideshow .group { 
        width: 100%;
        float: left; }

    section#portfolio .cycle-slideshow .item {
        width: 33.33337%;
        float: left; }

        section#portfolio .cycle-slideshow .item a {
            display: block;
            position: relative;
            padding-top: 100%;
            background-size: cover !important;
            -ms-behavior: url(bgsize.min.htc);
            color: #fff;
            font-weight: 600; }

			section#portfolio .cycle-slideshow .item a.portfolio_1 { background: url(../images/webDesign/portfolio_1.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_2 { background: url(../images/webDesign/portfolio_2.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_3 { background: url(../images/webDesign/portfolio_3.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_4 { background: url(../images/webDesign/portfolio_4.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_5 { background: url(../images/webDesign/portfolio_5.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_6 { background: url(../images/webDesign/portfolio_6.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_7 { background: url(../images/webDesign/portfolio_7.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_8 { background: url(../images/webDesign/portfolio_8.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_9 { background: url(../images/webDesign/portfolio_9.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_10 { background: url(../images/webDesign/portfolio_10.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_11 { background: url(../images/webDesign/portfolio_11.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_12 { background: url(../images/webDesign/portfolio_12.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_13 { background: url(../images/webDesign/portfolio_13.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_14 { background: url(../images/webDesign/portfolio_14.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_15 { background: url(../images/webDesign/portfolio_15.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_16 { background: url(../images/webDesign/portfolio_16.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_17 { background: url(../images/webDesign/portfolio_17.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_18 { background: url(../images/webDesign/portfolio_18.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_19 { background: url(../images/webDesign/portfolio_19.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_20 { background: url(../images/webDesign/portfolio_20.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_21 { background: url(../images/webDesign/portfolio_21.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_22 { background: url(../images/webDesign/portfolio_22.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_23 { background: url(../images/webDesign/portfolio_23.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_24 { background: url(../images/webDesign/portfolio_24.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_25 { background: url(../images/webDesign/portfolio_25.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_26 { background: url(../images/webDesign/portfolio_26.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_27 { background: url(../images/webDesign/portfolio_27.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_28 { background: url(../images/webDesign/portfolio_28.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_29 { background: url(../images/webDesign/portfolio_29.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_30 { background: url(../images/webDesign/portfolio_30.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_31 { background: url(../images/webDesign/portfolio_31.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_32 { background: url(../images/webDesign/portfolio_32.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_33 { background: url(../images/webDesign/portfolio_33.jpg?rand=2) center no-repeat; }
			section#portfolio .cycle-slideshow .item a.portfolio_34 { background: url(../images/webDesign/portfolio_34.jpg?rand=2) center no-repeat; }
      section#portfolio .cycle-slideshow .item a.portfolio_35 { background: url(../images/webDesign/portfolio_35.jpg?rand=2) center no-repeat; }
      section#portfolio .cycle-slideshow .item a.portfolio_36 { background: url(../images/webDesign/portfolio_36.jpg?rand=2) center no-repeat; }
      section#portfolio .cycle-slideshow .item a.portfolio_37 { background: url(../images/webDesign/portfolio_37.jpg?rand=2) center no-repeat; }
      section#portfolio .cycle-slideshow .item a.portfolio_38 { background: url(../images/webDesign/portfolio_38.jpg?rand=2) center no-repeat; }
      
            section#portfolio .cycle-slideshow .item a div {
                position: absolute;
                bottom: 25px;
                right: 25px; }

                section#portfolio .cycle-slideshow .item a div hr {
                    width: 100px;
                    height: 4px;
                    display: block;
                    margin-right: 0;
                    background: #fff;
                    border: 0;
                    -webkit-transition: 0.2s ease all;
                    transition: 0.2s ease all; }

                section#portfolio .cycle-slideshow .item a:hover div hr { background: #FD8324; }


/*** CLIENTS ***/
section#clients { display: none; }

section#clients #fader { 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -ms-behavior: url(bgsize.min.htc); }

    section#clients.work1, #fader.work1 { background-image: url(../images/webDesign/bg_clients_1.jpg); }
    section#clients.work2, #fader.work2 { background-image: url(../images/webDesign/bg_clients_2.jpg); }
    section#clients.work5, #fader.work5 { background-image: url(../images/webDesign/bg_clients_5.jpg); }
    section#clients.work6, #fader.work6 { background-image: url(../images/webDesign/bg_clients_6.jpg); }
    section#clients.work7, #fader.work7 { background-image: url(../images/webDesign/bg_clients_7.jpg); }
    section#clients.work8, #fader.work8 { background-image: url(../images/webDesign/bg_clients_8.jpg); }
    section#clients.work9, #fader.work9 { background-image: url(../images/webDesign/bg_clients_9.jpg); }
    section#clients.work10, #fader.work10 { background-image: url(../images/webDesign/bg_clients_10.jpg); }
    section#clients.work12, #fader.work12 { background-image: url(../images/webDesign/bg_clients_12.jpg); }

section#clients article {
    width: 600px;
    max-width: 40%;
    position: absolute;
    bottom: 12%;
    left: 160px;
    z-index: 10;
    display: none;
    font-size: 20px;
    text-shadow: 0 0 35px rgba(0,0,0,0.6); }

    section#clients article.active { display: block; }

section#clients h2 {
    margin: 0 0 0.2em;
    font-size: 58px;
    font-style: italic; }

section#clients a.link {
    padding-left: 25px;
    background: url(../images/webDesign/icon_link.png) left no-repeat;
    background: url(../images/webDesign/svg/icon_link.svg) left no-repeat, linear-gradient(transparent, transparent);
    background-size: 15px; }


/*** CONTACT ***/
section#contact article {
    width: 100%;
    float: left;
    padding: 120px 160px 80px; }

section#contact article .block { padding: 30px 0; }

section#contact article .left {
    width: 40%;
    float: left; }

    section#contact article .left .talk p span, section#contact article .left .talk p a { 
        display: block;
        margin: 0 0 5px; }

    section#contact article .left .talk img { 
        margin: 0 10px 0 0;
        vertical-align: middle; }

section#contact article .right {
    width: 45%;
    float: left;
    margin: 30px 0 0 15%;
    text-align: center; }

    section#contact article .right ul li {
        width: 49%;
        display: inline-block;
        padding: 0 10px;
        margin: 25px 0;
        vertical-align: top;
        font-size: 20px; }

        section#contact article .right ul li img { 
            display: block;
            margin: 0 auto 10px; }
	

/*** MEDIA QUERIES ***/
@-ms-viewport { width: device-width; }
@viewport { width: device-width; }


/*** RETINA ***/
@media all and (-webkit-min-device-pixel-ratio: 1.5) {

	/*.scrollBtns a.clients span { 
		background: url(../images/webDesign/icon_clients@2x.png) center no-repeat #fff;
		background-size: 20px 18px; }
	
	.scrollBtns a.contact span { 
		background: url(../images/webDesign/icon_contact@2x.png) center no-repeat #fff;
		background-size: 25px 18px; }
		
	section#portfolio .head a#prev {
		background: url(../images/webDesign/icon_prev@2x.png) center no-repeat #222;
		background-size: 12px 21px; }

	section#portfolio .head a#next {
		background: url(../images/webDesign/icon_next@2x.png) center no-repeat #222;
		background-size: 13px 21px; }
		
	section#clients a.link {
    	background: url(../images/webDesign/icon_link@2x.png) left no-repeat;
    	background-size: 15px; }*/
    
}


/*** 1440px ***/
@media all and (max-width: 1440px) {
    
    section#clients article { font-size: 18px; }

    section#clients h2 { font-size: 50px; }

}


/*** 1280px ***/
@media all and (max-width: 1280px) {

    h1 { 
        margin: 0 0 40px;
        font-size: 45px; }
    
    h2 { font-size: 36px; }
    
    section#clients h2 { font-size: 45px; }
    
    section#clients #featuredWork { font-size: 14px; }
    
    section#contact article .right ul li { font-size: 18px; }

}


/*** 1210px ***/
@media all and (max-width: 1210px) {
    
    nav#cd-vertical-nav { display: none; }
    
    section#clients article { left: 10%; }
    
    section#contact article { padding: 120px 10% 80px; }

    section#contact article .left, section#contact article .right { width: 100%; }
    
        section#contact article .left .talk, section#contact article .left .join { 
            width: 50%;
            float: left; }
    
    section#contact article .right { margin-left: 0; }
    
        section#contact article .right ul li { width: 24%; }

}


/*** 1024px ***/
@media all and (max-width: 1024px) {

    h1 { font-size: 40px; }
    
    a.big_btn { padding: 10px 50px; }
    
    section#clients article { 
        max-width: 80%;
        bottom: 150px;
        font-size: 16px; }
    
        section#clients article h2 { font-size: 35px; }
    
    section#clients #featuredWork { 
        width: 100%;
        height: 60px;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.8); }
    
        section#clients #featuredWork .main { display: none; }

        section#clients #featuredWork .mobile { display: table; }
    
    section#clients .scrollBtns { display: none; }
    
    .scrollBtns { bottom: 40px; }
    
        .scrollBtns a span { 
            width: 45px;
            height: 45px; }

}


/*** 800px ***/
@media all and (max-width: 800px) {
    
    section#portfolio .cycle-slideshow  { font-size: 18px; }
    
        section#portfolio .cycle-slideshow .item { width: 50%; }

    section#contact article .left .talk, section#contact article .left .join { width: 100%; }
    
    section#contact article .right ul li { font-size: 16px; }

}


/*** 600px ***/
@media all and (max-width: 600px) {
    
    h1 { font-size: 33px; }

    section#contact article .right ul li { width: 32%; }

}


/*** 500px ***/
@media all and (max-width: 500px) {
    
    h1 { 
        padding: 0 10px;
        font-size: 24px; }
    
    #page.visible { margin-left: 100%; }
    
    section#clients article { bottom: 120px; }

    section#contact article .right ul li { width: 49%; }

}


/*** 320px ***/
@media all and (max-width: 320px) { 

    section#clients { min-height: 568px; }
    
		section#clients article {
            position: static;
            margin: 110px 10% 100px; }

}