/* Large devices (small dekstops) */
@media (max-width: 1201px) {
    .navbar .nav > li > a {
        padding-right:10px;
        padding-left:10px;
        font-size:14px;
    }

    .person-contacts {
        height:60px;
    }   
    .word-break{
        display:inline-block;
        font-size:10px;
    }
    #bill-info .row div:nth-child(1),#bill-info .row div:nth-child(2){
        width:198px;
        margin-left:20px;
        text-align:left;
    }
    #bill-info .row div:nth-child(3){
        width:498px;
    }
    #services .sl-download:first-child {
        margin-left: 140px;
    }
    .person-popup{
        width:820px;
    }
    .career ul{
        width:210px;
        margin-left:30px;
    }
    .person-popup textarea{
        width:400px;
    }
}

/* Medium devices (tablets) */
@media (max-width: 979px) {
    .person-popup {
        width:630px; 
    }
    .career ul{
        width:180px;
        margin-left:20px;
    }
    .person-popup textarea{
        width:300px;
    }
    #pf-quote{
        padding-left:0;
        padding-right:0;
    }
    #pf-quote .container{
        padding-left:10px;
        padding-right:10px;
    }
    .navbar-fixed-top {
        margin-bottom: 0;
    }

    #menu-collapse{
        display:block;
    }
    .navbar-inner{
        padding: 15px 0 !important;
    }
    .navbar .nav{
        display:none;
        position:absolute;
        z-index:2048;
        top: 70px;
        left:auto;
        right:0px;
        background:white;
        border-width:1px;
        border-style: none solid solid;
        border-color: #cacaca;
        padding-bottom:10px;

    }
    .navbar .nav > li{
        display:block;
        float:none;
    }
    .navbar .nav > li > a {
        padding: 20px 50px 20px 40px;
    }
    .navbar .nav > li#login{
        margin:0;
    }
    .navbar .nav > li#login a {
        border: 0 none;
        padding: 20px 50px 20px 65px;
        background-position: 40px center; 
    }
    #logo h1{
        margin-left:20px;
    }

    .graphic-bookmark .image {
        height: 102px;
    }
    .graphic-bookmark .image .effects{
        width:90px;
        height:90px;
    }
    .graphic-bookmark:hover .image .effects, .graphic-bookmark.active .image .effects{
        width:98px;
        height:98px;
        border: 4px solid #ff850e;
    }
    .graphic-bookmark .normal, .graphic-bookmark .hover{
        background-size: 95px 95px;
    }
    #sl-menu-wrapper{
        height:170px;
    }
    #homepage .hp-quote{
        font-size:50px;
        line-height:50px;
    }
    .pf-number-timer{
        font-size: 62px;
        line-height:62px;
    }
    .pf-number-caption{
        font-size:18px;
    }
    .pf-number-caption small{
        font-size: 15px;
    }
    #pf-showbutton{
        font-size:17px;
    }
    .page-title, .flexslide-title {
        font-size:28px;
        line-height:28px;
    }
    .page-subtitle{
        font-size:15px;
    }
    .ko-switch-content li{
        margin-left:20px;
    }
    .logos{
        margin-top:50px;
    }
    .ko-switch-content.visible{
        position:relative;
    }
    .ko-email{
        font-size:14px;
    }
    .ko-email strong{
        font-size:15px;
        word-wrap: break-word;
    }
    #sl-menu-prev, #sl-menu-next{
        height:130px;
    }
    #pf-quote p{
        font-size:15px;
    }
    .ko-switch-content li {
        font-size:14px;
    }
    #ko-switch-contents {
        min-height:300px;
    }
    .page-header{
        margin-top:0;
    }
    #services .sl-download:first-child{
        margin:0;
    }
    #services .sl-download{
        width: 228px;
    }
    #services #sl-menu-wrapper {
        margin-bottom:20px;
    }
    #services .content .span5{
        width:332px;
        margin:0 20px;
    }


    #bill-info .row div:nth-child(1),#bill-info .row div:nth-child(2){
        width:198px;
        margin-left:20px;
    }
    #bill-info .row div:nth-child(3){
        width:288px;
    }

    .people{
        text-align:center;
        font-size:0;
    }
    .people > div{
        width:25%;
        margin:0;
        float:none;
        display:inline-block;
        font-size:14px;
    }
    .people .person-contacts > div{
        width:100%;
    }


    .ko-switch-button {
        width:300px;
        float:none;
    }
    .ko-switch-button:first-child{
        margin-left:0;
    }
    
    #balicek {width: 90%;}

}

/* Small devices */
@media (max-width: 767px) {  
    body{
        padding:0;
    }
    .navbar{
        margin:0;
    }
    #homepage{
        background-image: url('../img/headers/hp_header.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position:center;
    }
    #homepage .hp-quote{
        font-size:37px;
        line-height:37px;
    }

    .page-title, .flexslide-title {
        font-size:25px;
        line-height:25px;
    }
    .page-subtitle{
        font-size:14px;
    }
    .pf-number-timer {
        float:left;
        margin-left:10px;
        margin-right:20px;
        width: 160px;
        display:inline-block;
        text-align:right;
    }

    .pf-number{
        clear:both;
    }
    .pf-number-caption {
        text-align: left;
        vertical-align: bottom;
    }
    .pf-example{
        width: 40%;
        height:220px;
    }
    .pf-example:after{
        bottom: -10px;
    }
    .text-center {
        padding-left:10px;
        padding-right:10px;
    }
    .slides > li > div{
        padding-left:10px;
        padding-right:10px;

    }
    .flex-nav-container .flexslider .slides div.container{
        padding-top:40px;
    }
    .ko-switch-button {
        width:40%;
    }
    .ko-switch-content .row > div{
        text-align:center;
    } 
    .ko-switch-content .row > ul{
        padding-left: 20px;
        margin-top:20px;
    } 
    .ko-email{
        margin-top:0;
    }
    .ko-email strong{
        display:block;
    }
    #services .content img{
        width:40%;
        float:left;
        margin-right:20px; 
    }
    #services .content .span5{
        width:auto;
        margin:0 20px;
    }
    #services .content ul{
        width:50%;
    }
    #services .content h2{
        margin-bottom:20px;
    }
    #services .content img, #services .content ul{
        float:left;

        margin-left:0;
    }
    #services .content row > div {
        clear:both;
    }

    #services #contents{
        padding-left:20px;
        padding-right:20px;
    }
    #services .downloads{
        text-align:center;
    }
    #services .sl-download{
        height:auto;
        width:30%;
        display:inline-block;
        vertical-align: top;
    }

    #servers table{
        display:table;
    }
    #servers .sl-download{
        height:auto;
    }

    #tech .info, #tech .specs, #tech .tutorial-content{
        padding-left:20px;
        padding-right:20px;
    }

    #about .ab-info .container{

        padding-left:20px;
        padding-right:20px;
    }
    #about .ab-info, #about .ab-numbers{
        padding-top:30px;
        padding-bottom:30px;
    }
    #about .ab-numbers .page-title{
        margin-top:20px;
    }
    #ab-form textarea {
        margin-bottom:10px;
    }

    .contact-numbers{
        margin-bottom:0;
    }
    #bill-info .row{
        margin-top:15px;
    }
    #bill-info .row div:nth-child(1),#bill-info .row div:nth-child(2){
        text-align:center;
        width:50%;
        margin:0;
        float:left;
    }
    #bill-info .row div:nth-child(3){
        clear:both;
        text-align:center;
        padding: 10px 10px 0;
        width:100%;

    }
    #bill-info .page-title {
        margin-top: 0;
        margin-bottom:0;
    }


    .people > div{
        width:33%;
        margin:0;
        float:none;
        display:inline-block;
        font-size:14px;
    }

    #sl-menu-wrapper{
    }
    .graphic-bookmarks{
        display:block;
        position:relative;
    }
    .graphic-bookmark{
        width:200px;
        display:inline-block;
        vertical-align: top;
        float:left;
    }
    .graphic-bookmark .image,.graphic-bookmark span{
        min-height:50px;
        display:block;
    }
    #services #sl-menu-wrapper{
    }
    #services .page-subtitle{
        margin-bottom:20px;
    }
    #sl-menu{
        position:relative;
        padding-top:50px;
    }
    #sl-menu-next, #sl-menu-prev{
        height:50px;
        width:80px;
        position: absolute;
        top:0;
        background-position: right 20px center;
    }
    #sl-menu-prev{
        background-position: 20px center;
    }
    #sl-menu-next{
        right:0;
    }


    .person-popup{
        width:440px;
    }
    .career ul{
        width:auto;
        display:block;
    }
    .person-popup input[type='text'], .person-popup input[type='email'], .person-popup textarea{
        width:400px;
        margin-left:0;
    }
    .person-popup textarea{
        margin-bottom:15px;
    }
    
    
    #balicek {
    padding: 0;
    width: 100%;
    position:fixed;
    top: 10px !important;
    bottom: auto!important;
    margin-left: -20px;
    }
    
    #balicek-click {
    bottom: auto !important;
    margin-left: -20px;
    left: 0;
    padding: 0;
    position: fixed;
    top: 10px !important;
    width: 95%;
    }
    
}


@media (max-width: 550px) { /* smallest devices */
    .person-popup{
        width:370px;
    }
    .career ul{
        width:auto;
        display:block;
    }
    .person-popup input[type='text'], .person-popup input[type='email'], .uploadFile, .person-popup textarea{
        width:300px;
    }

    .person-popup {
        font-size: 12px;
    }
    .people > div{
        width:50%;
        margin:0;
        float:none;
        display:inline-block;
        font-size:14px;
    }

    #sl-menu-wrapper{
        height:auto;
        position:static;
    }
    .graphic-bookmarks{
        display:block;
        position:relative;
        float:none;
        width:auto;
    }
    .graphic-bookmark{
        width: 100%;
        display:block;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+  */
        vertical-align: top;
        height:40px;
        float:none;
        clear:both;
    }

    .graphic-bookmark .image,.graphic-bookmark span{
        display:inline-block;
        float:left;
        height:40px;
        line-height: 40px;;
        margin:0;
        padding:0;

    }
    #sl-menu{
        padding:0;
    }
    .graphic-bookmark .image{
        min-height:0 !important;
    }
    .graphic-bookmark .effects{
        height:40px !important;
    }
    .graphic-bookmark .effects div{
        background-size: auto 70px;
        background-repeat: no-repeat;

    }
    .graphic-bookmark .effects, .graphic-bookmark:hover .image .effects, .graphic-bookmark.active .image .effects{
        border: 0 none !important;
        margin:0 !important;
        padding:0;
    }
    #sl-menu-prev,#sl-menu-next{
        display:none;
    }
    #homepage .hp-quote {
        font-size: 35px;
        line-height:35px;
    }

    .uploadFile{
        margin-right:0;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        margin-bottom:0;
    }
}

@media (max-width: 480px) {/* Iphone 5*/
    #homepage .hp-quote {
        font-size: 30px;
        line-height:30px;
    }
    #logo h1 {
        width:130px;
        background-size: 130px auto;
    }
    #menu-collapse {
        background-size: 20px auto;
        width: 30px;
        height: 40px;
    }
    .page-title {
        margin-top:40px;
        font-size:22px;
        line-height:22px;
    }
    #sl-menu-wrapper {
        margin-bottom:40px;
    }

    .flexslider p{
        font-size:13px;
    }
    .flexslider .flexslide-title{
        font-size:22px;
        line-height:22px;
        margin-bottom:15px;
    }
    .flex-nav-container .flexslider .slides div.container {
        height: 330px;
    }
    .pf-number-timer {
        float:none;
        width:auto;
        margin-left:auto;
        margin-right:auto;
        font-size: 52px;
        line-height: 52px; 
        margin-bottom: 10px;
    }
    .pf-number-caption {
        text-align:center;
        font-size: 16px;
    }
    .pf-number-caption small {
        font-size: 13px;
        max-width: 80%;
        display: inline-block;
    }
    #main #pf-numbers {
        margin-bottom:40px;
    }
    #pf-showbutton {
        font-size: 16px;
        padding: 12px 29px;
        margin-top: 30px;
    }
    #portfolio {
        padding-bottom: 40px;
    }
    #pf-quote p {
        font-size: 13px;
    }
    #pf-quote{
        padding-top:30px;
        padding-bottom:30px;
    }
    .ko-switch-button{
        font-size: 16px;
    }
    .ko-switch-content li {
        font-size:13px;
    }
    .ko-email {
        font-size: 13px;
    }
    #ko-map-description {
        font-size: 17px;
        top:100px;
    }
    #ko-map {
        margin-top: 40px;
        min-height: 305px;    
    }
    #footer {
        font-size:13px;
        padding-left:20px;
        padding-right:20px;
    }
    .logos img {
        max-height: 40px;
    }
    .page-header {
        min-height: 100px;
        line-height: 100px;
        font-size: 22px;
    }
    #services .content h2 {
        font-size:22px;
        margin-bottom:0;
    }
    .content h3{
        font-size:20px;
    }    
    #services .content ul {
        float:none;
        width:auto;
    }
    #services .content img{
        display:none;
    }
    
#services .content .balicky img {
    display: block;
    float: none;
    width:auto;
    margin: 0 auto;
}
    
    #services .sl-download,.sl-download{
        float:none;
        display:block;
        width:auto;
        margin-bottom:5px !important;
        background-size: 30px auto;
        line-height: 17px;
        padding-top: 43px;
        padding-bottom:15px;
    }
    #services .content p, #services .content li, #services .content div{
        font-size:13px;
    }
    #services .content li{
        margin-bottom:0;
    }
    #services .content ul{
        margin-bottom:10px;
    }
    #footer img{
        width:160px;
    }
    #footer p strong{
        display:block;
        font-size:13px;
    }
    .servers td {
        font-size:14px;
    }
    .servers .icon {
        width:25px;
        height:25px;
        background-size: 26px 26px;
    }
    .servers .icons {
        width: 120px;
    }
    .bookmark {
        font-size:14px;
        min-height: 100px;
    }
    .sort a{
        font-size:14px;
        display:block;
        float:none;
    }

    .example img{
        max-width:70%;
    }
    #tech .info, #tech .specs {
        font-size: 13px;
    }
    #tech .tutorial-control span {
        font-size: 15px;
    }
    #tech .tutorial p {
        font-size: 13px;
        padding-bottom: 10px;
    }
    .ab-info h2{
        font-size:22px;
    }
    #about .ab-info, #about .ab-numbers {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #ab-form {
        font-size:13px;
    }
    .btn-blue{
        font-size: 15px;
        font-weight: normal;
        margin-top:30px;
    }
    #ab-form textarea,#ab-form input{
        width:100%;
        margin-left:0;
    }
    #call-us input[type="text"] {
        height: 26px;
        width: 170px;
        color: #B6B6B6;
        font-size: 16px;
    }
    #call-us .btn-blue{
        padding: 8px 12px;
    }
    #servers .sl-download{
        font-size: 16px;
    }
    .person-popup{
        width:240px;
    }
    .person-popup input[type='text'], .person-popup input[type='email'], .uploadFile, .person-popup textarea{
        width:190px;
    }
    
    
    
    
    
}
@media (max-width: 319px) {

    #services .content ul {
        margin-left:5px
    }
    #homepage .hp-quote {
        font-size: 25px;
        line-height:25px;
    }
    .page-title {
        font-size:19px;
        line-height:19px;
    }
    .page-subtitle{
        font-size:13px;
    }
    .graphic-bookmark span {
        font-size:13px;
    }
    .flexslider p{
        font-size:12px;
    }
    .flexslider .flexslide-title{
        font-size:19px;
        line-height:19px;
    }
    .pf-number-timer {
        font-size: 47px;
        line-height: 47px;
    }
    .pf-number-caption {
        font-size: 14px;
    }
    .pf-number-caption small {
        font-size: 12px;
    }
    #pf-showbutton {
        font-size: 14px;
    }
    #pf-quote p {
        font-size: 12px;
    }
    .ko-switch-button{
        font-size: 14px;
    }
    .ko-switch-content li {
        font-size:12px;
    }
    .ko-email {
        font-size: 12px;
    }
    .ko-email strong {
        font-size: 14px;
    }
    #ko-map-description {
        font-size: 15px;
        top:90px;
    }
    #ko-map {
        min-height: 295px;    
    }
    #footer {
        font-size:12px;
    }
    .logos img {
        max-height: 35px;
    }
    .page-header {
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }
    #services .content h2 {
        font-size:20px;
    }    

    .content h3{
        font-size:17px;
    }    
    #services .content p, #services .content li, #services .content div{
        font-size:12px;
    }
    #services .content li{
        margin-bottom:0;
    }
    #services .content ul{
        margin-bottom:10px;
    }
    #footer img{
        width:160px;
    }
    #footer p strong{
        display:block;
        font-size:13px;
    }
    .servers td {
        font-size:13px;
        padding-top:6px;
        padding-bottom:6px;
    }
    .servers .icon {
        width:20px;
        height:20px;
        background-size: 20px 20px;
    }
    .servers .icons {
        width: 100px;
    }
    .servers .description span, .bubble span{
        font-size:13px;
    }    .bookmark {
        font-size:13px;
    }
    #tech h2{
        font-size:20px;
    }   
    .sort a{
        font-size:13px;
        display:block;
        float:none;
    }
    #bill-info .row div{
        font-size:13px;
    }   
    #tech .info, #tech .specs {
        font-size: 13px;
    }
    #tech .tutorial-control span {
        font-size: 13px;
    }
    #tech .tutorial p {
        font-size: 13px;
        padding-bottom: 10px;
    }
    .ab-info h2{
        font-size:20px;
    }
    .ab-info {
        font-size:13px;
    }    
    #ab-form {
        font-size:13px;
    }
    .btn-blue{
        font-size: 15px;
    }
    #call-us input[type="text"] {
        height: 26px;
        width: 170px;
        color: #B6B6B6;
        font-size: 16px;
    }
    #call-us .btn-blue{
        padding: 8px 12px;
    }
    .people > div {
        font-size: 13px;
        width: 100%;
        height:auto;
    }
    .person-photo div, .person-photo{
        width: 120px;
        height: 120px; 
    }
    .navbar .nav{
        left:0;
        width:100%;
    }
    .example .image {
        display:block;
    }
    .person-popup{
        width:240px;
    }
    .person-popup input[type='text'], .person-popup input[type='email'], .person-popup textarea{
        width:190px;
    }
    .person-popup{
        width:auto;
        position:relative;
        border: 0 none;
        top:0 !important ;
        left:0 !important;
    }
    #career-overlay{
        display:none !important;
    }
    .person-popup input[type='text'], .person-popup input[type='email'], .person-popup textarea{
        width:auto;

        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
    

}

@media (max-width: 250px) {
    #homepage .hp-quote {
        font-size: 20px;
        line-height:20px;
    }
    .page-title {
        font-size:16px;
        line-height:16px;
    }
    .page-subtitle{
        font-size:12px;
    }    .graphic-bookmark span {
        font-size:12px;
    }
    .flexslider p{
        font-size:11px;
    }
    .flexslider .flexslide-title{
        font-size:16px;
        line-height:16px;
    }
    .pf-number-timer {
        font-size: 30px;
        line-height: 30px;
    }
    .pf-number-caption {
        font-size: 12px;
    }
    .pf-number-caption small {
        font-size: 11px;
    }
    #pf-showbutton {
        font-size: 13px;
    }
    #pf-quote p {
        font-size: 11px;
    }
    .ko-switch-button{
        font-size: 13px;
    }
    .ko-switch-content li {
        font-size:11px;
    }
    .ko-email {
        font-size: 11px;
    }
    .ko-email strong {
        font-size: 12px;
    }
    #ko-map-description {

        font-size: 13px;
        top:90px;
    }
    #ko-map {
        min-height: 295px;    
    }
    #footer {
        font-size:11px;
    }
    .logos img {
        max-height: 30px;
    }
    .page-header {
        height: 100px;
        line-height: 100px;
        font-size: 12px;
    }
    #services .content h2 {
        font-size:16px;
    }    
    #services .content p, #services .content li, #services .content div{
        font-size:11px;
    }
    #services .content li{
        margin-bottom:0;
    }
    #services .content ul{
        margin-bottom:10px;
    }
    #footer img{
        width:100px;
    }
    #footer p strong{
        display:block;
        font-size:12px;
    }
    .servers td {
        font-size:11px;
    }
    .servers .icon {
        width:20px;
        height:20px;
        background-size: 20px 20px;
    }
    .servers .icons {
        width: 100px;
    }
    .bookmark {
        font-size:11px;
    }
    #tech h2{
        font-size:17px;
    }   
    .sort a{
        font-size:11px;
        display:block;
        float:none;
    }
    .servers .description span, .bubble span {
        font-size: 11px; 
    }
    #bill-info .row div{
        font-size:11px;
    }   
    #tech .info, #tech .specs {
        font-size: 11px;
    }
    #tech .tutorial-control span {
        font-size: 11px;
    }
    #tech .tutorial p {
        font-size: 11px;
        padding-bottom: 10px;
    }
    .ab-info h2{
        font-size:20px;
    }
    .ab-info {
        font-size:11px;
    }    
    #ab-form {
        font-size:11px;
    }
    .btn-blue{
        font-size: 13px;
    }
    #call-us input[type="text"] {
        height: 26px;
        width: 170px;
        color: #B6B6B6;
        font-size: 13px;
    }
    #call-us .btn-blue{
        padding: 8px 12px;
    }
    .people > div {
        font-size: 12px;
        width: 100%;
        height:auto;
    }
    .person-photo div, .person-photo{
        width: 120px;
        height: 120px; }
    .navbar .nav{
        left:0;
        width:100%;
    }
    .pf-example{
        display:block;
        width:100%;
    }
    #bill-info .row div:nth-child(1), #bill-info .row div:nth-child(2) {
        width:100%;
        display:block;
    }
    #call-us input[type="text"] {
        width:100%;
        border-style:solid;
        border-width: 1px;
        border-radius: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        height: 36px;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
}
@media (max-width: 200px) {
    #homepage .hp-quote {
        font-size: 23px;
        line-height:23px;
    }
    #logo h1 {
        width:100px;
        background-size: 100px auto;
    }
}