/* Contains, Body, Containers, NavBar Main and Side Navbar, Footer Image swap, Scroll to Top -*/
 
 /* Body of the Page ----------START-- GLOBAL--------*/
 
 

@charset "UTF-8";

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

body, html {
font-family: "Roboto", sans-serif;
  margin: 0;
  /* Main Page Image ----------START---padding:5px;--------*/
width: 100%; height: 100%;
  z-index: 40;
  }





@font-face{
  font-family: "material-design";
  src: url("../fonts/material-design.eot");
  src: url("../fonts/material-design.eot#iefix") format("embedded-opentype"), url("../fonts/material-design.woff") format("woff"), url("../fonts/material-design.ttf") format("truetype"), url("../fonts/material-design.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

.material-design-ico,
[class^="material-design-"]:before, [class*=" material-design-"]:before,
[class^="material-design-"]:after, [class*=" material-design-"]:after
{
    font-family: "material-design";
    font-size: inherit;
    font-weight: 400;
    font-style: normal;
}


 
 
/* Global Container for content*/
.container {
  display: flex;      /* Make the container a flexbox */
  flex-wrap: nowrap; 
  justify-content: center;
  max-width:1100px;
  overflow: hidden;
  margin:auto;
  margin-top:100px;
align-items: center;
  padding-right:20px;
  padding-left:30px;
}

   
 
/* Fluid container*/
 .container-fluid {
   margin:auto;
  overflow: hidden;
   max-width:1190px;
}








/* Main NAV Menu---------------------------------------------------------------------*/


#navbar-main {
  position: fixed;
  top: 0;
  width:100%;
  overflow: hidden;
  background-color:  #257acc;
  height:105px;
  box-shadow: 1px 1px 1px  #1e7fdd;
  padding-top:10px;
  padding-bottom:22px; 
    z-index: 1; /* makes it ovelap the footer on Mobile phone*/
}


/* navbar-main for mobiles  */
@media screen and (max-width: 575px) {
#navbar-main {
height:60px !important;
 }}


/* Main NAV Menu for the Logo*/
#navbar-main a {
float: left !important;/* Float the logo left*/
padding:15px;/* Padding around the logo*/
}

/* Main NAV Menu  Text size, style and colour */
#navbar-main-text a {
font-family: "Roboto", sans-serif;
float: right !important;
font-size: 18px;
font-weight: 200;
color: #FFFFFF;
display: block;
opacity: 1.2;
text-align: center;
text-decoration: none;
padding:15px;/* Space between the words*/
margin-top:14px;  /* Controls the space from the top for the row of text. not the logo*/
}





/* Main NAV Menu  the colour when hoverover the links*/
#navbar-main a:hover {
color: #dd951e ;
}

/* Main NAV Menu The orange colour when on the visited Page - Auto */
#navbar-main a.active {
 color: #dd951e;
}

/* Main NAV Menu  The orange colour when on the visited Page - Manual add to <a class */
.active {
 color: #dd951e;
}




.navbar-brand-logo {
    background-repeat: no-repeat;
    background-image: url("../images/brand-header.png");
    height: 51px;
    width: 229px;
    float:left;
    margin-top:15px;
    margin-left:15px;
    }
     
    
    
    
/*Brand Logo for mobiles- shrink size using animation*/
@media screen and (max-width: 575px) {
.navbar-brand-logo {
 -webkit-transform: scale(0.9);
transform: scale(0.9);
margin-left:11px; /* Center the Logo for mobiles*/
margin-top:-8px;
        
}}

 
/* Login icon in the menu -*/

   loginicon:before { 
   position:relative;
    font-family: "material-design";
   content: '\e18b';
    color: #FFFFFF;
   font-weight: bold;
    top:0px;
   letter-spacing: 1px;
    font-size: 18px;
    }




 /* Main NAV Bar END ------------------------------------------------------------*/

 












  
/* SIDE NAV -----------------------------------------------------------------------*/


.side-nav {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */  
  height: 100%;
  width: 0;
  position: fixed;/* Stay in place */
  z-index: 1;/* Sit on top */
  margin-top:107px;
  left: 0;
  background-color:  #257acc;
  overflow-x: hidden;  /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}




/* Position the content inside the overlay */
.side-nav-content {
  position: relative;
  top: 1%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 20px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  margin-left:20px;
  
}


/* The navigation links inside the overlay */
.side-nav a {
 font-family: "Roboto", sans-serif
font-weight: 200;
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 100;
  max-width: 1200px;
  text-align: left;
  color: #FFFFFF;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}




/* When you mouse over the navigation links, change their color */
.side-nav a:hover, .overlay a:focus {
 background-color: #dd951e;;
}

/* Position the close button (top right corner) */
.side-nav .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}


/* Main NAV Menu  The orange colour when on the visited Page - Manual add to <a class */
.side-nav .active {
 color: #dd951e;
}

/* When the height of the screen mobile size */
@media screen and (max-width: 540px) {
  .side-nav a {font-size: 20px}
  .side-nav  {

  margin-top:60px !important;
  }
}
  
 /* The white band on the SIDE Nav to block the background */
.white-band-blocker {
background-color:white;
height:30px;
}




  /* Side Nav Button -*/

.image-swap-container {
  width: 40px;
  height: 40px;
  overflow: hidden;
   margin-top:13px;
   cursor: pointer; 
   float:right;
}
/* Imageswap for mobiles is in Javascript */




  /* Mobile menu icon-*/
.image-swap:before {
   font-family: "FontAwesome";
   content: "\f0c9";
   display: inline-block;
   font-weight:100;
   font-size:1.7rem;
   color:#ffffff;
   padding:5px;
   transform: none;
 transition: transform  0.15s  ease-in, background-image  0.15s;
}



  /* Arrow Down Icon-*/
.image-swap.arrow:before {
   font-family: "FontAwesome";
   content: "\f063 ";
   display: inline-block;
   font-weight:100;
   font-size:1.7rem;
   color:#ffffff;
   padding:5px;
  transform: rotateZ(90deg);
}





  
/* SIDE NAV END---------------------------------------------------------------*/






/* Footer---------------------------------------------------------------------*/




#footer { 
position: relative;
background-color: #0D365D; 
width:100%;
height:13.5%;
padding-top:5px;
padding-bottom:15px;
display: block;
text-align: center;
overflow: hidden;

} 



/* Main NAV Menu  Text size, style and colour */
#footer  a {
font-family: "Roboto", sans-serif;
font-weight: 100;
float: left;
font-size: 18px;
line-height:1px;
color: #ffffff;
display: block;
opacity: 1.2;
text-align: center;
text-decoration: none;
padding:30px;/* Space between the words*/

}


 


/* Main NAV Menu  the colour when hoverover the links*/
#footer a:hover {
color: #dd951e ;
}

/* Main NAV Menu The orange colour when on the visited Page - Auto */
#footer a.active {
 color: #dd951e;
}



/* Company Logo thats is on the Main Nav Bar*/



.footer-brand-logo {
    background-repeat: no-repeat;
    background-image: url("../images/brand-footer.png");
    height: 51px;
    width: 229px;
    margin-top:40px;
  
    }





/* Part of the Menu resize. Pushe paypal Column onto another row*/
@media screen and (min-width: 400px) and (max-width: 820px){
.wideme {
  width:100%;
 
  }}
  
  
  




/* The meunu links DIV container in the footer*/
.footer-menu-links {
 position: relative; 
 margin-top:10px;
 margin-bottom:20px;
}


/* Need to spec the column as required*/
.col-xs-1 {
display:block;
white-space: nowrap;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
}
  
  
  


  
  /*Services*/   
.twitter-icon:before {
   font-family: "FontAwesome";
   content: "\f099";
   display: inline-block;
   font-weight:500;
   font-size:2.7rem;
   color:#1762aa;
   position: relative;
    padding:5px; 
    margin-right:5px;
    margin-left:75px;   
  
}



    
   .instagram-icon:before {
   font-family: "FontAwesome";
   content: "\f16d";
   display: inline-block;
   font-weight:500;
    font-size:2.7rem;
    color:#1762aa;
     position: relative;  
    padding:5px;
    margin-right:10px;

} 
  
  
  
  
.facebook-icon:before {
   font-family: "FontAwesome";
   content: "\f230";
   display: inline-block;
   font-weight:500;
   font-size:2.7rem;
   color:#1762aa;
    position: relative; 
     padding:5px;
    margin-right:130px;
}




    
.twitter-icon-text {
position: relative; 
text-align:center;
color:#1762aa;
right:-27px;
top:25px;
}


    
.instagram-icon-text {
position: relative; 
text-align:center;
color:#1762aa;
right:8px;
top:25px;
}


    
.facebook-icon-text {
position: relative; 
text-align:center;
color:#1762aa;
right:70px;
top:25px;
}

  

    
.facebook-div {
display: inline-block;
position: relative; 
cursor: pointer;
padding:5px;
}

.instagram-div {
display: inline-block;
position: relative; 
cursor: pointer;
padding:5px;
}


.twitter-div {
display: inline-block;
position: relative; 
cursor: pointer;
padding:5px;


}



/* social media Section*/
#socialmedia {
position: relative;  
left:30px;
}






/* The Copyright and Terms and privacy, cookies text*/
#tandcs {
font-family: "Roboto", sans-serif;
font-weight: 100;
position: relative; 
font-size: 15px;
top:115px;
padding-left:32px  !important;

}



.rights-reserved-text {
position:relative;
font-size: 15px !important;
margin-bottom:0px  !important;
color:#0b79e3  !important;
opacity: 0.7  !important;


}
 
.terms-text {
position:relative;
font-size: 15px !important;
opacity: 0.7  !important;
color:#49a792 !important;
opacity: 0.7  !important;
padding-top:15px !important;
padding-left:0px !important;
padding-right:6px !important;


}

.privacy-text {
position:relative;
font-size: 15px  !important;
opacity: 0.7  !important;
color:#49a792  !important;
opacity: 0.7  !important;
padding:0px  !important;
margin-top:15px  !important;
padding-right:6px !important;


}

.cookies-text {
position:relative;
font-size: 15px  !important;
opacity: 0.7  !important;
color:#49a792  !important;
opacity: 0.7  !important;
padding:0px  !important;
margin-top:15px  !important;
padding-right:6px !important;


}



/* For Footer break point centers text links see Java  */
.terms-privacy-cookies {
width: 350px; 
margin: 0 auto; 
padding-left:25px;
}


/* For Footer break point centers text links see Java for Mobile phones */
@media screen and (max-width: 400px) {
.terms-privacy-cookies {
 margin-left:-11px !important;
  }}
 



/* Footer End ------------------------------------------------------------------*/



/* Scroll to Top ---------------------------------------------------------------*/

.scroll-totop {
    width: 90px;
    height: 90px;
    font-size: 24px;
    line-height: 46px;
    color: #1e7fdd;
    background-color: #FFFFFF;
    border-radius: 50%;
    position: fixed;
    right: 39px;
    bottom: 189px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    z-index: 20;
    transition: .3s all ease;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
}





/* Removes the scroll-totop  for Mobile phones */
@media screen and (max-width: 500px) {
.scroll-totop {
   display: none !important;
  }}


.scroll-totop:hover {
    color: #FFF;
    background: #dd951e;
    text-decoration: none;
}

.scroll-totop.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


/* Arrow icon*/
.scroll-arrow:before
{
    content: "\e088";
    font-family: "material-design";
    font-size: 60px;
    line-height: 90px;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: rotate(-90deg) translate(0%, 0%);
    transform: rotate(-90deg) translate(0%, 0%);
}





/* Scroll to Top End---------------------------------------------------------------*/