@charset "utf-8";
/* CSS Document */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

header,
nav,
footer,
div {
  width: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
	height: 100%;
	margin: 0;
  padding: 0;
}

/*header*/
header p:nth-child(1) {
position: fixed;
font-size: 6vw;
font-family: 'Niconne', cursive;
color: rgb(255, 255, 255);
text-shadow: 3px 3px #750303;
margin-left: 10px;
z-index: 100;
top: 40px;
}

.today {
  position: sticky;
  margin-right: auto;
  z-index: 200;
} 

.today img {
  position: fixed;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  right: 20px;
  margin-top: 90px;
  float: right;
}    

.today img:hover {
  box-shadow: 0 0 10px 10px rgba(1, 35, 46, 0.5);
}

header p {
  font-size: 2.5vmin;
  font-style: italic;
  color: rgb(109, 89, 89);
  text-align: center;
  margin: 35px;
}

header span {
  font-weight: bold;
  color: red;
}

.slides {
  display:none;
  margin-top: 0;
  max-height: 770px;
  position: relative;
}  

/*nav*/
nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
  margin-left: auto;
  padding: 0;
  background: #ff6e6f;
  opacity: 0.8;
  overflow: hidden;
}

nav img {
  max-width: 30vh;
}

nav ul {
  display: flex;
  list-style: none;
  text-align: center;
  overflow: hidden;
  line-height: 50px;
}

nav li {
	flex: 1;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 5px 20px;
  font-size: 1em;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
nav ul li a:hover,
nav ul li a.active {
  /* background: #343434; */
  font-weight: bold;
  text-shadow: 2px 2px #000000;
}

/*main*/
section#section1 {
  padding: 0;
  height: 100%;
}

section#section2 {
  font-size: 1.2em;
  text-align: center;
  padding: 40px;
}

h2 {
  color:#4d4646;
  text-align: center;
  margin: 20px;
  font-size: 2rem;
  font-family: 'Signika', sans-serif;
}

/*gallery*/
.box-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
  "box-1 box-1 box-7 box-4 box-10"
  "box-3 box-9 box-12 box-5 box-11" 
  "box-2 box-8 box-8 box-6 box-6";

  grid-gap: 5px;
}

.box-01 {
	grid-area: box-1;
}

.box-02 {
	grid-area: box-2;
}

.box-03 {
	grid-area: box-3;
}

.box-04 {
	grid-area: box-4;
}

.box-05 {
	grid-area: box-5;
}

.box-06 {
	grid-area: box-6;
}

.box-07 {
	grid-area: box-7;
}

.box-08 {
	grid-area: box-8;
}

.box-09 {
	grid-area: box-9;
}

.box-10 {
	grid-area: box-10;
}

.box-11 {
	grid-area: box-11;
}

.box-12 {
	grid-area: box-12;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  max-width: 48%;
  margin: auto;
  margin-bottom: 50px;
}



/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.slides_puls {
  position: relative;
}

.plusslide {
  position: absolute;
  top: 50%;
  transform: translate(0%,-50%);
  z-index: 999;
  margin: 0;
  text-align-last: justify;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  padding: 2px 16px;
  color: rgb(0, 0, 0);
  border: 4px solid #ddd;
}

/* order button */
.order_button {
background-color: rgb(255, 255, 255);
border: 1px solid black;
outline: 1px solid #ddd;;
outline-offset: 3px;
text-align: center;
padding:2px;
color: rgb(110, 107, 107);
font-weight: bold;
font-size: 1.2rem;
}

.caption-container p:nth-child(2):hover{ 
  transform: scale(1.2);
  }
  
.caption-container a {
    text-decoration: none;
  }
  
.box-board:after {
  content: "";
  display: table;
  clear: both;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/*contact*/
#contact, #order {
  max-width: 960px;  
  margin: 30px auto;
}

#contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 50px;  
}

fieldset {
  border:0 none;
}

legend {
  font-style: italic;
}

label {
  margin-top: 30px;
	display: block;
  margin-bottom: 10px;
  color: darkslategray;
  font-weight: bold;
  font-size: 1.1rem;
}

input {
  width: 100%;
  padding: 5px;
}

textarea {
	display: block;
	width: 100%;
	height: 200px;
}

input[type="submit"]{
	margin-top: 15px;
  width: auto;
  float: right;	
}

.shop_info p{ 
  margin: 0;
  padding-bottom: 10px;
}

.shop_info span {
  color:red;
  font-weight: bold;
}

iframe{
  width: 90%;
  height: 75%;
  border: 0;
}

/*order*/

#order {
  margin-top: 250px;
  margin-bottom: 100px;
}

#order form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 50px;
}

#order p{
  text-align: center;
  font-style: italic;
}

fieldset input[type="radio"], [type="checkbox"] {
  display: inline-block;
  width: auto;
}

.check {
  display: inline;
  font-weight: normal;
  font-size: 0.8rem;
}

#chooseflower {
  width: 70%;
  border:0 none;
  padding: 10px;
  background-color: rgb(216, 223, 199);
  color:rgb(62, 32, 32);
}

optgroup {
  font-size: 0.8rem;
}

option {
  font-size: 0.7rem;
}

#btn_submit_1 {
  margin-top: 220px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 30px;
  z-index: 200;
  border: none;
  outline: none;
  background-color: #555;
  cursor: pointer;
  padding: 12px;
  border-radius: 50%;
  margin-bottom: 60px;
  width: 40px;
  height: 40px;
}

i {
  border: solid rgb(255, 255, 255);
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 5px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

#myBtn:hover {
  background-color: rgba(1, 35, 46, 0.5);
  animation: fly 1s ;
}

@keyframes fly{
  0% {
    bottom: 15px;
  }
  50% {
    bottom: 50px;
  }
  100% {
    bottom: 15px;
  }
}

/* footer */
footer {
  padding: 20px;
  background: #ffffff;
  color: rgb(0, 0, 0);
  border-top: 1px dotted rgb(182, 182, 185);
  text-align: center;
  display: flex;
  flex-direction: row;
} 

.copyright {
  display: flex;
  align-items: center;	
  text-decoration: none;
}
  
.copyright p {
  margin: 0;
  margin-right: 12px;
}
  
footer ul {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
}
  
footer img{
  width: 30px;
  display: block; 
}
  
footer li {
  text-decoration: none;
  margin-left: 12px;
}

@media only screen and (max-width: 1400px) {
.container {
  max-width: 77%;
}
}

@media only screen and (max-width: 1100px) {
header p:nth-child(1) {
  position: absolute;
}
      
nav ul li a {
  padding: 5px;
}

.today img {
  max-width: 22vh; 
} 

nav ul {
  line-height: 32px;
}

footer {
  padding: 14px;
}

#order {
  margin-top: 100px;
  margin-bottom: 20px;
}
}

@media only screen and (max-width: 1100px) and (orientation: portrait) {
nav img {
  max-width: 20vh;
}
#chooseflower {
  max-width: 54%;
}
}

@media only screen and (max-width: 800px) {
header p:nth-child(1) {
  position: fixed;
  top: 0px;
}

nav {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 0;
  margin: 0;
}  

nav ul {
  -webkit-padding-start: 0px;
  line-height: normal;
  margin-right: 8px;
}

.today img {
  margin-top: 50px;
}    

.container {
  max-width: 90%;
}

#contact {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  max-width: 90%;  
}

#order {
  max-width: 90%;
}

#order form {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.shop_info {
  padding: 10px;
  text-align: center;
  margin-top: 20px;
}

.shop_info p:nth-child(2) {
  max-width: 200px;
  margin: auto;
}
#btn_submit_1 {
  margin-top: 50px;
  margin-bottom: 30px;
}

#myBtn {
  font-size: 0.8rem;
  padding: 10px;
  right: 5px;
  opacity: 0.5;
  margin-bottom: 50px;
}
  
  #chooseflower {
    max-width: 80%;  
}
}

@media only screen and (max-width: 500px) {
header p:nth-child(1) {
  position: absolute;
  font-size: 1.8rem;
  max-width: 140px; 
}

header p {
  font-size: 1rem;
}
    
header span {
  font-size: 1.2rem;;
}

.today img {
  position: absolute;
  margin: 0;
  min-width: 22vh;
    top: 10px;
    right: 10px;
}
    
nav ul {
  font-size: 0.8rem;
}

section#section2 {
  padding: 0 20px 0 20px;
  font-size: 0.8rem;
  margin-bottom: 60px;
}
    
h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 3rem;
}

.prev,
.next {
  margin-top: -138px;
}

/*gallery*/

.box-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
  "box-1 box-1 box-7" 
  "box-4 box-10 box-3"
  "box-9 box-12 box-5"
  "box-11 box-8 box-8"
  "box-6 box-6 box-2";
  grid-gap: 5px;
}

.order_button {
  padding:2px;
  font-size: 1rem;
}

.container {
  max-width: 100%;
  margin-bottom:60px;
}

#contact {
  max-width: 100%;  
}

label {
  margin-top: 10px;
  margin-bottom: 0px;
}

textarea {
	height: 100px;
}

#order {
  max-width: 100%; 
}
  
.copyright p {
  margin: 5px;
}

footer {
  padding: 10px;
  margin-top: 10px;
}  
      
footer img{
  width: 25px;
}
      
footer li {
  margin-left: 5px;
}
}

@media only screen and (max-width: 400px) {
.today img {
  min-width: 18vh;
} 

#myBtn {
  margin-bottom: 35px;
}  

.container {
  max-width: 100%;
  margin-bottom: 30px;
}  

.copyright p {
    font-size: 0.8rem;
} 
}