/* Core Styles */
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');*/

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('../../fonts/montserrat-v18-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../../fonts/montserrat-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../../fonts/montserrat-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../../fonts/montserrat-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('../../fonts/montserrat-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../../fonts/montserrat-v18-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-500 - latin */
  @font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	src: url('../../fonts/montserrat-v18-latin-500.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../../fonts/montserrat-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../../fonts/montserrat-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../../fonts/montserrat-v18-latin-500.woff') format('woff'), /* Modern Browsers */
		 url('../../fonts/montserrat-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../../fonts/montserrat-v18-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}

:root {
   --navbar-height: 70px;
   --navbar-mob-height: 50px;
   --footer-height: 30px;
 }

*{
   margin:0px;
   padding: 0px;
   box-sizing: border-box;
}

/*
html, body {
   height: 100%;
 }
*/

body {
   margin: 0;
   font-family: "Montserrat", sans-serif;
   text-align: center;
   background-color: #222;
}

a:link, a:visited {
   text-decoration: none;
}

.navbar{
   position: fixed;
   top:0;
   left:0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-height: var(--navbar-height);
   height: var(--navbar-height);
   background-color: #000;
   z-index: 199;
   padding: 0px 15px;
}

.navbar .logo {
   max-height: var(--navbar-height);
  /* Top right bottom left */
   padding: 5px 0 5px 0;
}

.goBackBar{
   font-size: 15px;
   color: #fff;
   transition: all 0.5s ease-in-out 0s;
}

.goBackBar:hover{
   color: red;
}

.content-area{
   position: absolute;
   top: var(--navbar-height);
   width: 100%;
   color: white;
   padding-bottom: var(--footer-height);   
   
/*   border: yellow solid 1px;*/
}

.grid-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   background-color: #fff;
   border-radius: 5px;
   /*border: green solid 2px;*/
}

.grid-image .card-pic {
   max-width: 100%;
   max-height: 100%;
}

.grid-desc {
   text-align: left;
   line-height: 1.7em;
   padding: 10px 120px 10px 120px;
   font-size: 12px;
   color: #fff;
}

.grid-desc h3{
   padding: 8px 0;
}

.shortHeader{
   /* Top right bottom left */
   padding-bottom: 6px;
}
.shortFooter{
   /* Top right bottom left */
   padding-top: 6px;
}

.footer{
   position: fixed;
   bottom: 0px;
   left: 0;
   background-color: #000;
   color: #fff;   
   width: 100%;
   font-size: 12px;
   line-height: var(--footer-height);
   /*border: red solid 1px;*/
}

@media (max-width: 720px) {

   .navbar{
      max-height: var(--navbar-mob-height);
      height: var(--navbar-mob-height);
   }
   
   .navbar .logo {
      max-height: 40px;
     padding: 5px 0 5px 0;
   }

   .goBackBar{
      font-size: 12px;
   }

   .content-area{
      top: var(--navbar-mob-height);
   }

   .mob-half-height{
      height: 50%;
   }

   .grid-desc {
      line-height: 1.5em;
      padding: 5px 15px 10px 15px;
      font-size: 13px;
   }

   .grid-desc h3{
      padding: 7px 0;
   }

}

@media (max-width: 320px) {

.navbar{

 display: block;
}


.navbar .logo {
   display: inline-block;
   max-height: 40px;
/*
   left: 0px;
   margin: 0;
   padding:0;
   */
   float: left;
   
}

.goBackBar{

   
   float: right;
   
   line-height:50px;
   
}

}