section p, section h1 {
    font-family: Open Sans Condensed;
}
h1#page_title {
    font-weight: bold;
    text-align: center;
    font-size: 22pt;
    line-height: 24pt;
    padding-top: 50px;
}
.break {
    clear: both;
    height: 0px;
    line-height: 0px;
}
section .title {
    display: none;
}
section .content {
    display: block;
    padding: 50px 50px 50px 50px;
    text-align: justify;
    font-size: 16pt;
    line-height: 18pt;
}
#welcome {
    padding: 0px 0px 50px 0px;
    text-align: center;
    background-color: #FFFFFF;
}
#about {
    background-color: #CEECFD;
}
#clients {
    background-color: #FFFFFF;
}
#clients .content p {
    float: left;
    margin: 35px;
    width: 235px;
    text-align: center;
}
#cv {
    background-color: #CEECFD;
}
#cv .content p {
    font-weight: bold;
    width: 100%;
}
#cv .content div {
    padding: 10px;
    width: 400px;
}
#cv .content .pdfs {
    width: 100%;
    height: 100%;
}
#cv .content .pdf-item {
    float: left;
    line-height: 50px;
    padding-left: 50px;
}
#cv .content .pdf-description {
    padding-left: 10px;
    text-align: right;
}
#cv .content .cv-item {
    float: left;
    height: 260px;
}
#cv .content .cv-item:nth-child(-n+5) {
    height: 560px;
}
#cv .content div ul li {
    margin-top: 5px;
}

#work {
    background-color: #FFFFFF;
}
    
#work .content .filters .filter {
    position: relative;
    display: inline-block;
    float: left;
}
#work .content .filters .filter_button {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
#work .content .filters .filter:hover .filter_button {
    background-color: #3E8E41;
}
#work .content .filters .filter_skills {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 130px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
#work .content .filters .filter_skills a {
    color: black;
    padding: 5px 3px;
    text-decoration: none;
    display: block;
}
#work .content .filters .filter_skills a:hover {
    background-color: #f1f1f1;
}
#work .content .filters .filter:hover .filter_skills {
    display: block;
}

#work .content .filters .filter_skills a i {
    float: left;
    margin: 0px 10px 5px 5px;
    width: 24px;
    height: 24px;
}
#work .content .filters .toggle_switch {
    float: left;
    margin: 5px 0px 0px 10px;
}
#work .content .filters .toggle_switch span {
    line-height: 20px;
}
#work .content .filters .toggle_switch i {
    color: #4CAF50;
}
#work .content .filters .toggle_switch i.right {
    display: none;
}
#work .content .jobs {
    width: 922px;
    margin: auto;
}
#work .content .jobs .job {
    border: 1px dashed grey;
}
#work .content .jobs .job div {
    float: left;
    height: 100px;
    padding: 10px 5px 10px 5px;
    height: 200px;
}
#work .content .jobs .job .image {
    width: 200px;
}
#work .content .jobs .job .image img {
    width: 200px;
}
#work .content .jobs .job .url {
    width: 60px;
    padding-top: 80px;
    text-align: center;
}
#work .content .jobs .job .description {
    text-align: justify;
    width: 360px;
}
#work .content .jobs .job .description .mobile {
    display: none;
}
#work .content .jobs .job .skills {
    width: 300px;
}
#work .content .jobs .job .skills i {
    float: left;
    margin: 5px;
    width: 48px;
    height: 48px;
}
#work .php {
    background-image: url("../work/logo/large/php.png");
}
#work .cake-php {
    background-image: url("../work/logo/large/cake-php.png");
}
#work .js {
    background-image: url("../work/logo/large/js.png");
    border-radius: 5px;
}
#work .jquery {
    background-image: url("../work/logo/large/jquery.png");
}
#work .ext-js {
    background-image: url("../work/logo/large/ext-js.png");
}
#work .soap {
    background-image: url("../work/logo/large/soap.png");
}
#work .zoomcharts {
    background-image: url("../work/logo/large/zoomcharts.png");
}
#work .node-js {
    background-image: url("../work/logo/large/node-js.png");
}
#work .selenium {
    background-image: url("../work/logo/large/selenium.png");
}
#work .mysql {
    background-image: url("../work/logo/large/mysql.png");
}
#work .mssql {
    background-image: url("../work/logo/large/mssql.png");
}
#work .postgre {
    background-image: url("../work/logo/large/postgre.png");
}
#work .mongo {
    background-image: url("../work/logo/large/mongo.png");
}
#work .linux {
    background-image: url("../work/logo/large/linux.png");
}
#work .windows {
    background-image: url("../work/logo/large/windows.png");
}
#work .smarty {
    background-image: url("../work/logo/large/smarty.png");
    border-radius: 5px;
}
#work .html {
    background-image: url("../work/logo/large/html.png");
}
#work .flash {
    background-image: url("../work/logo/large/flash.png");
}
    
#work .php.mobile.active {
    background-image: url("../work/logo/small/php.png");
}
#work .cake-php.mobile.active {
    background-image: url("../work/logo/small/cake-php.png");
}
#work .js.mobile.active {
    background-image: url("../work/logo/small/js.png");
    border-radius: 5px;
}
#work .jquery.mobile.active {
    background-image: url("../work/logo/small/jquery.png");
}
#work .ext-js.mobile.active {
    background-image: url("../work/logo/small/ext-js.png");
}
#work .soap.mobile.active {
    background-image: url("../work/logo/small/soap.png");
}
#work .zoomcharts.mobile.active {
    background-image: url("../work/logo/small/zoomcharts.png");
}
#work .node-js.mobile.active {
    background-image: url("../work/logo/small/node-js.png");
}
#work .selenium.mobile.active {
    background-image: url("../work/logo/small/selenium.png");
}
#work .mysql.mobile.active {
    background-image: url("../work/logo/small/mysql.png");
}
#work .mssql.mobile.active {
    background-image: url("../work/logo/small/mssql.png");
}
#work .postgre.mobile.active {
    background-image: url("../work/logo/small/postgre.png");
}
#work .mongo.mobile.active {
    background-image: url("../work/logo/small/mongo.png");
}
#work .linux.mobile.active {
    background-image: url("../work/logo/small/linux.png");
}
#work .windows.mobile.active {
    background-image: url("../work/logo/small/windows.png");
}
#work .smarty.mobile.active {
    background-image: url("../work/logo/small/smarty.png");
    border-radius: 5px;
}
#work .html.mobile.active {
    background-image: url("../work/logo/small/html.png");
}
#work .flash.mobile.active {
    background-image: url("../work/logo/small/flash.png");
}

#work .php.mobile.inactive {
    background-image: url("../work/logo/small/php_inactive.png");
}
#work .cake-php.mobile.inactive {
    background-image: url("../work/logo/small/cake-php_inactive.png");
}
#work .js.mobile.inactive {
    background-image: url("../work/logo/small/js_inactive.png");
    border-radius: 5px;
}
#work .jquery.mobile.inactive {
    background-image: url("../work/logo/small/jquery_inactive.png");
}
#work .ext-js.mobile.inactive {
    background-image: url("../work/logo/small/ext-js_inactive.png");
}
#work .soap.mobile.inactive {
    background-image: url("../work/logo/small/soap_inactive.png");
}
#work .zoomcharts.mobile.inactive {
    background-image: url("../work/logo/small/zoomcharts_inactive.png");
}
#work .node-js.mobile.inactive {
    background-image: url("../work/logo/small/node-js_inactive.png");
}
#work .selenium.mobile.inactive {
    background-image: url("../work/logo/small/selenium_inactive.png");
}
#work .mysql.mobile.inactive {
    background-image: url("../work/logo/small/mysql_inactive.png");
}
#work .mssql.mobile.inactive {
    background-image: url("../work/logo/small/mssql_inactive.png");
}
#work .postgre.mobile.inactive {
    background-image: url("../work/logo/small/postgre_inactive.png");
}
#work .mongo.mobile.inactive {
    background-image: url("../work/logo/small/mongo_inactive.png");
}
#work .linux.mobile.inactive {
    background-image: url("../work/logo/small/linux_inactive.png");
}
#work .windows.mobile.inactive {
    background-image: url("../work/logo/small/windows_inactive.png");
}
#work .smarty.mobile.inactive {
    background-image: url("../work/logo/small/smarty_inactive.png");
    border-radius: 5px;
}
#work .html.mobile.inactive {
    background-image: url("../work/logo/small/html_inactive.png");
}
#work .flash.mobile.inactive {
    background-image: url("../work/logo/small/flash_inactive.png");
}

#contact {
    background-color: #FFFFFF;
}
#contact .content {
    padding: 30px;
}
#contact .content p {
    width: 100%;
    text-align: center;
    font-size: 16pt;
    line-height: 18pt;
    margin: 10px 0px 10px 0px;
    font-weight: bold;
}
#contact .content div {
    text-align: center;
}
#contact .content a {
    margin-left: 10px;
    text-decoration: none;
    color: #0089CF;
}
    
@media screen and (max-width: 991px) {
    /* start of large tablet styles */
    section .content {
        padding: 0px 20px;
        background-color: #FFFFFF;
    }
    #welcome img {
        width: 100%;
    }
    #cv .content div {
        width: 100%;
        height: 100%;
    }
    #cv .content .cv-item:nth-child(-n+5){
        width: 100%;
        height: 100%;
    }
    #cv .content .pdfs {
        width: 100%;
    }
    #cv .content .pdf-item {
        float: left;
        line-height: 50px;
    }
    #cv .content .pdf-description {
        padding-left: 10px;
        text-align: right;
    }
    
    #work .content .jobs {
        width: 728px;
    }
    #work .content .jobs .job .skills {
        width: 106px;
    }
    #work .content .jobs .job .skills i {
        margin: 2px;
        width: 24px;
        height: 24px;
    }
    #work .php {
        background-image: url("../work/logo/small/php.png");
    }
    #work .cake-php {
        background-image: url("../work/logo/small/cake-php.png");
    }
    #work .js {
        background-image: url("../work/logo/small/js.png");
        border-radius: 5px;
    }
    #work .jquery {
        background-image: url("../work/logo/small/jquery.png");
    }
    #work .ext-js {
        background-image: url("../work/logo/small/ext-js.png");
    }
    #work .soap {
        background-image: url("../work/logo/small/soap.png");
    }
    #work .zoomcharts {
        background-image: url("../work/logo/small/zoomcharts.png");
    }
    #work .node-js {
        background-image: url("../work/logo/small/node-js.png");
    }
    #work .selenium {
        background-image: url("../work/logo/small/selenium.png");
    }
    #work .mysql {
        background-image: url("../work/logo/small/mysql.png");
    }
    #work .mssql {
        background-image: url("../work/logo/small/mssql.png");
    }
    #work .postgre {
        background-image: url("../work/logo/small/postgre.png");
    }
    #work .mongo {
        background-image: url("../work/logo/small/mongo.png");
    }
    #work .linux {
        background-image: url("../work/logo/small/linux.png");
    }
    #work .windows {
        background-image: url("../work/logo/small/windows.png");
    }
    #work .smarty {
        background-image: url("../work/logo/small/smarty.png");
        border-radius: 5px;
    }
    #work .html {
        background-image: url("../work/logo/small/html.png");
    }
    #work .flash {
        background-image: url("../work/logo/small/flash.png");
    }
}
@media screen and (max-width: 767px) {
     /* start of phone styles */
     section .content {
        display: none;
        padding: 0px 20px;
        background-color: #FFFFFF;
    }
    section .title {
        display: block;
        background-image: linear-gradient(#EDF8FE, #FFFFFF); /*#CEECFD;*/ /*#E2F4FE*/
        display: flex;
        justify-content: space-between;
        align-content: center;
        padding: 40px;
        cursor: pointer;
        text-transform: uppercase;
        font-weight: bold;
    }
    section .title svg {
        width: 16px;
        height: 16px;
        -moz-transition: transform 0.5s;
        -webkit-transition: transform 0.5s;
        transition: transform 0.5s;
    }
    .rotate_svg {
        transform: rotate(180deg);
    }
    #about, #clients, #cv, #work, #contact {
        background-color: #FFFFFF;
    }
    #clients .content p {
        padding: 5px;
        margin: 20px;
    }
    #work .content .jobs {
        width: 560px;
    }
    #work .content .jobs .job div {
        height: 150px;
    }
    #work .content .jobs .job .description .normal {
        display: none;
    }
    #work .content .jobs .job .description .mobile {
        display: block;
    }
    #work .content .jobs .job .description {
        width: 55px;
    }
    #work .content .jobs .job .description a {
        text-decoration: none;
    }
    #work .content .jobs .job .skills {
        width: 230px;
    }
    #work .content .jobs .job .skills i {
        margin: 10px;
    }
}
@media screen and (max-width: 479px) {
    /* start of medium tablet styles */
    h1#page_title {
        padding: 10px 0px 20px 0px;
    }
    section .title {
        padding: 20px 20px 20px 40px;
    }
    #welcome {
        padding: 0px;
    }
    #cv .content ul {
        list-style-type: none;
        padding-left: 10px;
        margin: 0px;
    }
    #cv .content div {
        float: left;
        padding: 10px;
        width: 100%;
        height: 100%;
    }
    #cv .content .cv-item:nth-child(-n+5) {
        width: 100%;
        height: 100%;
    }
    #clients .content p {
        float: none;
        padding: 5px;
        margin: 0px;
        width: 100%;
        text-align: left;
    }
    #work .content .jobs {
        width: 322px;
    }
    #work .content .jobs .job div {
        height: 100px;
    }
    #work .content .jobs .job .image {
        width: 100px;
    }
    #work .content .jobs .job .image img {
        width: 100px;
    }
    #work .content .jobs .job .url {
        width: 40px;
        padding-top: 7px;
        padding-left: 10px;
        text-align: center;
    }
    #work .content .jobs .job .description {
        width: 30px;
    }
    #work .content .jobs .job .skills {
        width: 150px;
    }
    #work .content .jobs .job .skills i {
        margin: 2px;
    }
}