@charset "UTF-8";
/* CSS Document */
body {
	margin: 0;
	margin-left: 6px;
	margin-right: 6px;
	padding: 0;
}
button{
	background-color: white;
	border: none;
}
button:hover{
	background-color: #EDEDED;
}
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FFFFFF;
	color: #8D1922;
	padding-left: 20px;
	
}
.social-media-icons{
	display: flex;
	background-color: #FFFFFF;
	color: #8D1922;
	padding-right: 20px;
	 
}
.brand-title {
	font-size: 20px;
	margin-left: 0px;
	height: 45px;
}
.navbar-links ul {
	margin: 0;
	padding: 0;
	display: flex;
}
.social-media-icons ul{
	display: flex;
	text-align: right;
}
.navbar-links li, .social-media-icons li {
	list-style: none;
}
.navbar-links li a{
	text-decoration: none;
	color: #8D1922;
	padding: 1.5rem;
	display: block;
	font-size: 20px;
	
}

.navbar-links li:hover {
	background-color: #EDEDED;
}

.brand-title:hover{
	background-color: #EDEDED;
	margin-left: 0px;
}
.toggle-button{
	position: absolute;
	top: 17px;
	right: 15px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
}
.toggle-button .bar{
	height: 3px;
	width: 100%;
	background-color: #8D1922;
	border-radius: 10px;
}

@media (max-width: 600px){
	.toggle-button, .social-media-icons {
		display: flex;
	}

	.navbar-links{
		display: none;
		width: 100%;
	}
	.social-media-icons{
		display: table-row,block;
		margin-left: auto;
	}
	.navbar{
		flex-direction: column;
		align-items: flex-start;
	}
	.navbar-links ul{
		flex-direction: column;
		width: 100%;
		text-align: left;
	}
	.social-media-icons ul{
		flex-direction: row;
		width: 940px;
        text-align: right;
        margin: 0 auto;
	}
	.navbar-links li{
		text-align: left;
	}
	.social-media-icons li{
        text-align: right;
	}
	.social-media-icons li a{
		padding: .5rem 1rem;
	}
	.navbar-links.active, .social-media-icons.active{
		display: flex;
	}
.brand-title {
	margin-top: 10px;
	margin-left: 0px;
}
}


/* Style all font awesome icons */
.fab {
  padding: 2px;
  width: -5px;
  text-decoration: none;
  color: #8D1922;
  display: block;
}

/* Add a hover effect if you want */
.fab:hover {
  opacity: 0.7;
}

div.gallery img {
  width: 100%;
  height: auto;
  margin-bottom: 3%;
  padding-left: .50%;
  padding-right: .50%;
}
* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
 /* Style the Image Used to Trigger the Modal */
.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}







@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media (max-width: 376px) {
  .responsive {
    width: 100%;
	  }
}

@media (max-width: 320px) {
  .responsive {
    width: 100%;
	  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

@media only screen and (min-width: 400px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/* Extra Media Query Breakpoints */

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}


/* For extremely small screen devices (595px and below) */
@media only screen and (max-width: 595px) {}

/* Small screen devices (600px and above) */
@media only screen and (min-width: 600px) {}

/* Medium screen devices (768px and above) */
@media only screen and (min-width: 768px) {}

/* Big screen devices (889px and above) */
@media only screen and (min-width: 889px) {}

/* Extra big screen devices (1200px and above) */
@media only screen and (min-width: 1200px) {}

/* ----------- OnePlus 6 ----------- */
@media only screen and (min-width : 412px ) and ( max-width : 869px ){}

/* ----------- iPhone 11 ----------- */
/* 1792x828px at 326ppi */ 
@media only screen 
and (device-width: 414px) 
and (device-height: 896px) 
and (-webkit-device-pixel-ratio: 2) { }

/* ----------- iPhone 12, 12 Pro ----------- */

/* 2532x1170 pixels at 460ppi */ 
@media only screen 
and (device-width: 390px) 
and (device-height: 844px) 
and (-webkit-device-pixel-ratio: 3) { }

/* 2340x1080 pixels at 476ppi */ 
@media only screen
and (device-width: 360px) 
and (device-height: 780px) 
and (-webkit-device-pixel-ratio: 3) { }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}


@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}