@charset "utf-8";
/* BACKGROUND AND BODY */
html {font-family: sans-serif;}
html, body {margin: 0;padding: 0;}

/* END BODY –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* MENU */
/* TOP HEADER */
.topbar {position:fixed; z-index:1; width: 100%; background-color: rgb(255,255,255,0.6); font-size: 11pt;  padding: 10px 0px 2px 0;}
.topbarsmall { font-size: 10pt;  padding: 6px 0px 0px 0; line-height:0.5; background-color: rgb(255,255,255,1);}
.topbar img {width: 80%; max-width: 400px; }
.topbarsmall img {width: 20%; min-width:150px;}

@media (min-width:550px) {
  .topbar {font-size: 18pt;}
  .topbarsmall {font-size: 12pt;}
}

/* MENU MOBILE */
.navigation {width:100%; border-bottom: solid 2px #36A1D4}
.navigation ul {list-style: none;position: relative; padding:0; text-align:center;}
.navigation ul li {box-sizing: border-box; display: inline-block; padding: 0px 1%}
.logo {width: 100%; position:relative; text-align:center; padding: 4px; box-sizing:border-box }
/* END MENU –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* INSIDE PAGES */
/* DIVS */
.intro {position: relative; width: 100%; overflow:hidden; padding: 25vh 30px; box-sizing:border-box;  background-color:#36A1D4}
.home { padding: 40px 12% 80px 12%; max-width: 750px; margin:auto; font-size: 18pt; color:}
.section-blue { font-size: 14pt; background-color:#36A1D4; padding: 40px 10px}
.section { font-size: 14pt;}
.topproducts {position: relative; padding: 110px 10px 20px 10px; margin:auto;}
.footer {width:100%;  padding: 40px 10px; box-sizing:border-box; }
@media (min-width:550px) { 
	.intro { padding-top: 50vh} 
	.topproducts { padding: 150px 10px 20px 10px;}
}
/* INNER DIVS */
.container {padding: 8px 4%; max-width: 800px; margin:auto;}
.third {text-align: center; padding: 8px; box-sizing:border-box;}
.half { padding: 2px; box-sizing:border-box;}
.items {display:inline-block; padding: 12px;}
.items img {max-height: 200px; max-width:100%; cursor:pointer;}
@media (min-width:550px) { 
	.third {width: 33%; display:inline-block; vertical-align:top;} 
	.half {width: 50%; display:inline-block; vertical-align:top;} 
}
/* END INSIDE PAGES –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* TYPOGRAPHY  */


h1, h2, h3, h4, h5, h6 { font-family: 'Barlow', sans-serif; }
h1, h1 a {font-size: 30pt; color: #FFFFFF; font-weight:bold;  }
.topproducts h1 { color:#36A1D4; margin-bottom:0;}
h2, h2 a {font-size: 22pt; font-weight:bold; text-align: center; margin: 2px; }
h3 {font-size: 18pt;}
h5{font-size:12pt;}
@media (min-width:550px) {h2, h2 a {font-size: 28pt; }
	h3 {font-size: 24pt;} }

a {color: #1e392a; text-decoration:none; }
a:hover { color: #000033; }
.blue {background-color:#36A1D4; color:#ffffff; padding: 4px; font-variant:small-caps; font-weight:bold; font-style:italic;}
/* END TYPOGRAPHY –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* BUTTONS */
input[type="submit"], .button {
	border: none;
	border-radius: 4px;
	color: #ffffff;
	padding: 8px;
	text-align:center;
	box-sizing:border-box;
	margin: 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	cursor: pointer;
	font-size: 12pt;
	background-color: #e37222;
	  -webkit-appearance: none;
  	-moz-appearance: none;
  appearance: none;
   -o-appearance: none;
}

input[type="submit"]:hover, .button:hover {
    background-color: #FF3300; /* Green */
}
input,
textarea,
select {outline: none;border: 1px solid #999999;border-radius: 4px;padding: 2px 2px 2px 4px;box-sizing:border-box;margin: 1px;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}

td {vertical-align:middle;}
.smalltext { font-family:Verdana, Arial, sans-serif; font-size: 9pt; color: #000088;}  
.x {padding: 0px 5px 2px 5px;margin: 1px;text-align: center;color: #ffffff;background-color: #CD2626;border:none;appearance: none; font-size: 10pt; box-sizing:border-box; cursor:pointer;}

/* POPUP WINDOW */
.popup {
	position: fixed;
	top: 5vh;
	max-height: 90vh;
	overflow: auto;
	left: 10%;
	padding: 4px;
	box-sizing:border-box;
	width: 80%;
	z-index: 3;
	background-color: #ffffff;
	text-align:left;	
}
.popup img {
	width:100%;
	height: auto;	
}

.popup-back
{	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0, 0.8);
	z-index:2;		
}
.exitbtn {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;	
	text-align: center;
	z-index: 3;
	padding: 2px 6px;
	background-color: #F00000;
}