/*
Theme Name: Arra
Author: Gary Kelly
*/

/* GENERAL */
html, body{margin:0; padding:0;}
body{position:relative; display:flex; min-height:100vh; flex-direction:column;}
*{padding:0; margin:0; border:none; outline:none;}
p, li, label, a, div, label, input, textarea, h1, h2, h3, h4, h5, h6, nav, a{font-family:'Roboto', sans-serif;}
h1{text-transform:uppercase; font-size:24px; color:#335180; font-weight:900; font-style:italic;}
h2{font-size:18px; color:#f1af69; font-weight:700;}
h3{font-size:24px; color:#335180; font-weight:900; font-style:italic;}
p, li, label, a, div, label, input, textarea, td{font-size:14px; color:#231f20;}
a{color:#000000; text-decoration:none;}
input, textarea{background:#f2f2f2; width:98%; padding:5px 1%; margin-bottom:10px;}
textarea{height:100px !important;}
.clear{clear:both;}
.center{text-align:center;}
.orange{color:#f1af69; font-weight:700;}
main a{color:#f1af69;}
main a:hover{color:#000000;}
.width{width:1140px; margin:0 auto;}
.purple{background:#335180;}
.white{background:#fff;}
.left{float:left;}
.right{float:right;}
b{color:#335180; font-weight:700;}
th, td, table{border:1px solid #000000; padding:5px;}
table{border-collapse: collapse;}

/* HEADER */
.contact-details{width:100%; padding:0px; height:60px;}
.contact-details p{padding-top:10px; font-size:12px;}
.contact-details p a{font-size:12px;}
.contact-details img{width:20px; margin:1px 0px 0px 2px;}

header{width:100%; position:relative; z-index:1}
.container{width:100%;}
.logo{width:140px; position:absolute; top:5px; left:50%; margin-left:-70px;}

/* MAIN NAVIGATION */
nav.main{min-height:35px;}
nav.main .left li a{margin-right:10px;}
nav.main .right li a{margin-left:10px;}
nav.main li{list-style-image:none; list-style-type:none; display:inline-block; position:relative;}
nav.main a{color:#fff; display:block; text-decoration:none; font-size:12px; padding:10px 0;}
nav.main a:hover{color:#fbaf3f;}
nav.main li ul{width:170px; margin:0; position:absolute; background:#f9f9f9; top:100%; display:none; opacity:0; visibility:hidden; z-index:5; left:0;}
nav.main li:hover ul{display:block; opacity:1; visibility:visible; transition:all 0.5s;}
nav.main li ul li{display:inline-block; width:100%;}
nav.main li ul li+li{border-left:1px solid #f3f1f3;}
nav.main li ul li a{color:#231f20; font-weight:normal; font-family:'Lato', sans-serif; padding:5px; display:block; font-size:14px; margin:0 !important;}
nav.main li ul li a:hover{background:#f3f1f3;}
nav.main li ul li img{display:none;}
.nav_thumb{display:none !important;}
.ms-thumb-list{margin-top:-50px !important;}
.ms-thumb-frame{opacity:1 !important;}

/* MAIN CONTENT */
main{width:100%; flex:1;}
main p{margin-bottom:10px; line-height:18px;}
section{width:1140px; padding:50px 0; margin:0 auto;}
article{width:69%; margin-bottom:20px;}
aside{width:30%; text-align:left; margin-bottom:20px;}
aside h2{width:100%; background:#f1af69; color:#fff; padding:5px 0; margin-bottom:3px; text-align:center;}
aside img{max-width:90%; height:auto; margin:0 5%;}
.metaslider{margin:0 0 10px;}

.guides{width:100%; margin:10px 0; background:#524a50 url(/wp-content/uploads/2017/03/Legislation-Guide.jpg) center top / auto 100% no-repeat; text-align:center;}
.guides h2{color:#fff; text-transform:uppercase; font-size:24px; font-style:italic;}
.guides p{color:#f1af69; text-transform:uppercase; font-size:24px; font-style:italic; font-weight:700;}

.news{text-align:center;}
.news li{width:270px; list-style:none; display:inline-block; margin:0 5px 20px; text-align:center;}
.news li:nth-of-type(4n){margin-right:0;}
.news li .featured-image{width:270px; height:135px; position:relative; overflow:hidden; margin-bottom:5px;}
.news li .featured-image img{max-width:100%; max-height:100%; width:auto; height:auto; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}
nav.pagination{text-align:center; width:235px; margin:20px auto;}
nav.pagination .button a{color:#f1af69; border:1px solid #f1af69; padding:5px; width:105px; display:inline-block;}
nav.pagination .button a:hover{color:#fff; background:#f1af69; border:1px solid #f1af69; padding:5px; width:105px; display:inline-block;}
.latest-articles-heading{text-align:center; text-transform:uppercase; font-size:24px; color:#335180; font-weight:900; font-style:italic;}

.single-post .featured-image {width:100%; position:relative; overflow:hidden; margin-bottom:5px;}
.single-post .featured-image .height{padding-top:50%;}
.single-post .featured-image img{max-width:100%; max-height:100%; width:auto; height:auto; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}

.latest-articles-sidebar a{padding:5px; background:#f9f9f9; display:block; margin-bottom:2px; color:#545454;}

/* FOOTER */
.tag{background:#f3f1f3; text-align:center;}
.tag h3{font-size:24px;}

footer{width:100%; padding:40px 0 20px; background:#335180 url(/wp-content/uploads/2017/03/Human-Resource-Management-Footer.jpg) center bottom / auto 100% no-repeat; position:relative; text-align:center;}
footer p{width:80%; margin:0 auto; font-size:12px; color:#fff; text-align:center;}
footer a{color:#fff;}
.footer-logo{margin-bottom:5px; width:100px;}
.design{background:#335180; text-align:center; padding:7px 0;}
.design a{font-size:11px; color:#fff;}

/* RESPONSIVE */
@media (max-width:1200px){
section, .width{width:960px;}
nav.main .left{display:none}
nav.main .right{display:none}
}

@media (max-width:1000px){
section, .width{width:90%;}
.contact-details .width{display:none;}
}

@media (max-width:720px){
.container{width:100%;}
article{width:100%;}
aside{width:100%;}
}