/************************************************************* 
BASE STYLES
**************************************************************/ 
html { overflow-y: scroll; scroll-behavior: smooth; }
html body{ width: 100%; height: 100%; margin:0;  padding: 0; overflow-x: hidden; color: #000; background: #fff; font: 1em/1.2 verdana, helvetica, arial, sans-serif; }
p { padding: 10px; word-wrap: break-word; text-align:justify;}
a { text-decoration:none; color:#000000;}    
footer { position: relative; bottom:0px; margin: 0 auto; height: auto; background-color: #39445C  ; /* blue #3D5998 brown #494949*/ width: 100%; color:#FFFFFF; }
footer ul{list-style-type: none;}
blockquote{ background-color: #F9FBFA;  padding: 15px; font-size:250%; font-style:italic;  }
div     { margin:0; padding:0;}

li      { color:#717171; font-size:14px; line-height:1.8; }
.banner{width: 100%; padding: 0px; margin: 0px; overflow-x: hidden;  margin-left:0px;  margin-top:0px;}
.bannertext{ top: 200px; left: 0;  width: 100%; }
.wrap {width: 80%;padding: 20px; margin: 0 auto; overflow: hidden; margin-top: 20px;}
.sectionname{width:100%; background-color: #F9FBFA; /*#F5F5F   #F9FBFA;  #dae7e1*/ height:150px; margin: 0 auto;}
.sectiontitle{margin-left: 20%; padding-top:60px; margin: 0 auto;}
.sectionimage{margin-left: 10%;}
.sectioncontent{width:100%; background-color: #F9FBFA; /*#F5F5F   #F9FBFA;  #dae7e1*/ margin: 0 auto;}
.breadcrumbs{width:100%; background-color:#F9FBFA; height:20px; margin-top:3%; text-indent: 5%; padding: 5px;}
.colshading{ background-color:  #e9f1ee; /* #f9fbfa  #eaf1ed;*/ height:100px; color:#000000;}
.clip{ list-style-image: url(images/clip.png);}
.working-border-collie{ list-style-image:url(images/working-border-collie-icon.png);}
.border-collie-show-dog{ list-style-image:url(images/border-collie-conformation-icon.png);}
.border-collie-research{ list-style-image:url(images/research-icon.png);}
.news{ list-style-image:url(images/news-icon.png);}
.history{ list-style-image:url(images/icon-history.png);}
.training{ list-style-image:url(images/icon-training.png);}
.responsible{ list-style-image: url(images/icon-responsible-dog-ownership.png);}
.saleyard{ list-style-image:url(images/icon-saleyards.png);}
.game{ list-style:url(images/icon-game.png);}
.quotes{ padding:20px 20px 20px 20px; color:#FFFFFF; }
.title{padding-top: 30px; }
.tribute{ font-size:9px; text-align:left;}
.listspace{ padding:5%;}
.eup{font-family: 'Euphoria Script', cursive; font-size:400%;}
/************************************************************* 
IMAGES
**************************************************************/ 
img {max-width: 100%; }
img.centered{ display: block; margin-left: auto; margin-right: auto; }
img.right{float:right;}
.icon {vertical-align:middle;}

/************************************************************* 
TEXT
**************************************************************/ 
.textwrapright { float:right; margin:10px; overflow: hidden;}
.textwrapleft { float: left; margin:10px; overflow: hidden; padding-right:10px;}
.textcentered {text-align: center;}
.textcentered {text-align: center;}
.textright {text-align: right;}
/************************************************************* 
SPACERS
**************************************************************/ 
.spacer-100 {height: 100px;width: 100%; clear: both;}
.spacer-50 {height: 50px;width: 100%; clear: both;}
.spacer-45 {height: 45px; width: 100%; clear: both;}
.spacer-35 {height: 35px; width: 100%; clear: both;}
.spacer-25 {height: 25px; width: 100%; clear: both;}
.spacer-15 {height: 15px; width: 100%; clear: both;}
.spacer-5 {height: 5px; width: 100%; clear: both;}
.spacer-1 {height: 1px; width: 100%; clear: both;}
/************************************************************* 
HEADERS 
**************************************************************/ 

h1 { font-size:160%; color:#3D3C3A; margin:0 0 0 0; }
h2 { font-size:150%; color:#3D3C3A; margin:0 0 0 0; }
h3 { font-size:140%; color:#3D3C3A; margin:0 0 0 0; }
h4 { font-size:130%; color:#3D3C3A;  margin:0 0 0 0; line-height:1.4;  letter-spacing:-2px;   }
h5 { font-size:120%; color:#3D3C3A;  margin:0 0 0 0;  letter-spacing:-2px; }
h6 { font-size:100%; color:#3D3C3A;  margin:0 0 0 0;  letter-spacing:-2px; }
/************************************************************* 
COLUMNS
**************************************************************/ 
.col10 { width: 10%; float: left;  }
.col20 { width: 20%; float: left;  }
.col25 { width: 25%; float: left;  }
.col30 { width: 30%; float: left;  }
.col33 {width: 33%; float: left; }
.col40 { width: 40%; float: left;  }
.col50 { width: 50%; float: left;  }
.col60 { width: 60%; float: left;  }
.col66 {width: 66%; float: left; }
.col70 { width: 70%; float: left;  }
.col75 {width: 75%; float: left; }
.col80 { width: 80%; float: left;  }
.col90 { width: 90%; float: left;  }
.col100 { width: 100%; float: left;  }
/************************************************************* 
HEADER NAV
**************************************************************/ 
header{ width:100%; height:auto; position:fixed; background-color:#fff; top: 0; z-index: 999; border-bottom:1px solid #CCC ; }
.container{ width:70%; margin-left:auto; margin-right:auto; }
div#logo a{   float: left; color:#000000; text-decoration:none;}
/************************************************************* 
MENU
**************************************************************/ 
nav ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; float:right; padding-top: 10px;}
nav li {display: inline;}
nav li a {/*display: block;*/ padding:10px;  color:#000000;}
nav li a:hover { background-color: #3D5998 ; /*#000*/ color: white; }
/*
nav ul{  float: right;  margin: 0;padding: 0;}
/*p { text-align: center; }*/
/*
 .toggle, [id^=drop] { display: none;}
nav:after {  content: "";  display: table;  clear: both;}
nav ul {  float: right;  padding: 0;  margin: 0;  list-style: none;  position: relative;}
nav ul li {  margin: 0px;  display: inline-block;  float: left;  background-color: #fff ;}
nav ul li a {  display: block;  padding: 17px 15px 16px;  color: #000;  text-decoration: none;}
nav ul li ul li:hover { background: #5B7157; }
nav a:hover { background-color: #5B7157; color: #fff;}
nav ul ul {  display: none;  position: absolute;  top: 52px;}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {  width: 190px;  float: none;  display: list-item;  position: relative;  background-color: #62905A ;  color: #fff;}
nav ul ul li a{color: #fff; padding:10px;}
nav ul ul ul li {  position: relative;  top: -52px;  left: 190px;}
.clearfix{clear: both;}*/
/******************tables start**********************/
.rTable    { display: table; }
		.rTableRow       { display: table-row; }
		.rTableHeading    { display: table-header-group; }
		.rTableBody    { display: table-row-group; }
		.rTableFoot    { display: table-footer-group; }
		.rTableCell, .rTableHead  { display: table-cell; }
/******************tables end**********************/		
/************************************************************* 
FOOTER
**************************************************************/
.footerlinks { color:#FFFFFF;}
.footertitles {color:#FFFFFF;}
/*.footerpadding { padding:15px;}*/
/************************************************************* 
SLIDER
**************************************************************/

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}


div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  height: 338px;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}



/************************************************************* 
PEDIGREE
**************************************************************/ 

#pedigree1m{ font-size:200%; text-align: center; color: #3A5795;} /****blue for male dogs**/
#pedigree1f{ font-size:200%; text-align: center;  color: #FF33FF;} /****Red or pink for female dogs #f6546a**/
#pedigree2m{ font-size:160%; text-align: center; color: #3A5795;} /****Blue for male dogs    #0066CC **/
#pedigree2f{ font-size:160%; text-align: center; color: #FF33FF;} /****pink for female dogs    #FF0000 **/
#pedigree3m{ font-size:120%; text-align: center; color:#3A5795;;}  /****blue for male dogs**/
#pedigree3f{ font-size:120%; text-align: center; color:#FF33FF;}  /****Red or pink for female dogs**/
#pedigree4{ font-size:120%; text-align: center; color: #009966;} 
#pedigree4m{ font-size:120%; text-align: center; color: #009966;} 
#pedigree4f{ font-size:120%; text-align: center; color: #666666;} 
#pedigreeinfo{text-align: center; font-size:100%; font-weight:bold;}
#pedigreetitle{ text-align: center;}
/*#sire{text-align:center; color:#FF0000}
#dam {text-align:center; color:#FF0000;}
#ggs{text-align:center; color:#FF0000}
#ggd{text-align:center; color:#FF0000;}*/

/****************************************************************
	CSSONLYGALLERYSTART
	****************************************************************/
div.gallery {border: 1px solid #ccc;}
div.gallery:hover {border: 1px solid #777;}
div.gallery img {width: 100%; height: auto;}
div.desc {padding: 15px; text-align: center;}
* {box-sizing: border-box;}
.responsive {padding: 0 6px; float: left; width: 24.99999%; }

/************************************************************* 
Google Box Start
**************************************************************/ 
.gsc-control-cse { font-family: Arial, sans-serif;  background-color: #39445C ; }


/************************************************************* 
Google Box StEnd
**************************************************************/ 
/*********DEBUG**********************************/
img:not([alt]),img[alt=""] {outline: 5px solid red;}


@media only screen and (max-width: 500px) {
.responsive {width: 100%;}}
.clearfix:after {content: ""; display: table; clear: both; }
div.gallery .lightBox {position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; visibility: hidden; background-color: rgba(0,0,0,0.8); text-align: center; }
div.gallery .lightBox img { position: fixed; width: auto; margin: 0; padding: 0; max-height: 90%; max-width: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%); }

        div.gallery a.lightBox_close,
        div.gallery a.lightBox_prev,
        div.gallery a.lightBox_next {
            position: fixed;
            text-decoration: none;
            visibility: hidden;
            color: #C7CCDA;
            font-size: 36px;
        }

        a.lightBox_close {
            top: 1%;
            right: 1%;
        }

            a.lightBox_close::after {
                content: '\00d7';
            }

        a.lightBox_prev,
        a.lightBox_next {
            top: 50%;
            transform: translate(0%, -50%);
        }

        a.lightBox_prev {
            left: 5%;
        }

        a.lightBox_next {
            right: 5%;
        }

        a:target > span.lightBox {
            visibility: visible;
            opacity: 1;
          /*  pointer-events: initial;*/
        }

        a:target ~ a.lightBox_close,
        a:target ~ a.lightBox_prev,
        a:target ~ a.lightBox_next {
            visibility: visible;
        }
		
/****************************************************************
	CSS ONLY GALLERY END
****************************************************************/


/************************************************************* 
MEDIA QUERIES
**************************************************************/ 
@media all and (max-width : 768px) {
.wrap{overflow: hidden; width: 95%;  }

.col10 { overflow: hidden; width: 100%; }
.col20 { overflow: hidden; width: 100%;  }
.col25 { overflow: hidden; width: 100%;  }
.col30 { overflow: hidden; width: 100%;  }
.col33 { overflow: hidden; width: 100%;  }
.col40 { overflow: hidden; width: 100%;  }
.col50 { overflow: hidden; width: 100%; }
.col60 { overflow: hidden; width: 100%; }
.col66 { overflow: hidden; width: 100%;  }
.col70 { overflow: hidden; width: 100%;  }
.col75 { overflow: hidden; width: 100%;  }
.col80 { overflow: hidden; width: 100%;  }
.col90 { overflow: hidden; width: 100%; }
.col100 { overflow: hidden; width: 100%; }
.breadcrumbs{margin-top:10%;}
p{margin-top: 1px; margin-bottom:1px;}
footer{ height:auto;}
header{ width:100%; height:auto;}
.container{ width:100%; margin-left:auto; margin-right:auto;}
nav ul { margin: 0; padding: 0; overflow: hidden;  }
.responsive {width: 49.99999%; margin: 6px 0;}
}        
/*
nav{-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);}
nav ,nav ul{ margin: 0; width: 100%;}
.toggle + a,.menu { display: none; }
.toggle {  display: block;    padding: 10px;    text-decoration: none;  border: none;}
.toggle-menu { 	background: #62905A url('images/menu-toggle-icon.png') 0 no-repeat; display: inline-block; float: right; height: 45px; width: 50px; padding: 0; margin: 3px;}
.toggle:hover { background-color: #5B7157; color: #fff; }
[id^=drop]:checked + ul { display: block; }

nav ul li {  display: block;  width: 100%;}
/*nav ul ul .toggle,*/
/*
nav ul ul a, nav ul li a { padding:10px; }
nav ul ul ul a { padding: 10px 30px; }
nav a:hover,nav ul ul ul a { background-color: #62905A; }
nav ul li ul li .toggle, nav ul ul a { background-color: #62905A; }
nav ul ul {  float: none;  position: static;  color: #ffffff;}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul li ul li:hover { background: #5B7157; color: #fff; }
nav a:hover { background-color: #5B7157; color: #fff;}
nav ul ul li {  display: block;  width: 100%;}
nav ul ul ul li { position: static;}}
*/

@media screen and (max-width: 600px) {
/*.wrap{width:95%;}*/
.banner{padding-top: 110px; }
.title{padding-top: 100px; }
.responsive {width: 100%;}
}

@media screen and (max-width: 480px) {
/*.wrap{width:95%;}*/
.banner{padding-top: 80px; }
.title{padding-top: 100px; }
.responsive {width: 100%;}
}


@media all and (max-width : 330px) {
	nav ul li {  /*display: block; */width: 100%; padding:10px;}
	.col80{width: 90%;  }
	.wrap{ padding:0 0 0 0;}
	.col50{width: 90%;  }
	.banner{padding-top: 80px; }
	.title{padding-top: 120px; }
	.bannercontent{padding-top: 10px; }
	.responsive {width: 100%;}
}
/*.300{ padding-top:50px;}*/
div[id='top'] {
	height: 500px;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100%;
}
div[id='top'] img { 
   /*min-width:100%;
  
	-moz-animation-duration: 275s;
	-webkit-animation-duration: 275s;
  
  -webkit-animation-name: slidein;
	-moz-animation-name: slidein;
	-ms-animation-name: slidein;
	-o-animation-name: slidein;
	animation-name: slidein;

	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;*/
}

/*
.burnstitle {
   position: absolute;
   top: 50%;
   left:20%;
  
   color:#FFFFFF;
   font-size: 300%;

}*/

/*@media screen and (max-width: 1800px) {}   
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 960px) {}
@media screen and (max-width: 768px) {}

@media screen and (max-width: 320px) {}*/

/************************************************************* 
PHONE NUMBERS
********************************
a[href^=tel] {  background-color: #f5f5f5;  background-image: linear-gradient(to bottom,#ffffff,#e6e6e6);  background-repeat: repeat-x;  border: 1px solid #cccccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  border-bottom-color: #b3b3b3;
  border-radius: 4px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #333;  display: block;  font-size: 125%;  font-style: normal;  line-height: 20px;  margin: 20px 0 0;  padding: 10px 20px;  text-align: center;
  text-decoration: none;  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); width: 15%;}
/**** puts an border around the buton
a[href^=tel] {
  border: 1px solid #ccc;
  border-radius: 5px;
  color: black;
  display: block;
  font-size: 125%;
  font-style: normal;
  margin-top: 20px;
  padding: 5px 10px;
  text-align:center;
  text-decoration: none;
}******************************/ 
/************************************************************* 
TEXT MESSAGE
************************
a[href^=sms] {  background-color: #f5f5f5;  background-image: linear-gradient(to bottom,#ffffff,#e6e6e6);  background-repeat: repeat-x;  border: 1px solid #cccccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  border-bottom-color: #b3b3b3;  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #333;  display: block;  font-size: 125%;  font-style: normal;  line-height: 20px;  margin: 20px 0 0;  padding: 10px 20px;  text-align: center;  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);}
/******
a[href^=sms] {
  border: 1px solid #ccc;
  border-radius: 5px;
  color: black;
  display: inline-block;
  font-style: normal;
  margin-top: 10px;
  padding: 3px 5px;
  text-decoration: none;
}
**************************************/