* {
    padding: 0px;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
} 

html{  
  font-weight: 400;
  font-style: normal;
  background: white;
}
body{
    max-width: 1200px;
    margin: auto;
    min-height: 100vh; 
}
main{
    max-width: 1200px;
    margin: auto;
    padding-top: 10px;
    background: white;
    
   border-left: 1px solid #618AA3;
   border-right: 1px solid #618AA3;
}
.sect1 {
  	margin: auto;
	width: 400px
}

hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid rgba(0,0,0,.1);
}
.center {
  text-align: center;
}

.tstyle1 {
  font-size: x-small;
}
.tstyle2 {
border-width: 0;
font-size: 18px;
color: #000;
line-height: 1.3em;
text-align: left;
padding: 0;
margin-right:40px;
margin-left: 40px;
}

.tstyle3 {
border-width: 0;
font-size: 20px;
color: #000;
line-height: 1.3em;
padding: 0;
margin-top: 0px;
margin-right:40px;
margin-left: 40px;
margin-bottom: 0px;
}
.pedi {
  border-width: 0;
  font-size: 18px;
  color: #000;
  line-height: 1.3em;
  text-align: center;
  padding: 0;
  margin-right:40px;
  margin-left: 40px;

}
.pedi >a:link {
  color: #000;
  text-decoration: none;
}

.pedi > a:hover {
  text-decoration: underline;
  color: #245775;
}

.pedig {
	border-width: 0;
   	font-size: 18px;
    text-align: left;
    color: #036;
    font-weight: bold;
    padding-left: 25px;
}
.pedig > a:link {
  color: #000;
  text-decoration: none;
}

.pedig > a:hover {
  text-decoration: underline;
  color: #245775;
}

.pics {
  text-align: center;
  padding:20px;
}

.frm1 {
  width: 400px;
  margin:auto;
}

.frmin {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.frmsub {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.frmsub:hover {
  background-color: #45a049;
}

.area1 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


/* Lists */

table {
  border-collapse: collapse;
  vertical-align: top;
}

table.list {
  width: 100%;
}

table.list tr td {
  border: 1px solid #999999;
}

table.list tr th {
  border: 1px solid #618AA2;
  background:#618AA2;
  color: white;
  text-align: left;
}

.container{
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px minmax(100,auto) minmax(400, auto) minmax(150, auto);
	

grid-template-areas: 
"bran bran navi navi navi navi navi navi navi srch srch srch"
"blur blur blur blur blur blur blur blur blur blur blur blur"
"sect sect sect sect sect sect sect sect sect sect sect sect"
"foot foot foot foot foot foot foot foot foot foot foot foot";
}

#bran {
	margin-left: 20px;
    grid-area: bran;
	text-align: left;
    padding: 0, 10px;
}

#navi {
    grid-area: navi;
    text-align: left;
    padding-left: 25px;
}

#srch {
  margin-right: 20px;
	  grid-area: srch;
	  padding-right: 15px;
    text-align: right;
}

#blur {
	grid-area: blur;
	margin-top: 20px;
}

#sect {
    grid-area: sect;
	text-align: center;
	margin-top: 20px;
}

#foot {
  grid-area: foot;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
  "lfot mfot rfot";
  background: #618AA2;
}

#lfot{
    grid-area: lfot;
    align-self: center;
    background: #618AA2;
    color: white;
    text-align: center;
    font-size: .8rem;
    font-weight: 400;
}



#mfot{
  grid-area: mfot;
  align-self: center;
  background: #618AA2;
  color: white;
  text-align: center;
  padding: 15px 0px;
  font-size: .7rem;
  font-weight: 400;
}


#rfot{
    grid-area: rfot;
    align-self: center;
    background: #618AA2;
    color: white;
    text-align: center;
    font-size: .8rem;
    font-weight: 400;
}
.srch {
  background: #ffffff;
  color: #463f3f;
  
   
}

.pstyle {
  font-weight: 400;
  font-size: 18px;
  margin-left:50px;
  margin-right: 50px;
}

h5 {
  font-size: 1.25rem;
  font-weight: 500;
}
.smll {
  font-size: small;
}


.tblbod {
 margin-right: auto;
 margin-left: auto;
 border-bottom: 1px;
}
.table2 {
  width: 70%;
  margin-bottom: .25rem;
  margin-right: auto;
  margin-left: auto;
  border-bottom: 1px;
  background-color: transparent;
  }

.table2 th,
.table2 td {
  padding: 0.25rem;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid #dee2e6;
  color: #036;
  font-weight: bold;
  text-decoration: underline;
}


.pedig {
	border-width: 0;
   	font-size: 18px;
    text-align: left;
    color: #036;
    font-weight: bold;
    text-decoration: underline;
    padding-right: 25px;
}


.card{
    padding:5px;
    min-width: 300px;
    max-width: 29%;
        display: inline-block;
        box-shadow: 0px 10px 10px #042b43;
        border-radius: 5px; 
		text-align: center;
        margin: 2%;
   
}
.btn {
  border: none;
  background-color: #618AA2;
  padding: 9px 18px;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px;
}
.btn > a:link {
  color: white;
} 
.btn > a:visited {
  color: white;
} 

.btn > a:hover {
  color:black;
} 
#foot a:link {
  background: #618AA2;
  color: white;
  text-align: center;
  font-size: .8rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration-line:none
  }


#foot a:hover {
  background: #618AA2;
  color: white;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}


#foot a:visited {
  background: #618AA2;
  color: white;
  text-align: center;
  font-size: .8rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration-line: none;
}


.nobull {
    list-style-type: none;
   }

  nav {
    display: inline-block;
    margin-right:75px ;
    text-align: left;
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
  }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    float: left;
    position: relative;
  }
  nav ul li a {
    display: inline-block;
    padding: 0 7px;
    line-height: 50px;
    background: #ffffff;
    color: #463f3f;
    text-decoration: none;
    /*
    The full path of this code is nav ul li a:not(:only-child):after. This means that the code will apply to any a tag in our nav list that is NOT an only child, aka any dropdown. The :after means it comes after the output of the tag. I’ve decided that to specify any nav item as a dropdown, it will be followed by a unicode arrow – ▾ (#9662).
    */
  }
  nav ul li a:hover {
    background: #f2f2f2;
    color:black;
    font-weight: 700;
  }
  nav ul li a:not(:only-child):after {
    padding-left: 4px;
    content: ' ▾';
  }
  nav ul li ul li {
    min-width: 190px;
  }
  nav ul li ul li a {
    padding: 5px;
    line-height: 20px;
  }
  

  
  .nav-dropdown {
    background: white;
    position: absolute;
    z-index: 1;
    /* Guarantees that the dropdown will display on top of any content. */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    display: none;
  }
  
  .nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    height: 50px;
    width: 70px;
  }
  
  @media only screen and (max-width: 800px) {
    .nav-mobile {
      display: block;
    }
  
    nav {
      width: 100%;
      padding: 70px 0 10px;
    }
    nav ul {
      display: none;
    }
    nav ul li {
      float: none;
    }
    nav ul li a {
      padding: 10px;
      line-height: 20px;
    }
    nav ul li ul li a {
      padding-left: 20px;
    }
  }
  #nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
  }
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #463f3f;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  #nav-toggle span:before {
    top: -10px;
  }
  #nav-toggle span:after {
    bottom: -10px;
  }
  #nav-toggle.active span {
    background-color: #ffffff;
  }
  #nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
  }
  #nav-toggle.active span:before {
    transform: rotate(45deg);
  }
  #nav-toggle.active span:after {
    transform: rotate(-45deg);
  }
  
  @media screen and (min-width: 800px) {
    .nav-list {
      display: block !important;
    }
  }

@media screen and (max-width: 1024px) {
.container{
    max-width: 1140px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 50px minmax(100,auto) minmax(400, auto) 150px;

grid-template-areas: 
"bran bran bran navi navi navi navi navi navi navi navi navi"
"srch srch srch srch srch srch srch srch srch srch srch srch"	
"blur blur blur blur blur blur blur blur blur blur blur blur"
"sect sect sect sect sect sect sect sect sect sect sect sect"
"foot foot foot foot foot foot foot foot foot foot foot foot";
    
    margin: 15;
}	
#foot {
  grid-area: foot;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  "mfot mfot"
  "lfot rfot";
  background: #618AA2;

	
}
}
.search{
  font-size: 30px;
}