* { 
    font-family:Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}
html {
    overflow-x:hidden ;
    scroll-behavior:smooth;        
    --scroll-margin-top: 100px; 
    width:100vw;
}

A {
    text-decoration: none;
    scroll-margin-top:120px;
}
A:hover {
    text-decoration: underline;
}
body{    
    
    position: relative;
    top:0;
    left:0;
    margin:0;
    
    background:black;
    width:100vw;
    

}

a.anchor {
    display: block;
    position: relative;
    --top: -80px;
    visibility: hidden;
    scroll-margin-top:120px;
}
.top {
    position:sticky;    
    top:0;
    padding:1em;
    margin-bottom:1em;
    background:#000C;
    transition: ease;    
    color:gray;
    box-shadow: 0em 0em 2em black;
    z-index: 10;
    display:flex; 
    flex-direction: row; 
    gap:10px;
    flex-wrap:wrap; 
    justify-content: center;
    text-align:bottom;
    align-content:flex-end;
    

}
.header {
    color:white;
    background-image: url('images/Banner-1920-x-800-caviar.jpg');
    -webkit-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
    background-position: left;
    background-repeat:no-repeat;
    background-size: cover;
    background-position-y: 55%;
    height:max(60vh,50vw);
    
    --height:60vw;
    width:100vw;
    display:block; 
    /*
    flex-direction: row; 
    gap: 10px;flex-wrap:wrap; 
    */
    justify-content: center;
    text-align:bottom;     
    margin:auto;
    overflow-x: hidden;
}

.about{
    color: #676B6D;
    display: block;
    padding-bottom: 2em;
    padding-top: 2em;
    text-align: justify;
    
    line-height: 2em;
    background:white;    
}

.about br{    
    display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: 2em; /* change this to whatever height you want it */
    
}

.services {
    background:#b1b1b1;    
}

.services_list {
    display: flex;
    flex-direction: row;
    gap: 1em; 
    width:100%;   
    margin:auto;
    flex-wrap: wrap;
    padding:1em;
    justify-content: center;
}

.services_item{
    background:white;
    padding:1em;
    max-width: 400px;
    min-width: 200px;
    text-align:center;
}
.services_item img{
    margin:auto;
    object-fit:contain;
    width:100%;
}





.choose_us_list {
    display: flex;
    flex-direction: row;
    gap: 1em; 
    width:100%;   
    margin:auto;
    flex-wrap: wrap;
    padding:1em;
    justify-content: center;
}

.choose_us_item{
    background:white;
    padding:1em;
    max-width: 300px;
    min-width: 100px;
    text-align:center;
}
.choose_us_item img{
    margin:auto;
    object-fit:contain;     
    ---height:100px;
    ---width:50%;
    
}


.menu ul {
    float:right;
    list-style:none;
    gap:1em;
    cursor: pointer;
}
.menu ul li {       
    cursor: pointer;
    float:right;
    margin-right:1em;
}

/*
.menu .parent {
    display:block;  
    list-style:none;    
    cursor: pointer;
    border:1px solid blue;
}

.menu .child {
    display:block;  
    list-style:none;    
    cursor: pointer;
    border:1px solid blue;
}


*/

.menu {
    margin-top:2em;
}
.menu a {
    display:block;
    padding:0.5em 0.5em 0.5em 0.5em;
    color:#CCC;
    font-size: smaller;
    border-radius:2px;
    transition: 0.75s;
}

.menu li {
    margin:0;
    padding:0;
    vertical-align:bottom;
}
.menu .parent {
    display: block;
    position: relative;
    float: left;        
}
.menu .parent a{        
    text-decoration: none;
}
.menu .parent:hover > ul {
    display:block;
    position:absolute;
}
.menu .child {
    display: none;
    z-index: 10;
    
    float:right;
}
.menu .child li {    
    
    /*
    border-bottom:#CCC 1px solid;
    border-right:#CCC 1px solid; 
    */
    width:100%;
}
.menu .child li a{
    color:white;    
}
.menu ul{
    list-style: none;
    margin: 0;
    padding: 0px; 
    min-width:10em;
}
.menu ul ul ul{
    left: 100%;
    top: 0;
    margin-left:1px;
}
.menu a:hover {
    background-color: gray;
    color:white;
}
.menu .parent a:hover {
    background-color: darkgray;
}
.menu .expand{
    font-size:12px;
    float:left;
    margin-right:5px;
    
}

#menubutton {
    width:2.5em;
    height:2.5em;
    margin-top:1em;
    border:0px solid gray;
    border-radius: 3px;
    position:absolute;
    right:1em;
    top:0em;
    display:none; 
    content:" ";
    background:#0008;
    padding:0.2em;


}
#menubutton div {
    width: 100%;
    height:14.2%;
    background-color: gray;
    margin: 14.2% 0;
    border-radius: 2px;
    transition-duration: .25s;
    visibility:visible;
    opacity:1;
}
#showmenu:checked+#menubutton div{
    visibility:hidden;
    opacity:0;
}

#showmenu:checked+#menubutton div:first-child{
    visibility:visible;
    opacity:1;
    background-color:lightgray;  
    transform: translate(0,200%) rotate(45deg);
    
}
#showmenu:checked+#menubutton div:last-child{
    opacity:1;
    visibility:visible;
    background-color:lightgray;  
    transform: translate(0,-200%) rotate(-45deg);
    
}

 

@media /*screen and (max-width:600px) , */
/*screen and (min-resolution:288dpi)  */
screen and (max-width:900px) {
    /* for narrow screens, override the menu layout to make it vertical instead of horizontal,
    and hidden by default. submenus should pop to the side instead of underneath.
    menu should show if showmenu is checked.
    */
    .slideleft1 {
        font-size:30px;        
    }
    .menu{
        display:none;
        position:absolute;
        right:1em;
        top:3em;
        background:#222;        
        
    }
    
    #menubutton{
        display:block;
    }

    #showmenu:checked+#menubutton+.menu{
        display:block;
    }
    

    #showmenu:checked+#menubutton+.menu li{
        float:none;
    }
    #showmenu:checked+#menubutton.menu .parent:hover > ul {
        display:inline-block;
    }


}



input, textarea {
    padding:1em;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: gray;
    opacity: 1; /* Firefox */
    font-style: italic;
}

.linkbutton {
    border:1px solid white;
    border-radius: 0.25em;
    background:gray;
    color:white;
    padding:1em;
    padding-left:2em;
    padding-right:2em;
    font-weight: 600;
    text-transform:uppercase;
    text-align: center;
    transition:0.25s;
    cursor:pointer;

}
.linkbutton:hover {
    background:black;
    text-decoration: none;
    
}
.slideleft1 {
    /*Start text off the page to the right and slide it into position */
    animation-name: slideleft;
    animation-duration: 1s;        
    animation-fill-mode: both;
    font-size: 60px;
    ---font-family:"Roboto", Sans-serif;
    font-family:"Arial", Sans-serif;
    font-size:60px;
    font-weight:400;
    text-transform:uppercase; 
    text-align:center;
}
.slideleft2 {
    /*Start text off the page to the right and slide it into position */
    font-size: 18px;
    color:rgba(255,255,255,0.72);
    animation-name: slideleft;
    animation-duration: 1s;
    animation-delay: 2s;
    
    animation-fill-mode: both;
    
}

@keyframes slideleft {
    0%   {transform: translate(100vw) skewX(-30deg);}
    60%  {transform: translate(0vw)  skewX(-30deg);}    
    80%  {transform: translate(0vw)  skewX(20deg);}    
    100%  {transform: translate(0vw) skewX(0deg);}        
}
.footer{
    background:white;    
    color:#444;
    display:flex; 
    gap:1em;
    justify-content: center;
    flex-wrap: wrap;
}

.socialfooter{
    background:black;
    color:white;
    padding-top:4em;
    padding-bottom:4em;
}
.socialitem {
    color:white;
    width:15%;
    text-align:center;
    min-width:200px;
}

.socialicon {    
    background:white;
    width:75px;
    height:75px;    
    border:1px solid white;
    border-radius:0.5em;
    padding:1em;
    margin:auto;
}
.socialicon img{    
    width:100%;
    height:100%;
}

@media /*screen and (max-width:600px) , */
/*screen and (min-resolution:288dpi)  */
screen and (max-width:600px) {
    .slideleft1 {
        font-size:30px;        
    }
    .menu{
        display:none;
    }
    #menubutton{
        display:block;
    }
}
.category_list {
    padding:1em;
    margin-right:2em;
    width:100%;    
}
.category_list a{
    line-height: 1.5em;
    color:#444;
    
}

.contact {
    margin-bottom:2em;
}

.postcard_list {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 12px; 
    background:whitesmoke;
    width:100%;
     
    align-items:flex-start;
    align-content: center;
    vertical-align: top;
    justify-content: center;
    padding-top:2em;
    margin:auto;
    padding-bottom:2em;
   
}

.postcard{
    min-width: 300px;    
    max-width: 600px;    
    min-height: 200px;    
    overflow:hidden;

    text-overflow:ellipsis;
    border:0px solid gray;
    border-radius:0.5em;
    box-shadow:0em 0.2em 0.25em #8882;
    padding:1em;
    background:white;

}

.postcard a{    
    color:gray;    
    font-size: larger;
}

.job {
    width: 300px;    
    height: 400px;    
    overflow:hidden;

    text-overflow:ellipsis;
    border:0px solid gray;
    border-radius: 5px;
    padding:1em;
    background:white;
    box-shadow: 0.0em 0.20em 0.5em #aaa8;
    background-image: url('/images/Logo-black-on-alpha-144-x-144.png');
    background-repeat: no-repeat;    
    background-position-x: right;    
    border-top: 1em solid transparent;    
    border-right: 1em solid transparent;    
    background-size:3em;
    padding-right:0;
    margin-right:0;
    

}
.job a{
    color:gray;
    
}
.job h2{
    color:gray;
    font-size: large;
}

#ja-jobs-widget {
    padding:2em;
    scroll-margin-top: 80px;
    scroll-padding-top: 80px;
    background:whitesmoke!important;
}
.ja-job-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    background:whitesmoke;
    width:100%;
     
    align-items:flex-start;
    vertical-align: top;
    justify-content: center;
    padding-top:2em;
    padding-bottom:2em;
}
.ja-job-details {
    padding:4em;
    max-width: 800px;   
    margin:auto;
    background:white;
}
.ja-job-search select,
.ja-job-search input{
    padding:0.5em;    
    min-width:10em;
}

.ja-form:nth-child(4n) {
    outline:1px solid red;
}
.ja-form{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: end;
    padding:1em;
    margin:auto;
    gap:1em;
}

.powered-by-jobadder{
    display:none;
}
.apply {
    margin-top:2em;
}
.apply input, .apply a{    
    border:1px solid lightgray;
    border-radius: 2px;
    background:rgb(232, 232, 232);
    font-size: initial;
    color:rgb(68, 68, 68);
    padding:0.5em;
}

.apply input:hover,.apply a:hover {
    text-decoration:none;
    background:lightgray;
}

.job .reference:before {
    content: "Job Reference: ";    
}
.job .title{

    min-height:2em;
    margin-bottom:0;
    margin-top:0;    
    margin-right:2.75em;    
} 
.job .title a{
    border:0px solid gray;            
}

.ja-pager {
    display: flex;
    gap:0.55em;
    text-decoration: none;
    justify-content: center;
}
.ja-pager .page,.previous,.next,.current-page,.first-page,.last-page{
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  background:whitesmoke;
  border:1px solid lightgray;  
  padding:0.5em;
}
    

.ja-pager a:hover {    
    background:lightgray;
    text-decoration: none;

}


.ja-pager .current-page{        
    background:cornflowerblue;
    color:white;

    
}


.post_list {
    display: flex;
    flex-direction: row;
    gap: 1em; 
    width:100%;   
    margin:auto;
    flex-wrap: wrap;
    padding:1em;
    justify-content: center;
}

.post_item{
    background:white;
    padding:1em;
    max-width: 400px;
    min-width: 200px;
    text-align:center;
}
.post_item img{
    margin:auto;
    object-fit:contain;
    width:100%;
    height: 200px;
}

/*Styling for lists of post titles */
.postitem a{
    color:#44A
}
.postitem a:visited{
    color:#555
}
.postitem img{
    width:3em;
    height:3em;
    object-fit:contain;
    border-radius: 0.5em;
}

.postsection {
    background:white;
    width:100%;
    padding-top:1em;
    padding-bottom:4em;
    padding:1em;
}
.postcontent {
    color:#676B6D;
    
    max-width:1000px; 
    margin:auto;    
    line-height: 2em;
}

.postcontent li{
    margin-bottom: 1em;
}
.postcontent img{
    padding: 1em;
}

.posttitle{
    color:#44A;
    font-weight: 600;
    
}
.posttitle img{
    width:3em;
    height:3em;
    object-fit:contain;
    border-radius: 0.5em;
}

/* define a flex style table class for tinyMCE that will force the table to act like a flex layout, 
and wrap columns when the screen is < 800px wide.
The table must not use merged or spanned cells or this layout wont work.*/
table.table_round_corners{
    border:0;
    border-radius:0.5em;
    border-spacing:0;
}
table.table_round_corners>tbody>tr:last-child>td:first-child {
    border-bottom-left-radius: .5em;
}

table.table_round_corners>tbody>tr:last-child>td:last-child {
    border-bottom-right-radius:.5em;
}

table.table_flex_800 {
    display:block;
    height:auto!important;
}
table.table_flex_800>tbody{
    display:block;
}
table.table_flex_800_baseline>tbody>tr{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:1em;
    height:auto!important;
    align-items: baseline;
}
table.table_flex_800_baseline>tbody>tr>td{
    display:inline-block;    
    height:auto!important;
    width: fit-content!important;
    margin-left:auto;
    margin-right:auto;
}

table.table_flex_800>tbody>tr{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:1em;
    height:auto!important;
    align-items:baseline;
}
table.table_flex_800>tbody>tr>td{
    display:inline-block;    
    height:auto!important;
    width: fit-content!important;
    margin-left:auto;
    margin-right:auto;
}

@media screen and (max-width:800px) {
    table.table_flex_800>tbody>tr{
        flex-wrap:wrap;
    }
    .contact {
        margin:1em;
    }
    table.table_flex_800_baseline>tbody>tr{
        flex-wrap:wrap;
    }
    .contact {
        margin:1em;
    }
    .postcontent img{
        padding: 0.25em;
    }
}

@media print {

    body {
        margin:0;
        color: #000;
        background-color: #fff;
    }
    
    .top {
        position:relative;
        box-shadow:none;
        border-bottom:1px solid gray;
    }
}