@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

@media
only screen and (min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1) {
    .sprite.logo {
        background: url(logo-2x.png);
        background-size: 200px 80px;
    }
}

@media screen and (min-width:640px) {
    
    /*TOPMENU*/
    
    #topMenu {
        padding-top: 35px;
        background: rgb(255,255,255);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 60%, rgba(237,237,237,1) 61%, rgba(255,255,255,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(60%,rgba(243,243,243,1)), color-stop(61%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 60%,rgba(237,237,237,1) 61%,rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 60%,rgba(237,237,237,1) 61%,rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 60%,rgba(237,237,237,1) 61%,rgba(255,255,255,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 60%,rgba(237,237,237,1) 61%,rgba(255,255,255,1) 100%);
    }
    
    #topMenuCircle li {
        padding: 0px;
    }
    
    #topMenuCircle a {
        margin: 0 15px;
        padding-left: 0px;
        border: 0px;
        background-color: transparent;
        box-shadow: none;
        -webkit-transition: all 500ms;
        -moz-transition: all 500ms;
        transition: all 500ms;
    }
    
    #topMenuCircle a:after {
        display: block;
        width: 180px;
        height: 20px;
        border-radius: 10px;
        box-shadow: 0px 160px 25px -8px rgba(0,0,0,0.2);
        content: '';
    }
    #topMenuCircle a:hover:after{
        box-shadow: 0px 160px 25px -8px rgba(0,0,0,0.1);
    }
    
    #topMenuCircle a:after{
        display: none;
    }
    
    #topMenuCircle{
        margin: auto;
        width: 600px;
        height: 250px;
    }
    #topMenuCircle a.aCircle > span.circle{
        display: block;
        width: 150px;
        height: 150px;
        border-radius: 75px;
        background-size: 150px 150px;
        box-shadow: 0 0 0 5px #fff, 0 0 0 10px #eee, 0 0 0 15px #fff, 4px 4px 10px 10px rgba(0,0,0,0.2), inset 0 5px 10px rgba(0,0,0,0.1), inset 0 -5px 10px rgba(255,255,255,0.3);
        -webkit-transition: all 500ms;
        -moz-transition: all 500ms;
        transition: all 500ms;
    }
    #topMenuCircle a.aCircle:hover > span.circle {
        box-shadow: 0 0 0 5px #fff, 0 0 0 10px #eee, 0 0 0 15px #fff, 0px 4px 10px 10px rgba(0,0,0,0.3), inset 0 5px 10px rgba(0,0,0,0.05), inset 0 -5px 10px rgba(255,255,255,0.1);
    }
    #topMenuCircle a.aCircle > span.text{
        position: absolute;
        top: 170px;
        left: 0;
        display: block;
        float: none;
        width: 170px;
        color: #333;
        font-size: 14px;
        -webkit-transition: all 500ms;
        -moz-transition: all 500ms;
        transition: all 500ms;
        pointer-events: none;
    }
    #topMenuCircle a.aCircle:hover > span.text{
        top: 100px;
        color: rgba(0,0,0,0);
        opacity: 0;
        -webkit-transform: scale(5);
        -moz-transform: scale(5);
        transform: scale(5);
    }
    
    #topMenuCircle li {
        width: 33%;
        text-align: center;
    }
    
    #topMenuCircle a.aRwd,
    #topMenuCircle a.aSites{
        position: relative;
        top: 50px;
    }
    
    #topMenuCircle a.aCircle > span.circle:after{
        position: relative;
        top: -50px;
        left: -25px;
        display: block;
        width: 150px;
        height: 150px;
        border-radius: 75px;
        background-color: rgba(255,255,255,0.2);
        box-shadow: 0 0 20px rgba(255,255,255,0.2), inset -5px -5px 0 rgba(255,255,255,0.1);
        content: '';
        -webkit-transition: all 500ms;
        -moz-transition: all 500ms;
        transition: all 500ms;
    }
    #topMenuCircle a.aCircle:hover > span.circle:after{
        position: relative;
        top: -50px;
        left: -50px;
    }
    
    /*TOPMENU - END*/
    
    
    /*CONTENT*/
    
    #content {
        font-size: 15px;
    }

    #content h2 {
        font-size: 35px;
    }

    #content h3 {
        font-size: 25px;
    }
    
    /*CONTENT - END*/
    
    
    /*PORTFOLIO*/
    
    .portfolioImages {
        width: 100%;
    }
    
    .portfolioImages {
        height: 119px;
        text-align: center;
    }
    
    .portfolioImages img {
        display: inline-block;
        width: 190px;
        height: 109px;
    }
    
    /*PORTFOLIO - END*/
    
    
    /*FOOTER*/
    
    #footer {
        padding: 10px 15px;
    }
    
    #footer > p.fR{
        float: right;
    }
    
    /*FOOTER - END*/
    
}

@media screen and (min-width:800px) {
    
    /*HEADER*/
    
    #header {
        position: relative;
        border-bottom: 1px solid #fff;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }
    #header > h1{
        float: left;
        margin: 0px;
        padding-left: 15px;
    }
    
    #header address{
        display: block;
        float: right;
        width: 480px;
        padding: 5px;
        padding-right: 15px;
    }
    
    #header address .addressAip {
        display: block;
    }
    
    /*HEADER - END*/
    
    
    /*CONTACT LINKS*/
    
    .contactLinksTop {
        display: block;
        position: absolute;
        bottom: 10px;
        right: 15px;
        width: 480px;
    }
    .contactLinksBottom {
        display: none;
    }
    
    .contactLinks li:first-child,
    .contactLinks li {
        width: 33%;
    }
    .contactLinks li:last-child{
        padding-right: 0px;
    }
    
    .contactLinks a {
        font-size: 12px;
    }
    
    /*CONTACT LINKS - END*/
    
    
    /*CONTENT*/
    
    .articleSubParts > section {
        padding: 15px;
    }
    
    #content h2 {
        margin: 15px;
    }
    
    .articleSubParts > section .sectionContent{
        padding-right: 20%;
    }
    .articleSubParts > section .aMore {
        bottom: 10px;
        left: 10px;
    }
    
    .articleSubParts > section.iHrwd{
        background-image: url(../img/icons/ihrwd.png);
    }
    .articleSubParts > section.iHphonegap{
        background-image: url(../img/icons/ihphonegap.png);
    }
    .articleSubParts > section.iHmobilesite{
        background-image: url(../img/icons/ihmobilesite.png);
    }
    .articleSubParts > section.iHportfolio{
        background-image: url(../img/icons/ihportfolio.png);
    }
    .articleSubParts > section.iWhatRwd{
        background-image: url(../img/icons/iwhat.png);
    }
    .articleSubParts > section.iWhyRwd{
        background-image: url(../img/icons/iwhy.png);
    }
    .articleSubParts > section.iHowRwd{
        background-image: url(../img/icons/iproject.png);
    }
    .articleSubParts > section.iWhenRwd{
        background-image: url(../img/icons/iwhen.png);
    }
    
    .articleSubParts > section.iWhatPhonegap{
        background-image: url(../img/icons/ihphonegap.png);
    }
    .articleSubParts > section.iWhyPhonegap{
        background-image: url(../img/icons/iwhy.png);
    }
    .articleSubParts > section.iHowPhonegap{
        background-image: url(../img/icons/ihowphonegap.png);
    }
    .articleSubParts > section.iWhenPhonegap{
        background-image: url(../img/icons/iwhen.png);
    }
    
    .articleSubParts > section.iWhatMobile{
        background-image: url(../img/icons/iwhatmobile.png);
    }
    .articleSubParts > section.iWhyMobile{
        background-image: url(../img/icons/iwhymobile.png);
    }
    .articleSubParts > section.iHowMobile{
        background-image: url(../img/icons/ihowmobile.png);
    }
    .articleSubParts > section.iWhenMobile{
        background-image: url(../img/icons/iwhen.png);
    }
    /*CONTENT - END*/
    
    
    /*PORTFOLIO*/
    .portfolioImages {
        height: 141px;
    }
    
    .portfolioImages img {
        width: 230px;
        height: 131px;
    }
    /*PORTFOLIO - END*/
    
}

@media screen and (min-width:1025px) {
    body {
        background-color: #fa9a1c;
        background-image: url(../img/bg3.jpg);
        background-attachment: fixed;
        box-shadow: inset 20px 0 0 -10px rgba(0,0,0,0.1), inset -20px 0 0 -10px rgba(0,0,0,0.1);
    }
    
    /*WRAPPER*/
    
    #wrapper {
        margin: 0 auto;
        max-width: 1024px;
        box-shadow: 0 0 0 10px rgba(0,0,0,0.05), 0 0 0 20px rgba(0,0,0,0.05), 0 0 125px #fff;
    }
    
    /*WRAPPER - END*/
    
    
    /*PORTFOLIO*/
    .portfolioImages {
        height: 181px;
    }
    
    .portfolioImages img {
        width: 300px;
        height: 171px;
    }
    /*PORTFOLIO - END*/
    
}