/*
Custom styles for Bootstrap 4 website.
*/
/* 
    Created on : 27-Jul-2017, 09:20:45
    Author     : Albert Jacobs
*/

        html, body {
            font-family: gill sans MT, Helvetica, arial, sans-serif;
            margin:0;
            padding:0;
        }
        
        .bodywrapper {
            margin-top:30px;
            margin-bottom:30px;
        }
        
        h1 {
            color:#003f87;
            font-size: 180%;
            font-weight: 500;
        }

        h2 {
            color:#009900;
            font-size: 150%;
            font-weight: 500;
        }

        .qualityText{
             margin-top:30px;
        }
        
        .qualityText h2 {
            color:#009900;
        }
        
        #banner {
             margin:0;
             padding:0;
        }
        
        #banner .container-fluid {
              text-align:center;
              margin:10px 0; 
              padding:10px 0;
        }
        
        .intro {
            text-align: left;
        }
        
        .navbar-brand {
            font-size:34px;
            margin-bottom:0;
            padding-bottom:0;
        }
        
        .navbar-brand #ATEC {
            color:#003f87;
        }
        
        .navbar-brand #PMC {
            color:#666d70;
        }
        
        .navbar-brand #arrow {
            height:36px; 
            padding-bottom:8px; 
            padding-left:2px;
        }
        
        .navbar-toggler-icon {
            margin-top:10px;
       }
       
        .navbar-toggler {
            background:white;
       }
       
       .navbar {
           max-width: 1150px;
           margin: 0 auto;
           margin-bottom: 10px;
       }

        #badge {
            height:40px; 
            margin-bottom:10px; 
            padding-right:20px;
            visibility: hidden;
        }

       .ofdLink img {
            margin-top:5px; 
            margin-left:10px;
       }
       
       .fullImage {
           width:100%;
       }

       .fullImageWBox {
            width:100%; border:solid 1px lightgrey; box-shadow: 6px 8px 5px lightgrey;
       }
       
       .grad {
            background: whitesmoke; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left top, white, white, whitesmoke); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(bottom right, white, white, whitesmoke); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(bottom right, white, white, whitesmoke); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to bottom right, white, white, whitesmoke); /* Standard syntax */
        }
       
        .grad-inverse {
            background: white; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(right top, whitesmoke, white); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(bottom left, whitesmoke, white); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(bottom left, whitesmoke, white); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to bottom left, whitesmoke, white); /* Standard syntax */
        }
       
        .button{
            display: inline-block;
            background: #00244d;
            background: linear-gradient(#00244d, #005fcc);
            border: solid 1px #999;
            border-radius: 5px;
            color: white;
            padding: 5px 20px;
            margin: 10px;
            text-decoration: none;
            font-size:20px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.6);
        }

        .button:hover {
            border-color: #888;
            text-shadow: 0 1px 2px rgba(0,0,0,0.9);
            background: #005fcc;
            background: linear-gradient(to top, #00244d, #005fcc);
            text-decoration: none;
            color:white;
        }

        .button:active {
            position: relative;
            top: 1px;
            text-decoration: none;
            color:white;
            font-weight:bold;
        }

        .button:link {
            text-decoration: none;
            color:white;
        }
        
        .carousel-caption p {
            color:gray;
        }
        .carousel-item .container {
            background:#ECEEEF;
        }
        #myCarousel {
            margin:10px auto;
        }
        
            .clientList li {
                margin: 0;
                padding: 3px 0px 0px 15px;
                list-style: none;
                background-image: url("media/atecpmc_bullet.png");
                background-repeat: no-repeat;
                background-position: left center;
                background-size: 6px;
            }

        .footerText {
            max-width: 1150px;
            margin: 0 auto;
            margin-top: 10px;
            padding-left:20px;
        }

        .footerText p {
            font-size:12px;
            margin:0;
            padding:0;
        }
        
        .footerText div {
            margin:0;
            padding:0;
        }
        
        .footerText .container .row div {
            text-align: left;
        }
        
        .footerText .grad-inverse {
            padding-top:10px;
        }
        
        /* ==================================================
          Sticky
          ================================================== */
        .sticky.navbar {
          border-radius: 0;
          padding-top: 10px;
          padding-bottom: 10px;
          -webkit-transition: all 0.3s ease-out;
          -moz-transition: all 0.3s ease-out;
          -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
        }
        .sticky .show-is-sticky,
        .sticky .show-not-sticky {
          -webkit-transition: all 0.3s ease-out;
          -moz-transition: all 0.3s ease-out;
          -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
          opacity: 0;
          visibility: hidden;
        }
        .sticky .show-not-sticky {
          opacity: 1;
          visibility: visible;
        }
        .sticky.is-sticky {
          position: fixed;
          left: 0;
          right: 0;
          top: 0;
          z-index: 1000;
          width: 100%;
        }
        .sticky.is-sticky.navbar {
          background-color: white;
        }
        .sticky.is-sticky .show-is-sticky {
          opacity: 1;
          visibility: visible;
        }
        .sticky.is-sticky .show-not-sticky {
          opacity: 0;
          visibility: hidden;
        }

        .sticky.is-sticky #badge {
          visibility: visible;
        }

        @media (max-width:900px) {
            
            .intro {
                padding:10px 0;
            }
            
            .intro h1 {
                font-size: 160%;
                font-weight: 500;
                
            }
            
            .intro p {
                font-size:100%;
            }
            
            .mobileText h1 {
                font-size: 160%;
                font-weight: 500;
            }
            
            .mobileText h2 {
                font-size: 160%;
                font-weight: 500;
            }
            
            .mobileText p {
                font-size:100%;
            }
            
            .sticky.navbar {
              padding-top: 0px;
              padding-bottom: 0px;
            }
            
            #banner h1 {
                font-size: 100%;
                font-weight: 500;
                
            }
            
            #myCarousel {
                visibility:hidden;
                height:0;
                margin:0;
                padding:0;
            }
            
            #adv_eng_img {
                margin-bottom:20px;
            }
            
        }       

                @media (max-width:580px) {

                    #myHidden {
                        visibility:hidden;
                        height:0;
                        margin:0;
                        padding:0;
                    }

                }       

        /* Extra small devices (portrait phones, less than 576px) 
        // No media query since this is the default in Bootstrap

        // Small devices (landscape phones, 576px and up) 
        @media (min-width: 576px) { ... }

        // Medium devices (tablets, 768px and up)
        @media (min-width: 768px) { ... }

        // Large devices (desktops, 992px and up)
        @media (min-width: 992px) { ... }

        // Extra large devices (large desktops, 1200px and up)
        @media (min-width: 1200px) { ... }

        */