/*
Theme Name: Metallia Ltd
Theme URI: https://www.metallia.uk/
Description: Bespoke Theme built using Bootstrap 3 for Metallia Ltd
Author: Elms Creative
Author URI: http://www.elmscreative.com/
Version: 1.0
*/

/* ==========================================================================
   Elements
   ========================================================================== */

   html, body { height:100%; }
   html { overflow:auto; background:#fff; }
   body { padding:0px; font-size:14px; font-family:'Roboto', Arial, Helvetica, sans-serif; color:#202020; -webkit-font-smoothing:antialiased; background:none; }

   h1, h2, h3, h4, h5 { margin:0 0 10px; padding:0; color:#202020; text-transform:capitalize; font-family:'Roboto', Arial, Helvetica, sans-serif !important; font-weight:700; }
   h1 { font-size:40px; }
   h2 { font-size:40px; }
   h3 { font-size:30px; }
   h4 { font-size:20px; }
   h5 { font-size:14px; }

   hr { width:100%; height:1px; padding:0; margin:0px; border-top:#158809 2px solid; border-bottom:none; border-left:none; border-right:none; }

   p { margin:0 0 1.6em; line-height:1.5; font-weight:normal; }
   span { color:#202020; }
   span.required { color:#E5090D; }
   small { font-size:0.9em; }
   blockquote { padding:10px 0px; border-left:none; }
   blockquote > svg { float:left; margin:0px 22px 3px 0px; font-size:42px; }
   blockquote > p { font-size:15px; }
   i { color:inherit; }

   form { width:100%; height:auto; position:relative; margin:0; padding:0px; display:block; overflow:hidden; }
   label { margin:0.5em auto; padding:0; font-size:1em; display:block; text-align:left; clear:both; }
   input[type=text], input[type=url], input[type=email], input[type=tel], textarea { width:100%; padding:10px 14px; margin:0px auto 12px; color:#000; font-size:1em; background:#fff; border:#A3A3A3 1px solid; -webkit-border-radius:75px; -moz-border-radius:75px; border-radius:75px; font-family:'Roboto', Arial, Helvetica, sans-serif !important; }
   input[type=checkbox] { margin:0; }
   input[type=file] { margin: 0; width: 100%; padding:10px; font-size:1em; color: #2a2a2a; }
   select { width:100%; padding:10px 14px; color:#000; font-size:1em; font-family:'Roboto', Arial, Helvetica, sans-serif !important; height:auto; -webkit-appearance:none; -webkit-border-radius:75px; -moz-border-radius:75px; border-radius:75px; box-shadow: none !important; background:#fff; border:#A3A3A3 1px solid; }
   textarea { width:100%; min-height:150px; max-height:150px; padding:10px 16px; margin:0px auto 10px; font-size:1em; background:#fff; border:#A3A3A3 1px solid; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; font-family:'Roboto', Arial, Helvetica, sans-serif !important; }

   .form-control { padding:6px; }

   input[type=submit], button { width:auto; font-size:14px; padding:10px 30px; text-decoration:none; display:inline-block; font-weight:700; color:#fff !important; text-align:center; background:#FC7700; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; border:#FC7700 1px solid; -moz-transition:color 0s linear 0s; -webkit-transition:color 0s linear 0s; -o-transition:color 0s linear 0s; transition:color 0s linear 0s; }
   input[type=submit]:hover, button:hover { color:#FC7700 !important; background:none; text-decoration:none; border:#FC7700 1px solid; }
   .btn { width:auto; font-size:14px; padding:10px 30px; text-decoration:none; display:inline-block; font-weight:700; color:#fff !important; text-align:center; background:#FC7700; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; border:#FC7700 1px solid; -moz-transition:color 0s linear 0s; -webkit-transition:color 0s linear 0s; -o-transition:color 0s linear 0s; transition:color 0s linear 0s; }
   .btn:hover { color:#FC7700 !important; background:none; text-decoration:none; border:#FC7700 1px solid; }

   .alignleft { float:left; margin:0 10px 10px 0; border:none; }
   .alignright { float:right; margin:0 10px 0 10px; border:none; }
   .aligncenter { float:none; margin:10px auto; display:block; border:none; }

   .padded { padding:6px 12px; }
   .no-padding { padding:0px !important; }
   .no-margin { margin:0px; }
   .no-bullets { list-style:none; }

   .gap-ext2 { display:block; position:relative; margin:60px 0; clear:both; overflow:hidden; }
   .gap-ext { display:block; position:relative; margin:30px 0; clear:both; overflow:hidden; }
   .gap { display:block; position:relative; margin:15px 0; clear:both; overflow:hidden; }
   .gap-mini { display:block; position:relative; margin:8px 0; clear:both; overflow:hidden; }
   .gap-very-mini { display:block; position:relative; margin:4px 0; clear:both; overflow:hidden; }

/* ==========================================================================
   Structure
   ========================================================================== */

   nav#pri { padding:8px 0; border-bottom:#C7C6C5 1px solid; }
   nav#pri .logo { float:left; max-width:290px; margin:8px 15px 8px 0; padding-right:25px; border-right:#fff 1px solid; }

   section#hero.homepage { min-height:500px; margin:0px; position:relative; background:url('img/hero-placeholder.jpg') bottom center repeat; background-size:cover; }
   section#hero.homepage h1 { margin-top:100px; }
   section#hero.homepage p { color:#fff; font-weight:600; }
   section#hero.homepage .logo { margin-top:100px; max-width:200px; }

   section#hero { margin:0 auto; position:relative; background:url('img/hero.jpg') bottom center repeat; background-size:cover; }
   section#hero .inner { margin:150px auto 250px;}
   section#hero h1, section#hero h3 { color:#fff; }
   section#hero h3 { text-transform:uppercase; }
   #content { padding:0; transition:margin-left .5s; }

   footer { width:100%; height:auto; margin:0 auto; padding:0; position:relative; background:#fff; } 
   footer h5 { color:#fff; }
   footer p { margin:0px auto; font-size:14px; color:#202020; }
   footer a:active, footer a:visited, footer a:link { color:#202020; }
   footer a:hover { color:#555; }
   footer #sitemap { padding:35px 0px; background:#158809; } 
   footer #sitemap p { color:#fff; }
   footer #sitemap hr { border-top:#fff 1px solid; }
   footer #powered { padding:20px 0px; background:#fff; } 
   footer #powered p { font-size:12px; text-align:center; }

/* ==========================================================================
   Links and Navigation
   ========================================================================== */

   a { font-weight:700; text-decoration:none; -moz-transition:color 0.1s linear 0.1s; -webkit-transition:color 0.1s linear 0.1s; -o-transition:color 0.1s linear 0.1s; transition:color 0.1s linear 0.1s; }
   a:hover { text-decoration:none; }
   a:active, a:visited, a:link { color:#000; }
   a:hover { color:#555; }
   a[href^=tel] { color:#fff; text-decoration:none; }
   a[href^=tel]:hover { color:#555; text-decoration:none; }

   .navbar-collapse { padding:0 !important; }
   .navbar-toggle { float:right; width:42px !important; position:relative; padding:5px 10px 10px; margin:10px auto !important; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); -moz-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0); text-shadow:none; border:0px solid #9c9c9c; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; background:none; }
   .navbar-toggle:hover { border:0px solid #fff !important; background:none; }
   .navbar-toggle span { color:#fff !important; }
   .navbar-toggle span.icon-bar { width:100%; background:#fff !important; }
   .navbar-toggle:hover span { color:#fff !important; }
   .navbar-toggle:hover span.icon-bar { background:#fff !important; }
   .navbar-toggle .icon-bar { height:1px; margin-top:4px; }

   #primary { float:left; width:auto; height:auto; margin:0 auto; padding:0; position:relative; list-style:none; text-align:left; }
   #primary > li { float:none; width:auto; height:auto; margin:0px auto; padding:5px 10px; display:inline-block; }
   #primary > li > a { margin:0px; padding:10px 0; color:#fff; font-size:16px; font-family:'Roboto', Arial, Helvetica, sans-serif; text-transform:capitalize; font-weight:bold; line-height:1.2; text-align:left; text-decoration:none; }
   #primary > li > a:hover { color:#FC7700; background:none; }

   #secondary { float:left; width:auto; height:auto; margin:0 auto; padding:0; position:relative; list-style:none; text-align:left; }
   #secondary > li { float:none; width:auto; height:auto; margin:0px auto; padding:5px 10px; display:inline-block; }
   #secondary > li > a { margin:0px; padding:10px 0; color:#fff; font-size:16px; font-family:'Roboto', Arial, Helvetica, sans-serif; text-transform:capitalize; font-weight:bold; line-height:1.2; text-align:left; text-decoration:none; }
   #secondary > li > a:hover { color:#FC7700; background:none; }

   .dropdown-menu { margin:0px auto 0 !important; padding:10px !important; }
   .dropdown-menu li { width:100% !important; padding:0px !important; margin:0px auto !important; font-size:0.9em !important; background:#fff !important; border:none !important; }
   .dropdown-menu li:hover { background:#fff !important; }
   .dropdown-menu li:nth-last-child(3){ padding:0px !important; border:none !important; }
   .dropdown-menu li a { padding:6px !important; margin:0; line-height:2 !important; text-align:left !important; color:#000 !important; font-size:inherit !important; border:none !important; }
   .dropdown-menu li.active a { color:#555 !important; }
   .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color:#555 !important; background:#fff !important; }
   .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { background:none !important; }

   .nav > li > a:focus, .nav > li > a:hover { background-color:transparent; }
   .nav .open>a, .nav .open>a:focus, .nav .open>a:hover  { background-color:transparent; }

/* ==========================================================================
   Misc
   ========================================================================== */

   .section { padding:90px 0; }
   .section-mid { padding:60px 0; }
   .section-mini { padding:30px 0; }

   .blue-bg { background:#314294; }
   .green-bg { background:#158809; }

   .blue-bg h1, .blue-bg h2, .blue-bg h3, .blue-bg h4, .blue-bg h5, .blue-bg p, .blue-bg ul > li, .blue-bg a, .services-bg h1, .services-bg h2, .services-bg h3, .services-bg h4, .services-bg h5, .services-bg p, .services-bg ul > li, .services-bg a, .green-bg h1, .green-bg h2, .green-bg h3, .green-bg h4, .green-bg h5, .green-bg p, .green-bg ul > li, .green-bg a { color:#fff; }

   #mapCanvas { min-height:320px; background:#f8f8f8; }
   .footer-icon { max-width:80px; margin:-80px auto 0; }

   ul.details { float:right; margin:14px 0; }
   ul.details > li { color:#fff; }
   ul.details > li > a { color:#fff; font-size:1.6rem; }

   .intro-bg { background:#fff url('img/intro-bg.jpg') center no-repeat; background-size:cover; }
   .services-bg { background:#314294 url('img/services-bg.jpg') right center no-repeat; background-size:contain; }
   .form-bg { background:#fff url('img/world-dots-bg.png') center no-repeat; background-size:contain; }

   .forminator-ui#forminator-module-33.forminator-design--flat .forminator-button-submit { margin:0 auto !important; display:block !important; width:auto !important; font-size:14px !important; padding:10px 30px !important; text-decoration:none !important; font-weight:700 !important; color:#fff !important; text-align:center !important; background:#FC7700 !important; -webkit-border-radius:25px !important; -moz-border-radius:25px !important; border-radius:25px !important; border:#FC7700 1px solid !important; -moz-transition:color 0s linear 0s; -webkit-transition:color 0s linear 0s; -o-transition:color 0s linear 0s; transition:color 0s linear 0s; -webkit-box-shadow:0 0 0 0 rgba(50, 50, 50, 0) !important; -moz-box-shadow: 0 0 0 0 rgba(50, 50, 50, 0) !important; box-shadow: 0 0 0 0 rgba(50, 50, 50, 0) !important; }
   .forminator-ui#forminator-module-33.forminator-design--flat .forminator-button-submit:hover { color:#FC7700 !important; background:none !important; text-decoration:none !important; border:#FC7700 1px solid !important; }

/* ==========================================================================
   Google Recapatcha V3
   ========================================================================== */

   .grecaptcha-badge { display:none !important; }

/* ==========================================================================
   WP Page Navi
   ========================================================================== */

   .wp-pagenavi { width:100%; height:auto; margin:20px auto; text-align:center; clear:both; }
   .wp-pagenavi a, .wp-pagenavi span { font-size:1em; text-decoration: none; border:1px solid #029bab; padding: 3px 5px; margin: 2px; }
   .wp-pagenavi a:hover, .wp-pagenavi span.current { border-color:#009ea9; }
   .wp-pagenavi span.current { color:#2a2a2a; font-weight:bold; }

/* ==========================================================================
   Media Queries: iPad
   ========================================================================== */

   /* iPad [landscape] */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
       
   }

   /* iPad [portrait] */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
       
   }

   /* iPad 3/4 [landscape] */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
       
   }

   /* iPad 3/4 [portrait] */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
       
   }

/* ==========================================================================
   Bootstrap Queries
   ========================================================================== */
   
   @media (min-width: 320px) and (max-width: 767px) {
       nav#pri .logo { max-width: 240px; margin: 12px 15px 8px 0; position: absolute; z-index: 500; }
       #primary, #primary > li { width:100%; display:block; }
       #primary > li { padding:5px 0; }
       #primary > li > a { padding:5px 0; }
       section#hero .inner { margin:100px auto 130px; }
       section#hero h1 { font-size:28px; }
       section#hero h3 { font-size:22px; }
       .section { padding:40px 0; }
       .footer-icon { max-width: 50px; margin: -60px auto 0; }
       .services-bg { background:#314294; }
       .services-img { margin: -60px -100px 0; max-width: 180%; }
       main#content { overflow:hidden; }
   }

   @media (min-width: 768px) and (max-width: 992px) {
       nav#pri .logo { max-width: 210px; }
       #primary > li > a { padding:6px 0; font-size:14px; }
       ul.details { margin: 8px 0; }
       ul.details > li > a { font-size: 1.4rem; }
       section#hero .inner { margin: 100px auto 200px; }
       section#hero h1 { font-size:34px; }
       section#hero h3 { font-size:26px; }
       .section { padding:40px 0; }
       .section-mid { padding: 40px 0; }
       .footer-icon { max-width: 50px; margin: -60px auto 0; }
   }

   @media (min-width: 993px) and (max-width: 1200px) {
       
   }

   @media (min-width: 1201px) {
       
   }

/* ==========================================================================
   Print
   ========================================================================== */

   @media print {
   	* { background:transparent !important; color:#000 !important; box-shadow:none !important; text-shadow:none !important; }
   	a, a:visited { text-decoration: underline; }
   	a[href]:after { content: " (" attr(href) ")"; }
   	abbr[title]:after { content: " (" attr(title) ")"; }

    /*
     * Don't show links for images, or javascript/internal links
     */

     .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
     pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
     thead { display:table-header-group; }
     tr, img { page-break-inside: avoid; }
     img { max-width:100% !important; }
     @page { margin: 0.5cm; }
     p, h2, h3 { orphans:3; widows:3; }
     h2, h3 { page-break-after:avoid; }
 }