* {
margin: 0;
}
html {
background: url(../images/di.5.jpg) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 100%;
overflow: auto;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
width: 100%;
height: 100vh;
}
.page-wrap:after {
height: 40px;
content: "";
display: block;
}
#marquee {
display: none;
width: 100%;
}
.container {
margin: auto;
width: 70%;
}
.header {
margin: auto;
text-align: center;
}
.header img {
width: 33.3%;
}
.menuButton {
margin: auto;
width: 100%;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.menuButton h4 {
padding: 10px;
cursor: pointer;
color: #e4d713;
font-family: 'Roboto', sans-serif;
font-size: 1.6em;
letter-spacing: 4px;
text-shadow: 2px 0 0 #505050, -2px 0 0 #505050, 0 2px 0 #505050, 0 -2px 0 #505050, 2px 2px #505050, -2px -2px 0 #505050, 2px -2px 0 #505050, -2px 2px 0 #505050;
}
.guideButton {
font-family: Eras ITC, Eras Bold ITC, sans-serif;
font-size: 1em;
letter-spacing: 1px;
padding: 10px;
color: #e4d713;
background: #404040;
border: 2px solid #e4d713;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
margin: 2%;
}
.guideButton:hover {
background: #252525;
}
.panelSelect {
margin-top: 3%;
text-align: center;
font-weight: bold;
font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
font-size: large;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
text-align: center;
}
.panelSelect img {
background-color: white;
border: black solid 2px;
width: 80%;
margin: 3%;
padding: 6%;
}
.manufacturerSelect {
margin-top: 3%;
text-align: center;
font-weight: bold;
font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
font-size: large;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
text-align: center;
}
.manufacturerSelect img {
background-color: white;
border: black solid 2px;
width: 80%;
margin: 3%;
padding: 6%;
}
.home {
margin-top: 3%;
text-align: center;
font-weight: bold;
font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
font-size: large;
}
.home img {
width: 35%;
}
.home h3 {
margin: 3%;
text-align: center;
font-size: 1.5em;
text-decoration: underline;
}
#homeImgSm {
height: 150px;
width: auto;
}
.home p {
margin: 2%;
}
.home p img {
width: 8%;
}
.fieldGuides {
margin-top: 3%;
text-align: center;
font-weight: bold;
font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
font-size: large;
}
.fieldGuides p {
margin: 2%;
}
#adobe {
width: 80px;
}
.location {
font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
font-size: 1em;
margin: auto;
text-align: center;
padding: 2%;
}
.flag {
display: flex;
flex-direction: row;
justify-content: center;
}
.flag h4 {
margin: 5%;
padding: 10px;
cursor: pointer;
color: #e4d713;
font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
font-size: 1.4em;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
table {
margin: auto;
text-align: center;
width: 65%;
}
th {
width: 50%;
}
th p {
line-height: 32pt;
font-size: 16pt;
}
td {
border: 3px solid black;
width: 50%;
}
td p {
line-height: 32pt;
font-size: 20pt;
}
.video {
margin: auto;
text-align: center;
}
.video .title {
margin: 1%;
font-variant: small-caps;
text-align: center;
font-size: 1.6em;
}
.video video {
width: 60%;
;
}
.products {
margin: auto;
text-align: center;
width: 70%;
}
.products p {
margin-top: 2%;
font-size: 1.5em;
font-weight: bold;
}
.products hr {
margin-bottom: 4%;
}
.prod {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 50px;
}
.prod h2 {
width: 50%;
text-align: center;
font-weight: normal;
}
.prod div {
width: 50%;
text-align: center;
}
.prod-img {
width: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 10px;
}
.prod-img img {
margin-bottom: 25px;
width: 60%;
}
.prod-img label {
font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
font-size: 1.3em;
padding: 5%;
text-align: center;
}
.prod-img h2 {
font-weight: bold;
}
.info {
margin: auto;
width: 80%;
text-align: center;
}
.info h1 {
font-variant: small-caps;
}
.info h2 p {
margin: 2%;
font-variant: small-caps;
text-align: center;
width: 100%;
}
.info p {
margin: 2%;
text-align: justify;
font-size: 1.2em;
}
.infoContact {
margin: auto;
padding-bottom: 2%;
text-align: center;
}
.infoContact p {
margin: auto;
text-align: center;
}
.maps {
margin: 4%;
}
.maps h2 {
margin-top: 2%;
font-size: 2.1em;
}
.maps img {
margin: 4%;
width: 80%;
}
.referenceGuide {
margin: auto;
text-align: center;
width: 70%;
}
.referenceGuide h1 {
font-variant: small-caps;
}
.referenceGuide .refBox {
border: 4px solid black;
border-bottom: none;
margin: 4%;
display: flex;
flex-direction: column;
font-size: 1.2em;
}
.referenceGuide .refBox h2 {
padding: 2%;
text-decoration: underline;
}
.referenceGuide .refRow {
border-bottom: 2px solid black;
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 2%;
}
.referenceGuide .bottomRow {
border-bottom: 4px solid black;
}
.referenceGuide .col {
align-self: center;
width: 33%;
}
.referenceGuide .rowHeader {
font-weight: bold;
}
.referenceGuide .rowPanel {
font-style: italic;
}
footer {
background: #303030;
color: #e4d713;
height: 40px;
margin: auto;
width: 100%;
position: fixed;
}
footer div {
font-family: "Eras ITC", "Eras Bold ITC", sans-serif;
font-size: 16pt;
font-variant: small-caps;
font-weight: bold;
margin: auto;
padding-top: 10px;
text-align: center;
}
footer a {
color: #e4d713;
}
@media screen and (max-width: 980px) {
.header img {
width: 100%;
}
.panelSelect {
margin: auto;
margin-top: 5%;
width: 60%;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panelSelect label {
margin: 5%;
font-size: 2.5em;
}
}
@media screen and (max-width: 800px) {
.panelSelect label {
font-size: 1em;
}
}
@media screen and (max-width: 600px) {
.panelSelect label {
font-size: 0.8em;
}
footer div {
font-size: 0.6em;
}
}