@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merienda:wght@300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body, html { font: 100% Lato, Roboto, Arial, sans-serif; color: #fff; background-color:#2d2113; margin: 0; padding: 0; text-align: center; line-height: 1.8; height: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight:bold; text-align:center; font-family: Merienda, Roboto, Lato, Arial, sans-serif; margin:10px 0 }
h1 {font-size:250%; color: #c93; text-shadow: 1px 1px 2px black; }
@media only screen and (max-width:640px) { h1 {font-size:175%; }}
h2 {font-size:165%; color:#c93; }
@media only screen and (max-width:640px) { h2 {font-size:130%; }}
h3 {font-size:145%; color: #c93;}
@media only screen and (max-width:640px) { h3 {font-size:120%; }}

p { font: 120% Lato, Roboto, sans-serif; color: #fff; text-align:left; }
@media only screen and (max-width:640px) { p {font-size:110%; }}

.logo-topleft{position:absolute;left:0;top:0 z-index=2}

img {max-width: 100%; height: auto; border:0; }
* {box-sizing: border-box;}
form {margin: 12px auto; padding:12px; border-radius:12px; border: 2px #000; background-color:#FFF; width:75%; color:#000; }
@media only screen and (max-width:640px) {form {float:none; width:100%; }}
iframe {max-width:100%;}

a, a:hover, a:visited, a:active {color:#ffcc66; }

#myNavbar {margin-left:216px}
@media only screen and (max-width:640px) { #myNavbar {margin-left:0px; padding-left:8px;} }

.imgpad-ctr {vertical-align:middle; padding:0 4px 4px 12px; }
.caption {text-align:center; color:#c93; font-weight:bold; font-style:italic; }
.flt_lft50 {float:left; width:49.9%; padding:8px;}
@media only screen and (max-width:640px) { .flt_lft50 {float:none; width:100%; border-bottom:2px #c93 inset; text-align:center; } }
.flt_rt50 {float:right; width:49.9%; padding:8px;}
@media only screen and (max-width:640px) { .flt_rt50 {float:none; width:100%; border-bottom:2px #c93 inset; text-align:center; } }
.bg-dkbrn {background-color:#2d2113; color:#fff; }
.bg-medbrn {background-color:#493415; }
.clr {clear:both; }
.notop-mar {margin-top:0;!important line-spacing:1em; padding:0;!important }
.ftr {width:100%;!important margin:0; padding:0; }
.brdr-img {border:3px solid #fc6;!important}
.float-lft {float:left; padding-right:8px; }


/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('/images/Cat-track-bg-3.jpg');
  min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("/images/Cat-track-bg-7.jpg");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("/images/Cat-track-bg-21.jpg");
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 800px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}