/* ifcCSS.css created by ifc_developer 050318 */
/* CSS rules for rudgwickcars.co.uk */
/* last update = 1242 080621 */

/* IMPORTANT NOTES 
TYPOGRAPHY
1. collect ALL required Google fonts then generate @import url code & copy / paste at the top of this file
2. scroll down to 'font styles' & insert font family in css. text classes as required
3. include the predominant font family in 'html' tag

COLORS
4. set preferred black and white shades in 'fontBlack' & 'fontWhite' respectively
5. set the dominant website colour in fontBrand1 + follow up colors fontBrand2 / fontBrand3
  
OTHER
inclusion of the 'fadeIn' class in the body tag creates a fade in of the whole page in 0.4 seconds
the 'cleanLink' class is cross-browser designed to remove any outline highlighting on clicked items 
*/

/* ============= start of file ============= */

/* set @import URL */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Playfair+Display:wght@400;500;600&display=swap');

/* ============= website-specific classes ============= */

.bookImg {
    margin-top: -0.5rem;
    max-width: 7.5rem;
}

.bookImg:hover { background-image: image() }

p#connectList { line-height: 2rem;}

.docLink {
    color: #000000;
    text-decoration: none !important;    
}

.docLink:active:focus { outline: none !important;} ::-moz-focus-inner {border: 0 !important;}
   
.docLink:hover {
    color: #82F2A2 !important;
    text-decoration: none !important;
}

#intro .card {
    background: rgba(212, 243, 221, 1);
    border: none;
    margin-bottom: 0.5rem;
}

.jumboLink {
    color: #FFFFFB;    
}

.jumboLink:hover {
    color: rgb(212, 243, 221);    
}

.jumbotron {
    background-color: #343a40;
    background: url("../media/hero_RWC.jpg") no-repeat center center;
    background-size: cover;
    height: 70rem;
    margin-bottom: .5rem !important;
    margin-top: 8rem;
    position: relative;
}

.navLogo { 
    height: auto;
    margin-top: 0.5rem;
    width: 15.5rem;
}

.navTitle {
    color: #343A40 !important;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 2.5rem;
    margin-left: 2rem;
}

.navTitleSmall {
    color: #343A40 !important;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5rem;
    margin-left: 2rem;
}

.navTitle:hover { text-decoration: none;}

.topBuffer { height: 5rem;}



/* ============= Bootstrap 4 adjustments ============= */

navbar-brand { margin-left: 2rem !important;}


/* ============= Masonry classes ============= 

// Within style tags in your html file
* { box-sizing: border-box; }

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 50%;
}
@media (max-width: 575px) {
  .grid-sizer,
  .grid-item {
    width: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .grid-sizer,
  .grid-item {
    width: 50%;
  }
}

/* To change the amount of columns on larger devices, uncomment the code below 

@media (min-width: 768px) and (max-width: 991px) {
  .grid-sizer,
  .grid-item {
    width: 50%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .grid-sizer,
  .grid-item {
    width: 33.3%;
  }
}
@media (min-width: 1200px) {
  .grid-sizer,
  .grid-item {
    width: 33.3%;
  }
} 

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

/* ============= generic classes ============= */

a { border:none; outline:none; text-decoration: none;}

a :focus {outline:none;} ::-moz-focus-inner {border:0;}

.blackBack { 
	background: rgba(0,0,0,0.75);
	padding: 1rem;
}

body {
    background: #F8F9FA;
    margin: 0 0 5rem;
    /* bottom = footer height */
}

.center { text-align: center;}

.cleanLink { text-decoration: none !important;}

.cleanLink:active:focus { outline: none !important;} ::-moz-focus-inner {border: 0 !important;}
   
.cleanLink:hover { text-decoration: none !important;}

.fadeIn { -webkit-animation:fadein 0.4s; animation:fadein 0.4s}

@-webkit-keyframes fadein { from {opacity:0} to {opacity:1}}

@keyframes fadein { from {opacity:0} to {opacity:1}}

footer {
    background: #343A40;
    bottom: 0;
    height: 5rem;
    line-height: 2.5rem;
    overflow: hidden;
    position: absolute;
	text-align: center;
    width: 100%;
}

.horizBuffer { height: 0.5rem;}

.horizBuffer1 { height: 1rem;}

.horizBuffer2 { height: 2rem;}

.horizBuffer5 { height: 5rem;}

.hr50 { width: 50%;}

.hr75 { 
    border: .1rem solid #FFFFFB;
    border-radius: .1rem;
    margin: 0.5 auto;
    transform: translateX(19%);
    width: 75%;
}

.hr100 { width: 100%;}

html {
    position: relative;
    min-height: 100%;
}

img { 
	border: none;
	max-width: 100%;
	outline: none;
}

img :focus {outline:none;} ::-moz-focus-inner {border:0;}

.justify { text-align: justify;}
 
.left { text-align: left;}

.right { text-align: right;}

.topBuffer { margin-top: 5rem;}



/* ============= font styles ============= */

.blackLine {
    text-shadow:
    -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}

/*  insert colour as required
    .colorLine {
    text-shadow:
    -1px -1px 0 #HEXCOLOR, 1px -1px 0 #HEXCOLOR, -1px 1px 0 #HEXCOLOR, 1px 1px 0 #HEXCOLOR;
} */

.fontBlack { color: #343A40;}

/* fontBrand classes created to accept main colours of website livery */

.fontBrand1 { color: rgb(212, 243, 221);}

.fontBrand2 { color: #;}

.fontWhite { color: #FFFFFB;}

.fontType1 { font-family: 'Playfair', serif;}

/* insert font family as required
.fontType2 { font-family: 'name', style;}
*/

.fontOpenSans { font-family: 'Open Sans', sans-serif;}

.smallText {
    font-size: .8rem;
    font-variant: small-caps; 
    font-weight: 400;
}

.subTitle {
    font-size: 1.5rem;
    font-weight: 500;
}

.text {
    font-size: .9rem;
    font-weight: 400;    
}

.textHeavy {
    font-size: 1rem;
    font-weight: 500;    
}

.title {
    font-size: 2rem;
    font-weight: 500;
}

.whiteLine {
    text-shadow:
    -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
}


/* ============= end of file ============== */