/* stylesheet for puppix.com */

img, video { max-width: 100%; height: auto }
textarea, input, button {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, .container { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #000; text-align: center }

header, .main, .contactform, footer { max-width: 100%; width: 1160px; margin: 0 auto; text-align: left }
header { display: flex }
header div { display: inline-block; width: 50%; vertical-align: top; flex-grow: 1 }
.headerright { text-align: right; width: 45%  }
.headerright form p { text-align: right; margin: 0 0 24px }

input, texture, button { padding: 4px }
button { color: #fff; background-color: #000; border: 2px solid #fff }
button:hover { cursor: pointer }
p, h1, h2, h3, h4 { color: #fff; font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
text-align: left
}
h1, h2, h3, h4 { margin: 0 32px; line-height: 2rem }
p { font-size: 1.2rem; margin: 0 32px 24px }
.previd { margin-bottom: 0 }
.vidpara { width: 100%; text-align: center; margin: 0 }
video { margin: 0 auto }
footer p { text-align: center; font-size: 0.8rem; line-height: 1rem }

.contact_form { display: flex; justify-content: center }
.contact_form p { text-align: right }
.contactform div { display: inline-block; text-align: right; vertical-align: top; flex-grow: 1 }
.contleft { margin-top: 6px }
.contactform input, textarea { width: 100%; margin: 4px }
.support { place-self: flex-end }
.support img { width: 180px; padding-right: 5px }
.resp { width: 100% }
.resp p { text-align: center; color: #89F94F }
.logtxt { color: #89F94F; font-size: 0.9rem }
#thank-you-message, #thank-you-msg { visibility: hidden }
#thank-you-message.show, #thank-you-msg.show { visibility: visible }

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 2) {
header { display: block }
.headerleft, .headerright { width: 100%; display: block }
.headerright { padding-top: 0 }
p { margin: 10px }
.contact_form { flex-direction: column; }
.contactform .contfull { display: flex }
.contleft { margin-top: 0 }
.contactform div.support { width: 100%; padding-right: 0; text-align: center }
.support img { width: 75%; padding-right:0; margin: 0 auto }
footer p { font-size: 0.5rem }
}