/*******************************************************************************************************************
 Global Colours
 *******************************************************************************************************************/
:root {
    --off-wht: #f5f5f5;       /* white */
    --prim-blk: #37383A;      /* primaray black */
    --lblu: #0090ca;
    --blu: #336699;
    --prim-blu: #04558d;           /* primary blue */
    --gry: #eaeaea;
    --gry2: #bdbdbd;
    --gry3: #6e6e6e;
}

/*******************************************************************************************************************
 Global Page Structure
 *******************************************************************************************************************/

html {
    height: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 65%;
    font-family:sans-serif
}

body {
    font-family: "Roboto", Ariel, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background: #ffffff;
    color: #37383A;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 2rem;
    vertical-align: baseline;
    font-weight: 400;
    font-style: normal;
    line-height: 1.8;
    /* fixed width for IE8 */
    min-width: 1180px
}

*, *:before, *:after { /* apply box model fix. supports IE8 and higher firefox 28 and below require -moz prefix
                          android browsers on 2.3 or less and apple OS4 or less require -webkit prefix */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.row { /* gives a width of 1210px  which is width + left and right padding values */
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    display:block;
    overflow:hidden;
}

a { text-decoration: none }

p {
    font-size: 1.6rem;
    padding: 0;
    margin: 0 0 1.6rem 0;
    clear: both;
    line-height:1.4999;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none
}

/* used for responsive design aspect */
img {
    width: 100%;
    height: auto
}



input[type=text],
input[type=password], 
textarea                                                    { display:block;
                                                              -webkit-appearance:none;
                                                              -moz-appearance:none;
                                                              appearance:none }
                                                              
input[type=checkbox]                                        { display:inline-block;
                                                              vertical-align:bottom;
                                                              margin-right:8px;
                                                              float:left;
}                      

textarea                                                    { overflow-y:auto;      /* turn on vertical scrollbars when needed */
                                                              -ms-overflow-y:auto;  /* needed for IE8 */
                                                              resize:none }         /* don't show resize on textarea  */




/*******************************************************************************************************************
 Header element defaults
 *******************************************************************************************************************/
h1 {
    font-size: 3.7rem;
    font-weight: 700;
    line-height: 42px;
    text-transform: uppercase;
    margin:0;
    padding:0
}

h2 {
    font-size: 1.3rem;
    margin: 0 0 15px 0;
    padding: 0;
    color: #6e6e6e;
    line-height: 1.222;
    display: block;
    clear: left;
}



/*******************************************************************************************************************
 
 *******************************************************************************************************************/
.nojs {}

/*******************************************************************************************************************
 
 *******************************************************************************************************************/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
    margin: 0;
    padding: 0
}

/*******************************************************************************************************************
 site header - fixed bar at top of page
 *******************************************************************************************************************/

.site-header {
    z-index: 1000;
    position: fixed;
    top: 0;
    background-color: #ffffff;
    width: 100%;
    height: 80px;
    margin: 0;
    padding: 0;
}
.site-title-area {
    float:left;
    margin:25px 0 0 0;
    padding:0
    
}

.site-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
    .site-title a,
    .site-title a:hover {
        color: #000000;
        margin: 0;
        padding: 0;
    }

.site-description {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 500;
    display: block;
    color: #000000;
}

/*******************************************************************************************************************
 page introduction section
    each page has an image, heading text line and one line blurb under the heading
 *******************************************************************************************************************/

.page-intro 
{ min-height:345px;
  position:relative;
  background-position:50% 50%;
  background-size:cover;
  background-repeat:no-repeat;
  width:100%;
  margin:100px 0 40px 0;
  padding:0;
  z-index:0; 
  background-image:url('/_cdn/img/2602198514122000.png');background-color: var(--gry);
}



 /*******************************************************************************************************************
 
 *******************************************************************************************************************/
    /* Grey bar under header section */
    .hdr-bar {display:block;
              overflow:hidden;
        height: 40px;
        margin: 0 0 40px 0;
        padding:5px 0;
        background-color: var(--gry);
        text-align:center;
        font-size:1.5rem;
        color:var(--prim-blk)
        }
     /* Grey bar under header section adjustment when no image shown */
        .hdr-bar.noimg {
            margin: 90px 0 60px 0
        }

 /*******************************************************************************************************************
 page structure layout elements
 *******************************************************************************************************************/
.page-side-bar {
    width: 30%;
    float: right;
    padding: 0;
    margin: 0 0 20px 0;
    display:block
}


.page-content {
    width: 62%;
    float: left;
    margin: 0 0 30px 0;
    padding: 0;
    display: block;
    overflow:hidden
}


/*******************************************************************************************************************
 
 *******************************************************************************************************************/

                                                              
.login-form label                                           { display:block;
                                                              font-size:12px;
                                                              margin:15px 0 8px 0;
                                                              float:left;
                                                              clear:left;
                                                              text-transform:uppercase } 


.login-cbs                                    { padding-bottom:10px;
                                                        width:100%;   
                                                             
                                                            } 

                                                             
                                                                
.login-form input[type=text],
.login-form input[type=password]                                { width:100%;
                                                              height:38px;
                                                              padding:4px 8px; 
                                                              margin-bottom:10px;
                                                              border:1px solid #dee6e2 }
                                                            
.login-form input[type=text].req,
.login-form input[type=password].req                            { border-left:3px solid #3c90c4 }                                                                                          
                           
.login-form button                                          { margin:0 auto;
                                                              display:block }                                                              
                                                              
.login-form .invalid                                         {background-color:#ffdfdf}                                                              

.login-form .message                                         { color:#fff;
                                                               border:1px solid #B42A0E;
                                                               background-color:#6b1313;
                                                               padding:8px }



/*******************************************************************************************************************
 side panel area - spotlight display box
 *******************************************************************************************************************/


     .login-form { display:block;
                       margin:0;
                       padding:0 0 8px 0;
                       border-bottom:1px solid var(--gry2);
                       
                     }

    .login-form h2 {
        font-size: 1.5rem;
        color: var(--prim-blk);
        border-bottom:1px solid var(--gry2);
        margin: 0 0 12px 0;
        padding: 14px 0 14px 15px;
    }

    .login-form p {
        font-size: 1.2rem;
        margin: 0 13px 10px 13px;
        padding: 0;
        line-height: 1.499;
        display: block;
    }


     .login-form form { width:100%;
                            margin:20px 0}

   

/*******************************************************************************************************************
 
 *******************************************************************************************************************/










/*******************************************************************************************************************
 BUTTONS
 default size of btn is "medium" - additional sizes of small and large can be implemented by adding the extra
 btn style of "small" or "large"
 *******************************************************************************************************************/

.btn                                                        { cursor:pointer;
                                                              display:inline-block;
                                                              line-height:1.5;
                                                              text-transform:uppercase;
                                                              margin:10px 4px 10px 0;
                                                              padding:10px 30px;
                                                              border: 0;
                                                              background: none;
                                                              box-shadow: none;
                                                              border-radius: 0px;
                                                              outline: none }
                                                              
.btn:hover                                                  { -webkit-transition:0.20s ease all;
                                                              transition:0.20s ease all }
                                                                                                                   
                                                              
                                                              
/* blue background to light blue button */                                                                                                                                                                                           
.btn.b-gorm:hover                                           { background-color:#0090ca;
                                                              color:#fff }
/* orange background to light orange button */                                                                                                                                                                                           
.btn.b-orains:hover                                           { background-color:#ff990f;
                                                              color:#fff }                                                              

/* small */
.btn.beag                                                   { padding:10px 20px  }
       
/* large */       
.btn.mor                                                    { padding:10px 60px }


                                                                
/*******************************************************************************************************************
 ROUNDED CORNER
 cuinne = corner 
 *******************************************************************************************************************/

.cuinne                                                     { /* Safari 3-4, iOS 1-3.2, Android 1.6- */
                                                              -webkit-border-radius:3px; 

                                                              /* Firefox 1-3.6 */
                                                              -moz-border-radius:3px; 
  
                                                              /* Opera 10.5, IE 9, Safari 5, Chrome, 
                                                                 Firefox 4, iOS 4, Android 2.1+ */
                                                              border-radius:3px }




















/*******************************************************************************************************************
 footer
 *******************************************************************************************************************/
footer {
    clear: both;
    margin: 100px 0 0 0;
    padding: 0;
    box-shadow: 1px -1px 1px 0 rgba(206,206,206,.40);
    background-color: var(--gry);
    color: var( --gry2);
}

    footer .fore {
        min-height: 40px;
        padding:0;
        margin:0;
        background-color: var(--gry)
    }

 footer .base {
     margin:0;
    padding: 12px 0
}

    footer .base p {
        margin: 0;
        padding:0;
        font-size: 11px
    }


/*******************************************************************************************************************
 MEDIA QUERIES
 *******************************************************************************************************************/
/* if the screen display goes below 1230px width... */
@media only screen and (max-width:1230px) {
    .row {
        width: auto
    }

    /* Undo minimum width setting used for IE8
    Only browsers that understand media queries will implement this setting */
    body {

        min-width: 320px;
        width: auto
    }
}

@media only screen and (max-width:960px) 
{
 /*  */
    .page-side-bar,
    .page-content {
        width: 100%;
        float: none;
        border:0;
        padding:0;
    }

    
}


@media only screen and (max-width:730px) {

    /* change site-nav menu to a drop-down list and activate the #site-menu element */

    #site-menu {
        
        display: block;
        background: url('/_assets/img/ico-menu.png') no-repeat;
    }


    .site-nav {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        display: none
    }

        .site-nav ul {
            width: 100%;
            border-top: 1px solid #808080;
        }

        .site-nav li {
            border-bottom: 1px solid #808080;
            width: 100%;
            margin: 0;
            padding: 0
        }

            .site-nav li a {
                display: block;
                width: 100%;
                padding: 20px 25px;
                margin: 0;
            }


            .site-nav li:last-child {
                border-bottom: 0
            }
}



@media only screen and (max-width:530px) {
    
}