html {
    background: #202224 url(../images/bg_up.jpg) repeat 0% 0%;
    min-width: 320px;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

#navigation ul #left { float: left; }
#navigation ul #right { float: right; }
#navigation ul li a {color: #a7abae; font-size: 18px; line-height: 20px; white-space: nowrap; height: 20px; padding: 30px; display: block; -moz-transition: all 0.2s linear;  -webkit-transition: all 0.2s linear;  -o-transition: all 0.2s linear; transition: all 0.2s linear;}
#navigation ul li a:hover, #navigation ul li a:active, #navigation ul li.active a { color: #202224; }
#navigation ul li a:hover, #navigation ul li a:active { background: #14cccc; color:#000!important }
#navigation ul li.active a { background: #14cccc; }
#navigation ul li.active a:hover, #navigation ul li.active a:active { background: #33ffff; }

/*Fonts set*/
#navigation{text-align: center!important;}
#navigation h1 .logoWork{float:none!important; display:inline-block; text-align: center!important; z-index: 10;}
#navigation h1, h2 { font-weight: bold; }
#navigation h1 .logoWork {color: #fff; font-size: 30px; line-height: 40px;}
#project h2, p { color: #fff; }
#project h2 { font-size: 72px; line-height: 72px; margin: 0 0 20px;}
#project p {font-size: 24px; line-height: 36px;}

/*Links*/
#info p a:after {border-bottom: 1px solid #33FFFF; bottom: -3px; content: ""; height: 0; left: 0; opacity: 0; position: absolute; width: 0;}
#info a, a:after {transition: all 0.3s ease 0s;}
:link, *:hover, *:active, *:focus, *:visited {outline: 0 none;}
#info p a {position: relative;}
#info a {color: #14CCCC;}
#info a, a:after {transition: all 0.3s ease 0s;}

#info a, a:after { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;}
#info p a:after {content: ""; width: 0; height: 0; border-bottom: 1px solid #33ffff; position: absolute; bottom: -3px; left: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;}
#info p a:hover:after, p a:active:after {width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1;   opacity: 1;}

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

  #project  h2 {font-size: 48px; line-height: 48px;}
  #project  p {font-size: 18px; line-height: 30px;}

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

  #project  h2 {font-size: 36px; line-height: 36px;}

}


/* ==== Work ==== */

/* Base */

#work { padding: 80px 0 0; }
#work ul { *zoom: 1; }
#work ul:before, #work ul:after {
    content: "";
    line-height: 0;
    display: table;
}
#work ul:after { clear: both; }
#work ul li {width: 25%; float: left;}

#work ul li a, #work ul li a img, #work ul li a span { display: block; border:0;}
#work ul li a, #work ul li a span { overflow: hidden; border:0;}
#work ul li a { position: relative; }
#work ul li a img, #work ul li a span { width: 100%; }
#work ul li a span, #work ul li a h2, #work ul li a h2:after { position: absolute; }
#work ul li a span, #work ul li a h2:after {
    left: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#work ul li a span {
    text-indent: 100%;
    white-space: nowrap;
    background: rgba(0,0,0,0.5) url(../images/ico_work_view.png) no-repeat 50% 50%;
    height: 100%;
    top: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
.svg #work ul li a span { background-image: url(../images/ico_work_view.svg); }
#work ul li a:hover span, #work ul li a:active span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
#work ul li a h2 {font-size:24px; line-height:24px; width:70%; bottom:30px; left:30px; color:#fff}
#work ul li a h2:after {content: ""; width: 30%; height: 0; border-bottom: 6px solid #14cccc; bottom: -20px;}
#work ul li a:hover h2:after, #work ul li a:active h2:after {width: 100%; border-color: #fff;}

/* Media Queries */

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

    #work ul li { width: 33.33%; }

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

    #work { padding: 60px 0 0; }
    #work ul li { width: 50%; }
    #work ul li a h2 { bottom: 20px; left: 20px; }
	
	.button2{margin-left:0px;}

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

    #work ul li { width: 100%; }
	#work ul li a h2 {font-size:24px; line-height:24px; width:70%; bottom:35px; left:30px; color:#fff}
	.button2{margin-left:0px;}
}

/* ==== Project ==== */

/* Base */

#project {
    max-width: 2240px;
    padding: 80px 0 0;
    margin: 0 auto;
}
#project .column { width: 40%; }
#project #frame {
    padding: 5%;
    float: right;
}
#project #frame img {
    width: 100%;
    -webkit-box-shadow : 0 0 80px rgba(0,0,0,0.7);
    -moz-box-shadow : 0 0 80px rgba(0,0,0,0.7);
    -o-box-shadow : 0 0 80px rgba(0,0,0,0.7);
    -ms-box-shadow : 0 0 80px rgba(0,0,0,0.7);
    box-shadow : 0 0 80px rgba(0,0,0,0.7);
}
#project .column2 img {
    width: 100%;
    -webkit-box-shadow : 0 0 0px rgba(0,0,0,0.7)!important;
    -moz-box-shadow : 0 0 0px rgba(0,0,0,0.7)!important;
    -o-box-shadow : 0 0 0px rgba(0,0,0,0.7)!important;
    -ms-box-shadow : 0 0 0px rgba(0,0,0,0.7)!important;
    box-shadow : 0 0 0px rgba(0,0,0,0.7)!important;
}
#project #info {
    padding: 20% 5% 5%;
    float: left;
}


.button{padding:14px; background:#14cccc; color:#000!important; display:inline-block; margin-top:20px; font-size: 16px;-moz-transition: all 0.2s linear;  -webkit-transition: all 0.2s linear;  -o-transition: all 0.2s linear; transition: all 0.2s linear;}
.button:hover{background:#88f8f8;}

.button2{padding:13px; background:#202224; color:#14cccc!important; display:inline-block; margin-top:20px; margin-left:20px; font-size: 16px;-moz-transition: all 0.2s linear;  -webkit-transition: all 0.2s linear;  -o-transition: all 0.2s linear; transition: all 0.2s linear; border:1px solid #14cccc;}
.button2:hover{background:#000;}


/* Media Queries */

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

    #project {
        max-width: 960px;
        padding: 80px 0 0;
    }
    #project .column {
        width: auto;
        padding: 5% !important;
        float: none !important;
    }
    #project #info h2 { padding: 0; }

}