/* CSS Document */

@font-face {font-family: 'Trebuchet MS';src: url('fonts/trebuc.ttf');}
@font-face {font-family: 'Trebuchet MS';font-weight: bold;src: url('fonts/trebucbd.ttf');}
@font-face {font-family: 'Trebuchet MS';font-style: italic;src: url('fonts/trebucit.ttf');}
@font-face {font-family: 'Trebuchet MS';font-weight: bold;font-style: italic;src: url('fonts/trebucbi.ttf');}

* {scroll-behavior: smooth;box-sizing:border-box;margin:0;padding:0;}
body {font-family:'Trebuchet MS';box-sizing: border-box}
.panel {width:85%;max-width:1200px;margin:0 auto;padding:2em;display:block;}


header h1 {color:#007BC1;text-align:center;font-size:3em;padding:0}
header p{text-align:center;font-size:1.5em}

form#contact-form {position:relative;background-color:#CCC;padding:2em;border-radius:24px}
form#contact-form img#offer {margin:0 auto;margin-top:-320px;width:900px;display:block;z-index:100;}
form#contact-form h2 {position:relative;z-index:1;text-align:center;font-size:2em;margin-top:.5em;margin-bottom:1em;}

form#contact-form div.fields {display:flex;flex-wrap: wrap;justify-content:center;justify-content: space-between; align-items: center; flex-direction:row}
form#contact-form div.fields input[type="text"],
form#contact-form div.fields input[type="tel"],
form#contact-form div.fields input[type="email"],
form#contact-form div.fields input[type="submit"],
form#contact-form div.fields select {width:49%;padding:1vw;margin:.5em 0;}
form#contact-form fieldset {width:49.5%;border:none;padding:0;margin:0;text-align:center}
form#contact-form div.fields input[type="submit"]{width:80%;background-color:#007BC1;color:#FFF;font-weight:bold}

section {margin-top:3em}
section header.ribbon {padding:2em;font-weight:600;font-size:1.5em;color:#FFF;text-align:center;text-shadow:0px 0px 8px #000}
section picture.sub-banner{display:block;margin:0 auto}
section picture.sub-banner img {width:100%}

article p {margin-top:0;margin-bottom:.75em;line-height:1.5;font-size:1.5em}
article h2 {margin-top:2em;margin-bottom:0;font-size:2em}
article li {margin-left:2em;line-height:1.5;font-size:1.5em}

footer {background: #d4d3d3;}
footer div.stores {padding: 20px 0 0;text-align: center;width: 100%;font-family: Roboto;font-size: 18px;color: #0d0400;}
footer div.contact-dets {width: 100%;text-align: center;font-family: Roboto; font-weight: 700; padding: 5px 0 20px;color: #000000;font-size: 17px;}
footer div.contact-dets a {color: initial;}

.button {
	display:block; width:450px;margin:2em auto; padding:20px 0px;
	background-color:#007BC1;color:white;
	border-radius:6px;
	font-weight:600;font-size:1.25em;text-decoration:none;text-align:center
}

@media screen and (max-width:1024px) {
	body{font-size:85%}
	form#contact-form fieldset {width:99.5%;border:none;padding:0;margin:0;text-align:center}
	.button {width:250px}
}




@media screen and (max-width:680px) {
	body{font-size:70%;text-align:center;}
	li {list-style:none!important;margin-left:0!important}
	.panel {max-width:95%;}
	form#contact-form {border-radius:6px;}
	form#contact-form h2 {font-size:1.5em;}
	form#contact-form div.fields input[type="text"],
	form#contact-form div.fields input[type="tel"],
	form#contact-form div.fields input[type="email"],
	form#contact-form div.fields input[type="submit"],
	form#contact-form div.fields select {width:99%;}
	form#contact-form fieldset {width:99.5%;border:none;padding:0;margin:0;text-align:center}
	form#contact-form div.fields input[type="submit"]{width:100%!important;background-color:#007BC1;color:#FFF;font-weight:bold}
}