* {
  box-sizing: border-box;
}

.filter-box {
	display: none;
	width: 40px;
}

body {
      background-color: black;
      color: black;
      font-family: Arial, sans-serif;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.625;
      margin: 0;
      min-height: 100vh;
    }

a:link {
	text-decoration: none;
}

/*
a:hover {
	color: #f9b8b6;
}
*/
ul {
	list-style-type: none;
}
    
    .site-navigation {
		overflow: hidden;
		background-color: #656160;
		position: fixed;
  		top: 0;
  		width: 100%;
  		z-index: 1000;
    }
  
    .site-navigation a {
		float: left;
		display: block;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 1.4rem;
		color: white;
    }
    
    .site-navigation a:hover {
    		color: #f9b8b6;
    }
    
    /*
    .site-navigation {
      color: white;
    }
    */
    .site-navigation .icon {
      display: none;
    }
    
    .site-title {
      font-size: 4rem;
    }
    
    .site-title {
      font-family: Georgia;
    }
    
    .site-header {
		width: 100%;
		height: 300px;
		color: white;
		text-align: -moz-center;
		text-align: center;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60px;
		background-image: url('https://roses.nyc3.digitaloceanspaces.com/header_20230608-048_GabrielOak.jpg');
    }
    
    .box-1 {
      padding: 10px;
      width: inherit;
    }
    
    .box-2 {
      display: flex;
      justify-content: center;
      flex-direction: row;
    }
    
    .box-3 {
	    margin-right: 10px;
	    margin-left: 10px;
	    width: 25%;
	    background-color: white;
	    border-radius: 10px;
    }
    
    .vertical {
      
    }
    
    .container-1 {
     	background-color: #fdf9f7;
     	padding-bottom: 10px;
    		padding-top:10px;
     	width: inherit;
    }
    
    .container-2 {
      background-color: #fdf3f2;
      padding-bottom: 40px;
    }
    
    .container-3 {
      background-color: #fde6e5;
    }
    
    .menu-box {
      
    }
    
    .content-title {
      margin-left: auto;
      margin-right: auto;
      font-family: Georgia;
      font-size: 1.8rem;
      padding: 10px;
      
    }
    
    .content-container {
      	max-width: 1936px;
  		margin: auto;
		background-color: #fdf9f7;
    }
    
    .center {
      text-align: center;
      text-align: -moz-center;
      text-align: -webkit-center;
    }
    
    .left {
		text-align: left;
		text-align: -moz-left;
		text-align: -webkit-left;
    }
    
    .content-small-text {
      font-size: 1.1rem;
    }
    
    .text-padding {
      padding-left: 20%;
      padding-right: 20%;
      padding-bottom: 20px;
    }
    
    .padding-10 {
      padding: 10px;
    }
    
    .sheet-1 {
      padding: 10px;
      width: 20%;
    }
    
    .sheet-1-img-frame {
      overflow: hidden;
      height: 80%;
    }
    
    .book-1 {
      display: flex;
      flex-direction: row;
      width: 80%;
      justify-content: center;
    }
    
    .main-small-img {
      width: 100%;
      height: 100%;
    }
    
    .dropbtn-holder{
    }
    
    .dropbtn-box {
      padding: 5px;
      margin: 5px;
      width: 80%;
    }
    
    .dropbtn-select {
		background-color: #fdf4f3;
		color: black;
		padding: 5px 15px 5px 15px;
		font-size: 1.1rem;
		border: solid #251b1b 1px;
		cursor: pointer;
		border-radius: 7px;
		width: 100%;
    }
    
  .footer {
      	height: 50px;
      	margin: 0 auto;
      	text-align: center;
      	background-color: #fde6e5;
    }
    
    .gallery-frame {
		padding: 0 20px 0 20px;
  		display: flex;
  		flex-direction: row;
    }
    
    .gallery-navigation-container {
		padding-left: 10px;
  		padding-right: 10px;
		background-color: #fdf3f2;
  		padding-bottom: 40px;
		min-width: fit-content;
    }
    
    .gallery-container {
		width: auto;
		padding-left: 10px;
  		padding-right: 10px;
		margin-left: 20px;
		display: grid;
  		grid-template-columns: repeat(12,minmax(0,1fr));
		grid-gap: 10px;
    }
    
    .navigation-box {
    		border: solid blue 1px;
    }
    
    /*checkbox round*/
	.checkbox-round {
	    width: 1.5em;
	    height: 1.5em;
	    background-color: white;
	    border-radius: 50%;
	    vertical-align: middle;
	    border: 1px solid grey;
	    appearance: none;
	    -webkit-appearance: none;
	    outline: none;
	    cursor: pointer;
	}
	
	.checkbox-round:checked {
	    border: 3px solid gray;
	}
	
	.box-title {
		color: #7e2f14;
  		border-bottom: solid #7e2f14 1px;
		margin-bottom: 20px;
	}
	
	.fa-filter {
		color: #7e2f14;
	}
	
	.fa-filter:hover {
		font-size: larger;
	}
	
	.picture-box {
		overflow: hidden;
  		padding: 20px;
		float: left;
		grid-column: span 3/ span 3;
		background-color: white;
  		border-radius: 5px;
	}
	
	.picture-frame {
		max-width: 480px;
  		max-height: 360px;
		margin: auto;
 		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.picture-frame img {
		object-fit: cover;
	}
	
	.picture-title {
		color: initial;
	}
	
	.picture-desc {
		color: initial;
		font-style: italic;
		font-size: smaller;
	}
	
	.gallery-img {
  		display: block;
  		width: 340px;
		height: 255px;
	}
	
	.slides-container {
		position: relative;
		max-width: 580px;
		float: left;
		margin-right: 20px;
	}
	
	.slides-box {
		display: none;
	}

	.slides-box img{
		width: 100%;
		object-fit: cover;
    }
    
    .numbertext {
		color: #f2f2f2;
  		font-size: 1.4rem;
  		padding: 8px 12px;
  		position: absolute;
	}
	
	.cursor {
		cursor: pointer;
	}
	

	/* Next & previous buttons */
	.prev,
	.next {
		cursor: pointer;
		position: absolute;
		top: 40%;
		width: auto;
		margin-top: -50px;
		color: white;
		font-weight: bold;
		font-size: 1.4em;
		border-radius: 0 3px 3px 0;
		user-select: none;
		-webkit-user-select: none;
	}
	
	/* Position the "next button" to the right */
	.next {
		right: 0%;
  		padding-right: 20px;
	}
	
	.prev {
		padding-left: 20px;
	}
	
	div.row {
    overflow-x: scroll;
    display: flex;
    scroll-snap-type: x mandatory;
	}
	
	.row:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.slideshow-container {
		
	}
	
	.slideshow-text {
		font-size: initial;
	}
	
	.roseSlideshow {
		display: none;
	}
    .roseSlideshow img {
    	vertical-align: middle;
		}
    
	.slideshow-container {
		max-width: 1280px;
		width: 100%;
		position: relative;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	/* Caption text */
	.slideshow-text {
	  color: #f2f2f2;
	  font-size: 15px;
	  padding: 8px 12px;
	  position: absolute;
	  bottom: 8px;
	  width: 100%;
	  text-align: center;
	  font-size: x-large;
	}
	
	/* Number text (1/3 etc) */
	.slideshow-numbertext {
	  color: #f2f2f2;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}
	
	/* Fading animation */
	.slideshow-fade {
	  animation-name: slideshow-fade;
	  animation-duration: 1.5s;
	}
	
	/* Hide scrollbar for Chrome, Safari and Opera */
	.row::-webkit-scrollbar {
		display: none;
	}
	
	/* Hide scrollbar for IE, Edge and Firefox */
	.row {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
	
	/*Columns side by side */
	.column {
		float: left;
		display: flex;
		direction: ltr;
		background-color: #fde6e5;
		box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
	}
	
	.column img{
		height: 6rem;
		object-fit: cover;
		margin:0.5rem;
		scroll-padding-left: 10px;
	}
	
	.demo {
		opacity: 0.6;
	}
	
	.active,
	.demo:hover {
		opacity: 1;
	}
	
	.container-info-pics {
		padding: 20px;
  		background-color: white;
	}
	
	.container-display {
		display: flex;
  		flex-direction: row;
		padding: 20px;
	}
	
	.side-title-box {
		padding: 20px;
		min-width: 20%;
		font-size: 1.6rem;
		text-align: left;
	}
	
	.char-box {
		padding-right: 20px;
		width: 30%;
	}
	
	.divider {
		border-bottom: solid #f9b8b6 1px;
	}
	
	.divider-box {
		padding-left: 40px;
		padding-right: 40px;
	}
	
	
	.padAll-20 {
		padding: 20px;
	}
	
	.flex-column {
		display: flex;
  		flex-direction: column;
	}
	
	.red {
		color: red;
	}
	
	.green {
		color: green;
	}
	.orange {
		color: orange;
	}
	.blue {
		color: blue;
	}
	
	.yellow {
		color: yellow;
	}
	
	.companion-container {
		display: flex;
		flex-direction: column;
	}
	
	.companion-display {
		display: flex;
		flex-direction: row;
	}
	
	.companion-box {
		
	}
	
	.companion-wrap {
		margin-bottom: 10px;
		background-color: white;
  		border-radius: 7px;
		padding: 10px;
	}
	
	.companion-wrap a, .content-text a, .side-title-box a {
		color: black;
	}
	
	.companion-wrap a:hover, .content-text a:hover, .side-title-box a:hover {
		color: #f9b8b6;
	}
	
	.f-size-inh {
		font-size: inherit;
	}
	
	.companion-text {
		font-size: inherit;
	}
	
	.leaf {
		padding-right: 10px;
	}
	
	.content-text {
		margin-bottom: 10px;
		padding-left: 40px;
	}
	.content-box {
		margin: auto;
		min-height: calc(50vh - 70px);
	}
	.text-wrap {
		padding-left: 10px;
		width: 100%;
	}
	
	.info-list li {
		background-color: white;
		margin-bottom: 7px;
  		padding: 5px 10px 5px 10px;
	}
	
	.info-subtitle {
		color: #7e2f14;
	}
	
	.info-list {
		padding-left: 0px;
	}
	
	.side-title {
		
	}
	
	.info-list-box {
		width: 100%;
	}
	
	.rosery-list {
		background: white;
		border-radius: 10px;
		padding: 20px 10px 20px 30px;
	}
	
	.content-title-box {
		width: 30%;
  		font-size: 1.6rem;
  		text-align: left;
	}
	
	.site-header a {
		color: white;
	}
	
	.reading-label {
		background-color: #F5F5F5;
  		padding: 10px;
  		border-radius: 10px;
		margin-bottom: 10px;
}
	}
	
	.login-box a {
		color:black;
	}
	
	.login-box ul {
		padding: 0;
	}
	
	.login-box {
		padding: 10px 40px 10px 40px;
	}
	
	.login-input {
		width: 100%;
		padding: 10px;
		font-size: inherit;
	}
	
	.login-btn {
		padding: 5px 10px 5px 10px;
		font-size: inherit;
		background-color: #656160;
		color: white;
		border-radius: 7px;
	}
	
	.full-size-box {
		padding: 20px 10px 20px 40px;
  		width: 70%;
	}
	
	.right-side {
		margin-right: 0;
  		margin-left: auto;
  		display: block;
	}
	
	.col-1 {
		column-count: 2;
 		column-gap: 0;
	}
	
	.min-width-80 {
		min-width: 80%;
	}
	.alphabet-menu {
		
	}
	
	.alphabet-letter {
		margin: 10px;
	}
	
    
    @media only screen and (max-width: 1920px) {
    		.site-header {background-image: url('https://roses.nyc3.digitaloceanspaces.com/header_1920_20240528-063_StrawberryHill.png')}
    }
    
    @media only screen and (max-width: 1680px) {
    		.gallery-container {grid-template-columns: repeat(9,minmax(0,1fr));}
    }
    
    @media only screen and (max-width: 1240px) {
    		.gallery-container {grid-template-columns: repeat(6,minmax(0,1fr));}
    }
    
    @media only screen and (max-width: 1024px) {
    		.site-header {background-image: url('https://roses.nyc3.digitaloceanspaces.com/header_1024_20230608-051_PrincessAlexandraOfKent.png')}
    }
    
    @media only screen and (max-width: 860px) {
		/* For mobile phones: */
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { display: flow-root; }
		/* Behave  like a "row" */
		td {border: none; border-bottom: 1px solid #eee; position: relative; width: 100%;}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		.site-navigation a:not(:first-child) {display: none;}
		.site-navigation a.icon {
		 float: right;
		 display: block;
		 color: white;
		 font-size: 1.4rem;
		}
		.site-navigation.responsive {position: relative;}
		.site-navigation.responsive .icon {
		 position: absolute;
		 right: 0;
		 top: 0;
		}
		.site-navigation.responsive a {
			float: none;
			display: block;
			text-align: left;
			box-shadow: 1px 0px 1px 0px #f9b8b6;
		}
		
		.site-header{
		 height: 240px;
		}
		.text-padding {
		 padding-left: 10%;
		 padding-right: 10%;
		}
		.box-2 {
		 flex-direction: column;
		}
		.box-3 {
		 width: 100%;
		 margin-right: 0;
		 margin-left: 0;
		}
		.book-1 {
		 width: auto;
		}
		.title-small {
		 font-size: 1.3rem;
		}
		.filter-box {
		 display: inline-block;
		 margin-left: 20px;
		}
		.gallery-navigation-container {
		display: none;
		font-size: 1.2rem;
		}
		.gallery-navigation-container.opened {
		display: inline;
		 position: absolute;
		 right: 10px;
		}
	    	.gallery-frame {
			padding: 0 10px 0 10px;	
		}
		.gallery-container {
			margin-left: 0px;
		}
		.container-display {
			flex-direction: column;
		}
		.side-title-box {
			min-width: 100%;
			text-align: center;
		}
		.char-box {
			padding-right: 0px;
			width: 100%;
		}
		.divider, .full-size-box {
			width: 100%;
		}
		
		.slides-container {
			float: none;
			margin: 0 auto;
		}
		.content-text {
			padding-left: 0px;
		}
		.min-width-80 {
			min-width: 100%;
		}
    }
    
    @media only screen and (max-width: 640px) {
    	.site-header {background-image: url('https://roses.nyc3.digitaloceanspaces.com/header_640_20240528-041_Boscobel.png')}
		.gallery-container {grid-template-columns: repeat(3,minmax(0,1fr));}
		.gallery-img {
			width: 100%;
			height: auto;
		}
		.slides-container {
			max-width: 340px;
		}
		.sheet-1 {
		  width: auto;
		}
		.book-1 {
		  flex-direction: column;
		}
    }
    
    @media only screen and (max-width: 503px) {
    	.rosery-list {
			padding: 10px 10px 10px 10px;
		}
    	.sheet-1-img-frame {
        height: 60%;
      }
    }
    
    @media only screen and (max-width: 430px) {
		.site-header {
		  height: 170px;
		}
		.site-title {
		  font-size: 3.1rem;
		}
		.text-padding {
		  padding-left: 0;
		  padding-right: 0;
		}
		.picture-box {
			padding: 10px;
		}
    }
    
    @media only screen and (max-width: 320px) {
    		.site-header {background-image: url('https://roses.nyc3.digitaloceanspaces.com/header_320_20230608_BurgundyIceberg.png')}
    }