body {background:#fff; font-family: 'Open Sans', sans-serif;
background-size:cover;}

.tshadow { text-shadow:#777 2px 2px 4px;}


.lblue { background:#212a63; }
.header { background: rgb(221,241,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(221,241,249,1) 0%, rgba(254,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(221,241,249,1) 0%,rgba(254,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(221,241,249,1) 0%,rgba(254,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddf1f9', endColorstr='#feffff',GradientType=0 );
color:#035836;
border-top:4px solid #781114;
    padding-top:5px; padding-bottom:6px;
}
.title { color:#fff; font-size:1.9em; margin-top:20px; font-weight:bold;  text-align:center; font-family: 'Krona One', sans-serif;}
.address { color:#56192c;  text-align:right; }
.phone { font-weight:bold; color:#56192c; font-family: 'Krona One', sans-serif; text-align:center;}
.slogan { background:#000; color:#fff; padding:4px; text-align:center; font-size:1.4em; font-family: 'Krona One', sans-serif; }
.topslogan { background:#000; color:#fff; padding:4px; margin-bottom:6px; text-align:center; font-size:1.2em; font-family: 'Krona One', sans-serif; border-radius:14px; }


.white-bg { background:#fff; padding:40px 0px 60px 0px;}
.navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='2 1 29 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } 

.navbar-toggler { background:#3c0608; padding-left:9px;}

.btn-home{color:#ffffff;background-color:#303030; padding:4px 26px 12px 26px; font-size:1.2em; border-radius:2px; font-weight:bold;   }
.btn-home:focus,.btn-home:hover{color:#ffffff;background-color:#58708a; }
.btn-home.active{color:#fff;background-color:#58708a;}
.navbarback {background:#bf2026; padding:0px; }
.dropdown-menu { background:#a3e5ff;}
@media (max-width:575.98px){.nav-link{ text-align:left; font-size:1em; font-weight:normal;   color:#fff; width:100%;}
.nav-item{ margin-top:0px; padding-left:10px; padding-right:10px;} .full { display:block;} 
.nav-item dropdown {margin-top:0px; padding-left:10px; padding-right:10px; width:100%;}
.nav-link dropdown-toggle {margin-top:0px; padding-left:10px; padding-right:10px; width:100%;}
.title {  margin-top:20px;}
.hours { color:#fff; font-size:1.1em; text-align:center; margin:15px 2px 15px 2px; }
.phone {  margin:10px 2px 4px 2px; font-size:1.2em;}
.address { margin:6px 2px 10px 2px; font-size:.9em;  text-align:center; }
.slogan { text-align:center; }
#btn {  font-size:1.2em;} 
.homeback { background:url(../images/TD-Ducts-Fleet.jpg) top center fixed;}
.headsec { float:none; width:100%;}
}
@media (min-width:576px){ .nav-link{display:block;padding:4px 1px;  font-weight:normal; text-align:left; font-size:1em;   color:#fff; }
.nav-item{ margin-top:0px; padding-left:0px; padding-right:0px; line-height:1.1em;}
.full { display:none;}
#btn {  font-size:.9em;}
.address { margin:6px 2px 10px 2px; font-size:.9em; text-align:center;}
.phone { font-size:1.3em; margin:10px 2px 10px 2px; font-size:1.2em; }
.homeback { background:url(../images/TD-Ducts-Fleet.jpg) top center fixed;}
.headsec { float:none; width:100%;}}
@media (min-width:740px){ .nav-link{display:block;padding:5px 1px;  text-align:left; font-weight:normal; font-size:1em;   color:#fff; }
.nav-item{ margin-top:0px; padding-left:0px; padding-right:0px; line-height:1.1em;}
.full { display:none;}
#btn {  font-size:1em;}
.phone { font-size:1.2em; margin:10px 2px 10px 2px; }
.address { margin:6px 2px 10px 2px; font-size:1.2em; text-align:right;}
.homeback { background:url(../images/TD-Ducts-Fleet.jpg) top center fixed;}
.headsec { float:left; width:50%;}
}

@media (min-width:992px){.nav-link{display:block;padding:8px 2px; font-size:.7em; text-align:center;  }
.nav-item{ margin-top:0px; padding-left:2px; padding-right:2px; line-height:1.1em;}
.full { display:block;}
#btn {  font-size:1.2em;}
.address { margin:6px 2px 10px 2px; font-size:1.3em; text-align:right; }
.phone { font-size:1.4em; margin:10px 2px 10px 2px; }
.homeback { background:url(../images/TD-Ducts-Fleet.jpg) top center fixed;}
.headsec { float:left; width:50%;}
}
@media (min-width:1200px){.nav-link{display:block;padding:10px 2px;   text-align:center;  color:#fff;  font-size:1em; }
.nav-item{ margin-top:0px; padding-left:15px; padding-right:15px; line-height:.9em;}
.full { display:block;}
#btn {  font-size:1.2em;}
.phone {  font-size:1.6em; margin:14px 2px 10px 2px; }
.address { margin:6px 2px 10px 2px; font-size:1.3em;  text-align:right;}
.homeback { background:url(../images/TD-Ducts-Fleet.jpg) top center fixed;}
.headsec { float:left; width:50%;}
}
   
   
.nav-link:focus,.nav-link:hover,.nav-link:visited{text-decoration:none; color:#fff; background-color:#741012; }
.nav-link:link{color:#fff; }


.navbar navbar-expand-sm { padding:0px; margin:0px; }
.navbar .navbar-nav {
        float: none;     
    }

.ncontainer {width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
 .gbm{ margin-left:20px;}
@media (min-width:576px){.ncontainer {max-width:99%} .gbm{ margin-left:0px;}}
@media (min-width:768px){.ncontainer {max-width:99%} .gbm{ margin-left:0px;}}
@media (min-width:992px){.ncontainer {width:99%;} .gbm{ margin-left:10px;}}
@media (min-width:1200px){.ncontainer {max-width:1140px} .gbm{ margin-left:80px;}}

a:link {
	text-decoration: none;
	color:#001349;
}
a:visited {
	text-decoration: none;
		color:#001349;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration:none;
}


a.hl:link {
	color: #111111;
	font-weight:normal;
}
a.hl:visited {
	color: #111111;
}
a.hl:hover {
	color: #2f0613;
}
a.hl:active {
	color: #2f0613;
}


.textColor {color:#F00;}


.price { font-size:1.8em; font-weight:bold; color:#b2102b;  font-family: 'Russo One', sans-serif;}
.coupon {
	border:2px #e21f26 dashed;
	background:#fff;
	padding:20px;
	border-radius:16px;
	text-align:center;
	margin:20px;
	}
.ch { min-height:200px;}	
	





	
.fullw {
	width:100%;
	}
	
	
	
.fullw {
  transition: transform .2s; /* Animation */
  }

/* 
.fullw:hover {
  transform: scale(1.05); (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) 
}	*/
.nopad {margin:0px; padding:0px;}		


.card-title { background:#000; opacity:.7; text-align:center; padding:8px; margin-top:20%; }
@media (max-width:575.98px){.card-title { font-size:2.2em; }}
@media (min-width:576px){.card-title { font-size:1.2em; }}
@media (min-width:768px){.card-title { font-size:1.5em; }}
@media (min-width:992px){.card-title { font-size:2em; }}
@media (min-width:1200px){.card-title { font-size:2.8em; }}



.blackb { background:#111111;
color:#fff;}




.hb{color:#445274;background-color:#f9e84d; padding:10px 14px 12px 14px; margin:10px; font-size:1.2em;   }
.hb:focus,.hb:hover{color:#fff;background-color:#f9c400; }
.hb.active{color:#fff;background-color:#f9c400; border-color:#f9e84d;}

p { font-size:1.1em;}

hr {border-top: 1px solid #3e7160;}
.bg-success { background:#015836;}

h1 { color:#741012; font-size:2.4em;font-family: 'Krona One', sans-serif; }
h2 { color:#212a63; font-size:2.1em; font-family: 'Krona One', sans-serif; }
h3 { color:#444444; font-size:1.6em; font-family: 'Krona One', sans-serif;}
h4 { 
	color:#222222;
	font-weight:normal;
	font-size:1.4em;
	margin-bottom:0px;}
h5 { 
	color:#222;

	font-weight:normal;
	font-size:1.4em;
	margin-bottom:0px;}

.bar { background:#cae987; height:6px; width:80%; alignment-adjust:middle; margin:20px 0px;}

.grey {
	color:#1f1b1c;
	font-weight:normal;
	font-size:.8em;
	background:#ebebeb;
	padding:8px 12px;
	margin-top:0px;}

.fb {background:#999999;}
#footer { 
background:#212a63;
padding:40px 0px 6px 0px;
color:#fff;
text-align:center;}


#footer a:link, #footer a:visited, #footer a:active {
	color:#eee;
	
	text-decoration:none;
}
#footer a:hover {
	color:#ccc;
}
#cwr {
	margin:0 auto;
	background-color:none;
	color:#ccc;
	background:#111;
	text-align:center;
	font-size:.7em;
}


.tint {
  position: relative;
  float: left;
  cursor: pointer;
  text-decoration:none;
  margin-bottom:14px;
  padding:10px;
  box-shadow:#52aaea 1px 2px 4px 1px;
   border-radius:6px;
   background:#8dcee5;
}

.tint:hover:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius:6px;
  background: rgba(0,58,171, 0.4);
   -moz-transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
   text-decoration:none;
}

.tint:before {
	 -moz-transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
  background: none;
}

ul { list-style:url(../images/ul.png); font-weight:bold; color:#222; font-size:1.2em; line-height:1.4em;}
.whul { list-style:url(../images/uls.png); font-size:1em; line-height:1.4em;}
.smul { list-style:url(../images/ul.png); font-size:1.1em; line-height:1.4em;}
.rbox{
	padding:10px;
}
	
.hspace {height:180px; background:url(../images/roadlines.jpg) repeat-x;}

.shortspace { height:100px; background:url(../images/roadlines-sm.jpg) repeat-x;}	




#btn {
  background: rgb(142,21,61); /* Old browsers */
background: -moz-linear-gradient(top, rgba(142,21,61,1) 0%, rgba(109,17,40,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(142,21,61,1) 0%,rgba(109,17,40,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(142,21,61,1) 0%,rgba(109,17,40,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e153d', endColorstr='#6d1128',GradientType=0 );
  -webkit-border-radius: 20;
  -moz-border-radius: 20;
  border-radius: 10px;
  text-shadow: 1px 1px 1px #000000;
  color: #ffffff;
  font-size: 18px;
  font-weight:bold;
  margin:5px;
  padding: 8px 18px 8px 18px;
  border-bottom:4px solid #999;
  text-align:center;
  text-decoration: none;
  font-family: 'Krona One', sans-serif;
}

#btn:hover {
  background: rgb(160,53,126); /* Old browsers */
background: -moz-linear-gradient(top, rgba(109,17,40,1) 0%, rgba(142,21,61,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(109,17,40,1) 0%,rgba(142,21,61,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(109,17,40,1) 0%,rgba(142,21,61,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d1128', endColorstr='#8e153d',GradientType=0 );
  text-decoration: none;
    text-shadow: -1px -1px 1px #000000;

}



#btnh {
  background: rgb(142,21,61); /* Old browsers */
background: -moz-linear-gradient(top, rgba(142,21,61,1) 0%, rgba(109,17,40,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(142,21,61,1) 0%,rgba(109,17,40,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(142,21,61,1) 0%,rgba(109,17,40,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e153d', endColorstr='#6d1128',GradientType=0 );
  -webkit-border-radius:20;
  -moz-border-radius:20;
  border-radius: 10px;
  text-shadow: 1px 1px 1px #000000;
  color: #ffffff;
  font-size:1.1em;
  font-weight:bold;
  margin:25px 5px 5px 5px;
  padding: 4px 12px 10px 12px;
  border-bottom:4px solid #999;
  text-align:center;
  text-decoration: none;
}

#btnh:hover {
  background: rgb(160,53,126); /* Old browsers */
background: -moz-linear-gradient(top, rgba(109,17,40,1) 0%, rgba(142,21,61,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(109,17,40,1) 0%,rgba(142,21,61,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(109,17,40,1) 0%,rgba(142,21,61,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d1128', endColorstr='#8e153d',GradientType=0 );
  text-decoration: none;
    text-shadow: -1px -1px 1px #000000;

}
#maroon{color:#801517;}
#maroon:hover{color:#ffffff;}
.btn-outline-danger{color:#8e153d;border-color:#801517; border:3px solid #801517; background-color:#FFF; padding:3px 8px; font-weight:bold; font-size:1.2em; margin-top:10px;}.btn-outline-danger:hover{color:#fff;background-color:#801517;border-color:#801517;}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(128,21,28,.5)}


.btn-outline-dangert{color:#8e153d;border-color:#801517; border:3px solid #801517; background-color:#FFF; padding:8px 16px 10px 16px; font-weight:bold; font-size:1.2em; margin-top:10px;}.btn-outline-dangert:hover{color:#fff;background-color:#801517;border-color:#801517;}.btn-outline-dangert.focus,.btn-outline-dangert:focus{box-shadow:0 0 0 .2rem rgba(128,21,28,.5)}


#btns {
  background: rgb(191,32,38); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,32,38,1) 0%, rgba(119,13,16,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(191,32,38,1) 0%,rgba(119,13,16,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(191,32,38,1) 0%,rgba(119,13,16,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf2026', endColorstr='#770d10',GradientType=0 );
  border-radius: 18px;
  text-shadow: 1px 1px 1px #000000;
  color: #ffffff;
  font-size:1.3em;
  font-weight:bold;
  border:#bf2026 3px solid;
  padding:18px 14px 2px 14px;
  text-align:center;
  width:99%;
  font-family: Arial, Helvetica, sans-serif;
}

#btns:hover {
  background: rgb(119,13,16); /* Old browsers */
background: -moz-linear-gradient(top, rgba(119,13,16,1) 0%, rgba(191,32,38,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(119,13,16,1) 0%,rgba(191,32,38,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(119,13,16,1) 0%,rgba(191,32,38,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#770d10', endColorstr='#bf2026',GradientType=0 );
  text-decoration: none;
    text-shadow: -1px -1px 1px #000000;
	box-shadow:5px 5px 5px 5px #004ca1;

}

.ib { border:3px solid #2f0613;}


.top {
	background:#b61f25;
	padding:7px 10px 7px 10px;
	color:#fff;
	font-size:1.1em;
	font-family: 'Krona One', sans-serif;
	margin:7px 5px 0px 5px;
	border-top-left-radius:12px;
border-top-right-radius:12px;}
	
.didyk {
	background: rgb(242,245,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
border:solid #c8d7dc 2px;
border-top:none;
border-bottom-left-radius:12px;
border-bottom-right-radius:12px;
	padding:9px 12px 11px 12px;
	color:#111;
		font-size:1.1em;
	margin:0px 5px 26px 5px;}

.picback {
	background: rgb(242,245,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
border:solid #c8d7dc 2px;
border-radius:12px;
	padding:9px 12px 11px 12px;
	color:#111;
		font-size:1.1em;
	margin:0px 5px 26px 5px;}


.navbard {
  overflow: hidden;
  background:#bf2026;
}

.navbard a {
  float: left;
  font-size:1.1em;
  color: white;
  text-align: center;
  padding:14px 35px;
  text-decoration: none;
  
  font-weight:normal;
  margin:0px 0px 0px 0px;
   -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
		
}

.dropdownd {
  float: left;
  overflow: hidden;
}

.dropdownd .dropbtnd {
  font-size: 1.1em;  
  border: none;
  outline: none;
  color:#fff;
  padding:14px 35px;
  background-color: inherit;
  font-weight:normal;
  
  margin: 0;
 
}
.navbard a:hover { 
  color:#fff;
  background:#741012;
  
}

.dropdownd:hover .dropbtnd {
  background-color:#741012;
  color:#fff;
  border-radius:0px;
  
}

.dropdown-contentd {
  display: none;
  position: absolute;
  background-color:#740000;
  min-width:160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:99999;
}

.dropdown-contentd a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-contentd a:hover {
  background-color:#fff;
  color:#740000;
}

.dropdownd:hover .dropdown-contentd {
  display: block;
}

@media (min-width: 576px) { 
.dropdownd .dropbtnd {
  font-size:.7em;  
  padding: 14px 6px;}
.navbard a {
  font-size:.6em;
  padding: 14px 6px;}
	.marg { padding-left:10px;}
		
#btns {
  font-size:1.3em;}	
}


@media (min-width: 768px) { 
.dropdownd .dropbtnd {
  font-size:.7em;  
  padding: 14px 11px;}
.navbard a {
  font-size:.7em;
  padding: 14px 11px;}
	.marg { padding-left:10px;}
	
#btns {
  font-size:1em;}		
}

@media (min-width: 992px) { 
.dropdownd .dropbtnd {
  font-size: .9em;  
  padding: 14px 20px;}
.navbard a {
  font-size:.9em;
  padding: 14px 20px;}
	.marg { padding-left:60px;}
#btns {
  font-size:1.1em;}	 
 }

@media (min-width: 1200px) {
	
	.dropdownd .dropbtnd {
  font-size: 1em;  
  padding: 14px 27px;}
.navbard a {
  font-size:1em;
  padding: 14px 27px;}
#btns {
  font-size:1.3em;}	
	.marg { padding-left:100px;}
	 }	

.img-right{margin:1rem 0 1rem 1rem;float:right;}
.img-left{margin:1rem 1rem 1rem 0;float:left;}

@media (max-width:768px)
{	.marg { margin-left:00px;}
	.img-right{margin:1rem 0;float:none;}
	.img-left{margin:1rem 0;float:none;}
}






	
@media (max-width:575.98px) { 

 .desk{ display:none;}
.mobi { display:block;}

.one { display:none;}
.two { display:none;}
.three { display:none;}
.four { display:block;}
 }

@media (min-width: 576px) { 

.desk{ display:none;}
.mobi { display:block;} 

.one { display:none;}
.two { display:none;}
.three { display:block;}
.four { display:none;}

}

@media (min-width: 768px) { 

.desk{ display:block;}
.mobi { display:none;} 

.one { display:none;}
.two { display:none;}
.three { display:block;}
.four { display:none;}

}

@media (min-width: 992px) { 

.desk{ display:block;}
.mobi { display:none;} 


.one { display:none;}
.two { display:block;}
.three { display:none;}
.four { display:none;} 

 }

@media (min-width: 1200px) { 
 
.desk{ display:block;}
.mobi { display:none;} 

.one { display:block;}
.two { display:none;}
.three { display:none;}
.four { display:none;}
}

#white { color:#fff;}

.calculator
{
	margin:12px 0 0 0;
	padding:8px 16px;
	background-color:#633;
	font-family:Arial, Helvetica, serif;
	font-size:medium;
	font-weight:bold;
	color:#fff !important;
	text-decoration:none !important;
	text-align:center;
	display:inline-block;
}

.calculator:hover
{
	background-color:#666;
}

.demand
{
	margin:12px 8px;
	padding:4px;
	background-color:#ff3;
	border:1px solid #000;
	font-size:medium;
	color:#000;
}

#buttonq {
  padding:4px 8px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background:#212a63;
  border: none;
  font-weight:bold;
  border:3px #45c771 solid;
  border-radius:8px;
  margin:4px;
  float:left;
}

#buttonq:hover {background:#3d4eb4; 
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;}

#buttonq:active {
  background:#3d4eb4; 
  transform: translateY(4px);
}