@charset "utf-8";
/* CSS Document */




/* MAIN PAGE */

html,body {
  font-size: 100%;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
     
      }

 @media only screen and (max-width: 992px) {
  body {
     font-size: 90%;
     
}
}

 @media only screen and (max-width: 768px) {
  body {
     font-size: 80%;
     
}
}

@media only screen and (max-width: 600px) {
  body {
    font-size: 60%;
   
   }
  }


  
body {
    opacity: 1;
    transition: 1s opacity;
}

body.fade-out {
    opacity: 0;
    transition: none;
}

button.small{
	background-color: white;
	border: 1px solid #690e0b;
	color: #690e0b;
	padding: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
}

 @media screen and (max-width: 600px) {
 button.small {
	 padding: 2.5px 10px;
	 font-size: 10px;
	 margin-bottom: 5px;
} 
 }
 
button {
	background-color: white;
	border: 1px solid #690e0b;
	color: #690e0b;
	padding: 15px 60px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
}

button:hover {
	background-color: #545454;
	color: white;
}
  
/* HEADER */

 
 header {
	 width: 100%;
	 display: block;
	 height: 20%;
	 max-height: 195px;
	 position: fixed;
	 z-index: 3;
}
 
 .nav-up {
	 top: -20%;
 }
 
 .nav-down {
	 background-color: #DCDCDC;
 }
 
 @media screen and (max-width: 1279px) {
 header {
	  background-color: #ffffff;
	  height: 35%;
	  max-height: 140px;
	  position: fixed;
	}
}
 
  @media screen and (max-width: 760px) {
 header {
	  max-height: 100px;
	  }
} 

 
 @media screen and (max-width: 600px) {
 header {
	  max-height: 90px;
	  }
} 

 
 header .tagline {
	 text-align: center;
	 font-style: italic;
	 padding-top: .25%;
	 padding-bottom: .35%;
	 background-color: white;
	 }
 
 @media screen and (max-width: 1280px) {
	header .tagline a {
		display: none;
	}
}
 
 @media screen and (max-width: 518px) {
	header .tagline {
		 font-size: 80%;
	 }
 }
 
header .logo-bar {
	background-color: #DCDCDC !important;
	padding-top: .5%;
  }

.header-logo {
	width: 35%;
	min-width: 600px;
	margin-left: 15%;
	margin-right: 1.5%;
	background-color: #DCDCDC;
}

 @media only screen and (max-width: 1279px) {
  .header-logo {
    float: left;
	width: 46%;
	min-width: 425px;
	margin: 0;
	padding-left: 5%;
   }
  }

 @media only screen and (max-width: 600px) {
  .header-logo {
    float: left;
	width: 65%;
	min-width: 250px;
	margin: 0;
	padding-left: 2%;
   }
  }

 @media only screen and (max-width: 400px) {
  .header-logo {
    float: left;
	width: 50%;
	min-width: 175px;
	margin: 0;
   }
  }

 @media only screen and (max-width: 300px) {
  .header-logo {
    float: left;
	width: 50%;
	min-width: 150px;
	margin: 0;
   }
  }

 .img-bar-container {
	 width: 100%;
	 position: relative;
	 top: 230px;
	 display: block;
	 height: 100%;
	  }

  @media only screen and (max-width: 1492px) {
  .img-bar-container {
    top: 215px;
   }
  }

 @media only screen and (max-width: 1360px) {
  .img-bar-container {
    top: 215px;
   }
  }

  @media only screen and (max-width: 1200px) {
  .img-bar-container {
    top: 175px;
   }
  }

  @media only screen and (max-width: 992px) {
  .img-bar-container {
    top: 138px;
   }
  }

 @media only screen and (max-width: 760px) {
  .img-bar-container {
    top: 115px;
   }
  }

  @media only screen and (max-width: 600px) {
  .img-bar-container {
    top: 110px;
   }
  }

	  
 .img-bar img {
	 float: left;
	 
	   }
 
 .img-bar .fullwidth {
	 width: 100%;
	 min-height: 150px;
 }
 
.img-bar-container span {
	display: block;
	color: darkred;
	font-weight: bolder;
	font-size: 250%;
	background-color: #DCDCDC;
	padding: 1.25% 2% 1.25% 10%;
}
 
  @media only screen and (max-width: 1280px) {
  .img-bar-container span {
    top: 35px;
   
   }
  }

 @media only screen and (max-width: 600px) {
  .img-bar-hide {
    display: none;
   }
  }

.video-header video {
		width: 100%;		
	}
	
.header-text {
	position: absolute;
	display: flex;
	flex-direction: column;
	text-align: center;
	top: 15%;
	bottom: 0;
	left: 0;
	right: 0;
	}
	
.header-text h1 {
	text-transform: uppercase;
	color: white;
	text-shadow: -2px -2px 0 #690e0b, 2px -2px 0 #690e0b, 2px 2px 0 #690e0b, -2px 2px 0 #690e0b, -6px 6px 16px #000000;
	font-size: 5em;
	
	font-weight: bolder;
	}

.header-text button {
	padding: 1% 4%;
	
	margin: auto;
	margin-top: 2% !important;
	display:inline-block;
	font-size: 18px;
	
	box-shadow: 0 8px 16px 0 #000000;
	}
  
.header-text button:hover {
	background-color: #545454;
	color: white;
	}

/* MOBILE NAV BAR */

/* Add a black background color to the top navigation */
.topnav {
  background-color: #DCDCDC;
  overflow: hidden;
  padding-left: 15%;
}



/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: none;
  color: #690e0b;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 90%;
  font-weight: 600;
  background-color: #ffffff;
}

 @media only screen and (max-width: 1490px) {
  .topnav a {
     font-size: 90%;
     
}
}

 @media only screen and (max-width: 1360px) {
  .topnav a {
     font-size: 80%;
     
}
}

 @media only screen and (max-width: 1080px) {
  .topnav a {
     font-size: 70%;
     
}
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  background-color: #DCDCDC;
}

/* When the screen is less than 992 pixels wide (Mobile devices), hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1279px) {
  .topnav {
	  margin-right: 0px;
	  padding-left: 0px;
	  min-width: 125px;
	  padding-top: 2%;
  }
  .topnav a {
	  display: none;
	  font-size: 150%;
	}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1279px) {
  .topnav.responsive {
	  position: relative;
	  padding-top: 10%;
	  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
	  padding-top: 15%;
	  }
}


 /* MAIN BODY */
  
 .mainbody-container {
	 width: 100%;
	 
	 height: auto;
	 display: block;
	 margin: auto;
	 margin-bottom: 10%;
	 clear: both;
	 color: #545454;
	 position: relative;
	 top: 235px;
	 display: block;
	 padding-bottom: 10%;
	 text-align: center;
	  }

@media only screen and (max-width: 1279px) {
	.mainbody-container {
		width: 100%;
	}
}

  @media only screen and (max-width: 1492px) {
  .mainbody-container {
    top: 180px;
   }
  }

 @media only screen and (max-width: 1360px) {
  .mainbody-container {
    top: 162px;
   }
  }

  @media only screen and (max-width: 1200px) {
  .mainbody-container {
    top: 150px;
   }
  }

  @media only screen and (max-width: 992px) {
  .mainbody-container {
    top: 160px;
	
   }
  }

  @media only screen and (max-width: 640px) {
  .mainbody-container {
    padding-bottom: 30%;
	
   }
  }

  @media only screen and (max-width: 600px) {
  .mainbody-container {
    top: 120px;
	}
  }

 a {
	text-decoration: none;
	color: darkred;
	font-weight: bold;
	transition: color .25s;
	}
 
 a:hover {
	 color: #545454;
	 font-weight: bold;
	 transition: .25s
	  }
  
  .comingsoon {
	  width: 40%;
	  display: block;
	  margin: auto;
	  }
 
 .mainbody-container figure {
	 display: inline-block;
	 margin: 1em;
	 vertical-align: top;
}

.mainbody-container figcaption {
	width: 100%;
	max-width: 560px;
}


 .page-header {
	display: block;
	color: white;
	font-weight: normal;
	font-size: 200%;
	background-color: #690e0b;
	padding: 1% 2% 1% 10%;
 }

@media only screen and (max-width: 992px) {
	.page-header {
		font-size: 200%;
		padding: 3% 2% 3% 10%;
	}
}

.body-header {
	text-align: left;
	width: 90%;
	margin: auto;
	max-width: 1400px;
	font-size: 150%;
	color: #690e0b;
	padding-top: 2%;
	}

@media only screen and (max-width: 1667px) {
  .body-header {
    font-size: 140%;
	
      }
  }

.body-text {
	width: 90%;
	max-width: 1400px;
	margin: auto;
	padding-bottom: 2%;
	padding-top: 1%;
	text-align: left;
	
	}	

.body-img1 {
	width: 20%;
	float: left;
	padding-top: 6%;
	margin: 2%;
	margin-bottom: 1%;
	max-width: 415px;
	
	}

.body-img2 {
	width: 20%;
	position: absolute;
	left: 75%;
	top: 950px;
	max-width: 415px;
}

.body-button {
	width: 25%;
	margin: auto;
	}

.body-button  a {
	text-decoration: none;
	color: darkred;
	transition: color .25s;
	margin-right:  20px;
	}
 
 .body-button a:hover {
	 color: #545454;
	 font-weight: bold;
	 transition: .25s
	  }

.locations{
	 width: 100%;
	 height: 100%;
	 max-width: 1400px;
	 margin: auto;
	 display: block;
	 text-align: center;
	 padding-bottom: 5%;
}

.locations p {
	width: 40%;
	max-width: 600px;
	min-width: 405px;
	margin: 2em;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	font-size:125%;
}

.locations-header {
	width: 100%;
	display: block;
	border-bottom: 1px solid #dcdcdc;
	font-size: 175%;
	color: #690e0b;
	padding-top: 2%;
	}

table.locations {
	width: 80%;
	margin: auto;
	}


		
.locations td {
	padding-bottom: 2%;
	width: 50%;
	text-align: left;
	}

.community {
	
}

.community p {
	border-bottom: 1px solid #545454;
}

@media only screen and (max-width: 1280px) {
  .community {
    width: 80%;
	margin: auto;
   
   }
  }

  table.img-links {
	  width: 80%;
	  margin: auto;
	   }
  
  @media only screen and (max-width: 1280px) {
  table.img-links {
    position: relative;
	left: -5%;
	width: 80%;
	margin: auto;
   
   }
  }
  
  .img-brand td {
	  width: 33%;
	  padding: 2% 2% 0% 2%;
	  
	  vertical-align: top;
	 }
  
  .img-brand img {
	  width: 95%;
	  padding: 5px;
	  border: 1px solid #545454;
	  margin: 10px;
	  transition: transform .25s;
  }
  
     .img-brand img:hover {
	 transform: scale(1.025);
 }
 
  .img-brand .right {
	  text-align: right;
  }
  
   .img-brand .text {
	   padding: 2%;
   }
  
  .img-logos {
	 padding-top:2%;
 }
 
  .img-logos img {
	  width: 100%;
	  padding: 5px;
	  border: 1px solid #545454;
	  transition: transform .25s;
  }
    
     .img-logos img:hover {
	 transform: scale(1.05);
 }

   .img-logos .text {
	   width: 572.5px;
	   height: 291px;
	   
   }
  
  @media only screen and (max-width: 600px) {
	  .img-logos .text {
		  width:  381px;
		  height: 237px;
	  }
  }
  
  
 .img-links {
	 padding-top:2%;
 }
 
  .img-links img {
	  width: 100%;
	  padding: 5px;
	  border: 1px solid #545454;
	  transition: transform .25s;
  }
    
     .img-links img:hover {
	 transform: scale(1.05);
 }

   .img-links .text {
	   width: 572.5px;
	   height: 291px;
	   
   }
  
  @media only screen and (max-width: 600px) {
	  .img-links .text {
		  width:  381px;
		  height: 237px;
	  }
  }
  
   table.img-links3 {
	  width: 90%;
	  margin: auto;
	   }
  
  @media only screen and (max-width: 1280px) {
  table.img-links3 {
    position: relative;
	left: -5%;
	width: 80%;
	margin: auto;
   
   }
  }
  
  .img-links3 td {
	  width: 25%
	 }
  
  .img-links3 img {
	  width: 95%;
	  padding: 5px;
	  border: 1px solid #545454;
	  margin: 10px;
	  transition: transform .25s;
  }
  
     .img-links3 img:hover {
	 transform: scale(1.025);
 }
 
  .img-links3 .right {
	  text-align: right;
  }
  
   .img-links3 .text {
	   padding: 2%;
   }
  
table.column3 {
	width: 100%;
	margin: auto;
	}

.column-header {
	width: 100%;
	font-size: 150%;
	color: darkred;
	}
		
.column3 td {
	padding-bottom: 2%;
	width: 33%;
	vertical-align: top;
	}

.column3 a {
	text-decoration: none;
	font-weight: normal;
	color: #545454;
	transition: color .25s;
	}
 
 .column3 a:hover {
	 color: darkred;
	 font-weight: bold;
	 transition: .25s
	  }
    
  table.column2 {
	  width: 100%;
	  margin: auto;
  }
  
  .column2-header {
	  width: 100%;
	  font-size: 150%;
	  color: darkred;
  }
  
  .column2 td {
	  width: 50%;
	  vertical-align: top;
	  }

.column2 img {
	width: 100%;
	margin: auto;
}
  
 #smallimg {
	 width: 10%;
	 vertical-align: top;
	 }
 
#smallimg img {
	 width: 95%;
	 margin: auto;
	 
	}
     
  .right {
	  text-align: right;
  }
  
  .logo {
	  width: 100%;
	  max-width: 1600px;
	  margin: auto;
	  padding-bottom: 5%;
  }
  
  .logo img {
	  width: 15%;
	  min-width: 110px;
	  display: inline-block;
	  margin: 2em;
	  vertical-align: middle;
  }
  
  .space {
	  list-style-type: none;
	  padding-bottom: 3%;
  }
  
 .careers {
	 width: 100%;
	 max-width: 1600px;
	 margin: auto;
	 padding-bottom: 5%;
	 text-align: left;
 }

/* HOMEPAGE TEXT LINKS */

.text-links {
	width: 100%;
	max-width: 1900px;
	margin: auto;
	font-size: 125%;
}

.text-links td {
	padding-left: 1em;
	padding-right: 1em;
}
  
/* HOMEPAGE-BUTTONS */	  
	  
table.homepage-buttons  {
	width: 100%;
	max-width: 1400px;
	margin: auto;
	padding-bottom: 2.5%;
}

.homepage-buttons td {
	width: 25%;
	padding: 0;
	text-align: center;
}

.buttons td {
	height: 150px;
}

.homepage-buttons img {
	width: 25%;
	min-width: 75px;
	transition: transform 0.25s;
}
	
.homepage-buttons img:hover {
	transform: scale(1.2);
 }
 
.buttonlink-text  td {
	color: #545454;
	font-size: 125%;
	padding-bottom: 2%;
	margin: 1em;
}

.buttonlink-text2 td {
	color: #545454;
	font-size: 100%;
	vertical-align: top;
	padding-left: 1%;
	padding-right: 1%;
	}
 
 @media only screen and (max-width: 992px) {
	 .buttonlink-text  td {
		 font-size: 100%;
	 }
	 .buttonlink-text2 td {
		 font-size: 90%;
	 }
 }
 
/*  MDM CATALOG */

.mdmitems figcaption {
	text-align: left;
	}
 
  
 /* CURRENT PROMOTIONS */
 
 .CPROMO {
	 width: 100%;
	 padding-bottom: 2%;
	 height: auto;
	 text-align: center;
	}

 .CPROMO-header {
	 text-align: center;
	 padding-top: 5%;
	 padding-bottom: 2%;
	 color: #545454;
	 font-size: 125%;
	 font-weight: bold;
}
  	 
.CPROMO figure {
	display: inline-block;
	width: 15%;
	min-width: 240px;
	margin: 2%;
	transition: transform .25s;
}
 
 .CPROMO figure:hover {
	 transform: scale(1.05);
 }
 
 @media only screen and (max-width: 611px) {
	 .CPROMO figure {
		 display: block;
		 margin-left: auto;
		 margin-right: auto;
	}
 }
 
.CPROMO figcaption {
		text-align: center;
		color: #545454;
		font-size: 100%;
}

 @media only screen and (max-width: 992px) {
	 .CPROMO figcaption {
		font-size: 125%;
		padding-top: 5px;
	}
 }
	
.CPROMO img {
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	border: 1px solid #545454;
	
	}

 
 /* PRODUCT OF THE MONTH */	  
 
 .POTM {
	 width: 100%;
	 padding-bottom: 2%;
	 height: auto;
	 text-align: center;
	}
	  
 .POTM-header {
	 text-align: center;
	 padding-top: 5%;
	 padding-bottom: 2%;
	 color: #545454;
	 font-size: 125%;
	 font-weight: bold;
	 text-decoration: underline darkred;
}
  
 .POTM-footer {
	 width: 30%;
	 margin-left: auto;
	 margin-right: auto;
	 text-align: center;
	 padding-bottom: 10%;
	 clear: left;
	  }
	 
.POTM-footer a {
	text-decoration: none;
	color: #690e0b;
	border: 1px solid #545454;
	padding: 5%;
	font-size: 125%;
	transition: color .25s;
}
 
 .POTM-footer a:hover {
	 color: white;
	 font-weight: bold;
	 border: 1px solid darkred;
	 background-color: #545454;
	 padding: 5%;
	 
	 transition: .25s
	  }
 
/* FOOTER */
 
footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #232323;
  color: white;
    }

.footer-container {
	width: 75%;
	margin: auto;
	color: grey;
	font-size: 100%;
	padding-bottom: 20px;
	}

.footer-container table {
	width: 100%;
	}

.footer-container tr {
	
}

.footer-container td {
	width: 33%;
	vertical-align: top;
	max-width: 450px;
	}

.footer-container ul {
	list-style-type: none;
	padding: 0;
	}

.footer-container a {
	text-decoration: none;
	color: white;
	color: grey;
}

.footer-container a:hover {
	color: white;
	}

.footer-container .header {
	color: white;
	font-size: 110%;
	font-weight: bold;
	}

.footer-container hr {
		width: 50%;
	}

.footer-container img {
	float:left;
	padding: 10px;
	transition: transform .25s;
}
	
.footer-container img:hover {
	transform: scale(1.10);
}
	
.footer-tags {
	margin-top: 16px;
	margin-right: 5px;
	}

@media only screen and (max-width: 1280px) {
	#footer-tags-hide {
		display: none;
	}
}

.footer-tags a {
	border: 1px solid grey;
	padding: 5px;
	margin: 2px;
	vertical-align: top;
	line-height: 2.5;
	}

.footer-tags a:hover {
	color: white;
	border: 1px solid white;
}

/* FULL SCREEN NAV MENU */

#cssmenu {
  padding-left: 20%;
  margin: 0;
  border: 0;
  width: auto;
  display: block;
}
 
 @media only screen and (max-width: 1279px) {
	#cssmenu {
		display: none;
	}
}
 
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
  transition: .25s;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
  transition: .25s;
}
#cssmenu ul ul {
  bottom: 0;
  left: 0;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu ul ul li {
  font-weight: normal;
}
#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}

/* Custom CSS Styles */
#cssmenu {
  background: #DCDCDC;
  font-family: Arial, sans-serif;
  font-size: 18px;
}

#cssmenu > ul {
  *display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu ul {
  text-transform: uppercase;
}
#cssmenu ul ul {
  border-top: 4px solid darkred;
  text-transform: none;
  min-width: 210px;
}
#cssmenu ul ul a {
  background: white;
  color: black;
  font-weight: lighter;
  border: 1px solid darkred;
  border-top: 0 none;
  line-height: 150%;
  padding: 8px 8px;
  font-size: 13px;
}

#cssmenu ul ul ul {
  border-top: 0 none;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu ul ul li:first-child > a {
  border-top: 1px solid white;
}
#cssmenu ul ul li:hover > a {
  background: darkred;
  color: #ffffff;
  transition: .25s;
}
#cssmenu ul ul li:last-child > a {
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 1px 0 #1b9bff;
  -webkit-box-shadow: 0 1px 0 #1b9bff;
  box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  transition: .25s;
}
#cssmenu ul ul li.has-sub > a:after {
  
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}
#cssmenu ul li:hover > a  {
  background: darkred;
  color: #ffffff;
  transition: .25s;
}
#cssmenu ul li.has-sub > a:after {
  
  margin-left: 5px;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu a {
  background: #DCDCDC;
  color: darkred;
  font-weight: bold;
  padding: 0 20px;
}

@media only screen and (max-width: 1280px) {
  #cssmenu a {
     padding: 0 15px;
 }
 }

 @media only screen and (max-width: 1115px) {
  #cssmenu a {
     padding: 0 6px;
 }
 }

 
#cssmenu > ul > li > a {
  line-height: 48px;
  font-size: 80%;
}

@media only screen and (max-width: 1560px) {
  #cssmenu > ul > li > a {
     font-size: 70%;
     
}
}

 @media only screen and (max-width: 1425px) {
   #cssmenu > ul > li > a {
     font-size: 60%;
     
}
}

 @media only screen and (max-width: 1297px) {
   #cssmenu > ul > li > a {
     font-size: 55%;
     
}
}

 @media only screen and (max-width: 790px) {
   #cssmenu > ul > li > a {
     font-size: 50%;
     
}
}

 @media only screen and (max-width: 700px) {
   #cssmenu > ul > li > a {
     font-size: 40%;
     
}
}

/* FORM */

.form {
	width: 100%;
	max-width: 1400px;
	margin: auto;
	text-align: left;
	padding-top: 2%;
	font-size: 125%;
}