/* big tablets to 1200px (widths smaller than the 1140px row)*/
@media only screen and (max-width: 1200px) {
    body { font-size: 19px;}
    .row { padding: 0 2%;}  
    .top-screen-message {
        width: 100%;
        padding: 0 2%;
    }
    
    .logo {
        height: 30px;
        margin-top: 22px;
    }
    
    .main-nav { margin-top: 28px;}    
    .sticky .main-nav {  margin-top: 10px;}    
    .sticky .logo-black {
        height: 25px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .main-nav-header:link,
    .main-nav-header:visited { padding: 0 18px;}
    
    .sticky .main-nav-header:link,
    .sticky .main-nav-header:visited { padding: 0 18px;}

    .sticky .icon-header:link,
    .sticky .icon-header:visited { padding: 0 9px;}
    
    
    .btn:link,
    .btn:visited { padding: 10px 40px;}
    
    .btn-box-top-screen-1 { top: 87%;}
    
    h2 { 
        margin-bottom: 25px;
        padding-top: 20px;
    }
    
    h2:after {
        width: 180px;
        margin: 30px auto;
    }
    
    .short-service-introduction { margin-top: 50px;}
    .short-service-intro-header { font-size: 140%;}
    .short-service-intro-p { font-size: 115%;}

    .philosophy-hex-tag {
        width: 270px;
        top: -50px;
   }
    
    .message-philosophy-1,.message-philosophy-2,.message-philosophy-3 { margin-top: 15px;}
    .message-philosophy-1,.message-philosophy-3 { font-size: 95%;}

    .message-philosophy-2 { 
        font-size: 140%;
        margin: 25px 0;
    }
    
    .message-origin-box { margin: 20px;}
    
    .origin-hex-tag {
        width: 270px;
        top: -50px;
    }
    
    .message-origin-1,.header-in-pragraph { font-size: 140%;}
    .paragraph,.paragraph:last-child { font-size: 95%;}
    .footer-message { margin: 4px 0;}
}

/* small tablets to big tablets: from 768 to 1023px*/
@media only screen and (max-width: 1023px) {
    body { font-size: 18px;}
    .row { padding: 0 2%;}
    section { padding: 20px 0;}
    .top-screen-message {
        width: 100%;
        padding: 0 2%;
    }
    
    .logo {
        height: 23px;
        margin-top: 17px;
    }
    
    .main-nav { 
        margin-top: 18px;
        font-size: 70%;
        letter-spacing: 2px;
    }
    
    .main-nav-header:link,
    .main-nav-header:visited { padding: 0 16px;}
    
    .icon-header:link,
    .icon-header:visited { padding: 0 8px;}
    
    .sticky .logo-black {
        height: 20px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    .sticky .main-nav {  margin-top: 7px;}
    .sticky .main-nav-header:link,
    .sticky .main-nav-header:visited { padding: 0 15px;}

    .sticky .icon-header:link,
    .sticky .icon-header:visited { padding: 0 7.5px;}
    
    h1 { font-size: 480%;}
    
    .btn:link,
    .btn:visited { padding: 8px 35px;}
    
    .btn-box-top-screen-1 { 
        width: 100%;
        top: 87%;}
    
    h2 { 
        font-size: 180%;
        margin-bottom: 20px;
        padding-top: 20px;
    }
    
    h2:after {
        width: 150px;
        margin: 20px auto;
    }
    
    
    .short-service-introduction {
        /*font-size: 180%;*/ 
    }
    .short-service-introduction { margin: 30px 0 30px 20px;}
    .short-service-intro-header { font-size: 125%;}
    .short-service-intro-p { font-size: 105%;}
    .btn-short-service { margin: 30px;}
    
    .philosophy-hex-tag {
        width: 200px;
        top: -20px;
    }

    .message-philosophy-1,.message-philosophy-2,.message-philosophy-3 {
    margin-top: 10px;
    }
    
    .message-philosophy-1,.message-philosophy-3 { font-size: 90%;}

    .message-philosophy-2 { 
        font-size: 110%;
        margin: 20px 0;
    }
    
    .message-origin-box { margin: 10px;}
    
    .origin-hex-tag {
        width: 200px;
        top: -20px;
    }
    
    .message-origin-1,.header-in-pragraph { font-size: 110%;}
    
    .message-origin-1:after,
    .message-origin-4 .paragraph:after { 
        width: 300px;
        margin-top: 15px;
    }

    .paragraph,.paragraph:last-child { font-size: 90%;}
    
    .icon-follow-us a:link,
    .icon-follow-us a:visited{ font-size: 200%;}

    .footer-message { margin: 3px 0;}
}

/*small phones to small tablets: from 631 to 767px*/
@media only screen and (max-width: 767px) {
    body {font-size: 17px;}
    /*Mobile phone menu*/
    
    .row { padding: 0 2%;}
    section { padding: 15px 0;}
    
    .logo {
        height: 20px;
        margin-top: 15px;
    }
    
    .main-nav { display: none;}
    .mobile-nav-icon { display: inline-block;}    
    .mobile-nav-icon i { font-size: 200%;}
    .main-nav {
        float: right;
        margin-top: 20px;
        padding: 2px 15px;
        background-color: rgba(39, 39, 39, 0.5);
    }
       
    .main-nav li { display: block;}
    
    .main-nav-header:link,
    .main-nav-header:visited { 
        padding: 0 10px;
        border-right: 2px transparent solid;
    }
    
    .icon-header:link,
    .icon-header:visited { 
        padding: 0 10px;
        display: inline-block;
    }
    
    .sticky .logo-black {
        height: 15px;
        margin-top: 10px;
        margin-bottom: 8px;
    }
    
    .sticky .main-nav { margin-top: 7px; background-color: transparent;}
    .sticky .main-nav-header:link,
    .sticky .main-nav-header:visited { padding: 0 10px;}

    .sticky .icon-header:link,
    .sticky .icon-header:visited { padding: 0 10px;}
    
    .sticky .mobile-nav-icon i { color: #555;}    
    h1 { font-size: 380%;}    
    .btn-box-top-screen-1 { 
        width: 100%;  
        top: 87%;
    }
    
    .btn:link,
    .btn:visited { padding: 5px 25px;}
    
    .btn-full:link,
    .btn-full:visited { margin-bottom: 15px;}
    
    h2 { 
        font-size: 150%;
        margin-bottom: 18px;
        padding-top: 18px;
    }
    
    h2:after {
        width: 120px;
        margin: 20px auto;
    }
    .short-service-image {
        background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0.2)),to(rgba(255, 255, 255, 0.9))),url(img/teamo-on-hand.jpg);
        background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.9)),url(img/teamo-on-hand.jpg);   
    }
    
    .short-service-introduction { margin: 20px 0 20px 10px;}
    .short-service-intro-header { font-size: 125%;}
    .short-service-intro-p { font-size: 105%;}
    .btn-short-service { margin: 10px;}
    
    .col { width: 100%; margin: 1% 0 1% 0;}
    
    .philosophy-image { background-image: -webkit-gradient( linear,left top, left bottom,from(rgba(0, 0, 0, 0.6)),to(rgba(0, 0, 0, 0.6))), url(img/beach-sunset.jpg); background-image: linear-gradient( rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)), url(img/beach-sunset.jpg);
    }
    
    .philosophy-hex{ 
        position: relative; 
        text-align: center;
    }
    
    .philosophy-hex-tag {
        float: none;
        margin: 0 auto;
        width: 150px;
        top: 10px;
    }

    .message-philosophy-1,.message-philosophy-2,.message-philosophy-3 {
    margin-top: 10px;
    padding: 0 10px;
    }

    .message-philosophy-1,.message-philosophy-3 { font-size: 90%;}
    .message-philosophy-2 { 
        font-size: 130%;
        margin: 20px 0;
    }
    
    .mobile-origin-message-box { display: inherit;}    
    .origin-message-box { display: none;}
    
    .origin-image { background-image: -webkit-gradient( linear,left top, left bottom,from(rgba(255, 255, 255, 0.6)),to(rgba(255, 255, 255, 0.6))), url(img/high-five.jpg); background-image: linear-gradient( rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.6)), url(img/high-five.jpg);}
    
    .message-origin-box { margin: 10px;}    
    .origin-hex {
        position: relative;
        text-align: center;
    }
    
    .origin-hex-tag {
        float: none;
        width: 150px;
        top: 10px;
    }
    
    .message-origin-1,.header-in-pragraph { 
        width: 100%;
        font-size: 110%;
        padding: 0 10px;
    }
    
    .message-origin-1:after,
    .message-origin-4 .paragraph:after { 
        width: 80%;
        margin-top: 12px;
    }

    .paragraph,.paragraph:last-child { font-size: 90%; padding-left: 20px;}
    
    .icon-follow-us a:link,
    .icon-follow-us a:visited{ font-size: 200%;}

    footer { margin-top: 10px;}
    .footer-message { 
        font-size: 70%;
        margin: 2px 0;
    }
}


/*small phones to small tablets: from 481 to 630px*/
@media only screen and (max-width: 630px) {
    body {font-size: 16px;}
    /*Mobile phone menu*/

    .icon-header:link,
    .icon-header:visited { font-size: 150%;}
    
    h1 { font-size: 320%;}
    
    .btn-box-top-screen-1 { 
        width: 100%;  
        margin-top: 3%;
        margin-bottom: 5%;
    }
    
    .btn-full:link,
    .btn-full:visited { margin-top: 5px; margin-bottom: 15px;}
    
    h2:after {
        width: 120px;
        margin: 20px auto;
    }
    
    
    .short-service-introduction { margin: 20px;}    
    .btn-short-service { margin: 20px;}
    .col { width: 100%; margin: 1% 0 1% 0;}
}



/*small phones: from 0 to 480px*/
@media only screen and (max-width: 480px) {
    body {font-size: 15px;}
    h1{ font-size: 250%;}
    .short-service-image {
        background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0.2)),to(rgba(255, 255, 255, 0.9))),url(img/teamo-on-hand.jpg);
        background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.9)),url(img/teamo-on-hand.jpg);   
    }
    
    .short-service-introduction { margin: 15px;}    
    .footer-message { 
        font-size: 60%;
        margin: 1px 0;
    }
    
    .philosophy-hex-tag { width: 100px;}
    .origin-hex-tag { width: 100px;}
 
}