@import url('https://fonts.googleapis.com/css?family=PT+Sans');

@import url('https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao|Noto+Sans+JP|Staatliches&display=swap');

/*
   font-family: 'Staatliches', cursive;
   font-family: 'Liu Jian Mao Cao', cursive;
   font-family: 'Noto Sans JP', sans-serif;
*/





 /* wbc burgundy */
 /* black */
 /* light grey */
 /* darker grey */
 /* darkest grey */
 /* yella */




/* BASIC STYLES ===================================== */

body{
    background: #fff; /*  url( '' ) */
    background-repeat: no-repeat ;
    background-position:center top ;
    background-attachment: fixed;
    background-size: 100% auto;
    overflow-x: hidden;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body, p, td, div, span, nav {
font-family: 'PT Sans', sans-serif;
    font-size: 1em;
    color: #000; /*  dark_grey */
    line-height: 1.7em ;
    text-align: left ; 
    margin: 0 ; 
    padding: 0 ; 
}

p {
padding-top: 10px ; 
}

.wrap {
  width: 100% ;
  max-width: 100% ; 
  background-color: #fff;
  margin: 0 ; /* auto 0 auto ;  float middle */
  border: none ; /* 2px solid #e2e2e2;  */
  overflow: hidden ; 
}

.left {
    float: left;
    width: 300px; 
    /* border-right: 1px red solid ;  */
    height: 100% ; 
    padding-left: 25px ; 
}

.right{
    float: right;
    width: calc(100% - 300px );
/*    width: 75%;  */
/*    border-left: 1px gray solid ; */
   padding: 0 25px 10px 15px ;
/*   border-left: 1px #d1d1d1 solid ;  */
}

.one{
  float: left; 
  width: 100% ; 
  margin-top: 1px ; 
  padding: 5px ; 
}

.half{
  width: 50% ;
}

.third{
  width: 33% ;
}

.qtr{
  width: 24% ;
}

.threeqtr{
 width: 74% ;
}

.twothirds{
 width: 65% ;
}

.center{
  text-align: center ;
  margin: 0 auto; 
}

.textright{
  text-align: right ;
}

.bg_red{
  background-color: #000 ; 
}

.bold{
  font-weight: 900 ; 
}

.nopad{
  padding: 0 ; 
}

.padleft20px{
   padding-left: 20px ; 
}

.pad10px{
   padding: 10px ; 
}

.pad20px{
   padding: 20px ; 
}

.padright20px{
   padding-right: 20px ; 
}

.margright20px{
   margin-right: 20px ; 
}

.margleft20px{
   margin-left: 20px ; 
}

.nomarg{
  margin: 0 ; 
}

.home_footer{
padding: 20px 0 20px 0 ; 
text-align: center ; 
color: #fff ; 
font-size: 22px ; 

}

.services{
 color: #4f4f4f ;
 width: 80% ; 
 display: list-item ; 
 padding: 0px 0 5px 0 ; 
 margin: 5px 0 0 30px ;
 font-weight: normal ; 
 border-bottom: 1px solid #ececec ;
}

.testimonial{
 background-color: #4f4f4f ;
 color: #fff ;
 font-size: 1.4em ; 
 width: 30% ; 
 padding: 20px ; 
 margin-right: 20px ; 
}

.testimonial p{
 color: #fff ;
}

.home{ /* homepage squares for the main menu */
  width: 18% ;
  float: left ;
  font-size: 20px ; 
  text-transform: uppercase ;
  color: #000 ;
  background-color: #fff ; 
  text-align: center ;
  margin: 0 10px 0 0 ;

}

.home_div{
  margin: 0 0 0 5% ; 
}

.home img{
  width: 100% ;
}

img.photo_sm{
  width: 250px; 
  float: left; 
  margin: 0 10px 0 10px ; 
}

img.photo{
  width: 90%; 
  margin: 0 15px 0 5px ; 
}

img.prod_img{
width: 100% ; 
max-width:100% ; 
height: auto ;
}

.title2 a:link, .title2 a:visited{
font-size: 20px ; 
color: #640f24 ;
}

.fld{ /* field title */
   float: left; 
   width: 100px ; 
   padding-left: 20px ; 
   font-weight:bold;
}

/* for mouseover image swap */
.home_swap img:last-child{display:none}
.home_swap:hover img:first-child{display:none}
.home_swap:hover img:last-child{display:inline-block}

/* -------- */

.home a:link, .home a:visited {
  color: #000 ;
  text-decoration: none ;
}

.home a:hover {
  color: #640f24 ;
  text-decoration: none ;
}

.content{
  padding: 15px 15px 0 15px ; 
}

nav.mini-navigation {
  display: none ;
}

.pho {
  float: right;
  margin: 20px 35px 0 0 ; 
  border: none ; 
  width: 250px ;  

}

.pho a.eml:link, a.eml:link {
font-size: 18px ; 
font-weight: bold ; 

}

.pho a:link, .pho a:visited{
  font-size: 32px ; 
  color: #fff ; 
  text-decoration: none ; 
  
} 

.logo {
  float: left;
  position: absolute;
  left: 10px ; 
  top: 40px ;
  padding: 0 15px 0 0px ; 
  border: none ; 
  width: 450px ;  
}

.clr{
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0
}

.header{
    height: 280px ;
    width: 100% ; 
}

.footer {
  clear: both ; 
  min-height: 100px ; 
  background: #fff url( 'https://nelsonsbracing.com/uploads/images/layout/header.jpg' ) ;
  font-size: 12px ; 
  color: #dcdcdc ;
  padding: 0 20px 0 20px ; 
}

.header_btn{
  float: right ;
  margin: 0 10px 0 20px ;
  width: 200px ; 
  display: inline ;
}

.footer_btns{
  width: 100% ;
  margin: 0 ;
}

.tap,
input.tap, a.tap:link, a.tap:visited{
  display: block ;
  background-color: none ; /* #fff ; */
  line-height: 18px ;
  padding: 6px 10px 6px 5px ;
  margin: 10px 0 5px 0 ; 
  text-transform: uppercase ;
  text-align: center ;
  font-weight: bold ; 
  color: #000 ; 
  text-decoration: none ; 
  border: 2px solid #000 ;
}

.tap2,
input.tap2, a.tap2:link, a.tap2:visited{
  display: block ;
  width: 200px ; 
  background-color:  #000 ; 
  line-height: 18px ;
  padding: 3px 10px 3px 5px ;
  margin: 10px 0 5px 0 ; 
  text-transform: uppercase ;
  text-align: center ;
  font-weight: bold ; 
  color: #fff ; 
  text-decoration: none ; 
  border: 2px solid #8f8f8f ;
}

.tap3,
input.tap3, a.tap3:link, a.tap3:visited{
  display: block ;
  font-size: 20px ;
  background-color:  #fff ; 
  line-height: 10px ;
  padding: 2px 0 2px 0 ;
  margin: 0 0 20px 0 ;
  text-transform: uppercase ;
  text-align: center;
  font-weight: bold ; 
  color: #640f24 ;
  text-decoration: none ; 
  border: none ;
  width: auto ;
}

hr {
    border: solid #e9e9e9;
    border-width: 1px 0 0 0;
    clear: both;
    margin: 10px 0 5px 0;
    height: 0;
    padding: 5px 2px 5px 2px   ; 
}

.red_bar{
  width: 5% ;
  float: left ;
  margin: 75px 0 0 0 ;
  background-color: #640f24 ;
  height: 35px ;
}

.red_border{
  border: 3px solid #000 ;
  line-height: 15px ; 
  width: 45% ; 
  padding-top: 10px ;
}

.red_border p {
line-height: 15px ; 
}

.red{
background-color: red ; 
}

.posted_on{
font-size: 14px ; 
margin-bottom: 10px ; 
color: #640f24 ; 
font-weight: bold ;
}

.red_border ul{
margin: 5px 0 2px 0  ; 
}

.view_bg {
  height: 800px ; 
  background: none ; 
  width: 1px; 
  text-align: center ; 
}

.slide_testimonial{
margin-top: 30px ; 
}

a.slide_testimonial_link:link, a.slide_testimonial_link:visited {
  color: white ; 
  font-size: 25px ; 
  font-family: 'Dancing Script', cursive;
  font-weight: normal ;
  text-decoration: none ; 
}

.commentsparts_st_2{
  height: 320px ; 
}

.costs td{
  line-height: 16px;  
  border-collapse: collapse;
}

button.back{
background-color: white ; 
border: none ; 

}

/* links */
a:link, a:visited, a:hover {
  color: #640f24 ;
/* font-weight: bold ; */
  text-decoration:none ;
}

a:hover {
  color: #640f24 ;
text-decoration: underline ; 
}

a.btn:link, a.btn:visited {
    color: #fff;
    padding: 5px 10px;
    background-color: #640f24;
    text-decoration: none;
}

a.btn:hover {
  color: #fff;
  background-color: #000;
  text-decoration: none ;
  font-weight: bold ;
}

input.btn, input.fbsubmit {
  color: #fff;
  padding: 10px 15px ;
  margin: 1px 1px 0 9px ;
  background-color: #640f24;
  text-decoration: none ;
  border: 0 ;
  cursor:pointer;
}

a.side:link, a.side:visited {
    color: #000;
    padding: 5px 6px;
    text-decoration: none;
}

a.side:hover {
  color: #000;
  text-decoration: none ;
  font-weight: bold ;
}

/* headings */

h1,h2,h3,h4,h5 {
      font-family: 'Staatliches', cursive;
  line-height: 1.2em ;
}

h1 {
  font-size: 2.5em; 
  font-weight: normal; 
  text-transform: uppercase ; 
  margin-bottom: 0 ; 
  color: #640f24; 
}

h2{

  margin: 0 ;
    font-weight: 300;
    font-style: normal;
   font-family: 'Staatliches', cursive;  
  color: #640f24;
    font-size: 35px;
    line-height: 0.9;
    letter-spacing: 1px;
}

h3{
  color: #000 ;
  font-size: 1.3em; 
  margin-bottom: 3px ;
  margin-top: 4px ; 
  font-family: 'Noto Sans JP', sans-serif;

}

h4{
  color: #000;
  margin: 0 ;
  font-size: 1.5em; 
}

h5 {
  font-size: 1.5em; 
  color: #8f8f8f; /* darker grey */ 
  text-transform: uppercase ;
  text-align: center ;
}



/* FormBuilder CSS base */
form {
	margin-top: 0
}
form, td, th, li {
	font-size: 100%
}
form div {
	margin-bottom: 0
}
fieldset div {
	margin-bottom: 0.5em;
	margin-left: 1em;
}

textarea {
	margin: 0.5em 0;
	width: 98%;
	height: 6em
}

textarea.contact {
	margin: 0.5em 0;
	width: 250px ;
	height: 100px ;
}

/* Apply this class to text/select input fields with shorter labelsto help alignment */
.short-label label {
	float: left;
	width: 10em
}
.short-label fieldset div input, .short-label fieldset div select {
	width: 16em
}
/* Pretty up your Captcha image output */
.captcha {
	margin: 0.5em 0;
	width: 200px;
	text-align: center
}
.captcha img {
	border: 1px solid #b50000;
	margin-bottom: 0.5em
}
.captcha input {
	width: 196px;
	margin-top: 0.5em
}
/* Just a bit more room for the Submit button */
.submit {
	margin-top: 0.5em
}
.contactform input {
	border: 1px solid #c6e7ff;
}
.contactform input.checkbox {
	border: none;
}
.contactform label {
	display: block;
	float: left;
	width: 150px;
}
.contactform label.label {
	display: inline;
	float: none;
	width: 50px;
	font-size: 10px;
}
.contactform textarea {
	background-color: #fff;
	border: 1px solid #c6e7ff;
   width: 90% ;
   height: 200px ; 
}
.formbuilderform .message {
	line-height: 16px;
	padding: 0 0 8px 0;
}

.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 50%;
		margin-left: -400px;
		width: 680px;
		background: #eee url(modal-gloss.png) no-repeat -200px -80px;
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		box-shadow: 0 0 10px rgba(0,0,0,.4);
white-space: nowrap;
		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 42px;
		line-height: .5;
		position: absolute;
		top: 4px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 


  #chaticon {
    position: fixed;
    bottom: 0;
    right: 0;
  }

#appt input[type=text], #appt input[type=select] {
font-size: 25px ;

}

.q{
width: 200px ;
float: left ;
display: inline ; 
font-size: 20px ;

}

.appt select{
    font-size: 14px;
    padding: 5px;
    background: #5c5c5c;
}


.calday{
background-color: red ;
width: 100% ; 
height: 100% ;
border: 1px solid black ;

}

/* Stylesheet: Main Modified On 2022-12-13 22:48:50 */
