html,body{font-family: 'Open Sans', sans-serif; font-size:16px;}

body {
margin: 0px;
padding: 0px;
background-color: #45647B;
color: #33333e;
}

#topbar {
  display:flex;
  padding:0px 10px 0px 30px;
  font-family: Arial;
  background-image: url("topbg.jpg");
  background-repeat: repeat-x;
  background-position: bottom left;
  height: 100px;
}

#topmenu a {
text-decoration: none;
text-transform: uppercase;
font-family:Arial; 
font-size:9pt; 
color: #ffffff;
letter-spacing: 0.5px;
}

#topmenu a:hover {
color: #F2DDAC;
}

#alapet {
  color:#ede7d6;
  text-shadow: 2px 2px 7px #3b4a7b;
  font-size:1.6em;
  letter-spacing: 0.07em;
  margin:0px 0px 15px 50px;
  flex-grow: 1;
}
#alapet a {color:#edecea;}
#alapet a:hover {color:#ffffff;}

#icon {
  display: none;
  color:#D1A259;
  padding:2px 16px;
  font-size: 36px;
}
#icon:hover {
  color:#D1A259;
}

.container {
    position: relative;
	margin-left: 10px;
}

#respmenu {
    width: 180px;
    position: absolute;
    top: 0px;
    left: 0px;
	background-color:#3B4A7B;
	min-height: 100%;
}
#respmenu.responsive {display:block; padding:30px 0px;}

#menu {
	width: 154px;
	padding: 0px;
	margin: auto;
	margin-top: 20px;
	list-style: none;
	font-size: 0.9em;
	}

#menu ul {
    list-style:none;
    margin: 0;
    padding: 0;
	}
	
#menu li {
	padding: 2px;
	margin: 0px;
	text-align:center;
	}	

#menu li a {
	text-decoration: none;
	display: block;
	padding:5px 0px;
	}	
	
#menu li a:link, #menu li a:visited {
	color: #DFE0EB;
	}
	
#menu li a:hover, #menu li a:active {
	color: #DFE0EB;
	background-color: #1E275A;
	}
	
#menu li.header {
  	height: 30px;
	text-decoration: none;
	background-color: #28336b; /* For browsers that do not support gradients */
    background-image: linear-gradient(#28336b, #3b4a7b);
	border-radius: 11px 11px 0px 0px;
	margin: 25px 0px 0px 0px;
    padding: 2px 0px 10px 0px;
	color: #9ca6c7;
	word-spacing: 0.12em;
	}

#moremenu {display: none; text-align:center; margin:0px 0px 30px 0px; padding:10px 0px; font-size:1.1em; background-color:#506199;}
#moremenu a {color:#DFE0EB; text-decoration: none; border-bottom: 1px solid #3b4a7b; padding-bottom: 3px; margin: 0px 10px;}
.morebut {flex:1; text-align:center;}

#maincol {
    margin-left: 180px;
	padding:5px 7px;
}

#maincontent {max-width:1300px; min-height:850px; padding:5px 5px; margin:auto;}

.petad {
  margin: 40px 28px;
  display: inline-block;
  width: 200px;
  background-color: #e5e5e5;
  color:#505D88;
  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  pointer-events: none; /* disables the hover */
  border-radius: 10px;
}
.petad:hover {
  background-color: #ffffff;
  color:darkblue;
}
.petad a {
  display: block;
  pointer-events: auto;  /* enables the hover on wshop (parent element) */
}
.petad img {border-radius: 10px 10px 0px 0px;}
.desc {
  padding: 15px;
  text-align: center;
  font-size: 0.9em;
  font-family:Arial;
}

.button {
  background-color: #82839b;
  border: none;
  border-radius:5px;
  color: white;
  padding: 5px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em;
  width:90%;
  margin: 15px auto;
  cursor: pointer;
}
.button:hover {background-color: #5d609f;}

img.imgleft {float:left; margin: 10px 30px 30px auto;}
img.imgright {float:right; margin: 10px auto 30px 30px;}

input, textarea {
    padding: 12px 20px;
    margin: 5px 0;
    box-sizing: border-box;
	font-size:1.1em;
}

select {
    padding: 12px 30px 12px 12px;
    margin: 5px 0;
	background-color: white;
    box-sizing: border-box;
	font-size:1.1em;
	-webkit-appearance: none !important; -moz-appearance: none; 
	background-image: url(arrow2.png); background-repeat: no-repeat; background-position: right .5em top 50%, 0 0; background-size: .65em auto;
}

input[type=submit] {-webkit-appearance: none; min-height:2em; width:200px; margin:auto; display:block;}

.clearfix::after { /* make div of class clearfix to contain floating images */
  content: "";
  clear: both;
  display: table;
}

.hr {display:none;}

h3 {
   text-align: center; 
   padding: 10px;
   margin:20px 0px;
   background-color: #365162;
   color: #FF9933;
   font-size: 1.3em;
   font-weight:normal;
}
h2 {
   text-align: left; 
   font-family: 'Handlee', cursive;
   font-size: 1.3em;
   color: #171D1C;
   border-bottom: 1px solid;
   margin: 20px 0px 40px 0px;
   line-height: 1.25;
   letter-spacing: 0.5px;
}
h6 {font-size:1em; font-weight:normal; background-color:#5d85a3; color:antiquewhite; padding:5px; margin: 20px 0px 10px 0px;}

@media screen and (max-width: 1000px) {
  #alapet {font-size:1.2em;}
}
@media screen and (max-width: 900px) {
  #topbar {padding:0px 10px 0px 0px;}
  #topmenu {display: none;}
  #icon {display: inline-block;}
  #respmenu {position:static; width:100%; display:none; border-bottom: 2px solid antiquewhite; box-shadow: 0px 10px 20px -5px #111;}
  #moremenu {display: block;}
  #maincol {margin-left: 0px;}
  #maincontent {max-width:100%;}
  .container {margin:0px;}
  #menu {width:250px; color:ffffff; font-size:1.1em; margin-top:50px; font-size:1.2em;}
  #menu li a {padding:12px;}
  #moremenu {display: flex;}
  img {max-width:100%;height:auto;}
  img.imgleft, img.imgright {float:none; margin:30px auto; display:block;}
  #maincontent {min-height:auto;}
}

@media screen and (max-width: 750px) {
  #alapet {margin:0px 0px 0px 25px; text-shadow: 2px 2px 2px #3b4a7b; font-size:1.1em;}
}

@media screen and (max-width: 321px) {
  #alapet {font-size:1em;}
  #icon {right:0px;}
}






