@media screen and (max-width:800px){
    #wrapper{
        width:100%;
    }
    body header{
        display: none;
    }
    body header.float-header{
        display: block;
    }
    body header.float-header .logo{
        display: block;
        background: #00a3da;
    }
    body header.float-header .logo{
        height:auto;
        position:static;
        padding:10px 5px 0;
    }
    .topNav{
        position:absolute;
        top:10px;
        right:10px;
        display:none;
    }
    body header.float-header .topNav{
        display: block;
        right: 0;
    }
    .banner{
        float:left;
        clear:none;
        margin-bottom:0;
        display: none;
    }
    .banner figure{
        border-radius:0;
        border:none;
        width:280px;
        background-position:-20px 0;
        background-size:290px;
        height:305px;
    }
    body header.float-header .banner{
        display: block;
    }
    body header.float-header .banner figure{
        position: static;
    }
    body header.float-header .banner .caption{
        display:block;
        position: static;
        float: left;
        padding: 10px;
    }    
    #body{
        clear:both;
        margin-top: 30px;
    }
    .leftContainer, label.paneCollapser{
        display:none;
    }
    .rightContainer{
        max-width:inherit;
        border:none;
        padding:0 10px;
    }
    .rightContainer section{
        padding-top:10px;
    }
    section.skills ul li label:before,
    section.skills ul li label:after{
        display:none;
    }
    section.skills ul li label{
        width:40px;
        height:40px;
    }
    section.skills ul li label.ag{
        background-size:25px;
    }
    section.skills ul li label.uf{
        background-size:23px;
    }
    section.skills ul li label.wi{
        background-size:30px;
    }
    section.skills ul li label.pr{
        background-size:35px;
    }
    section.skills ul li label.pe{
        background-size:32px;
    }
    section.skills ul li label.vd{
        background-size:32px;
    }
    section.skills ul li label.uid{
        background-size:25px;
    }
    section.skills ul li label.id{
        background-size:33px;
    }
    section.skills ul li label.ui{
        background-size:28px;
    }
    section.skills ul li label.ux{
        background-size:35px;
    }
    section.skills ul li:after{
        border-top-width:6px;
        border-right-width:6px;
    }
    .rightContainer section.about{
        margin-top: 50px;
    }
    .rightContainer section:nth-child(2) > h2:first-child{
        padding: 0px 0 10px;
    }
    .rightContainer section h2 + h3{
        top: 10px;
    }
    .rightContainer section h2 + h3 + div{
        clear: both;
    }
    .rightContainer section h2,
    .rightContainer section h2 ~ h3{
    }
    input.paneCollapser:not(:checked) + label.paneCollapser.float ~ .rightContainer{
        margin: 0;
    }
    body.steep-down .leftContainer + div{
        display: none !important;
    }
    .rightContainer section.works .workList > ul > li{
        margin-bottom: 50px;
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > .previewPane,
    .rightContainer section.works .workList > ul > li > label.col2Thumb ~ .detailPane .container > .previewPane{
        left: 10px;
        width:calc(100% - 20px);
        background: none;
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container{
        bottom: 10px;
        z-index: 9999;
        left: 0px;
        position: fixed;
        height: auto;
        width: 100%;
        text-align: center;
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > .previewPane img{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .rightContainer section.works .workList > ul > li > .detailPane{
        background: rgba(10,10,10,0.95);
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > label,
    .rightContainer section.works .workList > ul > li > .col2Thumb ~ .detailPane .container > label,
    .rightContainer section.works .workList > ul > li > .detailPane .container > input + label{
        position: static;
        display: inline-block;
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > input:checked + label:after{
        display: none;
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > label.t2,
    .rightContainer section.works .workList > ul > li > .col2Thumb ~ .detailPane .container > label.t2{
        top: inherit;
        bottom: 10px;
        left: calc(10px + 60px + 10px);
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > label.t3,
    .rightContainer section.works .workList > ul > li > .col2Thumb ~ .detailPane .container > label.t3{
        top: inherit;
        bottom: 10px;
        left: calc(10px + 60px*2 + 10px*2);
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > label.t4,
    .rightContainer section.works .workList > ul > li > .col2Thumb ~ .detailPane .container > label.t4{
        top: inherit;
        bottom: 10px;
        left: calc(10px + 60px*3 + 10px*3);
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > label.t5,
    .rightContainer section.works .workList > ul > li > .col2Thumb ~ .detailPane .container > label.t5{
        top: inherit;
        bottom: 10px;
        left: calc(10px + 60px*4 + 10px*4);
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > label.t5,
    .rightContainer section.works .workList > ul > li > .col2Thumb ~ .detailPane .container > label.t5{
        top: inherit;
        bottom: 10px;
        left: calc(10px + 60px*4 + 10px*4);
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > label.t5,
    .rightContainer section.works .workList > ul > li > .col2Thumb ~ .detailPane .container > label.t5{
        top: inherit;
        bottom: 10px;
        left: calc(10px + 60px*4 + 10px*4);
    }
    .rightContainer section.works .workList > ul > li > label.col2Thumb ~ .detailPane .container > input + label{
        left: 10px;
        top: inherit;
        bottom: 10px;
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > .previewPane{
        height: calc(100% - 50px*2 - 10px);
    }
    .rightContainer section.skills{
        display: none;
    }
    body.steep-down footer{
        padding: 10px 10px 10px 0;
    }
}
@media screen and (max-width:640px){
    .rightContainer section.works .workList > ul > li{
        width: calc(100%/2 - 11px);
    }
    .rightContainer section.works .sl > ul > li:nth-child(3), .rightContainer section.works .sl > ul > li:nth-child(6), .rightContainer section.works .sl > ul > li:nth-child(9), .rightContainer section.works .sl > ul > li:nth-child(12),
    .rightContainer section.works .workList.patentDesign > ul > li:nth-child(3n+3), .rightContainer section.works .workList.awards > ul > li:nth-child(3n+3){
        margin-right: 15px;
    }
    .rightContainer section.works .sl > ul > li:nth-child(2), .rightContainer section.works .sl > ul > li:nth-child(4), .rightContainer section.works .sl > ul > li:nth-child(6), .rightContainer section.works .sl > ul > li:nth-child(8),
    .rightContainer section.works .sl > ul > li:nth-child(10), .rightContainer section.works .sl > ul > li:nth-child(12), .rightContainer section.works .sl > ul > li:nth-child(14), .rightContainer section.works .sl > ul > li:nth-child(16),
    .rightContainer section.works .workList.patentDesign > ul > li:nth-child(2n+2), .rightContainer section.works .workList.awards > ul > li:nth-child(2n+2){
        margin-right: 0;
    }
    .rightContainer section.works .workList > ul > li{
        margin-bottom: 30px;
    }
    .topNav ul li a{
        text-indent: 0;
    }
    body header.float-header .topNav ul li{
        width: auto;
        float: none;
        height: auto;
        margin-bottom: 1px;
    }
    body header.float-header .topNav ul li a{
        width: 100px;
        height: auto;
        background-position-x: 10px;
        padding: 10px 35px;
        text-align: left;
        background-size: 13px auto;
        font-size: 14px;
    }
    body header.float-header .topNav{
        position: fixed;
        background: #424242;
        height: calc(100% - 60px);
        top: 60px;
        left: calc(100%);
        right: inherit;
        -webkit-transition: 500ms;
        -moz-transition: 500ms;
        -o-transition: 500ms;
        transition: 500ms;
    }
    body header.float-header input:checked + label.menu-switch + .topNav{
        left: calc(100% - 170px);
    }    
    body header.float-header .menu-switch{
        font-size: 0;
        width: 60px;
        height: 60px;        
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        cursor: pointer;

    }
    body header.float-header .menu-switch:after{
        content: '';
        width: 60px;
        height: 60px;
        background: url(../images/menu-icon.png) no-repeat center;
        background-size: 16px auto;
        display: block;
        opacity: 0.5;
        -webkit-transition: 500ms;
        -moz-transition: 500ms;
        -o-transition: 500ms;
        transition: 500ms;
    }
    body header.float-header .menu-switch:hover:after,
    body header.float-header input:checked + .menu-switch:after{
        opacity: 1;
        background-color: #424242;
    }
    body header.float-header input:checked + .menu-switch:before{
        position: fixed;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    body header.float-header .topNav ul li a.facebook{
        background-size: auto 12px;
    }.rightContainer section.works .workList > ul > li > input + label{
        position: relative;
    }
    .rightContainer section.works .workList > ul > li > input + label img{
        width: auto;
        position: absolute;
        left: calc(100%/2 - 244px/2);
    }
    .rightContainer section.works .workList > ul > li > input + label.avesta img{
        left: calc(100%/2 - 216px/2);
    }
    .rightContainer section.works .workList > ul > li > input + label.avesta img{
        left: calc(100%/2 - 194px/2);
    }
}
@media screen and (max-width:480px){
    body header.float-header .banner .caption .bold{
        font-size: 18px;
    }
    body header.float-header .banner .caption ul{
        padding-left: 0;
    }
    body header.float-header .banner .caption ul li{
        font-size: 8px;
    }
    .rightContainer section.works .workList > ul > li > .detailPane .container > .previewPane{
        height: calc(100% - 50px*2 - 60px);
    }
    .rightContainer section.works .workList > ul > li > input + label{
        overflow: hidden;
    }
    .rightContainer section.works .workList > ul > li{
        margin-bottom: 8px;
        margin-right: 10px;
        width: calc(100%/2 - 6px);
    }
    .rightContainer section.works .sl > ul > li:nth-child(3), .rightContainer section.works .sl > ul > li:nth-child(6), .rightContainer section.works .sl > ul > li:nth-child(9), .rightContainer section.works .sl > ul > li:nth-child(12), .rightContainer section.works .workList.patentDesign > ul > li:nth-child(3n+3), .rightContainer section.works .workList.awards > ul > li:nth-child(3n+3){
        margin-right: 10px;
    }
    .rightContainer section.works .sl > ul > li:nth-child(6),
    .rightContainer section.works .workList.patentDesign > ul > li:nth-child(2n+2),
    .rightContainer section.works .workList.awards > ul > li:nth-child(2n+2){
        margin-right: 0;
    }
    .rightContainer section.works .workList > ul > li > input + label img + span.name{
        display: none;
    }
    footer{
        display: none;
    }
    .rightContainer section.works .workList.awards > ul > li > input + label img{
        width:100%;
        left: 0;
    }
    .rightContainer section.works .workList.patentDesign > ul > li{
        width:calc(100% - 2px);
        margin-right: 0;
    }
    .rightContainer section.works .workList.patentDesign > ul > li:nth-child(1) label{
        background: #333;
    }
    .rightContainer section.works .workList.patentDesign > ul > li:nth-child(3) label{
        background: #1E263D;
    }
    .rightContainer section h2 + p strong, .rightContainer section.about p:first-child strong{
        font-size: 30px;
        line-height: 30px;
    }
    .rightContainer section.about p:first-child{
        padding: 0;
    }
    .rightContainer section.about > p + ul li{
        font-size: 7px;
    }
    .rightContainer section.about > p + ul li:after{
        margin: 0 0px 0 5px;
    }
    .rightContainer section.work-process .processes{
        height: 380px;
    }
    .rightContainer section.work-process .processes .process{
        font-size: 8px;
        line-height: 9px;
        border-width: 2px;
        width: 70px;
        height: 70px;
        top: calc(100%/2 - 70px/2 - 380px/2 + 70px/2);
        left: calc(100%/2 - 70px/2);
    }
    .rightContainer section.work-process .processes .process span:before, .rightContainer section.work-process .processes .process.e span:before{
        height:35px;
        width:52px;
        top:18px;
    }
    .rightContainer section.work-process .processes .process.b span:before, .rightContainer section.work-process .processes .process.f span:before, .rightContainer section.work-process .processes .process.g span:before{
        height:25px;
        top:23px;
    }
    .rightContainer section.work-process .processes .process.c span:before, .rightContainer section.work-process .processes .process.d span:before{
        height:25px;
        top:24px;
    }
    .rightContainer section.work-process .processes .process.h span:before{
        height:25px;
        top:23px;
        width:50px;
    }
    .rightContainer section.work-process .processes .process.b {
        top: calc(90px - 38px);
        left: calc(100%/2 - 200px/2 + 85px*2);
    }
    .rightContainer section.work-process .processes .process.d {
        top: calc(300px - 48px);
        left: calc(100%/2 - 190px/2 + 85px*2);
    }
    .rightContainer section.work-process .processes .process.e {
        top: calc(345px - 48px);
    }
    .rightContainer section.work-process .processes .process.f {
        top: calc(310px - 58px);
        left: calc(100%/2 - 0px - 73px*2);
    }
    .rightContainer section.work-process .processes .process.g {
        top: calc(200px - 48px);
        left: calc(100%/2 - 61px*3);
    }
    .rightContainer section.work-process .processes .process.h {
        top: calc(100px - 48px);
        left: calc(100%/2 - 70px*2);
    background: #37A947;
    border-color: #299939;
    color: #fff;
    }
    .rightContainer section.work-process .processes .process.c {
        top: calc(200px - 48px);
        left: calc(100%/2 - 260px/2 + 80px*3);
    }
    .rightContainer section.work-process .processes:after, .rightContainer section.work-process .processes:before{
           width: 300px;
        height: 300px;
        left: calc(100%/2 - 300px/2);
        top: calc(100%/2 - 300px/2);
    }
    .rightContainer section.work-process .processes:before{
        top:100px;
    }
    .rightContainer section.work-process:before{
        left: calc(100%/2 - 70px/2 - 60px);
        top: 20px;
        width: 70px;
        height: 70px;
    }
    .rightContainer section.work-process .processes .mypic{
        width:70px;
        height: 70px;
        border-width: 2px;
        left: calc(100%/2 - 70px/2);
        top: calc(100%/2 - 70px/2);
    }
    .rightContainer section.work-process .processes .mypic + .hover-pane{
        width: 160px;
        left: calc(100%/2 - 160px/2);
        bottom: 90px;
        font-size: 9px;
        line-height: 10px;
    }
    .rightContainer section.work-process .processes .process:after{
        left: 91px;
    top: 47px;
    }
    .rightContainer section.work-process .processes .process.b:after {
    top: 75px;
    left: 63px;
    }
    .rightContainer section.work-process .processes .process.c:after {
    top: 85px;
    left: 24px;
    }
    .rightContainer section.work-process .processes .process.d:after {
        top: 69px;
        left: -20px;
    }
    .rightContainer section.work-process .processes .process.e:after {
        top: 24px;
        left: -33px;
    }
    .rightContainer section.work-process .processes .process.f:after {
        top: -17px;
        left: -2px;
    }
    .rightContainer section.work-process .processes .process.g:after {
        top: -30px;
        left: 40px;
    }
    .rightContainer section.work-process .processes .process.h:after {
        top: 41px;
        left: 136px;
    }
}