@media only screen and (max-height: 600px) {
}


@media only screen and (max-height: 800px) {

}


@media all and (max-width: 1000px), all and (max-height: 800px) {
    
    #contacts_contents_data {
        color: #FF0;
        margin-left: 15px;
    }
    
    .work_item a.head {
        color: #03dc1e;
    }    
    
    .work_item>button {
        width: calc(100% - 10px);
        margin-top: 13px;    
    }
    
    .info_toolbox {
        background-color: #4c4c4c;
    }    
    
    
    p {
        margin-top: 10px;
        color: #d8d8d8c2 !important;
    }
    
    #glenn {
        /*
        background-image: url(/site/layouts/default/public/images/glenn.png);
        */
        left: unset;
        right: 0px;
        top: 24px;
        width: 236px;
        height: 20px;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;        
        z-index:20;
        margin-left: 0;

    }
    
    #tv {
        display: none !important;
    }    
    
    #intro_text {
        top: -7px;
        position: absolute;
        font-size: 10px;
        color: #84888a;
        font-weight: 100;
        right: 20px;
        font-family: 'Play', sans-serif;
        margin-top: 10px;
    }
    
    #tvsnow {
        opacity: 0;
        top: 0px !important;
        left: 50%;
        width: 100% !important;
        height: 100% !important;
        margin-left: -50% !important;
        display: block;        
        background-repeat: repeat;
        background-color: rgba(0,0,0,0.6);
        background-image: none !important;        
        overflow: hidden;        
        padding: 0 0px;
    }
    
    .introText {
        padding-left: 5px;
        
    }
    
    #main_buttons {
        margin: 60px 5px 10px 0px;
    }    
    
    #main_buttons div.main_btn {
        float: left;
        width: 120px;
        height: 93px;
        padding: 20px;
        background-color: #1F1F1F;
        margin: 5px;
        display: none;
        opacity: 0.8;
        cursor: pointer;
        font-size: 11px;
    }
    
    video {
        display: none;
    }
    
    #calculate {
        margin-top: 0;
        max-height: 546px;
        overflow-y: auto;
        overflow-x: hidden;
        width: auto;
        margin-left: 0px;
        overflow: hidden;
        position: relative;
        height: auto;
    }    
    
    #menu {
        margin: 20px 0 0 -50% !important;    
        left: 50% !important; 
        width: 100%;
    }
    
    #menu li {
        float: left !important;
        margin: 0 0 0 0px !important;
        width: auto !important;
    }
    
    #main_buttons a {
        color: #fff;    
    }
    
    #menu h1 {
        color: #EEE;
        font-size: 11px;
    }
 
    #container {
        min-height: 200px;
        
    }
    
    #callMe input[type=text] {
        width: 94%;
        height: 40px;    
    }
    
    #developement, #calculate, #websites, #apps {
        padding: 47px 10px 0;
    }
    
    .G_content {
        height: 100%;
    }    
    
    #works {
        width: auto;
        height: calc(100% - 101px) !important;
        top: 59px;
    }
    
    #works .work_item {
        background-color: #0d0d0d;
        grid-template-columns: 96px 1fr;
        column-gap: 14px;
        padding: 16px;
    }

    #works .work_item .work_logo {
        width: 96px;
        height: 96px;
    }

    .portfolio_desc {
        top: 102px;
        padding-bottom: 34px;
        padding-top: 10px;        
        width: calc(100% - 19px);
        max-height: none;
    }
    
    #portfolio_work {
        height: calc( 100% - 110px );
        margin-top: 108px;
    }
    
    #crm {
        margin-top: 75px;
    }
    
    #crm .clients {
        margin: 0;
        height: 100%;
        overflow-y: auto;
    }
    
    .top_menu {
        padding: 0 15px;    
    }
    
    #callMe .acceptRules {
        max-width: 50%;    
    }    
}


@media all and (max-width: 630px), all and (max-height: 800px) {
    
    #works {
        top: 107px;
    }
    
    .doneHours {
        
    }

    .workBtns {
        margin-top: 20px;
    }


    #works .work_item {
        width: 98%;       
        /*
        min-height: 285px;
        */
    }

    .client_name a {
        font-size: 24px;
    }

    
    #contacts_contents_data {
        margin-top: 114px !important;
        margin-left: 7px;
        color: #FF0;
    }
    
    #works .work_item .work_logo img {
        max-width: 100%;
        padding: 5px;
        border: 0;
    }
    
    .work_item>span {
        width: auto;
        font-size: 12px;
        display: inline;
        margin-top: 0px;
    }
    
    #menu {
        margin: 67px 0 0 -50% !important;
    }
    
    #menu .delimiter {
        width: 14px !important;
    }
    
    #menu li {
        width: auto !important;
    }
    
    .portfolio_work_data {
        margin-top: 0px;
        padding: 0 5px;
    }
    
    #calculate #main_buttons {
        margin: 112px 0 0 10px;
        height: 286px;
    }    
    
    #websites {
        margin-top: 115px;
    }
    
}




@media all and (max-width: 600px) {
    
    #works {
        top: 109px;
    }

    #main_buttons div.main_btn  {
        width: calc(33% - 50px);
    }
    
    
    .portfolio_desc {
        top: 103px;
        width: calc(100% - 16px);
        font-size: 12px;
        line-height: 16px;
        padding-top: 13px;
    }
    
    #portfolio_work {
        height: calc(100% - 107px);
        margin-top: 105px;
    }
    
    .logos {
        width: 100%;
        float: right;
        margin-right: 0px;
        margin-top: 20px;
    }

    .clients .cl {
        flex-direction: column;
        height: auto;
    }

    .top_menu {
        flex-direction: column;
    }

    #crm {
        margin-top: 0;
    }

    .megaPlans {
        margin-top: 20px;
        flex-direction: row;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .client_name {
        margin-left: -73px;
    }

}





@media all and (max-width: 400px) {
    
    .h3, h3 {
        font-size: 19px;    
    }
    
    #glenn {
        /*
        background-image: url(/site/layouts/default/public/images/glenn.png);
        */
        left: 50%;
        top: 12px;
        width: 40%;
        height: 20px;
        position: relative;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 20;
        margin-left: -61px;
    }    
   
    #tvsnow {
        top: 46px !important;
        height: calc(100% - 46px) !important;
    }
    
    #intro_text {
        top: 13px;
        position: absolute;
        font-size: 10px;
        color: #84888a;
        font-weight: 100;
        right: 50%;
        font-family: 'Play', sans-serif;
        margin-right: -58px;
        
    }
    
    #menu {
        padding-left: 2px;
        margin: 26px 0 0 -50% !important;
        font-size: 11px;
    }
    
    #menu li {
        color: #eee;
    }
    
    #menu li:first-child {
        width: 49px;
    }
    #menu li {
        float: left;
        margin: 0px 10px 0 0px;
        width: 50px;
        text-align: center;
        padding: 10px 5px;
    }    
    
    #menu li.delimiter {
        width: 5px;
    }
    
    #loading_text {
        display: none !important;
    }
    
    #callMe input[type=text] {
        width: 43%;
        height: 40px;
    }    
    
    #callMe button {
        margin-left: 10px;
        padding: 10px 11px;
    }    
    
    
    #main_buttons {
        margin: 10px 5px 10px 0px;
    }
    
    #works .work_item {
        background-color: #0d0d0d;
        height: auto;
    }
    
    .portfolio_work_data {
        margin-top: 0px;
        padding: 0 5px;
    }
    

    #portfolio_work {
        margin-top: 68px;    
        height: calc(100% - 68px);
    }    
    
    .portfolio_desc {
        width: calc(100% - 18px);  
        top: 65px;
    }
    
    #works {
        top: 65px;
    }    
    
    
    #calculate #main_buttons {
        margin: 71px 0 0 0px;
    }
    
    #main_buttons div.main_btn {
        width: calc(50% - 10px);    
    }
}