/* =======================================================
 *
 *     CSS for index.html
 *     CSS for index.html
 *     CSS for index.html
 *     CSS for index.html

 * ======================================================= */


 <style>

 /* == LETS MODIFY SOME COLORS AND STYLE FOR THE DEMO == */

   /* hide no more entries button */
   .media-boxes-no-more-entries{
     display: none;
   }

   /* make your own style of the filter */
   .filters-container{
     margin-bottom: 20px;
   }
   .custom-filter{
     padding: 0;
     text-align: right;
   }
   .custom-filter li{
     list-style: none;
     display: inline-block;
     margin-left: 18px;
     font-size: 12px;
   }
   .custom-filter li a{
     color: #999;
     text-decoration: none;
   }
   .custom-filter li a:hover{
     color: #333;
   }
   .custom-filter li a.selected{
     color: #D1474C !important;
   }

   /* Set the style of the thumbnail overlay items */
   .media-box-title{
     color: #fff;
     font-size: 11px;
     margin-bottom: 5px;
     text-transform: uppercase;
       letter-spacing: 2px;
       line-height: 28px;
   }
   .media-box-date{
     color: #F2F2F2;
     font-size: 10px;
   }

   /* Remove box shadow and border-radius from the media boxes */
   .media-box-container{
       -webkit-border-radius: 0px;
          -moz-border-radius: 0px;
             border-radius: 0px;

       -webkit-box-shadow: none;
          -moz-box-shadow: none;
            -o-box-shadow: none;
           -ms-box-shadow: none;
             box-shadow: none;
   }

   /* thumbnail overlay background */
   .thumbnail-overlay{
       background-color: rgba(0,0,0, .40);

       -webkit-transition: background-color 0.2s ease-out;
          -moz-transition: background-color 0.2s ease-out;
            -o-transition: background-color 0.2s ease-out;
               transition: background-color 0.2s ease-out;
   }

   /* hover effect on the thumbnail-overlay */
   .thumbnail-overlay:hover{
       background-color: rgba(0,0,0, .20) !important;
   }

   /* hover effect on the image */
   .media-box-image img{
       -webkit-transition: transform 0.6s ease-in-out;
          -moz-transition: transform 0.6s ease-in-out;
            -o-transition: transform 0.6s ease-in-out;
           -ms-transition: transform 0.6s ease-in-out;
               transition: transform 0.6s ease-in-out;

       -webkit-transform-origin: bottom left;
          -moz-transform-origin: bottom left;
            -o-transform-origin: bottom left;
           -ms-transform-origin: bottom left;
               transform-origin: bottom left;
   }
   .media-box-image:hover img{
       -webkit-transform: scale(1.2) translate(-20px);
          -moz-transform: scale(1.2) translate(-20px);
            -o-transform: scale(1.2) translate(-20px);
           -ms-transform: scale(1.2) translate(-20px);
               transform: scale(1.2) translate(-20px);
   }

   /* Change alignment in grid 2 */
   #grid2 .thumbnail-overlay>div.aligment>div.aligment{
     vertical-align: bottom;
     padding-bottom: 40px;
   }

   .thumbnail-overlay .media-box-title{
     font-size: 16px;
   }

   .thumbnail-overlay .media-box-date{
     font-style: italic;
     font-size: 12px;
   }








/* set size NAV bar gors to hamburger */
@media (max-width: 992px) {
	 .navbar-header {
			 float: none;
	 }
	 .navbar-left,.navbar-right {
			 float: none !important;
	 }
	 .navbar-toggle {
			 display: block;
	 }
	 .navbar-collapse {
			 border-top: 1px solid transparent;
			 box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	 }
	 .navbar-fixed-top {
			 top: 0;
			 border-width: 0 0 1px;
	 }
	 .navbar-collapse.collapse {
			 display: none!important;
	 }
	 .navbar-nav {
			 float: none!important;
			 margin-top: 7.5px;
	 }
	 .navbar-nav>li {
			 float: none;
	 }
	 .navbar-nav>li>a {
			 padding-top: 10px;
			 padding-bottom: 10px;
	 }
	 .collapse.in{
			 display:block !important;
	 }
}

/* logo*/
.navbar-brand img{
 height: 40px;
 width:auto;
}



/* ====================================================================== *
	 BOOTSTRAP
* ====================================================================== */

/* Breakpoint 	Class infix 	Dimensions
 X-Small 	None 	<576px
 Small 	sm 	≥576px
 Medium 	md 	≥768px
 Large 	lg 	≥992px
 Extra large 	xl 	≥1200px
 Extra extra large 	xxl 	≥1400px

 $grid-breakpoints: (
	 xs: 0,
	 sm: 576px,
	 md: 768px,
	 lg: 992px,
	 xl: 1200px,
	 xxl: 1400px
 ); */


 h1, h2, h3, h4, h5, h6 {
	 font-family: 'Open Sans';
	 font-weight: 500;
 }

		 h1 {
			 font-size: 50px;
			 color:#90011a;
		 }

		 h2 {
			 font-size: 50px;
			 color:#90011a;
			}

		 h3 {
			 font-size: 50px;
			 color:#90011a;
		 }

		 h4 {
				font-size: 50px;
				color:#90011a;
		 }

		 h5 {
			 font-size: 50px;
			 color:#90011a;
		 }

		 h6 {
			 font-size: 50px;
			 color:#90011a;
		 }

     .btn-submit {
      background-color: #90011a !important;
      color: #ffffff;
      height:auto;
      width:75%;
    }


     .btn-submit:hover{
      opacity: 0.5;
      transform: scale(1.2,1.2);
    }



		 p {
			 font-size: 20px;
		 }

		 .accents {
			 display: inline;
			 padding-top:1.5%;
			 height:2%;
			 width:2%;
			 min-width: 2%;
			 margin-top: -2%;
		 }


		 .footer-image {
					 width:100%;
					 position: relative;
					 bottom:0;
					 z-index:-10;
		 }

		 img {
				 position: relative;
				 display: block;
				 width:100%;
		 }

		 .footer-text {
			 position: absolute;
			 left:15%;
			 margin-top:12%;
			 font-size: 35px;
			 color:#90011a;
		 }

		 .footer-links a {
			 position: relative;
			 align-items: center;
			 margin-top:4%;
			 font-size: 35px !important;
			 color:#90011a;
		 }

		 .text-padding {
			 margin-left: 5% !important;
			 margin-right: 5% !important;
		 }

     .footericons {
       display: flex;
       justify-content: center;
			 height:65%;
			 width:65%;
       padding-bottom: 30%;

     }

    .footericons:hover{
      opacity: 0.5;
      transform: scale(1.2,1.2);
    }

    .footer-icon-padding {
      margin-left: 12%;

      }

/* set size H text for smaller screens  set size H text for smaller screens  set size H text for smaller screens */
/* set size H text for smaller screens  set size H text for smaller screens  set size H text for smaller screens */
/* set size H text for smaller screens  set size H text for smaller screens  set size H text for smaller screens */


  @media (max-width: 992px) {

  		 h1 {
  			 font-size: 40px;
  		 }

  		 h2 {
  			 font-size: 50px;
  		 }

  		 h3 {
  			 font-size: 40px;
  		 }

  		 h4{
  				font-size: 35px;
  		 }

  		 h5 {
  			 font-size: 30px;
  		 }

  		 h6 {
  			 font-size: 30px;
  		 }

  		 p {
  			 font-size: 16px;
  		 }

  		 .text-on-image {
  			 padding-top: 10%;
  		 }

  		 .accents {
  			 display: inline;
  			 padding-top:4.5%;
  			 height:2%;
  			 width:2%;
  			 margin-top: -5%;
  		 }

  		 .footer-text {
  			 position: absolute;
  			 left:15%;
  			 margin-top:12%;
  			 font-size: 18px;
  			 color:#90011a;
  		 }

  		 .footer-links a {
  			 margin-top:4%;
  			 font-size: 25px !important;
  		 }

       .footericons {
        display: inline;
        height:75%;
        width:75%;
        min-width: 75px;

       }

   }

/* set size H text for smaller screens */
   @media (max-width: 576px) {

  		 h1 {
  			 font-size: 30px;
  		 }

  		 h2 {
  			 font-size: 30px;
  		 }

  		 h3 {
  			 font-size: 25px;
  		 }

  		 h4 {
  				font-size: 25px;
  		 }

  		 h5 {
  			 font-size: 20px;
  		 }

  		 h6 {
  			 font-size: 20px;
  		 }

  		 p {
  			 font-size: 16px;
  		 }

  		 .text-on-image {
  			 padding-top: 0%;
  		 }

  		 .accents {
  			 display: inline;
  			 padding-top:5%;
  			 height:1.5%;
  			 width:1.5%;
  		 }

  		 .footer-text {
  			 position: absolute;
  			 left:15%;
  			 margin-top:12%;
  			 font-size: 14px;
  			 color:#90011a;
  		 }

  		 .footer-links a {
  			 margin-top:4%;
  			 font-size: 20px !important;
  		 }

       .footericons {
        display: inline;
        height:100%;
        width:100%;
        min-width: 75px;

       }

       .footer-icon-padding {
   margin-left: 0%;

         }

   }


/* ====================================================================== *
	 Swapping images based on device/screen size
* ====================================================================== */

		 .Ipad,.Mobile{display:none;}

				 @media(max-width: 1200px){
					 .Desktop,.Mobile{
						 display:none;
					 }
					 .Ipad{
						 display:block;
					 }
				 }
				 @media(max-width: 992px){
					 .Desktop,.Ipad{
						 display:none;
					 }
					 .Mobile{
						 display:block;
					 }
				 }