@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
html {height: 100%;width: 100%;font-size: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
body{margin:0;padding:0;color:#000000;font-family:'Roboto', sans-serif;}
p, ul, li {color:rgb(0,0,0);font-size:1.25rem;line-height:2.125rem;font-weight:400;}
a {color:rgb(155,2,26);text-decoration:underline;}
a:hover {color:rgb(155,2,26);text-decoration:none;}
h1 {font-size:6.25rem;line-height:6.25rem;color:rgb(10,40,93);}
h2 {font-size:3.75rem;line-height:3.75rem;color:rgb(10,40,93);}
h3 {font-size:2rem;line-height:3rem;color:rgb(10,40,93);}
h4 {font-size:1.5rem;line-height:2.5rem;}
hr {height:4px;border-width:0;color:gray;background-color:rgb(227,179,49);}
.clear {clear:both;}
.center {text-align:center;}
.large {font-size:6.25rem;line-height:6.25rem;color:rgb(10,40,93);font-weight:bold;}
.fright {float:right;padding-left:2%;}
.fleft {float:left;padding-right:2%;}
.circle {border-radius: 50%;border: 6px solid rgb(227,179,49);}
.vert {vertical-align: middle;}
.mb {display: none}
.headerwrap {width:80%;min-height:1141px;padding:10%; background-image:url("../img/walts-towing-roseburg.png");background-position:top center;background-repeat:no-repeat;background-size:cover;background-color: rgb(227,179,49);vertical-align: middle;}
.headerwrap h1 {color:rgb(255,255,255);text-align:center;}
.headerwrap p {color:rgb(255,255,255);text-align:center;}
.headerwrapsub {width:100%;}
.topbar {width:90%;padding:0 5%;background-color:rgb(10,40,93);text-align:center;border-bottom: 7px solid rgb(227,179,49);}
.topbar p {color:rgb(255,255,255) !important;font-size:22px;font-weight:700;padding:0;margin:0;}
.topbar a {color:rgb(255,255,255);text-decoration:underline;}
.topbar a:hover {color:rgb(155,2,26);text-decoration:none;}
.wideimg {width:100%;padding:0;}
.wideimg img {width:100%;height:auto;}
.wideyellow {width:100%;padding:0;background-color: rgb(227,179,49);}
.tow {background-image:url("../img/tow-truck-roseburg.png");background-position:bottom left;background-repeat:no-repeat;background-size:contain;}
/* NAV */
.nwrapper {width:100%; margin: 0 auto;padding:1% 0;background-color: rgb(255,255,255);}
.menurt {float:right;padding-right:5%;text-align:right;font-size:22px;font-weight:700;}
.menurt img {max-width:258px;height:auto;}
.menurt a {color:#0a285d;text-decoration:none;} .menurt a:hover {text-decoration:underline;}
nav {width: 65%; padding:0 5%;background: #fff;z-index: 1;}
nav #brand {float: left;}
nav #brand img {max-width:288px;height:auto;}
nav #menu {float: left;text-align:center;padding-top:39px;}
nav #menu li {display: inline-block;list-style:none;padding: 0px 15px;cursor: pointer;font-size:1rem;}
nav #menu li a {color: #0a285d;text-decoration:none;}
nav #menu li a:hover {color:#0a285d;border-bottom:4px solid #e3b331;padding-bottom:8px;webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
/*mobile menu*/
#toggle {position: absolute;right: 2%;top: 1%;z-index: 999;width: 40px;height: 40px;cursor: pointer;float: right;-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;visibility: hidden;
  opacity: 0;}
#toggle .span {height: 7px;background:rgb(255,255,255);margin: 5px auto;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;backface-visibility: hidden;}
#toggle.on #one {-moz-transform: rotate(45deg) translateX(6px) translateY(6px);-webkit-transform: rotate(45deg) translateX(6px) translateY(6px);-o-transform: rotate(45deg) translateX(6px) translateY(6px);-ms-transform: rotate(45deg) translateX(6px) translateY(6px);transform: rotate(45deg) translateX(6px) translateY(6px);}
#toggle.on #two {opacity: 0;}
#toggle.on #three {-moz-transform: rotate(-45deg) translateX(10px) translateY(-12px);-webkit-transform: rotate(-45deg) translateX(10px) translateY(-12px);
  -o-transform: rotate(-45deg) translateX(10px) translateY(-12px);-ms-transform: rotate(-45deg) translateX(10px) translateY(-12px);transform: rotate(-45deg) translateX(10px) translateY(-12px);}
#resize {z-index: 1;position: absolute;top: 0;background:rgb(255,255,255);width: 100%;height: 100%;visibility: hidden;opacity: 0;-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;display: table;}
#resize #menu {height: 24px;display: table-cell;vertical-align: middle;}
#resize #menu li {display: block;text-align: center;padding: 20px 0;text-align: center;font-size: 24px;min-height: 24px;font-weight: bold;cursor: pointer;
  -webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
#resize #menu li:hover {background:rgb(227,179,49);}
#resize #menu li:hover a {color:rgb(227,179,49);-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
#resize #menu li a {color:reg(10,40,93);text-decoration:none;}
#resize.active {visibility: visible;opacity: 0.99;}
/* End NAV*/
.content {width:90%;padding:3% 5%;}
.reviews {width:100%;text-align:center;}
.reviews img {padding:10px 30px;display:inline-block;height:100%;vertical-align: middle;}
.reviews img a {text-decoration:none}
.hcol {width:31%;padding:1%;text-align:center;float:left;}
.hcol img {width:85%;height:auto;}
.hcol img a {text-decoration:none;}
.mcol {width:48%;padding:0 2% 0 0;float:left;}
.mcol img {width:90%;height:auto;}
.footer1 {width:90%;padding:1% 5% 3% 5%;font-size:1rem;color:#ffffff !important;text-align:center;background-image:url("../img/different-tow-trucks.png");background-position:bottom left;background-repeat:no-repeat;background-color:rgb(10,40,93);border-top: 7px solid rgb(227,179,49);}
.footer1 h3 {color:rgb(255,255,255)}
.footer1 p {font-size:1rem;color:rgb(255,255,255)}
.footer1 a {color:rgb(255,255,255);text-decoration: none;}
.footer1 a:hover {text-decoration: underline;} 
.fcol {width:40%;padding:0 6%;float:left;}
.fcol2 {width:25%;padding-right:1%;float:right;vertical-align: middle;}
.fcol2 img {width:70%;height:auto;}
.cr {font-size:.875rem;color:#fffcf7;text-align:center;}
ul.btns {margin: 1.25rem 1.25rem 1.25rem 0;padding: 1.25rem 1.25rem 1.25rem 0;list-style-type: none;text-align:center;text-transform:uppercase;}
ul.btns li {display: inline;margin:.25rem;}
ul.btns li a {font-size:1.25rem;padding: .875rem 1.5rem;border-radius: 20px;border:3px solid #ffffff;background-color:rgb(155,2,6);color: #ffffff;text-decoration: none;webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
ul.btns li a:hover {font-size:1.25rem;padding: .875rem 1.5rem;background-color:rgb(227,179,49);color: #0a285d;text-decoration: none;webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}

/* Extras */
.google-maps {position: relative;padding-top:5%; height: 0;overflow: hidden;}
.google-maps iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0;}
.videoWrapper object, .videoWrapper embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* RESPONSIVE STUFF */
@media only screen and (max-width:1560px) {
	.footer1 {background-size: 500px 224px}
}
@media only screen and (max-width:1300px) {
nav #brand img {max-width:175px;height:auto;}
}
@media only screen and (max-width:1220px) {
#toggle {visibility: visible; opacity: 1;}
nav #menu {display: none;}
.menurt a {color:rgb(155,2,26);text-decoration:underline;}
.menurt a:hover {color:rgb(10,40,93);text-decoration:none;}
}
@media only screen and (max-width:1090px) {
.topbar {width:78%;padding:2% 11%;text-align:left;}
.topbar p {font-size:1.25rem;}
.mb {display:inline}
.mb img {width:100%;height:auto;text-align:center;}
.headerwrap {width:90%;padding:5%;min-height:208px;background-image:none;}
.headerwrap h1 {color:rgb(10,40,93)}
.headerwrap p {color:rgb(10,40,93)}
h1 {font-size: 2.5rem;line-height:3.5rem;}
h2 {font-size: 2rem;line-height:3rem;}
h3 {font-size: 1.75rem;line-height:2.75rem;}
h4 {font-size: 1.25rem;line-height:2.25rem;}
p {font-size:1rem;line-height:1.75rem;}
.fcol img {width:80%;height:auto;text-align:center;}
ul.btns li a {font-size:1rem;text-align:center;}
.fright {float:none;padding:0 0 2% 0;}
.fleft {float:none;padding:0 0 2% 0;}
.large {font-size:3rem;line-height:3rem;}
.tow {height:400px;}
}
@media only screen and (max-width: 860px) {
.reviews img {max-width:103px;height:auto;}
.fcol {width:90%;padding:0 5%;float:none;}
.fcol2 {width:90%;padding:0 5%;float:none;}
	.fcol2 img {width:50%;height:auto;}
}
@media only screen and (max-width: 760px) {
.menurt {float:none;padding:0;text-align:center;font-size:1rem;}
.mcol {width:100%;padding:0;float:none;}
.mcol img {text-align:center;}
.hcol {width:98%;float:none;}
nav {width: 90%; padding:0 5%;background: #fff;text-align:center;}
nav #brand {float: none;text-align:center;}
}
@media only screen and (max-width: 570px) {
.hcol {width:98%;padding:1%;text-align:center;float:none;}
.hcol img {width:75%;height:auto;}
.content img {width:75%;height:auto;}
.topbar {width:60%;padding:2% 20%;}
.menurt img {max-width:150px;height:auto;}
p {font-size:1rem;line-height:1.75rem;}
ul.btns {margin: .875rem .875rem .875rem 0;padding: .875rem .875rem .875rem 0;}
ul.btns li a {font-size:.875rem;padding: .875rem;}
}
@media only screen and (max-width: 460px) {
nav {width: 94%; padding:0 5%;}
#toggle {position: absolute;right: 5%;}
ul.btns {text-align:center;}
ul.btns {margin: .875rem 0;padding:.875rem 0;}
}